/* Hallmark · macrostructure: Map / Diagram · tone: editorial (broadsheet puzzle page) · anchor hue: red 30°
 * theme: brand-locked (promo/kit/marketing/brand-guide.md) · paper oklch(94.4% 0.018 86.1) · accent oklch(52.1% 0.158 30.3)
 * fonts: Fraunces 700/800 display + Newsreader body · nav: N6 Newspaper masthead (+ compact bar on scroll) · footer: Ft5 Statement
 * enrichment: live engine-generated board (Tier B SVG, built at runtime) · motion: GSAP + ScrollTrigger + SplitText + Lenis
 */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--space-sm)); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
em { font-style: italic; }
::selection { background: var(--color-sel); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: var(--gutter); }
.smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--color-muted); font-size: var(--text-base); line-height: 1.2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -4rem; z-index: 100; background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-sm); }
.note { font-size: var(--text-sm); color: var(--color-muted); }

.double-rule { border-top: var(--rule-double) double var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); height: 7px; transform-origin: left center; }
.single-rule { border-top: var(--rule-hair) solid var(--color-ink); transform-origin: left center; }

/* the intro hides only what it is about to animate, and only briefly */
.intro [data-intro], .intro .map__tint, .intro .map__lines, .intro .map__digits { visibility: hidden; }

/* ---------- buttons and links ---------- */
a, button, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* small text controls keep their look but get a finger-sized hit area */
.arrow-link, .foot__meta a { position: relative; }
.arrow-link::after, .foot__meta a::after { content: ""; position: absolute; inset: -0.75rem -0.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 3rem; padding: 0 var(--space-md);
  font: 600 var(--text-base)/1 var(--font-body); white-space: nowrap; text-decoration: none;
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-md);
  background: transparent; color: var(--color-ink); cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn--ink { background: var(--color-ink); color: var(--color-on-ink); }
.btn--soon { cursor: default; border-style: dashed; color: var(--color-ink); background: var(--color-paper-card); letter-spacing: 0.01em; }
.btn--soon:hover, .btn--soon:active { transform: none !important; background: var(--color-paper-card) !important; }
.btn:active { transform: translateY(1px); }
.btn--ink:active { background: var(--color-ink-soft); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn--lg { min-height: 3.5rem; padding: 0 var(--space-lg); font-size: var(--text-lg); }
.btn--sm { min-height: 2.25rem; padding: 0 var(--space-sm); font-size: var(--text-sm); gap: 0; }
.narrow-only { display: none; }

.arrow-link { font-weight: 600; text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.arrow-link span { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }

/* ---------- masthead (N6) ---------- */
.mast { padding-block: var(--space-xs) 0; }
.mast__facts { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.mast__middle { flex: 1; text-align: center; }
.nameplate { display: block; text-align: center; text-decoration: none; padding-block: var(--space-2xs) var(--space-xs); }
.nameplate__text { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: var(--text-nameplate); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; }
.mast__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3xs) var(--space-lg); padding-block: var(--space-2xs); }
.mast__nav a { font-variant-caps: all-small-caps; letter-spacing: 0.08em; text-decoration: none; white-space: nowrap; font-size: var(--text-base); padding-block: var(--space-3xs); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-short) var(--ease-out); }

.theme-switch { display: inline-flex; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); overflow: hidden; }
.theme-switch button { font: inherit; font-size: var(--text-sm); font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--color-muted); background: transparent; border: 0; padding: 0.3rem 0.7rem; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.theme-switch button + button { border-left: var(--rule-hair) solid var(--color-rule); }
.theme-switch button:active { background: var(--color-paper-deep); }
.theme-switch button[aria-pressed="true"] { background: var(--color-paper-deep); color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* compact bar once the masthead has gone */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-ink); padding-top: env(safe-area-inset-top, 0px); transform: translateY(-105%); transition: transform var(--dur-long) var(--ease-out); }
.bar.is-on { transform: none; }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); height: var(--bar-h); }
.bar__name { display: inline-flex; align-items: center; gap: var(--space-2xs); font: 800 var(--text-lg)/1 var(--font-display); text-decoration: none; white-space: nowrap; letter-spacing: -0.01em; }
.bar__name img, .foot__brand img { border-radius: 22%; outline: 1px solid var(--color-rule); outline-offset: 0; }
.bar__name { min-height: 2.75rem; }

/* ---------- the stage: board + steps ---------- */
.stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); padding-inline: var(--gutter); max-width: 88rem; margin-inline: auto; }
.stage__copy { grid-column: 1; grid-row: 1; }
.stage__board { grid-column: 2; grid-row: 1; position: relative; }
.board-fig { position: sticky; top: calc(var(--bar-h) + var(--space-sm)); margin: 0; padding-block: var(--space-lg); display: grid; gap: var(--space-xs); }
.board-frame { width: 100%; max-width: min(100%, calc(100svh - var(--bar-h) - 13rem)); aspect-ratio: 1; margin-inline: auto; contain: layout paint; }
.map { display: block; width: 100%; height: 100%; overflow: hidden; }

.step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); padding-block: var(--space-2xl); max-width: var(--measure); }
.step h2 { font-size: var(--text-2xl); margin-bottom: var(--space-2xs); }
.step--cta h2 { font-size: var(--text-3xl); }
.step--hero { min-height: calc(100svh - 14rem); justify-content: flex-start; padding-top: var(--space-xl); gap: var(--space-md); }
.hero__title { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-soft); }
.assure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-sm); font-size: var(--text-sm); font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--color-muted); }
.assure li { white-space: nowrap; }
.aside { color: var(--color-muted); font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-hairline); padding-top: var(--space-sm); }
.fine { font-size: var(--text-sm); color: var(--color-muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-2xs); }

/* ---------- board drawing (SVG classes) ---------- */
.map .t-center { fill: var(--color-board); }
.map .t-corner { fill: var(--color-corner); }
.map .t-overlap { fill: var(--color-overlap); }
/* rules keep their weight at any zoom, as they do in the app */
.map .ln-thin { stroke: var(--color-line); stroke-width: 1px; fill: none; vector-effect: non-scaling-stroke; }
.map .ln-box { stroke: var(--color-ink); stroke-width: 2px; fill: none; vector-effect: non-scaling-stroke; }
.map .ln-frame { stroke: var(--color-ink); stroke-width: 3px; fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map text { font-family: var(--font-digits); text-anchor: middle; dominant-baseline: central; user-select: none; }
.map .dg { fill: var(--color-ink); font-size: 6.1px; font-weight: 600; }
.map .ud { fill: var(--color-pen); font-size: 6.1px; font-weight: 500; }
.map .nt { fill: var(--color-notes); font-size: 2.55px; }
.map .hl--peer { fill: var(--color-peer); }
.map .hl--same { fill: var(--color-same); }
.map .hl--sel { fill: var(--color-sel); stroke: var(--color-sel-line); stroke-width: 0.6; }
.map .hl--board { fill: var(--color-peer); }
.map .stamp { fill: var(--color-stamp); }
.map .flash { fill: none; stroke: var(--color-red); stroke-width: 0.8; }
.map .nt--hit { fill: var(--color-red); font-weight: 700; }
.map .pen { fill: none; stroke: var(--color-red); stroke-width: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.map .mask { fill: var(--color-paper); }
.map .pen-note { fill: var(--color-red); font-family: var(--font-display); font-weight: 600; font-size: 3.5px; text-anchor: start; dominant-baseline: auto; }

.section-title { font-size: var(--text-3xl); letter-spacing: -0.025em; }

/* ---------- screens ---------- */
.screens { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); background: var(--color-paper-deep); }
.screens__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); align-items: end; padding-bottom: var(--space-xl); }
.screens__head p { color: var(--color-ink-soft); max-width: 28rem; }
.screens__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-sm); }
.screens__track { list-style: none; margin: 0; display: flex; gap: var(--space-lg); padding: 0 var(--gutter); width: max-content; }
.screens__track li { width: clamp(14rem, 22vw, 19rem); scroll-snap-align: center; flex: none; }
.screens__track figure { margin: 0; display: grid; gap: var(--space-xs); }
.screens__track img { border: var(--rule-hair) solid var(--color-rule); width: 100%; background: var(--color-paper); }
.screens__track figcaption { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: 1.4; }
@media (min-width: 900px) {
  .screens__viewport { overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .screens__track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); width: auto; max-width: 76rem; margin-inline: auto; }
  .screens__track li { width: auto; }
}

/* ---------- what you get ---------- */
.features { padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.features__grid > h2 { position: sticky; top: calc(var(--bar-h) + var(--space-lg)); }
.features__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); border-top: var(--rule-double) double var(--color-ink); }
.feature-list li { display: grid; gap: var(--space-2xs); align-content: start; justify-items: start; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-hairline); min-width: 0; }
.feature-list h3 { font-size: var(--text-xl); letter-spacing: -0.01em; }
.feature-list p { color: var(--color-ink-soft); }
.feature-list .theme-switch { margin-top: var(--space-2xs); }

/* ---------- footer (Ft5) ---------- */
.foot { padding-block: var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); }
.foot__statement { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.02; letter-spacing: -0.025em; max-width: 18ch; padding-top: var(--space-xl); text-wrap: balance; }
.foot__cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); padding-bottom: var(--space-xl); }
.foot__actions { display: grid; gap: var(--space-xs); justify-items: start; }
.foot__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-md); padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.foot__brand { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.foot__meta a { white-space: nowrap; }

/* ---------- theme transition (view transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

/* ---------- responsive ---------- */
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--ink:hover { background: var(--color-ink-soft); }
  .btn:active { transform: translateY(0); }
  .arrow-link:hover span { transform: translateX(4px); }
  .mast__nav a:hover { background-size: 100% 1px; }
  .theme-switch button:hover { color: var(--color-ink); background: var(--color-paper-deep); }
}

/* fingers: every control at least about 44px tall */
@media (pointer: coarse) {
  .theme-switch button { min-height: 2.75rem; padding-inline: 0.85rem; }
  .btn--sm { min-height: 2.5rem; }
}

@media (max-width: 1100px) {
  .stage { column-gap: var(--space-xl); }
  .features__grid { gap: var(--space-xl); }
}

/* narrow screens: every section becomes one column */
@media (max-width: 899px) {
  :root { --bar-h: 3rem; }
  .mast__middle { display: none; }
  .mast__nav { gap: 0 var(--space-md); }
  .screens__head, .features__grid { grid-template-columns: minmax(0, 1fr); }
  .features { padding-block: var(--space-2xl); }
  .features__grid { gap: var(--space-lg); }
  .bar__name { font-size: var(--text-base); }
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  .features__grid > h2 { position: static; }

  .screens { padding-block: var(--space-2xl) var(--space-xl); }
  .screens__head { padding-bottom: var(--space-lg); gap: var(--space-sm); }
  .screens__viewport { scroll-padding-inline: var(--gutter); }
  .screens__track { gap: var(--space-md); }
  .screens__track li { width: clamp(13rem, 64vw, 19rem); scroll-snap-align: start; }

  .foot { padding-top: var(--space-xl); }
}

/* phones: the masthead keeps the nameplate and the theme switch, and drops the section links */
@media (max-width: 599px) {
  .mast__nav, .mast .single-rule, .mast .theme-switch { display: none; }
  .step--hero .actions .btn { width: 100%; }
  .mast__facts { justify-content: center; padding-top: var(--space-2xs); }
  .nameplate { padding-block: var(--space-2xs) var(--space-xs); }
}

/* held upright: headline first, then the board pinned under the bar while the copy scrolls beneath */
@media (max-width: 899px) and (min-height: 501px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage__copy { display: contents; }
  .step.step--hero { order: -1; min-height: 0; padding-block: var(--space-lg) var(--space-md); gap: var(--space-sm); }
  .step--hero .lede { font-size: var(--text-base); }
  .step--hero .arrow-link { display: none; }
  .stage__board { order: 0; grid-column: 1; grid-row: auto; position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); z-index: 5; align-self: start; background: var(--color-paper); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .stage__board::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; border-bottom: var(--rule-hair) solid var(--color-hairline); }
  .step { order: 1; position: relative; z-index: 1; min-height: 36svh; padding-block: var(--space-xl); justify-content: flex-start; }
  .board-fig { position: static; padding-block: var(--space-2xs); gap: var(--space-3xs); }
  .board-frame { max-width: min(100%, 46svh); }
}

/* upright tablets: the board lines up with the copy's left edge */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 501px) {
  .board-frame { margin-inline: 0; max-width: min(100%, 52svh); }
}

/* phones turned sideways: board beside the copy, sized to the short side */
@media (max-height: 500px) {
  :root { --text-display: clamp(2rem, 1rem + 3vw, 3rem); --text-2xl: clamp(1.5rem, 1rem + 1.5vw, 2rem); --text-3xl: clamp(1.75rem, 1rem + 2.5vw, 2.5rem); }
  .stage { column-gap: var(--space-lg); }
  .board-fig { top: calc(var(--bar-h) + var(--space-2xs)); padding-block: var(--space-2xs); gap: var(--space-3xs); }
  .board-frame { max-width: min(100%, calc(100svh - var(--bar-h) - 2.5rem)); }
  .step { min-height: 100svh; padding-block: var(--space-xl); }
  .step--hero { min-height: 0; padding-top: var(--space-md); gap: var(--space-sm); }
  .lede { font-size: var(--text-base); }
}

/* the smallest phones: the bar keeps the mark and the Play button */
@media (max-width: 359px) {
  .bar__title { display: none; }
}

@media (pointer: coarse) and (min-width: 600px) {
  .mast__nav a { padding-block: 0.6rem; }
}

@media (max-width: 599px) {
  .feature-list { grid-template-columns: minmax(0, 1fr); }
  .foot__actions, .foot__actions .btn { width: 100%; justify-items: stretch; }
}



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; }
  .btn:hover, .arrow-link:hover span { transform: none; }
}