/* ==========================================================================
   Low Card Wild — brief. Same visual system as the full retrospective:
   shared tokens, Source Serif display, metadata band, pills.
   Target: one to two viewports, read in ninety seconds.
   ========================================================================== */

@font-face {
  font-family: 'Source Serif'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/source-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --paper-alt: #f6f6f4;
  --ink: #16181d;
  --ink-2: #40454e;
  --ink-3: #6d7481;
  --rule: #e0e0dc;
  --rule-firm: #c8c8c2;
  --accent: #1f3d63;
  --serif: 'Source Serif', Charter, Georgia, serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --doc: 50rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #14161a;
    --paper-alt: #1a1d22;
    --ink: #eceef1;
    --ink-2: #b9bec7;
    --ink-3: #8b929d;
    --rule: #2c3037;
    --rule-firm: #3c424b;
    --accent: #9dc0e8;
  }
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans);
  /* Holds a comfortable measure at both ends: ~45 characters on a 390px
     screen, ~78 in the 50rem column on desktop. */
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.14; margin: 0; }

.doc { width: min(100% - 2.75rem, var(--doc)); margin-inline: auto; }

/* ---------- hero ------------------------------------------------------- */

.hero { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }

.hero h1 {
  font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.9rem);
  letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.deck {
  font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45; color: var(--ink-2); margin: 0;
}

/* Lifted, not dimmed: a light hairline and the poster at full brightness. */
.reel { border: 1px solid var(--rule-firm); background: #0a1b2c; }
.reel video { width: 100%; display: block; }
.reel-cap { font-size: 0.82rem; color: var(--ink-3); margin: 0.7rem 0 0; }

/* ---------- numbers band ------------------------------------------------ */

.band { background: var(--paper-alt); border-block: 1px solid var(--rule); }
.band__grid {
  display: grid; gap: 1.5rem 1.25rem;
  /* Three figures, so three columns at every width — they stay a single
     readable row rather than reflowing into an awkward orphan. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: clamp(1.9rem, 3.5vw, 2.6rem);
}

.fig__n {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem);
  line-height: 1; color: var(--ink); display: block; font-variant-numeric: tabular-nums;
}
.fig__l {
  display: block; margin-top: 0.45rem; font-size: 0.76rem; line-height: 1.35;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- body sections ---------------------------------------------- */

.block { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.block + .block { border-top: 1px solid var(--rule); }
.why { color: var(--ink-2); margin: 0; }
.why strong { color: var(--ink); font-weight: 600; }

h2.head {
  font-size: 0.72rem; font-family: var(--sans); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 1.6rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--rule);
}

.lessons-wrap { counter-reset: l; }
.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem 2.25rem; }
@media (min-width: 800px) { .lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lessons li { counter-increment: l; padding-left: 2.1rem; position: relative; }
.lessons li::before {
  content: counter(l, decimal-leading-zero); position: absolute; left: 0; top: 0.12em;
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
}
/* BLUF: the claim carries the weight and the five claims alone must read as a
   complete summary. Support drops a step in size and contrast so the eye can
   take the bold lines in isolation. */
.lessons b {
  display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.33;
  color: var(--ink); margin-bottom: 0.3rem;
}
.lessons span { display: block; color: var(--ink-3); font-size: 0.92rem; line-height: 1.5; }


/* ---------- footer ------------------------------------------------------ */

.foot { background: var(--paper-alt); border-top: 1px solid var(--rule); padding-block: 2.5rem 3.25rem; }
.foot p { margin: 0 0 0.9rem; color: var(--ink-2); font-size: 0.95rem; }
.foot p:last-child { margin-bottom: 0; }
.foot .more { font-size: 1rem; }
.foot .more a { font-weight: 600; }
.foot .reach { font-size: 0.92rem; color: var(--ink-3); }



/* ---------- lesson clusters --------------------------------------------- */

/* Quiet subheads: the section reads as one unit with two clusters, so these
   sit a step below the section eyebrow and carry no rule of their own. */
.subhead {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 1.1rem;
}
/* Tighter than the gap between page sections, so the grouping is unambiguous. */
.subhead--next { margin-top: 2.25rem; }

.closing {
  margin: 2.4rem 0 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink-2);
}