/* ─────────────────────────────────────────────────────────────────────────
   site.css — homepage, rebuilt from scratch (August 2026).

   Written to replace v2.css on the home page, not to patch it. v2.css had
   grown 33 distinct font sizes, fourteen of them near-identical fluid clamps
   (clamp(24px,2.8vw,34px) beside clamp(24px,2.6vw,34px) beside
   clamp(26px,2.8vw,36px)). That is why the page read as "different font
   sizes": there was no scale, only accumulation.

   THE SCALE. Six steps, two of them fluid. Every piece of type on this page
   resolves to one of these six. tools/check_type.py fails the build if a
   seventh appears.

     --t-display   the one statement per page
     --t-title     section headings
     --t-lead      standfirsts
     --t-body      prose
     --t-small     captions and secondary prose
     --t-micro     mono labels and data, and nothing else

   THE IDEA. He has more than 250 stages behind him and fourteen photographs
   of them sitting unused. So the proof is the picture: a full-bleed strip of
   real rooms, moving slowly, directly under the opening statement. Volume you
   can see beats a number you have to believe.

   LINE BREAKS are authored, not guessed. text-wrap: balance kept producing
   odd German breaks, so the display lines carry explicit <br> and balance is
   off for them.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --t-display: clamp(2.25rem, 6vw, 5.75rem);
  --t-title:   clamp(1.75rem, 2.9vw, 2.5rem);
  --t-lead:    clamp(1.1875rem, 1.5vw, 1.375rem);
  --t-body:    1.125rem;
  --t-small:   0.9375rem;
  --t-micro:   0.6875rem;

  --lh-display: 0.97;
  --lh-title:   1.06;
  --lh-lead:    1.45;
  --lh-body:    1.6;

  --gutter: var(--space-4);
  --rule: 1px solid var(--ink-10);
}

/* ── Primitives ───────────────────────────────────────────────────────── */

.s-wrap { width: 100%; }

.s-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.s-sec { padding: var(--space-6) 0; }
@media (min-width: 900px) { .s-sec { padding: var(--space-7) 0; } }
.s-sec--rule { border-top: var(--rule); }

.s-micro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.s-micro .sep { color: var(--ink-20); margin: 0 0.6em; }

.s-display {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
  /* Breaks are authored with <br>; balance is off so it cannot re-break
     them awkwardly, but wrapping inside a line stays available on narrow
     screens, where nowrap previously pushed the line off the viewport. */
  text-wrap: initial;
  color: var(--ink);
}
.s-display .dim { color: var(--ink-40); }

.s-title {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 26ch;
}

.s-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  color: var(--ink-80);
  max-width: 44ch;
  text-wrap: pretty;
}

.s-body { font-size: var(--t-body); line-height: var(--lh-body); text-wrap: pretty; }
.s-small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-60); text-wrap: pretty; }

.s-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.s-link {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.s-link:hover { color: var(--signal); border-color: var(--signal); }

/* ── 01 · Opening ─────────────────────────────────────────────────────── */

.s-open { padding: var(--space-6) 0 var(--space-5); }
@media (min-width: 900px) { .s-open { padding: var(--space-8) 0 var(--space-6); } }
.s-open .s-micro { margin-bottom: var(--space-4); }
.s-open .s-lead { margin-top: var(--space-4); }
.s-open .s-cta { margin-top: var(--space-5); }

/* ── 02 · The stages strip. The page's one moment. ────────────────────── */

.s-stages { background: var(--ink); color: var(--paper); padding: var(--space-4) 0 var(--space-3); overflow: hidden; }
.s-stages-head {
  max-width: var(--page-max);
  margin: 0 auto var(--space-3);
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.s-stages-count {
  font-family: var(--mono);
  font-size: var(--t-title);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.s-stages-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 245, 242, 0.5);
}
.s-strip {
  display: flex;
  width: max-content;
  gap: 2px;
  animation: s-drift 88s linear infinite;
  will-change: transform;
}
.s-stages:hover .s-strip,
.s-stages:focus-within .s-strip { animation-play-state: paused; }
@keyframes s-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .s-strip { animation: none; }
  .s-stages { overflow-x: auto; }
}
.s-frame { position: relative; flex: 0 0 auto; }
.s-frame img {
  height: clamp(180px, 26vw, 320px);
  width: auto;
  display: block;
}
.s-frame figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 6px 8px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 245, 242, 0.65);
  opacity: 0;
  transition: opacity 0.25s;
}
.s-frame:hover figcaption { opacity: 1; }

/* ── 03 · Offer. Rows on the left, one photograph that follows them. ──── */

.s-offer { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 960px) {
  .s-offer { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
}
.s-rows { border-top: var(--rule); }
.s-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
  text-decoration: none;
  color: inherit;
}
.s-row-n { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--signal); padding-top: 0.35em; }
.s-row h3 {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: -0.024em;
  hyphens: auto;
}
.s-row p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-60); margin-top: 6px; max-width: 46ch; text-wrap: pretty; }
.s-row-spec {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.s-row[aria-current="true"] .s-row-n,
.s-row:hover .s-row-n { color: var(--signal); }
.s-row:hover h3 { color: var(--signal); }

.s-offer-media { display: none; }
@media (min-width: 960px) {
  .s-offer-media { display: block; position: sticky; top: 96px; }
  .s-offer-media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    outline: 1px solid var(--ink-05);
    outline-offset: -1px;
  }
  .s-offer-media img + img { display: none; }
  .s-offer-media figcaption { margin-top: 10px; }
}

/* ── 04 · Audience ───────────────────────────────────────────────────── */

.s-auds { border-top: var(--rule); margin-top: var(--space-5); }
.s-aud {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--rule);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 860px) { .s-aud { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr) auto; align-items: baseline; } }
.s-aud h3 {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: -0.024em;
  hyphens: auto;
}
.s-aud p { font-size: var(--t-small); line-height: 1.55; color: var(--ink-60); max-width: 52ch; text-wrap: pretty; }
.s-aud .go { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40); white-space: nowrap; }
.s-aud:hover h3, .s-aud:hover .go { color: var(--signal); }

/* ── 05 · Argument ───────────────────────────────────────────────────── */

.s-arg { display: grid; gap: var(--space-5); }
@media (min-width: 960px) { .s-arg { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); } }
.s-prose { max-width: 62ch; }
.s-prose p { font-size: var(--t-body); line-height: var(--lh-body); text-wrap: pretty; }
.s-prose p + p { margin-top: var(--space-3); }
.s-pull {
  display: block;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: var(--space-4) 0;
  max-width: 30ch;
  text-wrap: balance;
}
.s-arg-media img { width: 100%; height: auto; display: block; outline: 1px solid var(--ink-05); outline-offset: -1px; }
.s-arg-media figcaption { margin-top: 10px; }

/* ── 06 · Voice ──────────────────────────────────────────────────────── */

.s-quote {
  font-family: var(--body);
  font-weight: 500;
  font-size: var(--t-title);
  line-height: var(--lh-title);
  letter-spacing: -0.022em;
  max-width: 34ch;
  text-wrap: balance;
}
.s-quote::before { content: "\201C"; }
.s-quote::after { content: "\201D"; }
.s-quote-attr { margin-top: var(--space-3); }

/* ── 07 · Assurances ─────────────────────────────────────────────────── */

.s-assure { display: grid; gap: var(--space-4); margin-top: var(--space-5); border-top: var(--rule); padding-top: var(--space-4); }
@media (min-width: 760px) { .s-assure { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); } }
@media (min-width: 1120px) { .s-assure { grid-template-columns: repeat(4, 1fr); } }
.s-assure-item h3 { font-family: var(--body); font-weight: 500; font-size: var(--t-body); line-height: 1.25; letter-spacing: -0.012em; margin-bottom: 8px; }
.s-assure-item p { font-size: var(--t-small); line-height: 1.55; color: var(--ink-60); text-wrap: pretty; }

/* ── 08 · Questions ──────────────────────────────────────────────────── */

.s-faq { border-top: var(--rule); margin-top: var(--space-5); max-width: 82ch; }
.s-faq details { border-bottom: var(--rule); }
.s-faq summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
  font-size: var(--t-body);
  line-height: 1.35;
  list-style: none;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--ink-40); flex: none; }
.s-faq details[open] summary::after { content: "\2013"; color: var(--signal); }
.s-faq summary:hover { color: var(--signal); }
.s-faq-body { padding: 0 0 var(--space-3); max-width: 66ch; font-size: var(--t-small); line-height: 1.65; color: var(--ink-80); }
.s-faq-body p + p { margin-top: var(--space-2); }

/* ── 09 · Close ──────────────────────────────────────────────────────── */

.s-close { background: var(--ink); color: var(--paper); display: grid; }
@media (min-width: 940px) { .s-close { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.s-close-body { padding: var(--space-6) var(--gutter); display: grid; align-content: center; justify-items: start; gap: var(--space-3); }
@media (min-width: 940px) {
  .s-close-body { padding: var(--space-7) var(--space-5) var(--space-7) max(var(--space-5), calc((100vw - var(--page-max)) / 2 + var(--gutter))); }
}
.s-close .s-display { color: var(--paper); font-size: var(--t-title); }
.s-close .s-display .dim { color: rgba(246, 245, 242, 0.45); }
.s-close p { font-size: var(--t-body); line-height: var(--lh-body); color: rgba(246, 245, 242, 0.78); max-width: 44ch; text-wrap: pretty; }
.s-close .cta-primary { background: transparent; color: var(--paper); border-color: rgba(246, 245, 242, 0.45); }
.s-close .cta-primary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.s-close .s-micro { color: rgba(246, 245, 242, 0.5); }
.s-close .s-micro a { color: var(--paper); }
.s-close-media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 28%; display: block; }

/* ── Inline links ────────────────────────────────────────────────────── */

.s-prose a, .s-faq-body a, .s-small a, .s-lead a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-20);
  text-underline-offset: 3px;
}
.s-prose a:hover, .s-faq-body a:hover, .s-small a:hover, .s-lead a:hover { color: var(--signal); text-decoration-color: var(--signal); }

@media print {
  .s-stages, .s-close, .cookie-banner { display: none !important; }
  .s-display { font-size: 22pt; }
}