/* =====================================================================
   interdependence.works — site.css (redesign, September 2026)

   One idea per screen, on a page that scrolls freely. No scroll-snap.
   Built from docs/REDESIGN.md (framework, style guide, Jon's picks).

   Order: tokens → legacy aliases → base type → chrome → screens →
   section types → components → reveal → print/guards.
   ===================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* grounds and inks */
  --paper:      #F2F1EC;
  --chalk:      #FFFFFF;
  --tint:       #E6E8E2;
  --line:       #D3D6CF;
  --ink:        #12262B;   /* 13.9:1 on paper */
  --ink-2:      #33494F;   /*  8.4:1 */
  --muted:      #566362;   /*  5.1:1 on tint, 5.6:1 on paper — the floor for text (B-04) */
  --deep:       #0F2229;   /* the dark ground */
  --deep-2:     #1B3741;
  --mist:       #D9DDD6;   /* 11.9:1 on deep */
  --mist-dim:   #9DAAA8;
  /* the accent, rationed: button fill and the coral few in a field */
  --coral:      #E86F51;   /* ink on it 5.1:1; white on it fails */
  --coral-soft: #FBE4DC;
  /* teal: links, focus, hover fill */
  --teal:       #196574;   /* 4.8:1 on paper, white on it 5.5:1 */
  --teal-lt:    #7FCBD6;   /* 8.9:1 on deep */
  --teal-soft:  #DDEFF2;
  /* five pillars, five days: edges, bars, tints, duotone. Never text. */
  --plum:  #6E4A8C; --plum-lt:  #B99AD6;
  --clay:  #C9642E; --clay-lt:  #F0A27A;
  --moss:  #2E8B6E; --moss-lt:  #8FD4B6;
  --lake:  #2F7BA6; --lake-lt:  #8FC5E6;
  --ochre: #B8892B; --ochre-lt: #EBC77A; --ochre-soft: #FFF1D6; --ochre-ink: #7A5410;

  /* type: the serif says the idea, Inter reads, Prompt presses */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-ui:      "Prompt", "Inter", sans-serif;
  --f-mono:    "JetBrains Mono", Consolas, monospace;
  /* the six-step ladder */
  --t-display: clamp(44px, 6.4vw, 80px);
  --t-title:   clamp(34px, 3.8vw, 52px);
  --t-heading: clamp(24px, 2.2vw, 28px);
  --t-lead:    clamp(18px, 1.5vw, 20px);
  --t-body:    17px;
  --t-small:   15px;
  --t-label:   13px;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter:  clamp(24px, 4vw, 48px);
  --col:     1180px;
  --measure: 65ch;
  --screen-pad: clamp(64px, 12vh, 128px);
  --head-h:  72px;
  --head-h-small: 56px;
  --card-pad: clamp(16px, 2.4vw, 24px);   /* one padding for .card, .door, .frame */

  /* motion: one curve for movement, a spring in three places */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-colour: 150ms; --t-surface: 200ms; --t-move: 500ms; --t-reveal: 650ms; --stagger: 80ms;

  /* paper grain: a fine fibre over dark surfaces so teal reads as material */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- legacy aliases: the hero (hero.css) and inter.js-driven markup
     still speak the old token names. They resolve to the new values. */
  --ink-deep: var(--deep); --ink-well: var(--deep-2); --ink-shadow: #0B1A20;
  --teal-panel: #173D48; --teal-lift: #2A5A66; --pine: #0B1513;
  --card: var(--chalk); --cream: var(--paper);
  --coral-tint: #F49A80; --coral-mist: #FFC2AE; --coral-deep: var(--teal);
  --font-serif: var(--f-display); --font-sans: var(--f-body);
  --text-sm: 12px; --text-base: 14px; --text-md: 17px; --text-lg: 21px;
  --band: var(--screen-pad); --shell: var(--col); --wide: 1440px;
  --dur-move: var(--t-move); --dur-bloom: var(--t-reveal); --ease-lift: var(--ease-out);
  --mint: var(--moss-lt); --gold: var(--ochre-lt); --sage-mist: var(--tint);
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; transition: color var(--t-colour) ease; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
button { font: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
p + p { margin-top: var(--s-4); }
strong, b { font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink);
  color: var(--paper); padding: 10px 14px; }
.skip:focus { left: 12px; top: 12px; }

/* The Living Constellation cursor is progressive enhancement. The
   native pointer only steps aside after inter.js has created the canvas,
   and returns over form fields where an editing cursor carries meaning. */
.inter-cursor-layer { position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 1000; pointer-events: none; max-width: none; contain: strict; }
html.has-inter-cursor:not(.inter-cursor-native),
html.has-inter-cursor:not(.inter-cursor-native) body,
html.has-inter-cursor:not(.inter-cursor-native) body * { cursor: none !important; }
@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  .inter-cursor-layer { display: none !important; }
}

/* type roles */
.display, .h1 { font: 600 var(--t-display)/1.02 var(--f-display); letter-spacing: -.01em; }
.title, .h2   { font: 600 var(--t-title)/1.05 var(--f-display); letter-spacing: -.01em; }
.heading, .h3 { font: 500 var(--t-heading)/1.15 var(--f-ui); letter-spacing: -.01em; }
.lead  { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.body  { font-size: var(--t-body); color: var(--ink-2); }
.label { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.display em, .title em, .h1 em, .h2 em { font-style: italic; font-weight: 500; color: var(--teal); }
.measure { max-width: var(--measure); }
.measure--narrow { max-width: 34em; }
.num { font-variant-numeric: tabular-nums; }
.on-deep { color: var(--mist); }
.on-deep .lead, .on-deep .body { color: var(--mist); }
.on-deep .label { color: var(--mist-dim); }
.on-deep .display em, .on-deep .title em { color: var(--teal-lt); }
.on-deep a { color: var(--teal-lt); }
.on-deep a:hover { color: #fff; }

/* ---------------------------------------------------------------- chrome */
/* The header is a paper pill from the first pixel on every page (D-03):
   never ink on deep, never a see-through strip. On the home hero alone
   the pill rests and only the address line shows until the first 80px
   of scroll (site.js sets data-solid). Six links and one coral button
   (D-04); the announcement is hidden below 1280px, where the pill has
   no room for it. One floating-paper surface token, shared with any
   other paper surface that floats (programme's tray). */
:root { --surface-paper: rgba(242,241,236,.96); }
.progress { position: fixed; left: 0; top: 0; height: 2px; width: 0; background: var(--teal);
  z-index: 120; pointer-events: none; transition: width 80ms linear; }
.on-deep-lead .progress { background: var(--teal-lt); }

.head { position: sticky; top: 0; z-index: 110; height: var(--head-h);
  padding: var(--s-2) clamp(12px, 2vw, var(--gutter)) 0; background: transparent; }
.head .shell { height: var(--head-h-small); max-width: 1440px; margin: 0 auto; padding: 0 14px 0 var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--surface-paper); border: 1.5px solid var(--coral); border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(15,34,41,.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background var(--t-surface) ease, border-color var(--t-surface) ease, box-shadow var(--t-surface) ease; }
.head[data-solid] .shell { box-shadow: 0 14px 34px -18px rgba(15,34,41,.55); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 600 26px/1 var(--f-display);
  color: var(--ink); text-decoration: none; letter-spacing: -.01em; flex: none; }
.brand i { font-style: normal; color: var(--coral); }   /* a mark, not text (D-05) */
.head .brand:hover, .head .brand:focus-visible { color: var(--teal); }
/* the home hero: the address line stands alone until the first scroll
   (the last live version's behaviour, Jon's call in D-03) */
.tbar-lead { display: none; position: absolute; left: 0; right: 0; text-align: center; margin: 0;
  font: 700 clamp(13px, 1.4vw, 18px)/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--mist); }
.tbar-lead span { color: var(--coral-tint); }
body.on-dark .head .shell > :not(.head-cta) { transition: opacity .35s ease; }
html.js body.on-dark.hero-lead .head:not([data-solid]) .shell { background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
html.js body.on-dark.hero-lead .head:not([data-solid]) .shell > :not(.tbar-lead) { opacity: 0; pointer-events: none; }
html.js body.on-dark.hero-lead .head:not([data-solid]) .tbar-lead { display: block; opacity: 1; }

/* the links: the underline grows in from the left over 400ms (B-50) */
.nav { display: flex; flex: none; gap: var(--s-4); align-items: center; margin-left: auto; }
.nav a, .nav-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0; border: 0; white-space: nowrap;
  font: 500 15px/1 var(--f-body); color: var(--ink-2); text-decoration: none; cursor: pointer;
  background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 calc(50% + 12px) / 0 1.5px;
  transition: background-size 400ms var(--ease-out), color var(--t-colour) ease; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"],
.nav-more:hover, .nav-more:focus-visible, .nav-more.is-current, .nav-more[aria-expanded="true"] { color: var(--ink); background-size: 100% 1.5px; }
/* Participate: one link that opens a two-item list on hover, focus and
   tap (the tap is a nine-line script in the chrome, mkpage.py) */
.nav-group { position: relative; display: flex; }
.nav-more { gap: 7px; }
.nav-more::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--t-surface) ease, margin var(--t-surface) ease; }
.nav-group:hover .nav-more::after, .nav-more[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
.nav-list { position: absolute; top: 100%; left: -10px; min-width: 176px; display: grid; gap: 2px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 36px -20px rgba(15,34,41,.5);
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity var(--t-surface) ease, transform var(--t-surface) var(--ease-out), visibility 0s linear var(--t-surface); }
.nav-group:hover .nav-list, .nav-group:focus-within .nav-list, .nav-more[aria-expanded="true"] + .nav-list {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.nav-group.is-shut .nav-list { opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none; }
.nav-group.is-shut .nav-more::after { transform: rotate(45deg); margin-top: -3px; }
.nav .nav-list a { min-height: 40px; padding: 0 12px; border-radius: 9px; background: none; }
.nav .nav-list a:hover, .nav .nav-list a:focus-visible, .nav .nav-list a[aria-current="page"] { background: var(--tint); color: var(--ink); }

/* the announcement: one line, rotating every 10s. inter.js flips data-on/data-off. */
.head [data-ticker] { display: grid; overflow: hidden; flex: 1 1 auto; min-width: 0; margin: 0 0 0 var(--s-2);
  font: 400 13px/1.3 var(--f-body); color: var(--muted); }
.head [data-ticker] .tick { grid-area: 1 / 1; display: block; padding: 13px 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px);
  text-decoration: none; color: inherit; transition: opacity 300ms ease, transform 300ms var(--ease-out), color var(--t-colour) ease; }
.head [data-ticker] .tick[data-on] { opacity: 1; transform: none; }
.head [data-ticker] .tick[data-off] { opacity: 0; transform: translateY(-8px); }
.head [data-ticker] .tick:hover { color: var(--ink); }
.head [data-ticker] .tick b { font-weight: 500; color: var(--ink); }
.head [data-ticker] .tick i { display: inline-block; vertical-align: 1px; font: 500 11px/1 var(--f-mono); font-style: normal;
  background: var(--teal-soft); color: var(--ink); padding: 4px 7px; border-radius: 999px; margin-right: 8px; letter-spacing: .04em; }
html:not(.js) .head [data-ticker] .tick:not([data-on]) { display: none; }

/* the two controls: 44px tall, pill-shaped like the bar */
.head-cta { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; background: none; color: var(--ink);
  border: 0; border-radius: 8px; cursor: pointer; font: 500 14px/1 var(--f-ui);
  transition: color var(--t-colour) ease; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle:hover, .nav-toggle:focus-visible { background: none; color: var(--coral); }
.nav-toggle[aria-expanded="true"] { background: none; color: var(--ink); }
@media (max-width: 1279px) { .head [data-ticker] { display: none; } }
@media (max-width: 1023px) {
  .nav, .head [data-ticker] { display: none; }
  .head .shell, .head[data-solid] .shell { gap: var(--s-2); padding-right: 6px; border-width: 1.5px;
    box-shadow: 0 3px 0 rgba(15,34,41,.24), 0 12px 24px -16px rgba(15,34,41,.7); }
  .head .head-cta.btn--coral { margin-left: auto; border: 2px solid var(--teal); border-radius: 5px;
    background-clip: padding-box; }
  .head .head-cta.btn--coral:hover, .head .head-cta.btn--coral:focus-visible { border-color: var(--coral); }
  .head .head-cta::before { inset: 3px; border-radius: 2px; }
  .nav-toggle { display: inline-flex; }
  .head .shell > .nav-toggle:nth-child(2), .head .shell > .nav-toggle:only-of-type { margin-left: auto; }
}

/* The Threshold: a right-opening door, with a narrow strip of the living
   page retained as orientation. The shell stays mounted for a real close. */
.drawer-layer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.drawer-backdrop { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(5,18,22,.58);
  opacity: 0; cursor: pointer; transition: opacity 380ms ease, visibility 0s linear 380ms; }
.drawer { position: absolute; inset: 0 0 0 auto; width: min(430px, calc(100vw - clamp(28px, 10vw, 48px)));
  display: flex; flex-direction: column; min-width: 272px; max-width: 100%; padding: max(18px, env(safe-area-inset-top))
  clamp(20px, 6vw, 34px) max(20px, env(safe-area-inset-bottom)); overflow: hidden;
  background: var(--deep); color: var(--mist); box-shadow: -24px 0 60px -30px rgba(0,0,0,.85);
  transform: translate3d(102%,0,0); transition: transform 400ms cubic-bezier(.22,.78,.22,1); }
.drawer::before { content: ""; position: absolute; inset: 0; background: var(--grain); pointer-events: none; opacity: .62; }
.drawer-layer[data-open], .drawer-layer[data-closing] { visibility: visible; }
.drawer-layer[data-open] { pointer-events: auto; }
.drawer-layer[data-open] .drawer { transform: translate3d(0,0,0); }
.drawer-layer[data-open] .drawer-backdrop { opacity: 1; transition-delay: 0s; }
.drawer-layer[data-closing] .drawer-backdrop { opacity: 0; }
.drawer > * { position: relative; }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding-bottom: clamp(20px, 5vh, 40px); border-bottom: 1px solid rgba(217,221,214,.18); }
.drawer-brand { min-width: 0; padding-inline-start: 2px; }
.drawer-mark { font: 600 clamp(34px, 10vw, 46px)/.9 var(--f-display); letter-spacing: -.025em; color: #fff; }
.drawer-mark i { color: var(--coral); font-style: normal; }
.drawer-brand > p:last-child { max-width: 28ch; margin-top: 12px; color: var(--mist-dim); font: 400 12px/1.45 var(--f-mono); letter-spacing: .02em; }
.drawer .close { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: none;
  border: 1px solid rgba(217,221,214,.35); color: var(--mist); border-radius: 50%; cursor: pointer; font: 300 30px/1 var(--f-body);
  transition: border-color var(--t-colour) ease, color var(--t-colour) ease, transform 200ms ease; }
.drawer .close:hover, .drawer .close:focus-visible { border-color: var(--mist); color: #fff; transform: rotate(6deg); }
.drawer nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none;
  padding: clamp(18px, 4vh, 32px) 8px var(--s-4) 2px; }
.drawer nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
.drawer-group + .drawer-group { margin-top: clamp(18px, 3vh, 28px); }
.drawer-group { min-width: 0; }
.drawer nav a { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; min-height: 44px;
  padding: 5px 8px 5px 24px; overflow-wrap: anywhere;
  color: var(--mist); text-decoration: none; font: 500 clamp(22px, 6.5vw, 29px)/1.08 var(--f-display);
  transition: color var(--t-colour) ease, transform 200ms cubic-bezier(.22,.78,.22,1); }
.drawer nav a::before { content: ""; position: absolute; left: 5px; top: 50%; width: 7px; height: 7px;
  border: 1.5px solid currentColor; opacity: .36; transform: translateY(-50%) rotate(45deg); }
.drawer nav a:hover, .drawer nav a:focus-visible { color: #fff; transform: translateX(5px); }
.drawer nav a[aria-current="page"] { color: #fff; }
.drawer nav a[aria-current="page"]::before { width: 10px; height: 10px; border: 0; opacity: 1; transform: translateY(-50%);
  background: linear-gradient(var(--coral),var(--coral)) center/2px 100% no-repeat,
              linear-gradient(var(--coral),var(--coral)) center/100% 2px no-repeat; }
.drawer nav a small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--f-body); color: var(--mist-dim); }
.drawer nav .ddoor { margin: 0 0 4px; font: 500 11px/1 var(--f-mono);
  padding-inline: 6px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-lt); }
.drawer nav a.sub { font-size: clamp(18px, 5vw, 21px); color: var(--mist-dim); }
.drawer .drawer-cta { flex: none; padding-top: var(--s-4); border-top: 1px solid rgba(217,221,214,.18); }
.drawer .drawer-cta .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; }
html.drawer-open, html.drawer-open body { overflow: hidden; overscroll-behavior: none; }
body > :not(.drawer-layer):not(script) { transition: transform 400ms cubic-bezier(.22,.78,.22,1), filter 380ms ease; }
html.drawer-open body > :not(.drawer-layer):not(script) { transform: translate3d(-12px,0,0); filter: brightness(.72); }
html:not(.js) .nav-toggle { display: none; }
@media (max-width: 1023px) {
  html:not(.js) .drawer-layer { position: relative; inset: auto; height: auto; visibility: visible; pointer-events: auto; }
  html:not(.js) .drawer-backdrop { display: none; }
  html:not(.js) .drawer { position: relative; inset: auto; width: 100%; min-width: 0; transform: none; box-shadow: none; }
  html:not(.js) .drawer .close { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop { transition-duration: 1ms; }
  .drawer { transform: none; opacity: 0; }
  .drawer-layer[data-open] .drawer { opacity: 1; }
  .drawer nav a, .drawer .close { transition: none; }
  body > :not(.drawer-layer):not(script) { transition: none; }
  html.drawer-open body > :not(.drawer-layer):not(script) { transform: none; }
}
@media (forced-colors: active) {
  .drawer, .drawer-backdrop { forced-color-adjust: auto; border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .drawer nav a, .drawer-mark, .drawer .close { color: LinkText; }
  .drawer nav a[aria-current="page"] { outline: 2px solid Highlight; }
  .drawer nav a[aria-current="page"]::before { background: Highlight; }
}
@media (min-width: 1024px) { .drawer-layer { display: none; } }

/* the footer: next-step band, four columns, wordmark, fine print.
   Every link is a 44px row (B-20) with the same growing underline. */
.foot { background: var(--deep); color: var(--mist); position: relative; overflow: hidden; }
.foot::before { content: ""; position: absolute; inset: 0; background: var(--grain); pointer-events: none; opacity: .6; }
.foot > * { position: relative; }
.foot-next { padding: var(--s-9) 0; border-bottom: 1px solid rgba(217,221,214,.14); position: relative; }
.foot-next .shell { display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center; }
.foot-next .title { color: #fff; max-width: 14ch; }
.foot-next .title em { color: var(--teal-lt); }
.foot-next p { color: var(--mist-dim); max-width: 40ch; margin-top: var(--s-3); }
@media (max-width: 700px) {
  .foot-next .shell { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .foot-next .title, .foot-next p { width: 100%; max-width: none; }
  .foot-next .title { font-size: clamp(40px, 10vw, 52px); }
  .foot-next .btn { width: 100%; }
}
.foot-cols { padding: var(--s-8) 0 var(--s-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.foot-lane { display: contents; }
/* Two deliberate lanes replace browser-balanced columns on narrow screens.
   Each lane shares a top and bottom edge; the middle gap absorbs the one-link
   difference between them without disturbing the 44px link rows. */
@media (max-width: 820px) {
  .foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
  .foot-lane { display: flex; min-width: 0; flex-direction: column; }
  .foot-lane > div + div { margin-top: auto; padding-top: var(--s-6); }
}
.foot-h { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-lt); margin-bottom: var(--s-2); }
.foot-cols nav { display: grid; justify-items: start; }
.foot-cols nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--mist); text-decoration: none;
  font-size: 15px; line-height: 1.2; padding-block: 13px;
  background: linear-gradient(var(--teal-lt), var(--teal-lt)) no-repeat 0 calc(100% - 10px) / 0 1px;
  transition: background-size 400ms var(--ease-out), color var(--t-colour) ease; }
.foot-cols nav a:hover, .foot-cols nav a:focus-visible { color: #fff; background-size: 100% 1px; }
.foot-mark { font: 600 clamp(56px, 8vw, 112px)/.85 var(--f-display); letter-spacing: -.04em; color: #fff;
  padding: var(--s-4) 0 0; text-align: center; user-select: none; }
.foot-mark i { font-style: normal; color: var(--coral); }
/* The rotating double helix from the first site, back under the wordmark. Drawn by inter.js (data-ribbon="braid"). */
.braid { display: block; width: 100%; height: 64px; }
.foot .braid--footer { height: 72px; opacity: .7; margin-top: var(--s-3); }

.foot-feedback{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;padding:0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.foot-feedback:hover{text-decoration:underline;text-underline-offset:4px}.foot-feedback:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.feedback-layer[hidden]{display:none}.feedback-layer{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px}.feedback-backdrop{position:absolute;inset:0;background:rgba(7,24,28,.72);backdrop-filter:blur(5px)}
.feedback-dialog{position:relative;width:min(620px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:var(--paper,#f5f0e5);color:var(--ink,#102b2f);padding:clamp(24px,5vw,48px);box-shadow:0 24px 80px rgba(0,0,0,.3)}
.feedback-dialog h2{font-size:clamp(34px,6vw,54px);line-height:1;margin:.15em 48px .3em 0}.feedback-intro{max-width:48ch;line-height:1.55}.feedback-close{position:absolute;right:18px;top:18px;width:44px;height:44px;border:1px solid currentColor;background:transparent;color:inherit;font-size:28px;cursor:pointer}
.feedback-dialog fieldset{border:0;padding:0;margin:28px 0 20px}.feedback-dialog legend,.feedback-message{font-weight:600}.feedback-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.feedback-kinds label{position:relative}.feedback-kinds input{position:absolute;opacity:0}.feedback-kinds span{display:flex;align-items:center;min-height:52px;padding:10px 14px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);cursor:pointer}.feedback-kinds input:checked+span{background:var(--ink,#102b2f);color:var(--paper,#f5f0e5)}.feedback-kinds input:focus-visible+span{outline:3px solid var(--coral,#c6533d);outline-offset:2px}
.feedback-message{display:grid;gap:9px}.feedback-message textarea,.feedback-contact-fields input{width:100%;border:1px solid color-mix(in srgb,currentColor 45%,transparent);background:#fff;padding:12px;font:inherit;color:inherit}.feedback-contact{display:flex;gap:10px;align-items:center;min-height:44px;margin-top:12px}.feedback-contact input{width:20px;height:20px}.feedback-contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 14px}.feedback-contact-fields label{display:grid;gap:6px}.feedback-source,.feedback-status{font-size:13px;line-height:1.5}.feedback-status{min-height:20px;font-weight:600}.feedback-send{margin-top:8px}.feedback-open{overflow:hidden}
@media(max-width:600px){.feedback-layer{align-items:end;padding:0}.feedback-dialog{width:100%;max-height:92vh;padding:28px 20px;border-radius:18px 18px 0 0}.feedback-kinds,.feedback-contact-fields{grid-template-columns:1fr}.feedback-dialog h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.feedback-layer *{scroll-behavior:auto!important}}
.foot .fine { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) 0 var(--s-5); font: 400 13px/1.4 var(--f-body); color: var(--mist-dim); }
.foot .fine a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mist); text-decoration-color: rgba(217,221,214,.4); }
.foot .fine a:hover, .foot .fine a:focus-visible { color: #fff; }
/* Social: icons only, no words, centred under the wordmark. Each link carries
   an aria-label, so a screen reader still hears the platform name. */
.foot-social { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2);
  padding-top: var(--s-3); }
.foot-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--mist);
  border: 1px solid rgba(217,221,214,.22); text-decoration: none;
  transition: color var(--t-colour) ease, background-color var(--t-colour) ease, border-color var(--t-colour) ease; }
.foot-social a:hover, .foot-social a:focus-visible { color: var(--deep); background: var(--mist); border-color: var(--mist); }
.foot-social svg { width: 19px; height: 19px; display: block; }
/* six marks stay on one line on the narrowest phone (272px inside the gutter) */
@media (max-width: 400px) { .foot-social { gap: var(--s-1); } .foot-social a { width: 40px; } }

.shell { max-width: var(--col); margin: 0 auto; padding: 0 var(--gutter); }
.shell--wide { max-width: 1440px; }

/* --------------------------------------------------------------- screens
   One idea per screen. min-height 70vh and it grows. Never fixed, never
   snapped. Three grounds, and screens meet through a gradient. */
.scr { position: relative; min-height: 70vh; padding: var(--screen-pad) 0;
  display: grid; align-content: center; background: var(--paper); }
.scr--tint { background: var(--tint); }
.scr--chalk { background: var(--chalk); }
.scr--deep { background: var(--deep); color: var(--mist); }
.scr--deep::before { content: ""; position: absolute; inset: 0; background: var(--grain); pointer-events: none; opacity: .55; }
.scr--deep > * { position: relative; }
.scr--deep .lead, .scr--deep .body { color: var(--mist); }
.scr--deep .label { color: var(--mist-dim); }
.scr--deep .display em, .scr--deep .title em, .scr--deep .h2 em { color: var(--teal-lt); }
.scr--deep a { color: var(--teal-lt); }
.scr--deep a:hover { color: #fff; }
.scr--deep h1, .scr--deep h2, .scr--deep h3 { color: #fff; }
.scr--short { min-height: 0; padding: var(--s-8) 0; }
/* the phone: screens meet closer, so the padding between two screens
   never reads as a dead band (rule 6, the-summit `problem`); heroes and
   short screens set their own padding and are untouched */
@media (max-width: 900px) { .scr { --screen-pad: clamp(48px, 7vh, 64px); } }
/* a screen that reads at a measure: the guide, the FAQ */
.scr--measure .stack, .scr--measure .dir, .scr--measure .more, .scr--measure .after { max-width: var(--measure); }
.after { margin-top: var(--s-5); }
/* blend: the ground fades into the next one over 160px */
.scr--blend-deep::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--deep)); pointer-events: none; z-index: 1; }
.scr--blend-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--paper)); pointer-events: none; z-index: 1; }
.scr--blend-tint::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--tint)); pointer-events: none; z-index: 1; }
/* the pillar colour lives in the kicker bar and the card edge, never in
   a screen edge or in text */
[data-pillar="sovereignty"] { --pc: var(--plum); --pc-lt: var(--plum-lt); }
[data-pillar="belonging"]   { --pc: var(--clay); --pc-lt: var(--clay-lt); }
[data-pillar="vitality"]    { --pc: var(--moss); --pc-lt: var(--moss-lt); }
[data-pillar="regeneration"]{ --pc: var(--lake); --pc-lt: var(--lake-lt); }
[data-pillar="prosperity"]  { --pc: var(--ochre); --pc-lt: var(--ochre-lt); }
/* a pillar colour that may carry a big headline on paper */
[data-pillar="sovereignty"] { --pc-text: #5E3F7A; } [data-pillar="belonging"] { --pc-text: #9E4A1E; }
[data-pillar="vitality"] { --pc-text: #22705A; } [data-pillar="regeneration"] { --pc-text: #256486; } [data-pillar="prosperity"] { --pc-text: #7A5410; }

/* the hero of a sub-page (F2, wave 2). Titan's hero card: a kicker that
   carries the date, a serif headline, one lead, one text-bar action, in
   seven columns; the picture takes the five on the right and stands as
   tall as the words. On the phone the Titan order holds and the picture
   bleeds under the words to the screen's bottom edge, so there is no
   dead band. Type is the site's ladder (--t-display, --t-lead): no
   second scale here. Reference: titan-intake-desktop-00,
   titan-intake-phone-00. Statement heroes (speakers, contact) centre
   the words and set the picture under them: zaro-desktop-00. */
.scr.scr--hero { min-height: min(88svh, 900px); padding-top: var(--s-6); padding-bottom: var(--s-7); overflow: hidden; }
.scr.scr--hero .shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto;
  column-gap: clamp(32px, 6vw, 96px); row-gap: 0; align-items: center; max-width: var(--col); }
.scr.scr--hero .shell > .stack { grid-column: 1; grid-row: 1; display: grid; gap: var(--s-5); align-self: center; }
.scr.scr--hero .shell > .hero-field, .scr.scr--hero .shell > .hero-panel, .scr.scr--hero .shell > .dir { grid-column: 2; grid-row: 1; align-self: stretch; }
.scr.scr--hero .shell > .hero-field { width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  min-height: clamp(360px, 56vh, 560px); pointer-events: none; }
.scr.scr--hero .shell > .dir { margin-top: 0; align-self: center; }
/* a directory in the hero column (faq, what-is) stands tall: roomier rows,
   the arrow drawn by CSS so it adds no words to the screen */
.scr.scr--hero .shell > .dir > a { padding-block: var(--s-5); }
.scr.scr--hero .shell > .dir > a::before { content: "→"; grid-column: 3; grid-row: 1; justify-self: end;
  font-family: var(--f-body); color: var(--teal); transition: transform 180ms var(--ease-out); }
.scr.scr--hero .shell > .dir > a:hover::before, .scr.scr--hero .shell > .dir > a:focus-visible::before { transform: translate(3px, -3px); }
.scr.scr--hero .label { letter-spacing: .12em; }
.scr.scr--hero .display, .scr.scr--hero h1.display, .st-statement .display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.015em;
  max-width: none; text-wrap: balance; }
.scr.scr--hero .lead, .st-statement .lead { font-size: var(--t-lead); line-height: 1.5; max-width: 44ch; }
.scr.scr--hero .actions { margin-top: var(--s-2); gap: var(--s-6); }
/* the hero's action is the text-bar link, thumb-sized on every ground */
.scr.scr--hero .deeper { display: inline-flex; align-items: center; min-height: 44px; }
/* two tones in one headline: the second thought dims */
.scr.scr--hero .display .dim { color: var(--muted); font-style: normal; font-weight: inherit; }
.scr--deep.scr--hero .display .dim { color: var(--mist-dim); }
/* the guide's anchors as mono chips under the lead (what-is) */
.scr.scr--hero .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.scr.scr--hero .chips a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; background: var(--chalk);
  transition: border-color var(--t-colour) ease, opacity var(--t-colour) ease; }
.scr.scr--hero .chips a .k { color: var(--teal); font-weight: 600; }
.scr.scr--hero .chips a:hover, .scr.scr--hero .chips a:focus-visible { border-color: var(--ink); }
.scr.scr--hero .chips:hover a:not(:hover) { opacity: .6; }
/* a typographic picture where a page may carry no canvas (what-is): the
   sentence the copy draws, framed on tint */
.scr.scr--hero .hero-panel { display: grid; align-content: center; gap: var(--s-4); padding: var(--s-7) var(--s-6);
  min-height: clamp(360px, 56vh, 560px); border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.scr.scr--hero .hero-panel .label { margin: 0; }
.scr.scr--hero .hero-panel .hp-t { font: 500 clamp(26px, 2.4vw, 36px)/1.15 var(--f-display); color: var(--ink); margin: 0; text-wrap: pretty; }
.scr.scr--hero .hero-panel .hp-t em { color: var(--teal); font-style: italic; }
/* statement heroes: words centred, the picture under them */
.scr.scr--hero.scr--hero--statement .shell { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--s-6); }
.scr.scr--hero.scr--hero--statement .shell > .stack { justify-items: center; }
.scr.scr--hero.scr--hero--statement .display { max-width: 18ch; }
.scr.scr--hero.scr--hero--statement .lead { margin-inline: auto; }
.scr.scr--hero.scr--hero--statement .actions { justify-content: center; }
.scr.scr--hero.scr--hero--statement .shell > .hero-field { grid-column: 1; grid-row: 2; width: min(100%, 720px); height: clamp(220px, 32vh, 320px); min-height: 0; }
@media (max-width: 1100px) {
  .scr.scr--hero .shell { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 900px) {
  /* the phone: kicker, headline, lead, action, then the picture bleeding
     to the bottom edge; the whole hero is about one screen */
  .scr.scr--hero { min-height: 0; padding-top: var(--s-5); padding-bottom: 0; }
  .scr.scr--hero .shell, .scr.scr--hero.scr--hero--statement .shell { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .scr.scr--hero .shell > .stack { grid-row: auto; min-width: 0; }
  .scr.scr--hero .shell > .hero-field, .scr.scr--hero .shell > .hero-panel, .scr.scr--hero .shell > .dir,
  .scr.scr--hero.scr--hero--statement .shell > .hero-field { grid-column: 1; grid-row: auto; align-self: auto; }
  /* the canvas gets an explicit width: its bitmap is sized from its box,
     so an auto width would feed back on itself and widen the page */
  .scr.scr--hero .shell > .hero-field, .scr.scr--hero.scr--hero--statement .shell > .hero-field { width: calc(100% + var(--gutter) * 2); height: clamp(260px, 42svh, 420px); min-height: 0;
    margin: var(--s-6) calc(var(--gutter) * -1) 0; justify-self: start; }
  .scr.scr--hero .shell > .hero-panel { margin: var(--s-6) calc(var(--gutter) * -1) 0; min-height: clamp(260px, 42svh, 420px); border-radius: 0; border-inline: 0; }
  .scr.scr--hero .shell > .dir { margin: var(--s-6) 0 var(--s-7); }
  .scr.scr--hero .display, .scr.scr--hero h1.display { font-size: clamp(40px, 11vw, 48px); }
  .scr.scr--hero .lead { font-size: 17px; }
}
/* textures: the old ambient drawings, resting in a screen's empty corner */
.scr > .tex { position: absolute; z-index: 0; pointer-events: none; }
.scr > .tex ~ * { position: relative; z-index: 1; }
.tex--claim { left: 0; right: 0; top: 0; width: 100%; height: 100%; }
.tex--pillars { left: 2%; right: auto; top: auto; bottom: 4%; width: 30%; height: 46%; opacity: .8; }
.tex--inside { right: 4%; bottom: 6%; width: 30%; height: 50%; }
.tex--forward { right: 6%; top: 8%; width: 24%; height: 40%; }
@media (max-width: 1023px) { .scr > .tex { display: none; } }

/* vertical rhythm inside a screen */
.stack { display: grid; gap: var(--s-5); }
.stack > .label + * { margin-top: calc(var(--s-3) * -1); }
.stack > .display + .lead, .stack > .title + .lead, .stack > .title + .body { margin-top: 0; }
.actions { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin-top: var(--s-2); }
/* the kicker: Titan's "// KICKER", drawn once here, never typed in the
   HTML. On a pillar screen the pillar's bar replaces the slashes. */
.label::before { content: "// "; }
[data-pillar] .label::before { content: ""; display: inline-block; width: 1.6em; height: 2px; margin: 0 .7em 0 0;
  vertical-align: .34em; background: var(--pc); }
.label + .title, .label + .display { margin-top: var(--s-3); }
.stack > .label + .title, .stack > .label + .display { margin-top: calc(var(--s-3) * -1); }

/* -------------------------------------------------------- section types */
/* 1 Statement: one big line, optional sub. */
.st-statement .display { max-width: 18ch; }
.st-statement--center { text-align: center; justify-items: center; }
.st-statement--center .display, .st-statement--center .lead { margin-inline: auto; }
.st-statement--center .actions { justify-content: center; }

/* 2 Split: headline left, short text and button right. */
.st-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-8); align-items: end; }
.st-split--top { align-items: start; }
.st-split > .side { display: grid; gap: var(--s-5); align-content: end; }
@media (max-width: 900px) { .st-split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* 3 Three cards: one headline, three tiny labelled cards. */
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.st-cards--4 { grid-template-columns: repeat(4, 1fr); }
.st-cards--2 { grid-template-columns: repeat(2, 1fr); }
.st-cards--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .st-cards, .st-cards--4, .st-cards--5 { grid-template-columns: 1fr 1fr; } }
/* on the phone: prose cards stack; short tiles (four or five in a row)
   go two up, and an odd last tile takes the whole row so none is alone */
@media (max-width: 560px) {
  .st-cards, .st-cards--2 { grid-template-columns: 1fr; }
  .st-cards--4, .st-cards--5 { grid-template-columns: 1fr 1fr; }
  .st-cards--4 > :last-child:nth-child(odd), .st-cards--5 > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* 4 Directory: a list with thin rules. Rows wear their pillar colour. */
.dir { display: grid; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.scr--deep .dir { border-top-color: rgba(217,221,214,.18); }
.dir > a, .dir > .row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  position: relative; transition: color var(--t-colour) ease, padding-left 200ms var(--ease-out); }
.scr--deep .dir > a, .scr--deep .dir > .row { border-bottom-color: rgba(217,221,214,.18); }
.dir > a::after, .dir > .row::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--pc, var(--teal)); transform: scaleY(0); transform-origin: top; transition: transform var(--t-surface) var(--ease-out); }
.dir > a:hover, .dir > a:focus-visible { color: var(--pc, var(--teal)); padding-left: var(--s-5); }
.scr--deep .dir > a:hover { color: var(--pc-lt, var(--teal-lt)); }
.dir > a:hover::after, .dir > a:focus-visible::after { transform: scaleY(1); }
/* Tempo: the row under the pointer stands, its siblings dim to 60 % */
.dir > a { transition: color var(--t-colour) ease, padding-left 200ms var(--ease-out), opacity var(--t-surface) ease; }
.dir:has(> a:hover) > a:not(:hover) { opacity: .6; }
.dir .k { min-width: 3.2em; }
.dir .t { font: 500 var(--t-heading)/1.15 var(--f-display); font-weight: 600; }
.dir .t small { display: block; font: 400 var(--t-small)/1.45 var(--f-body); color: var(--ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.scr--deep .dir .t small { color: var(--mist-dim); }
.dir .r { font: 400 var(--t-small)/1.4 var(--f-body); color: var(--muted); text-align: right; white-space: nowrap; }
.scr--deep .dir .r { color: var(--mist-dim); }
.dir .arw { font-family: var(--f-body); transition: transform 180ms var(--ease-out); display: inline-block; color: var(--teal); }
.dir > a:hover .arw { transform: translate(3px, -3px); }
.scr--deep .dir .arw { color: var(--teal-lt); }
@media (max-width: 560px) { .dir > a, .dir > .row { grid-template-columns: auto 1fr auto; } .dir .r { white-space: normal; } }
/* .dir--addr (contact's "or email" rows): a declared variant of the directory, not
   page drift. The row's title is an address, so it is set in the body face at the
   body size and wraps anywhere, instead of the display face at 28px. */
.dir.addr .t { font: 500 15px/1.4 var(--f-body); overflow-wrap: anywhere; }
.dir.addr .t small { margin-top: 2px; }
.addr-more .layer { margin-left: 0; padding-left: 0; border-left: 0; }
.addr-more .layer .dir { margin-top: 0; border-top: 0; }
/* two columns of rows, read down the left column first (the summit's six
   rooms): one list on a phone, two on anything wider */
@media (min-width: 901px) {
  .dir--2 { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: var(--s-8); }
  .dir--2 > a, .dir--2 > .row { align-content: start; }
  /* a .shell is a grid item of .scr with auto margins, so it shrinks to
     its content; the two-column directory needs the whole column */
  .scr > .shell:has(> .dir--2) { width: 100%; }
}

/* 5 Picture: one film, map, drawing or face; caption beside it. */
.st-picture { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.st-picture--wide { grid-template-columns: 1.4fr 1fr; }
.st-picture > .side { display: grid; gap: var(--s-5); }
/* Overmind's repeated frame, Zaro's zigzag: --flip puts the picture on
   the left on desktop. On the phone the words always come first. */
.st-picture--flip > .frame { order: -1; }
@media (max-width: 900px) { .st-picture, .st-picture--wide { grid-template-columns: 1fr; gap: var(--s-6); }
  .st-picture > .frame { order: 2; } }
.frame { border: 1px solid var(--line); background: var(--chalk); overflow: hidden; border-radius: 2px; position: relative; }
.frame > svg { padding: var(--card-pad); width: 100%; height: auto; }
/* the world map is a dot field, so it sits on the deep ground, never on paper
   (the reference brief: dots only on dark). The box takes its height from its
   width so the map fills it, instead of a fixed 420 px that left it stranded. */
.frame--map { background: var(--deep); border-color: rgba(217,221,214,.22); }
.frame > .worldmap { padding: var(--s-2); aspect-ratio: 1.55 / 1; }
.frame > .worldmap > canvas { display: block; }
@media (max-width: 700px) { .frame > .worldmap { aspect-ratio: 1.6 / 1; } }
/* the one dark card mid-page: a deep frame that carries dots and, until
   a duotone photo lands, its index in the serif. site.js draws the dots
   for .card--dots; the frame's own children stay above them. */
.scr--deep .frame, .frame--deep { border-color: rgba(217,221,214,.2); background: var(--deep-2); }
.frame--deep { min-height: 0; display: grid; align-content: end; color: var(--mist); }
.frame--deep:not(:has(svg, img)) { aspect-ratio: 4 / 3; }
.frame--deep > .label { padding: var(--card-pad); }
.frame--deep > :not(canvas) { position: relative; z-index: 1; }
.frame--deep::after { content: attr(data-n); position: absolute; right: -.04em; bottom: -.2em; z-index: 1;
  font: 600 clamp(140px, 18vw, 260px)/1 var(--f-display); letter-spacing: -.04em; color: var(--pc-lt, var(--teal-lt)); opacity: .18; pointer-events: none; }
.frame--deep .label { color: var(--mist-dim); }
.frame--deep img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* 6 Quote: one person's words, large. */
.quote { display: grid; gap: var(--s-4); max-width: 30em; }
.quote p { font: 500 clamp(24px, 3vw, 40px)/1.2 var(--f-display); font-style: italic; letter-spacing: -.01em; }
.quote cite { font: 500 13px/1.4 var(--f-mono); font-style: normal; color: var(--muted); letter-spacing: .04em; }
.scr--deep .quote cite { color: var(--mist-dim); }

/* 7 Form. One system for every form on the site (F4, wave 2).
   Top labels; a word or two of help lives in the label's .opt, a
   sentence goes in <small> under the field. 48px fields on paper inside
   a chalk card, a 2px teal ring on focus. Errors in clay under the
   field. The "quick check" line sits above the button with the
   Turnstile box under it; the status line sits under the button, where
   the eye lands after pressing. Ticks and radios: the whole label is
   the target, 44px tall on a phone. Nothing here may change an id, a
   hook or the order of the checkboxes (parts/BUILD-BRIEF.md). */
.form { display: grid; gap: var(--s-5); max-width: 36em; min-width: 0; }
.form--card { background: var(--chalk); border: 1px solid var(--line); border-radius: 8px; padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 0 rgba(18,38,43,.04), 0 24px 48px -32px rgba(18,38,43,.25); }
.form .lead-in { display: grid; gap: 4px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.form .lead-in b { font: 500 var(--t-heading)/1.15 var(--f-ui); }
.form .lead-in span { font-size: 14px; color: var(--muted); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .form legend { font: 500 13.5px/1.4 var(--f-body); color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.field > label .opt { font-weight: 400; color: var(--muted); font-size: 12.5px; text-align: right; }
.field input, .field textarea, .field select { font: 400 16px/1.4 var(--f-body); color: var(--ink);
  background: var(--chalk); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; width: 100%; min-width: 0;
  min-height: 48px; box-shadow: 0 1px 2px rgba(18,38,43,.04);
  transition: border-color var(--t-colour) ease, box-shadow var(--t-surface) ease; }
.form--card .field input, .form--card .field textarea, .form--card .field select { background: var(--paper); box-shadow: none; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,115,131,.22); background: var(--chalk); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2333494F' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.field small, .help, .field .count { font: 400 13px/1.45 var(--f-body); color: var(--muted); }
.field .count { text-align: right; font-family: var(--f-mono); font-size: 12px; }
.field[data-error] input, .field[data-error] textarea, .field[data-error] select { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(201,100,46,.18); }
.field .error, .field[data-error] small { color: #9E4A1E; }
/* the art upload: a drop area, the native input inside it (the one file input on the site) */
.field input[type="file"] { padding: 22px 16px; border: 1.5px dashed var(--line); background: var(--paper); text-align: center;
  cursor: pointer; font-size: 14px; color: var(--ink-2); min-height: 96px; display: grid; place-items: center; }
.field input[type="file"]:hover { border-color: var(--teal); background: var(--teal-soft); }
.field input[type="file"]::file-selector-button { font: 600 14px/1 var(--f-ui); padding: 10px 16px; margin: 0 12px 0 0;
  border: 1.5px solid var(--ink); border-radius: 2px; background: var(--chalk); color: var(--ink); cursor: pointer; }
/* ticks and radios: the label is the target */
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; min-height: 44px; padding: 4px 0;
  font-size: 14.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--muted); border-radius: 5px;
  background: var(--chalk); cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-colour) ease, background var(--t-colour) ease; }
.check input[type="radio"] { border-radius: 50%; }
.check:hover input { border-color: var(--teal); }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,115,131,.25); }
.check input:checked { background: var(--teal); border-color: var(--teal); }
.check input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.check input[type="radio"]:checked { box-shadow: inset 0 0 0 4px var(--chalk); }
.check b { color: var(--ink); font-weight: 500; }
/* a gate: the field after a .check--gate shows only once the box is ticked */
.check--gate:has(input:not(:checked)) + .field { display: none; }
/* a row of choices: radios as chips, two columns at every width */
.choices { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); min-width: 0; }
.choices legend { padding: 0; margin-bottom: var(--s-2); }
.choices .list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.choices .check { grid-template-columns: 20px 1fr; align-items: center; min-height: 44px; padding: 8px 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; transition: border-color var(--t-colour) ease, background var(--t-colour) ease; font-size: 14px; color: var(--ink); }
.choices .check:hover { border-color: var(--muted); }
.choices .check:has(:checked) { border-color: var(--teal); background: var(--teal-soft); }
.choices .check input { width: 18px; height: 18px; }
/* an odd last chip ("Something else") takes the whole row rather than sitting alone */
.choices .list .check:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* rows */
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
/* the quick check, the button, and the line under it */
.verify { display: grid; gap: var(--s-2); }
/* An empty check box is hidden so no grey gap sits on the page before the
   widget arrives. It must stop being hidden the moment a script is about to
   draw into it: Cloudflare cannot run a challenge inside display:none, and a
   widget rendered there hangs with error 300030 and never calls back. Each
   form script sets data-live on this block immediately before it renders. */
.verify:not([data-live]) [data-public-form-turnstile]:empty,
.verify:not([data-live]) [data-email-signup-turnstile]:empty { display: none; }
/* the block shows once the check has rendered, or once it has failed and says so */
.verify:not([data-live]):has(> [data-public-form-turnstile]:empty):not([data-failed]),
.verify:not([data-live]):has(> [data-email-signup-turnstile]:empty):not([data-failed]) { display: none; }
.verify[hidden] { display: none; }
/* The retry beside a failed check: text with the coral bar, never a second
   heavy button competing with the form's own action. It exists only while
   the check is in its failed state. */
.verify [data-check-retry] { justify-self: start; min-height: 44px; padding: 8px 0; border: 0; background: none;
  font: 600 14.5px/1 var(--f-ui); color: var(--ink); cursor: pointer; position: relative; }
.verify [data-check-retry]::after { content: ""; position: absolute; left: 0; bottom: 10px; height: 2px; width: 100%; background: var(--coral); }
.verify [data-check-retry]:disabled { opacity: .55; cursor: wait; }
.verify:not([data-failed]) [data-check-retry] { display: none; }
.form .actions { margin-top: var(--s-2); display: grid; gap: var(--s-3); justify-items: start; }
.form .btn { min-height: 48px; }
@media (max-width: 560px) { .form .btn { width: 100%; } }
.preview-note, [role="status"], [data-form-note] { font: 400 13.5px/1.5 var(--f-body); color: var(--muted); margin: 0; }
[role="status"]:not(:empty), [data-form-note]:not(:empty) { padding: 10px 14px; border-radius: 6px; background: var(--tint); color: var(--ink-2); }
[role="status"][data-state="ok"], [role="status"].ok { background: #E3F1EA; color: #22705A; }
[role="status"][data-state="error"], [role="status"].error { background: #FBE7DC; color: #9E4A1E; }
input:disabled, textarea:disabled, select:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
button:disabled { filter: grayscale(.3); }
/* on the deep ground */
.scr--deep .field > label, .scr--deep .form legend, .scr--deep .check { color: var(--mist); }
.scr--deep .field small, .scr--deep .help, .scr--deep .preview-note, .scr--deep [role="status"] { color: var(--mist-dim); }
.scr--deep .form--card { background: var(--deep-2); border-color: rgba(217,221,214,.25); box-shadow: none; }
.scr--deep .field input, .scr--deep .field textarea, .scr--deep .field select { background: var(--chalk); color: var(--ink); border-color: transparent; }
.scr--deep .check input { background: var(--chalk); border-color: rgba(217,221,214,.6); }
.scr--deep .choices .check { background: rgba(255,255,255,.06); border-color: rgba(217,221,214,.25); color: var(--mist); }
/* the phone: the card gives up its padding, the fields keep their height */
@media (max-width: 560px) {
  .form { gap: var(--s-4); }
  .form--card { padding: var(--s-4); border-radius: 6px; }
  .field textarea { min-height: 96px; }
}

/* 7b Form screen: the words on top, the form across the whole width,
   two columns of fields on desktop. Every child may shrink, so a card
   never runs off a phone. */
.st-form { display: grid; gap: var(--s-6); }
.st-form > * { min-width: 0; }
.st-form > .stack { max-width: 62ch; }
.st-form > .stack:has(.form), .st-form > .stack:has(form) { max-width: none; }
.st-form .field { align-content: start; align-self: start; }
.st-form > .side { display: grid; gap: var(--s-5); max-width: none; }
.st-form .form { max-width: none; }
@media (min-width: 821px) {
  .st-form .form--card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-6); padding: clamp(24px, 3vw, 40px); }
  .st-form .form--card > .row2 { display: contents; }
  .st-form .form--card > .lead-in, .st-form .form--card > .field:has(textarea), .st-form .form--card > .field:has(input[type="file"]),
  .st-form .form--card > .check, .st-form .form--card > .choices, .st-form .form--card > .actions, .st-form .form--card > details,
  .st-form .form--card > .verify, .st-form .form--card > [role="status"], .st-form .form--card > p, .st-form .form--card > fieldset { grid-column: 1 / -1; }
  .st-form .form--card > .actions { margin-top: var(--s-3); }
}

/* 7c The one-field band (Tempo newsletter): a field on a hairline, the
   action as text with a bar at its right. Home's join screen. */
.form--band { max-width: 34em; gap: var(--s-3); }
.form--band .bandrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: end;
  border-bottom: 1.5px solid var(--ink); padding-bottom: var(--s-2); transition: border-color var(--t-colour) ease; }
.form--band .bandrow:focus-within { border-bottom-color: var(--teal); }
.form--band .field { gap: 0; }
.form--band .field > label { font: 500 13.5px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.form--band .field input { background: transparent; border: 0; border-radius: 0; padding: 6px 0; box-shadow: none; min-height: 44px; }
.form--band .field input:focus { box-shadow: none; background: transparent; }
.form--band .field input:disabled { opacity: 1; color: var(--muted); }
.form--band .tbtn { background: none; border: 0; cursor: pointer; white-space: nowrap; }
.form--band .tbtn .arw { display: inline-block; margin-left: 6px; color: var(--teal); transition: transform 180ms var(--ease-out); }
.form--band .tbtn:hover .arw { transform: translateX(4px); }
.form--band .tbtn:disabled { opacity: 1; color: var(--muted); filter: none; }
.form--band .tbtn:disabled::after { background: var(--line); }
.form--band .tbtn:disabled .arw { color: var(--muted); }
@media (max-width: 560px) { .form--band .bandrow { grid-template-columns: 1fr; gap: 0; } .form--band .tbtn { justify-self: start; } }
/* the ground flows: every screen keeps its own opaque ground, so words
   always sit on their own screen's colour. Where two grounds meet,
   site.js lays a seam across the empty padding between them: a gradient
   half at the foot of the screen above (.seam--out) and one at the head
   of the screen below (.seam--in), sized to the space that is free, so
   the colour turns like a tide and never under a line of text. The body
   carries data-ground = the ground under the header, for the chrome.
   Without JavaScript the screens simply meet. */
main .scr > .seam, .foot-next > .seam { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; }
main .scr > .seam--out, .foot-next > .seam--out { bottom: 0; }
main .scr > .seam--in, .foot-next > .seam--in { top: 0; }
.foot-next > .shell { position: relative; z-index: 1; }

/* 8 Offer: price large, inclusions, one button. */
.tag { display: inline-block; font: 600 clamp(30px, 3.4vw, 44px)/1.1 var(--f-ui); letter-spacing: -.02em;
  background: var(--ochre-soft); color: var(--ochre-ink); padding: 4px 14px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.tag small { font: 500 14px/1 var(--f-body); letter-spacing: 0; margin-left: 6px; }
.banner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  background: var(--teal-soft); border-left: 3px solid var(--teal); padding: var(--s-4) var(--s-5); color: var(--ink); }
.banner b { font-family: var(--f-ui); font-weight: 600; }
.inclusions { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.inclusions li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: baseline; }
.inclusions li::before { content: "+"; font: 600 18px/1 var(--f-ui); color: var(--coral); }
.scr--deep .inclusions, .scr--deep .inclusions li { border-color: rgba(217,221,214,.18); }

/* 9 Accordion / read-more (The Content Architecture's, Jon's picks, F4):
   an index in mono at the left, the question in mono caps, a plus at
   the right that turns on open, a hairline under each item, a side rule
   on the open layer. Hover and focus bring the plus and the question to
   ink. The first item of every group is open in the markup; a lone
   read-more starts closed. Every details carries an id for deep links. */
.more { border-bottom: 1px solid var(--line); counter-increment: q; }
[data-more-group], .faq-group { counter-reset: q; display: grid; }
[data-more-group] > .more:first-of-type, .faq-group > .more:first-of-type { border-top: 1px solid var(--line); }
.scr--deep .more { border-bottom-color: rgba(217,221,214,.18); }
.scr--deep [data-more-group] > .more:first-of-type { border-top-color: rgba(217,221,214,.18); }
.more summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s-4); align-items: center;
  min-height: 56px; padding: var(--s-3) 0; font: 500 13.5px/1.5 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2); transition: color var(--t-colour) ease; }
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: counter(q, decimal-leading-zero); font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); }
.more summary::after { content: "+"; font: 400 26px/1 var(--f-ui); color: var(--teal); justify-self: end;
  transition: transform 220ms var(--ease-out), color var(--t-colour) ease; }
.more summary:hover, .more summary:focus-visible, .more[open] summary { color: var(--ink); }
.more summary:hover::before, .more[open] summary::before { color: var(--ink); }
.more summary:hover::after, .more summary:focus-visible::after { color: var(--ink); }
.more summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; }
.more[open] summary::after { transform: rotate(45deg); }
.more .layer { margin: 0 0 var(--s-5) 52px; padding: 2px 0 0 var(--s-4); border-left: 2px solid var(--ochre); color: var(--ink-2); font-size: 15px; max-width: 62ch; }
.more .layer p + p { margin-top: var(--s-3); }
.more .layer a { color: var(--teal); }
.scr--deep .more summary { color: var(--mist); }
.scr--deep .more summary::before { color: var(--mist-dim); }
.scr--deep .more summary::after { color: var(--teal-lt); }
.scr--deep .more summary:hover, .scr--deep .more summary:hover::after { color: #fff; }
.scr--deep .more .layer { color: var(--mist); }
@media (max-width: 560px) {
  .more summary { grid-template-columns: 28px 1fr auto; gap: var(--s-3); font-size: 12.5px; min-height: 52px; }
  .more .layer { margin-left: 0; }
}

/* 10 Doors (Harvey): two or three equal cards that fill the screen,
   the words at the top, the door's index large and faint bleeding off
   the bottom corner until a picture takes that place. Hover: the bar
   grows on the left, the arrow nudges, the other doors dim. */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.doors--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 800px) { .doors, .doors--2 { grid-template-columns: 1fr; } }
.door { display: grid; gap: var(--s-2); padding: var(--card-pad); background: var(--chalk); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); position: relative; overflow: hidden; min-height: clamp(230px, 32vh, 320px); align-content: start;
  transition: opacity var(--t-surface) ease; }
.door::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc, var(--teal));
  transform: scaleY(0); transform-origin: top; transition: transform var(--t-surface) var(--ease-out); z-index: 2; }
.door:hover::before, .door:focus-visible::before { transform: scaleY(1); }
/* the door carries the unity symbol as its picture; the index numeral it used
   to bleed off the corner is gone, so the door is a good deal shorter */
.door > :not(.door-sym) { position: relative; z-index: 1; }
.doors:has(> .door:hover) > .door:not(:hover) { opacity: .6; }
.door .t { font: 600 clamp(22px, 2vw, 26px)/1.1 var(--f-display); text-wrap: balance; }
.door .t .arw { display: inline-block; font-family: var(--f-body); transition: transform 180ms var(--ease-out); color: var(--teal); }
.door:hover .t .arw, .door:focus-visible .t .arw { transform: translateX(4px); }
.door .s { font-size: var(--t-small); color: var(--ink-2); }
.door[data-pillar] { box-shadow: inset 0 -4px 0 var(--pc); }
.scr--deep .door { background: var(--deep-2); border-color: rgba(217,221,214,.28); color: var(--mist); }
.scr--deep .door .t { color: #fff; }
.scr--deep .door .s { color: var(--mist-dim); }
.scr--deep .door .t .arw { color: var(--teal-lt); }
@media (max-width: 800px) { .door { min-height: 0; padding-bottom: calc(var(--card-pad) + 16px); } }

/* ------------------------------------------------------------ components */
/* buttons: Prompt. Coral with ink text; fills teal with white on hover.
   register.html's two pinned .choice-action links share every rule (B-42). */
.btn, .choice-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1 var(--f-ui); min-height: 48px; padding: 12px 22px; border-radius: 2px; cursor: pointer; text-decoration: none;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink); position: relative; isolation: isolate; overflow: hidden;
  transition: color var(--t-colour) ease, border-color var(--t-colour) ease, transform 120ms ease; }
.btn::before, .choice-action::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out); z-index: -1; }
.btn:hover, .btn:focus-visible, .choice-action:hover, .choice-action:focus-visible { color: var(--paper); }
.btn:hover::before, .btn:focus-visible::before, .choice-action:hover::before, .choice-action:focus-visible::before { transform: scaleX(1); }
.btn:active, .choice-action:active { transform: translateY(1px); transition-duration: 0ms; }
.btn--coral, .choice-action[data-registration-attribution] { background: var(--coral); border-color: var(--coral); color: var(--ink);
  transition: color 0ms linear, border-color var(--t-colour) ease, transform 120ms ease; }
.btn--coral::before, .choice-action[data-registration-attribution]::before { transition: transform 0ms; }
.btn--coral::before, .choice-action[data-registration-attribution]::before { background: var(--teal); }
.btn--coral:hover, .btn--coral:focus-visible, .choice-action[data-registration-attribution]:hover, .choice-action[data-registration-attribution]:focus-visible {
  color: #fff; border-color: var(--teal); transition: color 0ms linear 240ms, border-color var(--t-colour) ease, transform 120ms ease; }
.btn--coral:hover::before, .btn--coral:focus-visible::before,
.choice-action[data-registration-attribution]:hover::before, .choice-action[data-registration-attribution]:focus-visible::before { transition: transform 220ms var(--ease-out); }
.btn--sm { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.btn--ghost { border-color: var(--line); }
.scr--deep .btn, .on-deep .btn, .foot .btn { color: var(--mist); border-color: rgba(217,221,214,.5); }
.scr--deep .btn::before, .on-deep .btn::before, .foot .btn::before { background: var(--mist); }
.scr--deep .btn:hover, .on-deep .btn:hover, .foot .btn:hover { color: var(--deep); }
.scr--deep .btn--coral, .on-deep .btn--coral, .foot .btn--coral { color: var(--ink); border-color: var(--coral); }
.scr--deep .btn--coral:hover, .foot .btn--coral:hover { color: #fff; border-color: var(--teal); }
/* text with a bar: the tertiary form */
.tbtn { display: inline-flex; align-items: center; min-height: 44px; font: 600 17px/1 var(--f-ui); color: var(--ink); text-decoration: none; padding: 0; position: relative; }
.tbtn::after { content: ""; position: absolute; left: 0; bottom: 6px; height: 2px; width: 100%; background: var(--coral); }
.tbtn:hover::after { animation: tbar 480ms var(--ease-out) forwards; }
@keyframes tbar { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; }
  51% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.scr--deep .tbtn { color: #fff; }
/* the go-deeper link: ink, no line until hover; a 44px line box on the phone */
.deeper { font: 400 var(--t-body)/1.4 var(--f-body); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 44px; background: linear-gradient(var(--teal), var(--teal)) no-repeat 0 calc(50% + .85em) / 0 1.5px;
  transition: background-size 240ms var(--ease-out); }
.deeper:hover, .deeper:focus-visible { background-size: 100% 1.5px; color: var(--ink); }
.deeper .arw { display: inline-block; margin-left: 6px; color: var(--teal); transition: transform 180ms var(--ease-out); }
.deeper:hover .arw { transform: translateX(4px); }
.scr--deep .deeper { color: var(--mist); background-image: linear-gradient(var(--teal-lt), var(--teal-lt)); }
.scr--deep .deeper:hover { color: #fff; }
.scr--deep .deeper .arw { color: var(--teal-lt); }
/* the mono micro-label, once: every small index, day, name and cite */
.label--sm, .door .k, .card .k, .dir .k, .topic .k, .quote cite, .table th, .ptab .pday, .pgcount, .tray,
.rules p b, .libnav [data-lib-page], .pcard header b { font: 500 12px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--muted); }
.door .k, .card .k, .table th, .rules p b { text-transform: uppercase; }
.scr--deep :is(.door, .card, .dir, .topic) .k, .scr--deep .quote cite, .scr--deep .libnav [data-lib-page] { color: var(--mist-dim); }
/* cards: still card, zooming picture, rising tint */
.card { background: var(--chalk); border: 1px solid var(--line); padding: var(--card-pad); display: grid; gap: var(--s-2);
  position: relative; overflow: hidden; color: var(--ink); text-decoration: none; align-content: start; }
.card::after { content: ""; position: absolute; inset: 0; background: var(--tint); transform: translateY(100%);
  transition: transform 300ms var(--ease-out); }
.card > * { position: relative; z-index: 1; }
a.card:hover::after, .card--hover:hover::after { transform: translateY(0); }
.card .t { font: 500 var(--t-heading)/1.15 var(--f-ui); letter-spacing: -.01em; }
.card .t--serif { font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--f-display); }
.card p, .card .s { font-size: var(--t-small); color: var(--ink-2); }
.card .pic { aspect-ratio: 4 / 3; overflow: hidden; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--s-3); background: var(--tint); }
.card .pic > * { transition: transform var(--t-move) var(--ease-out); width: 100%; height: 100%; object-fit: cover; }
.card:hover .pic > * { transform: scale(1.12); }
.card[data-pillar] { box-shadow: inset 0 -4px 0 var(--pc); }
/* hover on an information card: a coral rule draws across the top, the border warms
   and the card lifts a little. Cards are not links, so nothing changes the cursor. */
.st-cards > .card { transition: border-color var(--t-surface) ease, transform var(--t-surface) var(--ease-out), box-shadow var(--t-surface) ease; }
.st-cards > .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.st-cards > .card:hover { border-color: var(--coral); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18,38,43,.10);
  transition: border-color var(--t-surface) ease 220ms, transform var(--t-surface) var(--ease-out), box-shadow var(--t-surface) ease; }
.st-cards > .card:hover::before { transform: scaleX(1); }
.people .st-cards > .card::before, .st-cards > .card.empty::before { content: none; }
.people .st-cards > .card:hover, .st-cards > .card.empty:hover { border-color: var(--line); transform: none; box-shadow: none; }
.scr--deep .st-cards > .card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.scr--deep .card { background: var(--deep-2); border-color: rgba(217,221,214,.28); color: var(--mist); }
.scr--deep .card::after { background: #1C3A44; }
.scr--deep .card .t, .scr--deep .card .t--serif { color: #fff; }
.scr--deep .card p, .scr--deep .card .s { color: var(--mist); }
/* an empty place that is meant to be empty: a speaker's day before a
   name, the library before its first entry. Quiet, never a zero. */
.empty { color: var(--muted); }
.scr--deep .empty { color: var(--mist-dim); }
.card.empty { min-height: clamp(180px, 26vh, 260px); align-content: start; }
.card.empty::before { content: attr(data-n); position: absolute; right: -.04em; bottom: -.2em; pointer-events: none;
  font: 600 clamp(110px, 12vw, 180px)/1 var(--f-display); letter-spacing: -.04em; color: var(--pc, var(--teal)); opacity: .1; }
.card.empty .t--serif { color: var(--ink); }
@media (max-width: 560px) { .card.empty { min-height: 132px; } .card.empty .k { font-size: 11px; letter-spacing: .04em; } }
/* a dark door carries the dots at the door's own height */
.door.card--dots { min-height: clamp(360px, 56vh, 560px); align-content: start; }
@media (max-width: 800px) { .door.card--dots { min-height: 0; } }
/* a dot field behind a dark card: site.js draws it */
.card--dots { min-height: 220px; align-content: end; }
.card--dots canvas.dots, .foot-next > canvas.dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
/* the closing band wears the same dots, gathered in its lower corners */
.foot-next > canvas.dots { opacity: .7; }
/* small addresses inside cards never wrap mid-word */
.card a.mail, .card .mail { font: 400 12.5px/1.4 var(--f-mono); letter-spacing: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .card a.mail, .card .mail { font-size: 11px; } }
/* numbers (Harvey): label left, the number right in Prompt, hairlines.
   The pay-it-forward board, the ticket facts, the library count. */
.stats { display: grid; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.stats > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.stats b { order: 2; font: 600 clamp(28px, 3vw, 40px)/1 var(--f-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stats span { font-size: var(--t-body); color: var(--ink-2); }
.stats + .help, .stats + .preview-note, .frame + .help { margin-top: var(--s-4); }
.st-split > .stats, .st-picture > .stats, .st-split > .dir, .side > .dir, .side > .stats { margin-top: 0; }
.scr--deep .stats, .scr--deep .stats > div { border-color: rgba(217,221,214,.18); }
.scr--deep .stats b { color: #fff; }
.scr--deep .stats span { color: var(--mist); }
/* the ballot row, one shape on home and on the programme (inter.js
   drives [data-vote], data-picked, .votes): index, title, the pillar
   bar that grows on hover, the action at the right */
.topic { position: relative; display: grid; grid-template-columns: 2.4em 1fr auto auto; grid-template-areas: "k t v b" "k f v b";
  align-items: center; gap: var(--s-1) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
  transition: background var(--t-surface) ease; }
.topic::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pc, var(--teal));
  transform: scaleY(0); transform-origin: top; transition: transform var(--t-surface) var(--ease-out); }
.topic:hover, .topic[data-picked] { background: color-mix(in srgb, var(--pc, var(--teal)) 9%, transparent); }
.topic:hover::after, .topic[data-picked]::after { transform: scaleY(1); }
.topic .k { grid-area: k; }
.topic h3 { grid-area: t; font: 600 clamp(19px, 1.7vw, 22px)/1.15 var(--f-display); }
.topic[data-picked] h3::before { content: "✓"; margin-right: 8px; color: var(--teal); font-family: var(--f-body); }
.topic .from { grid-area: f; font: 500 12px/1.4 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.topic .votes { grid-area: v; font: 400 13px/1.4 var(--f-body); color: var(--muted); white-space: nowrap; }
.topic [data-vote] { grid-area: b; white-space: nowrap; }
@media (max-width: 560px) {
  .topic { grid-template-columns: 2.4em 1fr auto; grid-template-areas: "k t b" "k f b" "k v v"; }
  .topic h3 { font-size: 18px; }
}
.ballot-note { font-size: 13px; color: var(--muted); margin-top: var(--s-3); }
/* the ballot's pillar tabs and the three pick-dots (programme) */
.ptabs { display: flex; gap: var(--s-4); margin-top: var(--s-6); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ptab { flex: 1 0 auto; display: grid; gap: 3px; justify-items: start; padding: var(--s-3) var(--s-3) var(--s-3) 0; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; color: var(--muted); text-align: left;
  transition: color var(--t-colour) ease, border-color var(--t-surface) ease; }
.ptab b { font: 600 17px/1.1 var(--f-ui); }
.ptab:hover, .ptab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pc); }
.pdots { display: inline-flex; gap: 5px; margin-top: 3px; }
.pdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background var(--t-colour) ease; }
.pdots[data-picks="1"] i:nth-child(1), .pdots[data-picks="2"] i:nth-child(-n+2), .pdots[data-picks="3"] i { background: var(--pc); }
/* the sticky tray under the ballot (F4 shaped it; the same paper surface
   as the header). The five pillars sit in it as 44px pills. */
.tray { position: sticky; bottom: 0; z-index: 5; margin-top: var(--s-6); border-top: 1px solid var(--line);
  background: var(--surface-paper); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--muted); }
.tray .shell { display: flex; gap: var(--s-2) var(--s-5); align-items: center; flex-wrap: wrap; padding-block: var(--s-2); }
.tray b { color: var(--ink); font-weight: 600; }
.tray b[data-full] { color: var(--teal); }
.tray .pdots { margin: 0; }
.tray-count { margin: 0; display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; padding: 0; background: none; }
.tray-count:not(:empty) { padding: 0; background: none; color: var(--muted); }
.tray .ballot-note { margin: 0; font-family: var(--f-body); letter-spacing: 0; }
.tray .ballot-note:empty { display: none; }
/* the five pillars in the tray: dots over the name, 44px tall, the pillar bar on hover */
.tray-pillars { display: flex; gap: var(--s-1); margin-left: auto; }
.tpill { display: grid; gap: 5px; justify-items: center; align-content: center; min-height: 44px; min-width: 44px; padding: 4px 8px;
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 2px; cursor: pointer; color: var(--muted);
  font: 500 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; transition: color var(--t-colour) ease, border-color var(--t-colour) ease; }
.tpill:hover, .tpill:focus-visible { color: var(--ink); border-bottom-color: var(--pc); outline: none; }
.tpill .tp-day { display: none; }
@media (max-width: 899px) {
  .tray .shell { gap: var(--s-2) var(--s-3); }
  .tray-count { width: 100%; }
  .tray-pillars { margin-left: 0; width: 100%; justify-content: space-between; }
  .tpill { flex: 1 1 0; padding: 4px 2px; }
  .tpill .tp-name { display: none; }
  .tpill .tp-day { display: block; }
}
/* the price table (partner): built from the micro-label and .num */
.tablewrap { overflow-x: auto; margin-top: var(--s-6); }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { text-align: left; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: baseline; }
.table td { font-size: var(--t-body); color: var(--ink-2); }
.table td .num { font: 600 20px/1.2 var(--f-ui); color: var(--ink); }
.table tbody th { font: 500 var(--t-body)/1.4 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
/* steps (Zaro's zigzag, Titan's numbers): three rows, the number in a
   tinted frame on alternating sides, the words beside it */
.steps { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.step { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-6); align-items: center;
  background: var(--chalk); border: 1px solid var(--line); padding: var(--card-pad); }
.step:nth-child(even) { grid-template-columns: 1fr 128px; }
.step:nth-child(even) > .step-n { order: 2; }
.step:nth-child(even) > .step-body { text-align: right; justify-items: end; }
.step-n { display: grid; place-items: center; aspect-ratio: 1; width: 128px; background: var(--tint); border-radius: 2px;
  font: 600 64px/1 var(--f-display); letter-spacing: -.04em; color: var(--pc, var(--teal)); }
.step-body { display: grid; gap: var(--s-2); }
.step-body .t { font: 600 clamp(24px, 2.4vw, 32px)/1.1 var(--f-display); }
.step-body p { font-size: var(--t-body); color: var(--ink-2); max-width: 44ch; }
@media (max-width: 700px) {
  .step, .step:nth-child(even) { grid-template-columns: 56px 1fr; gap: var(--s-4); }
  .step:nth-child(even) > .step-n { order: 0; }
  .step:nth-child(even) > .step-body { text-align: left; justify-items: start; }
  .step-n { width: 56px; font-size: 28px; }
}
/* the people (Wild's grid): seven tiles, four then three centred; a
   monogram in the person's pillar tint until the photo lands; name and
   address small over the tile's foot. Three up on a tablet, two on a phone. */
.people .st-cards { grid-template-columns: repeat(8, 1fr); }
.people .st-cards > * { grid-column: span 2; }
.people .st-cards > :nth-child(5) { grid-column: 2 / span 2; }
.people .card { padding: 0; aspect-ratio: 1; align-content: end; border-radius: 22px; background: var(--chalk); }
.people .card .pic { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; overflow: hidden; border-radius: 21px; background: color-mix(in srgb, var(--pc-lt, var(--tint)) 45%, var(--tint)); }
.people .card .pic .mono { display: grid; place-items: center; height: 50%; font: 600 clamp(36px, 4vw, 64px)/1 var(--f-display);
  letter-spacing: -.02em; color: var(--ink); }
.people .card .who { display: grid; gap: 2px; padding: var(--card-pad); background: linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,.7) 70%, transparent); }
.people .card .t--serif { font-size: clamp(20px, 1.7vw, 24px); }
.people .card .mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); text-decoration: none; }
.people .card .mail:hover { color: var(--ink); text-decoration: underline; }
.people .card.is-profile { grid-template-rows: auto auto auto; aspect-ratio: auto; align-content: start; scroll-margin-top: 100px; }
.people .card.is-profile .pic { position: relative; inset: auto; width: calc(100% - 24px); margin: 12px 12px 0; aspect-ratio: 1 / 1; border-radius: 18px; }
.people .card.is-profile .who { position: relative; padding-bottom: var(--s-2); background: var(--chalk); }
.people .card.is-profile .mail { display: none; }
.team-profile-body { display: grid; gap: var(--s-2); padding: 0 var(--card-pad) var(--card-pad); background: var(--chalk); }
.team-profile-role { font: 600 10px/1.3 var(--f-mono); color: var(--coral); letter-spacing: .09em; text-transform: uppercase; }
.team-profile-intro { font: 500 17px/1.3 var(--f-display); color: var(--ink); }
.team-profile-read-more { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; width: 100%; padding: 0; border: 0; background: none; color: var(--teal); cursor: pointer; font: 600 12px/1 var(--f-ui); }
.team-profile-read-more::after { content: "+"; display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--coral); color: var(--ink); font: 500 25px/1 var(--f-ui); transition: transform 180ms var(--ease-out), background var(--t-colour) ease; }
.team-profile-read-more:hover { color: var(--ink); }
.team-profile-read-more:hover::after, .team-profile-read-more:focus-visible::after { transform: rotate(90deg); background: var(--coral-tint); }
.team-profile-read-more:focus-visible, .team-profile-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
html.has-team-profile-dialog { overflow: hidden; }
.team-profile-dialog { width: min(760px, calc(100vw - 32px)); height: min(86dvh, 820px); max-height: min(86dvh, 820px); padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--chalk); color: var(--ink); box-shadow: 0 24px 80px rgba(21, 37, 36, .3); }
.team-profile-dialog::backdrop { background: rgba(12, 29, 28, .72); backdrop-filter: blur(4px); }
.team-profile-dialog-card { box-sizing: border-box; position: relative; height: 100%; padding: clamp(24px, 5vw, 52px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; scrollbar-width: thin; }
.team-profile-dialog-card::-webkit-scrollbar { width: 8px; }.team-profile-dialog-card::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 8px; }
.team-profile-close { position: sticky; z-index: 1; top: 0; margin-left: auto; margin-bottom: -44px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 3px; background: var(--chalk); color: var(--ink); cursor: pointer; font: 400 28px/1 var(--f-ui); }
.team-profile-dialog-content { display: grid; gap: var(--s-4); }
.team-profile-dialog-header { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding-right: 52px; }
.team-profile-dialog-header img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.team-profile-dialog-header h3 { font: 600 clamp(26px, 4vw, 40px)/1.05 var(--f-display); }
.team-profile-dialog-section { display: grid; gap: var(--s-2); }
.team-profile-dialog-section + .team-profile-dialog-section { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.team-profile-dialog-section h4 { color: var(--coral); font: 600 10px/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.team-profile-dialog-section p { color: var(--ink-2); line-height: 1.65; white-space: pre-line; }
.team-profile-dialog-section .team-profile-intro { max-width: 34rem; color: var(--teal); font: 560 20px/1.35 var(--f-display); }
.team-profile-dialog-section .team-profile-meta { color: var(--muted); font: 500 13px/1.5 var(--f-mono); }
.team-profile-dialog-content nav { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.team-profile-dialog-content nav a { color: var(--teal); font-size: 12px; font-weight: 600; }
@media (max-width: 560px) {
  .team-profile-dialog { width: calc(100vw - 16px); height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); margin-block: auto; }
  .team-profile-dialog-card { padding: 20px; padding-right: 24px; }
  .team-profile-close { top: 0; }
  .team-profile-dialog-header { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-3); padding-right: 48px; }
  .team-profile-dialog-header img { width: 64px; height: 64px; }
  .team-profile-dialog-header .team-profile-role { font-size: 11px; line-height: 1.35; letter-spacing: .06em; }
  .team-profile-dialog-section .team-profile-intro { font-size: 19px; }
}
@media (max-width: 900px) {
  .people .st-cards { grid-template-columns: repeat(6, 1fr); }
  .people .st-cards > :nth-child(5) { grid-column: span 2; }
  .people .st-cards > :nth-child(7) { grid-column: 3 / span 2; }
}
@media (max-width: 560px) {
  .people .st-cards { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
  .people .st-cards > * { grid-column: span 2; }
  .people .st-cards > :nth-child(5) { grid-column: span 2; }
  .people .st-cards > :nth-child(7) { grid-column: 2 / span 2; }
  .people .card .who { padding: var(--s-3); }
  .people .card .t--serif { font-size: 15px; }
  /* the address keeps a 44px box; its lower half sits in the tile's own
     padding so the name is not pushed up into the monogram */
  .people .card .mail { font-size: 11px; min-height: 44px; margin-bottom: calc(var(--s-3) * -1); }
}
.burst { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* the sticky stack is gone (wave 2): the pillar screens scroll like any
   other; F3 lays them out as the repeated frame. */

/* ---------------------------------------------------------------- reveal
   Sharpen and stagger. Starts visible. site.js adds data-in. Under
   reduced motion nothing moves and nothing blurs. */
@media (prefers-reduced-motion: no-preference) {
  /* the whole reveal, last child included, settles inside 700 ms (B-63) */
  html.js [data-reveal] { --t-reveal: 600ms; --stagger: 50ms; }
  html.js [data-reveal] > * { opacity: .6; transform: translateY(10px); filter: blur(2px);
    transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out), filter var(--t-reveal) var(--ease-out); }
  html.js [data-reveal][data-in] > * { opacity: 1; transform: none; filter: blur(0); }
  html.js [data-reveal][data-in] > :nth-child(2) { transition-delay: var(--stagger); }
  html.js [data-reveal][data-in] > :nth-child(n+3) { transition-delay: calc(var(--stagger) * 2); }
}
/* legacy data-rise from inter.css is not used; keep such nodes visible */
[data-rise], [data-stagger] > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------- guards */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .btn::before, .door::before, .card::after, .dir > a::after { transition: none; }
  .card:hover .pic > * { transform: none; }
}
@media print { .head, .drawer, .foot-next, .progress { display: none; } .scr { min-height: 0; padding: 24px 0; } }

/* ---- wave 2 integrator: nothing ink on deep, ever ---- */
.scr--deep .btn:not(.btn--coral), .foot .btn:not(.btn--coral) { color: var(--mist); border-color: rgba(217,221,214,.55); }
.scr--deep .btn:not(.btn--coral)::before { background: var(--mist); }
.scr--deep .btn:not(.btn--coral):hover { color: var(--deep); }
.scr--deep a:not(.btn):not(.door):not(.card) { color: var(--teal-lt); }
.scr--deep .tbtn, .scr--deep .deeper { color: var(--mist); }
/* pillar colour lives in the bar, not the words (index pillars) */
.dir > a[data-pillar]:hover, .dir > a[data-pillar]:hover .t { color: var(--pc-text, var(--ink)); }
/* in-text links (inside a read-more layer or a body paragraph) get a
   44px line box on the phone: 11px of padding either side of the line,
   pulled back with a negative margin so the paragraph's rhythm holds */
@media (max-width: 900px) { .more .layer a, .scr .body a { display: inline-block; padding: 11px 0; margin: -11px 0; } }

/* ---- gate 2, integrator ---- */
/* the coral button fills teal on hover on every ground, never mist */
.foot .btn--coral::before, .scr--deep .btn--coral::before, .on-deep .btn--coral::before { background: var(--teal); }
.foot .btn--coral:hover, .scr--deep .btn--coral:hover, .foot .btn--coral:focus-visible, .scr--deep .btn--coral:focus-visible { color: #fff; border-color: var(--teal); }
/* in-page jumps land under the header, not behind it */
main section[id], main [id].scr, .faq-group details[id], .more[id] { scroll-margin-top: calc(var(--head-h-small) + 16px); }
/* a lone directory takes the whole column */
/* a directory in a plain (non-hero, non-split) shell always takes the whole column,
   whatever follows it: a read-more, a help line, nothing (gate 3 finding 3) */
.scr:not(.scr--hero) > .shell:not([class*="split"]):has(> .dir) { width: 100%; }
.scr:not(.scr--hero) > .shell:not([class*="split"]) > .dir { max-width: none; }
/* team tiles: names never overlap the monogram on a narrow phone */
@media (max-width: 480px) {
  .people .st-cards { grid-template-columns: repeat(4, 1fr); }
  .people .st-cards > * { grid-column: span 2; }
  .people .st-cards > :nth-child(5) { grid-column: span 2; }
  .people .st-cards > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
  .people .card { aspect-ratio: auto; min-height: 210px; }
  .people .card .pic .mono { font-size: 34px; }
  .people .card .t--serif { font-size: 18px; line-height: 1.15; }
}


/* ================================================================
   THE SUMMIT BUILDING MAP (the-summit.html #building) and the laptop
   mock-up under it (#stage). From Jon's summit-map artifact, 3 September
   2026. The picture is paper; the open room is the page's one dark card.
   Driven by assets/summit-map.js. */
.smap { position: relative; margin-top: var(--s-7); }
.smap-pic { position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--chalk);
  box-shadow: 0 24px 60px rgba(18,38,43,.18); }
.smap-pic img { display: block; width: 100%; height: auto; }
/* the summit picture uses the home page's pills: the open room's pill stays
   in its hover state so the visitor can see which room the panel belongs to */
.smap-spot { cursor: pointer; -webkit-appearance: none; appearance: none; font-family: var(--f-ui); }
.smap-spot.is-on, .smap-spot[aria-expanded="true"] { background: var(--deep); color: #fff; border-color: var(--deep); z-index: 3; }
.smap-rooms { display: none; }
.smap-room { display: grid; align-content: center; gap: 4px; padding: 14px 16px; min-height: 60px; background: var(--chalk);
  border: 1px solid var(--line); border-radius: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t-surface); }
.smap-room:hover, .smap-room:focus-visible, .smap-room[aria-expanded="true"] { border-color: var(--teal); }
.smap-room .n { font: 500 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--muted); }
.smap-room .name { font: 600 22px/1 var(--f-display); color: var(--ink); }
.smap-keys { margin: var(--s-4) 0 0; text-align: right; font: 400 13px/1.4 var(--f-body); color: var(--muted); }
.smap-keys kbd { font: 500 11px/1 var(--f-ui); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--ink-2); }

/* the panel that grows out of a room: the one dark card */
.smap-panel { position: absolute; left: 3%; right: 3%; top: 3%; z-index: 5; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  background: var(--deep-2); color: var(--mist); border: 1px solid rgba(217,221,214,.22); border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); transform-origin: 0 0; overflow: hidden; }
.smap-panel[hidden] { display: none; }
.smap-panel > .smap-screen, .smap-panel > .smap-notes { opacity: 0; transition: opacity 360ms ease 260ms; }
.smap-panel.is-open > .smap-screen, .smap-panel.is-open > .smap-notes { opacity: 1; }
.smap-screen { position: relative; background: #0B1A20; min-height: 200px; overflow: hidden; aspect-ratio: 3 / 2; }
.smap-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B1A20; }
.smap-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; }
.smap-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.smap-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(244,240,230,.15); }
.smap-bar i { display: block; height: 100%; width: 0; background: var(--teal-lt); animation: smap-clip 7s linear infinite; }
@keyframes smap-clip { to { width: 100%; } }
.smap-len { position: absolute; right: 14px; bottom: 14px; font: 500 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.smap-pill { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 5px 9px 4px; border-radius: 999px;
  background: rgba(14,38,48,.75); color: var(--paper); font: 500 11px/1 var(--f-ui); letter-spacing: .12em; backdrop-filter: blur(3px); }
.smap-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: smap-blink 1.6s infinite; }
.smap-pill.is-replay i { background: var(--ochre); animation: none; }
@keyframes smap-blink { 50% { opacity: .35; } }
.smap-tag { position: absolute; left: 14px; bottom: 14px; font: 500 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.smap-cap { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); max-width: 82%; text-align: center;
  font: 400 clamp(12px, 1.2vw, 15px)/1.4 var(--f-body); background: rgba(10,28,35,.82); color: var(--paper); padding: 5px 12px; border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smap-notes { padding: clamp(16px, 2.2vw, 28px); display: grid; align-content: start; gap: var(--s-3); overflow: auto; }
.smap-num { font: 500 12px/1 var(--f-ui); letter-spacing: .14em; color: var(--teal-lt); }
.smap-title { margin: 0; font: 600 clamp(22px, 2.6vw, 32px)/1.05 var(--f-display); color: #fff; letter-spacing: -.01em; }
.smap-notes dl { margin: 0; display: grid; gap: 10px; }
.smap-notes dt { font: 500 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mist-dim); }
.smap-notes dd { margin: 3px 0 0; color: var(--mist); font: 400 14px/1.45 var(--f-body); max-width: 40ch; }
.smap-foot { margin-top: auto; padding-top: var(--s-2); }
.smap-panel .btn--ghost { border-color: rgba(217,221,214,.3); color: var(--mist); }
.smap-panel .btn--ghost:hover, .smap-panel .btn--ghost:focus-visible { border-color: var(--teal-lt); color: #fff; }
.smap-close { position: absolute; top: 10px; right: 10px; z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(217,221,214,.3);
  background: rgba(14,38,48,.7); color: var(--mist); cursor: pointer; display: grid; place-items: center; font: 400 20px/1 var(--f-body); }
.smap-close:hover, .smap-close:focus-visible { border-color: var(--teal-lt); color: #fff; }

/* the laptop */
.lap { position: relative; margin: var(--s-7) auto 0; max-width: 960px; }
.lap-lid { border: 1px solid rgba(217,221,214,.22); border-bottom: none; border-radius: 14px 14px 0 0; padding: 12px; background: #0B1A20; box-shadow: 0 40px 100px rgba(11,26,32,.4); }
.lap-base { height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #1B414D, var(--deep)); border: 1px solid rgba(217,221,214,.22); border-top: none; margin: 0 -2.5%; }
.lap-base::after { content: ""; display: block; width: 14%; height: 4px; margin: 0 auto; border-radius: 0 0 6px 6px; background: rgba(0,0,0,.4); }
.lap-app { background: var(--deep-2); color: var(--mist); border-radius: 6px; overflow: hidden; font-family: var(--f-body); display: grid; grid-template-rows: auto 1fr; aspect-ratio: 16 / 10; }
.lap-top { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; white-space: nowrap; padding: 8px 12px; border-bottom: 1px solid rgba(244,240,230,.14); font-size: 12px; color: var(--mist-dim); }
.lap-top .dots { display: flex; gap: 5px; }
.lap-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: #1B414D; }
.lap-top .tabs { display: flex; gap: 2px; margin-left: 8px; }
.lap-top .tab { padding: 4px 10px; border-radius: 4px; font: 500 11px/1.4 var(--f-ui); letter-spacing: .06em; color: var(--mist-dim); }
.lap-top .tab.on { background: #163641; color: var(--paper); }
.lap-top .live { margin-left: auto; display: flex; align-items: center; gap: 6px; font: 500 11px/1 var(--f-ui); letter-spacing: .1em; color: var(--paper); }
.lap-top .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: smap-blink 1.6s infinite; }
.lap-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 30%); min-height: 0; }
.lap-video { position: relative; background: radial-gradient(ellipse at 50% 58%, #1E4A58, #0A1C23 72%); display: grid; place-items: center; overflow: hidden; min-height: 0; }
.lap .face { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2B5A66, #163641 70%); position: relative; overflow: hidden; flex: none; }
.lap .face::before { content: ""; position: absolute; left: 50%; top: 26%; width: 34%; height: 34%; border-radius: 50%; background: #8C6A4D; transform: translateX(-50%); }
.lap .face::after { content: ""; position: absolute; left: 50%; top: 64%; width: 74%; height: 60%; border-radius: 50% 50% 0 0; background: #7A5A40; transform: translateX(-50%); }
.lap-video .spk { width: min(46%, 300px); aspect-ratio: 1; animation: smap-breathe 4s ease-in-out infinite; }
@keyframes smap-breathe { 50% { transform: scale(1.015); } }
.lap-video .third { position: absolute; left: 16px; bottom: 52px; display: grid; }
.lap-video .third b { font: 600 clamp(16px, 2vw, 24px)/1 var(--f-display); color: var(--paper); }
.lap-video .third span { font: 500 11px/1 var(--f-ui); letter-spacing: .12em; color: var(--coral-soft); text-transform: uppercase; margin-top: 4px; }
.lap-video .ccs { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: rgba(10,28,35,.85); padding: 5px 12px; border-radius: 3px;
  font-size: clamp(11px, 1.3vw, 14px); white-space: nowrap; color: var(--paper); max-width: 88%; overflow: hidden; text-overflow: ellipsis; }
.lap-video .ctl { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.lap-video .ctl span { font: 500 10px/1.4 var(--f-ui); letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: rgba(14,38,48,.75); border: 1px solid rgba(244,240,230,.14); color: var(--mist); }
.lap-qa { border-left: 1px solid rgba(244,240,230,.14); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--deep); }
.lap-qa .qtabs { display: flex; border-bottom: 1px solid rgba(244,240,230,.14); }
.lap-qa .qtabs span { flex: 1; text-align: center; padding: 9px 4px; font: 500 11px/1.4 var(--f-ui); letter-spacing: .08em; color: var(--mist-dim); }
.lap-qa .qtabs span.on { color: var(--paper); box-shadow: 0 -2px 0 var(--teal-lt) inset; }
.lap-qa .list { overflow: auto; padding: 10px; display: grid; gap: 8px; align-content: start; }
.lap-qa .qi { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 10px; border: 1px solid rgba(244,240,230,.14); border-radius: 6px; background: var(--deep-2); }
.lap-qa .up { display: grid; place-items: center; gap: 2px; font: 500 12px/1 var(--f-ui); color: var(--teal-lt); padding-top: 2px; font-variant-numeric: tabular-nums; }
.lap-qa .up::before { content: ""; border-bottom: 6px solid var(--teal-lt); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.lap-qa .qi.mine .up { color: var(--coral-soft); }
.lap-qa .qi.mine .up::before { border-bottom-color: var(--coral-soft); }
.lap-qa .qi p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--paper); }
.lap-qa .qi small { display: block; margin-top: 4px; font-size: 11px; color: var(--mist-dim); }
.lap-qa .poll { padding: 10px; border: 1px solid rgba(244,240,230,.14); border-radius: 6px; background: var(--deep-2); display: grid; gap: 6px; }
.lap-qa .poll .pt { font: 500 10.5px/1.4 var(--f-ui); letter-spacing: .1em; color: var(--ochre-lt); text-transform: uppercase; }
.lap-qa .poll p { margin: 0; font-size: 12.5px; color: var(--paper); }
.lap-qa .opt { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 11.5px; color: var(--mist); align-items: center; }
.lap-qa .opt i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #1B414D; position: relative; overflow: hidden; }
.lap-qa .opt i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ochre); border-radius: 2px; }
.lap-qa .ask { display: flex; gap: 6px; padding: 10px; border-top: 1px solid rgba(244,240,230,.14); }
.lap-qa .ask span { flex: 1; border: 1px solid rgba(244,240,230,.26); border-radius: 999px; padding: 7px 12px; font-size: 12px; color: var(--mist-dim); }
.lap-qa .ask b { font: 500 12px/1.4 var(--f-ui); padding: 7px 14px; border-radius: 999px; background: var(--coral); color: var(--ink); }
.lap-under { margin: var(--s-5) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); color: var(--ink-2); font: 400 var(--t-small)/1.5 var(--f-body); }
.lap-under b { display: block; color: var(--ink); font: 500 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }

@media (max-width: 760px) {
  .smap-pic { margin-bottom: var(--s-3); }
  .smap-rooms { display: grid; gap: var(--s-3); }
  .smap-panel { position: static; grid-template-columns: 1fr; transform: none !important; box-shadow: none; margin: -4px 0 6px; }
  .smap-panel > .smap-screen, .smap-panel > .smap-notes { opacity: 1; transition: none; }
  .smap-screen { aspect-ratio: 16 / 10; }
  .smap-keys { display: none; }
  .lap-top .tabs { display: none; }
  .lap-stage { grid-template-columns: 1fr; }
  .lap-qa { border-left: none; border-top: 1px solid rgba(244,240,230,.14); max-height: 280px; }
  .lap-app { aspect-ratio: auto; }
  .lap-video { aspect-ratio: 16 / 10; }
  .lap-under { grid-template-columns: 1fr; }
  .lap-base { display: none; }
  .lap-lid { border-radius: 8px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .smap-bar i, .smap-pill i, .lap-top .live i, .lap-video .spk { animation: none; }
}


/* ================================================================
   THE UNITY SYMBOLS IN MINIATURE (Jon, 3 September 2026). On paper cards a
   thin line drawing from assets/symbols.svg fills the empty middle; on the
   deep pillar frames the same shapes are drawn in dots by the field engine. */
.door > .door-sym { position: absolute; z-index: 0; left: 50%; top: auto; bottom: -14%; transform: translateX(-50%); width: 72%; height: auto; aspect-ratio: 1;
  color: var(--pc, var(--teal)); opacity: .14; pointer-events: none; transition: opacity var(--t-surface) ease, transform 700ms var(--ease-out); }
.door:hover > .door-sym, .door:focus-visible > .door-sym { opacity: .26; transform: translateX(-50%) rotate(6deg); }
@media (max-width: 800px) { .door > .door-sym { bottom: -10%; width: 48%; } }
.frame--sym > .sym-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.frame--sym > canvas.dots { opacity: .35; }

/* the home page's building picture: six room pills that open on hover and
   lead to the summit page's clickable map */
.hmap { position: relative; container-type: inline-size; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--chalk);
  box-shadow: 0 24px 60px rgba(18,38,43,.16); }
.hmap img { display: block; width: 100%; height: auto; }
.hmap-room { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 6px 12px; border-radius: 999px;
  max-width: min(92%, calc(2 * min(var(--x), 100% - var(--x))));
  min-width: calc(var(--w, 0) * 1.34); min-height: calc(var(--h, 0) * 1.34); box-sizing: border-box;
  background: #F4F0E6; color: var(--ink); border: 1px solid var(--line); text-decoration: none;
  font: 500 12px/1.2 var(--f-ui); letter-spacing: .04em; white-space: nowrap; box-shadow: 0 6px 18px rgba(18,38,43,.18);
  transition: background var(--t-surface) ease, color var(--t-surface) ease, border-color var(--t-surface) ease, box-shadow var(--t-surface) ease; }
.hmap-room .more { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; font: 400 13px/1.2 var(--f-body); letter-spacing: 0;
  transition: max-width 420ms var(--ease-out), opacity 300ms ease, margin 420ms var(--ease-out); }
.hmap-room, .hmap-room:hover, .hmap-room:focus-visible, .hmap-room .more { text-decoration: none !important; }
.hmap-room .more { background: none; }
.hmap-room .more .arw { color: var(--coral); }
.hmap-room:hover, .hmap-room:focus-visible { background: var(--deep); color: #fff; border-color: var(--deep); z-index: 3; box-shadow: 0 10px 28px rgba(18,38,43,.35); }
.hmap-room:hover .more, .hmap-room:focus-visible .more { max-width: 320px; opacity: 1; margin-left: 10px; }
@media (max-width: 900px) { .st-picture--map > .hmap { order: 2; } }
/* the pill keeps its small size on the picture; the hit area is always 44 px (gate 4) */
.hmap-room::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%;
  min-width: 44px; min-height: 44px; transform: translateX(-50%); }
@media (max-width: 640px) { .hmap-room { padding: 5px 9px; font-size: 11px; } .hmap-room .more { display: none; } }

/* the FAQ hero: the words sit at the top beside the tall directory, not
   half-way down it (gate 3) */
#top.scr--hero .shell > .stack { align-self: start; padding-top: var(--s-6); }