/* ==========================================================================
   Project Detail — light theme for the main page (project.html, body.project-light)
   The header (components/project-header.css) stays dark (the page dark,
   #121212). Everything from Overview down (.project-lower) switches to the
   light theme — the homepage's light sections (Services, How I Work) —
   using only Design System tokens:
     background  --c-surface-container  (#F7F7F7)
     text        --c-ink                (#0E0E0E)
     muted text  --c-ink-faded          (ink at 40%)
   No frames or grid lines (layout/site-ui.css: no-lines, no-grid-lines).
   ========================================================================== */

/* the light block runs straight into the footer (no dark gap above it) */
.project-light .page {
  padding-bottom: 0;
}

.project-light .project-lower {
  position: relative;
  z-index: 1;
  margin-top: 0;                    /* the header keeps the dark space above it (pages/project.css) */
  padding-top: 120px;
  padding-bottom: var(--section-gap);
  background: var(--c-surface-container);
  color: var(--c-ink);
}

.project-light .project-lower > :not(.grid-lines) {
  position: relative;
  z-index: 1;
}

.project-light .project-story {
  margin-top: 0;
}

/* Small labels ("01/" numbers, Result captions, list dashes, eyebrow) use full
   ink on the light background: faded ink (40%) was only 2.6:1 on #F7F7F7,
   too faint for 13px mono. --c-ink is 18:1 (see DESIGN.md › Colors). */
.project-light .project-lower .t-muted,
.project-light .story__box li::before {
  color: var(--c-ink);
}

/* Section boxes and image cells: the section's own background, no frame */
.project-light .story__box,
.project-light .project-lower .media,
.project-light .project-lower .project-card__media {
  background: var(--c-surface-container);
}

/* Next project + "Explore all work" (the pill in ink, as on the homepage's
   light sections: ink stroke + text, hover → ink fill, white text) */
.project-light .next-project .eyebrow,
.project-light .project-card__details {
  color: var(--c-ink);
}

.project-light .project-lower .footer-cta-box {
  --pill-fg: var(--c-ink);
  --pill-fill: var(--c-ink);
  --pill-on-fill: var(--c-on-inverse);
}

@media (max-width: 809px) {
  .project-light .project-lower { padding-top: 80px; }
}

/* --------------------------------------------------------- dark story option
   A project whose own visuals are dark (projects.js › storyTheme: "dark",
   e.g. SmartFit) keeps the story on the page dark (#121212, --c-inverse under
   body.site-dark), so it runs on from the header. Same layout and spacing as
   the light story; only the colours swap, all from Design System tokens. */
.project-light .project-lower--dark {
  background: var(--c-inverse);
  color: var(--c-on-inverse);
}

.project-light .project-lower--dark .t-muted,
.project-light .project-lower--dark .story__box li::before,
.project-light .project-lower--dark .next-project .eyebrow,
.project-light .project-lower--dark .project-card__details {
  color: var(--c-on-inverse);
}

.project-light .project-lower--dark .story__box,
.project-light .project-lower--dark .media,
.project-light .project-lower--dark .project-card__media {
  background: var(--c-inverse);
}

.project-light .project-lower--dark .outcome {
  background: color-mix(in srgb, var(--ph-glow, var(--c-inverse)) 22%, var(--c-inverse));
}

.project-light .project-lower--dark .outcome__text {
  color: color-mix(in srgb, var(--c-on-inverse) 65%, transparent);
}

.project-light .project-lower--dark .footer-cta-box {
  --pill-fg: var(--c-on-inverse);
  --pill-fill: var(--c-on-inverse);
  --pill-on-fill: var(--c-ink);
}