/* HyperPrior, the hybrid build: the shell every page shares.

   1. The token layer. Every size, gap, duration, easing and colour the site uses lives in :root below; the
      page sheets (site, papers, entry, liquid, egg) only refer to it. The exemptions are fitted or printed:
      the hero headline, the nameplate, the wordmark, the sticker print, the egg's device and receipt, the
      simulation canvases and the phone capsule.
   2. The shared classes: .label, .num, .status-ring, .btn, .btn--jelly, .btn--s, .btn--block, .chip, the index
      list (.prog-list), .seam-fade, and the reveal.
   3. The frosted header (03's glass bar) with 21's smoked-graphite capsule and 01's ribbed platinum knob,
      the legal dialog, links and focus. */

@font-face { font-family: "Austin"; src: url("/fonts/austin-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Xanh Mono"; src: url("/fonts/xanh-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Xanh Mono"; src: url("/fonts/xanh-mono-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* small subsets, only where Austin and Xanh Mono have no glyph: the dictionary line's IPA and its Japanese */
@font-face { font-family: "HP IPA"; src: url("/assets/hybrid/chrome/fonts/hp-ipa.woff2") format("woff2"); unicode-range: U+0259, U+026A, U+02C8, U+02CC; font-display: swap; }
@font-face { font-family: "HP Mincho"; src: url("/assets/hybrid/chrome/fonts/hp-ja.woff2") format("woff2"); unicode-range: U+4E8B, U+5206, U+524D, U+5E03, U+8D85; font-display: swap; }
/* the research areas' glyphs and the few other maths symbols set as text (π Σ ∞ ∇ ∫ ∂ ∃): the liquid's own STIX subsets,
   the Greek capitals and the operators upright, the lower-case Greek in its italic, as mathematics sets them (the
   ranges are the subsets' own: nothing drawn as a ring with a stroke inside it, liquid.js) */
@font-face { font-family: "HP Math"; src: url("/assets/hybrid/liquid/fonts/hp-liquid-math.woff2") format("woff2"); unicode-range: U+0393, U+0394, U+039B, U+03A3, U+03A9, U+2200, U+2202, U+2203, U+2207, U+2208, U+220F, U+221A, U+221D, U+221E, U+222B, U+2248, U+2261; font-display: swap; }
@font-face { font-family: "HP Math"; src: url("/assets/hybrid/liquid/fonts/hp-liquid-math-italic.woff2") format("woff2"); unicode-range: U+03B1-03B2, U+03B4, U+03BB, U+03BC, U+03C0, U+03C3, U+03C8; font-display: swap; }

/* ================================================================== 1. tokens */
:root {
  /* ---------------------------------------------------------------- type
     Austin for display, in six steps (size / line-height / tracking). At 1440 every step is at its maximum;
     on a phone at its minimum (d6 has its own phone clamp). */
  --display: "Austin", "HP Math", Georgia, serif;
  --text: "Xanh Mono", "HP IPA", "HP Mincho", "HP Math", ui-serif, Georgia, serif;
  --ja: "HP Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --d1: clamp(23px, 1.875vw, 27px);  --d1-lh: 1.1;   --d1-ls: -0.014em;   /* legal h3 */
  --d2: clamp(26px, 2.36vw, 34px);   --d2-lh: 1.06;  --d2-ls: -0.016em;   /* index titles, pager-t, paper-h, legal-title, eng-cta */
  --d3: clamp(28px, 2.78vw, 40px);   --d3-lh: 1.12;  --d3-ls: -0.018em;   /* about-lead, pp-lede, .abs */
  --d4: clamp(34px, 4.03vw, 58px);   --d4-lh: 1.04;  --d4-ls: -0.024em;   /* question, area titles, pp-t */
  --d5: clamp(48px, 5.28vw, 76px);   --d5-lh: 0.96;  --d5-ls: -0.03em;    /* sec-title, hw */
  --d6: clamp(68px, 8.61vw, 124px);  --d6-lh: 0.88;  --d6-ls: -0.036em;   /* pp-title, paper-title */
  /* Xanh Mono for text, tracked 0, in three steps: 16 (meta and ui), 17.5 (body), 19 (lede). The client's 16px
     floor holds on the black and on the light pages alike, so a label is one size everywhere. */
  --fs-meta: 16px;    --lh-meta: 1.4;    /* labels, numerals, captions, notes, errors, field labels */
  --fs-meta-rs: var(--fs-meta);          /* (the black's old name for it) */
  --fs-ui: 16px;      --lh-ui: 1;        /* buttons, chips, footer row, card dd, refs */
  --lh-line: 1.45;                       /* --fs-ui set as a line of text */
  --fs-body: 17.5px;  --lh-body: 1.62;   /* every reading paragraph and list item */
  --fs-lede: 19px;    --lh-lede: 1.5;    /* ledes, senses, pron, nf-p */
  --fs-nav: 14.5px;                      /* the capsule's links (fitted: the capsule and the wordmark share the bar) */
  --read: 64ch;                          /* the measure of every Xanh Mono paragraph */
  --ls-ja: 0.14em;                       /* the pron line's Japanese, the one tracked text */
  /* exemptions (fitted or printed), named here so no page sheet carries a raw size */
  --fs-mark: 27px;    --ls-mark: -0.055em;     /* the wordmark */
  --ls-headline: -0.055em;                     /* the fitted hero headline */
  --ls-plate: -0.045em;                        /* the fitted nameplate */

  /* ---------------------------------------------------------------- spacing */
  --s1: 8px;  --s2: 12px;  --s3: 16px;  --s4: 24px;  --s5: 32px;    /* inside components */
  --space-head: 56px;                                 /* title block → its list or byline; grid → section CTA */
  --space-block: clamp(88px, 11vh, 140px);            /* between blocks; page top = bar-h + this */
  --space-section: clamp(120px, 16vh, 200px);         /* top and bottom of every section */

  /* ---------------------------------------------------------------- grid and frame
     One frame on every page: 12 columns of the 1288 column, 32px apart. --frame is the padding-inline of the
     bar, every section, the footer, the papers and the parts of the black (it resolves against the box it
     pads). At 1440 the columns start at 76, 186, … 1286 and the column ends at 1364. */
  --col: 1288px;
  --gap: 32px;
  --gutter: clamp(20px, 5vw, 76px);
  --frame: max(var(--gutter), calc((100% - var(--col)) / 2));
  --bar-h: 76px;
  --hit: 44px;                    /* the smallest hit area */
  --toggle: 28px;                 /* the pause disc */
  --toggle-inset: 22px;           /* the disc's distance from its host's bottom */
  --btn-s-h: 36px;                /* the small button's height */
  --btn-block-pad: 15px 20px 16px; /* the black pill, full width on a phone */
  --fade-pp: 260px;               /* the papers' paper dissolving into the footer's silver */

  /* ---------------------------------------------------------------- surfaces and colours */
  --paper: #f8f9fa;               /* every light page, papers included; the theme-color */
  --silver: #eef0f2;              /* contact, footer, the gate's ground, fade targets */
  --silver-deep: #dfe3e6;         /* the footer's lower edge, where the nameplate stands */
  --raised: #fcfcfd;              /* the legal panel */
  --white: #fff;
  --ink: #0a0b0c;
  --graphite: #2a2e33;            /* reading text, 13:1 on paper */
  --quiet: #575d64;               /* labels, 6:1 on paper */
  --hair: rgba(10, 11, 12, 0.14);
  --hair-strong: rgba(10, 11, 12, 0.3);
  --error: #8c1d18;
  --on-ink: #f4f6f8;              /* text on the black pill */
  --field: rgba(255, 255, 255, 0.78);
  --field-edge: rgba(10, 11, 12, 0.16);
  --field-shadow: inset 0 1px 2px rgba(10, 11, 12, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  --pool-top: #f6f7f8;            /* the mercury's still, before the first frame */
  --pool-low: #d9dcdf;
  --echo: #1a1d21;                /* the still reflection's ink */
  /* dark: the black run of the home page and the dark footer share one palette */
  --dark-bg: #060a0b;
  --dark-head: #f1f5f5;           /* titles, 18:1 */
  --dark-text: #ccd5d6;           /* reading text, 13:1 */
  --dark-2: #a9b6b7;              /* ledes and subtitles, 9:1 */
  --dark-dim: #93a2a4;            /* labels, 7:1 */
  --dark-rule: rgba(225, 233, 233, 0.16);
  --dark-full: #fff;              /* a row's title under the pointer */
  --phos: #86e3d3;                /* 24's phosphor: only the numerals of the definition and the focus areas */
  --phos-select: rgba(134, 227, 211, 0.3);
  --teal-light: #5cd3c2;          /* the teal on the black: the focus ring there, 10:1 */
  /* selected text and the caret: the one colour for things you act on, carried to the smallest surfaces */
  --select: #0b6b66;
  --select-ink: #fff;
  --dark-disc: rgba(6, 10, 11, 0.62);
  --dark-disc-edge: rgba(233, 236, 239, 0.24);
  --dark-disc-edge-on: rgba(233, 236, 239, 0.5);
  --light-disc: rgba(255, 255, 255, 0.72);
  --light-disc-edge: rgba(10, 11, 12, 0.16);
  --light-disc-edge-on: rgba(10, 11, 12, 0.34);
  /* the egg keeps its own studio sweep: a self-contained object room */
  --egg-bg: #dfe2e5;
  --egg-quiet: #565b61;           /* 5.2:1 on the sweep */
  /* the label colour of the surface a label sits on (paper and silver here; overridden per surface) */
  --label: var(--quiet);
  /* 01's knob: fine vertical ribs over a platinum gradient. It only ever means current or chosen. */
  --knob:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #ffffff, #e2e6ea 48%, #c3c9cf 52%, #e9ecef);
  --knob-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(0, 0, 0, 0.18) inset,
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px rgba(0, 0, 0, 0.3);
  --knob-ink: #121416;
  /* the jelly: the darker Aqua-era teal (#0b6b66, a deep sea green) as moulded, translucent plastic. A dark rim,
     light pooling in the lower half (it comes through the jelly and gathers at the bottom), a gloss cap
     (each piece draws its own: .knob--hover::before, .send::before). It means "under your hand": the capsule's
     hover knob (with 01's ribs) and the mail button (with the capsule's pinstripes). */
  --teal: #0b6b66;
  --teal-ink: #f1fbf9;            /* text on it: about 6:1 against the teal */
  --teal-shade: 0 -1px 0 rgba(0, 34, 32, 0.6);   /* that text, moulded */
  --jelly:
    radial-gradient(64% 56% at 50% 106%, rgba(76, 206, 186, 0.46), rgba(76, 206, 186, 0) 100%),
    linear-gradient(180deg, #08524e 0%, #0b6b66 42%, #074c48 52%, #0a605b 68%, #0f7770 100%);
  --jelly-shadow:
    inset 0 1px 1px rgba(0, 24, 22, 0.5),
    inset 0 -1px 1px rgba(156, 255, 238, 0.35),
    inset 0 0 0 0.5px rgba(0, 30, 28, 0.6),
    0 1px 1px rgba(0, 0, 0, 0.32),
    0 3px 7px -2px rgba(0, 38, 35, 0.55);
  --jelly-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.14) 72%, rgba(255, 255, 255, 0.04));
  --ribs: repeating-linear-gradient(90deg, rgba(0, 22, 20, 0.2) 0 1px, rgba(255, 255, 255, 0.05) 1px 2px, transparent 2px 3px);
  /* the capsule's moulded pinstripes: fine horizontal lines, 3px apart (Aqua's) */
  --pinstripe: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 3px);
  --pinstripe-teal: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0 1px, rgba(0, 20, 18, 0.06) 1px 2px, rgba(255, 255, 255, 0) 2px 3px);

  /* ---------------------------------------------------------------- motion */
  --t-fast: 180ms;      /* hover colour, press, underline, inputs, chips, toggles, dialog exit */
  --t-ui: 420ms;        /* glass, the dark-glass cross-fade, wordmark colour and show, dialog enter, canvas first frames, lift opacity */
  --t-move: 620ms;      /* knob, wordmark glide, nudges, sticker, card exit and gate fade, lift transform */
  --t-hand: 460ms;      /* the teal hover knob, following the pointer or the keyboard between items */
  --t-scene: 1100ms;    /* entry card entrance, display reveal opacity, egg plate slide */
  --t-camera: 1700ms;   /* display reveal transform only */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);       /* only the knobs, the sticker's rotate and the egg dial cap */
  --ease-io: cubic-bezier(0.83, 0, 0.17, 1);        /* quint in-out: the in-page flights (page.js) */
  --nudge: 8px;          /* a row's title under the pointer */
  --nudge-arrow: 6px;    /* a row's arrow (−6px for Back and Previous) */
  --stagger: 90ms;

  /* ---------------------------------------------------------------- focus */
  /* the ring is the family's teal: the dark teal on paper (6:1), a lighter teal on the black and on the devices (10:1) */
  --ring: 2px solid #0b6b66;
  --ring-offset: 3px;
  --ring-light: 2px solid var(--teal-light);   /* on dark surfaces and in the capsule */
  --ring-double: 2px solid var(--teal-light);  /* with --ring-halo: the seal and the egg */
  --ring-halo: 0 0 0 5px rgba(12, 16, 20, 0.62);

  /* ---------------------------------------------------------------- seams: fields dissolve, plates are cut
     The ramp is the alpha of the surrounding surface: an overlay in that colour, masked by it, sits above the
     field and below the text. */
  --ramp-stops: rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.03) 10%, rgb(0 0 0 / 0.1) 21%, rgb(0 0 0 / 0.21) 32%, rgb(0 0 0 / 0.36) 43%,
    rgb(0 0 0 / 0.53) 54%, rgb(0 0 0 / 0.69) 65%, rgb(0 0 0 / 0.83) 76%, rgb(0 0 0 / 0.93) 87%, rgb(0 0 0 / 1) 100%;
  --ramp: linear-gradient(180deg, var(--ramp-stops));      /* clear at the top, the surface at the bottom */
  --ramp-up: linear-gradient(0deg, var(--ramp-stops));     /* the surface at the top, clear below */

  color-scheme: light;
}
/* 820 and under (tablets and phones): the reading sizes and spacing of a hand-held screen, a 5vw gutter */
@media (max-width: 820px) {
  :root {
    --d6: clamp(52px, 16vw, 68px);
    --fs-body: 17px; --fs-lede: 18.5px;
    --space-head: 36px; --space-block: 64px; --space-section: 96px;
    --gutter: 5vw;
  }
}
/* 600 and under, and any screen 480 tall or less (a phone on its side): the phone's bar, wordmark and gutter */
@media (max-width: 600px), (max-height: 480px) {
  :root {
    --fs-mark: 15.5px;
    --gutter: 20px;
    --bar-h: 62px;
  }
}
@media (max-width: 374px) { :root { --gutter: 16px; --fs-mark: 14.5px; } }
@media (max-width: 340px) { :root { --fs-mark: 13.5px; } }

/* ================================================================== base */
* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
}
p, h1, h2, h3, ol, ul, dl, dd, figure, blockquote { margin: 0; }
:where(p) { max-width: var(--read); }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; }
button { font: inherit; color: inherit; }
::selection { background: var(--select); color: var(--select-ink); }
input, textarea { caret-color: var(--select); }
[lang="ja"] { font-family: var(--ja); }

/* ------------------------------------------------------------------ links: three kinds
   Inline (prose and Austin CTAs): underlined at rest at 35%, full under the pointer or focus.
   Rows (.prog-row, the papers list, the pager, rs-paper): no underline; the title nudges.
   Chrome (capsule, footer, paper-back, skip): colour only. Nothing loses its underline on hover. */
a {
  color: inherit;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
a:hover, a:focus-visible { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ focus: one system */
:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
/* on the dark surfaces (each carries data-bar="dark" for the header) the ring is light */
[data-bar="dark"] :focus-visible { outline: var(--ring-light); }
/* a control that takes focus is scrolled into view clear of the fixed bar, ring and all (the sections that links
   land on are not controls: they keep landing flush under the bar, as the flights put them) */
:where(a[href], button, input, select, textarea, summary, [tabindex="0"]) { scroll-margin-top: calc(var(--bar-h) + var(--s3)); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the skip link drops in just under the bar, on the frame's left edge, so it never covers the wordmark or the
   capsule */
.skip { position: fixed; z-index: 200; left: var(--frame); top: calc(-2 * var(--bar-h)); }
.skip:focus { top: calc(var(--bar-h) + var(--s1)); }
#main:focus { outline: none; }
/* the chrome type's canvases reach past their text for the glow: never past the page's edge
   (clip, not hidden, so nothing inside becomes a scroller and sticky still works) */
main, .foot { overflow-x: clip; }

/* ================================================================== 2. shared classes */

/* ------------------------------------------------------------------ labels and numerals
   .label: every eyebrow, kicker, dt, caption, note, status, pager key, list subtitle and affiliation.
   .num: 01–05, E-01–E-05 and the byline's programme number; a numeral that leads a row sits in a 3em column. */
.label {
  font-family: var(--text); font-style: italic; font-weight: 400;
  font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: 0; text-transform: none;
  color: var(--label);
}
.num {
  font-family: var(--text); font-style: normal; font-weight: 400;
  font-size: var(--fs-meta); line-height: var(--lh-meta); letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: var(--label);
}
/* 'In preparation': an open ring, written, not yet out */
.status-ring { display: inline-flex; align-items: center; gap: var(--s2); }
.status-ring::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px currentColor; translate: 0 0.5px;
}

/* ------------------------------------------------------------------ buttons: one rule
   A primary action (the thing the page is for) is the teal jelly, .btn.btn--jelly: 'Go to the communicator', Cite
   (and the devices' own primary keys, Enter, Print and Send, in the same plastic).
   A dismissal or a secondary action is the black pill: .btn ('Try the calibrator', with its arrow, and 'Back to the
   home page' on the 404 and on /calibrate/), and .btn--s, small (Close on the legal dialog, the slips and the
   calibrator's dialog, the skip link). .btn--block fills a phone's width.
   .chip, pale, is a choice or a small action: the egg's Tear off and Print another. The ribbed platinum
   (--knob) only ever means current or chosen (the capsule's knob, a chosen chip), never a link. */
.btn {
  display: inline-block; appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer;
  padding: 14px 26px 15px; border-radius: 999px;
  font-family: var(--text); font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: 0; font-style: normal;
  white-space: nowrap; text-align: center; text-decoration: none; color: var(--on-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 50%), linear-gradient(180deg, #2f353a, #0b0d0f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  transition: translate var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--s { font-size: var(--fs-ui); padding: 10px 16px 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 6px 14px -8px rgba(0, 0, 0, 0.55); }
.btn--block { display: block; width: 100%; padding: var(--btn-block-pad); }
.btn:hover { color: var(--on-ink); text-decoration: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { translate: 0 -1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 14px 26px -10px rgba(0, 0, 0, 0.6); }
  .btn--s:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.6), 0 8px 16px -8px rgba(0, 0, 0, 0.55); }
}
@media (prefers-reduced-motion: no-preference) { .btn:active, .btn:hover:active { translate: 0 1px; } }
/* the jelly: the capsule's teal (--jelly) with its fine horizontal pinstripes and a gloss cap under the type. Hover:
   it lifts and the light pools brighter; pressed: it sinks, the gloss dims; disabled: the plastic goes dull. */
.btn--jelly {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--teal-ink); text-shadow: var(--teal-shade);
  background: var(--pinstripe-teal), var(--jelly);
  box-shadow: var(--jelly-shadow), 0 10px 20px -10px rgba(0, 40, 37, 0.7);
  transition: translate var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.btn--jelly::before {
  content: ""; position: absolute; z-index: -1; left: 12px; right: 12px; top: 1px; height: 50%; pointer-events: none;
  border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: var(--jelly-gloss); transition: opacity var(--t-fast) var(--ease);
}
.btn--jelly:hover { color: var(--teal-ink); filter: brightness(1.08) saturate(1.06); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--jelly:hover { box-shadow: var(--jelly-shadow), 0 14px 26px -10px rgba(0, 40, 37, 0.72); }
}
.btn--jelly:active { filter: brightness(0.92); box-shadow: inset 0 2px 4px rgba(0, 24, 22, 0.6), inset 0 0 0 0.5px rgba(0, 30, 28, 0.7), 0 1px 1px rgba(0, 0, 0, 0.3); }
.btn--jelly:active::before { opacity: 0.55; }
.btn--jelly:disabled, .btn--jelly[aria-disabled="true"] {
  cursor: not-allowed; translate: none; filter: grayscale(0.7) brightness(0.95); opacity: 0.6;
  box-shadow: inset 0 0 0 0.5px rgba(0, 30, 28, 0.5), 0 1px 1px rgba(0, 0, 0, 0.18);
}
.btn--jelly:disabled::before, .btn--jelly[aria-disabled="true"]::before { opacity: 0.4; }

.chip {
  display: inline-block; appearance: none; -webkit-appearance: none; border: 0; margin: 0; cursor: pointer;
  padding: 10px 16px 11px; border-radius: 999px;
  font-family: var(--text); font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: 0; font-style: normal;
  white-space: nowrap; color: var(--graphite);
  background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(10, 11, 12, 0.16);
  transition: box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover, .topic:hover > .chip { box-shadow: inset 0 0 0 1px rgba(10, 11, 12, 0.34); }
/* chosen wears the ribbed platinum knob */
.chip.is-chosen, :checked + .chip { color: var(--knob-ink); background: var(--knob); box-shadow: var(--knob-shadow); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
:focus-visible + .chip { outline: var(--ring); outline-offset: var(--ring-offset); }
@media (prefers-reduced-motion: no-preference) { .chip:active { translate: 0 1px; } }
.chip[hidden], .btn[hidden] { display: none; }

/* ------------------------------------------------------------------ the index list: numbered rows, a title and a one-line subtitle,
   hairline rules (the old band's five programmes; now the engagements), on the shared dark palette */
.prog-list { margin-top: var(--space-head); border-bottom: 1px solid var(--dark-rule); }
.prog-row {
  display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline;
  padding: 14px 0 15px; border-top: 1px solid var(--dark-rule);
  color: var(--dark-head); text-decoration: none;
}
.prog-row .num { grid-row: 1; grid-column: 1; }
.prog-t {
  grid-row: 1; grid-column: 2;
  font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls);
  transition: translate var(--t-move) var(--ease), color var(--t-fast) var(--ease);
}
.prog-sub { grid-row: 2; grid-column: 2; margin-top: var(--s1); }
/* only a row that is a link answers the pointer (the engagements are rows without links: they stay still) */
a.prog-row:hover .prog-t, a.prog-row:focus-visible .prog-t { color: var(--dark-full); }
a.prog-row:focus-visible { outline: var(--ring-double); outline-offset: var(--ring-offset); box-shadow: var(--ring-halo); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { a.prog-row:hover .prog-t { translate: var(--nudge) 0; } }
@media (prefers-reduced-motion: no-preference) { a.prog-row:focus-visible .prog-t { translate: var(--nudge) 0; } }

/* ------------------------------------------------------------------ the seam ramp, as a block of its own */
.seam-fade {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  background: var(--seam, var(--paper));
  -webkit-mask-image: var(--ramp); mask-image: var(--ramp);
}

/* ------------------------------------------------------------------ reveal
   Display type comes in like a camera moving in and settling (20's move, kept at full length); reading
   blocks lift (data-reveal="lift"): a short rise, no scale, so the text never re-rasterises soft. */
html.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 34px, 0) scale(0.972); transform-origin: 50% 0;
  transition: opacity var(--t-scene) var(--ease) calc(var(--d, 0) * 1ms), transform var(--t-camera) var(--ease) calc(var(--d, 0) * 1ms);
}
html.js [data-reveal="lift"] {
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--t-ui) var(--ease) calc(var(--d, 0) * 1ms), transform var(--t-move) var(--ease) calc(var(--d, 0) * 1ms);
}
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ================================================================== 3. the header
   03's frosted bar: clear over the hero, frosted glass once the page moves, and the same frosted glass all the way
   down, over the white hero, the black story and the light pages (HYBRID-4 item 22). Like real frosted glass it
   carries the light of what is under it: header.js sets --bar-k (0 over paper, 1 over the black, following the
   hero's ramp in between) and the milky haze thins as the page darkens, so the glass reads pale over paper and
   smoked over the black without ever being swapped or flipped. Only the wordmark changes colour (.on-dark), where
   the glass under it turns from light to dark. One wordmark: the bar's link. On / and /404 at rest it sits centred
   (07's hero A); as the glass frosts it glides to its slot at the left. It hides over the footer's nameplate. */
.bar {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 0 var(--frame);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar { --bar-k: 0; }
/* the glass: one frosted pane (the blur) with a milky haze whose strength follows --bar-k (0.72 to 0.12 at the top,
   0.56 to 0.10 at the foot, thinning on a square so the glass darkens with the page under it, not after it), a lit
   top edge, and a hairline at its foot that is dark over paper and light over black */
.bar::before {
  --haze: calc((1 - var(--bar-k)) * (1 - var(--bar-k)));
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
  background: linear-gradient(180deg,
    rgb(251 252 253 / calc(0.12 + 0.6 * var(--haze))),
    rgb(244 246 248 / calc(0.1 + 0.46 * var(--haze))));
  box-shadow:
    inset 0 -1px 0 rgb(10 11 12 / calc(0.08 * (1 - var(--bar-k)))),
    inset 0 -1px 0 rgb(255 255 255 / calc(0.08 * var(--bar-k))),
    inset 0 1px 0 rgb(255 255 255 / calc(0.9 - 0.8 * var(--bar-k)));
  transition: opacity var(--t-ui) var(--ease);
}
.bar.scrolled::before { opacity: 1; }

.bar-mark {
  font-family: var(--display); font-size: var(--fs-mark); line-height: 1; letter-spacing: var(--ls-mark); white-space: nowrap;
  color: var(--ink); text-decoration: none;
  transition: translate var(--t-move) var(--ease), opacity var(--t-ui) var(--ease), color var(--t-ui) var(--ease), visibility 0s var(--ease);
}
.bar-mark:hover { color: var(--ink); }
.bar.on-dark .bar-mark { color: var(--dark-head); }
.bar.mark-hidden .bar-mark { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, 0s, var(--t-ui); }
/* home and 404 at rest: centred on the bar. header.js measures --mark-dx; the fallback is the same sum in vw */
:is(.home, .nf-page) .bar:not(.scrolled) .bar-mark {
  translate: var(--mark-dx, calc(50vw - 50% - max(var(--gutter), (100vw - var(--col)) / 2))) 0;
}
.bar.bar-init::before, .bar.bar-init .bar-mark { transition: none; }
/* without JavaScript the home page's hero carries the wordmark (the bar's would share the screen with it) */
html:not(.js) body.home .bar-mark { opacity: 0; visibility: hidden; }
.bar-mark:focus-visible { outline-offset: 6px; }
.bar.on-dark .bar-mark:focus-visible { outline: var(--ring-light); }

/* 21's capsule: smoked graphite plastic with moulded pinstripes and a gloss cap */
/* (the knobs' spring is clipped to the capsule: at either end it meets the end of the track; the links' focus ring
   fits the 3px padding exactly) */
.capsule {
  position: relative; display: flex; align-items: center; gap: 2px; margin-left: auto; overflow: clip;
  padding: 3px; border-radius: 999px;
  background: var(--pinstripe), linear-gradient(180deg, rgba(74, 78, 86, 0.7), rgba(22, 24, 29, 0.8) 52%, rgba(38, 41, 47, 0.75));
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.07), 0 2px 1px rgba(0, 0, 0, 0.28), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(16, 18, 22, 0.55);
}
.capsule::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 2px; height: 46%; border-radius: 999px; z-index: 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02)); pointer-events: none;
}
.capsule a {
  position: relative; z-index: 2; display: block; padding: 9px 15px 10px; border-radius: 999px;
  font-family: var(--text); font-size: var(--fs-nav); line-height: 1; letter-spacing: 0; white-space: nowrap;
  color: rgba(238, 241, 245, 0.95); text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  transition: color var(--t-fast) var(--ease), text-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.capsule a:hover { color: #fff; }
/* the ring sits outside the knob, in the capsule's own padding: light on the graphite, around teal and platinum alike */
.capsule a:focus-visible { outline: var(--ring-light); outline-offset: 1px; }
/* under the teal (header.js: .is-hover) and under the platinum (.is-on, which wins) */
.capsule a.is-hover { color: var(--teal-ink); text-shadow: var(--teal-shade); }
.capsule a.is-on { color: var(--knob-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); transition-delay: 140ms; }
/* The two knobs. Nothing current, nothing under the hand: the capsule is empty. Each is placed on a link
   (.is-placed; header.js sets --kx and --kw from the link's box), slides between links on the spring and
   grows out of (or sinks back into) the link it marks. The platinum (01's) marks the current section and
   sits above the teal, which follows the pointer and the keyboard focus and fades where the platinum is. */
.knob {
  position: absolute; z-index: 1; top: 50%; left: 0; width: var(--kw, 0px); height: calc(100% - 6px); border-radius: 999px;
  translate: var(--kx, 0px) -50%; scale: 0.6; opacity: 0; pointer-events: none;
  background: var(--knob); box-shadow: var(--knob-shadow);
  transition: translate var(--t-move) var(--spring), width var(--t-move) var(--spring),
    scale var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.knob.is-placed { scale: 1; opacity: 1; transition-duration: var(--t-move), var(--t-move), var(--t-move), var(--t-fast); transition-timing-function: var(--spring), var(--spring), var(--spring), var(--ease); }
.knob--hover {
  z-index: 0; overflow: hidden;
  background: var(--ribs), var(--jelly); box-shadow: var(--jelly-shadow);
  transition-duration: var(--t-hand), var(--t-hand), var(--t-fast), var(--t-fast);
}
.knob--hover.is-placed { transition-duration: var(--t-hand), var(--t-hand), var(--t-hand), var(--t-fast); }
/* the jelly's gloss cap: a moulded highlight across the upper half, clear of the ends */
.knob--hover::before {
  content: ""; position: absolute; left: 7px; right: 7px; top: 1px; height: 50%; border-radius: 999px 999px 60% 60% / 999px 999px 40% 40%;
  background: var(--jelly-gloss);
}
/* a knob that appears takes its place first and grows there (it never slides in from where it last was) */
.knob.is-jump { transition-property: scale, opacity; transition-duration: var(--t-move), var(--t-fast); transition-timing-function: var(--spring), var(--ease); }
.knob--hover.is-jump { transition-duration: var(--t-hand), var(--t-fast); }
.capsule > .knob.no-anim { transition: none; }
/* reduced motion: the knobs only fade, in place */
@media (prefers-reduced-motion: reduce) {
  .capsule > .knob { scale: 1; transition: opacity var(--t-fast) linear !important; }
}
/* without JavaScript nothing is current, and the teal is drawn on the link itself */
@media (hover: hover) {
  html:not(.js) .capsule a:hover { color: var(--teal-ink); text-shadow: var(--teal-shade); background: var(--ribs), var(--jelly); box-shadow: var(--jelly-shadow); }
}
html:not(.js) .capsule a:focus-visible { color: var(--teal-ink); text-shadow: var(--teal-shade); background: var(--ribs), var(--jelly); box-shadow: var(--jelly-shadow); }

/* The middle widths: wherever the wordmark, centred, would come within 120px of the capsule, it rests in its
   slot at the left instead (header.js MARK_CLEAR measures; this range is the same decision before it has). The
   home page's no-JavaScript wordmark (.hero-mark, site.css) does the same. */
@media (min-width: 821px) and (max-width: 1167px) {
  :is(.home, .nf-page) .bar:not(.scrolled) .bar-mark { translate: var(--mark-dx, 0px) 0; }
  .hero .hero-mark { left: var(--frame); translate: 0 -50%; }
}

/* ------------------------------------------------------------------ the legal dialog
   One dialog motion (shared with the egg): in over --t-ui, rising 12px from .985; out over --t-fast, 6px down. */
.legal {
  width: min(680px, calc(100vw - 2 * var(--gutter))); max-height: min(84vh, 820px); padding: 0; border: 0; border-radius: 22px;
  color: var(--ink); background: var(--raised); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(10, 11, 12, 0.08), inset 0 1px 0 #fff, 0 60px 90px -44px rgba(12, 22, 32, 0.45), 0 16px 28px -18px rgba(12, 22, 32, 0.3);
  opacity: 0; translate: 0 6px;
  transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease), scale var(--t-fast) var(--ease),
    overlay var(--t-fast) var(--ease) allow-discrete, display var(--t-fast) var(--ease) allow-discrete;
}
.legal[open] { display: flex; flex-direction: column; opacity: 1; translate: 0 0; scale: 1; transition-duration: var(--t-ui); }
@starting-style { .legal[open] { opacity: 0; translate: 0 12px; scale: 0.985; } }
.legal::backdrop {
  background: rgba(236, 239, 242, 0.62); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), overlay var(--t-fast) var(--ease) allow-discrete, display var(--t-fast) var(--ease) allow-discrete;
}
.legal[open]::backdrop { opacity: 1; transition-duration: var(--t-ui); }
@starting-style { .legal[open]::backdrop { opacity: 0; } }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px solid var(--hair); }
.legal-title { font-family: var(--display); font-size: var(--d2); line-height: var(--d2-lh); letter-spacing: var(--d2-ls); }
.legal-body { overflow: auto; padding: var(--s4) var(--s5) var(--s5); overscroll-behavior: contain; }
/* the text scrolls: it takes focus from the keyboard, with the ring drawn inside the panel */
.legal-body:focus-visible { outline-offset: calc(-1 * var(--ring-offset)); }
.legal-body h3 { margin: var(--s4) 0 var(--s1); font-family: var(--display); font-size: var(--d1); line-height: var(--d1-lh); letter-spacing: var(--d1-ls); }
.legal-body p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--graphite); }
.legal-body p + p { margin-top: var(--s2); }
.legal-body .legal-co { color: var(--ink); }
/* without JavaScript the link still shows the text, and its Close is a link back to the footer (the dialog's
   own button needs the script) */
html:not(.js) .legal:target { display: block; position: fixed; inset: 6vh var(--gutter) auto; margin: 0 auto; z-index: 300; overflow: auto; opacity: 1; translate: none; }
.legal-close-nojs { display: none; }
html:not(.js) .legal-close-nojs { display: inline-block; }
html:not(.js) .legal-head form { display: none; }
html:has(dialog.legal[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .legal, .legal::backdrop { transition: none; }
}

/* ================================================================== tablet and phone: at 820 the wordmark rests at the
   left; at 600 (and on a screen 480 tall or less) the phone's capsule. 400, 374 and 340 only fit the capsule (measured
   at 414/390/375/360/320: every link a 40px target, and the bar still fits inside the frame with at least 8px between
   the capsule and the wordmark) */
@media (max-width: 820px) {
  .bar .bar-mark, :is(.home, .nf-page) .bar:not(.scrolled) .bar-mark { translate: none; }
  .legal-head { padding: var(--s4) var(--gutter) var(--s3); }
  .legal-body { padding: var(--s3) var(--gutter) var(--s4); }
}
@media (max-width: 600px), (max-height: 480px) {
  .bar { gap: var(--s1); }
  .capsule { padding: 2px; gap: 2px; }
  .capsule a:focus-visible { outline-offset: 0; }
  .capsule::before { left: 8px; right: 8px; }
  .capsule a { font-size: 12.5px; padding: 13px 8px 14px; }
  .knob { height: calc(100% - 4px); }
}
@media (max-width: 400px) {
  .capsule a { padding: 13px 6px 14px; letter-spacing: -0.01em; }
}
/* the smaller type keeps a 40px target */
@media (max-width: 374px) {
  .capsule a { font-size: 12px; padding-block: 13.5px 14.5px; }
}
@media (max-width: 340px) {
  .capsule a { font-size: 11px; padding: 14px 4px 15px; }
}

/* ================================================================== the modes the site was not designed for
   Forced colours: the system draws the colours, so the controls get real borders, the current capsule item a ring,
   and the slips a frame (the metal's glow behind text is turned off by main.js). More contrast: the dim greys of the
   black come up, and the faint rain behind the definition goes (main.js). */
@media (forced-colors: active) {
  .capsule a, .chip, .rx-row, .ex-row, .hw-key, .sticker, .btn { border: 1px solid ButtonText; }
  .capsule a.is-on, .capsule a[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
  .knob { display: none; }
  :focus-visible { outline: 2px solid Highlight !important; }
  .slip-dlg, .xr-legend { border: 1px solid CanvasText; }
}
@media (prefers-contrast: more) {
  :root { --dark-2: #c3cecf; --dark-dim: #b4c1c3; --dark-rule: rgba(225, 233, 233, 0.32); --quiet: #3f454b; }
}

/* the knob as a scrubber (header.js): a sideways drag along the capsule moves the platinum knob and the page; while it
   moves the knob follows the hand at once, and the links keep their colour changes quick */
.capsule { touch-action: pan-y; }
.capsule.is-scrubbing { cursor: grabbing; }
.capsule.is-scrubbing a { cursor: grabbing; }
.capsule.is-scrubbing > .knob:not(.knob--hover) { transition: none; scale: 1; opacity: 1; }