/* Round 4 layer on top of shared/tokens.css. Shared by every section. Sections extend, never redefine. */

:root {
  /* accent voice: italic serif set inside heavy display type ("I BUILD IT. you USE IT.") */
  --accent-serif: "Instrument Serif", "IBM Plex Serif", Georgia, serif;

  /* chrome */
  --topbar-h: 36px;          /* drop countdown bar (top, scrolls away) */
  --header-h: 72px;          /* sticky main header */
  --transport-h: 56px;       /* fixed tape transport bar (bottom) */

  /* stacking: sections stay below 100; chrome above */
  --z-section-top: 50;
  --z-header: 800;
  --z-transport: 900;
  --z-dialog: 1000;

  /* hand-drawn annotation */
  --anno-ink: var(--ink);
}

body { padding-bottom: var(--transport-h); }

/* ---- tracks: every top-level section is a track on the tape ---- */
.track { position: relative; scroll-margin-top: calc(var(--header-h) + 8px); }
.track-tag {                       /* "02 · Meet Gant" — the tape position label every track shows once */
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.track-tag::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 50%; }

/* ---- display headline with accent word ---- */
.shout {                           /* section headline: heavy condensed caps */
  font: 900 clamp(48px, 9vw, 150px)/.86 var(--display); font-stretch: 82%;
  letter-spacing: -.03em; text-transform: uppercase; margin: 0;
}
.it {                              /* the accent word inside .shout / .display */
  font-family: var(--accent-serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  text-transform: none; letter-spacing: -.01em; font-size: 1.08em; line-height: 0;
}

/* ---- colour fields (full-bleed section grounds) ---- */
.field-paper  { background: var(--paper);  color: var(--ink); }
.field-white  { background: var(--white);  color: var(--ink); }
.field-cobalt { background: var(--cobalt); color: var(--white); }   /* white text 6.6:1 */
.field-orange { background: var(--orange); color: var(--ink); }     /* ink text only, 5.9:1 */
.field-ink    { background: var(--ink);    color: var(--paper); }
.field-green  { background: var(--green);  color: var(--ink); }     /* ink text only, 5.2:1 */

/* ---- hand-drawn annotations (bold caps note + squiggle arrow) ---- */
.anno { font: 800 13px/1.15 var(--display); font-stretch: 100%; text-transform: uppercase; letter-spacing: .05em; color: var(--anno-ink); }
.anno-arrow { display: block; overflow: visible; }
.anno-arrow path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- sticker label (tilted, like a printed tag) ---- */
.sticker {
  display: inline-block; padding: 8px 12px; background: var(--orange); color: var(--ink);
  font: 800 14px/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg);
}
.sticker .it { font-size: 1.15em; line-height: 1; }

/* ---- marquee strip ---- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1.5px solid var(--ink); }
.marquee-track { display: inline-flex; gap: 0; will-change: transform; animation: gw-marquee var(--marquee-s, 38s) linear infinite; }
.marquee-track > * { flex: none; }
@keyframes gw-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- email signup (shared/site-ui.js) — works on paper, cobalt and ink fields ---- */
.gw-signup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.gw-signup-intent { grid-column: 1 / -1; margin: 0; padding: 10px 12px; background: var(--orange); color: var(--ink); border: 1.5px solid var(--ink); font: 700 14px/1.35 var(--body); }
.gw-signup-field { display: grid; gap: 6px; min-width: 0; }
.gw-signup-field .label { color: inherit; opacity: .85; }
.gw-signup input[type="email"] {
  width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 0;
  background: var(--white); color: var(--ink); font: 500 17px/1 var(--body);
}
.gw-signup input[type="email"]::placeholder { color: var(--graphite); opacity: .8; }
.gw-signup input[aria-invalid="true"] { border-color: var(--orange-ink); box-shadow: inset 0 0 0 2px var(--orange); }
.gw-signup button { min-height: 52px; white-space: nowrap; }
.gw-signup-note { grid-column: 1 / -1; margin: 0; font: 400 13px/1.45 var(--mono); opacity: .9; }
.gw-signup [data-signup-msg] { grid-column: 1 / -1; margin: 0; font: 600 15px/1.4 var(--body); min-height: 0; }
.gw-signup [data-signup-msg]:empty { display: none; }
.gw-signup [data-signup-msg][data-kind="error"] { padding: 8px 10px; background: var(--white); color: var(--orange-ink); border: 1.5px solid var(--orange-ink); }
@media (max-width: 560px) { .gw-signup { grid-template-columns: 1fr; } .gw-signup button { width: 100%; } }