@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); }
/* The place-and-date line under the logo is gone from the masthead. The
   rule is kept for the archived static pages, which still carry it. */
.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; }

/* --- Register popup ---------------------------------------------------- */

.register-popup {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(22, 20, 16, 0.5);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
  pointer-events: none;
}
.register-popup[data-open] {
  opacity: 1;
  pointer-events: auto;
}
.register-popup[hidden] { display: none; }

:root .motion .register-popup__panel {
  animation: ntsPopupIn 0.45s var(--ease-out) both;
}
@keyframes ntsPopupIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Exit: the overlay dims out via opacity transition;
   the panel shrinks + fades via keyframe animation. */
:root .motion .register-popup__panel.is-closing {
  animation: ntsPopupOut 0.32s var(--ease-out) both;
}
@keyframes ntsPopupOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(0.98); }
}

.register-popup__panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vh, 2.25rem);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  margin: auto;
}

.register-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0.4;
  transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.register-popup__close:hover,
.register-popup__close:focus-visible {
  opacity: 1;
  color: var(--ink);
}

.register-popup__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.register-popup__desc {
  margin: 0 0 1.5rem;
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.02rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Step panels -- only one visible. */
.register-popup__step {
  overflow: hidden;
}
.register-popup__step[hidden] {
  display: block;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Role options. */
.register-popup__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.register-popup__opt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.85em 1em;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-2);
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 0.8rem + 0.4vw, 0.95rem);
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease),
              background-color 0.25s var(--ease),
              transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease);
}
.register-popup__opt:hover,
.register-popup__opt:focus-visible {
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-ink) 8%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.register-popup__opt:active { transform: translateY(0); }
.register-popup__opt .register-popup__badge {
  flex: none;
  font-size: 0.62em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  opacity: 0.85;
}

/* Delegate member gate. */
.gate__copy {
  margin: 0 0 1.25rem;
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.94rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.gate__check {
  display: flex;
  align-items: center;
  gap: 0.7em;
  cursor: pointer;
  user-select: none;
  font-size: clamp(0.85rem, 0.78rem + 0.3vw, 0.9rem);
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.gate__check input {
  all: unset;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 4px;
  position: relative;
  flex: none;
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
}
.gate__check input:checked {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}
.gate__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}
.gate__check input:checked + .gate__mark {
  opacity: 1;
  transform: scale(1);
}

/* Popup action buttons -- consistent padding, height, radius.
   These do NOT use the global .btn classes to avoid the wipe ::before
   and conflicting transitions. */
.register-popup__confirm,
.register-popup__back {
  width: 100%;
  padding: 0.8em 1em;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 0.78rem + 0.3vw, 0.85rem);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out),
              background-color 0.25s var(--ease),
              border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.register-popup__confirm {
  border: 0;
  background: var(--accent-ink);
  color: var(--paper);
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out),
              background-color 0.32s var(--ease), border-color 0.32s var(--ease);
}
.register-popup__confirm.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.register-popup__confirm:hover,
.register-popup__confirm:focus-visible {
  background: var(--sage-ink);
  transform: translateY(-1px);
}
.register-popup__confirm .btn__icon {
  flex: none;
  transition: transform 0.25s var(--ease-out);
}
.register-popup__confirm:hover .btn__icon {
  transform: translateX(4px);
}

.register-popup__back {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
}
/* The soon-step: copy + CTA stacked, Back separated below. */
.register-popup__row {
  display: grid;
  gap: 1rem;
}
.register-popup__step [data-step-back],
.register-popup__back {
  margin-top: 0.75rem;
}
.register-popup__back:hover,
.register-popup__back:focus-visible {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--accent-ink);
  transform: translateY(-1px);
}


/* --- 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); }

/* --- Submenus (mobile full-screen menu) -------------------------------- */
.menu li.has-submenu > a[aria-haspopup] { cursor: pointer; }
.menu li.has-submenu > a[aria-haspopup] {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.menu li.has-submenu > a[aria-haspopup]::after {
  content: '▾';
  margin-left: 0.2em;
  font-size: 0.6em;
  color: var(--sage-ink);
  opacity: 0.8;
  transition: transform 0.3s var(--ease);
}
.menu li.has-submenu.open > a[aria-haspopup]::after {
  transform: rotate(180deg);
}
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper-lift);
}
.menu li.has-submenu.open > .submenu { display: block; }
.submenu li { border-bottom: 1px solid var(--rule); }
.submenu a {
  display: block;
  padding: 1.2rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5.5vw, 2.2rem);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.submenu a:hover,
.submenu a:focus-visible { padding-left: 0.55rem; color: var(--accent-ink); }

/* --- Submenus (desktop header nav) ------------------------------------- */
.nav__item.has-submenu { position: relative; }
.nav__item .submenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-small);
  font-weight: 550;
  letter-spacing: 0.005em;
}
.nav__item .submenu-trigger::after {
  content: '▾';
  position: static;
  transform: none;
  background: none;
  height: auto;
  margin-left: 0.2em;
  font-size: 0.55em;
  color: var(--sage-ink);
  opacity: 0.7;
}
.nav__item .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  min-width: 0;
  max-width: 90vw;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.15rem 0;
  box-shadow: 0 6px 24px rgba(28, 26, 23, 0.14);
  z-index: 10;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.2s 0.05s var(--ease), transform 0.25s 0.05s var(--ease);
}
.nav__item:hover .submenu-trigger::after,
.nav__item:focus-within .submenu-trigger::after,
.nav__item .submenu-trigger:hover::after {
  transform: none;
}
.nav__item:hover .submenu,
.nav__item:focus-within .submenu,
.nav__item.is-open .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* The user closed the panel. This has to beat the :hover and
   :focus-within rules above, or the panel stays on screen under the
   pointer while aria-expanded says false. */
.nav__item.is-dismissed .submenu {
  display: none;
  opacity: 0;
  transform: translateY(-0.25rem);
}
/* The panel sits 0.15rem below the item. Without a bridge over that gap
   the pointer crosses dead space on the way down, the item loses
   :hover, and the panel closes just as the pointer arrives. */
.nav__item .submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.25rem;
  height: 0.25rem;
}
.nav__item .submenu a {
  display: block;
  padding: 0.4rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 550;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__item .submenu li + li a {
  border-top: 1px solid var(--rule-faint);
}
.nav__item .submenu a:hover,
.nav__item .submenu a:focus {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}

/* --- 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(4rem, 10vh, 8rem);
  display: grid;
  gap: clamp(0.15rem, 0.6vh, 0.3rem);
}

.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);
  margin-bottom: 0.25rem;
}
.hero__where strong {
  color: var(--accent-ink);
  font-weight: 650;
}
.hero__date {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 0.8rem + 0.6vw, 1.125rem);
  font-weight: 400;
  color: var(--ink-soft);
  margin-block: 0.25rem;
}
.hero__date-icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}

.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%; }

/* Flying birds over the hero, adapted from the delegate passes. Drawn in the
   site's near-black --ink (the homepage hero sits on light paper). */
.hero__bird {
  position: absolute; left: -60px; width: 26px; height: 12px; fill: none;
  stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: .65;
  max-width: none;
  animation: hero-fly 28s linear infinite;
  /* subtle hover parallax on desktop, mirrors the delegate passes */
  transform: translate(calc(var(--mx, 0) * 28px), calc(var(--my, 0) * -6px));
}
.hero__bird path {
  transform-box: fill-box; transform-origin: center;
  animation: hero-flap .55s ease-in-out infinite alternate;
}
.hero__bird.b1 { top: 36%; animation-delay: 3s }
.hero__bird.b2 { top: 54%; animation-delay: 5.5s; transform: scale(.8) }
.hero__bird.b3 { top: 26%; animation-delay: 9s; transform: scale(.65) }
@keyframes hero-fly { 0% { translate: 0 0 } 50% { translate: 58vw -28px } 100% { translate: 118vw 10px } }
@keyframes hero-flap { from { transform: scaleY(1) } to { transform: scaleY(.3) } }

/* 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; }

/* --- Inline hero (exhibit pages: table-space, stall, program-chart) ---------
   Tight, content-sized hero with a darkened photo backdrop so light exhibit
   photos read as a backdrop, not a near-white void. The landing page
   `.hero` keeps its full-bleed scenery treatment untouched. */

.hero--inline {
  min-height: min(60svh, 38rem);
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 2vh, 1.5rem);
  background: var(--paper);
}
.hero--inline .hero__photo {
  /* Full-coverage photo, darkened so light tables/stalls stay readable. */
  mask-image: none;
  mask-size: auto;
  mask-position: 0 0;
  opacity: 1;
}
.hero--inline .hero__photo img {
  opacity: 0.22;
  filter: saturate(0.45) contrast(1.1) brightness(0.65);
  object-position: center 42%;
}
.hero--inline .hero__inner {
  padding-bottom: 0;
  max-width: 48rem;
  gap: clamp(0.9rem, 1.6vh, 1.5rem);
}
.hero--inline .hero__title {
  font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem);
  max-width: 36rem;
}
.hero--inline .hero__contours { display: none; }
.hero--inline .hero__scroll { display: none; }

/* --- Exhibit-style hero ---------------------------------------------------
   Same grid skeleton as the new program chart (venue / date rows instead of
   the flag band), so .hero__where, .hero__venue, .hero__hall and the price
   band sit side-by-side inside the inner flex column. */

.hero__where--cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  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--cols > * {
  /* each row is a flex child; keep rows tight, let the pair wrap */
  margin: 0;
}
.hero__where--cols > *:first-child {
  width: 100%;
  line-height: 1.1;
}
.hero__venue {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
  color: var(--ink);
}
.hero__venue strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.hero__hall {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.1rem);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.hero__date {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.1rem);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.hero__price-band {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}
.hero__price-band > * {
  margin: 0;
}
.hero__price-band > span:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 400;
  line-height: 0.9;
  color: var(--accent-ink);
  letter-spacing: -0.03em;
}
.hero__price-band > span:last-child {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* --- Exhibit section layout: parallel image + two columns -----------------
   .sec--exhibit carries the new flat exhibit structure — hero__where--cols in
   the hero, then a keyfacts strip, then image | columns side by side. */

.sec--exhibit {
  padding-block: clamp(3rem, 9vh, 6.5rem);
}
.sec--exhibit .shell.grid {
  display: grid;
  grid-template-columns: 29% 43% 28%;
  column-gap: var(--gap);
  row-gap: 2rem;
  align-items: start;
}
.sec--exhibit .shell.grid > .exhibit__img {
  grid-row: 1 / span 2;
  width: 100%;
}
.sec--exhibit .exhibit__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.sec--exhibit .shell.grid > div:not(.exhibit__img) {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.sec--exhibit .exhibit__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sec--exhibit .exhibit__col h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.sec--exhibit .exhibit__col > .lede {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 0.25rem 0;
  line-height: 1.5;
}

/* --- Keyfacts strip in exhibit pages --------------------------------------
   Same ruled-row pattern as the landing keyfacts (dt left / dd right,
   space-between), just tighter padding so it tucks under the hero photo. */

.sec--keyfacts .keyfacts--grid {
  border-top: 1px solid var(--rule-strong);
  padding-block: clamp(0.75rem, 2.2vh, 1.25rem);
}
.sec--keyfacts .keyfacts--grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.sec--keyfacts .keyfacts--grid > div:last-child { border-bottom: 0; }
.sec--keyfacts .keyfacts--grid dt {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.03em;
  color: var(--sage-ink);
  text-transform: uppercase;
}
.sec--keyfacts .keyfacts--grid dd {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  text-align: right;
  color: var(--ink);
  margin: 0;
}

/* Program Chart exhibit hero — tighter vertical spacing, scoped so the home
   page (`.hero` only) and stall/table-space (`.hero--inline` only) are
   unaffected. */
.hero--exhibit {
  padding-top: clamp(3rem, 9vh, 5.5rem);
}
.hero--exhibit .hero__inner {
  gap: 0.35rem;
}

/* Price line under the lede, in display numerals. */
.hero__price {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  line-height: 0.9;
  color: var(--accent-ink);
  letter-spacing: -0.03em;
}
.price__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
  font-variation-settings: normal;
}


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

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

/* Program Chart keyfacts panel — pulled tight against the hero bottom so the
   "View Day 1" button and the venue/dates facts sit together. Only this page
   carries .sec--program-chart. Must come after .sec (same specificity, later
   in source wins). */
.sec--program-chart {
  padding-block: clamp(1.5rem, 5vh, 2.5rem);
  border-top: 0;
}

/* No border-bottom here: the next section already draws a border-top, and
   two hairlines 1px apart read as a mistake. */
.sec--summit { padding-bottom: 120px; }
.sec--programme {
  padding-top: 0;
  margin-top: 0;
}
.sec--summit + .sec--programme { border-top: none; }
/* Flat cross-sell row: image-free, headline + button pair. */
.sec--switch {
  padding-block: clamp(2rem, 7vh, 4rem);
}
.sec--switch .sec__body {
  max-width: 42rem;
}
.sec--switch .sec__body > p {
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.5;
}
.sec--switch .btn + .btn {
  margin-inline-start: 0.75rem;
}

/* Final call-to-action panel: centred, capped width. */
.sec--cta-final {
  padding-block: clamp(3rem, 10vh, 6rem);
}
.sec--cta-final .lost {
  max-width: 52rem;
}

/* Compact keyfacts for the schedule column: tighter rows, no top border. */
.keyfacts--compact {
  border-top: 0;
}
.keyfacts--compact > div {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule);
}
.keyfacts--compact dt {
  color: var(--ink-soft);
}
.keyfacts--compact dd {
  color: var(--ink);
}

/* ==========================================================================
   Program chart day cards
   ========================================================================== */

/* Day navigation rail — horizontal scroll on narrow viewports */

.day-nav {
  overflow-x: auto;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90, transparent, #000 12%, #000 88%, transparent);
  mask-height: 1.6rem;
}
.day-nav::-webkit-scrollbar { height: 0.5rem; }
.day-nav::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; }
.day-nav__list {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0 0.5rem;
  margin: 0;
  padding-left: var(--gutter);
}
.day-nav__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 0.7rem + 0.5vw, 0.9rem);
  font-weight: 550;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--paper);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  scroll-snap-align: start;
}
.day-nav__pill:hover,
.day-nav__pill:focus-visible {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--paper-lift);
}
.day-nav__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.day-nav__pill[href]:target,
.day-nav__pill[href]:target:hover,
.day-nav__pill[href]:target:focus-visible {
  background: var(--accent-ink);
  color: var(--paper-lift);
  border-color: var(--accent-ink);
}
.day-nav__pill[href]:target ~ .day-nav__pill {
  opacity: 0.6;
}

/* Hero day-range pills — replaces the old "4 days / Sep 25–28" text */

.hero .day-range,
.hero--exhibit .day-range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.25rem;
}
.day-range__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.day-range__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.85rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--accent-ink);
  background: var(--paper-lift);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.day-range__pill:hover,
.day-range__pill:focus-visible {
  background: var(--accent-ink);
  color: var(--paper-lift);
  border-color: var(--accent-ink);
}

/* Per-day cards — distinct visual block with saffron header band */

.day-card {
  padding-block: clamp(3rem, 9vh, 6.5rem);
  border-top: 0;
}
.day-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.day-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper-lift);
  background: var(--accent-ink);
  box-shadow: 0 4px 10px rgba(194, 65, 12, 0.22);
  flex: 0 0 auto;
}
.day-card__date {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}

/* ==========================================================================
   Programme schedule tables (program-chart) — upgraded
   ========================================================================== */

.programme-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.programme-table caption {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: left;
  padding: 0.5rem 0 0.75rem;
  margin: 0;
}
.programme-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-3);
  font-weight: 650;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.55rem 0.7rem 0.45rem;
  border-bottom: 1px solid var(--rule-strong);
}
.programme-table th:first-child,
.programme-table td:first-child {
  width: 13ch;
  min-width: 7.5ch;
  max-width: 15ch;
  white-space: nowrap;
  font-weight: 600;
  color: var(--accent-ink);
}
.programme-table td {
  padding: 0.45rem 0.7rem;
  border-top: 1px solid var(--rule);
}
.programme-table tbody tr {
  transition: background-color 0.12s ease;
}
.programme-table tbody tr:nth-child(even) td {
  background: var(--paper-3);
}
.programme-table tbody tr:hover td:first-child {
  background: linear-gradient(90, rgba(194,65,12,0.08), transparent 40%);
}
.programme-table tbody tr td em,
.programme-table tbody tr td i {
  color: var(--sage-ink);
  font-style: normal;
  font-weight: 500;
}
.programme-table tbody tr td br { display: none; }
.programme-table tbody tr td[align] { text-align: left; }

.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; }

/* FAQ: pin the left-column heading while the question list scrolls.
   The .sec__head column stretches the full grid-row height so its
   title child can stick within it. body uses Lenis smooth-scroll (no
   overflow on the scroll root), so sticky resolves against the viewport. */
.sec--faq .sec__head { align-self: stretch; }
.sec--faq .sec__head > .sec__title { position: sticky; top: 120px; align-self: start; }

/* 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--summit .summit__layout {
  display: grid;
  /* fr, not %: percentages ignore the column gap, so 45% + 55% + the
     4–5rem gap overflowed the shell and pushed the page wide. */
  grid-template-columns: 45fr 55fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(4rem, 5vw, 5rem);
  row-gap: 2rem;
  align-items: start;
}

.sec--summit .summit__title-col {
  grid-column: 1;
  grid-row: 1;
}

.sec--summit .summit__img-col {
  grid-column: 1;
  grid-row: 2;
}

.sec--summit .summit__text-col {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0.5rem;
}

.sec--summit .sec__img {
  margin-top: 0;
}
.sec--summit .sec__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

.sec--summit .sec__aside {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.sec--summit .summit__img-secondary {
  margin: 2.5rem 0 0;
  position: relative;
  z-index: auto;
}
.sec--summit .summit__img-secondary img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* Read-more trigger — a plain text link-button in the site's own idiom:
   uppercase label on the keyfacts letter-spacing, saffron ink, 1px rule
   beneath, and an arrow that nudges right on hover. */
.summit__readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  margin: 20px 0 0;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--accent-ink);
  background: none;
  color: var(--accent-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.summit__readmore svg { flex: none; transition: transform 0.2s var(--ease-out); }
.summit__readmore:hover,
.summit__readmore:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
.summit__readmore:hover svg,
.summit__readmore:focus-visible svg { transform: translateX(4px); }
.summit__readmore:active { color: var(--ink); border-bottom-color: var(--ink); }
.summit__readmore:active svg { transform: translateX(2px); }
.summit__readmore:focus-visible { outline: var(--focus); outline-offset: 3px; }

@media (max-width: 56.249em) {
  .sec--summit .summit__img-secondary {
    margin: 24px 0 0;
  }
}

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

/* --- Summit read-more popup -------------------------------------------- */

/* While the popup is open the masthead must not float over the panel. The
   controller adds .popup-open to <html>; the header stops painting and
   taking pointer events. */
.popup-open .masthead,
.popup-open .progress { visibility: hidden; pointer-events: none; }

.summit-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(22, 20, 16, 0.5);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.32s var(--ease-out);
  pointer-events: none;
}
.summit-popup[data-open] {
  opacity: 1;
  pointer-events: auto;
}
.summit-popup[hidden] { display: none; }

:root .motion .summit-popup__panel {
  animation: ntsPopupIn 0.45s var(--ease-out) both;
}
:root .motion .summit-popup__panel.is-closing {
  animation: ntsPopupOut 0.32s var(--ease-out) both;
}

.summit-popup__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
}

.summit-popup__panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vh, 2.25rem);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  margin: auto;
  overflow: hidden;
}

.summit-popup__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.75rem;
  max-height: calc(85vh - 4rem);
}

.summit-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 0;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0.4;
  transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.summit-popup__close:hover,
.summit-popup__close:focus-visible {
  opacity: 1;
  color: var(--ink);
}

.summit-popup__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.summit-popup__body {
  font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.02rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.summit-popup__body p { margin: 0 0 1rem; }
.summit-popup__body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.3rem);
  font-weight: 500;
  color: var(--ink);
  margin: 1.5rem 0 0.6rem;
}
.summit-popup__list {
  list-style: none;
  margin: 0.6rem 0 1rem;
  padding: 0;
}
.summit-popup__list li {
  margin: 0 0 0.4rem;
}

@media (max-width: 37.5em) {
  .summit-popup {
    padding: 16px;
  }
  .summit-popup__panel {
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 1.25rem;
    border-radius: var(--radius);
  }
  .summit-popup__scroll {
    max-height: calc(100vh - 76px);
  }
}


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

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

.stats__title {
  font-size: clamp(2.5rem, 4.2vw, 2.75rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
  margin: 80px 0 40px;
  text-align: center;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  max-width: 72rem;
  margin: 0 auto;
  padding: 32px 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  text-align: center;
}
@media (max-width: 43.749em) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  display: grid;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
}
.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-top: 8px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 22ch;
  text-align: center;
}

@media (max-width: 43.749em) {
  .stat__num { font-size: clamp(2.25rem, 1.6rem + 4vw, 3.5rem); }
}

/* --- Programme component grid ----------------------------------------- */

.panels-grid {
  display: grid;
  gap: var(--gap);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  max-width: 80rem;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.panel {
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(1rem, 2.4vh, 1.5rem);
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
@media (max-width: 56em) {
  .panels-grid { grid-template-columns: 1fr; }
}
.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;
}

/* --- 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
   ========================================================================== */

.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;
}



/* ==========================================================================
   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;
  /* One track by default: on every page but the landing one the links are
     the only child, and they take the full width. The landing page adds
     the brand block and splits the row — see .foot__top--brand. */
  grid-template-columns: minmax(0, 1fr);
  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); }

/* The footer carries five columns: The Summit, The organiser, Secretarial
   address, Take part, and Directory.

   The grid IS the layout — each column is a track, so no column can land
   on top of its neighbour. Three things keep the tracks honest:

     - min-width: 0 on the column itself, so a long word (the address,
       the email) wraps inside the track instead of overflowing it.
     - the headings never wrap, so a track is never asked to hold two
       words of heading.
     - each track is floored at min-content, so a track is never asked to
       be narrower than the heading it holds. The 1fr on the far side lets
       the columns share the width that is left.

   The container takes the full width of its parent. It is not a flex
   item, has no max-width of its own, and cannot shrink to fit. */
.foot__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
  width: 100%;
  min-width: 0;
}
.foot__col { min-width: 0; }
/* The column headings stay on one line. The tracking is eased off so a
   heading fits its column instead of being cut or pushed sideways. */
.foot__col .label {
  white-space: nowrap;
  letter-spacing: 0.09em;
}
.foot__col ul {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  line-height: 1.5;
}
.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; }

/* The social links wrap inside their column rather than running past it. */
.foot__col .foot__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem 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 ------------------------------------------------------ */

.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);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  /* The address, the email and the phone are the longest strings in the
     footer. They wrap inside their column rather than running into the
     next one. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.foot__addr a { color: var(--paper); overflow-wrap: anywhere; }


/* ==========================================================================
   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 .hero__date,
.motion .reveal,
.motion .sec__head > .sec__title,
.motion .sec__head > .sec__body,
.motion .sec__body,
.motion .sec__aside,
.motion .stat,
.motion .pillar,
.motion .roster__item,
.motion .stop,
.motion .faq__item,
.motion .foot__brand,
.motion .foot__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 .hero__date,
.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 .foot__brand,
.no-motion .foot__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) {
  .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) {
  .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; }
  /* Three columns of links on a tablet: The Summit, The organiser,
     Secretarial address, Take part, Directory. The landing page keeps its
     brand block above the links until there is room for the two side by
     side — see .foot__top--brand below. */
  .foot__nav { grid-template-columns: repeat(3, 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); }

  /* Five footer columns need five tracks once there is room for them. */
  .foot__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Wide enough for the brand block beside the links ------------------ */
@media (min-width: 90em) {
  /* The landing page carries a brand block beside the links. The brand
     keeps a width of its own and the links take everything else, so the
     five columns never have to squeeze. Below this width the links take
     the full width and the brand block sits above them. */
  .foot__top--brand { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
}

/* --- 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; }

  /* FAQ heading is stacked above the list on mobile: no sticky. */
  .sec--faq .sec__head { align-self: auto; }
  .sec--faq .sec__head > .sec__title { position: static; top: auto; align-self: auto; }
}

/* Summit section stacks at 900px */
@media (max-width: 56.249em) {
  .sec--summit .summit__layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    align-items: start;
  }
  .sec--summit .summit__title-col,
  .sec--summit .summit__img-col,
  .sec--summit .summit__text-col {
    grid-column: 1;
  }
  .sec--summit .summit__title-col { grid-row: 1; }
  .sec--summit .summit__img-col { grid-row: 2; }
  .sec--summit .summit__text-col { grid-row: 3; }
  .sec--summit .summit__text-col {
    margin-top: 0;
  }
  .sec--summit .summit__img,
  .sec--summit .sec__aside {
    margin-top: clamp(2rem, 4vw, 2.5rem);
  }
}

/* --- 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; }

  .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 { 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; }
}