/* =========================================================
   Night Signal · site-2026.css
   Shared foundation of the 2026 redesign: tokens, base, type, buttons, header + mega menu, mini player, footer,
   forms kit, image utilities. Every page links this first, then home-2026.css (index) or inner-2026.css (everything else).
   Built from dev/css/*.css by dev/build.py (the dev folder is not shipped).

   IDENTITY: "flyer and booth". Near-black night surfaces (the booth) alternate with bone-paper bands (the flyer).
   ONE action colour: signal red-pink. Buttons carry WHITE text on it. Text-sized signal colour is --c-sig, which changes
   per surface (pink on night, deep red on bone) so it always clears 4.5:1.
   Type: Big Shoulders Display (condensed poster headlines, uppercase), Instrument Sans (text, 17px), JetBrains Mono
   (time-codes, BPM, prices, labels; never under 14px). All three are self-hosted (OFL, see assets/fonts).
   Variable names here are brand-specific (--night, --bone, --signal, --c-*).

   CONTRAST (WCAG 2.x)
     white on --signal #d1124e 5.37 · on hover #b80e42 6.5
     night bands : #f4f1ea on #0c0c11 17.3 · #b1aebd (dim) on #14141b 8.43, on #1d1d27 7.68 · #ff6f96 (sig) on #0c0c11 7.4, on #14141b 6.95, on #1d1d27 6.34
     bone bands  : #111116 on #f2ede3 16.1 · #55524c (dim) on #f2ede3 6.67, on #e8e1d3 5.98 · #b3003f (sig) on #f2ede3 6.02, on #e8e1d3 5.4
     fields      : white box, 1px line #76726a (>= 3:1 on bone, bone-2, white and night); focus ring white on night, ink on bone
   NO MOTION: no transitions, animations, smooth scrolling or hover lifts anywhere. Hover is an instant colour change.
   ONE EXCEPTION (owner's rule): the 1px border on .edge tiles fades its opacity in 200ms, only under
   prefers-reduced-motion: no-preference. (document.getAnimations() is empty at rest.)
   READABILITY: nothing under 14px, body 17px, tap targets >= 44px, paragraphs capped at 66ch.
   ========================================================= */
@font-face { font-family: "Big Shoulders Display"; src: url("../assets/fonts/big-shoulders-display-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../assets/fonts/instrument-sans-latin-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks (advance widths and hhea measured from the shipped files) so the swap barely moves anything. */
@font-face { font-family: "Shoulders Fallback"; src: local("Arial Narrow"), local("LiberationSansNarrow"), local("Liberation Sans Narrow"), local("Arial"); size-adjust: 86%; ascent-override: 114%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 105%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* night (the booth) */
  --night: #0c0c11; --night-2: #14141b; --night-3: #1d1d27; --night-deep: #07070a; --night-line: #2e2e3d; --night-line-2: #4a4a5f;
  --on-night: #f4f1ea; --on-night-soft: #dcd8cf; --on-night-dim: #b1aebd;
  /* bone (the flyer) */
  --bone: #f2ede3; --bone-2: #e8e1d3; --paper: #fbf8f2; --ink: #111116; --ink-soft: #34322d; --muted: #55524c; --bone-line: #cfc7b6; --bone-line-2: #8c8576;
  /* signal: the one action colour (white text on it) */
  --signal: #d1124e; --signal-hover: #b80e42; --signal-hi: #ff6f96; --signal-ink: #b3003f;
  --danger-light: #a60039; --danger-night: #ff8fa6; --success: #1f6b3a; --success-night: #7fe0a0;

  /* fonts */
  --font-display: "Big Shoulders Display", "Shoulders Fallback", "Arial Narrow", Impact, sans-serif;
  --font-text: "Instrument Sans", "Instrument Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* type scale */
  --t-hero: clamp(3.5rem, 1rem + 11vw, 9rem);
  --t-h1: clamp(3rem, 1.2rem + 7vw, 6.5rem);
  --t-h2: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  --t-h3: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  --t-lede: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  --t-body: 1.0625rem; --t-small: 1rem; --t-meta: .875rem;
  --lh-body: 1.6;
  /* 4px spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px; --s-9: 64px; --s-10: 96px;
  --wrap: 1280px; --gutter: clamp(20px, 4vw, 48px);
  --header-h: 72px;
  --sec: clamp(64px, 9vw, 128px);
  --r-btn: 2px; --r-field: 4px;
  /* imagery */
  --img-grade: contrast(1.03) saturate(1.04);
  --img-ph: #1d1d27;
  --img-ring: rgb(255 255 255 / .12);
  /* surface context (default = night). .band-light flips these. */
  --c-bg: var(--night); --c-fg: var(--on-night); --c-fg-soft: var(--on-night-soft); --c-dim: var(--on-night-dim);
  --c-sig: var(--signal-hi); --c-panel: var(--night-2); --c-panel-2: var(--night-3); --c-rule: var(--night-line); --c-rule-2: var(--night-line-2);
  --c-focus: #ffffff; --c-edge: var(--signal-hi);
  --c-btn: var(--signal); --c-btn-hover: var(--signal-hover);
  --viz-a: #ff6f96; --viz-b: #d1124e;
  color-scheme: dark;
}
:root { --eq-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='0.35' y='78.0' width='1.38' height='22.0'/%3E%3Crect x='2.43' y='46.9' width='1.38' height='53.1'/%3E%3Crect x='4.52' y='77.2' width='1.38' height='22.8'/%3E%3Crect x='6.6' y='52.6' width='1.38' height='47.4'/%3E%3Crect x='8.68' y='75.2' width='1.38' height='24.8'/%3E%3Crect x='10.77' y='64.7' width='1.38' height='35.3'/%3E%3Crect x='12.85' y='71.4' width='1.38' height='28.6'/%3E%3Crect x='14.93' y='45.5' width='1.38' height='54.5'/%3E%3Crect x='17.02' y='6.2' width='1.38' height='93.8'/%3E%3Crect x='19.1' y='28.9' width='1.38' height='71.1'/%3E%3Crect x='21.18' y='69.0' width='1.38' height='31.0'/%3E%3Crect x='23.27' y='52.9' width='1.38' height='47.1'/%3E%3Crect x='25.35' y='57.7' width='1.38' height='42.3'/%3E%3Crect x='27.43' y='37.7' width='1.38' height='62.3'/%3E%3Crect x='29.52' y='37.2' width='1.38' height='62.8'/%3E%3Crect x='31.6' y='74.8' width='1.38' height='25.2'/%3E%3Crect x='33.68' y='59.6' width='1.38' height='40.4'/%3E%3Crect x='35.77' y='57.0' width='1.38' height='43.0'/%3E%3Crect x='37.85' y='39.3' width='1.38' height='60.7'/%3E%3Crect x='39.93' y='64.4' width='1.38' height='35.6'/%3E%3Crect x='42.02' y='72.6' width='1.38' height='27.4'/%3E%3Crect x='44.1' y='72.1' width='1.38' height='27.9'/%3E%3Crect x='46.18' y='41.5' width='1.38' height='58.5'/%3E%3Crect x='48.27' y='0.6' width='1.38' height='99.4'/%3E%3Crect x='50.35' y='28.0' width='1.38' height='72.0'/%3E%3Crect x='52.43' y='75.3' width='1.38' height='24.7'/%3E%3Crect x='54.52' y='75.7' width='1.38' height='24.3'/%3E%3Crect x='56.6' y='73.1' width='1.38' height='26.9'/%3E%3Crect x='58.68' y='45.9' width='1.38' height='54.1'/%3E%3Crect x='60.77' y='51.7' width='1.38' height='48.3'/%3E%3Crect x='62.85' y='63.1' width='1.38' height='36.9'/%3E%3Crect x='64.93' y='65.8' width='1.38' height='34.2'/%3E%3Crect x='67.02' y='43.7' width='1.38' height='56.3'/%3E%3Crect x='69.1' y='32.1' width='1.38' height='67.9'/%3E%3Crect x='71.18' y='52.1' width='1.38' height='47.9'/%3E%3Crect x='73.27' y='49.7' width='1.38' height='50.3'/%3E%3Crect x='75.35' y='56.0' width='1.38' height='44.0'/%3E%3Crect x='77.43' y='45.1' width='1.38' height='54.9'/%3E%3Crect x='79.52' y='7.2' width='1.38' height='92.8'/%3E%3Crect x='81.6' y='36.4' width='1.38' height='63.6'/%3E%3Crect x='83.68' y='68.6' width='1.38' height='31.4'/%3E%3Crect x='85.77' y='63.0' width='1.38' height='37.0'/%3E%3Crect x='87.85' y='71.6' width='1.38' height='28.4'/%3E%3Crect x='89.93' y='57.5' width='1.38' height='42.5'/%3E%3Crect x='92.02' y='73.7' width='1.38' height='26.3'/%3E%3Crect x='94.1' y='45.2' width='1.38' height='54.8'/%3E%3Crect x='96.18' y='64.5' width='1.38' height='35.5'/%3E%3Crect x='98.27' y='42.0' width='1.38' height='58.0'/%3E%3C/svg%3E"); }

/* ---------- surfaces ---------- */
.band { background: var(--c-bg); color: var(--c-fg); padding-block: var(--sec); }
.band-surface { --c-bg: var(--night-2); --c-panel: var(--night-3); --c-panel-2: #26263a; --img-ph: #26263a; }
.band-light, .on-light, .on-light-surface {
  --c-bg: var(--bone); --c-fg: var(--ink); --c-fg-soft: var(--ink-soft); --c-dim: var(--muted); --c-sig: var(--signal-ink);
  --c-panel: var(--paper); --c-panel-2: var(--bone-2); --c-rule: var(--bone-line); --c-rule-2: var(--bone-line-2);
  --c-focus: var(--ink); --c-edge: var(--signal-ink); --img-ph: var(--bone-2); --img-ring: rgb(17 17 22 / .14);
  --viz-a: #b3003f; --viz-b: #111116;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-4)); background: var(--night-deep); }
body {
  margin: 0; background: var(--night); color: var(--on-night);
  font: 400 var(--t-body)/var(--lh-body) var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
html.js body { padding-bottom: 76px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
main:focus { outline: none; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: 12px 20px; background: #fff; color: var(--ink); font-weight: 700; }
.skip-link:focus { top: var(--s-4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.noscript { margin: 0; padding: 14px var(--gutter); background: var(--bone); color: var(--ink); font-size: var(--t-small); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1, h2, .display {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: .004em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font: 700 1.25rem/1.25 var(--font-text); }
h1 em, h2 em, .display em { font-style: normal; color: var(--c-sig); }
.mono { font-family: var(--font-mono); font-size: var(--t-meta); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.kicker { margin: 0 0 var(--s-4); font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-sig); }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.lede { font-size: var(--t-lede); line-height: 1.55; color: var(--c-fg-soft); max-width: 58ch; }
.muted { color: var(--c-dim); }
p, li, dd { max-width: 66ch; }
.badge {
  display: inline-block; margin: 0 0 var(--s-3); padding: 4px 10px; border: 1px solid currentColor; border-radius: 2px;
  font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-sig);
}
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: clamp(32px, 5vw, 64px); }
.sec-head h2 { max-width: 16ch; }
.more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--c-sig); }
.more:hover { color: var(--c-sig); }
.ar { width: 20px; height: 20px; flex: none; }
.ic { width: 20px; height: 20px; flex: none; }
.stretch { text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: -3px; }
/* equaliser rule: a static bar-graph divider (deterministic bars, no motion) */
.eq { display: block; width: 100%; max-width: 360px; height: 40px; background: var(--c-sig); -webkit-mask: var(--eq-svg) left center / 100% 100% no-repeat; mask: var(--eq-svg) left center / 100% 100% no-repeat; }
/* edge tile: a 1px signal border that fades in on hover/focus (the only permitted motion, see end of file) */
.edge { position: relative; }
.edge::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--c-edge); opacity: 0; pointer-events: none; z-index: 2; }
.edge:hover::before, .edge:focus-within::before { opacity: 1; }
.noscript-note { padding: var(--s-4) var(--s-5); border: 1px dashed var(--c-rule-2); }
html.js .nojs-only { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--r-btn); background: transparent; color: var(--c-fg);
  font: 700 1rem/1.1 var(--font-text); letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--c-btn); border-color: var(--c-btn); color: #fff; }
.btn-primary:hover { background: var(--c-btn-hover); border-color: var(--c-btn-hover); color: #fff; }
.btn-ghost { border-color: var(--c-fg); color: var(--c-fg); }
.btn-ghost:hover { background: var(--c-fg); color: var(--c-bg); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: var(--t-small); }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; }
.btn-tiny { min-height: 44px; padding: 0 16px; font-size: var(--t-small); border-color: var(--c-rule-2); }
.btn-tiny:hover { background: var(--c-fg); border-color: var(--c-fg); color: var(--c-bg); }
.btn[aria-busy="true"] { cursor: progress; background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .18) 0 8px, transparent 8px 16px); }
.btn[aria-busy="true"]::after { content: "…"; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-panel-2); border-color: var(--c-rule-2); border-style: dashed; color: var(--c-dim); cursor: not-allowed; }
.btn:disabled:hover { background: var(--c-panel-2); color: var(--c-dim); }

/* lists and small shared parts */
.saved-list { list-style: none; display: grid; gap: var(--s-2); margin: var(--s-4) 0; padding: 0; }
.saved-list li { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--c-sig); background: var(--c-panel-2); font-size: var(--t-small); line-height: 1.45; max-width: none; }
.saved-list strong { font-weight: 700; }
.form-error { margin: 0; font-weight: 600; color: var(--form-error); }
.form-error:empty { display: none; }

/* =========================================================
   HEADER · utility strip + sticky bar + mega menu (>=1100px) / drawer (<1100px)
   The header nav never wraps. Mega panels hang from the header, full width, solid, instant.
   ========================================================= */
.sh-util { background: var(--night-deep); color: var(--on-night-dim); border-bottom: 1px solid var(--night-line); }
.sh-util .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-5); padding-block: 8px; }
.sh-util p { margin: 0; max-width: none; font: 500 var(--t-meta)/1.4 var(--font-mono); letter-spacing: .04em; }
.sh { position: sticky; top: 0; z-index: 60; background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night-line); --c-focus: #fff; }
.sh-in { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); }
.sh-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--on-night); text-decoration: none; flex: none; }
.sh-brand b { font: 800 1.75rem/1 var(--font-display); letter-spacing: .06em; white-space: nowrap; }
.sh-brand i { font-style: normal; color: var(--signal-hi); }
.sh-mark { width: 34px; height: 34px; fill: var(--signal-hi); }
.sh-nav { margin-left: auto; display: none; }
.sh-nav ul { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.sh-nav li { display: flex; align-items: stretch; max-width: none; }
.sh-link { display: inline-flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 14px; color: var(--on-night); font: 600 1rem/1 var(--font-text); text-decoration: none; white-space: nowrap; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; }
.sh-link:hover, .sh-chev:hover { color: var(--signal-hi); }
.sh-link[aria-current="page"], .sh-link.is-section { border-bottom-color: var(--signal-hi); }
.sh-link[aria-current="true"] { border-bottom-color: var(--signal-hi); }
.sh-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-has-mega > .sh-link:not(.sh-chev) { padding-right: 0; }
.sh-chev { display: inline-flex; align-items: center; justify-content: center; height: var(--header-h); width: 44px; padding: 0; background: none; border: 0; color: var(--on-night); }
.sh-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-chev-label { width: auto; padding: 0 14px; gap: 6px; font: 600 1rem/1 var(--font-text); border-bottom: 3px solid transparent; }
.sh-has-mega.is-open > .sh-chev svg { transform: rotate(180deg); }
.sh-actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.sh-cta { display: none; }
/* mega panel */
.sh-mega { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--night-2); border-bottom: 1px solid var(--night-line-2); box-shadow: 0 24px 48px rgb(0 0 0 / .5); max-height: calc(100svh - var(--header-h) - 56px); overflow-y: auto; overscroll-behavior: contain; }
.sh-has-mega.is-open > .sh-mega { display: block; }
html:not(.js) .sh-has-mega:hover > .sh-mega, html:not(.js) .sh-has-mega:focus-within > .sh-mega { display: block; }
.sh-mega-in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: var(--s-6) var(--s-7); display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: var(--s-8); }
.sh-mega-head { display: grid; gap: var(--s-1); margin-bottom: var(--s-4); }
.sh-mega-k { margin: 0; font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-hi); }
.sh-mega-sum { margin: 0; font: 400 1.0625rem/1.5 var(--font-text); color: var(--on-night-dim); max-width: 52ch; }
.sh-mega ul.sh-mega-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-5); padding: 0; margin: 0; }
.sh-mega-list li { max-width: none; }
.sh-mega-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: 10px; min-height: 72px; text-decoration: none; color: var(--on-night); }
.sh-mega-list a:hover { background: var(--night-3); }
.sh-mega-list a:hover b { color: var(--signal-hi); }
.sh-mega-list picture { display: block; width: 72px; height: 72px; background: var(--night-3); }
.sh-mega-list img { width: 72px; height: 72px; object-fit: cover; }
.sh-mega-list .mt { display: grid; gap: 2px; min-width: 0; }
.sh-mega-list b { font: 700 1.0625rem/1.25 var(--font-text); }
.sh-mega-list small { font: 400 var(--t-small)/1.35 var(--font-text); color: var(--on-night-dim); }
.sh-mega-all { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-4); margin-left: 10px; min-height: 44px; color: var(--on-night); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--signal-hi); }
.sh-mega-all:hover { color: var(--signal-hi); }
.sh-mega-feat { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4); background: var(--night-3); color: var(--on-night); text-decoration: none; }
.sh-mega-feat picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: var(--s-2); }
.sh-mega-feat img { width: 100%; height: 100%; object-fit: cover; }
.sh-mega-fk { font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-hi); }
.sh-mega-feat b { font: 800 1.875rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.sh-mega-feat small { font: 400 var(--t-small)/1.45 var(--font-text); color: var(--on-night-dim); }
.sh-mega-go { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-2); min-height: 44px; font-weight: 700; }
.sh-mega-feat:hover b, .sh-mega-feat:hover .sh-mega-go { color: var(--signal-hi); }
/* drawer (<1100px): native <details> */
.sh-drawer summary { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 2px solid var(--on-night-dim); border-radius: var(--r-btn); font-weight: 700; list-style: none; cursor: pointer; }
.sh-drawer summary::-webkit-details-marker { display: none; }
.sh-drawer summary:hover { background: var(--on-night); color: var(--night); }
.sh-drawer summary svg { width: 22px; height: 22px; }
.sh-drawer .i-close { display: none; }
.sh-drawer[open] .i-close { display: block; }
.sh-drawer[open] .i-open { display: none; }
.sh-drawer-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--night-2); border-bottom: 1px solid var(--night-line-2); max-height: calc(100svh - var(--header-h) - 56px); overflow-y: auto; padding: var(--s-4) var(--gutter) var(--s-6); box-shadow: 0 24px 48px rgb(0 0 0 / .5); }
.sh-drawer-panel nav { display: grid; max-width: 640px; margin-inline: auto; }
.sh-d-link { display: flex; align-items: center; min-height: 52px; padding: 0 var(--s-2); color: var(--on-night); font: 600 1.125rem/1.2 var(--font-text); text-decoration: none; border-bottom: 1px solid var(--night-line); }
.sh-d-link:hover { color: var(--signal-hi); }
.sh-d-link[aria-current="page"] { color: var(--signal-hi); box-shadow: inset 3px 0 0 var(--signal-hi); }
.sh-d-sub { padding-left: var(--s-5); font-weight: 400; font-size: 1.0625rem; color: var(--on-night-soft); min-height: 48px; }
.sh-d-h { margin: var(--s-5) 0 0; padding: 0 var(--s-2) var(--s-2); font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-hi); border-bottom: 1px solid var(--night-line-2); }
.sh-d-cta { display: flex; max-width: 640px; margin: var(--s-5) auto 0; }
@media (min-width: 480px) { .sh-cta { display: inline-flex; } }
@media (min-width: 1100px) {
  .sh-nav { display: block; }
  .sh-drawer { display: none; }
  .sh-actions { margin-left: var(--s-3); }
  .sh-cta { display: inline-flex; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .sh-link { padding: 0 10px; font-size: .9375rem; }
  .sh-chev-label { padding: 0 10px; }
  .sh-chev:not(.sh-chev-label) { width: 40px; }
  .sh-brand b { font-size: 1.5rem; }
  .sh-in { gap: var(--s-4); }
}
@media (max-width: 479px) {
  .sh-brand b { font-size: 1.5rem; }
  .sh-mark { width: 30px; height: 30px; }
  .sh-drawer summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sh-drawer summary { padding: 0 12px; min-width: 48px; justify-content: center; }
  .sh-util .wrap p + p { display: none; }
}

/* =========================================================
   MINI PLAYER · fixed bottom bar, functional only
   ========================================================= */
.mp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; background: var(--night-deep); color: var(--on-night); border-top: 2px solid var(--signal); --c-focus: #fff; }
html:not(.js) .mp { display: none; }
.mp-in { display: grid; grid-template-columns: auto minmax(120px, 240px) minmax(100px, 1fr) auto auto; align-items: center; gap: var(--s-5); width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; min-height: 72px; }
.mp-transport { display: flex; gap: 2px; }
.ib { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; border-radius: var(--r-btn); color: var(--on-night); }
.ib:hover { color: var(--signal-hi); }
.ib svg { width: 22px; height: 22px; }
.ib-play { background: var(--signal); color: #fff; }
.ib-play:hover { background: var(--signal-hover); color: #fff; }
.ib-play .when-playing { display: none; }
.ib-play[data-state="playing"] .when-playing { display: block; }
.ib-play[data-state="playing"] .when-paused { display: none; }
.ib[aria-pressed="true"] { color: var(--signal-hi); box-shadow: inset 0 -3px 0 var(--signal-hi); }
.mp-meta { min-width: 0; }
.mp-k { display: none; margin: 0; font: 500 var(--t-meta)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-night-dim); }
.mp-title { margin: 0; font: 700 1.0625rem/1.25 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-sub { margin: 0; font: 400 var(--t-meta)/1.3 var(--font-mono); color: var(--on-night-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-meter { display: flex; align-items: end; gap: 3px; height: 28px; }
.mp-meter span { width: 4px; height: var(--h, 20%); min-height: 3px; background: var(--signal-hi); }
.mp-tools { display: flex; align-items: center; gap: var(--s-2); }
.mp-tools .vol { width: 96px; }
.mp-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--on-night-dim); border-radius: var(--r-btn); color: var(--on-night); font-weight: 700; text-decoration: none; }
.mp-open:hover { background: var(--on-night); color: var(--night); }
@media (max-width: 1099px) { .mp-meter { display: none; } .mp-in { grid-template-columns: auto minmax(100px, 220px) minmax(80px, 1fr) auto; gap: var(--s-4); } }
@media (max-width: 799px) { .mp-tools .vol, .mp-tools [data-control="mute"] { display: none; } .mp-in { grid-template-columns: auto minmax(0, 1fr) minmax(70px, 1fr) auto; } }
@media (max-width: 599px) { .mp-seek { display: none; } .mp-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); } .mp-sub { display: none; } }

/* range sliders: fader-style thumb. Colours come from --rg-* so they sit on dark and light. */
input[type="range"] {
  --p: 0%; --rg-fill: var(--signal-hi); --rg-track: #50506a; --rg-edge: #fff; --rg-thumb: #fff;
  appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; accent-color: var(--signal);
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--rg-fill) var(--p), var(--rg-track) var(--p)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 30px; margin-top: -12px; border-radius: 2px; background: var(--rg-thumb); border: 2px solid var(--rg-edge); box-shadow: inset 0 0 0 3px var(--rg-thumb), inset 0 -2px 0 3px var(--rg-fill); }
input[type="range"]::-moz-range-track { height: 6px; background: var(--rg-track); }
input[type="range"]::-moz-range-progress { height: 6px; background: var(--rg-fill); }
input[type="range"]::-moz-range-thumb { width: 10px; height: 26px; border-radius: 2px; background: var(--rg-thumb); border: 2px solid var(--rg-edge); }
input[type="range"]:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
input[type="range"]:disabled { cursor: not-allowed; --rg-fill: #6b6b80; }
.on-light input[type="range"], .band-light input[type="range"], .card-light input[type="range"] { --rg-fill: var(--ink); --rg-track: #cfc7b6; --rg-edge: var(--ink); --rg-thumb: #fff; }
@media (forced-colors: active) { input[type="range"] { appearance: auto; accent-color: Highlight; } }

/* =========================================================
   FOOTER · compact columns, one thin legal row
   ========================================================= */
.sf { background: var(--night-deep); color: var(--on-night-dim); border-top: 1px solid var(--night-line); --c-focus: #fff; }
.sf-top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-8); padding-block: var(--s-8) var(--s-6); }
.sf-brand .sh-brand b { font-size: 1.5rem; }
.sf-brand p { margin: var(--s-3) 0 0; font-size: var(--t-small); line-height: 1.55; max-width: 44ch; }
.sf-col h2 { margin: 0 0 var(--s-2); font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-hi); }
.sf-col ul { list-style: none; padding: 0; margin: 0; }
.sf-col li { max-width: none; }
.sf-col a { display: flex; align-items: center; min-height: 44px; color: var(--on-night); font-size: var(--t-small); text-decoration: none; }
.sf-col a:hover { color: var(--signal-hi); text-decoration: underline; }
.sf-col a[aria-current="page"] { color: var(--signal-hi); }
.sf-note { font-size: var(--t-small); color: var(--on-night-dim); line-height: 1.45; padding-block: 6px; }
.sf-legal { display: grid; gap: var(--s-2) var(--s-6); grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-block: var(--s-4); border-top: 1px solid var(--night-line); }
.sf-legal p { margin: 0; max-width: none; font-size: var(--t-meta); line-height: 1.5; }
.sf-small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); }
.sf-small a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-night); font-weight: 600; }
.sf-small a:hover { color: var(--signal-hi); }
@media (max-width: 899px) { .sf-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-brand { grid-column: 1 / -1; } .sf-legal { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .sf-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } .sf-col:last-child { grid-column: 1 / -1; } }

/* =========================================================
   FORMS KIT · reusable component layer (see forms-demo.html for every state)
   Markup contract:
     .field            stacked label + control + .field-hint / .field-error
     .field--float     floating-label variant (input needs placeholder=" ")
     .input-group      input with .affix prefix/suffix (£, hours, guests)
     select            native <select>; styled closed state everywhere, styled popup where `appearance: base-select` exists
     .check / .switch  checkbox + radio / toggle (label wraps the input)
     input[type=range] + <output> readout, .seg segmented radio group
     .btn[aria-busy] loading, .btn:disabled
   Validation: :user-invalid / :user-valid (after interaction), [aria-invalid="true"] or .field[data-invalid] for scripted errors.
   Controls are ALWAYS light boxes (white, ink text, 1px #76726a line >= 3:1 on every surface). .on-dark only flips the
   text around them (label, hint, error); .on-light switches back. Targets >= 44px, input text 17px (no iOS zoom).
   ========================================================= */
:root {
  --field-h: 52px; --field-px: 16px;
  --field-bg: #ffffff; --field-ink: #111116; --field-dim: #55524c; --field-line: #76726a; --field-line-hover: #111116;
  --field-danger-bg: #fdecf0;
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13Zm-.75 3.25h1.5v4h-1.5v-4Zm.75 6.9a.9.9 0 1 1 0-1.8.9.9 0 0 1 0 1.8Z'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m4.5 7.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --i-chev-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23111116' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m4.5 7.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
@media (prefers-contrast: more) { :root { --field-line: #111116; } }
:root, .on-light { --form-label: var(--c-fg); --form-hint: var(--c-dim); --form-error: var(--danger-light); }
.band-light, .on-light { --form-label: var(--ink); --form-hint: var(--muted); --form-error: var(--danger-light); }
.on-dark, .band:not(.band-light) { --form-label: #fff; --form-hint: var(--on-night-dim); --form-error: var(--danger-night); }
.on-dark { color: #fff; }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label, .field > .label, .label { font: 600 var(--t-small)/1.3 var(--font-text); color: var(--form-label); }
.field-opt { font-weight: 400; color: var(--form-hint); margin-left: var(--s-1); }
.field-hint, .field-error { margin: 0; font-size: var(--t-small); line-height: 1.4; color: var(--form-hint); max-width: none; }
.field-error { display: none; gap: var(--s-2); align-items: flex-start; color: var(--form-error); font-weight: 600; }
.field-error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .2em; background: currentColor; -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat; }
.field:has(:user-invalid, [aria-invalid="true"]) .field-error, .field[data-invalid] .field-error { display: flex; }
.field:has(:user-invalid, [aria-invalid="true"]) .field-hint, .field[data-invalid] .field-hint { display: none; }

.input,
.field input:not([type="range"], [type="radio"], [type="checkbox"], [type="hidden"], [type="submit"], [type="button"], [type="file"]),
.field textarea {
  width: 100%; min-height: var(--field-h); padding: 0 var(--field-px);
  background: var(--field-bg); color: var(--field-ink); border: 1px solid var(--field-line); border-radius: var(--r-field);
  font: 400 var(--t-body)/1.4 var(--font-text);
}
.field textarea { min-height: 8rem; padding-block: 14px; resize: vertical; field-sizing: content; }
.input:hover, .field input:hover:not(:disabled), .field textarea:hover:not(:disabled) { border-color: var(--field-line-hover); }
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible { border-color: var(--field-ink); outline: 3px solid var(--c-focus); outline-offset: 2px; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--field-dim); opacity: 1; }
.input:user-invalid, .field input:user-invalid, .field textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .field[data-invalid] :where(input, select, textarea) {
  border-color: var(--danger-light); box-shadow: inset 0 0 0 1px var(--danger-light); background-color: var(--field-danger-bg);
}
.field input:required:user-valid:not([type="range"], [type="radio"], [type="checkbox"]) {
  border-color: var(--success); padding-inline-end: calc(var(--field-px) + 28px);
  background: var(--field-bg) var(--i-check) no-repeat right var(--field-px) center / 18px;
}
.input:disabled, .field input:disabled:not([type="range"], [type="radio"], [type="checkbox"]), .field textarea:disabled, select:disabled {
  background-color: #e6e2d9; border-color: #b9b3a4; color: #6b675f; cursor: not-allowed;
}
.field input:read-only:not(:disabled, [type="range"]) { border-style: dashed; background: #f6f3ec; }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--field-bg) inset; -webkit-text-fill-color: var(--field-ink); }

/* floating label: sits INSIDE the white box, so it keeps ink colours on every surface */
.field--float { position: relative; }
.field--float > label {
  position: absolute; z-index: 1; inset: 15px auto auto calc(var(--field-px) + 1px); max-width: calc(100% - 2 * var(--field-px) - 8px);
  font: 400 var(--t-body)/1.3 var(--font-text); color: var(--field-dim); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field.field--float input[placeholder] { min-height: 58px; padding-top: 24px; padding-bottom: 4px; }
.field--float input::placeholder { color: transparent; }
.field--float:has(input:focus, input:not(:placeholder-shown)) > label { top: 6px; font-size: var(--t-meta); font-weight: 600; color: var(--field-ink); }
.field--float:has(input:disabled) > label { color: #6b675f; }
.field--float:has([data-invalid], [aria-invalid="true"], :user-invalid) > label { color: var(--danger-light); }

.input-group { display: flex; align-items: stretch; min-height: var(--field-h); background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--r-field); overflow: hidden; }
.input-group:hover { border-color: var(--field-line-hover); }
.input-group:has(input:focus-visible) { border-color: var(--field-ink); outline: 3px solid var(--c-focus); outline-offset: 2px; }
.input-group:has(:user-invalid, [aria-invalid="true"]) { border-color: var(--danger-light); box-shadow: inset 0 0 0 1px var(--danger-light); background: var(--field-danger-bg); }
.input-group:has(input:disabled) { background: #e6e2d9; border-color: #b9b3a4; }
.field .input-group input { flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; outline: 0; }
.field .input-group input:focus-visible { outline: 0; }
.affix { display: grid; place-items: center; padding-inline: var(--s-4); background: #e8e1d3; color: #34322d; font: 600 var(--t-small)/1 var(--font-mono); white-space: nowrap; }
.affix:first-child { border-inline-end: 1px solid var(--field-line); }
.affix:last-child { border-inline-start: 1px solid var(--field-line); }

/* select: closed state (every browser) */
select {
  appearance: none; width: 100%; min-height: var(--field-h); padding: 0 var(--s-8) 0 var(--field-px);
  background: var(--field-bg) var(--i-chev-ink) no-repeat right 14px center / 18px;
  color: var(--field-ink); border: 1px solid var(--field-line); border-radius: var(--r-field); font: 400 var(--t-body)/1.4 var(--font-text); cursor: pointer;
}
select:hover:not(:disabled) { border-color: var(--field-line-hover); }
select:focus-visible { border-color: var(--field-ink); outline: 3px solid var(--c-focus); outline-offset: 2px; }
select:disabled { background-image: var(--i-chev); }
/* customizable popup (Chromium with appearance: base-select, fine pointers only). Touch keeps the OS picker, Firefox/Safari keep the native popup. */
@media (hover: hover) and (pointer: fine) {
  @supports (appearance: base-select) {
    select, select::picker(select) { appearance: base-select; }
    select, select:disabled { display: flex; align-items: center; background-image: none; }
    select::picker-icon { content: ""; width: 18px; height: 18px; margin-inline-start: auto; background: var(--field-ink); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
    select:open::picker-icon { rotate: 180deg; }
    select::picker(select) {
      box-sizing: border-box; min-inline-size: anchor-size(width); max-block-size: min(22rem, 50svh); margin-block: var(--s-1); padding: var(--s-1);
      background: #fff; color: var(--field-ink); border: 1px solid var(--field-line); border-radius: var(--r-field); box-shadow: 0 16px 40px rgb(0 0 0 / .35);
      font: 400 var(--t-body)/1.4 var(--font-text);
    }
    select option { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3); border-radius: 2px; color: var(--field-ink); cursor: pointer; }
    select option:hover, select option:focus-visible { background: #e8e1d3; }
    select option:checked { background: #111116; color: #fff; font-weight: 600; }
    select option:focus-visible { outline: 3px solid var(--field-ink); outline-offset: -3px; }
    select option:disabled { color: #6b675f; cursor: not-allowed; }
    select option::checkmark { order: 1; margin-inline-start: auto; }
    select optgroup label { display: block; padding: var(--s-3) var(--s-3) var(--s-1); font: 600 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #55524c; }
  }
}
@media (forced-colors: active) { select, select::picker(select) { appearance: auto; background-image: none; } }

/* checkbox / radio */
.check, .switch { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; cursor: pointer; font-size: var(--t-body); line-height: 1.35; color: var(--form-label); }
.check:has(:disabled), .switch:has(:disabled) { color: var(--form-hint); cursor: not-allowed; }
.check input, .switch input { appearance: none; flex: none; margin: 0; display: grid; place-content: center; cursor: inherit; background: #fff; border: 2px solid var(--field-line); }
.check input { width: 24px; height: 24px; border-radius: 3px; }
.check input[type="radio"] { border-radius: 50%; }
.check input:hover:not(:disabled), .switch input:hover:not(:disabled) { border-color: var(--field-line-hover); }
.check input[type="checkbox"]::after { content: ""; width: 16px; height: 16px; background: #fff; scale: 0; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.check input[type="checkbox"]:indeterminate::after { -webkit-mask: none; mask: none; height: 2px; width: 12px; scale: 1; }
.check input:checked, .check input[type="checkbox"]:indeterminate { background: #111116; border-color: #111116; }
.check input[type="checkbox"]:checked::after { scale: 1; }
.check input[type="radio"]:checked { background: #fff; box-shadow: inset 0 0 0 5px #111116; }
.check input:user-invalid { border-color: var(--danger-light); box-shadow: 0 0 0 1px var(--danger-light); }
.check input:disabled, .switch input:disabled { background: #e6e2d9; border-color: #b9b3a4; }
.check input:checked:disabled { background: #8c8576; border-color: #8c8576; }
.switch input { position: relative; width: 52px; height: 30px; border-radius: 15px; background: #e8e1d3; }
.switch input::after { content: ""; position: absolute; inset: 2px auto 2px 2px; width: 22px; border-radius: 50%; background: #111116; }
.switch input:checked { background: #111116; border-color: #111116; }
.switch input:checked::after { translate: 22px 0; background: #fff; }
.switch input:disabled::after { background: #8c8576; }
.check:has(input:focus-visible) input, .switch:has(input:focus-visible) input { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (forced-colors: active) { .check input, .switch input { appearance: auto; } .switch input::after { display: none; } }

/* range + readout */
.range-ends { display: flex; justify-content: space-between; margin-top: calc(-1 * var(--s-1)); font: 500 var(--t-meta)/1.3 var(--font-mono); color: var(--form-hint); font-variant-numeric: tabular-nums; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.calc-row output { font: 700 1.25rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }

/* fieldset + segmented radio group */
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: var(--s-2); font: 600 var(--t-small)/1.3 var(--font-text); color: var(--form-label); }
.seg { display: grid; grid-template-columns: repeat(var(--seg-n, 3), 1fr); border: 1px solid var(--field-line); border-radius: var(--r-field); overflow: hidden; background: #fff; }
.seg label { position: relative; display: block; }
.seg label + label { border-left: 1px solid var(--field-line); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; text-align: center; padding: var(--s-2); min-height: var(--field-h); font: 600 var(--t-small)/1.25 var(--font-text); color: #34322d; }
.seg input:hover + span { background: #e8e1d3; }
.seg input:checked + span { background: #111116; color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.seg input:disabled + span { color: #6b675f; background: #e6e2d9; cursor: not-allowed; }
@media (forced-colors: active) { .seg input:checked + span { background: Highlight; color: HighlightText; forced-color-adjust: none; } }
.form-grid { display: grid; gap: var(--s-5); }
.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 599px) { .form-cols { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-actions p { margin: 0; font-weight: 600; }

/* An error slot with no message stays out of the layout (JS fills it on submit). */
.field .field-error:empty { display: none !important; }
/* Static state previews for forms-demo.html */
.is-hover:not(select) { border-color: var(--field-line-hover); }
select.is-hover { border-color: var(--field-line-hover); }
.is-focus { border-color: var(--field-ink); outline: 3px solid var(--c-focus); outline-offset: 2px; }


/* =========================================================
   IMAGERY · .img-fade (dissolving edges, hero and primary feature images ONLY) + the crisp square default
   Photos are square-cornered, static, never baked with a fade. Replace the <picture> and everything keeps working.
   .img-fade vars: --fade-x / --fade-y (length), --fade-t/-r/-b/-l (1 fades that edge, 0 keeps it crisp);
   helpers .img-fade--l/--r/--t/--b/--x/--y keep ONE side (or axis) fading. A 1px ring shows only on crisp edges.
   ========================================================= */
.img-fade { --fade-size: clamp(32px, 7vw, 120px); --fade-x: var(--fade-size); --fade-y: var(--fade-size); --fade-t: 1; --fade-r: 1; --fade-b: 1; --fade-l: 1; margin: 0; }
.img-fade--l { --fade-t: 0; --fade-r: 0; --fade-b: 0; }
.img-fade--r { --fade-t: 0; --fade-b: 0; --fade-l: 0; }
.img-fade--t { --fade-r: 0; --fade-b: 0; --fade-l: 0; }
.img-fade--b { --fade-t: 0; --fade-r: 0; --fade-l: 0; }
.img-fade--x { --fade-t: 0; --fade-b: 0; }
.img-fade--y { --fade-r: 0; --fade-l: 0; }
:where(.img-fade, .ph) picture { position: relative; display: block; overflow: hidden; background: var(--img-ph); }
:where(.img-fade, .ph) picture img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
:where(.img-fade, .ph) picture::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 100% at 50% 42%, transparent 58%, rgb(0 0 0 / var(--vig, .16)) 100%); border: 0 solid var(--img-ring); }
.img-fade picture::after { border-width: calc((1 - var(--fade-t)) * 1px) calc((1 - var(--fade-r)) * 1px) calc((1 - var(--fade-b)) * 1px) calc((1 - var(--fade-l)) * 1px); }
.ph picture::after { border-width: 1px; }
.ph { margin: 0; }
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  @media not (forced-colors: active) {
    .img-fade picture, .img-fade > img {
      /* smootherstep-eased ramps: alpha = 1 - fade * (1 - s(t)), s(t) = 6t^5 - 15t^4 + 10t^3 */
      --_ax: linear-gradient(to right,
        rgb(0 0 0 / calc(1 - var(--fade-l) * 1.000)) calc(var(--fade-x) * 0),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.984)) calc(var(--fade-x) * 0.125),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.896)) calc(var(--fade-x) * 0.25),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.725)) calc(var(--fade-x) * 0.375),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.500)) calc(var(--fade-x) * 0.5),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.275)) calc(var(--fade-x) * 0.625),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.104)) calc(var(--fade-x) * 0.75),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.016)) calc(var(--fade-x) * 0.875),
        rgb(0 0 0 / calc(1 - var(--fade-l) * 0.000)) calc(var(--fade-x) * 1),
        #000 var(--fade-x),
        #000 calc(100% - var(--fade-x)),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.000)) calc(100% - var(--fade-x) * 1),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.016)) calc(100% - var(--fade-x) * 0.875),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.104)) calc(100% - var(--fade-x) * 0.75),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.275)) calc(100% - var(--fade-x) * 0.625),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.500)) calc(100% - var(--fade-x) * 0.5),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.725)) calc(100% - var(--fade-x) * 0.375),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.896)) calc(100% - var(--fade-x) * 0.25),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 0.984)) calc(100% - var(--fade-x) * 0.125),
        rgb(0 0 0 / calc(1 - var(--fade-r) * 1.000)) calc(100% - var(--fade-x) * 0));
      --_ay: linear-gradient(to bottom,
        rgb(0 0 0 / calc(1 - var(--fade-t) * 1.000)) calc(var(--fade-y) * 0),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.984)) calc(var(--fade-y) * 0.125),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.896)) calc(var(--fade-y) * 0.25),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.725)) calc(var(--fade-y) * 0.375),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.500)) calc(var(--fade-y) * 0.5),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.275)) calc(var(--fade-y) * 0.625),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.104)) calc(var(--fade-y) * 0.75),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.016)) calc(var(--fade-y) * 0.875),
        rgb(0 0 0 / calc(1 - var(--fade-t) * 0.000)) calc(var(--fade-y) * 1),
        #000 var(--fade-y),
        #000 calc(100% - var(--fade-y)),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.000)) calc(100% - var(--fade-y) * 1),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.016)) calc(100% - var(--fade-y) * 0.875),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.104)) calc(100% - var(--fade-y) * 0.75),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.275)) calc(100% - var(--fade-y) * 0.625),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.500)) calc(100% - var(--fade-y) * 0.5),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.725)) calc(100% - var(--fade-y) * 0.375),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.896)) calc(100% - var(--fade-y) * 0.25),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 0.984)) calc(100% - var(--fade-y) * 0.125),
        rgb(0 0 0 / calc(1 - var(--fade-b) * 1.000)) calc(100% - var(--fade-y) * 0));
      -webkit-mask-image: var(--_ax), var(--_ay);
      -webkit-mask-composite: source-in;
      mask-image: var(--_ax), var(--_ay);
      mask-composite: intersect;
    }
  }
}
@media (forced-colors: active) { :where(.img-fade, .ph) picture::after { display: none; } }

/* =========================================================
   NO MOTION · keep this block LAST
   Nothing on the site animates or transitions. The ONE exception is the 1px border of .edge tiles, which fades its
   opacity in 200ms, and only when the visitor has not asked for reduced motion.
   ========================================================= */
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: no-preference) {
  .edge::before { transition: opacity 200ms linear !important; }
}