/* ==========================================================================
   Can't Miss Talent — Base: reset, type scale, layout, focus, motion baseline
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + var(--space-6));
}

body {
  margin: 0;
  background: var(--cmt-paper-cream);
  color: var(--cmt-graphite);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

/* ==========================================================================
   Typography scale — DESIGN-cant-miss-talent.md §3
   Archivo Black is display only, 48px+. Anything smaller is a bug.
   ========================================================================== */

.t-display-1,
.t-display-2,
.t-display-3 {
  font-family: var(--font-display);
  font-weight: 400;         /* Archivo Black's single weight reads ~900 */
  color: var(--text-heading, var(--cmt-ink));
  text-align: left;         /* display type is flush left, always */
  text-wrap: balance;
}

.t-display-1 { font-size: 6.00rem; line-height: 0.92; letter-spacing: -1.5px; }
.t-display-2 { font-size: 4.50rem; line-height: 0.94; letter-spacing: -1.0px; }
.t-display-3 { font-size: 3.00rem; line-height: 0.96; letter-spacing: -0.5px; }

.t-headline-xl    { font: 700 2.13rem/1.10 var(--font-sans); letter-spacing: -0.4px; color: var(--text-heading, var(--cmt-ink)); }
.t-headline-light { font: 300 2.00rem/1.15 var(--font-sans); letter-spacing:  0.3px; color: var(--text-heading, var(--cmt-ink)); }
.t-headline-l     { font: 700 1.50rem/1.15 var(--font-sans); letter-spacing: -0.2px; color: var(--text-heading, var(--cmt-ink)); }
.t-headline-m     { font: 600 1.25rem/1.20 var(--font-sans); letter-spacing: -0.1px; color: var(--text-heading, var(--cmt-ink)); }
.t-headline-s     { font: 600 1.13rem/1.30 var(--font-sans); color: var(--text-heading, var(--cmt-ink)); }

.t-body-emphasis  { font: 600 1.00rem/1.50 var(--font-sans); }
.t-body           { font: 400 1.00rem/1.60 var(--font-sans); color: var(--text-body, var(--cmt-graphite)); }
.t-body-compact   { font: 400 0.88rem/1.55 var(--font-sans); color: var(--text-body, var(--cmt-graphite)); }
.t-ui-label       { font: 500 0.88rem/1.30 var(--font-sans); color: var(--text-heading, var(--cmt-ink)); }
.t-caption        { font: 400 0.81rem/1.45 var(--font-sans); letter-spacing: 0.1px; color: var(--text-body, var(--cmt-graphite)); }

/* The label role: Newsreader, uppercase, tracked 0.18em. A serif set in caps
   needs more air between letters than a monospace did, so tracking steps up
   from ~0.14em. Tabular lining figures keep numbers aligned in columns the way
   a monospace gave for free. Always uppercase — lowercase labels do not exist
   in this system. */
.t-eyebrow,
.t-tag,
.t-button-label,
.t-table-header,
.t-rail-meta {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
}

.t-eyebrow      { font-size: 0.75rem; line-height: 1.30; }
.t-tag          { font-size: 0.75rem; line-height: 1.20; }
.t-button-label { font-size: 0.81rem; line-height: 1.60; }
.t-table-header { font-size: 0.75rem; line-height: 1.40; }

/* DEVIATION FROM THE DESIGN SYSTEM — raised, not improvised.
   DESIGN §3 specifies Rail Meta as 12px Slate #64748D. But DESIGN §2 and
   Appendix B both state Slate must not drop below 16px on cream, because it
   only reaches 4.51:1 there. A 12px Slate label therefore fails AA under the
   system's own rule, and on Paper Deep #F2F1EC it drops further, to 4.20:1 —
   a surface Appendix B never verified Slate against.
   Resolution: small mono metadata uses Graphite #3A3A39 on light surfaces
   (10.81:1 on cream, 10.06:1 on Paper Deep). Slate is retained for metadata
   at 16px+ on Paper Cream, which is where the system's own figure holds.
   On Ink, Slate Light #8E9AAE is unaffected at 6.48:1. */
.t-rail-meta    { font-size: 0.75rem; line-height: 1.40; color: var(--cmt-graphite); }
.on-ink .t-rail-meta { color: var(--cmt-slate-light); }

/* Numbers in Newsreader with tabular lining figures so columns align. Not
   uppercase — this is data, not a label. */
.t-data {
  font: 500 1.00rem/1.40 var(--font-label);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
}

.t-pull-quote { font: 400 1.75rem/1.30 var(--font-serif); letter-spacing: -0.3px; color: var(--text-heading, var(--cmt-ink)); }
.t-serif-body { font: 400 1.13rem/1.55 var(--font-serif); letter-spacing: -0.1px; color: var(--text-body, var(--cmt-graphite)); }

/* Slate never drops below 16px on cream. Meta text at 14px uses Graphite. */
.t-meta { font: 400 1.00rem/1.50 var(--font-sans); color: var(--text-meta, var(--cmt-slate)); }

/* Reading measure — body copy never spans the full 1240px container. */
.measure { max-width: var(--measure); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-editorial);
  margin-inline: auto;
  padding-inline: var(--space-12);
}

.container--slab { max-width: var(--container-slab); }

.band {
  padding-block: var(--space-24);
  background: var(--surface);
  color: var(--text-body);
}

.band--tight { padding-block: var(--space-16); }
.band--deep  { background: var(--cmt-paper-deep); }
.band--slab  { padding-block: var(--space-32); }

/* Hairline between bands. Decorative separator only — never the sole
   indicator of a boundary. */
.band + .band.on-cream { border-top: 1px solid var(--cmt-rule); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stack > * + * { margin-top: var(--space-4); }

/* Inline spacing rhythm — DESIGN §5:
   eyebrow 8px above headline, headline 12px above deck, deck 16px above CTA */
.section-head > .t-eyebrow + *  { margin-top: var(--space-2); }
.section-head > :is(h1,h2,h3) + p { margin-top: var(--space-3); }
.section-head > p + .cta-row     { margin-top: var(--space-4); }
.section-head { margin-bottom: var(--space-12); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.hr { border: 0; border-top: 1px solid var(--hairline, var(--cmt-rule)); margin-block: var(--space-12); }

/* ==========================================================================
   Focus — keyboard only, never on mouse interaction.
   2px Signal Red at 2px offset on cream; Flare Red on Ink.
   ========================================================================== */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--cmt-signal-red));
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 1000;
  transform: translateY(-200%);
  background: var(--cmt-ink);
  color: var(--cmt-paper-cream);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font: 600 0.81rem/1.6 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  text-decoration: none;
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Placeholder tokens — Section C protocol.
   "Render them visibly in the UI so nothing ships unfilled by accident."
   An empty slot is a task; a fake number is a liability.
   ========================================================================== */

.token {
  display: inline-flex;
  flex-wrap: wrap;          /* long token names must wrap, never clip */
  align-items: baseline;
  gap: 0.35em;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--cmt-mist);
  color: var(--cmt-ink);
  padding: 0 0.18em;
  border-radius: var(--radius-sm);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.token::after {
  content: "NEEDS INPUT";
  font: 600 0.8125rem/1.2 var(--font-label);
  letter-spacing: 0.18em;
  color: var(--cmt-signal-red);
  background: var(--cmt-paper-cream);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  align-self: center;
  white-space: nowrap;
}

/* At display scale a full-size token destroys the line it sits in — and the
   real value will be a two-digit number, so a 96px placeholder badly
   misrepresents the finished measure. Set it down to roughly the width the
   number will occupy and drop the tag; the Mist plate is already
   unmistakable at this size. */
.t-display-1 .token,
.t-display-2 .token,
.t-display-3 .token {
  font-family: var(--font-label);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.25em;
  padding: 0.1em 0.25em;
  border-radius: var(--radius-sm);
}
.t-display-1 .token::after,
.t-display-2 .token::after,
.t-display-3 .token::after { display: none; }

/* Block-level token: a whole content region that has no supplied value yet. */
.token-block {
  background: var(--cmt-mist);
  border-left: 2px solid var(--cmt-signal-red);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--cmt-ink);
}
.token-block__tag {
  display: inline-block;
  font: 600 0.75rem/1.2 var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums lining-nums;
  font-optical-sizing: auto;
  color: var(--cmt-signal-red);
  margin-bottom: var(--space-2);
}
.token-block p { color: var(--cmt-graphite); }
.token-block .t-data { color: var(--cmt-ink); }

.on-ink .token {
  background: var(--cmt-ink-panel);
  color: var(--cmt-paper-cream);
}
.on-ink .token::after {
  color: var(--cmt-flare-red-light);
  background: var(--cmt-ink);
}
.on-ink .token-block {
  background: var(--cmt-ink-panel);
  border-left-color: var(--cmt-flare-red);
  color: var(--cmt-paper-cream);
}
.on-ink .token-block__tag { color: var(--cmt-flare-red-light); }
.on-ink .token-block p { color: var(--cmt-paper-cream); }

/* ==========================================================================
   MOTION — no-motion-first (Section K).
   BASELINE: everything visible, final position, zero motion.
   Enhancement lives only inside prefers-reduced-motion: no-preference,
   and is additionally gated on the site-level [data-motion="off"] switch.
   ========================================================================== */

.hero-line__inner,
.hero-sub,
.hero-cta,
.reveal {
  transform: none;
  opacity: 1;
}

.ticker__track { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero-line__inner {
    animation: lineUp var(--dur-slow) var(--ease-hero) both;
  }
  html:not([data-motion="off"]) .hero-sub {
    animation: fadeUp var(--dur-base) var(--ease-entrance) 160ms both;
  }
  html:not([data-motion="off"]) .hero-cta {
    animation: fadeUp var(--dur-base) var(--ease-entrance) 240ms both;
  }
  html:not([data-motion="off"]) { scroll-behavior: smooth; }

  /* Section reveals: fire-once, 250ms, disabled below 768px. */
  @supports (animation-timeline: view()) {
    @media (min-width: 768px) {
      html:not([data-motion="off"]) .reveal {
        animation: fadeUp var(--dur-base) var(--ease-entrance) both;
        animation-timeline: view();
        animation-range: entry 15% entry 55%;
      }
    }
  }
}

/* Entrances decelerate. No bounce, no overshoot, no spring. */
@keyframes lineUp { from { transform: translateY(105%); } }
@keyframes fadeUp { from { transform: translateY(12px); opacity: 0.1; } }

/* Retain 150ms hover and focus transitions under reduce: reduced motion does
   not mean no state feedback. Only kill transform-based transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Colour and border transitions survive deliberately. */
  a, button, .card, .input { transition-property: background-color, border-color, color !important; }
}

/* ==========================================================================
   Responsive — six breakpoints, tuned at real device boundaries.
   ========================================================================== */

@media (max-width: 1279px) {
  .container { padding-inline: var(--space-8); }
}

@media (max-width: 1023px) {
  .t-display-1 { font-size: 4.50rem; }
  .t-display-2 { font-size: 3.00rem; }
  .t-headline-xl { font-size: 1.75rem; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { padding-block: var(--space-16); }
  .band--slab { padding-block: var(--space-24); }
}

@media (max-width: 767px) {
  .container { padding-inline: var(--space-6); }
  .t-display-1 { font-size: 3.00rem; letter-spacing: -0.5px; }
  .t-display-2 { font-size: 3.00rem; letter-spacing: -0.5px; }
  .t-display-3 { font-size: 3.00rem; letter-spacing: -0.5px; }
  .t-headline-light { font-size: 1.5rem; }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .band { padding-block: var(--space-12); }
  .band--slab { padding-block: var(--space-16); }
  .section-head { margin-bottom: var(--space-8); }
}

@media (max-width: 479px) {
  /* Display scales to 40px; body holds at 16px everywhere — it never shrinks. */
  .t-display-1, .t-display-2, .t-display-3 { font-size: 2.50rem; letter-spacing: -0.5px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}