/* Switchback: vertical rupture. Chalk, ink, hazard, plywood. */
:root {
  --chalk: #F2EFE8;
  --ink: #131211;
  --ink-2: #221F1D;
  --hazard: #FF4B1F;
  --signal: #C9340C;
  --ply: #D8B383;
  --stone: #5A5650;
  --dust: #BDB7AC;
  --r-white: #F6F4EE;
  --r-yellow: #F2C230;
  --r-blue: #2956D6;
  --r-black: #1A1918;
  --display: "Anton", Impact, Haettenschweiler, "DIN Condensed", "sans-serif-condensed", "Roboto Condensed", sans-serif;
  --body: "Archivo", Bahnschrift, "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --snap: cubic-bezier(.7, 0, .2, 1);
  --focus: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  font-variant-numeric: lining-nums;
  font-synthesis: style; /* display type asks for 700 so fallbacks go bold; Impact must never get a fake bold */
  text-rendering: optimizeLegibility;
}
svg { display: block; }
p, h1, h2, h3 { overflow-wrap: break-word; }
a { color: inherit; text-decoration-thickness: .1em; text-underline-offset: .22em; text-decoration-color: var(--hazard); }
a:hover { text-decoration-thickness: .2em; }
::selection { background: var(--hazard); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.top, .intro, .wallsec, .passes, .foot { --focus: var(--hazard); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
.skip {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 12px 16px; background: var(--hazard); color: var(--ink);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 64px; }

/* ---------- shared pieces ---------- */
.kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  font: 600 .8rem/1 var(--body); font-stretch: 87.5%;
  letter-spacing: .16em; text-transform: uppercase;
}
.kicker > span {
  padding: 5px 7px; background: var(--ink); color: var(--chalk);
  font-family: var(--mono); letter-spacing: 0;
}
.intro .kicker > span, .wallsec .kicker > span, .passes .kicker > span { background: var(--hazard); color: var(--ink); }
.h2 {
  margin: 0 0 24px;
  font: 700 clamp(2.7rem, 6.2vw, 5.8rem)/.88 var(--display);
  letter-spacing: .004em; text-transform: uppercase;
}
.h3 {
  margin: 0 0 16px;
  font: 700 clamp(1.7rem, 2.4vw, 2.1rem)/1 var(--display);
  text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .8em 1.25em;
  border: 2px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; cursor: pointer;
  font: 700 .88rem/1 var(--body); font-stretch: 87.5%;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: transform .16s var(--snap), box-shadow .16s var(--snap), background-color .16s, color .16s, border-color .16s;
}
.btn--hazard { background: var(--hazard); border-color: var(--hazard); color: var(--ink); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--chalk); }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--hazard); }
.btn--hazard:hover, .btn--line:hover { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }
.btn--ink:hover { background: var(--hazard); border-color: var(--ink); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(0, 0); box-shadow: none; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: var(--chalk);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.top__in {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--max); margin: 0 auto; padding: 10px var(--pad);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--chalk); text-decoration: none; }
.brand__mark { width: 36px; height: 36px; color: var(--chalk); }
.brand__word { font: 700 1.75rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: block; padding: 10px 12px; color: var(--chalk); text-decoration: none; white-space: nowrap;
  font: 600 .8rem/1 var(--body); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .15s, color .15s;
}
.nav a:hover { background: var(--chalk); color: var(--ink); }
.top__cta { min-height: 42px; padding: .7em 1em; }

/* ---------- hero ---------- */
.hero {
  --line: calc(clamp(3.3rem, 8.4vw, 8.6rem) * var(--fit-ln, 1));
  --seam: calc(clamp(6rem, 21vw, 20.5rem) * var(--fit, 1));
  position: relative;
  overflow-x: clip;
  background: var(--chalk);
  background-image:
    linear-gradient(90deg, rgba(19, 18, 17, .07) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.hero__in {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(22px, 3.4vw, 44px) var(--pad) 0;
}
.hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hero__tags li {
  padding: 7px 10px; border: 2px solid var(--ink);
  font: 700 .74rem/1 var(--body); font-stretch: 87.5%; letter-spacing: .14em; text-transform: uppercase;
}
.hero__tags li:first-child { background: var(--ink); color: var(--chalk); }
.hero__where {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0;
  font: 400 .82rem/1.3 var(--mono); letter-spacing: .02em;
}
.hero__where span::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; background: var(--hazard); vertical-align: .05em; }
.hero__title {
  position: relative; z-index: 2;
  margin: clamp(18px, 3vw, 36px) 0 0;
  font: 700 var(--line)/.86 var(--display);
  letter-spacing: .005em; text-transform: uppercase;
}
.ln { display: block; overflow: hidden; white-space: nowrap; }
.ln > span { display: inline-block; }
.ln:nth-child(2) > span { color: var(--signal); }

.seam { position: relative; display: block; white-space: nowrap; }
.seam__top { display: block; clip-path: polygon(-5% -20%, 105% -20%, 105% 50%, -5% 50%); }
.seam__bot {
  position: absolute; top: 0; left: 0;
  clip-path: polygon(-5% 50%, 105% 50%, 105% 120%, -5% 120%);
  transform: translateX(.05em);
}
/* The hero word breaks on a fault line: chalk kerf, hazard edge, then the lower half dropped and slid. */
.seam--hero { margin-top: .03em; font-size: var(--seam); line-height: .8; }
.seam--hero .seam__bot { color: var(--hazard); translate: 0 max(12px, .08em); }
.seam--hero::before {
  content: ""; position: absolute; z-index: -1;
  top: calc(50% + max(4px, .03em)); bottom: 0; left: calc(50% - 50vw); width: 100vw;
  border-top: max(3px, .018em) solid var(--hazard);
  background: var(--ink);
}
.hero__art {
  position: absolute; z-index: 1;
  right: var(--pad); bottom: calc(var(--seam) * .4 - max(4px, var(--seam) * .03));
  width: clamp(96px, 17.5vw, 252px);
}
.tw { width: 100%; height: auto; overflow: visible; }
.hero__dim {
  position: absolute; top: 38%; bottom: 0; right: calc(100% + 26px);
  width: 14px; border-right: 2px solid var(--ink);
}
.hero__dim::before, .hero__dim::after { content: ""; position: absolute; right: -8px; width: 14px; height: 2px; background: var(--ink); }
.hero__dim::before { top: 0; }
.hero__dim::after { bottom: 0; }
.hero__dim > span {
  position: absolute; top: 50%; right: 8px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  padding: 8px 0; background: var(--chalk);
  font: 400 .76rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.tw__paint { font: 700 19px var(--display); fill: var(--chalk); letter-spacing: .5px; }
.tw__num { font: 400 11px var(--mono); fill: var(--chalk); opacity: .4; }
.tw__half--l { transform: translateX(-13px); }
.tw__half--r { transform: translateX(13px); }
.tw__crown { transform: translate(-4px, -7px) rotate(-6deg); transform-origin: 160px 44px; }

/* ---------- intro ---------- */
.intro { background: var(--ink); color: var(--chalk); }
.intro__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) var(--pad) clamp(56px, 7vw, 100px);
}
.intro__lede {
  grid-column: 1 / 8; margin: 0;
  font: 400 clamp(1.45rem, 2.5vw, 2.3rem)/1.18 var(--body); font-stretch: 87.5%;
}
.intro__lede strong { color: var(--hazard); font-weight: 700; }
.intro__side { grid-column: 8 / 13; color: var(--dust); }
.intro__side p { margin: 0 0 20px; }
.intro__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.intro__cta .btn--line { color: var(--chalk); }
.facts {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; border-top: 3px solid var(--chalk);
}
.facts div { padding: 18px 20px 0 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid rgba(242, 239, 232, .2); }
.facts dt { font: 700 1.55rem/1 var(--display); color: var(--hazard); text-transform: uppercase; }
.facts dd { margin: 8px 0 0; color: var(--dust); }

/* ---------- then / now ---------- */
.thennow { background: var(--chalk); }
.thennow__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--pad);
}
.thennow__copy { grid-column: 1 / 6; position: sticky; top: 104px; }
.h2__turn { display: block; color: var(--signal); }
.thennow__lede { max-width: 42ch; margin: 0; font-size: 1.12rem; }
.ledger {
  display: grid; grid-template-columns: 1fr 1fr;
  margin-top: 36px; border-top: 3px solid var(--ink);
}
.ledger__col { padding: 16px 18px 0 0; }
.ledger__col--now { padding: 16px 0 0 18px; border-left: 3px solid var(--ink); }
.ledger__h { margin: 0 0 8px; font: 700 2.1rem/1 var(--display); text-transform: uppercase; }
.ledger__col--now .ledger__h { color: var(--signal); }
.ledger ol { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.ledger li {
  display: grid; grid-template-columns: 2.2em 1fr; padding: 10px 0;
  border-bottom: 1px solid rgba(19, 18, 17, .18);
  counter-increment: l; font-size: .98rem; line-height: 1.35;
}
.ledger li::before { content: counter(l, decimal-leading-zero); padding-top: .15em; color: var(--stone); font: 400 .78rem/1.2 var(--mono); }

.cut { grid-column: 7 / 13; margin: 0; }
.cut__stage {
  --cut: 46%;
  position: relative; overflow: hidden;
  aspect-ratio: 560 / 720;
  border: 3px solid var(--ink); background: var(--chalk);
}
.js .cut__stage { cursor: ew-resize; touch-action: pan-y; }
.cut__then, .cut__now { position: absolute; inset: 0; width: 100%; height: 100%; }
.cut__now { clip-path: inset(0 0 0 var(--cut)); }
.cut__line {
  position: absolute; top: 0; bottom: 0; left: var(--cut);
  width: 4px; margin-left: -2px; background: var(--hazard);
  pointer-events: none;
}
.cut__grip {
  position: absolute; top: 50%; left: 50%;
  width: 30px; height: 60px; transform: translate(-50%, -50%);
  background: var(--hazard); border: 3px solid var(--ink);
}
.cut__grip::before, .cut__grip::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px;
  border: 6px solid transparent;
}
.cut__grip::before { left: -1px; border-right-color: var(--ink); }
.cut__grip::after { right: -1px; border-left-color: var(--ink); }
.cut__tag {
  position: absolute; top: 12px; padding: 7px 10px 5px;
  font: 700 1.5rem/1 var(--display); text-transform: uppercase;
}
.cut__tag--then { left: 12px; background: var(--ink); color: var(--chalk); }
.cut__tag--now { right: 12px; background: var(--hazard); color: var(--ink); }
.lbl { font: 400 13px var(--mono); fill: var(--ink); letter-spacing: .04em; }
.cut__now .lbl { fill: var(--signal); }
.cut__now .lbl--on { fill: var(--ink); }
.cut__control { display: none; }
.js .cut__control { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.cut__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cut__snap {
  min-height: 44px; padding: 8px 12px 6px;
  border: 2px solid var(--ink); background: none; color: var(--ink); cursor: pointer;
  font: 700 1.3rem/1 var(--display); text-transform: uppercase;
  transition: background-color .15s, color .15s;
}
.cut__snap:hover { background: var(--ink); color: var(--chalk); }
.cut__range { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cut__range::-webkit-slider-runnable-track { height: 6px; background: var(--ink); }
.cut__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 38px; margin-top: -16px; border: 3px solid var(--ink); border-radius: 0; background: var(--hazard); }
.cut__range::-moz-range-track { height: 6px; background: var(--ink); }
.cut__range::-moz-range-thumb { width: 20px; height: 32px; border: 3px solid var(--ink); border-radius: 0; background: var(--hazard); }
.cut__cap { max-width: 56ch; margin: 14px 0 0; color: var(--stone); font-size: .9rem; }

/* ---------- the wall ---------- */
.wallsec { background: var(--ink); color: var(--chalk); overflow-x: clip; }
.wallsec__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--pad) clamp(96px, 10vw, 150px);
}
.wallsec__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
.wallsec__head .kicker, .wallsec__head .h2 { grid-column: 1 / 8; }
.wallsec__head .h2 { margin: 0; }
.wallsec__head > p:last-child { grid-column: 8 / 13; margin: 0; color: var(--dust); }

.wall {
  grid-column: 1 / 7;
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 9 / 13;
  background-color: var(--ply);
  background-image:
    radial-gradient(circle, rgba(19, 18, 17, .55) 0 1.5px, transparent 2.2px),
    linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(19, 18, 17, .32) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.666% - 1px), rgba(19, 18, 17, .32) calc(66.666% - 1px) 66.666%, transparent 66.666%),
    linear-gradient(0deg, transparent calc(46.15% - 1px), rgba(19, 18, 17, .32) calc(46.15% - 1px) 46.15%, transparent 46.15%),
    repeating-linear-gradient(94deg, rgba(122, 82, 36, .09) 0 2px, transparent 2px 11px, rgba(255, 250, 240, .08) 11px 13px, transparent 13px 29px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: calc(100% / 18) calc(100% / 26), 100% 100%, 100% 100%, auto, 220px 220px;
  box-shadow: 0 0 0 6px var(--ink-2), 0 0 0 7px rgba(242, 239, 232, .18);
}
.wall__art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.wall__beta, .wall__beta-under { fill: none; stroke-linejoin: bevel; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; }
.wall__beta-under { stroke: var(--ink); stroke-width: .17; }
.wall__beta { stroke: var(--route, var(--hazard)); stroke-width: .075; }
.wall.has-route .wall__beta, .wall.has-route .wall__beta-under { opacity: 1; }
.wall[data-route="white"] { --route: var(--r-white); }
.wall[data-route="yellow"] { --route: var(--r-yellow); }
.wall[data-route="blue"] { --route: var(--r-blue); }
.wall[data-route="orange"] { --route: var(--hazard); }
.wall[data-route="black"] { --route: var(--r-black); }
.wall__holds {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(13, minmax(0, 1fr));
}
.hold {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0;
  border: 0; background: none; color: var(--hc); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s var(--snap), filter .3s var(--snap);
}
.hold svg {
  width: 84%; height: 84%; overflow: visible;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(2px 3px 0 rgba(19, 18, 17, .38));
  transition: transform .2s var(--snap);
}
.hold:hover svg { transform: rotate(var(--rot, 0deg)) scale(1.14); }
.hold[data-route="white"], [data-pick="white"], [data-route-card="white"] { --hc: var(--r-white); }
.hold[data-route="yellow"], [data-pick="yellow"], [data-route-card="yellow"] { --hc: var(--r-yellow); }
.hold[data-route="blue"], [data-pick="blue"], [data-route-card="blue"] { --hc: var(--r-blue); }
.hold[data-route="orange"], [data-pick="orange"], [data-route-card="orange"] { --hc: var(--hazard); }
.hold[data-route="black"], [data-pick="black"], [data-route-card="black"] { --hc: var(--r-black); }
.hold[data-c="1"] { grid-column: 1; } .hold[data-c="2"] { grid-column: 2; } .hold[data-c="3"] { grid-column: 3; }
.hold[data-c="4"] { grid-column: 4; } .hold[data-c="5"] { grid-column: 5; } .hold[data-c="6"] { grid-column: 6; }
.hold[data-c="7"] { grid-column: 7; } .hold[data-c="8"] { grid-column: 8; } .hold[data-c="9"] { grid-column: 9; }
.hold[data-r="1"] { grid-row: 1; } .hold[data-r="2"] { grid-row: 2; } .hold[data-r="3"] { grid-row: 3; }
.hold[data-r="4"] { grid-row: 4; } .hold[data-r="5"] { grid-row: 5; } .hold[data-r="6"] { grid-row: 6; }
.hold[data-r="7"] { grid-row: 7; } .hold[data-r="8"] { grid-row: 8; } .hold[data-r="9"] { grid-row: 9; }
.hold[data-r="10"] { grid-row: 10; } .hold[data-r="11"] { grid-row: 11; } .hold[data-r="12"] { grid-row: 12; }
.hold[data-r="13"] { grid-row: 13; }
.hold[data-rot="1"] { --rot: 35deg; } .hold[data-rot="2"] { --rot: -30deg; } .hold[data-rot="3"] { --rot: 80deg; }
.hold[data-rot="4"] { --rot: 150deg; } .hold[data-rot="5"] { --rot: -110deg; }
.hold[data-j="1"] { translate: 16% -10%; } .hold[data-j="2"] { translate: -14% 12%; }
.hold[data-j="3"] { translate: 10% 16%; } .hold[data-j="4"] { translate: -12% -14%; }
.tape {
  position: absolute; left: 70%; top: 64%; z-index: 1;
  padding: 3px 5px 2px; transform: rotate(-8deg);
  border: 1.5px solid var(--ink); background: var(--hc); color: var(--ink);
  font: 700 .62rem/1 var(--mono); white-space: nowrap;
}
.hold[data-route="blue"] .tape, .hold[data-route="black"] .tape { color: var(--chalk); }
.wall.has-route .hold { opacity: .28; filter: saturate(.3); }
.wall.has-route .hold.is-lit, .wall.has-route .hold.is-peek { opacity: 1; filter: none; }
.hold.is-lit::after {
  content: attr(data-n);
  position: absolute; top: 0; right: 0; z-index: 2;
  display: grid; place-items: center; min-width: 1.45em; height: 1.45em; padding: 0 .2em;
  background: var(--ink); color: var(--chalk); border: 1.5px solid var(--chalk);
  font: 700 .7rem/1 var(--mono);
}
.wall__plate {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 0;
  color: var(--dust); font: 400 .74rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}

.readout { grid-column: 7 / 13; position: sticky; top: 96px; }
.picker { display: none; }
.js .picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 28px; }
.chip {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 8px;
  min-height: 48px; padding: 10px; text-align: left; cursor: pointer;
  border: 2px solid rgba(242, 239, 232, .28); background: transparent; color: var(--chalk);
  font: inherit;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip__dot { width: 16px; height: 16px; background: var(--hc); border: 2px solid var(--chalk); transform: rotate(45deg); }
.chip__g { font: 700 1.55rem/1 var(--display); }
.chip__n {
  grid-column: 1 / -1; color: var(--dust);
  font: 700 .66rem/1.15 var(--body); font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase;
}
.chip:hover { border-color: var(--chalk); }
.chip[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--ink); }
.chip[aria-pressed="true"] .chip__n { color: var(--stone); }
.chip[aria-pressed="true"] .chip__dot { border-color: var(--ink); }

.routes { display: grid; gap: 48px; }
.route { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; padding-top: 20px; border-top: 3px solid var(--chalk); }
.js .route { display: none; }
.js .route.is-active { display: grid; }
.route__grade { grid-row: 1 / 3; margin: 0; color: var(--hazard); font: 700 clamp(5rem, 9.5vw, 9rem)/.78 var(--display); }
.route__name { margin: 0; font: 700 clamp(2rem, 3.6vw, 3.2rem)/.92 var(--display); text-transform: uppercase; }
.route__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; }
.route__facts dt { color: var(--dust); font: 700 .66rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.route__facts dd { margin: 5px 0 0; font-weight: 600; }
.route__tape { display: inline-block; width: 1.5em; height: .75em; margin-right: 7px; border: 1.5px solid var(--chalk); background: var(--hc); transform: rotate(-5deg); }
.route__note {
  grid-column: 1 / -1; margin: 28px 0 0; padding-left: 18px;
  border-left: 4px solid var(--hazard);
  font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.5;
}
.route__note::before {
  content: "Setter's note"; display: block; margin-bottom: 6px; color: var(--dust);
  font: 700 .66rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
}
.route__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; }
.route__tags li {
  padding: 6px 9px; border: 1.5px solid rgba(242, 239, 232, .5);
  font: 700 .72rem/1 var(--body); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase;
}

.legend { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(242, 239, 232, .22); }
.legend__h { margin: 0 0 14px; color: var(--dust); font: 700 .7rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.legend ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 14px; align-items: start; color: var(--dust); font-size: .95rem; line-height: 1.45; }
.legend strong { color: var(--chalk); }
.legend__icon { justify-self: start; padding: 4px 6px 3px; font: 700 .72rem/1 var(--mono); text-transform: uppercase; }
.legend__icon--tape { background: var(--hazard); color: var(--ink); border: 1.5px solid var(--ink); transform: rotate(-8deg); }
.legend__icon--n { min-width: 1.6em; background: var(--ink); color: var(--chalk); border: 1.5px solid var(--chalk); text-align: center; }
.legend__icon--top { border: 1.5px solid var(--chalk); color: var(--chalk); }

/* ---------- seams: giant words that break across a section edge ---------- */
.seam--band { overflow-x: clip; background: linear-gradient(to bottom, var(--seam-a) 50%, var(--seam-b) 50%); }
.seam__h {
  position: relative;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  font: 700 calc(clamp(5.5rem, 27vw, 25rem) * var(--fit, 1))/.8 var(--display);
  letter-spacing: .005em; text-transform: uppercase;
}
.seam__h .seam__top { color: var(--seam-fg-a); }
.seam__h .seam__bot { left: var(--pad); color: var(--seam-fg-b); }
.seam--myths { --seam-a: var(--ink); --seam-b: var(--chalk); --seam-fg-a: var(--chalk); --seam-fg-b: var(--signal); }
.seam--passes { --seam-a: var(--hazard); --seam-b: var(--ink); --seam-fg-a: var(--ink); --seam-fg-b: var(--hazard); }

/* ---------- myths ---------- */
.myths { background: var(--chalk); }
.myths__in { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 4vw, 60px) var(--pad) clamp(80px, 9vw, 140px); }
.myths__lede { display: grid; gap: 16px; max-width: 58ch; margin: 0 0 44px; font-size: 1.18rem; }
.myths__lede .kicker { margin: 0; }
.mythlist { border-bottom: 3px solid var(--ink); }
.myth { border-top: 3px solid var(--ink); }
.myth summary {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
}
.myth summary::-webkit-details-marker { display: none; }
.myth__no { color: var(--stone); font: 400 .82rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.myth__q {
  font: 700 clamp(2rem, 5.2vw, 4.6rem)/.92 var(--display); text-transform: uppercase;
  text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: .12em;
  transition: color .3s var(--snap), text-decoration-color .3s var(--snap);
}
.myth summary:hover .myth__q { color: var(--signal); }
.myth[open] .myth__q { color: var(--stone); text-decoration-color: var(--hazard); }
.myth__sign { position: relative; width: 48px; height: 48px; border: 3px solid var(--ink); transition: background-color .2s, transform .3s var(--snap); }
.myth__sign::before, .myth__sign::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 4px; margin: -2px 0 0 -11px; background: var(--ink); }
.myth__sign::after { transform: rotate(90deg); }
.myth[open] .myth__sign { background: var(--ink); transform: rotate(45deg); }
.myth[open] .myth__sign::before, .myth[open] .myth__sign::after { background: var(--chalk); }
.myth__a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 0 72px 34px calc(7rem + 24px); }
.myth__label { margin: 0; color: var(--signal); font: 700 1.9rem/1 var(--display); text-transform: uppercase; }
.myth__a p:last-child { max-width: 48ch; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.38rem); line-height: 1.45; }

/* ---------- first visit ---------- */
.first { background: var(--hazard); color: var(--ink); --focus: var(--ink); }
.first__in { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 9vw, 140px) var(--pad) clamp(96px, 10vw, 150px); }
.first__head .h2 { max-width: 11ch; }
.moves {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 0;
  margin: 56px 0 0; padding: 0; list-style: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M20 12L80 37 20 63 80 88' fill='none' stroke='%23131211' stroke-width='6' vector-effect='non-scaling-stroke' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.move { position: relative; grid-column: 1 / 6; padding: 26px 28px 30px; background: var(--ink); color: var(--chalk); }
.move:nth-child(even) { grid-column: 8 / 13; }
.move:nth-child(2) { grid-row: 2; } .move:nth-child(3) { grid-row: 3; } .move:nth-child(4) { grid-row: 4; }
.move + .move { margin-top: -36px; }
.move__n { display: block; margin: 0 0 14px; color: var(--hazard); font: 700 4.6rem/.8 var(--display); }
.move h3 { margin: 0 0 10px; font: 700 clamp(1.8rem, 2.6vw, 2.3rem)/.95 var(--display); text-transform: uppercase; }
.move p { margin: 0; color: var(--dust); }

/* ---------- passes ---------- */
.passes { background: var(--ink); color: var(--chalk); }
.passes__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(36px, 4vw, 60px) var(--pad) clamp(80px, 9vw, 140px);
}
.passes__lede { grid-column: 1 / 8; display: grid; gap: 16px; max-width: 54ch; margin: 0 0 20px; color: var(--dust); font-size: 1.18rem; }
.passes__lede .kicker { margin: 0; color: var(--chalk); }
.board { grid-column: 1 / 9; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--chalk); }
.board__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid rgba(242, 239, 232, .2);
}
.board__row--first { margin: 0 -20px; padding: 22px 20px; border-bottom: 0; background: var(--hazard); color: var(--ink); --focus: var(--ink); }
.board__what h3 { margin: 0 0 4px; font: 700 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--display); text-transform: uppercase; }
.board__what p { margin: 0; color: var(--dust); }
.board__row--first .board__what p { color: var(--ink); }
.board__price { min-width: 2.6ch; margin: 0; color: var(--hazard); text-align: right; font: 700 clamp(3rem, 6vw, 5.4rem)/.82 var(--display); font-variant-numeric: tabular-nums; }
.board__price span { margin-right: .04em; font-size: .42em; vertical-align: .95em; }
.board__row--first .board__price { color: var(--ink); }
.board__btn { min-width: 84px; }
.board__row .btn--line { color: var(--chalk); }
.smallprint { grid-column: 9 / 13; position: sticky; top: 96px; padding: 28px 28px 20px; background: var(--ply); color: var(--ink); --focus: var(--ink); }
.smallprint h3 { margin: 0 0 14px; font: 700 2.1rem/.92 var(--display); text-transform: uppercase; }
.smallprint ul { margin: 0; padding: 0; list-style: none; }
.smallprint li { padding: 12px 0 10px; border-top: 2px solid var(--ink); font: 700 clamp(1.45rem, 2vw, 1.85rem)/1 var(--display); text-transform: uppercase; }

/* ---------- visit ---------- */
.visit { background: var(--ply); color: var(--ink); }
.visit__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--pad);
}
.visit .kicker > span { background: var(--ink); color: var(--ply); }
.visit__head { grid-column: 1 / 6; }
.visit__addr { margin: 0 0 20px; font: 700 clamp(2.2rem, 3.8vw, 3.4rem)/.92 var(--display); text-transform: uppercase; }
.visit__head > p:last-child { max-width: 40ch; margin: 0; }
.map { grid-column: 6 / 13; margin: 0; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.map svg { width: 100%; height: auto; }
.map .lbl { font-size: 10.5px; }
.lbl--big { font: 700 20px var(--display); letter-spacing: .5px; }
.map__bus { font: 700 10px var(--mono); fill: var(--chalk); }
.map__p { font: 700 14px var(--body); fill: var(--ink); }
.visit__cols { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: 24px 48px; padding-top: 32px; border-top: 3px solid var(--ink); }
.hours table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid rgba(19, 18, 17, .3); }
.hours th { text-align: left; font-weight: 700; }
.hours td { text-align: right; }
.hours__note { margin: 14px 0 0; font-size: .95rem; }
.levels ol { display: flex; flex-direction: column-reverse; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(19, 18, 17, .3); }
.levels li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(19, 18, 17, .3); }
.levels li:first-child { border-bottom: 3px solid var(--ink); }
.levels__at { font: 700 1.6rem/1 var(--display); text-transform: uppercase; }

/* ---------- faq ---------- */
.faq { background: var(--chalk); }
.faq__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--pad);
}
.faq__head { grid-column: 1 / 5; position: sticky; top: 104px; }
.faq__head > p:last-child { max-width: 32ch; margin: 0; }
.faq__list { grid-column: 6 / 13; border-bottom: 2px solid var(--ink); }
.qa { border-top: 2px solid var(--ink); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font: 700 1.28rem/1.25 var(--body); font-stretch: 87.5%;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 1em; text-align: center; font: 700 2rem/1 var(--display); }
.qa[open] summary::after { content: "\2013"; color: var(--signal); }
.qa summary:hover { color: var(--signal); }
.qa p { max-width: 58ch; margin: 0 0 22px; color: #2E2B28; font-size: 1.06rem; }

/* ---------- book ---------- */
.book { background: var(--hazard); color: var(--ink); --focus: var(--ink); }
.book__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(72px, 9vw, 140px) var(--pad);
}
.book__copy { grid-column: 1 / 6; }
.book__copy > p:not(.kicker) { max-width: 40ch; margin: 0; font-size: 1.15rem; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.slots li { padding: 9px 12px 8px; border: 2px solid var(--ink); font-weight: 700; }
.slots span { margin-right: 6px; font: 700 1.15rem/1 var(--display); text-transform: uppercase; }
.form {
  grid-column: 7 / 13;
  padding: clamp(20px, 3vw, 40px);
  border: 3px solid var(--ink); background: var(--chalk);
  box-shadow: 12px 12px 0 var(--ink);
}
.form__row { display: grid; gap: 7px; margin: 0 0 18px; }
.form label, .form legend { font: 700 .76rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.form input[type="text"], .form input[type="email"], .form select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 2px solid var(--ink); border-radius: 0; background: #fff; color: var(--ink);
  font: 400 1.05rem/1.2 var(--body);
}
.form select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23131211' stroke-width='3'/%3E%3C/svg%3E") right 16px center / 16px no-repeat;
}
.form input:focus-visible, .form select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--hazard); }
.form__set { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.form__set legend { width: 100%; margin: 0 0 8px; padding: 0; }
.radio { position: relative; }
.radio input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }
.radio span {
  display: block; padding: 11px 14px; border: 2px solid var(--ink); cursor: pointer;
  font: 700 .95rem/1 var(--body); letter-spacing: 0; text-transform: none;
  transition: background-color .15s, color .15s;
}
.radio input:checked + span { background: var(--ink); color: var(--chalk); }
.radio input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.form__go { width: 100%; margin-top: 6px; min-height: 56px; font-size: 1rem; }

/* ---------- footer ---------- */
.foot { overflow: hidden; background: var(--ink); color: var(--chalk); }
.foot__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px;
  max-width: var(--max); margin: 0 auto;
  padding: clamp(64px, 7vw, 100px) var(--pad) 36px;
}
.foot__brand { grid-column: 1 / 5; }
.foot__mark { width: 64px; height: 64px; color: var(--chalk); }
.foot__brand p { margin: 18px 0 0; font: 400 1.35rem/1.2 var(--body); font-stretch: 87.5%; }
.foot__in > :nth-child(2) { grid-column: 6 / 8; }
.foot__in > :nth-child(3) { grid-column: 8 / 10; }
.foot__in > :nth-child(4) { grid-column: 10 / 13; }
.foot__h { margin: 0 0 12px; color: var(--hazard); font: 700 1.35rem/1 var(--display); text-transform: uppercase; }
.foot__col p { margin: 0; color: var(--dust); }
.foot__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 22px; border-top: 1px solid rgba(242, 239, 232, .2); }
.foot__nav a { padding: 6px 0; font: 700 .8rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.foot__word {
  margin: 0; color: var(--hazard); text-align: center; white-space: nowrap;
  font: 700 calc(18.4vw * var(--fit, 1))/.76 var(--display); letter-spacing: -.004em; text-transform: uppercase;
  transform: translateY(16%);
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .ln > span { animation: rise .9s var(--snap) both; }
  .ln:nth-child(2) > span { animation-delay: .07s; }
  .ln:nth-child(3) > span { animation-delay: .14s; }
  .seam--hero .seam__top { animation: slide-l .9s var(--snap) .3s both; }
  .seam--hero .seam__bot { animation: slide-r .9s var(--snap) .3s both; }
  .tw__half--l { animation: split-l 1.1s var(--snap) .55s both; }
  .tw__half--r { animation: split-r 1.1s var(--snap) .55s both; }
  .tw__crown { animation: crown 1.1s var(--snap) .7s both; }
  .js [data-reveal] > * {
    clip-path: polygon(-6% 106%, 106% 106%, 106% 106%, -6% 106%);
    transform: translateY(32px);
  }
  .js [data-reveal].is-in > * {
    clip-path: polygon(-6% -6%, 106% -6%, 106% 106%, -6% 106%);
    transform: none;
    transition: clip-path .8s var(--snap), transform .8s var(--snap);
  }
  .js [data-reveal].is-in > :nth-child(2) { transition-delay: .07s; }
  .js [data-reveal].is-in > :nth-child(3) { transition-delay: .14s; }
  .js [data-reveal].is-in > :nth-child(n+4) { transition-delay: .21s; }
  .js .route.is-active { animation: wipe .5s var(--snap); }
  .myth[open] .myth__a { animation: wipe .45s var(--snap); }
  .wall__beta.is-drawing, .wall__beta-under.is-drawing { animation: draw .9s var(--snap) both; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes slide-l { from { transform: translateX(-.25em); opacity: 0; } }
@keyframes slide-r { from { transform: translateX(.4em); opacity: 0; } }
@keyframes split-l { from { transform: translateX(0); } }
@keyframes split-r { from { transform: translateX(0); } }
@keyframes crown { from { transform: none; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw { from { stroke-dashoffset: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .top { position: relative; }
  .top__in { flex-wrap: wrap; row-gap: 6px; }
  .top__cta { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); overflow-x: auto; }
  .nav ul { gap: 0; }
  .nav a { padding: 10px 12px 10px 0; margin-right: 14px; }
  .nav a:hover { background: none; color: var(--hazard); }
  html { scroll-padding-top: 16px; }
  .thennow__copy, .faq__head { position: static; }
  .thennow__copy { grid-column: 1 / -1; }
  .cut { grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
  .readout { top: 24px; }
  .chip { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; gap: 4px; }
  .chip__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .board { grid-column: 1 / -1; }
  .smallprint { grid-column: 1 / -1; position: static; }
  .visit__head, .map { grid-column: 1 / -1; }
  .faq__head, .faq__list { grid-column: 1 / -1; }
  .book__copy, .form { grid-column: 1 / -1; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__in > :nth-child(n+2) { grid-column: span 4; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }
  .brand__word { font-size: 1.5rem; }
  .brand__mark { width: 30px; height: 30px; }
  .top__cta { min-height: 40px; padding: .6em .8em; font-size: .78rem; letter-spacing: .08em; }
  .hero { --line: calc(14.2vw * var(--fit-ln, 1)); --seam: calc(29vw * var(--fit, 1)); background-size: calc(100% / 6) 100%; }
  .hero__art { width: 24vw; right: 12px; bottom: calc(var(--seam) * .8 + 2px); }
  .hero__dim { display: none; }
  .hero__tags li { padding: 6px 8px; font-size: .68rem; }
  .hero__where { font-size: .74rem; max-width: 62vw; }
  .intro__lede, .intro__side { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div, .facts div + div { padding: 16px 12px 16px 0; border-left: 0; border-bottom: 1px solid rgba(242, 239, 232, .2); }
  .facts div:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(242, 239, 232, .2); }
  .facts dt { font-size: 1.3rem; }
  .ledger { grid-template-columns: 1fr; }
  .ledger__col--now { padding: 20px 0 0; border-left: 0; border-top: 3px solid var(--ink); margin-top: 16px; }
  .wallsec__head .kicker, .wallsec__head .h2, .wallsec__head > p:last-child { grid-column: 1 / -1; }
  .wallsec__head > p:last-child { margin-top: 18px; }
  .js .picker { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--pad)) 24px; padding: 10px var(--pad); background: var(--ink); gap: 4px; }
  .readout { display: contents; }
  .wallsec__in { row-gap: 0; }
  .wallsec__head { margin-bottom: 32px; }
  .picker { grid-column: 1 / -1; grid-row: 2; }
  .wall { grid-column: 1 / -1; grid-row: 3; justify-self: center; width: min(100%, 420px); box-shadow: 0 0 0 4px var(--ink-2); }
  .routes { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; }
  .legend { grid-column: 1 / -1; grid-row: 5; }
  .chip__dot { width: 12px; height: 12px; }
  .chip__g { font-size: 1.3rem; }
  .tape { font-size: .5rem; padding: 2px 3px 1px; }
  .hold.is-lit::after { font-size: .56rem; }
  .route__grade { font-size: 5.2rem; }
  .myth summary { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .myth__no { grid-column: 1 / -1; }
  .myth__sign { width: 40px; height: 40px; }
  .myth__a { grid-template-columns: 1fr; gap: 8px; padding: 0 0 28px; }
  .moves { display: block; background: none; }
  .move { margin: 0 12% 16px 0; }
  .move + .move { margin-top: 0; }
  .move:nth-child(even) { margin: 0 0 16px 12%; }
  .move__n { font-size: 3.6rem; }
  .passes__lede { grid-column: 1 / -1; }
  .board__row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .board__what { grid-column: 1 / -1; }
  .board__row--first { margin: 0 calc(-1 * var(--pad)); padding: 22px var(--pad); }
  .visit__cols { grid-template-columns: 1fr; }
  .map { box-shadow: 6px 6px 0 var(--ink); }
  .form { box-shadow: 6px 6px 0 var(--ink); }
  .foot__in > :nth-child(n+2) { grid-column: 1 / -1; }
  .foot__word { font-size: calc(18.2vw * var(--fit, 1)); }
}

@media (max-width: 420px) {
  .top__cta { font-size: .72rem; }
  .nav a { margin-right: 10px; letter-spacing: .08em; font-size: .76rem; }
  .brand__word { font-size: 1.35rem; }
}

@media print {
  .top { position: static; }
  .hero__art, .cut__control, .picker { display: none; }
  .js .route { display: grid; }
}