@charset "UTF-8";
/* ==========================================================================
   NTS'27 — National Tourism Summit 2027
   Stylesheet. Plain CSS, no preprocessor, no framework.

   Structure
     01  Tokens
     02  Reset and base
     03  Typography
     04  Layout primitives
     05  Controls — buttons, links, chips, ticks
     06  Chrome — progress, masthead, menu, cursor
     07  Hero
     08  Sections
     09  Components — stats, strip, plates, roster, pillars, route
     10  Form
     11  FAQ
     12  Footer
     13  Motion start-states
     14  Responsive
     15  Print
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  /* The flag's white band, warmed a hair so saffron and green read
     cleanly against it. */
  --paper:        #FBFBF8;   /* near-white, the page */
  --paper-2:      #F4F1EA;   /* a shade deeper, for panels */
  --paper-3:      #E8E3D8;   /* deeper still, placeholders */
  --paper-lift:   #FFFFFF;   /* highlights, mist */

  /* --- Ink ------------------------------------------------------------
     Body text is a warm near-black, not a flag colour. The chakra
     navy was dropped on purpose: on the flag it is a small circle
     inside the white band, so making it the primary made the whole
     page read blue. */
  --ink:          #1C1A17;   /* warm near-black, body + display type */
  --ink-soft:     #4A443C;   /* warm grey, secondary text. 9.3:1 */
  --ink-line:     #06301A;   /* deep green — footer field, dark surfaces */

  /* --- Accent ---------------------------------------------------------
     Saffron carries the display type, the rules and the buttons, which
     is what makes the page read as the flag. Raw flag saffron is 2.1:1
     and cannot hold text, so type runs through --accent-ink, saffron
     pushed to a readable burnt tone at 5.0:1. */
  --accent:       #FF9933;   /* flag saffron — hairlines, markers */
  --accent-ink:   #C2410C;   /* saffron text. 5.0:1 */
  --accent-lift:  #FFB067;   /* saffron on dark surfaces. 8.1:1 */

  /* --- Support --------------------------------------------------------
     Flag green for small-caps labels, rules and the quiet elements. */
  --sage:         #138808;   /* flag green — rules, large type */
  --sage-ink:     #0C5C06;   /* flag green, small-caps labels. 8.0:1 */
  --sage-pale:    #A8D8A0;   /* flag green, far hills */

  /* --- Rules and lines ------------------------------------------------ */
  --rule:         rgba(194, 65, 12, 0.16);
  --rule-strong:  rgba(194, 65, 12, 0.38);
  --rule-faint:   rgba(28, 26, 23, 0.08);

  /* --- Status --------------------------------------------------------- */
  --danger:       #9B2C1B;   /* form errors. 6.0:1 on paper */
  --ok:           #2C5D3A;

  /* --- Type ----------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                  'Liberation Mono', monospace;

  --fs-body:      clamp(1rem, 0.94rem + 0.28vw, 1.1125rem);
  --fs-small:     clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-label:     clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --fs-lede:      clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);
  --fs-h3:        clamp(1.25rem, 1.1rem + 0.7vw, 1.6875rem);
  --fs-h2:        clamp(2.125rem, 1.3rem + 3.3vw, 3.75rem);
  --fs-display:   clamp(2.75rem, 0.85rem + 9.9vw, 9.25rem);
  --fs-numeral:   clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem);
  --fs-stat:      clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --fs-pillar:    clamp(2rem, 1.1rem + 4.6vw, 4.5rem);

  --lh-tight:     0.94;
  --lh-snug:      1.18;
  --lh-body:      1.62;

  /* --- Space ---------------------------------------------------------- */
  --gutter:       clamp(1.25rem, 4.2vw, 5rem);
  --shell-max:    1520px;
  --gap:          clamp(1.25rem, 2.4vw, 2.25rem);
  --sec-pad:      clamp(4.5rem, 11vh, 9.5rem);
  --flow:         clamp(1rem, 1.6vh, 1.5rem);

  /* --- Motion --------------------------------------------------------- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur:          0.55s;

  --radius:       2px;       /* print-like: nearly square corners */
  --focus:        2px solid var(--accent-ink);
  --focus-offset: 3px;
}


/* ==========================================================================
   02  RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: clamp(5rem, 12vh, 7.5rem);
  background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `hidden` makes <body> a scroll container, which breaks ScrollTrigger's
     pinning. `clip` does the same visual job without that side effect. */
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

body.is-locked { overflow: hidden; }

/* Without JavaScript there is no menu to open — the footer carries the full
   navigation, so hide the control rather than leaving a dead button. */
.no-js .burger { display: none; }

/* --- Lenis (smooth scroll) -------------------------------------------
   These classes are added to <html> by Lenis only when it is running.
   Nothing here applies without it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--flow) 0;
}

::selection { background: var(--accent); color: var(--ink); }

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 200;
  transform: translateY(-140%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus { transform: translateY(0.5rem); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
p + p { margin-top: var(--flow); }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color 0.25s var(--ease), color 0.25s var(--ease);
}
a:hover { text-decoration-color: currentColor; }

strong { font-weight: 650; }

em { font-style: italic; }

.label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: 1.42;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
}

.note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 46ch;
}

.hint {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.hint__glyph { color: var(--accent-ink); font-size: 1.1em; }

.pull {
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--accent);
}
.pull p {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.3;
  font-style: italic;
  letter-spacing: -0.015em;
}
.pull cite {
  display: block;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-ink);
}


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}


/* ==========================================================================
   05  CONTROLS
   ========================================================================== */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.5em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* The wipe. A single pseudo-element, transform-only. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.42s var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--paper); border-color: var(--ink); }

.btn--solid {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--paper);
}
.btn--solid::before { background: var(--sage-ink); }
.btn--solid:hover, .btn--solid:focus-visible {
  color: var(--paper);
  border-color: var(--sage-ink);
}

.btn--ghost { background: transparent; }

.btn--sm { padding: 0.7em 1.1em; font-size: var(--fs-label); }

.btn__icon { flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Underline that draws in from the left. */
.link-underline {
  position: relative;
  text-decoration: none;
  padding-bottom: 0.18em;
  font-weight: 600;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.45em 0.85em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 550;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.chip__k {
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 650;
}
.chip--wait {
  border-style: dashed;
  border-color: var(--accent);
  background: rgba(255, 153, 51, 0.07);
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 1px;
  background: var(--accent);
}


/* ==========================================================================
   06  CHROME
   ========================================================================== */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* --- Masthead --------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 2px 0 auto 0;
  z-index: 110;
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead.is-stuck {
  background: rgba(251, 251, 248, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--rule);
}
.masthead.is-hidden { transform: translateY(-115%); }

/* Over the full-screen menu the header should disappear into the paper
   rather than float on its own blur. */
.masthead.is-menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(0.9rem, 2.2vh, 1.5rem);
  transition: padding 0.45s var(--ease-out);
}
.masthead.is-stuck .masthead__inner { padding-block: clamp(0.6rem, 1.4vh, 0.85rem); }

/* The mark IS the logo — the "NTS’27" lettering is baked into the PNG at
   2.04:1, so it is sized by height with width auto. No text wordmark sits
   beside it; that would say NTS’27 twice. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.brand__mark {
  flex: none;
  height: clamp(2.1rem, 4.6vh, 2.9rem);
  width: auto;
  transition: transform 0.5s var(--ease-out);
}
.masthead.is-stuck .brand__mark { transform: scale(0.86); }
.brand__sub {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 650;
  line-height: 1.25;
  border-left: 1px solid var(--rule);
  padding-left: 0.85rem;
  white-space: nowrap;
}

.nav { display: none; }
.nav__list {
  display: flex;
  gap: clamp(1rem, 1.9vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-size: var(--fs-small);
  font-weight: 550;
  text-decoration: none;
  letter-spacing: 0.005em;
  position: relative;
  padding-bottom: 0.2em;
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.nav__list a:hover::after,
.nav__list a:focus-visible::after { transform: scaleX(1); }

.nav__cta { display: none; }

/* --- Burger ----------------------------------------------------------- */

.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--ink);
}
.burger__bars { display: grid; gap: 5px; width: 26px; }
.burger__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
[aria-expanded='true'] .burger__bars span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
[aria-expanded='true'] .burger__bars span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}
.burger__label {
  font-size: var(--fs-label);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--sage-ink);
}

/* --- Full-screen menu ------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 8rem) 0 clamp(2rem, 6vh, 4rem);
}
.menu[hidden] { display: none; }

.menu__inner {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: clamp(2rem, 6vh, 3.5rem);
}

.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.menu__list li { border-bottom: 1px solid var(--rule); }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 3vw, 1.75rem);
  padding: clamp(0.7rem, 2.2vh, 1.1rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.4vw, 2.75rem);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: padding-left 0.4s var(--ease-out), color 0.3s var(--ease);
}
.menu__list a:hover,
.menu__list a:focus-visible { padding-left: 0.55rem; color: var(--accent-ink); }
.menu__num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--sage-ink);
  flex: none;
  width: 2ch;
}

.menu__foot {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  display: grid;
  gap: 0.4rem;
}
.menu__org {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
.menu__contact { font-size: var(--fs-small); color: var(--ink-soft); }

/* --- Cursor ----------------------------------------------------------- */

.cursor { display: none; }


/* ==========================================================================
   07  HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(100svh, 62rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(6.5rem, 17vh, 11rem);
  background: var(--paper);
}

.hero__contours {
  position: absolute;
  top: clamp(2rem, 8vh, 6rem);
  right: 0;
  width: clamp(28rem, 40vw, 40rem);
  height: clamp(28rem, 40vw, 40rem);
  color: var(--sage);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.hero__contours svg { width: 100%; height: 100%; }

.hero__inner {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(14rem, 34vh, 24rem);
  display: grid;
  gap: clamp(1rem, 2.4vh, 2.2rem);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0;
  color: var(--accent-ink);
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-ink);
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
}

/* Line-by-line mask reveal. Start state lives in section 13. */
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln__i { display: block; will-change: transform; }

.hero__where {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
.hero__where strong {
  color: var(--accent-ink);
  font-weight: 650;
}

.hero__lede {
  font-size: var(--fs-lede);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- Hero scenery ----------------------------------------------------- */

.hero__scenery {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(15rem, 46vh, 30rem);
  z-index: 1;
  pointer-events: none;
}

.hill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
/* Each layer's box is taller than the scenery band so its ridge line lands
   where the composition wants it. A path's fill always runs to the bottom of
   its own box, which is at or below the hero's clipped edge — that is why a
   downward parallax offset can never open a gap. */
.hill--far  { height: 115%; }
.hill--mid  { height: 120%; }
.hill--near { height: 120%; }
.hill--base { height: 40%; }

/* Low enough to lie in the valley between the mid and near ridges, which is
   also where the scrolling eyebrow sits on solid ink. */
.mist__wrap {
  position: absolute;
  bottom: 22%;
  left: -12vw;
  width: calc(100% + 24vw);
  height: clamp(5rem, 13vh, 10rem);
  overflow: visible;
}
.mist {
  display: block;
  width: 100%;
  height: 100%;
}
.mist__band { will-change: transform; }

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--paper);
}
.hero__scroll .label { color: var(--paper); opacity: 0.78; }
.hero__scroll-line {
  display: block;
  width: clamp(2rem, 6vw, 4.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  transform-origin: left center;
}


/* ==========================================================================
   08  SECTIONS
   ========================================================================== */

.sec {
  position: relative;
  padding-block: var(--sec-pad);
}
.sec + .sec { border-top: 1px solid var(--rule); }

/* No border-bottom here: the next section already draws a border-top, and
   two hairlines 1px apart read as a mistake. */
.sec--programme { padding-bottom: 0; }
.sec--participate { background: var(--paper-2); }

.sec__head {
  grid-column: 1 / span 6;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.25rem);
  row-gap: 0.85rem;
  align-items: start;
}
.sec__head > .label,
.sec__head > .sec__title,
.sec__head > .sec__body,
.sec__head > .sec__lede { grid-column: 2; }
.sec__head > .sec__body { margin-top: 0.5rem; }
.sec__head > .sec__body > .lede + * { margin-top: 0.6rem; }

.sec__num {
  grid-row: 1 / span 4;
  grid-column: 1;
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  font-weight: 300;
  font-style: italic;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--sage-ink);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  user-select: none;
}

.sec__title {
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}

.sec__body { grid-column: 8 / span 5; }
.sec__aside { grid-column: 2 / span 4; }

/* One section gets a wider head. Enough variation that the page does not
   read as a template, not so much that the type has to shrink to fit. */
.sec--attend .sec__head { grid-column: 1 / span 7; }

.sec__body > .lede + p { margin-top: 1.1rem; }
.sec__body .note { margin-top: 1.25rem; }


/* ==========================================================================
   09  COMPONENTS
   ========================================================================== */

/* --- Stats ------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem) var(--gap);
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  padding-top: clamp(1.75rem, 4vh, 2.75rem);
  border-top: 1px solid var(--rule-strong);
}
.stat { display: grid; gap: 0.3rem; }
.stat dt { order: -1; }
.stat__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.stat__cap {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 22ch;
}

/* --- Horizontal strip ------------------------------------------------ */

.strip {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  position: relative;
}
.strip__track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 0 var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--sage) transparent;
}
.strip__track::-webkit-scrollbar { height: 6px; }
.strip__track::-webkit-scrollbar-track { background: var(--rule-faint); }
.strip__track::-webkit-scrollbar-thumb { background: var(--sage); }

.panel {
  flex: 0 0 min(82vw, 27rem);
  scroll-snap-align: start;
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1rem, 2.4vh, 1.5rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
.panel__num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
}
.panel__title {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.panel__text {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 34ch;
}

/* Pinned mode, applied by motion.js when it is safe to do so.

   motion.js pins the whole .sec--programme, not the strip alone, so the
   section heading holds on screen with the strip and the viewport fills
   with real content. Pinning the strip on its own would centre a 156px band
   in 900px and leave ~370px of dead paper above and below it. */
.sec--programme.is-pinned {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3.25rem);
  padding-block: clamp(5.5rem, 11vh, 8rem) clamp(3rem, 8vh, 5rem);
}
.sec--programme.is-pinned .strip { margin-top: 0; }

/* A left gradient mask hides the clip edge. The track runs 2350px wider
   than the viewport, so a panel always exits past x=0 — without this the
   partial panel at the left is a hard straight cut through a word. */
.strip.is-pinned {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.strip.is-pinned .strip__track {
  overflow: visible;
  scroll-snap-type: none;
  padding: 0 var(--gutter);
  will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px,
                      #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 72px,
                      #000 calc(100% - 72px), transparent 100%);
}
.strip.is-pinned .panel { flex: 0 0 clamp(17rem, 26vw, 26rem); }

/* --- Plates ----------------------------------------------------------- */

.feature {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  gap: 0.75rem;
}
.feature img,
.plate img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper-3);
}
.feature figcaption,
.plate figcaption {
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 600;
}

.plates {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.plate { display: grid; gap: 0.65rem; }
.plate figure { display: grid; gap: 0.65rem; }
.plate img { aspect-ratio: 4 / 3; }
.plate__n {
  color: var(--accent-ink);
  margin-right: 0.5em;
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.05em;
}

/* --- Roster ----------------------------------------------------------- */

.roster {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  columns: 1;
}
.roster__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding: clamp(0.85rem, 2.2vh, 1.35rem) 0;
  border-bottom: 1px solid var(--rule);
  break-inside: avoid;
}
.roster__n {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.14em;
  color: var(--sage-ink);
  flex: none;
}
.roster__t {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* --- Pillars ---------------------------------------------------------- */

.pillars {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  counter-reset: pillar;
}
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding-block: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--rule);
}
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.pillar__word {
  font-size: var(--fs-pillar);
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  transition: color 0.4s var(--ease);
}
.pillar:hover .pillar__word { color: var(--accent-ink); }
.pillar__gloss {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 42ch;
}

/* --- Route / past editions ------------------------------------------- */

.route {
  position: relative;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 3.5rem;
}
.route__line {
  position: absolute;
  top: 1.05rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}
.route__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.route__stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.25rem) var(--gap);
}
.stop {
  position: relative;
  display: grid;
  gap: 0.25rem;
  padding-top: 1.75rem;
}
.stop__dot {
  position: absolute;
  top: -0.35rem;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  transform: translateY(-50%);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.stop__dot::after {
  content: '';
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  border: 1px solid transparent;
}
.stop__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  font-weight: 400;
}
.stop__note {
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 600;
}
.stop--now .stop__name { font-style: italic; color: var(--accent-ink); }
.stop--now .stop__dot {
  background: var(--accent);
  border-color: var(--accent);
  width: 0.85rem;
  height: 0.85rem;
}


/* ==========================================================================
   10  FORM
   ========================================================================== */

.participate {
  display: grid;
  gap: clamp(3rem, 7vw, 5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.formwrap__note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.req { color: var(--danger); font-weight: 700; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vh, 1.6rem) var(--gap);
  padding-top: 1.5rem;
}
.field { display: grid; gap: 0.45rem; align-content: start; }
.field--wide,
.form__actions,
.form__fallback { grid-column: 1 / -1; }

.field label {
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.field--check label { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }

.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background-color: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.65rem 0.1rem;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.form textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sage-ink) 50%),
                    linear-gradient(135deg, var(--sage-ink) 50%, transparent 50%);
  background-position: calc(100% - 14px) 1.15rem, calc(100% - 9px) 1.15rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* background-color, never the `background` shorthand — the shorthand would
   wipe the select's arrow, which is drawn with background-image. */
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-bottom-color: var(--accent-ink);
  background-color: var(--paper-lift);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 0;
  border-bottom-color: transparent;
  box-shadow: 0 2px 0 0 var(--accent-ink);
}

/* An invalid field stays invalid-looking even while it has focus. */
.form [aria-invalid='true'],
.form [aria-invalid='true']:focus,
.form [aria-invalid='true']:focus-visible {
  border-bottom-color: var(--danger);
  box-shadow: 0 2px 0 0 var(--danger);
}

.form input::placeholder,
.form textarea::placeholder { color: var(--sage); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.check span { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.check a { color: var(--ink); }

.error {
  font-size: var(--fs-small);
  color: var(--danger);
  display: flex;
  gap: 0.45em;
  align-items: baseline;
}
.error::before { content: '—'; flex: none; }
.error[hidden] { display: none; }

.field--check .error { margin-top: 0.35rem; }

/* Honeypot — out of the tab order, out of sight, still submittable. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.form__status {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  flex: 1 1 14rem;
}
.form__status[data-state='error'] { color: var(--danger); }
.form__status[data-state='ok'] { color: var(--ok); }
.form__status[data-state='busy'] { color: var(--ink-soft); }
.form__status[data-state='busy']::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 1.5px solid var(--sage);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form__fallback { font-size: var(--fs-small); color: var(--ink-soft); }
.form__fallback[hidden] { display: none; }

.form__noscript {
  grid-column: 1 / -1;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 153, 51, 0.08);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 58ch;
}

/* --- Partner column --------------------------------------------------- */

.partner {
  align-self: start;
  border-top: 2px solid var(--ink);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.partner__title {
  font-size: var(--fs-h3);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 20ch;
}
.partner p { font-size: var(--fs-small); color: var(--ink-soft); }
.partner .ticks { margin-top: 0.25rem; }
.partner__cta { margin-top: 0.5rem; }


/* ==========================================================================
   11  FAQ
   --------------------------------------------------------------------------
   Built on <details>/<summary>, so the answers are reachable with no
   JavaScript at all. main.js layers a height animation on top and leaves
   the native behaviour in charge if it cannot run.
   ========================================================================== */

.faq { border-top: 1px solid var(--rule-strong); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(0.95rem, 2.6vh, 1.5rem) 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover,
.faq__q:focus-visible { color: var(--accent-ink); }
.faq__item[open] > .faq__q { color: var(--accent-ink); }

.faq__q-t {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4rem);
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  text-wrap: pretty;
}

.faq__sign {
  position: relative;
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-bottom: 0.15rem;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }

.faq__a { overflow: hidden; }
.faq__a p {
  margin: 0;
  padding-bottom: clamp(1rem, 2.6vh, 1.5rem);
  padding-right: clamp(1rem, 8vw, 6rem);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}


/* ==========================================================================
   12  FOOTER
   ========================================================================== */

.foot {
  position: relative;
  background: var(--ink-line);
  color: var(--paper);
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(9rem, 20vh, 13rem);
  overflow: hidden;
}
.foot a { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.38); }
.foot a:hover { text-decoration-color: currentColor; }
.foot .label { color: var(--accent-lift); }

.foot__top {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.foot__brand { display: grid; gap: 0.75rem; justify-items: start; max-width: 26rem; }
.foot__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-top: 0.4rem;
}
.foot__name em { color: var(--accent-lift); font-style: italic; }
.foot__org { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.75); }

.foot__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 2.5rem) var(--gap);
}
.foot__col ul { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.foot__col a { text-decoration: none; font-size: var(--fs-small); }
.foot__col a:hover { color: var(--accent-lift); }

.foot__contact li { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.75); }
.foot__k {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-lift);
  font-weight: 650;
  margin-bottom: 0.15rem;
}
.foot__contact li + li { margin-top: 0.5rem; }

.foot__social { grid-auto-flow: column; justify-content: start; gap: 1.1rem; }
.foot__social a { font-size: var(--fs-small); }

.foot__notice {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
  max-width: 52ch;
}

.foot__bottom {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
}
.foot__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; padding: 0; }

.foot__ridge {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(4rem, 12vh, 7.5rem);
  pointer-events: none;
  opacity: 0.55;
}
.foot__ridge svg { width: 100%; height: 100%; }


/* ==========================================================================
   12b  STANDALONE PAGES — privacy, terms, 404, thank you
   ========================================================================== */

.page {
  padding-top: clamp(7rem, 17vh, 11rem);
  padding-bottom: var(--sec-pad);
}

.crumbs ol {
  list-style: none;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--sage-ink);
}
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--sage); }
.crumbs a { color: var(--sage-ink); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

.page__head {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  padding-bottom: clamp(2rem, 5vh, 3rem);
  border-bottom: 1px solid var(--rule-strong);
}
.page__title {
  font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.page__meta {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 650;
  margin-top: 0.5rem;
}

.prose {
  max-width: 44rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.prose h2 {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-top: clamp(2rem, 4.5vh, 2.75rem);
}
.prose h2:first-of-type { margin-top: 0; }
.prose p,
.prose ul,
.prose ol { margin-top: 0.85rem; }
.prose ul,
.prose ol { padding-left: 1.15rem; }
.prose li { margin-top: 0.35rem; }
.prose li::marker { color: var(--accent); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.prose__callout {
  border-left: 2px solid var(--accent);
  background: rgba(255, 153, 51, 0.08);
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.prose__callout p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

.prose__back {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Anything the committee still has to supply. Loud on purpose. */
.todo {
  background: rgba(255, 153, 51, 0.15);
  border-bottom: 1px dashed var(--accent-ink);
  color: var(--accent-ink);
  padding: 0 0.15em;
  font-size: 0.94em;
}

/* --- Credits page ------------------------------------------------------ */

.creditlist {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.creditlist li {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.creditlist b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.creditlist span { font-size: var(--fs-small); color: var(--ink-soft); }
.creditlist a { font-size: var(--fs-small); word-break: break-all; }

/* --- 404 -------------------------------------------------------------- */

.lost { max-width: 44rem; display: grid; gap: 0.9rem; }
.lost__art {
  width: min(100%, 32rem);
  color: var(--sage);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.lost__art svg { width: 100%; height: auto; }
.lost__links {
  list-style: none;
  margin: clamp(1rem, 2vh, 1.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  justify-items: start;
}
.lost__links a {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
  letter-spacing: -0.02em;
}
.lost__note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: clamp(1.25rem, 3vh, 2rem);
}

/* A subpage footer carries only the legal row. */
.foot:has(.foot__bottom--bare) {
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(6rem, 15vh, 9rem);
}
.foot__bottom--bare { margin-top: 0; padding-top: 0; border-top: 0; }


/* ==========================================================================
   09b  TOAI BRAND, KEY FACTS, ORGANISER, INITIATIVES
   ========================================================================== */

/* --- Hero photograph --------------------------------------------------- */

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Radial gradient fades the photo away from the headline area,
     keeping the right side usable for the contour overlay without
     competing with the text. */
  mask-image: radial-gradient(
    ellipse at 28% 42%,
    transparent 0%, transparent 50%,
    #000 60%, #000 100%
  );
  mask-size: 125% 100%;
  mask-position: 0 0;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Held back so the headline keeps AA contrast over it. */
  opacity: 0.42;
  filter: saturate(0.55) contrast(1.04);
}

.hero__where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.65vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.hero__where strong { font-weight: 550; }
.hero__where span {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* --- Key facts --------------------------------------------------------- */

.keyfacts {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--rule-strong);
}
.keyfacts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.keyfacts dt {
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 650;
}
.keyfacts dd {
  margin: 0;
  font-size: var(--fs-small);
  text-align: right;
  color: var(--ink);
}

/* --- Pillars, reworked as a single ruled row ----------------------------
   The previous version stacked five oversized words each with a gloss line.
   That pattern reads as template. One row, one rule, five words. */

.pillars {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 2vw, 1rem) clamp(1rem, 3.5vw, 3rem);
}
.pillar { display: block; }
.pillar__word {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.35vw, 2.125rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  transition: color 0.35s var(--ease);
}
.pillar:hover .pillar__word { color: var(--accent-ink); }
.pillar__gloss { display: none; }

/* --- TOAI numbers ------------------------------------------------------ */

.tstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem) var(--gap);
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid var(--rule-strong);
}
.tstats > div { display: grid; gap: 0.25rem; }
.tstats dt { order: -1; }
.tstats dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.tstats dd span { color: var(--accent-ink); }

/* --- Organiser: structure and office bearers ---------------------------- */

.org {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.org__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.org__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.org__list b { font-weight: 650; font-variant-numeric: tabular-nums; }
.org__list--people b { font-weight: 500; color: var(--ink-soft); text-align: right; }

.sec__body-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.0625rem, 0.95rem + 0.7vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  padding-left: clamp(0.9rem, 2vw, 1.5rem);
  border-left: 2px solid var(--accent);
}
.sec__aside-note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 38ch;
}

/* --- The other nine programmes ----------------------------------------- */

.initiatives {
  list-style: none;
  counter-reset: init;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.initiative {
  counter-increment: init;
  padding: clamp(1rem, 2.4vh, 1.5rem) 0;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.35rem;
  align-content: start;
}
.initiative__name {
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.initiative__name::before {
  content: counter(init, decimal-leading-zero);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  font-weight: 650;
  margin-bottom: 0.5rem;
}
.initiative__desc {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 44ch;
}
.initiative--here {
  border-top-color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: clamp(0.75rem, 2vw, 1.25rem);
}
.initiative--here .initiative__name { font-style: italic; color: var(--accent-ink); }
.initiative--here .initiative__desc { color: var(--ink); }

/* --- Photograph credits ------------------------------------------------- */

.credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 500;
  color: var(--sage);
}
.feature figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.caption__t {
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sage-ink);
  font-weight: 600;
}

/* --- Footer lockup ------------------------------------------------------ */

.foot__logo {
  width: min(100%, 340px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 0.5rem;
}
.foot__addr {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font-style: normal;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.75);
}
.foot__addr a { color: var(--paper); }


/* ==========================================================================
   13  MOTION START-STATES
   --------------------------------------------------------------------------
   `html.motion` is set in <head> before first paint, only when the visitor
   has not asked for reduced motion. motion.js removes it if GSAP never
   arrives (see the watchdog in that file), so nothing can stay hidden.

   The element list here mirrors REVEAL_SELECTOR in motion.js. Change both.
   ========================================================================== */

.motion .hero__title .ln__i { transform: translateY(108%); }
.motion .hero__contours svg path { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); }

.motion .hero__where,
.motion .reveal,
.motion .sec__head > .sec__title,
.motion .sec__head > .sec__body,
.motion .sec__body,
.motion .sec__aside,
.motion .stat,
.motion .panel,
.motion .pillar,
.motion .roster__item,
.motion .stop,
.motion .faq__item,
.motion .formwrap,
.motion .partner,
.motion .foot__brand,
.motion .foot__col,
.motion .tstats,
.motion .org__col,
.motion .initiative {
  opacity: 0;
  transform: translateY(26px);
}

.motion .feature img,
.motion .plate img { clip-path: inset(0 0 100% 0); }

.motion .route__fill { transform: scaleX(0); }

/* If JS runs but the vendor scripts fail, this class clears every start
   state above in one go. */
.no-motion .hero__title .ln__i,
.no-motion .hero__where,
.no-motion .sec__head > *,
.no-motion .sec__body,
.no-motion .sec__aside,
.no-motion .stat,
.no-motion .panel,
.no-motion .pillar,
.no-motion .roster__item,
.no-motion .stop,
.no-motion .faq__item,
.no-motion .formwrap,
.no-motion .partner,
.no-motion .foot__brand,
.no-motion .foot__col,
.no-motion .tstats,
.no-motion .org__col,
.no-motion .initiative {
  opacity: 1;
  transform: none;
}
.no-motion .feature img,
.no-motion .plate img { clip-path: none; }
.no-motion .route__fill { transform: scaleX(1); }
.no-motion .hero__contours svg path { stroke-dasharray: none; stroke-dashoffset: 0; }


/* ==========================================================================
   14  RESPONSIVE
   ========================================================================== */

/* --- Small tablets ---------------------------------------------------- */
@media (min-width: 40em) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tstats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roster { columns: 2; }
  .route__stops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .initiatives { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tablet landscape ------------------------------------------------- */
@media (min-width: 56em) {
  .participate { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .plates--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route__stops { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pillar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(1.5rem, 5vw, 4rem);
  }
  .pillar__gloss { padding-top: 0.35rem; }
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
  .foot__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__nav:has([data-social-block]:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Desktop ---------------------------------------------------------- */
@media (min-width: 62em) {
  .nav { display: block; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .menu { display: none !important; }

  .hero__inner { max-width: 62rem; }
  .hero__title { max-width: none; }

  /* Cursor: a trailing ring on precise pointers only. The real system
     cursor stays visible — we are not hiding affordances. */
  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: 130;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    will-change: transform;
  }
  .cursor.is-on { opacity: 1; }
  .cursor__dot {
    display: block;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 1px solid var(--rule-strong);
    border-radius: 50%;
    transition: transform 0.28s var(--ease-out), border-color 0.28s var(--ease),
                background-color 0.28s var(--ease);
  }
  .cursor.is-hot .cursor__dot {
    transform: scale(1.75);
    border-color: var(--accent);
    background: rgba(255, 153, 51, 0.09);
  }
}

/* --- Wide ------------------------------------------------------------- */
@media (min-width: 80em) {
  /* More margin, not more type. On a big screen the whitespace is the
     luxury — stretching the columns instead would break the measure. */
  :root { --gutter: clamp(3rem, 5vw, 6rem); }
}

/* --- Below desktop: every section falls to one column ------------------ */
@media (max-width: 61.999em) {
  .sec__head,
  .sec--attend .sec__head { grid-column: 1 / -1; }

  .sec__body,
  .sec__aside { grid-column: 1 / -1; max-width: 46rem; }
}

/* --- Phones ------------------------------------------------------------ */
@media (max-width: 39.999em) {
  /* The hanging numeral needs width to hang in. On a phone it sits above
     the label instead, which is where it reads best anyway. */
  .sec__head { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .sec__num {
    grid-row: auto;
    grid-column: 1;
    font-size: clamp(1.9rem, 11vw, 2.75rem);
  }
  .sec__head > .label,
  .sec__head > .sec__title,
  .sec__head > .sec__body,
  .sec__head > .sec__lede { grid-column: 1; }

  .org,
  .initiatives { grid-template-columns: minmax(0, 1fr); }

  .hero__scroll { display: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .foot__nav { grid-template-columns: minmax(0, 1fr); }
}

/* --- Coarse pointers -------------------------------------------------- */
@media (hover: none) {
  .cursor { display: none !important; }
}

/* --- Tall, short viewports -------------------------------------------- */
@media (max-height: 34em) and (min-width: 62em) {
  .hero { min-height: auto; padding-top: 7rem; }
  .hero__inner { padding-bottom: 12rem; }
}

/* --- Forced colors ---------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .chip, .stop__dot, .cursor__dot { border: 1px solid CanvasText; }
  .route__fill, .progress__bar { background: Highlight; }
  .pillar:hover .pillar__word { color: CanvasText; }
}


/* ==========================================================================
   15  PRINT
   ========================================================================== */

@media print {
  :root { --paper: #fff; --ink: #000; }

  .masthead, .menu, .progress, .cursor, .hero__scenery, .hero__contours,
  .hero__scroll, .strip__track::-webkit-scrollbar, .form__actions { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .hero { min-height: auto; padding: 0 0 1cm; }
  .hero__inner { padding-bottom: 0; }
  .hero__title { font-size: 34pt; }

  .sec { padding-block: 0.9cm; break-inside: avoid; }
  .sec + .sec { border-top: 1px solid #999; }

  .strip__track { display: block; overflow: visible; padding: 0; }
  .panel { break-inside: avoid; border-top: 1px solid #ccc; margin-bottom: 0.5cm; }

  .reveal, .sec__body, .sec__aside, .stat, .panel, .pillar, .roster__item,
  .faq__item, .partner, .formwrap { opacity: 1 !important; transform: none !important; }
  .feature img, .plate img { clip-path: none !important; }

  /* A closed <details> renders nothing, in print as on screen. main.js opens
     them all on beforeprint; this is the belt to that pair of braces. */
  .faq__a { display: block !important; }
  .faq__sign { display: none; }

  a { text-decoration: underline; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }

  .foot { background: #fff; color: #000; padding-block: 1cm 0; }
  .foot a { color: #000; }
  .foot .label, .foot__k { color: #444; }
  .foot__ridge { display: none; }
}