/* Hidden Variables — site styles.
   Paper, ink, one blue and one pink. Three voices in type: Mona Sans for the
   operator (plain business language), Computer Modern italic for the
   mathematician, JetBrains Mono for the engineer's labels. The mark is two
   stems you can see and a pink dot between them: the hidden variable.
   Every section sets its own colours, so the page looks the same on any host. */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HV Math";
  src: url("../fonts/hv-math-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F5F4EF;
  --white: #FFFFFF;
  --ink: #0D0D12;
  --ink-soft: #3B3B45;
  --mute: #6A6A74;
  --blue: #2B2BFF;       /* the field */
  --pink: #FF9ED2;       /* the hidden variable */
  --rule: rgba(13, 13, 18, 0.14);
  --on-dark: #F5F4EF;
  --on-dark-soft: rgba(245, 244, 239, 0.72);
  --on-dark-rule: rgba(245, 244, 239, 0.22);
  --on-blue-soft: rgba(255, 255, 255, 0.84);

  --sans: "Mona Sans", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --math: "HV Math", "Latin Modern Roman", "CMU Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wide: 108%;
  --gutter: clamp(16px, 4.4vw, 72px);
  --maxw: 1360px;
  --spring: cubic-bezier(.3, 1.45, .5, 1);
  --ease: cubic-bezier(.65, 0, .25, 1);

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
  background: var(--paper) linear-gradient(var(--paper) 50%, var(--ink) 50%);
  padding-top: env(safe-area-inset-top, 0px);
}
html:has(.menu[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* The strip under the status bar takes the colour of the section below it. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 40;
  height: env(safe-area-inset-top, 0px); background: var(--paper);
}
html[data-tone="blue"] body::before { background: var(--blue); }
html[data-tone="pink"] body::before { background: var(--pink); }
html[data-tone="ink"] body::before { background: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

h1, h2, h3, p, figure, dl, dd, ol, ul, fieldset { margin: 0; }
p, dd { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--pink); color: var(--ink); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.try :focus-visible, .solve :focus-visible, .foot :focus-visible, .menu :focus-visible,
.top[data-tone="blue"] :focus-visible, .top[data-tone="ink"] :focus-visible { outline-color: var(--pink); }
.puzzle :focus-visible { outline-color: var(--blue); }
.contact :focus-visible { outline-color: var(--ink); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 50;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 500;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ---------- type ---------- */

h1, h2, h3 { font-weight: 560; font-stretch: var(--wide); color: inherit; }
h1 {
  font-size: clamp(3.3rem, 0.4rem + 8.4vw, 9.4rem);
  line-height: 0.92;
  letter-spacing: -0.056em;
}
h2 {
  font-size: clamp(2.6rem, 0.9rem + 4.8vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
h3 { letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }

/* the engineer's voice: small capitals in mono */
.label { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
/* the mathematician's voice */
.math { font-family: var(--math); font-style: italic; font-weight: 400; letter-spacing: 0; }
/* Computer Modern is spaced for print at 10pt; at screen sizes its word gaps open
   up, so every run of the math italic gets slightly tighter word spacing */
.math, .pair__here, .lens__math, .index__math, .ticker__track span, .board__tag, .dg .t { word-spacing: -0.07em; }

/* ---------- buttons, links ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 0 22px 0 28px;
  border: 0; border-radius: 999px;
  background: var(--blue); color: var(--white);
  font-family: var(--sans); font-size: 17px; font-weight: 520; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.pill:active { transform: scale(0.97); }
.pill__dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--pink);
  transition: transform .45s var(--spring);
}
.pill:hover .pill__dot { transform: translateX(4px) scale(1.35); }
.pill--sm { min-height: 44px; padding: 0 18px 0 22px; font-size: 15px; gap: 12px; }
.pill--ink { background: var(--ink); }
.pill:disabled { opacity: .3; cursor: default; }
.pill:disabled .pill__dot { transform: none; }

.link {
  font-size: 17px; font-weight: 520;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
  transition: text-underline-offset .2s ease;
}
.link:hover { text-underline-offset: 4px; }

.ghost {
  padding: 11px 2px; border: 0; background: none; cursor: pointer;
  font-size: 16px; font-weight: 520;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.ghost:disabled { opacity: .3; cursor: default; }

/* On touch screens the small links get a finger-sized hit area, drawn
   around them, so nothing on the page moves. */
@media (pointer: coarse) {
  .brand, .link, .lens__cta, .contact__mail a, .exhibit__logo, .exhibit__source a, .foot__mail, .menu__mail, .qed, .kit__solves a { position: relative; }
  .brand::after, .link::after, .lens__cta::after, .contact__mail a::after, .exhibit__logo::after, .exhibit__source a::after, .foot__mail::after, .menu__mail::after, .qed::after, .kit__solves a::after {
    content: ""; position: absolute; inset: -10px -6px;
  }
  .kit__solves a::after { inset: -10px -4px; }
  .qed::after { inset: -14px; }
}

/* ---------- the mark ---------- */

.mark { width: 30px; height: 30px; flex: none; overflow: visible; }
.mark__stem { fill: currentColor; }
.mark__dot { fill: var(--pink); transform-box: fill-box; transform-origin: center; transition: transform .55s var(--spring); }
.brand:hover .mark__dot { transform: scale(1.3); }

/* ---------- top bar ---------- */

.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  color: var(--ink);
  transition: transform .4s var(--ease), background-color .3s ease, color .3s ease;
}
.top.is-hidden { transform: translateY(calc(-100% - 2px)); }
.top.is-solid { background: rgba(245, 244, 239, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.top[data-tone="blue"] { color: var(--white); }
.top[data-tone="blue"].is-solid { background: rgba(43, 43, 255, 0.92); }
.top[data-tone="pink"].is-solid { background: rgba(255, 158, 210, 0.92); }
.top[data-tone="ink"] { color: var(--on-dark); }
.top[data-tone="ink"].is-solid { background: rgba(13, 13, 18, 0.9); }
.top[data-tone="pink"] .mark__dot { fill: var(--blue); }
.top[data-tone="blue"] .top__cta { background: var(--white); color: var(--ink); }
.top[data-tone="blue"] .top__cta .pill__dot { background: var(--blue); }
.top[data-tone="pink"] .top__cta { background: var(--ink); }
.top[data-tone="ink"] .top__cta { background: var(--pink); color: var(--ink); }
.top[data-tone="ink"] .top__cta .pill__dot { background: var(--ink); }

.top__inner { display: flex; align-items: center; gap: 28px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__name { font-weight: 620; font-stretch: 106%; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; }
.top__nav { display: flex; gap: 28px; margin-left: auto; }
.top__nav a {
  font-size: 16px; font-weight: 500; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
  padding-bottom: 3px; transition: background-size .3s var(--ease);
}
.top__nav a:hover { background-size: 100% 2px; }
.top__menu {
  display: none; align-items: center; justify-content: center; min-width: 88px; min-height: 44px; padding: 0 20px;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent;
  font-size: 15px; font-weight: 520; cursor: pointer;
}

/* menu: a full-screen blue sheet */
.menu {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--blue); color: var(--white);
  overscroll-behavior: contain;
}
.menu::backdrop { background: rgba(13, 13, 18, 0.4); }
/* The top row sits exactly where the header is, so opening the menu changes
   only the colour and the word on the button. --sbw is the page scrollbar's
   width, measured on open (0 on phones), so nothing shifts on desktop either. */
.menu__inner {
  min-height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + var(--sbw, 0px)) calc(env(safe-area-inset-bottom, 0px) + 32px) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.menu__top .top__menu { display: inline-flex; }
.menu__nav { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-block: 48px 40px; }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(1.9rem, 0.9rem + 4.4vw, 4.2rem); font-weight: 560; font-stretch: 100%; line-height: 1.12; letter-spacing: -0.045em;
  text-decoration: none;
}
.menu__nav span { min-width: 2.6em; font: 500 13px var(--mono); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
.menu[open] .menu__nav a { animation: menu-in .55s var(--ease) both; }
.menu[open] .menu__nav a:nth-child(2) { animation-delay: .05s; }
.menu[open] .menu__nav a:nth-child(3) { animation-delay: .1s; }
.menu[open] .menu__nav a:nth-child(4) { animation-delay: .15s; }
.menu[open] .menu__nav a:nth-child(5) { animation-delay: .2s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(18px); } }
.menu__mail { align-self: flex-start; font-size: 20px; font-weight: 520; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* the variable, big, in the empty part of the sheet; it drops in as the menu opens */
.menu__inner { position: relative; overflow: hidden; }
.menu__dot {
  --d: min(46vw, 30svh, 290px);
  position: absolute; z-index: -1; width: var(--d); height: var(--d); border-radius: 50%;
  right: calc(var(--d) * -0.16); top: calc(env(safe-area-inset-top, 0px) + 84px + 3svh);
  background: var(--pink); pointer-events: none;
}
.menu[open] .menu__dot { animation: menu-dot .9s var(--spring) .08s both; }
@keyframes menu-dot { from { transform: translateY(-36px) scale(0.3); opacity: 0; } }
@media (max-height: 639px) { .menu__dot { display: none; } }

/* ---------- hero: the mark, monumental ---------- */

.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(600px, calc(92svh - 92px), 900px);
  --u: clamp(150px, 15.5vw, 250px);   /* the dot's diameter; stems are .6u wide, 1.4u apart */
}
/* on big screens the mark keeps growing, so it still answers the headline across the page */
@media (min-width: 1600px) { .hero { --u: clamp(250px, 9vw + 106px, 292px); } }   /* 292: stems stay clear of the hero's 900px */
.hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__inner { pointer-events: none; }
.hero__inner > * { pointer-events: auto; }
.hero__stem, .hero__dot { position: absolute; will-change: transform; }
.hero__stem { top: calc(50% - var(--u) * 1.3); height: calc(var(--u) * 2.6); width: calc(var(--u) * 0.6); background: var(--blue); }
.hero__stem--r { right: calc(var(--u) * -0.22); }
.hero__stem--l { right: calc(var(--u) * 1.78); }
.hero__dot {
  width: var(--u); height: var(--u); border-radius: 50%; padding: 0; border: 0;
  right: calc(var(--u) * 0.58); top: calc(50% - var(--u) / 2);
  background: var(--pink); cursor: pointer; pointer-events: auto;
  animation: float 7s ease-in-out infinite;
  transition: scale .45s var(--spring);
}
@media (hover: hover) { .hero__dot:hover { scale: 1.05; } }
.hero__dot:focus-visible { outline-offset: 8px; }
@keyframes float { 50% { transform: translateY(-3.5%); } }
.hero__inner { position: relative; z-index: 2; padding-block: 44px clamp(64px, 8vw, 120px); }
.hero h1 { max-width: 6.2em; position: relative; z-index: 0; }
.hero__lede { margin-top: 30px; max-width: 22em; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.4; letter-spacing: -0.012em; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 40px; }
/* Phones: the two actions can't share a line, so they stack as one centred unit:
   the button spans the column and the quiet link sits centred under it, instead
   of a rounded button over a square-edged line of text. The link is tall enough
   to tap on its own, so it drops the extended hit area that would reach the button. */
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .hero__actions .pill { justify-content: center; }
  .hero__actions .link { align-self: center; padding-block: 12px; }
  .hero__actions .link::after { display: none; }
}

/* the redaction: a black bar wipes away and leaves a pink highlight */
.redact { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.redact.is-waiting::before, .redact.is-waiting::after { animation-play-state: paused; }
.try .redact { color: var(--ink); }
.contact .redact::before { background: var(--white); }
.redact::before, .redact::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; }
.redact::before {
  z-index: -1; top: 0.15em; bottom: 0.03em; background: var(--pink);
  transform-origin: left center; animation: highlight .6s .95s var(--ease) both;
}
.redact::after {
  top: 0.09em; bottom: 0.01em; background: var(--ink);
  transform-origin: right center; animation: unredact .7s .35s var(--ease) both;
}
@keyframes unredact { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes highlight { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- try one: the puzzle on the blue plate ---------- */

.try { background: var(--blue); color: var(--white); padding-block: clamp(88px, 10vw, 160px); overflow-x: clip; }
.try__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 96px); align-items: start; }
.try__copy > p { margin-top: 26px; max-width: 24em; font-size: 20px; line-height: 1.5; color: var(--on-blue-soft); }
.try__copy .try__fact { font-family: var(--math); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--on-blue-soft); word-spacing: -0.08em; }

.puzzle { min-width: 0; background: var(--white); color: var(--ink); padding: clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px) clamp(18px, 2vw, 26px); }
.board-wrap { position: relative; }
.stamp {
  position: absolute; left: 50%; top: 46%;
  padding: 9px 22px; border: 5px solid var(--blue); border-radius: 10px;
  color: var(--blue); background: rgba(255, 255, 255, 0.86);
  font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); font-weight: 700; font-stretch: 112%; line-height: 1; letter-spacing: 0.01em;
  pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%) rotate(-12deg) scale(2.2);
  transition: opacity .2s ease, transform .5s var(--spring);
}
.stamp.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.board { width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.board__grid line { stroke: #ECECF6; stroke-width: 1; }
.board__route { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.board__best {
  fill: none; stroke: var(--pink); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.board__ghost { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.board__depot-stem { fill: var(--ink); }
.board__depot-dot { fill: var(--pink); }
.board__tag { font: italic 400 16px var(--math); fill: var(--mute); text-anchor: middle; }
.stop { cursor: pointer; outline: none; }
.stop__hit { fill: transparent; }
.stop__dot { fill: var(--white); stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--spring), fill .2s ease; }
.stop:focus-visible .stop__dot { transform: scale(1.3); }
@media (hover: hover) { .stop:hover .stop__dot { transform: scale(1.3); } }
.stop.is-on .stop__dot { fill: var(--ink); }
.stop:focus-visible .stop__hit { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 3 4; }
.stop__num { font: 600 12px var(--sans); fill: var(--white); text-anchor: middle; pointer-events: none; }
.puzzle__status { margin-top: 16px; min-height: 3em; font-size: 18px; font-weight: 520; line-height: 1.4; }
.puzzle__status[data-tone="win"] { background: linear-gradient(transparent 55%, var(--pink) 55%, var(--pink) 92%, transparent 92%); display: inline; }
.puzzle__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 12px; }
.puzzle__tools { display: inline-flex; gap: 20px; }
.puzzle__after { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 18px; font-weight: 520; }

/* ---------- operators who do the math: the mark, explained ---------- */

.ops { padding-block: clamp(96px, 11vw, 180px); overflow-x: clip; }
.ops__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.ops__copy p { margin-top: 34px; max-width: 24em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.45; font-weight: 450; }

.pair { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 0.86; margin-left: auto; container-type: inline-size; }
.pair__stem {
  position: absolute; top: 0; bottom: 0; width: 21%;
  background: var(--ink); color: var(--on-dark);
  transition: transform 1s var(--spring);
}
.pair__stem--l { left: 0; }
.pair__stem--r { right: 0; }
.pair__label {
  position: absolute; left: 50%; bottom: 22px;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  display: flex; gap: 8px; white-space: nowrap;
}
.pair__label b { font-weight: 600; font-stretch: var(--wide); font-size: clamp(1.25rem, 0.9rem + 1vw, 1.8rem); letter-spacing: -0.03em; line-height: 1; }
.pair__label small { font: 500 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); }
/* the small print on the spines only when they are tall enough to carry it */
@container (max-width: 440px) { .pair__label small { display: none; } }
.pair__dot {
  position: absolute; left: 50%; top: 44%; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--pink);
  transform: translate(-50%, -50%);
  transition: transform 1.1s var(--spring), opacity .3s ease;
}
.pair__here {
  position: absolute; left: 50%; top: calc(44% + 23%); transform: translateX(-50%);
  white-space: nowrap; font-family: var(--math); font-style: italic; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem);
  transition: opacity .4s ease .7s;
}
.pair.is-waiting .pair__dot { transform: translate(-50%, -190%) scale(0.5); opacity: 0; }
.pair.is-waiting .pair__stem--l { transform: translateX(-26%); }
.pair.is-waiting .pair__stem--r { transform: translateX(26%); }
.pair.is-waiting .pair__here { opacity: 0; transition-delay: 0s; }

/* ---------- what we solve: a big index on the ink plate ---------- */

.solve { background: var(--ink); color: var(--on-dark); padding-block: clamp(96px, 11vw, 180px); }
.solve__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px 64px; align-items: end; }
.solve__intro { max-width: 24em; padding-bottom: 10px; font-size: 20px; line-height: 1.5; color: var(--on-dark-soft); }

.catalog {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 4.5vw, 80px); align-items: start;
  margin-top: clamp(48px, 6vw, 96px);
}
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-dark-rule); }
.index li { border-bottom: 1px solid var(--on-dark-rule); }
.index__tab {
  display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; gap: 10px;
  width: 100%; padding: 15px 0 14px; border: 0; background: none; text-align: left; cursor: pointer;
  color: rgba(245, 244, 239, 0.52);
  transition: color .3s var(--ease);
}
.index__tab:hover { color: var(--on-dark); }
.index__no { font: 500 13px var(--mono); letter-spacing: 0.04em; color: var(--on-dark-soft); transition: color .3s var(--ease); }
.index__q {
  justify-self: start;
  font-size: clamp(1.45rem, 0.7rem + 2vw, 2.75rem); font-weight: 540; font-stretch: 104%; line-height: 1.08; letter-spacing: -0.035em;
  text-wrap: balance;
}
/* the marker hugs each line of the question, and sweeps in from the left */
.index__hl {
  padding: 0 0.12em; margin: 0 -0.12em;
  background: linear-gradient(var(--pink), var(--pink)) no-repeat 0 0.24em / 0 0.96em;   /* from just above the ascenders to just below the baseline: lines keep a hairline apart */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .5s var(--ease);
}
.index__tab[aria-expanded="true"] { color: var(--ink); }
.index__tab[aria-expanded="true"] .index__hl { background-size: 100% 0.96em; }
.index__tab[aria-expanded="true"] .index__no { color: var(--pink); }
.index__desc { padding: 0 0 18px 3em; font-size: 17px; line-height: 1.5; color: var(--on-dark-soft); }
.index__math { font-family: var(--math); font-style: italic; font-size: 1.08em; color: var(--on-dark); }
.solve.is-live .index__desc { display: none; }

.lens {
  position: sticky; top: 28px; min-width: 0;
  padding: clamp(16px, 2vw, 28px);
  background: var(--pink); color: var(--ink);
}
.solve:not(.is-live) .lens { display: none; }
.lens__fig { aspect-ratio: 4 / 3; }
.lens__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(13, 13, 18, 0.22);
}
.lens__no { font: 500 13px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.lens__math { font-family: var(--math); font-style: italic; font-size: 19px; }
.lens__desc { margin-top: 10px; font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); font-weight: 520; line-height: 1.3; letter-spacing: -0.015em; }
.lens__cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
  font-size: 16px; font-weight: 520;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.lens__cta .pill__dot { background: var(--blue); }
.lens__cta:hover .pill__dot { transform: translateX(4px) scale(1.3); }
.solve__more { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 20px; color: var(--on-dark-soft); }
.solve__more .link { color: var(--on-dark); }

/* a ticker of the mathematics along the top of the ink plate */
.ticker {
  overflow: hidden; margin: calc(-1 * clamp(96px, 11vw, 180px)) 0 clamp(72px, 8vw, 128px);
  padding: 20px 0 19px; border-bottom: 1px solid var(--on-dark-rule);
}
.ticker__track { display: flex; align-items: center; gap: 26px; width: max-content; margin: 0; animation: tick 70s linear infinite; }
.ticker__track span { font-family: var(--math); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.5rem); white-space: nowrap; color: var(--on-dark); }
.ticker__track i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }
@keyframes tick { to { transform: translateX(-50%); } }

/* live diagrams on the pink panel: ink for the problem, blue for the answer */
.dg { display: block; width: 100%; height: 100%; overflow: visible; }
.dg .ln { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dg .ln.acc { stroke: var(--blue); stroke-width: 3.2; }
.dg .thin { stroke-width: 1.5; }
.dg .dash { stroke-dasharray: 4 6; }
.dg .ax { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .45; }
.dg .ink { fill: var(--ink); }
.dg .acc-f { fill: var(--blue); }
.dg .acc-a { fill: var(--blue); fill-opacity: .22; }
.dg .wht { fill: var(--white); }
.dg .wht-a { fill: var(--white); fill-opacity: .55; }
.dg .wht-s { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.dg .cell { fill: none; stroke: var(--ink); stroke-opacity: .18; }
.dg .w-s { stroke: var(--white); }
.dg .t { font: italic 400 16px var(--math); fill: var(--ink); }
.dg .t.n, .dg .t.w { font: 500 13px var(--sans); }
.dg .t.w { fill: var(--white); }
.dg .sub, .dg .sup { font-size: 11px; }
.dg .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dg-draw 1.1s var(--ease) var(--d, 0s) forwards; }
.dg .pop { transform-box: fill-box; transform-origin: center; animation: dg-pop .55s var(--spring) var(--d, 0s) both; }
.dg .fade { animation: dg-fade .6s ease var(--d, 0s) both; }
.dg .grow { transform-box: fill-box; transform-origin: center bottom; animation: dg-grow .7s var(--ease) var(--d, 0s) both; }
.dg .open { transform-box: fill-box; transform-origin: left center; animation: dg-open 1.2s var(--ease) var(--d, 0s) both; }
.dg .drop { animation: dg-drop .55s var(--spring) var(--d, 0s) both; }
.dg .slide { animation: dg-slide 1.3s var(--ease) var(--d, 0s) both; }
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
@keyframes dg-pop { from { transform: scale(0); } }
@keyframes dg-fade { from { opacity: 0; } }
@keyframes dg-grow { from { transform: scaleY(0); } }
@keyframes dg-open { from { transform: scaleX(0); } }
@keyframes dg-drop { from { transform: translateY(-26px); opacity: 0; } }
@keyframes dg-slide { from { transform: translateX(var(--from, -100px)); } }

/* ---------- the toolkit: the hard part is already built ---------- */

.studio { padding-block: clamp(96px, 11vw, 180px); overflow-x: clip; }
.studio__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px 64px; align-items: end; }
.studio__head h2 { max-width: 8.6em; }
.studio__lede { max-width: 25em; padding-bottom: 10px; font-size: clamp(1.1rem, 0.98rem + 0.45vw, 1.34rem); line-height: 1.5; color: var(--ink-soft); }

.kit {
  list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.kit__tool {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 24px 28px 26px; background: var(--white);
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: background-color .35s var(--ease), color .35s var(--ease);
  animation: kit-in .7s var(--ease) both;
}
.kit__tool:nth-child(2) { animation-delay: .08s; }
.kit__tool:nth-child(3) { animation-delay: .16s; }
.kit__tool:nth-child(4) { animation-delay: .24s; }
.kit__tool:nth-child(5) { animation-delay: .32s; }
.kit__tool:nth-child(6) { animation-delay: .4s; }
@keyframes kit-in { from { opacity: 0; transform: translateY(26px); } }
.kit.is-waiting .kit__tool, .kit.is-waiting .dg, .kit.is-waiting .dg * { animation-play-state: paused; }
.kit__code { color: var(--mute); transition: color .35s var(--ease); }
.kit__glyph { width: 100%; max-width: 230px; height: auto; aspect-ratio: 160 / 100; margin: 24px 0 26px; }
.kit__glyph .t { font-size: 14px; }
.kit__name { font-size: clamp(1.6rem, 1.05rem + 1.3vw, 2.25rem); line-height: 1.05; letter-spacing: -0.04em; }
.kit__what { margin-top: 10px; max-width: 22em; font-size: 17px; line-height: 1.45; color: var(--ink-soft); transition: color .35s var(--ease); }
.kit__solves { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 22px; }
.kit__solves .label { margin-right: 4px; color: var(--mute); transition: color .35s var(--ease); }
.kit__solves a {
  padding: 3px 10px 4px; border: 1.5px solid currentColor; border-radius: 999px;
  font: 500 12.5px/1.2 var(--mono); letter-spacing: 0.04em; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.kit__solves a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.kit__bar { display: none; }
.dg .pk { fill: var(--pink); }
.kit__roll { animation: roll 1.9s linear .35s both; }
@keyframes roll {
  0% { transform: translate(-64px, -66px); }
  20% { transform: translate(-47px, -56px); }
  38% { transform: translate(-31px, -33px); }
  52% { transform: translate(-16px, -10px); }
  62% { transform: translate(0, 0); }
  74% { transform: translate(11px, -3px); }
  86% { transform: translate(-4px, -1px); }
  100% { transform: translate(0, 0); }
}
.kit__spin { transform-box: view-box; transform-origin: 80px 50px; animation: spin 5s linear 1.2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* hover: the tool lights up in blue */
@media (hover: hover) {
  .kit__tool:hover { background: var(--blue); color: var(--white); }
  .kit__tool:hover .kit__code, .kit__tool:hover .kit__solves .label { color: rgba(255, 255, 255, 0.8); }
  .kit__tool:hover .kit__what { color: var(--on-blue-soft); }
  .kit__tool:hover .dg .ln { stroke: var(--white); }
  .kit__tool:hover .dg .ln.acc { stroke: var(--pink); }
  .kit__tool:hover .dg .acc-f { fill: var(--pink); }
  .kit__tool:hover .dg .acc-a { fill: var(--pink); fill-opacity: .35; }
  .kit__tool:hover .dg .wht-s { fill: var(--blue); stroke: var(--white); }
  .kit__tool:hover .dg .ink { fill: var(--white); }
  .kit__tool:hover .dg .t { fill: var(--white); }
  .kit__tool:hover .kit__solves a:hover { background: var(--white); border-color: var(--white); color: var(--blue); }
}

.exhibit { margin-top: clamp(96px, 11vw, 170px); padding-top: 30px; border-top: 1px solid var(--rule); }
.exhibit__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.exhibit__logo { color: var(--ink); line-height: 0; }
.cortex-logo { height: 26px; width: auto; }
.exhibit h3 { margin-top: 22px; max-width: 19em; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.045em; }
.exhibit__text { margin-top: 20px; max-width: 34em; font-size: 19px; color: var(--ink-soft); }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(40px, 5vw, 72px); }
/* label, number and note share rows across the metrics, so the numbers line up
   even when one label wraps onto two lines */
.metrics > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; min-width: 0; padding-top: 16px; border-top: 2px solid var(--ink); }
.metrics dt { color: var(--mute); }
.metrics__num { margin: 12px 0 6px; font-size: clamp(2.7rem, 1.3rem + 3.6vw, 5rem); font-weight: 560; font-stretch: var(--wide); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.metrics__note { font-size: 15px; color: var(--mute); text-wrap: balance; }
.exhibit__source { margin-top: 30px; font-size: 15px; color: var(--mute); }
.exhibit__source a { color: var(--ink); text-underline-offset: 4px; }

/* ---------- contact: the pink plate ---------- */

.contact { background: var(--pink); color: var(--ink); padding-block: clamp(96px, 11vw, 180px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.contact__copy > p { margin-top: 28px; max-width: 24em; font-size: 20px; line-height: 1.5; }
.contact__copy .contact__mail { font-size: 18px; }
.contact__mail a { font-weight: 560; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.contact__form { min-width: 0; }

.form { display: grid; gap: 30px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.field { min-width: 0; }
.field label, .fallback label { display: block; margin-bottom: 6px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.field input, .field textarea {
  display: block; width: 100%;
  padding: 10px 2px 12px;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 20px; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
/* the message box grows with what you write; no drag handle on touch screens */
@supports (field-sizing: content) { .field textarea { field-sizing: content; max-height: 60vh; } }
@media (pointer: coarse) { .field textarea { resize: none; } }
.field input::placeholder, .field textarea::placeholder { color: rgba(13, 13, 18, 0.5); }
.field input:focus, .field textarea:focus { outline: none; background: rgba(255, 255, 255, 0.4); }
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 3px 0 0 var(--ink); }
.field [aria-invalid="true"] { border-bottom-color: #8A1238; background: rgba(138, 18, 56, 0.1); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
.form__status { font-size: 17px; line-height: 1.45; max-width: 30em; }
.form__status[data-state="error"] { color: #8A1238; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.fallback { margin-top: 30px; padding: 22px; background: var(--white); }
.fallback textarea {
  display: block; width: 100%; min-height: 168px; margin-top: 8px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: 0; resize: vertical;
  background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.6;
}
.fallback__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 16px; }

/* ---------- footer: the ink finale ---------- */

.foot { background: var(--ink); color: var(--on-dark); padding-block: clamp(72px, 8vw, 120px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
/* The footer mark starts with its variable hidden: a dashed outline. Tap it and the dot appears. */
.foot__mark { position: relative; display: block; width: 120px; height: 120px; margin-bottom: 14px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--on-dark); }
.foot__stem { position: absolute; top: 11.25px; width: 22.5px; height: 97.5px; background: currentColor; }
.foot__stem--l { left: 11.25px; }
.foot__stem--r { left: 86.25px; }
.foot__dot {
  position: absolute; left: 41.25px; top: 41.25px; width: 37.5px; height: 37.5px; border-radius: 50%;
  border: 2px dashed rgba(245, 244, 239, 0.55); background: transparent;
  transition: transform .6s var(--spring), background-color .2s ease, border-color .2s ease;
}
.foot__mark:hover .foot__dot { transform: scale(1.12); border-color: var(--pink); }
.foot__mark[aria-pressed="true"] .foot__dot { background: var(--pink); border-color: var(--pink); animation: found .6s var(--spring); }
@keyframes found { from { transform: scale(0.2); } }
.foot__tag { margin-top: 6px; font-size: 17px; color: var(--on-dark-soft); }
.foot__h { margin-bottom: 14px; color: var(--on-dark-soft); }
.foot__toc { display: flex; flex-direction: column; }
.foot__toc a { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 18px; font-weight: 520; text-decoration: none; }
.foot__toc i { flex: 1; min-width: 16px; border-bottom: 2px dotted rgba(245, 244, 239, 0.32); transform: translateY(-4px); }
.foot__toc span:last-child { font: 500 13px var(--mono); color: var(--on-dark-soft); }
.foot__toc a:hover span:first-child { color: var(--pink); }
.foot__contact { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.foot__mail { max-width: 100%; overflow-wrap: normal; font-size: clamp(1.1rem, 0.85rem + 0.6vw, 1.45rem); font-weight: 520; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.foot__mail:hover { color: var(--pink); }
.foot__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(18px, 2vw, 28px); font-size: 14px; line-height: 1.5; color: var(--on-dark-soft); }
.hunt { display: flex; align-items: center; gap: 14px; margin-top: 26px; max-width: 30em; font-size: 15px; line-height: 1.45; color: var(--on-dark-soft); }
.hunt__text { text-wrap: balance; }
.hunt__dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex: none; }
/* x, y, z: each dot keeps its letter hidden until it's found. The letters are
   outlines from the math italic, each centred on its own ink, so they sit dead
   centre whatever the font metrics; the dashes are 12 even ones all round. */
.hunt__dots li { width: 22px; height: 22px; }
.hunt__dots svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hunt__dots circle { fill: transparent; stroke: rgba(245, 244, 239, 0.5); stroke-width: 1.5; stroke-dasharray: 2.95 2.417; transition: fill .3s ease, stroke .3s ease; }
.hunt__dots path { fill: transparent; transition: fill .3s ease .1s; }
.hunt__dots li.is-found { animation: found .6s var(--spring); }
.hunt__dots li.is-found circle { fill: var(--pink); stroke: var(--pink); stroke-dasharray: none; }
.hunt__dots li.is-found path { fill: var(--ink); }
.hunt__text .math, .toast .math { font-size: 1.2em; line-height: 1; }
.hunt__text a { color: var(--pink); font-weight: 560; text-underline-offset: 4px; white-space: nowrap; }
.hunt.is-done [data-hunt-title] { color: var(--pink); font-weight: 560; }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px);
  margin: 0; padding: 12px 20px 12px 16px; border-radius: 999px;
  background: var(--ink); color: var(--on-dark); box-shadow: 0 12px 34px -10px rgba(13, 13, 18, 0.5);
  font-size: 15px; font-weight: 520; line-height: 1.3;
  opacity: 0; visibility: hidden; transform: translate(-50%, 140%); pointer-events: none;
  transition: transform .5s var(--spring), opacity .25s ease, visibility 0s linear .5s;
}
.toast::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); }
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.qed { font-family: var(--math); font-size: 34px; line-height: 0.8; color: var(--pink); text-decoration: none; transition: transform .45s var(--spring); }
.qed:hover { transform: translateY(-4px); }
.foot__end { margin-top: clamp(40px, 6vw, 88px); }
/* the name, drawn from the font's outlines; the dots of the i's are pink circles set
   on the centre of the font's own dots, so they sit exactly over the stems */
.foot__big { display: block; width: 100%; height: auto; overflow: visible; }
.foot__big path { fill: var(--on-dark); }
.foot__dots circle { fill: var(--pink); transform-box: fill-box; transform-origin: center; transition: transform .9s var(--spring), opacity .3s ease; }
.foot__dots circle:nth-child(2) { transition-delay: .12s; }
.foot__big.is-waiting .foot__dots circle { transform: translateY(-260%); opacity: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .top__nav { display: none; }
  .top__cta { margin-left: auto; }
  .top__menu { display: inline-flex; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__id { grid-column: 1 / -1; }
  .try__grid { grid-template-columns: minmax(0, 1fr); }
  .puzzle { max-width: 760px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics > div:nth-child(-n+2) { margin-bottom: 32px; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .solve__head, .studio__head { grid-template-columns: minmax(0, 1fr); }
  .catalog { grid-template-columns: minmax(0, 1fr); }
  .lens { position: static; margin: 2px 0 20px; }
  .lens__fig { aspect-ratio: 4 / 3.2; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px); }
  .top__inner, .menu__top { min-height: 68px; gap: 12px; }
  .brand__name { font-size: 18px; }
  .index__tab { grid-template-columns: 2.6em minmax(0, 1fr); padding: 13px 0 12px; }
  .ops__grid { grid-template-columns: minmax(0, 1fr); }
  .pair { margin-left: 0; max-width: 500px; }
  /* the toolkit becomes a row you swipe */
  .kit {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px)));
    margin-right: calc(-1 * max(var(--gutter), env(safe-area-inset-right, 0px)));
    padding: 4px max(var(--gutter), env(safe-area-inset-right, 0px)) 18px max(var(--gutter), env(safe-area-inset-left, 0px));
    scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px));
    border: 0; scrollbar-width: none;
  }
  .kit::-webkit-scrollbar { display: none; }
  .kit__tool { flex: 0 0 min(84%, 330px); scroll-snap-align: start; border: 1px solid var(--rule); padding: 20px 22px 22px; }
  .kit__glyph { max-width: 200px; margin: 18px 0 20px; }
  /* where you are in the row */
  .kit__bar { display: block; position: relative; height: 3px; margin-top: 2px; border-radius: 3px; background: var(--rule); overflow: hidden; }
  .kit__bar i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--ink); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .metrics { column-gap: 20px; }
  .metrics > div:nth-child(-n+2) { margin-bottom: 28px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* the hero stacks (text, then the mark) on phones and on tablets held upright */
@media (max-width: 760px), (max-width: 980px) and (orientation: portrait) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; --u: min(34vw, 210px); }
  /* the headline fills the width: "Bring us the" is about 5.2em long */
  .hero h1 { font-size: min(16.2vw, 7.4rem); }
  .hero__inner { padding-bottom: 8px; }
  /* the stems stop well short of the blue section, so the two blues never nearly touch */
  .hero__art { position: relative; inset: auto; order: 2; height: calc(var(--u) * 3.15); margin-top: 8px; }
  .hero__stem { top: calc(var(--u) * 0.1); }
  .hero__dot { top: calc(var(--u) * 0.9); }
}
/* landscape phones and small tablets keep the poster, with a smaller mark */
@media (min-width: 761px) and (max-width: 980px) and (orientation: landscape) {
  .hero { --u: 13vw; }
}
/* short landscape screens: the headline starts right under the header, not halfway down */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__inner { padding-block: 28px 56px; }
}

@media (max-width: 560px) {
  .top__cta { display: none; }
  .top__menu { margin-left: auto; }
  /* the puzzle board gets small on phones: bigger stops, numbers and hit areas */
  .stop__dot { scale: 1.3; }
  .stop__num, .stop__hit { transform-box: fill-box; transform-origin: center; }
  .stop__num { scale: 1.45; }
  .stop__hit { scale: 1.25; }
  .board__tag { font-size: 23px; }
}

@media (max-width: 360px) {
  .brand__name { font-size: 16px; }
  .top__menu { min-width: 78px; padding: 0 14px; }
  .menu__nav a { gap: 12px; font-size: 1.55rem; }
  .menu__nav span { min-width: 2.2em; }
}

@media (max-height: 520px) {
  .menu__nav { padding-block: 14px 18px; }
  .menu__nav a { font-size: clamp(1.5rem, 1rem + 2vw, 2rem); }
  .menu__mail { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track { animation: none; }
  .redact::after { display: none; }
  .hero__dot { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}