/* ==========================================================================
   Festival of Thinking · New York 2026 · v4
   A viewfinder over the city, made readable: full-bleed footage with small mono UI at the edges;
   pages where a big headline leads, a readable paragraph follows, an action closes.
   Reading path in every section: label → headline → text → action.
   Body copy in TeX Gyre Heros (sentence case, 17–18 px); mono only for labels, times and data.
   Dark only (no theme switch, since 14 Oct 2026). Plain CSS; motion is layered on by js/fot.js (GSAP when present).
   ========================================================================== */
@font-face { font-family: "Heros"; src: url("../fonts/texgyreheros-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Heros"; src: url("../fonts/texgyreheros-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Chivo Mono (SIL Open Font License), served from this site instead of Google Fonts: one variable file per script, 400–700 */
@font-face { font-family: "Chivo Mono"; src: url("../fonts/chivomono-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Chivo Mono"; src: url("../fonts/chivomono-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0B0B0C;
  --fg: #F2F2F2;
  --fg-2: #ADADAD;          /* secondary text: 8.6:1 on the page */
  --fg-3: #707070;          /* decorative and large only */
  --hair: #262628;
  --soft: #161618;
  --accent: #9C6BFF;        /* the festival violet, lifted for the dark page */
  --accent-t: #B391FF;      /* violet text */
  --on-accent: #0B0B0C;
  --band: #9C6BFF; --on-band: #0B0B0C;
  --media: invert(1) hue-rotate(180deg) contrast(1.06);   /* the maquette clips as a night city */
  --wash: 11, 11, 12;
  --err: #FF8A7A;
  --sans: "Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Chivo Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --edge: clamp(14px, 1.6vw, 24px);
  --gut: clamp(18px, 5.4vw, 80px);
  --sec: clamp(104px, 12vw, 190px);
  --gap: clamp(16px, 2vw, 32px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-h1: clamp(50px, 7.6vw, 132px);
  --t-h2: clamp(38px, 4.8vw, 80px);
  --t-h3: clamp(24px, 2.2vw, 34px);
  --t-lead: clamp(20px, 1.65vw, 26px);
  --t-body: 18px;
  --t-small: 15px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--t-body)/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* landing places, not controls: <main> ("Skip to content") and the sections in-page links move focus to (js/fot.js) */
main:focus, .is-landing:focus { outline: none; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mq { filter: var(--media); }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- type ---------- */
.lbl { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lbl::before { content: ""; inline-size: 8px; block-size: 8px; background: currentColor; flex: none; }
.lbl--a::before { background: var(--accent); }
.lbl .n { color: var(--accent-t); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.h1 { font: 700 var(--t-h1)/.9 var(--sans); letter-spacing: -.03em; text-transform: uppercase; }
.h2 { font: 700 var(--t-h2)/.92 var(--sans); letter-spacing: -.025em; text-transform: uppercase; }
.h3 { font: 700 var(--t-h3)/1.02 var(--sans); letter-spacing: -.015em; }
.h3--caps { text-transform: uppercase; }
.lead { font-size: var(--t-lead); line-height: 1.38; letter-spacing: -.005em; max-width: 34ch; }
.body { max-width: 60ch; }
.body + .body { margin-top: 1em; }
.small { font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }
.meta { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.accent { color: var(--accent-t); }
.title { font: 700 clamp(18px, 1.45vw, 22px)/1.2 var(--sans); letter-spacing: -.01em; }
.big { font: 500 clamp(44px, 6.4vw, 104px)/.95 var(--mono); letter-spacing: -.045em; }
.more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.more i { display: inline-block; font-style: normal; transition: transform .4s var(--ease); }
.more:hover i, .more:focus-visible i { transform: translate(4px, 0); }
.more:hover { color: var(--accent-t); }
/* split-word reveal (js wraps words) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--gut); }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.sec { padding-block: var(--sec) 0; position: relative; }
.sec--last { padding-bottom: var(--sec); }
.sh { grid-column: 1 / 9; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sb { grid-column: 7 / 13; display: flex; flex-direction: column; gap: 22px; margin-top: clamp(32px, 4vw, 56px); min-width: 0; }
.sb--side { grid-column: 9 / 13; margin-top: 0; align-self: end; }
.rowhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }

/* ---------- pieces ---------- */
.bullet { inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center; font: 700 15px/1 var(--sans); letter-spacing: -.02em; flex: none; }
.bullet--l { inline-size: 56px; block-size: 56px; font-size: 21px; }
.bullet--o { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); font: 500 12px/1 var(--mono); }
.crop { position: relative; }
.crop::before, .crop::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) left top / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1px 14px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px 14px no-repeat; }
.crop::after { transform: scaleY(-1); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 22px; background: var(--fg); color: var(--bg); font: 500 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--on-accent); }
.btn i { font-style: normal; transition: transform .4s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn--o { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 12px; }
.access { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.access::before { content: ""; inline-size: 9px; block-size: 9px; border: 1.5px solid currentColor; }
.access--sel { color: var(--accent-t); }
.access--sel::before { background: currentColor; }
.access--inv { color: var(--fg-2); }
.access--inv::before { transform: rotate(45deg) scale(.85); }
.state { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.state::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: #1FA463; box-shadow: 0 0 0 4px rgba(31, 164, 99, .18); }
.state.is-closed::before { background: var(--fg-3); box-shadow: none; }
.cap { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font: 500 12px/1.35 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.cap span:first-child { color: var(--fg-2); }
.tbc { border: 1px solid currentColor; padding: 1px 5px; margin-left: 8px; font: 500 10px/1 var(--mono); vertical-align: 2px; }
.reveal { overflow: hidden; }
.reveal > img, .reveal > video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- logo ---------- */
.mark { display: inline-block; flex: none; }
.mark .glyph { fill: currentColor; }

/* ---------- the viewfinder ---------- */
.vf { position: fixed; inset: var(--edge); pointer-events: none; z-index: 30; color: var(--fg); }
.vf i { position: absolute; inline-size: 16px; block-size: 16px; border: 0 solid currentColor; }
.vf i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.vf i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }

/* ---------- header ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: calc(var(--edge) + 4px) calc(var(--edge) + 24px) 0; pointer-events: none; color: var(--fg); transition: transform .5s var(--ease); }
.hd::before { content: ""; position: absolute; inset: 0 0 -22px; background: linear-gradient(rgb(var(--wash)) 45%, rgba(var(--wash), 0)); opacity: 0; transition: opacity .35s; pointer-events: none; z-index: -1; }
.hd.is-scrolled::before { opacity: .96; }
.hd.is-hidden { transform: translateY(-110%); }
.hd a, .hd button { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: 12px; font: 700 17px/1 var(--sans); letter-spacing: -.01em; min-height: 48px; white-space: nowrap; }
.logo .mark { inline-size: 26px; block-size: 28px; }
.nav { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 48px); }
.nav a { position: relative; min-height: 44px; display: inline-flex; align-items: center; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.menu-btn { display: none; }
/* the phone menu is a modal dialog: above everything else, the cookie card included */
.mm { position: fixed; inset: 0; z-index: 72; background: var(--bg); padding: calc(var(--edge) + 90px) var(--gut) 40px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.mm a { font: 700 clamp(40px, 11vw, 64px)/1.05 var(--sans); text-transform: uppercase; letter-spacing: -.03em; padding: 6px 0; }
.mm a[aria-current="page"] { color: var(--accent-t); }
.mm .close { position: absolute; right: calc(var(--edge) + 14px); top: calc(var(--edge) + 10px); min-height: 44px; padding: 0 16px; background: var(--fg); color: var(--bg); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- preloader + page curtain ---------- */
.pre { position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--fg); display: none; place-items: center; }   /* black, the logo as it is: violet bar, white letter */
html.has-pre .pre { display: grid; animation: preOut .6s var(--ease) 3.4s forwards; }
@keyframes preOut { to { transform: translateY(-100%); visibility: hidden; } }
.mark .bar { fill: #6827C1; }
.pre__in { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.pre .mark { inline-size: 74px; block-size: 80px; color: var(--fg); }
/* the logo waits for the intro to build it (js/fot.js): no finished logo first, then a reset; until the scripts arrive, black + 000 */
html.has-pre .pre .bar, html.has-pre .pre .glyph { opacity: 0; }
.pre__n { font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--fg-2); }
.curtain { position: fixed; inset: 0; z-index: 95; background: var(--accent); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
html.is-entering .curtain { transform: scaleY(1); transform-origin: top; animation: curtainOut .7s var(--ease) 1.2s forwards; }
@keyframes curtainOut { to { transform: scaleY(0); } }

/* ---------- cursor (fine pointers only) ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 85; pointer-events: none; inline-size: 12px; block-size: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transition: inline-size .35s var(--ease), block-size .35s var(--ease), margin .35s var(--ease), background .3s; opacity: 0; }
.cur span { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); opacity: 0; transition: opacity .2s; }
.cur.is-on { opacity: 1; }
.cur.is-big { inline-size: 86px; block-size: 86px; margin: -43px 0 0 -43px; }
.cur.is-big span { opacity: 1; }
.cur.is-link { inline-size: 40px; block-size: 40px; margin: -20px 0 0 -20px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
@media (hover: none), (pointer: coarse) { .cur { display: none; } }

/* ---------- the route (right edge) ----------
   Only the dots take the pointer (a 24 px target each), so the column never catches clicks meant for the page under it;
   a label shows on hover or keyboard focus only, at every width, so it never covers text. */
.route { position: fixed; right: calc(var(--edge) + 4px); top: 50%; transform: translateY(-50%); z-index: 35; display: flex; flex-direction: column; gap: 22px; padding: 6px 0; pointer-events: none; }
.route::before { content: ""; position: absolute; right: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--hair); }
.route::after { content: ""; position: absolute; right: 5px; top: 10px; width: 2px; height: var(--route-p, 0px); background: var(--accent); transition: height .6s var(--ease); }
.route a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 12px; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.route a i { position: relative; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--hair); transition: box-shadow .3s, background .3s, transform .3s var(--ease); flex: none; pointer-events: auto; }
.route a i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.route a span { opacity: 0; transform: translateX(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); background: var(--bg); padding: 3px 6px; }
.route a.is-past i { box-shadow: inset 0 0 0 2px var(--accent); }
.route a.is-here i { background: var(--accent); box-shadow: none; transform: scale(1.25); }
.route a:hover span, .route a:focus-visible span { opacity: 1; transform: none; color: var(--fg); }

/* ---------- hero (home) ---------- */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--soft); }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__v916 { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(var(--wash), .86) 0%, rgba(var(--wash), 0) 38%), radial-gradient(60% 50% at 50% 48%, rgba(var(--wash), .55), rgba(var(--wash), 0) 70%); }
.hero__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 56px 34px; text-align: center; }
.hero__mark .mark { inline-size: 76px; block-size: 82px; }
.hero__mark h1 { font: 700 clamp(38px, 4.8vw, 80px)/.9 var(--sans); letter-spacing: -.035em; text-transform: uppercase; }
.hero__mark .meta { color: var(--fg); }
.hero__intro { position: absolute; z-index: 2; left: calc(var(--edge) + 24px); bottom: calc(var(--edge) + 26px); inline-size: min(380px, 70vw); display: flex; flex-direction: column; gap: 12px; }
.hero__intro p:last-child { font-size: 17px; line-height: 1.5; }
.next { position: absolute; z-index: 2; right: calc(var(--edge) + 24px); bottom: calc(var(--edge) + 26px); display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 9px; background: rgba(var(--wash), .92); inline-size: min(420px, 74vw); transition: transform .5s var(--ease); }
.next:hover { transform: translateY(-4px); }
.next img { inline-size: 124px; block-size: 96px; object-fit: cover; }
.next__t { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
.next__t b { font: 700 21px/1 var(--sans); letter-spacing: -.015em; }
.cd { font: 500 22px/1 var(--mono); letter-spacing: -.02em; }
.cd small { font-size: 11px; color: var(--fg-2); margin: 0 7px 0 2px; letter-spacing: 0; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--edge) + 28px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { inline-size: 1px; block-size: 44px; background: currentColor; transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- ticker ---------- */
.ticker { background: var(--band); color: var(--on-band); overflow: hidden; white-space: nowrap; }
.ticker__in { display: inline-flex; gap: 56px; padding: 17px 0; font: 500 14px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; will-change: transform; }
.ticker__in span { display: inline-flex; align-items: center; gap: 14px; }
.ticker__in span::before { content: ""; inline-size: 8px; block-size: 8px; background: currentColor; }
.ticker:not(.is-js) .ticker__in { animation: tick 50s linear infinite; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- statement + counters ---------- */
.statement .h1 { max-width: 12ch; }
.statement .h1 em { font-style: normal; color: var(--accent-t); }
.counts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--fg); }
.counts div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; min-width: 0; }
.counts b { font: 700 clamp(48px, 5.4vw, 92px)/.9 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.counts span { font-size: var(--t-small); color: var(--fg-2); line-height: 1.4; }

/* ---------- people collage ---------- */
.collage { position: relative; min-height: clamp(760px, 92vw, 1240px); margin-top: clamp(40px, 5vw, 80px); }
.collage__text { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; padding-top: clamp(160px, 18vw, 300px); display: flex; flex-direction: column; gap: 22px; text-align: center; align-items: center; }
.collage__text .h2 { max-width: 14ch; }
.collage__text .body { max-width: 48ch; }
.ph-f { position: absolute; overflow: hidden; z-index: 1; background: var(--soft); }
.ph-f img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.ph-f figcaption { position: absolute; left: 8px; bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(10,10,10,.78); padding: 6px 8px; }
.ph-f.f1 { left: 0; top: 2%; width: 22%; aspect-ratio: 4 / 5; }
.ph-f.f2 { left: 30%; top: 0; width: 17%; aspect-ratio: 1; }
.ph-f.f3 { right: 0; top: 6%; width: 26%; aspect-ratio: 16 / 10; }
.ph-f.f4 { left: 6%; bottom: 6%; width: 28%; aspect-ratio: 16 / 10; }
.ph-f.f5 { right: 28%; bottom: 0; width: 16%; aspect-ratio: 4 / 5; }
.ph-f.f6 { right: 3%; bottom: 14%; width: 20%; aspect-ratio: 1; }

/* ---------- media band ---------- */
.band { margin-top: clamp(64px, 8vw, 120px); }
.band .reveal { aspect-ratio: 21 / 9; }

/* ---------- horizontal stops (pinned on desktop) ---------- */
.hs { position: relative; }
.hs__pin { padding-top: clamp(84px, 10vh, 120px); }
.hs__head { padding-top: 0; }
.hs__head .rowhead { margin-bottom: 0; }
.hs__h { font-size: clamp(32px, 3.4vw, 58px); }
.hs__vp { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.hs__vp::-webkit-scrollbar { display: none; }
.hs.is-pinned .hs__vp { overflow: hidden; }
.panel { scroll-snap-align: start; }
.hs__track { display: flex; gap: clamp(20px, 2.4vw, 40px); padding: clamp(36px, 4vw, 56px) var(--gut) 0; inline-size: max-content; }
.panel { position: relative; inline-size: min(78vw, 1040px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 18px 28px; min-height: clamp(400px, 54vh, 560px); }
.panel__n { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; }
.panel__n b { font: 700 clamp(64px, 8vw, 132px)/.85 var(--sans); letter-spacing: -.045em; text-transform: uppercase; }
.panel__n span { font: 500 13px/1 var(--mono); color: var(--fg-2); letter-spacing: .06em; }
.panel__img { position: relative; overflow: hidden; min-height: 300px; }
.panel__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__img video { position: absolute; right: 12px; bottom: 12px; inline-size: 38%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid rgb(var(--wash)); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.panel__t { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; min-width: 0; }
.panel__t .title { font-size: clamp(22px, 1.9vw, 30px); line-height: 1.12; }
.panel__t dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: var(--t-small); }
.panel__t dt { font: 500 12px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.hs__line { position: relative; margin: 34px var(--gut) 0; block-size: 18px; }
.hs__line::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--hair); }
.hs__fill { position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: var(--accent); transform-origin: left; transform: scaleX(var(--hs-p, 0)); }
.hs__train { position: absolute; top: 0; left: calc(var(--hs-p, 0) * 100%); inline-size: 18px; block-size: 18px; margin-left: -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(104, 39, 193, .2); }
.hs__stops { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.hs__stops i { inline-size: 12px; block-size: 12px; margin-top: 3px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--fg); }
.hs__stops i.par { box-shadow: inset 0 0 0 2px var(--accent); }
.hs__stops i.dia { border-radius: 2px; transform: rotate(45deg) scale(.85); background: var(--accent); box-shadow: none; }
.hs__hint { display: flex; justify-content: space-between; margin: 16px var(--gut) 0; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- carousels ---------- */
/* the 6 px padding (given back by the negative margin, and to the snap points by scroll-padding) keeps the cards' focus rings
   inside the scroller, which clips them otherwise */
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 6px; margin: -6px; scroll-padding-inline: 6px; }
.track::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pcard__m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.pcard__m img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) contrast(1.05); transform: scale(1.02); transition: filter .6s var(--ease), transform 1.1s var(--ease); }
.card:hover .pcard__m img, .card:focus-visible .pcard__m img { filter: none; transform: scale(1.06); }
.pcard__tag { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; }
.pcard__tag .meta { color: #fff; background: rgba(10,10,10,.78); padding: 5px 7px; }
.pcard__days { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 1; }
.pcard__none { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; background: var(--soft); }
.pcard__none b { font: 700 clamp(56px, 6vw, 104px)/1 var(--sans); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--fg-3); }
.pcard__none span { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.card__t { display: flex; flex-direction: column; gap: 4px; }
.card__t b { font: 700 21px/1.1 var(--sans); letter-spacing: -.015em; }
.card__t span { font-size: var(--t-small); color: var(--fg-2); line-height: 1.4; }
.ctrl { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 34px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.ctrl button { min-height: 44px; padding: 0 6px; }
.ctrl button[disabled] { color: var(--fg-3); cursor: default; }
.ticks { display: flex; align-items: flex-end; gap: 4px; block-size: 18px; }
.ticks i { inline-size: 1px; block-size: 10px; background: var(--fg-3); transition: block-size .3s var(--ease), background .3s; }
.ticks i.on { block-size: 18px; background: var(--fg); }

/* ---------- day tabs + compact timetable (home) ---------- */
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tabs button { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px 10px 10px; border: 1px solid var(--hair); text-align: left; min-width: 0; transition: border-color .3s, background .3s; }
.tabs button:hover { border-color: var(--fg-3); }
.tabs .bullet { background: var(--fg); color: var(--bg); transition: background .3s, color .3s, transform .4s var(--ease); }
.tabs [aria-selected="true"] { border-color: var(--fg); }
.tabs [aria-selected="true"] .bullet { background: var(--accent); color: var(--on-accent); transform: scale(1.06); }
.tab-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tab-t b { font: 700 16px/1.15 var(--sans); }
.tab-t span { font: 500 11px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.tt { display: flex; flex-direction: column; border-top: 1px solid var(--fg); }
.tt li { display: grid; grid-template-columns: 132px 80px minmax(0, 1fr); gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.tt .t { font: 500 15px/1.4 var(--mono); }
.tt .k { font: 700 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); }
.tt .k--n { color: var(--fg-2); }
.tt .title { display: block; margin-bottom: 4px; }
.tt .w { font-size: var(--t-small); color: var(--fg-2); line-height: 1.45; display: block; }
.tt .par { grid-column: 3; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-t); }

/* ---------- programme page ---------- */
.daybar { position: sticky; top: calc(var(--edge) + 60px); z-index: 20; background: var(--bg); padding: 14px 0; border-bottom: 1px solid var(--hair); transition: top .5s var(--ease); }
.hd.is-hidden ~ main .daybar { top: 0; }
.daybar__in { display: grid; grid-template-columns: minmax(0, 3fr) auto; gap: 16px 32px; align-items: center; }
.toggle { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: var(--t-small); cursor: pointer; }
.toggle input { appearance: none; -webkit-appearance: none; inline-size: 42px; block-size: 24px; border-radius: 12px; border: 1.5px solid var(--fg); position: relative; margin: 0; cursor: pointer; flex: none; transition: background .3s, border-color .3s; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; inline-size: 15px; block-size: 15px; border-radius: 50%; background: var(--fg); transition: transform .35s var(--ease), background .3s; }
.toggle input:checked { background: var(--accent); border-color: var(--accent); }
.toggle input:checked::after { transform: translateX(18px); background: var(--on-accent); }
.legend { display: flex; flex-wrap: wrap; gap: 12px 30px; padding: 20px 0 0; font-size: var(--t-small); color: var(--fg-2); }
.day { padding-top: clamp(48px, 6vw, 88px); }
.day__h { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.day__h > div { display: flex; flex-direction: column; gap: 10px; }
.band-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--fg); margin-top: 40px; }
.band-h .h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; text-transform: uppercase; }
.band-h .h3 small { font: 500 13px/1 var(--mono); color: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; }
.rows li { display: grid; grid-template-columns: 150px 90px minmax(0, 1fr) 230px; gap: 6px 22px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--hair); }
.rows .t { font: 500 17px/1.3 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.rows .k { font: 700 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); }
.rows .k--n { color: var(--fg-2); }
.rows .x { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rows .who { font-size: var(--t-small); line-height: 1.45; }
.rows .w { font-size: var(--t-small); color: var(--fg-2); line-height: 1.5; }
.rows .a { justify-self: end; }
.evening { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.evening__rule { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding: 16px 0; border-top: 1px solid var(--fg); margin-top: 40px; }
.evening__rule b { font: 700 var(--t-h3)/1.02 var(--sans); letter-spacing: -.015em; text-transform: uppercase; }
.track-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--hair); padding: 24px; transition: border-color .3s; }
.track-col:hover { border-color: var(--fg-3); }
.track-col__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
.track-col__h .h3 { text-transform: uppercase; }
.track-col__h .h3 small { display: block; font: 500 12px/1.2 var(--mono); color: var(--accent-t); margin-bottom: 8px; letter-spacing: .06em; }
.track-col .rows li { grid-template-columns: 126px minmax(0, 1fr); }
.track-col .rows .t { font-size: 15px; }
.track-col__f { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.only-reg [data-access="selected"], .only-reg [data-access="invited"] { display: none; }
.foot-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: var(--t-small); color: var(--fg-2); }

/* ---------- inner page head ---------- */
.ph { padding: calc(var(--edge) + 150px) 0 0; }
.ph .sh { grid-column: 1 / 10; }
.ph .lead { max-width: 40ch; }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--fg); }
.facts div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; min-width: 0; }
.facts b { font: 700 clamp(19px, 1.6vw, 25px)/1.1 var(--sans); letter-spacing: -.012em; }
.facts .small a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- lists (mentors, venues) ---------- */
.list { border-top: 1px solid var(--fg); }
.list > li > * { position: relative; display: grid; grid-template-columns: 64px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr) 28px; gap: 18px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.list .n { font: 500 13px/1 var(--mono); color: var(--fg-2); }
.list b { font: 700 clamp(22px, 2.1vw, 32px)/1.05 var(--sans); letter-spacing: -.02em; transition: transform .5s var(--ease), color .3s; display: inline-block; }
.list .x { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: var(--t-small); line-height: 1.5; }
.list .w { color: var(--fg-2); font-size: var(--t-small); line-height: 1.5; }
.list .a { font-family: var(--mono); transition: transform .4s var(--ease); }
.list a:hover b, .list [data-hover]:hover b { color: var(--accent-t); transform: translateX(10px); }
.list a:hover .a { transform: translateX(4px); }
/* the photo that follows the cursor over a list row */
.hover-img { position: fixed; left: 0; top: 0; z-index: 80; inline-size: 240px; aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; transform: scale(.85); transition: opacity .3s var(--ease), transform .45s var(--ease); }
.hover-img.is-on { opacity: 1; transform: scale(1); }
.hover-img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .hover-img { display: none; } }

/* mentor feature cards (mentors page) */
.mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mfeat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border: 1px solid var(--hair); min-width: 0; transition: border-color .3s; }
.mfeat:hover { border-color: var(--fg); }
.mfeat .pcard__m { aspect-ratio: auto; min-height: 100%; }
.mfeat__t { padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mfeat__t .h3 { text-transform: uppercase; }
.mfeat__t .go { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.mfeat__t .go a { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.mfeat__t .go a:hover { color: var(--accent-t); text-decoration-color: currentColor; }
.credit { font: 500 11px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }

/* ---------- two ways in ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.way { position: relative; padding: clamp(26px, 3vw, 46px); display: flex; flex-direction: column; gap: 22px; min-height: 480px; overflow: hidden; isolation: isolate; }
.way__bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transform: scale(1.08); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.way__bg img { width: 100%; height: 100%; object-fit: cover; }
.way__bg::after { content: ""; position: absolute; inset: 0; background: rgba(var(--wash), .82); }
.way:hover .way__bg, .way:focus-within .way__bg { opacity: 1; transform: none; }
.way .h2 { max-width: 11ch; }
.way .body { max-width: 44ch; }
.way__f { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.way__cd { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); text-align: right; }
.way__cd b { display: block; margin-top: 6px; font: 500 28px/1 var(--mono); color: var(--fg); letter-spacing: -.02em; }
.way__cd b small { font-size: 11px; color: var(--fg-2); margin: 0 6px 0 2px; letter-spacing: 0; }

/* ---------- apply page ---------- */
.status { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; background: var(--fg); color: var(--bg); font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.status small { font-size: 10px; opacity: .7; margin: 0 4px 0 1px; }
.status i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.steps li { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px solid var(--fg); min-width: 0; }
.steps .big { font-size: clamp(40px, 4.4vw, 72px); color: var(--accent-t); }
.checks li, .gets li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.45; }
.checks li::before { content: "✓"; color: var(--accent-t); font-weight: 700; }
.gets li::before { content: "+"; color: var(--accent-t); font-weight: 700; }
.gets li.no::before { content: "×"; color: var(--fg-3); }
.gets li.no { color: var(--fg-2); }
.form-wrap { grid-column: 7 / 13; }
.form { display: flex; flex-direction: column; gap: 32px; }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.form legend { padding: 0 0 12px; margin-bottom: 4px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--fg); width: 100%; display: flex; justify-content: space-between; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: var(--t-small); font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.field .hint, .field .opt { font-weight: 400; color: var(--fg-2); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { min-height: 52px; padding: 12px 0; border: 0; border-bottom: 1.5px solid var(--hair); border-radius: 0; background: transparent; font: 400 19px/1.3 var(--sans); width: 100%; outline: none; transition: border-color .3s; }
.field input:hover, .field select:hover, .field textarea:hover { border-bottom-color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; background: linear-gradient(45deg, transparent 50%, var(--fg) 50%) right 6px center / 7px 7px no-repeat, linear-gradient(-45deg, transparent 50%, var(--fg) 50%) right 0 center / 7px 7px no-repeat; padding-right: 26px; }
.field select option { background: var(--bg); color: var(--fg); }
.field input[type="file"] { font-size: var(--t-small); padding: 12px 0; }
.field input[type="file"]::file-selector-button { font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--fg); background: transparent; color: var(--fg); padding: 10px 14px; margin-right: 14px; cursor: pointer; }
.field__err { display: none; font-size: 14px; color: var(--err); font-weight: 700; }
.field.is-invalid .field__err { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--err); }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-small); line-height: 1.5; }
.check label { font-weight: 400; }
.check input { appearance: none; -webkit-appearance: none; inline-size: 20px; block-size: 20px; border: 1.5px solid var(--fg); margin: 2px 0 0; display: grid; place-content: center; cursor: pointer; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: "✓"; color: var(--on-accent); font-size: 13px; line-height: 1; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--hair); cursor: pointer; min-height: 84px; transition: border-color .3s, background .3s, color .3s; }
.choice input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.choice b { font: 700 17px/1.15 var(--sans); }
.choice span { color: var(--fg-2); font-size: 14px; line-height: 1.35; }
.choice:hover { border-color: var(--fg); }
.choice:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.choice:has(input:checked) span { color: var(--bg); opacity: .75; }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.form__foot p { color: var(--fg-2); font-size: 14px; max-width: 40ch; }
.ok { display: none; flex-direction: column; gap: 16px; padding: 30px; border: 1px solid var(--fg); }
.ok.is-on { display: flex; }
.ok .h3 { color: var(--accent-t); }
.form.is-sent { display: none; }
.evcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.evday { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.evday__h { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--fg); }
.evday__h b { display: block; font: 700 18px/1.15 var(--sans); }
.evday__h span span { font-size: 14px; color: var(--fg-2); }
.evpick { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--hair); text-align: left; min-height: 170px; transition: border-color .3s, background .3s, transform .4s var(--ease); }
.evpick:hover { border-color: var(--fg); background: var(--soft); transform: translateY(-3px); }
.evpick .k { font: 700 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); }
.evpick b { font: 700 18px/1.2 var(--sans); }
.evpick .w { color: var(--fg-2); font-size: 14px; line-height: 1.4; }
.evpick .state { margin-top: auto; }

/* ---------- venues ---------- */
.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.vcard { display: flex; flex-direction: column; gap: 16px; padding: 26px; border: 1px solid var(--hair); min-width: 0; transition: border-color .3s; }
.vcard:hover { border-color: var(--fg-3); }
.vcard .h3 { text-transform: uppercase; }
.vcard dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px 14px; font-size: var(--t-small); line-height: 1.5; }
.vcard dt { font: 500 12px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.vcard .go { margin-top: auto; }
.diagram { border-top: 1px solid var(--fg); padding-top: 28px; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram .rail { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.diagram .stn { fill: var(--bg); stroke: var(--fg); stroke-width: 4; }
.diagram .stn--par { fill: var(--bg); stroke: var(--accent); stroke-width: 4; }
.diagram .dia { fill: var(--accent); }
.diagram text { fill: var(--fg); font-family: var(--sans); font-size: 16px; }
.diagram .nm { font-weight: 700; font-size: 26px; }
.diagram .w { fill: var(--fg-2); font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.diagram--v { display: none; }
.getting { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.getting div { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--fg); font-size: var(--t-small); line-height: 1.55; min-width: 0; }

/* ---------- globe ---------- */
.globe__h { grid-column: 1 / 7; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.globe__data { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 16px; }
.globe__data p { font: 500 13px/1.6 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.globe__data b { font-size: 22px; letter-spacing: -.01em; display: block; color: var(--fg); }
.globe__data span { color: var(--fg-2); }
.globe__c { grid-column: 4 / 11; grid-row: 2; margin-top: clamp(-130px, -8vw, -40px); aspect-ratio: 1; justify-self: center; inline-size: min(100%, 640px); }
.globe__c canvas { width: 100%; height: 100%; }
.globe__ll { grid-column: 1 / 4; grid-row: 2; align-self: end; font: 500 12px/1.7 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }
.globe__t { grid-column: 9 / 13; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: 16px; }

/* ---------- footer ---------- */
.ft { padding: var(--sec) var(--gut) calc(var(--edge) + 30px); }
.ft__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--hair); }
.acc { padding: 30px; display: flex; flex-direction: column; }
.acc details { border-bottom: 1px solid var(--hair); }
.acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 18px; transition: transform .35s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc details > div { padding: 0 0 18px; display: flex; flex-direction: column; gap: 2px; color: var(--fg-2); font-size: var(--t-small); }
.acc details > div a { color: var(--fg); min-height: 38px; display: inline-flex; align-items: center; }
.acc details > div a:hover { color: var(--accent-t); }
.ft__id { padding: 30px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ft__id .mark { inline-size: 58px; block-size: 63px; }
.ft__id p { font-size: var(--t-small); line-height: 1.7; }
.mail { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; }
.mail button { min-height: 38px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--fg); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.mail a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.mail a:hover { color: var(--accent-t); }
.ft__word { margin-top: 30px; font: 700 clamp(22px, 8.1vw, 150px)/.82 var(--sans); letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.ft__word span { color: var(--accent-t); }
.ft__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 20px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-2); }


/* ---------- v4 page helpers ---------- */
.list .thumb { display: none; }
@media (hover: none), (pointer: coarse) { .list .thumb { display: block; inline-size: 40px; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 8px; } }

.sh--half { grid-column: 1 / 6; }
.sb--half { grid-column: 7 / 13; margin-top: 0; padding-top: clamp(24px, 3vw, 52px); }
.callhead { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
.callhead__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.slot { display: block; }


/* ---------- cookie consent: a card with a small line, one stop per category ---------- */
.ck { position: fixed; z-index: 70; left: 50%; margin-left: calc(min(460px, 100vw - 2 * var(--edge) - 48px) / -2); bottom: calc(var(--edge) + 24px + env(safe-area-inset-bottom, 0px)); inline-size: min(460px, calc(100vw - 2 * var(--edge) - 48px)); background: var(--bg); color: var(--fg); border: 1px solid var(--fg); box-shadow: 0 24px 60px rgba(0, 0, 0, .16); padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 12px; transform: translateY(calc(100% + 60px)); opacity: 0; transition: transform .7s var(--ease), opacity .5s var(--ease); }
.ck.is-on { transform: none; opacity: 1; }
.ck__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck__top .lbl { color: var(--fg); }
.ck__line { position: relative; display: flex; align-items: center; gap: 0; }
.ck__line i { position: relative; z-index: 1; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--fg-3); transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.ck__line i + i { margin-left: 22px; }
.ck__line::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--hair); }
.ck__line i.on { background: var(--accent); box-shadow: none; transform: scale(1.15); }
.ck__title { font: 700 20px/1.15 var(--sans); letter-spacing: -.015em; }
.ck__text { font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.ck__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.ck__note { padding-top: 12px; border-top: 1px solid var(--hair); }
.ck__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ck__btns .btn { justify-content: center; min-height: 48px; padding: 0 14px; }
.ck__more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hair); }
.ck__more:hover { text-decoration-color: currentColor; color: var(--accent-t); }
.ck__prefs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
/* folded, the preferences are hidden for real (no Tab stop on an invisible toggle); they hide once the fold has closed */
.ck__prefs > div { overflow: hidden; visibility: hidden; transition: visibility 0s .55s; }
.ck.is-open .ck__prefs { grid-template-rows: 1fr; }
.ck.is-open .ck__prefs > div { visibility: visible; transition: visibility 0s; }
.ck__row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hair); }
.ck__row > i { margin-top: 4px; inline-size: 12px; block-size: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fg-3); transition: background .35s, box-shadow .35s; }
.ck__row.on > i { background: var(--accent); box-shadow: none; }
.ck__row b { font: 700 16px/1.25 var(--sans); }
.ck__row p { grid-column: 2; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.ck__row .toggle { grid-column: 3; grid-row: 1 / 3; min-height: 0; }
.ck__always { grid-column: 3; grid-row: 1; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-t); white-space: nowrap; }
.ck__fine { font: 500 11px/1.45 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--fg-2); }
.ck__save { display: none; }
.ck.is-open .ck__save { display: grid; }
.ck.is-open .ck__main { display: none; }
@media (max-width: 720px) {
  .ck { left: calc(var(--edge) + 8px); right: calc(var(--edge) + 8px); margin-left: 0; inline-size: auto; bottom: calc(var(--edge) + 8px + env(safe-area-inset-bottom, 0px)); padding: 18px 16px 16px; max-height: calc(100svh - 120px); overflow-y: auto; }
  .ck__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ck { transition: none; } }

.ft__legal [data-cookie-settings] { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }
.ft__legal [data-cookie-settings]:hover { color: var(--accent-t); }

/* ---------- breakpoints ---------- */
@media (max-width: 1180px) { .route { display: none; } }
@media (max-width: 1080px) {
  .sh, .ph .sh, .globe__h, .sh--half { grid-column: 1 / -1; }
  .sb, .sb--side, .sb--half, .form-wrap { grid-column: 1 / -1; margin-top: 32px; padding-top: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .globe__data { grid-column: 1 / -1; margin-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 14px 40px; }
  .globe__c { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; }
  .globe__ll, .globe__t { grid-column: 1 / -1; grid-row: auto; margin-top: 20px; }
  .track { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .ways, .mgrid, .evening { grid-template-columns: 1fr; }
  .vcards, .evcards { grid-template-columns: 1fr; }
  .getting { grid-template-columns: 1fr 1fr; }
  .rows li { grid-template-columns: 136px 80px minmax(0, 1fr); }
  .rows .a { grid-column: 3; justify-self: start; }
  .daybar__in { grid-template-columns: 1fr; }
  .panel { inline-size: min(86vw, 900px); grid-template-columns: 1fr; }
  .panel__img { min-height: 320px; }
}
@media (max-width: 900px) {
  /* the stops stack vertically on small screens (no pin) */
  .hs__vp { overflow: visible; }
  .hs__track { flex-direction: column; inline-size: auto; }
  .panel { inline-size: auto; min-height: 0; }
  .hs__line, .hs__hint { display: none; }
  .hs__pin { padding-top: 0; }
  .collage { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .collage__text { grid-column: 1 / -1; order: -1; padding: 0 0 24px; text-align: left; align-items: flex-start; margin: 0; }
  .ph-f { position: relative; inset: auto !important; width: auto !important; aspect-ratio: 4 / 5 !important; }
  .ph-f.f3, .ph-f.f4 { grid-column: 1 / -1; aspect-ratio: 16 / 10 !important; }
}
@media (max-width: 720px) {
  :root { --t-body: 17px; --t-small: 15px; }
  html { scroll-padding-top: 88px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; background: var(--fg); color: var(--bg); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .menu-btn::before { content: ""; inline-size: 7px; block-size: 7px; background: currentColor; }
  .hero__v169 { display: none; } .hero__v916 { display: block; }
  .hero__mark { padding: 28px 30px 24px; }
  .hero__mark .mark { inline-size: 54px; block-size: 58px; }
  .next { left: calc(var(--edge) + 10px); right: calc(var(--edge) + 10px); inline-size: auto; bottom: calc(var(--edge) + 12px); grid-template-columns: 92px minmax(0, 1fr); }
  .next img { inline-size: 92px; block-size: 80px; }
  .hero__intro { left: calc(var(--edge) + 12px); bottom: calc(var(--edge) + 136px); inline-size: calc(100% - 2 * var(--edge) - 24px); }
  .scroll-cue { display: none; }
  .ph { padding-top: calc(var(--edge) + 110px); }
  .track { grid-auto-columns: 74%; gap: 16px; }
  .tabs { gap: 6px; }
  .tabs button { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .tab-t b { font-size: 14px; }
  .tt li { grid-template-columns: 110px minmax(0, 1fr); }
  .tt .k { grid-column: 2; grid-row: 1; }
  .tt li > span:nth-child(3) { grid-column: 1 / -1; }
  .tt .par { grid-column: 1 / -1; }
  .rows li, .track-col .rows li { grid-template-columns: 118px minmax(0, 1fr); }
  .rows .t, .track-col .rows .t { font-size: 15px; }
  .rows .k { grid-column: 2; grid-row: 1; }
  .rows .x, .rows .a { grid-column: 1 / -1; }
  .list > li > * { grid-template-columns: 40px minmax(0, 1fr) 22px; }
  .list > li > * > :nth-child(3), .list > li > * > :nth-child(4) { grid-column: 2; }
  .list .a { grid-column: 3; grid-row: 1; }
  .mfeat { grid-template-columns: 1fr; }
  .mfeat .pcard__m { aspect-ratio: 4 / 4; }
  .steps { grid-template-columns: 1fr; }
  .choices, .choices--2 { grid-template-columns: 1fr; }
  .getting, .facts { grid-template-columns: 1fr; }
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagram--h { display: none; } .diagram--v { display: block; }
  .ft__box { grid-template-columns: 1fr; }
  .ft__id { border-left: 0; border-top: 1px solid var(--hair); }
  .way { min-height: 0; }
  .daybar { top: calc(var(--edge) + 52px); }
  .track-col { padding: 18px; }
}
@media (max-width: 359px) { .logo { font-size: 0; gap: 0; } .logo .mark { inline-size: 28px; block-size: 30px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.is-entering .curtain { transform: scaleY(0); }
}

/* ---------- QA · presentation build: shared fixes promoted from the home page ---------- */
/* keyboard: the skip link becomes visible on focus */
a.sr:focus-visible, a.sr:focus { position: fixed !important; left: var(--edge); top: var(--edge); width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; padding: 12px 16px; background: var(--fg); color: var(--bg); z-index: 100; }
/* header wash: fully opaque behind the links so scrolled text never shows through */
.hd.is-scrolled::before { opacity: 1; background: linear-gradient(rgb(var(--wash)) 72%, rgba(var(--wash), 0)); }
/* the route: 12 px labels (shown on hover / focus only, see the route above) */
.route a { font-size: 12px; }
/* cookie card: docked bottom-right on desktop; compact on phones until Preferences opens */
@media (min-width: 721px) {
  .ck { left: auto; right: calc(var(--edge) + 24px); margin-left: 0; inline-size: min(420px, calc(100vw - 2 * var(--edge) - 48px)); }
}
@media (max-width: 720px) {
  /* compact card on phones (about 108 px): label + Preferences link on one line, Accept all | Reject all side by side */
  .ck:not(.is-open) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 12px; }
  .ck:not(.is-open) .ck__top { grid-column: 1; grid-row: 1; }
  .ck:not(.is-open) .ck__line, .ck:not(.is-open) .ck__text, .ck:not(.is-open) .ck__prefs, .ck:not(.is-open) .ck__foot .ck__fine { display: none; }
  .ck:not(.is-open) .ck__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ck:not(.is-open) .ck__foot { grid-column: 2; grid-row: 1; }
  .ck:not(.is-open) .ck__more { min-height: 30px; }
  .ck:not(.is-open) .ck__main { grid-column: 1 / -1; grid-row: 2; }
  .ck:not(.is-open) .ck__btns .btn { min-height: 44px; }
}

/* header: Register for an evening sits after Apply (desktop nav from 900 px; every phone gets it in the menu) */
@media (max-width: 899px) { .nav a[href$="#register"] { display: none; } }

/* ---------- four days (17–20 Nov): work in progress, access to be announced, the partner logos ---------- */
/* a film shown before its final cut: an outline chip right after the title; the half-filled dot says "in progress".
   Same mono caps as the .access chips; never splits ("Work in progress" stays on one line); resets the title's bold/italic. */
.wip { display: inline-flex; align-items: center; gap: 7px; margin-left: .3em; padding: 3px 7px 3px 6px; border: 1px solid currentColor; color: var(--fg-2); font: 500 12px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: .12em; }
.wip::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); flex: none; }
/* who can come is not announced yet (Fri 20 Nov, the morning at ICR New York): an open, dashed ring */
.access--tbc { color: var(--fg-2); }
.access--tbc::before { border-radius: 50%; border-style: dashed; }

/* the partner logos, a band that keeps moving (home; markup from build.py {{LOGOS}}).
   Two identical tracks slide together by their own width, so the loop has no seam; each track is at least as wide as the band.
   Logos sit on paper tiles (so every logo colour reads on the dark page), grey at rest, in colour on hover or with focus inside.
   Pauses on hover and with focus inside. Reduced motion: no movement, the first track wraps into a centred grid, the copy hides. */
.lgm { --lg-paper: #F7F3EC; --lg-h: 40px; --lg-gap: clamp(10px, 1.1vw, 16px); --lg-fade: clamp(20px, 6vw, 96px); position: relative; margin-top: clamp(80px, 9vw, 150px); border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); overflow: hidden; }
.lgm__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding-block: 12px 2px; }
.lgm__hd .more { color: var(--fg); }
.lgm__hd .more:hover, .lgm__hd .more:focus-visible { color: var(--accent-t); }
.lgm__vp { display: flex; overflow: hidden; padding-block: 12px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--lg-fade), #000 calc(100% - var(--lg-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--lg-fade), #000 calc(100% - var(--lg-fade)), transparent); }
.lgm__track { flex: none; display: flex; align-items: center; justify-content: space-around; gap: var(--lg-gap); min-inline-size: 100%; margin: 0; padding: 0 var(--lg-gap) 0 0; list-style: none; animation: lgm-run 54s linear infinite; will-change: transform; }
@keyframes lgm-run { to { transform: translate3d(-100%, 0, 0); } }
.lgm__vp:hover .lgm__track, .lgm:focus-within .lgm__track { animation-play-state: paused; }
.lgm__i { flex: none; display: grid; grid-auto-flow: column; place-items: center; column-gap: 10px; block-size: calc(var(--lg-h) + 24px); padding: 0 18px; background: var(--lg-paper); }
.lgm__i img { block-size: var(--lg-h); inline-size: auto; max-inline-size: none; object-fit: contain; filter: grayscale(1) contrast(1.06); opacity: .9; transition: filter .45s var(--ease), opacity .45s var(--ease); }
/* tuned per logo (li[data-logo], from build.py): colour that turns pale in grey gets darker ink; round seals get more height.
   Before the hover rule, which has the same weight and must win. */
.lgm__i[data-logo="unatc"] img { filter: grayscale(1) brightness(.5); opacity: 1; }
.lgm__i[data-logo="ucin"] img { filter: grayscale(1) brightness(.7) contrast(1.25); opacity: 1; }
.lgm__i[data-logo="romampro"] img { filter: grayscale(1) brightness(.8) contrast(1.1); opacity: 1; }
.lgm__i[data-logo="ucin"] img, .lgm__i[data-logo="racc-ct"] img { block-size: calc(var(--lg-h) + 16px); }
.lgm__i:hover img, .lgm:focus-within .lgm__i img { filter: none; opacity: 1; }
/* a mark published without its name (logos.json "label", e.g. eTheatrum): the name in live text beside it, dark ink on the
   paper tile */
.lgm__t { font: 700 19px/1 var(--sans); letter-spacing: -.012em; color: #1C1C1C; white-space: nowrap; }
.lgm__g { flex: none; display: flex; align-items: center; gap: 10px; margin-inline: clamp(8px, 1.4vw, 22px) 2px; font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }
.lgm__g::before { content: ""; inline-size: 8px; block-size: 8px; background: var(--accent); flex: none; }
@media (max-width: 720px) {
  .lgm { --lg-h: 36px; }
  .lgm__i { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lgm__vp { padding-inline: var(--gut); -webkit-mask-image: none; mask-image: none; }
  .lgm__track { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; min-inline-size: 0; padding: 0; animation: none; will-change: auto; }
  .lgm__track--dup { display: none; }
  .lgm__i { flex: 0 1 auto; min-inline-size: 0; }                 /* a very wide logo shrinks to the row instead of overflowing */
  .lgm__i img { max-inline-size: 100%; }
  .lgm__g { flex-basis: 100%; justify-content: center; margin: 8px 0 0; }
  .lgm__g:first-child { margin-top: 0; }
}

/* ---------- accessibility pass: sticky stacks, header room, forced colours, narrow screens ---------- */

/* programme: the fixed header plus the sticky day bar are about 186 px (139 px on phones), so anchors land below both */
html[data-page="programme"] { scroll-padding-top: 200px; }
@media (max-width: 720px) { html[data-page="programme"] { scroll-padding-top: 150px; } }

/* header: below 800 px the nav tightens its gaps so every link fits beside the logo */
@media (min-width: 721px) and (max-width: 799px) { .nav { gap: 14px; } }

/* forced colours (Windows contrast themes): the selected day keeps a mark, the on/off toggles (programme filter, cookie card)
   keep their knob and state, the scrolled header stays opaque, and the partner logos keep their paper tile (dark logos would
   vanish on a dark Canvas) */
@media (forced-colors: active) {
  .tabs [aria-selected="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
  .toggle input::after { forced-color-adjust: none; background: CanvasText; }
  .toggle input:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .toggle input:checked::after { background: HighlightText; }
  .hd.is-scrolled::before { background: Canvas; }
  .lgm__i { forced-color-adjust: none; }
}

/* 320 px: button labels stay on one line ("Apply with a project") */
@media (max-width: 359px) { .btn { padding: 0 14px; gap: 10px; letter-spacing: .02em; } }