/* =============================================================
   CVD — Project page template (Session 5)
   /work/[slug]  ·  depends on foundation.css + components.css
   ============================================================= */

.project { padding-top: var(--space-5); }

/* ---- Header: h1 spans full width, then two-column (tagline | spec sheet) ---- */
.project-header {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0 var(--space-7);
  align-items: start;
  padding-bottom: var(--space-7);
}
/* h1 is a direct child of header, spanning all columns */
.project-header .h1 {
  grid-column: 1 / -1;
  margin-bottom: var(--space-5);
}
/* Spec sheet — Swiss engineering-manual feel */
.project-meta { display: flex; flex-direction: column; margin: 0; }
.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.meta-row:last-child { border-bottom: 1px solid var(--color-border); }
.meta-row__k {
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
.meta-row__v {
  font-size: var(--type-small);
  color: var(--color-text);
  text-align: right;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Hero image (full content width) ---- */
.project-hero { margin: 0 0 var(--space-8); }
.project-hero figcaption {
  margin-top: var(--space-3);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Image source credit — matches gh-demo__cap pattern */
.img-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.img-cap a {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.img-cap a:hover { color: var(--color-text); border-color: var(--color-text); }

/* ---- Intro text: universal two-column overflow pattern ----
   One continuous prose block; text overflows into column 2.
   Short copy stays left; longer copy fills both columns.
   Place inside the header's left column div, replacing the tagline. */
.project-intro-cols {
  column-width: 280px;
  column-gap: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.project-intro-cols p {
  margin: 0 0 var(--space-4);
  break-inside: avoid;
}
.project-intro-cols p:last-child { margin-bottom: 0; }
.project-intro-cols a {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.project-intro-cols a:hover { border-color: var(--color-text); }

/* ---- Body copy (640px, centered in content area) ---- */
.project-body {
  max-width: var(--max-width-text);
  margin: 0 auto;
  padding-bottom: var(--space-8);
}
.project-body p { margin: 0 0 var(--space-4); }
.project-body p:last-child { margin-bottom: 0; }
.project-body a {
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.project-body a:hover { border-color: var(--color-text); }

/* ---- Project images (stacked, 32px gap; optional 2-up pairs) ---- */
.project-figures { display: flex; flex-direction: column; gap: var(--space-5); }
.project-figures figure { margin: 0; }
.project-figures figcaption,
.cs-feature figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.project-figures figcaption a.fig-credit,
.cs-feature figcaption a.fig-credit {
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.project-figures figcaption a.fig-credit:hover,
.cs-feature figcaption a.fig-credit:hover { color: var(--color-text); border-color: var(--color-text); }
.figure-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 600px) { .figure-pair { grid-template-columns: 1fr; } }

/* ---- Prev / next ---- */
.project-nav {
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-border);
  padding: var(--space-5) 0 var(--space-9);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.project-nav a { display: flex; flex-direction: column; gap: var(--space-2); }
.project-nav__next { align-items: flex-end; text-align: right; }
.project-nav__label {
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.project-nav__title {
  font-size: var(--type-h3);
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-soft);
}
.project-nav a:hover .project-nav__title { color: var(--color-text-muted); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .project-header { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* =============================================================
   CASE-STUDY MODULE  ·  .cs-*   (Session 6 — harmonization)
   -------------------------------------------------------------
   A shared, reusable editorial kit for project pages. Promoted
   out of the MyFit TT page so EVERY project draws from one set
   of patterns instead of reinventing them inline.

   TWO PROJECT MODES — both built from these same components:
     · GALLERY  (e.g. BESTIARY) — photography leads. Header →
       hero → figures. Use a single .cs-lead + .cs-did spine to
       state role & contribution; let the images carry the rest.
     · EDITORIAL (e.g. MyFit TT) — explanation leads. Numbered
       .cs-section blocks (eyebrow → lead → prose), compare
       tables, interactive diagrams, contribution grid.
   Choose per project by what the work needs to say. Rich
   product photography → gallery; systems / process work →
   editorial. Never invent a third vocabulary per page.

   PALETTE: monochrome ink for all page chrome and editorial type —
   black is the accent. The ONE sanctioned exception is a signature
   interactive diagram, which may use a dark stage + functional
   accent colors to read as an instrument panel. Scope that to the
   project page (see MyFit TT's local override), never the shared
   kit — the default .cs-pipe-stage below stays on --color-surface.

   IMAGERY RULES:
     · 16:9 (.ratio-16-9) — context, lifestyle, in-situ shots.
     · 1:1  (.ratio-1-1)  — isolated product cutouts ONLY, and
       always with .card-img--cutout so every white-background
       crop gets the same surface lift + hairline. This keeps
       the two registers reading as one deliberate system.
   ============================================================= */

/* ---- Isolated product cutout — surface lift + hairline ----- */
.card-img--cutout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

/* ---- At-a-glance spec strip ---- */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
  margin-top: var(--space-8);
}
.cs-stat__num {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100;
  font-weight: var(--weight-light);
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.cs-stat__label {
  margin-top: var(--space-3);
  font-size: var(--type-small);
  line-height: var(--leading-small);
  color: var(--color-text-muted);
}
@media (max-width: 600px) { .cs-stats { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); } }

/* ---- Section scaffolding + VERTICAL RHYTHM ----------------
   ONE rhythm scale governs the space between major blocks so every
   project page breathes identically. Never hand-tune these per page
   (no inline margins, no page-local overrides) — change the rule
   here and the whole site follows.
     · 96 (space-8) — between stacked sections, and beneath a section
        that is followed by a figure gallery (gallery mode).
     · 64 (space-7) — editorial text → a figure band inside a section.
     · 48 (space-6) — a section that hugs a hero directly above it;
        and the air beneath every .cs-lead (set on .cs-lead itself). */
.cs-section { padding-top: var(--space-8); }
.project-hero + .cs-section { padding-top: var(--space-6); }
.cs-section + .project-figures { margin-top: var(--space-8); }
.cs-section .project-figures { margin-top: var(--space-7); }
.cs-eyebrow {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.cs-eyebrow .num { color: var(--color-text-subtle); }
.cs-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--type-h2);
  line-height: var(--leading-head);
  letter-spacing: -0.005em;
  max-width: 760px;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.cs-prose {
  max-width: var(--max-width-text);
  color: var(--color-text-muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}
.cs-prose p { margin: 0 0 var(--space-4); }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose strong { color: var(--color-text); font-weight: var(--weight-medium); }

/* ---- Before / after compare ---- */
.cs-compare { margin-top: var(--space-6); max-width: var(--max-width-text); }
.cs-compare__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.cs-compare__row:first-child { border-top: 1px solid var(--color-border); }
.cs-compare__before {
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}
.cs-compare__arrow {
  font-size: var(--type-small);
  color: var(--color-text-subtle);
  flex-shrink: 0;
}
.cs-compare__after {
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--color-text);
}

/* ---- Interactive diagram — stepper + stage shell -----------
   Reusable scaffolding for any canvas-driven case-study demo.
   The stage is a paper-white inset (NOT a dark panel), matching
   product cutouts; the canvas inside is drawn in monochrome ink. */
.cs-pipe { margin-top: var(--space-6); }
.cs-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cs-step {
  position: relative;
  text-align: left;
  background: none;
  border: none;
  border-top: 2px solid var(--color-border);
  padding: var(--space-3) var(--space-2) 0 0;
  cursor: pointer;
  font-family: inherit;
}
.cs-step__bar {
  position: absolute; top: -2px; left: 0; height: 2px; width: 0;
  background: var(--color-text);
}
.cs-step__n {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  color: var(--color-text-subtle);
}
.cs-step.is-active .cs-step__n { color: var(--color-text); }
.cs-step__t {
  display: block;
  margin-top: 4px;
  font-size: var(--type-small);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-soft);
}
.cs-step.is-active .cs-step__t { color: var(--color-text); }
.cs-step:hover .cs-step__t { color: var(--color-text); }

.cs-pipe-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.cs-pipe-stage canvas { display: block; width: 100%; height: 100%; }
.cs-pipe__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--type-small);
  color: var(--color-text-muted);
}
.cs-pipe__hint {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
}
.cs-pipe__cap > span:first-child { max-width: 62ch; min-height: 5.5em; }
@media (max-width: 560px) {
  .cs-steps { gap: 4px; }
  .cs-step { padding-right: 0; }
  .cs-step__t { font-size: 10px; }
  .cs-pipe-stage { aspect-ratio: 3 / 4; }
  .cs-pipe__cap { flex-direction: column; gap: var(--space-2); }
}

/* ---- Two-column feature (text + image) ---- */
.cs-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  margin-top: var(--space-6);
}
@media (max-width: 720px) { .cs-feature { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---- Contribution / "what I did" grid ---- */
.cs-did {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-7);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.cs-did li { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.cs-did__k {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.cs-did p { margin: 0; font-size: var(--type-small); line-height: var(--leading-small); color: var(--color-text-muted); }
@media (max-width: 600px) { .cs-did { grid-template-columns: 1fr; } }

/* ---- Tag chips ---- */
.cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.cs-tag {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
}

/* ---- Editorial note / aside ---- */
.cs-note {
  max-width: var(--max-width-text);
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--type-small);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
}
.cs-note strong { color: var(--color-text); font-weight: var(--weight-medium); }