/* ==========================================================================
   case.css — long-form case study components. Extends the site's tokens,
   base and components; introduces nothing that isn't expressed in them.
   ========================================================================== */

/* --- Cover -------------------------------------------------------------- */
.cover { position: relative; min-height: min(92vh, 980px); display: grid; align-items: end;
         background: var(--surface-inverse); color: var(--text-on-inverse); overflow: hidden; isolation: isolate; }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(11 11 11 / .94) 0%, rgb(11 11 11 / .72) 34%, rgb(11 11 11 / .28) 62%, rgb(11 11 11 / .06) 100%); }
.cover__inner { padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.cover__eyebrow { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center;
  font-size: var(--step--1); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--ink-100);
  text-shadow: 0 1px 12px rgb(0 0 0 / .6); margin-block-end: var(--space-5); }
.cover__eyebrow .accent-rule { margin: 0; display: inline-block; }
.cover__eyebrow > span + span:not(.accent-rule)::before { content: "·"; margin-inline-end: var(--space-5); color: var(--ink-500); }
.cover__eyebrow > span:nth-child(2)::before { content: none; }
.cover__title { font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6.4rem); font-weight: var(--weight-thin); line-height: 1.0;
  letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; }
.cover__title em { font-style: normal; color: var(--accent-on-inverse); }
.cover__sub { margin-block-start: var(--space-5); font-size: var(--step-2); font-weight: var(--weight-light);
  color: var(--ink-200); max-width: 40ch; text-wrap: pretty; }

/* --- Chapters ----------------------------------------------------------- */
.chapter { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); }
.chapter--tight { padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.chapter__num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent);
  letter-spacing: var(--tracking-wider); margin-block-end: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }
.chapter__num::before { content: ""; width: 28px; height: 2px; background: var(--accent-graphic); }
.on-inverse .chapter__num { color: var(--accent-on-inverse); }
.chapter__title { font-size: var(--step-4); font-weight: var(--weight-thin); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); max-width: 24ch; text-wrap: balance; }
.chapter__body { margin-block-start: var(--space-6); max-width: 62ch; font-size: var(--step-1);
  font-weight: var(--weight-light); line-height: var(--leading-relaxed); color: var(--text-muted); text-wrap: pretty; }
.on-inverse .chapter__body { color: var(--ink-200); }
.chapter__body p + p { margin-block-start: var(--space-4); }
.chapter__body strong { font-weight: var(--weight-medium); color: var(--text); }
.on-inverse .chapter__body strong { color: var(--white); }
.chapter__grid { display: grid; gap: var(--space-7) var(--space-8); grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 62em) { .chapter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .chapter__grid--rev > :first-child { order: 2; } }
.chapter__grid .chapter__body { margin-block-start: var(--space-5); }

/* --- Statements (the site's big narrative beats) ------------------------ */
.statement { font-size: var(--step-5); font-weight: var(--weight-thin); line-height: 1.08;
  letter-spacing: -0.025em; max-width: 26ch; text-wrap: balance; }
.statement em { font-style: normal; color: var(--accent); }
.on-inverse .statement em { color: var(--accent-on-inverse); }
.statement--md { font-size: var(--step-4); max-width: 30ch; }
.attrib { margin-block-start: var(--space-5); font-size: var(--step--1); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-subtle); }
.on-inverse .attrib { color: var(--text-subtle-on-inverse); }

/* --- Figures ------------------------------------------------------------ */
.fig { margin: 0; }
.fig img { width: 100%; height: auto; border-radius: var(--radius); background: var(--surface-sunken); display: block; }
.fig--frame img { box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 24px 60px -24px rgb(0 0 0 / .28); border: 1px solid var(--rule); }
.on-inverse .fig--frame img { border-color: var(--rule-on-inverse); }
.fig figcaption { margin-block-start: var(--space-3); font-size: var(--step--1); line-height: var(--leading-normal);
  color: var(--text-subtle); max-width: 60ch; text-wrap: pretty; }
.fig figcaption b { font-weight: var(--weight-medium); color: var(--text); }
.on-inverse .fig figcaption { color: var(--text-subtle-on-inverse); }
.on-inverse .fig figcaption b { color: var(--white); }
.fig--cover img { aspect-ratio: 16 / 9; object-fit: cover; }
.fig--sq img { aspect-ratio: 1; object-fit: cover; }
.fig--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.fig--wide img { aspect-ratio: 21 / 9; object-fit: cover; }
.fig--contain img { object-fit: contain; background: var(--surface-sunken); }

.bleed { width: 100%; }
.bleed img { width: 100%; max-height: 88vh; object-fit: cover; border-radius: 0; }
.bleed figcaption { padding-inline: var(--space-gutter); max-width: none; }
.bleed figcaption span { display: block; max-width: 60ch; margin-inline: auto; }

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.grid--offset > :nth-child(even) { margin-block-start: clamp(0px, 4vw, 4rem); }
@media (max-width: 40em) { .grid--offset > :nth-child(even) { margin-block-start: 0; } }
.stack-figs > * + * { margin-block-start: var(--space-6); }

/* --- Object index (catalogue) ------------------------------------------- */
.objects { display: grid; gap: var(--space-8) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.object { display: grid; gap: var(--space-4); }
.object img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-sunken); }
.object__family { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: var(--tracking-wide); }
.object__name { font-size: var(--step-2); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); }
.object__line { font-size: var(--step-0); color: var(--text-muted); line-height: var(--leading-relaxed); text-wrap: pretty; }
.object__spec { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-subtle);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-block-start: var(--space-3);
  border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }

/* --- Rail (the step spine) ---------------------------------------------- */
.rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-5);
  counter-reset: rail; }
.rail__step { position: relative; padding-block-start: var(--space-4); border-top: 1px solid var(--rule); counter-increment: rail; }
.rail__step::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--accent-graphic); }
.rail__n { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); }
.rail__t { font-size: var(--step-1); font-weight: var(--weight-light); margin-block-start: var(--space-2); }
.rail__d { font-size: var(--step--1); color: var(--text-subtle); margin-block-start: var(--space-2); line-height: var(--leading-normal); }
.on-inverse .rail__step { border-top-color: var(--rule-on-inverse); }
.on-inverse .rail__n { color: var(--accent-on-inverse); }
.on-inverse .rail__d { color: var(--text-subtle-on-inverse); }

/* --- Decisions (product-thinking strip) --------------------------------- */
.decisions { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.decision { padding: var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: grid; gap: var(--space-3);
  align-content: start; background: var(--surface); }
.decision__k { font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); letter-spacing: var(--tracking-wide); }
.decision__t { font-size: var(--step-1); font-weight: var(--weight-normal); line-height: var(--leading-snug); text-wrap: balance; }
.decision__b { font-size: var(--step--1); color: var(--text-muted); line-height: var(--leading-normal); }
.on-inverse .decision { background: #1E1E1E; border-color: var(--rule-on-inverse); }
.on-inverse .decision__k { color: var(--accent-on-inverse); }
.on-inverse .decision__b { color: var(--ink-300); }

/* --- Numbers ------------------------------------------------------------ */
.numbers { display: grid; gap: var(--space-6) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.number__v { font-family: var(--font-display); font-size: var(--step-4); font-weight: var(--weight-thin); letter-spacing: -0.03em;
  line-height: 1; font-variant-numeric: tabular-nums; }
.number__v small { font-size: 0.42em; letter-spacing: 0; color: var(--text-subtle); margin-inline-start: 0.15em; }
.number__l { margin-block-start: var(--space-3); font-size: var(--step--1); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--text-subtle); }
.on-inverse .number__v { color: var(--white); }
.on-inverse .number__v small, .on-inverse .number__l { color: var(--text-subtle-on-inverse); }
.on-inverse .number__v em { font-style: normal; color: var(--accent-on-inverse); }

/* --- Fact block --------------------------------------------------------- */
.facts { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--space-7); border-block: 1px solid var(--rule-on-inverse); }
.facts dt { font-size: var(--step--1); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-subtle-on-inverse);
  margin-block-end: var(--space-2); position: relative; padding-inline-start: var(--space-4); }
.facts dt::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 8px; height: 2px; background: var(--accent-graphic); }
.facts dd { font-size: var(--step-0); color: var(--ink-200); line-height: var(--leading-normal); }

/* --- Diagrams ----------------------------------------------------------- */
.diagram { width: 100%; }
.diagram svg { width: 100%; height: auto; display: block; font-family: var(--font-mono); }
.diagram .t { font-size: 13px; fill: var(--text); }
.diagram .m { font-size: 11px; fill: var(--text-subtle); letter-spacing: .08em; text-transform: uppercase; }
.diagram .a { fill: var(--accent); }
.diagram .ln { stroke: var(--ink-300); stroke-width: 1.25; fill: none; }
.diagram .ln-a { stroke: var(--mint-600); stroke-width: 2; fill: none; }
.diagram .bx { fill: var(--surface); stroke: var(--ink-300); stroke-width: 1.25; }
.diagram .bx-a { fill: var(--mint-50); stroke: var(--mint-600); stroke-width: 1.5; }
.diagram .bx-d { fill: var(--surface-sunken); stroke: var(--ink-200); stroke-width: 1; }
.diagram .bad { stroke: #D64545; stroke-width: 2; fill: none; }
.diagram .col { fill: var(--ink-700); }
.on-inverse .diagram .t { fill: var(--white); }
.on-inverse .diagram .m { fill: var(--text-subtle-on-inverse); }
.on-inverse .diagram .a { fill: var(--accent-on-inverse); }
.on-inverse .diagram .ln { stroke: var(--ink-500); }
.on-inverse .diagram .ln-a { stroke: var(--accent-on-inverse); }
.on-inverse .diagram .bx { fill: #1E1E1E; stroke: var(--ink-500); }
.on-inverse .diagram .bx-a { fill: #12281E; stroke: var(--accent-on-inverse); }
.on-inverse .diagram .bx-d { fill: #161616; stroke: var(--ink-700); }
.on-inverse .diagram .col { fill: var(--ink-300); }

/* --- Site-check chips --------------------------------------------------- */
.chips { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.chip { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.chip__led { width: 12px; height: 12px; border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--led) 22%, transparent); background: var(--led); }
.chip__v { font-family: var(--font-display); font-size: var(--step-4); font-weight: var(--weight-thin); letter-spacing: -0.02em; line-height: 1; margin-block-start: var(--space-2); }
.chip__t { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-subtle); }

/* --- Prev/next between the three previews ------------------------------- */
.preview-note { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-subtle); padding: var(--space-3) var(--space-gutter);
  border-bottom: 1px solid var(--rule); display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
.preview-note a { color: var(--accent); }

/* --- Light cover (screenshot-first) ------------------------------------- */
.cover-light { padding-block: clamp(3rem, 2rem + 6vw, 7rem) 0; }
.cover-light__inner { padding-block-end: clamp(2rem, 1rem + 4vw, 4rem); }
.cover__eyebrow--light { color: var(--text-subtle); text-shadow: none; }
.cover__eyebrow--light > span + span:not(.accent-rule)::before { color: var(--ink-300); }
.cover__title--light { color: var(--text); max-width: 18ch; }
.cover__title--light em { color: var(--accent); }
.cover__sub--light { color: var(--text-muted); }
.cover-light__fig { margin: 0; }
.cover-light__fig img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

/* --- Beats -------------------------------------------------------------- */
.beat .beat__title { font-size: var(--step-5); font-weight: var(--weight-thin); line-height: 1.06; letter-spacing: -0.025em;
  max-width: 22ch; text-wrap: balance; }
.beat .beat__title em { font-style: normal; color: var(--accent); }
.on-inverse .beat__title em { color: var(--accent-on-inverse); }
.beat__line { margin-block-start: var(--space-5); font-size: var(--step-1); font-weight: var(--weight-light);
  line-height: var(--leading-relaxed); color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
.on-inverse .beat__line { color: var(--ink-200); }
.beat__media { margin-block-start: clamp(2rem, 1rem + 3vw, 3.5rem); }