/* =========================================================
   Vow & Venue · site-2026b.css
   Shared foundation of the 2026 redesign: tokens, base, type, buttons, forms kit, image utilities, header, menu, footer.
   Every page links this file first, then home-2026b.css (index) or inner-2026b.css (all other pages).

   BRAND: "peony and fig". Warm blush-ivory paper (--bg) with aubergine-black ink (--ink). ONE action colour: mulberry (--brand,
   white text on it). A second voice in sage (--sage, text and rules only) and a deep fig (--fig) for the dark bands, where
   champagne gold (--gold) is the only highlight. Gold is never used as text on light paper (it fails contrast there).
   Display: Bodoni Moda (variable, optical size), italic for the emphasised words. Text: Jost (variable). Both self-hosted.
   Do not use a generic accent variable name: this theme uses brand-specific names (--brand, --sage, --gold, --fig).

   CONTRAST (WCAG 2.x relative luminance)
     ink on bg 15.9:1 · on surface-2 14.3:1 · on surface-3 12.5:1 · ink-soft on bg 11.2:1 · muted on bg 6.9:1 · on surface-2 6.2:1 · on surface-3 5.4:1
     white on brand 9.9:1 · on brand-hover 12.9:1 · brand on bg 9.3:1 · on surface-2 8.3:1 · on brand-tint 7.8:1
     sage on bg 6.4:1 · on surface-2 5.8:1 · on sage-tint 5.6:1
     on dark: fig-dim on fig 12.9:1 · on fig-2 11.2:1 · on fig-3 9.0:1 · gold on fig 9.1:1 · on fig-2 7.9:1 · fig-edge on fig 5.8:1
     focus ring (#1f3d8a) on bg 9.4:1; on dark bands the ring switches to gold (focus blue is only 1.7:1 on fig)
     non-text: field and control line #877079 on bg 4.2:1 · on surface 4.5:1 · on surface-2 3.8:1 · on brand-tint 3.6:1 · on sage-tint 3.7:1 · on surface-3 3.3:1

   NO MOTION: no transitions, animations, keyframes, smooth scrolling or hover lifts anywhere. Hover is an instant colour change;
   the focus ring stays. (document.getAnimations().length is 0 at rest.)
   ONE EXCEPTION (owner's rule): the soft border on a card fades its opacity in 200ms, only under
   prefers-reduced-motion: no-preference. Nothing else transitions.

   READABILITY (standing rules): nothing under 14px; body 17 -> 18; small 16 -> 17; meta 15; tap targets >= 44px;
   spacing on a 4px scale (--s-1..--s-10); figures use tabular-nums; paragraphs cap at 66ch.
   ========================================================= */
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin-opsz.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../assets/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../assets/fonts/jost-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks (average advance and hhea measured from the shipped files): the swap barely moves anything. */
@font-face { font-family: "Bodoni Fallback"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"); size-adjust: 104%; ascent-override: 108%; descent-override: 38%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 106%; ascent-override: 101%; descent-override: 35%; line-gap-override: 0%; }

:root {
  /* neutrals: blush ivory paper */
  --bg: #fbf6f2;
  --surface: #fffdfb;
  --surface-2: #f4e9e4;
  --surface-3: #ead9d3;
  --line: #e6d6d0;
  --line-strong: #cdb7b0;
  --control-line: #5d4651;
  --ink: #2a1620;
  --ink-soft: #46303a;
  --muted: #64505a;
  /* action: mulberry. text on it is white */
  --brand: #7a1f46;
  --brand-hover: #5e1535;
  --brand-tint: #f3dfe7;
  --brand-soft: #e6bfce;
  /* second voice: sage (rules, eyebrows, numerals; never a button fill) */
  --sage: #47604f;
  --sage-tint: #e1e9e1;
  --sage-soft: #c3d2c6;
  /* dark bands: fig */
  --fig: #2b1220;
  --fig-2: #3c1b2e;
  --fig-3: #52283f;
  --fig-deep: #1d0c15;
  --fig-line: #6d4559;
  --fig-dim: #ecd9e0;
  --fig-edge: #b08a9c;
  --gold: #dcb673;
  --gold-hover: #e9cb92;
  --on-ink-mark: #dcb673;
  /* semantics */
  --danger: #a3262f;
  --danger-night: #ffb4b0;
  --success: #2c6a3a;
  --focus: #1f3d8a;

  /* type */
  --font-display: "Bodoni Moda", "Bodoni Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Jost", "Jost Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-display: clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem);
  --t-h1: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.4rem, 1.2rem + .7vw, 1.875rem);
  --t-h4: clamp(1.25rem, 1.16rem + .4vw, 1.5rem);
  --t-lede: clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --t-body: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --t-small: clamp(1rem, .98rem + .08vw, 1.0625rem);
  --t-meta: .9375rem;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-head: 1.08;
  --track-label: .1em;
  --measure: 66ch;

  /* spacing: 4px scale */
  --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;

  /* shape: soft and architectural. Pills for actions, an arch for the signature image, 10-14px for fields and panels */
  --r-control: 10px;
  --r-card: 6px;
  --r-panel: 16px;
  --r-pill: 999px;
  --arch: 999px;
  --shadow-overlay: 0 24px 64px -16px rgba(42, 22, 32, .45);

  /* layout */
  --max: 1280px;
  --margin: clamp(20px, 4vw, 56px);
  --header-h: 76px;
  --section: clamp(64px, 40px + 6vw, 128px);

  /* imagery tokens (see .img-fade / .img-frame below) */
  --img-grade: contrast(1.02) saturate(1.02);
  --img-radius: 6px;
  --img-ring: rgb(42 22 32 / .14);
  --img-shadow: none;
  --img-ph: var(--surface-2);
  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(--fig-deep); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 420 var(--t-body)/var(--lh-body) var(--font-text);
  font-variation-settings: "opsz" 34; /* Bodoni Moda: keep hairlines sturdy at display sizes (Jost has no opsz axis, so it ignores this) */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
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; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, table, fieldset, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--fig); }
main:focus { outline: none; }
.wrap { width: 100%; max-width: calc(var(--max) + var(--margin) * 2); margin-inline: auto; padding-inline: var(--margin); }
.wrap--narrow { max-width: calc(820px + var(--margin) * 2); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: -80px; z-index: 100; background: var(--gold); color: var(--fig); font-weight: 600; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); }
.skip-link:focus { top: var(--s-3); }
.num { font-variant-numeric: tabular-nums; }
:where(p) { max-width: var(--measure); text-wrap: pretty; }
:where(li, dd, figcaption, summary, blockquote) { text-wrap: pretty; }
:where(h1, h2, h3, h4, .h3, .display, .h2) { text-wrap: balance; }
html:not(.js) [data-needs-js] { display: none !important; }
html.js [data-nojs-only] { display: none !important; }
.noscript { margin: 0; max-width: none; padding: var(--s-3) var(--margin); background: var(--brand-tint); color: var(--ink); font-size: var(--t-small); text-align: center; }

/* ---------- type ---------- */
.meta { font: 500 var(--t-meta)/1.4 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.on-dark .meta { color: var(--fig-dim); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--t-meta)/1.3 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; flex: none; }
.on-dark .eyebrow { color: var(--gold); }
.display { font: 450 var(--t-display)/1 var(--font-display); letter-spacing: -.02em; }
.h1 { font: 450 var(--t-h1)/1.02 var(--font-display); letter-spacing: -.02em; }
.h2 { font: 450 var(--t-h2)/var(--lh-head) var(--font-display); letter-spacing: -.015em; }
.h3 { font: 450 var(--t-h3)/1.15 var(--font-display); letter-spacing: -.01em; }
.h4 { font: 500 var(--t-h4)/1.2 var(--font-display); }
:is(.display, .h1, .h2, .h3, .h4) em { font-style: italic; color: var(--brand); }
.on-dark :is(.display, .h1, .h2, .h3, .h4) em { color: var(--gold); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; text-wrap: pretty; font-weight: 400; }
.on-dark .lede { color: var(--fig-dim); }
.fine { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); }
.on-dark .fine { color: var(--fig-dim); }
.credit { margin-top: var(--s-2); font: 400 var(--t-meta)/1.4 var(--font-text); color: var(--muted); max-width: none; }
.on-dark .credit { color: var(--fig-dim); }
.label { font: 500 var(--t-small)/1.3 var(--font-text); color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-6); border-radius: var(--r-pill);
  border: 1.5px solid transparent; font: 500 var(--t-small)/1.2 var(--font-text); letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-gold { background: var(--gold); color: var(--fig); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--fig-3); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ctl-line); }
.btn-line:hover { border-color: var(--control-line); background: var(--surface); }
.on-dark .btn-line { color: #fff; border-color: var(--fig-edge); }
.on-dark .btn-line:hover { border-color: #fff; background: transparent; }
.btn-sm { min-height: 44px; padding: 0 var(--s-5); }
.btn-lg { min-height: 56px; padding: 0 var(--s-7); font-size: var(--t-body); }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.link-arrow svg { width: 18px; height: 18px; flex: none; }
.link-arrow:hover { text-decoration-color: var(--ink); text-decoration-thickness: 3px; }
.on-dark .link-arrow { color: #fff; text-decoration-color: var(--gold); }
.on-dark .link-arrow:hover { text-decoration-color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); border-color: var(--line-strong); cursor: not-allowed; }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.heart-btn .ico { width: 20px; height: 20px; }
.heart-btn[aria-pressed="true"] .heart-shape { fill: currentColor; }

/* ---------- small shared pieces ---------- */
.ico { width: 22px; height: 22px; flex: none; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--s-3); border-radius: var(--r-pill); background: var(--brand-tint); color: var(--ink); font: 500 var(--t-meta)/1.2 var(--font-text); letter-spacing: .02em; white-space: nowrap; }
.tag--sage { background: var(--sage-tint); }
.demo-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 2px var(--s-3); border-radius: var(--r-control); border: 1.5px dashed var(--control-line); background: var(--surface); color: var(--ink); font: 500 var(--t-meta)/1.3 var(--font-text); }
.on-dark .demo-tag { background: transparent; color: var(--fig-dim); border-color: var(--fig-edge); }
.note { padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-left: 5px solid var(--sage); border-radius: var(--r-control); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); max-width: none; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ctl-line); background: transparent; color: var(--ink); flex: none; padding: 0; text-decoration: none; }
.icon-btn:hover { border-color: var(--field-line-hover); background: var(--surface-2); }
.icon-btn .ico { width: 22px; height: 22px; }
.icon-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.empty { padding: var(--s-6) var(--s-5); border: 2px dashed var(--line-strong); border-radius: var(--r-panel); color: var(--ink-soft); background: var(--surface); max-width: none; }
.empty h2, .empty h3 { margin-bottom: var(--s-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1.5px solid var(--ctl-line); background: transparent; font: 500 var(--t-small)/1 var(--font-text); }
.chip:hover { border-color: var(--control-line); background: var(--surface); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.muted { color: var(--muted); }
.status { min-height: 1.5em; font-size: var(--t-small); color: var(--ink-soft); max-width: none; }
.status.is-error { color: var(--danger); font-weight: 500; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.btn-quiet { background: transparent; color: var(--ink); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-quiet:hover { color: var(--brand); text-decoration-thickness: 2px; }

/* =========================================================
   FORMS · reusable component layer (plain CSS, no build step)
   ---------------------------------------------------------
   Markup contract (see forms-demo.html for every state):
     .field            stacked label + control + .field-hint / .field-error
     .field--float     floating-label variant (input needs placeholder=" ")
     .input-group      input with .affix prefix/suffix (£, m, kW)
     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 server-side errors.
   Targets >= 44px, input text >= 16px (no iOS zoom). Soft hairline fields (see the FORMS REFINEMENT tokens) with a documented 1.4.11 trade-off; checkbox, radio, switch and outline buttons keep a 3:1 line.
   Customizable-select pattern informed by Open Props UI (MIT, github.com/argyleink/open-props).
   ========================================================= */
/* FORMS REFINEMENT. Tokens for every form control.
   --field-bg         #fcf8f4  gentle fill (lighter than bg, darker than surface): reads as a field on bg and on white cards; goes to --surface on focus
   --field-line       #877079  1px line at rest, 3:1 or better on every surface a field sits on: 4.2:1 on bg, 4.5 on surface, 3.8 on surface-2,
                               3.6 on brand-tint, 3.7 on sage-tint, 3.3 on surface-3 (the darkest tint), 4.3 against the field fill itself
   --field-line-hover #5d4651  = --control-line, 8.0:1 on bg (instant swap on hover, no transition)
   --ctl-line         #877079  same value, for controls with NO fill or other boundary: checkbox, radio, switch,
                               range track, outline buttons, icon buttons, chips
   Focus shows a 3px focus-coloured ring plus a white fill, errors and valid states carry an icon and text, and forced-colors
   and prefers-contrast: more restore the full --control-line. */
:root {
  --field-h: 48px; --field-px: var(--s-4); --r-field: 10px;
  --field-bg: #fcf8f4; --field-bg-focus: var(--surface); --field-line: #877079; --field-line-hover: var(--control-line); --ctl-line: #877079;
  --field-danger-bg: #fbecee;
}
@media (prefers-contrast: more) { :root { --field-line: var(--control-line); --ctl-line: var(--control-line); } }

.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); letter-spacing: 0; 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: var(--lh-small); color: var(--form-hint); }
.field-error { display: none; gap: var(--s-2); align-items: flex-start; color: var(--form-error); font-weight: 500; }
.field-error::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: .15em; 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; }
.field:has(:disabled) > label { color: var(--form-hint); }
:root {
  --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='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 7.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --i-chev-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2346303a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.75 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='%232a1620' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 7.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  --i-chev-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364505a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}

/* --- text-like controls --- */
.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(--ink);
  border: 1px solid var(--field-line); border-radius: var(--r-field);
  font: 400 var(--t-body)/1.4 var(--font-text);   /* >= 16px: no iOS zoom */
}
.field textarea { min-height: 7.5rem; 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(--focus); background-color: var(--field-bg-focus); outline: 3px solid var(--focus); outline-offset: 1px;
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--muted); 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); box-shadow: inset 0 0 0 1px var(--danger); background-color: var(--field-danger-bg);
}
/* valid tick: required fields only, so optional blanks never turn green */
.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: var(--surface-2); border-color: var(--line); color: var(--muted); cursor: not-allowed;
}
.field input:read-only:not(:disabled, [type="range"]) { background: var(--bg); border-style: dashed; }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--field-bg) inset; -webkit-text-fill-color: var(--ink); }

/* floating label (needs placeholder=" ") */
.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));
  font: 400 var(--t-body)/1.3 var(--font-text); color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.field.field--float input[placeholder] { min-height: 56px; padding-top: 22px; 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(--ink-soft); }
.field--float:has(input:disabled) > label { color: var(--form-hint); }

/* input with affixes */
.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(--focus); background: var(--field-bg-focus); outline: 3px solid var(--focus); outline-offset: 1px; }
.input-group:has(:user-invalid, [aria-invalid="true"]) { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: var(--field-danger-bg); }
.input-group:has(input:disabled) { background: var(--surface-2); border-color: var(--line); }
.field .input-group input {
  flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; outline: 0;
}
.affix {
  display: grid; place-items: center; padding-inline: var(--s-4); background: var(--surface-3); color: var(--ink-soft);
  font: 500 var(--t-small)/1 var(--font-text); 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-7) 0 var(--field-px);
  background: var(--field-bg) var(--i-chev-soft) no-repeat right 14px center / 18px;
  color: var(--ink); border: 1px solid var(--field-line); border-radius: var(--r-field);
  font: 400 var(--t-body)/1.4 var(--font-text); text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
select:hover:not(:disabled) { border-color: var(--field-line-hover); }
select:focus-visible { border-color: var(--focus); background-color: var(--field-bg-focus); outline: 3px solid var(--focus); outline-offset: 1px; }
select:disabled { background-image: var(--i-chev-muted); }

/* --- select: customizable popup (Chrome/Edge 135+, Safari 27+, fine pointers only) ---
   Touch devices keep the native OS picker (better UX); Firefox keeps 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(--ink-soft);
      -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: var(--surface); color: var(--ink);
      border: 1px solid var(--field-line); border-radius: calc(var(--r-field) + 2px); box-shadow: var(--shadow-overlay);
      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: 8px; color: var(--ink); cursor: pointer;
    }
    select option:hover, select option:focus-visible { background: var(--surface-2); }
    select option:checked { background: var(--brand-tint); color: var(--ink); font-weight: 600; }
    select option:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
    select option:disabled { color: var(--muted); cursor: not-allowed; }
    select option::checkmark { order: 1; margin-inline-start: auto; color: var(--brand); font-weight: 700; }
    select optgroup label { display: block; padding: var(--s-3) var(--s-3) var(--s-1); font: 500 var(--t-meta)/1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
  }
}
@media (forced-colors: active) {   /* system colours + native arrow */
  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: var(--surface); border: 2px solid var(--ctl-line);
}
.check input { width: 24px; height: 24px; border-radius: 6px; }
.check input[type="radio"] { border-radius: 50%; }
.check input:hover:not(:disabled), .switch input:hover:not(:disabled) { border-color: var(--control-line); }
.check input[type="checkbox"]::after {
  content: ""; width: 16px; height: 16px; background: var(--on-ink-mark); 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: var(--ink); border-color: var(--ink); }
.check input[type="checkbox"]:checked::after { scale: 1; }
.check input[type="radio"]:checked { background: var(--on-ink-mark); box-shadow: inset 0 0 0 4px var(--ink); }
.check input:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.check input:disabled, .switch input:disabled { background: var(--surface-2); border-color: var(--line); }
.check input:checked:disabled { background: var(--line-strong); }

/* --- toggle (checkbox with role="switch") --- */
.switch input { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--surface-2); }
.switch input::after {
  content: ""; position: absolute; inset: 2px auto 2px 2px; width: 20px; border-radius: 50%;
  background: var(--ink-soft);
}
.switch input:checked { background: var(--ink); border-color: var(--ink); }
.switch input:checked::after { translate: 20px 0; background: var(--on-ink-mark); }
.switch input:disabled::after { background: var(--muted); }
@media (forced-colors: active) {
  .check input, .switch input { appearance: auto; }
  .switch input::after { display: none; }
}

/* --- range slider + readout --- */
input[type="range"] {
  --fill: var(--ink); --track: var(--form-track); --p: 16%;
  appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; accent-color: var(--ink);
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(to right, var(--fill) var(--p), var(--track) var(--p)); box-shadow: inset 0 0 0 1px var(--ctl-line); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--on-ink-mark); border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(42, 22, 32, .3); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--track); box-shadow: inset 0 0 0 1px var(--ctl-line); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--fill); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--on-ink-mark); border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(42, 22, 32, .3); }
input[type="range"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input[type="range"]:disabled { cursor: not-allowed; --fill: var(--muted); }
input[type="range"]:disabled::-webkit-slider-thumb { border-color: var(--muted); background: var(--surface-2); }
input[type="range"]:disabled::-moz-range-thumb { border-color: var(--muted); background: var(--surface-2); }
.range-ends { display: flex; justify-content: space-between; margin-top: calc(-1 * var(--s-1)); font: 400 var(--t-meta)/1.3 var(--font-text); 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: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (forced-colors: active) {
  input[type="range"] { appearance: auto; accent-color: Highlight; }
}

/* --- surfaces: controls are always light boxes; only the text around them flips ---
   .on-dark flips labels/hints/errors/track; .on-light switches back inside a light card. */
:root, .on-light { --form-label: var(--ink); --form-hint: var(--muted); --form-error: var(--danger); --form-track: var(--surface-2); }
.on-dark { --form-label: #fff; --form-hint: var(--fig-dim); --form-error: var(--danger-night); --form-track: var(--fig-line); }

/* --- 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: var(--field-bg); }
.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) var(--s-2); min-height: var(--field-h); font: 500 var(--t-small)/1.25 var(--font-text); color: var(--ink-soft); }
.seg input:hover + span { background: var(--surface); }
.seg input:checked + span { background: var(--ink); color: var(--on-ink-mark); font-weight: 600; }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -4px; }
.seg input:disabled + span { color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
@media (forced-colors: active) {
  .seg input:checked + span { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}


/* =========================================================
   PREMIUM IMAGERY  ·  .img-fade (dissolving edges)  +  .img-frame (crisp, rounded, ringed)
   ---------------------------------------------------------
   Both are reusable CSS utilities. They style whatever <picture>/<img> sits inside the wrapper, so
   REPLACING THE PHOTO (new src, new <picture>, new file) KEEPS EVERYTHING. Nothing is baked into
   the image files. Captions, flags and badges live outside <picture>, so they stay crisp.

   MARKUP
     <figure class="img-fade"><picture>...<img ...></picture><figcaption>..</figcaption></figure>
     <figure class="img-frame"><picture>...<img ...></picture></figure>
   Use .img-fade for atmospheric / full-width photographs that should melt into the page (hero,
   flow, workshop). Use .img-frame for photographs inside cards and lists, where a crisp rounded
   edge reads as more premium than a soft one.

   WHAT EVERY PHOTO GETS (all tokens live in :root)
     tonal grade   filter: var(--img-grade)     very light contrast/saturation lift, never heavy
     vignette      picture::after, --vig        radial edge darkening, 0.16 by default, 0 = off
     placeholder   background: var(--img-ph)    shows while a lazy photo loads
     stability     keep width/height + aspect-ratio on the wrapper; object-fit: cover; no layout shift
   .img-fade extras
     --fade-size / --fade-x / --fade-y   fade length (default clamp(24px, 6vw, 88px))
     .img-fade--l .--r .--t .--b .--x .--y   which edges fade (or --fade-t/-r/-b/-l: 1 or 0)
     smootherstep ramp (9 stops per edge), so the dissolve has no visible start line
     hairline ring appears ONLY on edges that stay crisp (a 1px ring on a fading edge would be wrong)
   .img-frame extras
     radius var(--img-radius) 12px, inset hairline ring var(--img-ring), soft depth var(--img-shadow)
   --ring: transparent  on a wrapper turns the ring off (hero touches the viewport edges)

   FALLBACKS
     No mask support or forced-colors: the mask is dropped and the photo shows in full with the
     normal media radius. Photos are always static: no fade-in, zoom or Ken Burns.
   ========================================================= */
.img-fade {
  --fade-size: clamp(24px, 6vw, 88px);
  --fade-x: var(--fade-size);
  --fade-y: var(--fade-size);
  --fade-t: 1; --fade-r: 1; --fade-b: 1; --fade-l: 1;
}
.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; }

/* shared photo treatment */
:where(.img-fade, .img-frame) picture { position: relative; display: block; height: 100%; overflow: hidden; background: var(--img-ph); }
:where(.img-fade, .img-frame) picture img { height: 100%; filter: var(--img-grade); }
:where(.img-fade, .img-frame) picture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(125% 100% at 50% 42%, transparent 58%, rgb(42 22 32 / var(--vig, .16)) 100%);
  border: 0 solid var(--ring, var(--img-ring));
}
/* ring only on crisp sides of a fading photo */
.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);
}
/* crisp, rounded, ringed, soft depth */
.img-frame picture { border-radius: var(--img-radius); box-shadow: var(--img-shadow); }
.img-frame picture::after { border-width: 1px; }

@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)) 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)) 100%);
      --_ay: linear-gradient(to bottom,
        rgb(0 0 0 / calc(1 - var(--fade-t) * 1.000)) 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)) 100%);
      -webkit-mask-image: var(--_ax), var(--_ay);
      -webkit-mask-composite: source-in;
      mask-image: var(--_ax), var(--_ay);
      mask-composite: intersect;
    }
  }
}
/* no mask support, or forced colours: show the whole photo with the normal media radius */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .img-fade picture, .img-fade > img { border-radius: var(--img-radius); overflow: hidden; }
}
@media (forced-colors: active) {
  .img-fade picture, .img-fade > img { border-radius: var(--img-radius); overflow: hidden; }
  :where(.img-fade, .img-frame) picture::after { display: none; }
}

/* =========================================================
   FORM / IMAGE GLUE for this theme
   ========================================================= */
:where(.img-fade, .img-frame) picture img { width: 100%; object-fit: cover; }
.img-frame { --img-radius: 4px; }
.on-dark { color: #fff; --form-label: #fff; }


/* =========================================================
   HEADER
   ========================================================= */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line-strong); }
.site-header__in { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px; text-decoration: none; color: var(--ink); margin-right: auto; }
.logo-mark { width: 44px; height: 44px; color: var(--brand); flex: none; }
.logo__text { display: grid; gap: 2px; }
.logo__word { font: 450 1.625rem/1 var(--font-display); letter-spacing: -.015em; white-space: nowrap; }
.logo__word em { font-style: italic; color: var(--brand); font-weight: 400; padding-inline: .06em; }
.logo__sub { font: 500 .875rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.primary { display: none; align-items: center; gap: 2px; margin-right: auto; }
.tools { display: flex; align-items: center; gap: var(--s-2); }
.primary > a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  font: 450 var(--t-small)/1 var(--font-text); letter-spacing: .01em; color: var(--ink); text-decoration: none; border-radius: var(--r-pill);
}
.primary > a:hover { background: var(--surface-2); }
.primary [aria-current="page"], .m-panel [aria-current="page"] { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 10px; font-weight: 500; }
.tools .count, .icon-btn .count {
  position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center;
  border-radius: 11px; background: var(--brand); color: #fff; font: 600 14px/1 var(--font-text); font-variant-numeric: tabular-nums;
}
.tools .icon-btn[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tools__book { display: none; }
.m-menu { position: static; }
.m-menu summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1.5px solid var(--ctl-line); border-radius: var(--r-pill); list-style: none; cursor: pointer; font: 500 var(--t-small)/1 var(--font-text); }
.m-menu summary::-webkit-details-marker { display: none; }
.m-menu summary:hover { border-color: var(--control-line); background: var(--surface-2); }
.m-menu summary .ico { width: 20px; height: 20px; }
.m-menu summary .ico:last-of-type { display: none; }
.m-menu[open] summary .ico:first-of-type { display: none; }
.m-menu[open] summary .ico:last-of-type { display: block; }
.m-menu[open] summary { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-menu__label { display: none; }
.m-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow: auto; padding: var(--s-4) var(--margin) var(--s-7); background: var(--surface); border-bottom: 1px solid var(--line-strong); box-shadow: 0 28px 40px -28px rgba(42, 22, 32, .45); }
.m-panel__in { display: grid; gap: var(--s-5); max-width: var(--max); margin-inline: auto; }
.m-panel nav { display: grid; }
.m-panel a { display: flex; align-items: center; min-height: 52px; text-decoration: none; font: 400 1.5rem/1.2 var(--font-display); color: var(--ink); border-bottom: 1px solid var(--line); }
.m-panel a:hover { color: var(--brand); }
.m-panel .meta { margin-bottom: var(--s-1); }
.m-panel .m-more a { font: 450 var(--t-body)/1.3 var(--font-text); min-height: 48px; }
.m-panel .btn { border-bottom: 1.5px solid transparent; font: 500 var(--t-body)/1.2 var(--font-text); color: #fff; justify-content: center; }
.m-panel .btn:hover { color: #fff; }
@media (min-width: 440px) { .m-menu__label { display: inline; } .tools__book { display: inline-flex; } }
@media (min-width: 720px) { .m-panel__in { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); } }
@media (min-width: 1200px) {
  .primary { display: flex; }
  .m-menu { display: none; }
  .logo { margin-right: var(--s-4); }
}
@media (max-width: 380px) { :root { --margin: 16px; } .logo { gap: var(--s-2); } .logo__word { font-size: 1.3rem; } .logo__sub { display: none; } .logo-mark { width: 36px; height: 36px; } .site-header__in { gap: var(--s-2); } .tools { gap: var(--s-1); } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--fig); color: #fff; --form-hint: var(--fig-dim); }
.site-footer a:not(.btn) { color: inherit; }
.footer-top { display: grid; gap: var(--s-7); padding-block: var(--section) var(--s-8); }
.footer-brand .logo { color: #fff; margin: 0 0 var(--s-5); }
.footer-brand .logo-mark, .footer-brand .logo__word em { color: var(--gold); }
.footer-brand .logo__sub { color: var(--fig-dim); }
.footer-brand p { color: var(--fig-dim); max-width: 36ch; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.footer-cols nav { display: grid; align-content: start; }
.footer-cols .meta { margin-bottom: var(--s-3); }
.footer-cols nav a { display: flex; align-items: center; min-height: 44px; color: var(--fig-dim); text-decoration: none; font-size: var(--t-body); }
.footer-cols nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
.footer-cols [aria-current="page"] { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.news { display: grid; gap: var(--s-3); align-content: start; max-width: 460px; }
.news .h3 { margin: 0; }
.news__form { display: grid; gap: var(--s-3); }
.news__status { min-height: 1.5em; font-size: var(--t-small); color: var(--fig-dim); max-width: none; }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5) var(--s-8); background: linear-gradient(var(--fig-line), var(--fig-line)) center top / calc(100% - 2 * var(--margin)) 1px no-repeat; }
.footer-base p { max-width: none; color: var(--fig-dim); font-size: var(--t-small); }
.footer-base a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }
.demo-flag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s-2); margin-right: var(--s-2); border: 1.5px dashed var(--fig-edge); border-radius: 6px; font: 500 var(--t-meta)/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--fig-dim); }
@media (min-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-cols { grid-column: 1; } .news { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } }
@media (min-width: 1080px) { .footer-top { grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: var(--s-7); } .footer-cols { grid-column: 2 / 4; grid-template-columns: 1fr 1fr; } .news { grid-column: 4; grid-row: auto; } }

/* ---------- accessibility fallbacks ---------- */
@media (forced-colors: active) {
  .btn-primary, .btn-gold, .btn-ink { border-color: ButtonText; }
}

/* Email fields keep their error row in the layout (hidden until needed). Without this the message
   appears on blur, pushes the button below it down, and the click on "Send" is lost. */
.field:has(input[type="email"]) .field-error { display: flex; visibility: hidden; }
.field:has(input[type="email"]):has(:user-invalid, [aria-invalid="true"]) .field-error,
.field[data-invalid]:has(input[type="email"]) .field-error { visibility: visible; }

/* Current page for the two header controls that are not plain text links. */
.tools__book[aria-current="page"], .m-panel .btn[aria-current="page"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand); }

/* --- Chip radio group (filters). Native radios: arrow keys move and select, Tab enters and leaves the group.
   The input is stretched over its label (invisible, so the whole chip is the target) and the span draws the state.
   Selected = mulberry fill + a tick (never colour alone). No :has() needed. --- */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.chip-radio { position: relative; display: inline-flex; }
.chip-radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip-radio span { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-pill); background: var(--field-bg); color: var(--ink); font: 500 var(--t-small)/1.1 var(--font-text); text-align: center; }
.chip-radio input:hover + span { border-color: var(--field-line-hover); background: var(--surface); }
.chip-radio input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-radio input:checked + span::before { content: ""; flex: none; width: 5px; height: 10px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chip-radio input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip-radio input:disabled { cursor: not-allowed; }
.chip-radio input:disabled + span { color: var(--muted); border-style: dashed; background: transparent; }
.on-dark .chip-radio span { background: transparent; color: #fff; border-color: var(--fig-edge); }
.on-dark .chip-radio input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--fig); }
.on-dark .chip-radio input:focus-visible + span { outline-color: var(--gold); }
@media (forced-colors: active) { .chip-radio input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } }

/* --- Cross-browser fallbacks (round 2 review) ---
   1. A selector list is dropped whole when one selector in it is unknown to the browser. The kit pairs :has() / :user-invalid
      with the attribute hooks the scripts set, so the attribute hooks are repeated here as standalone rules.
   2. Without :has() the floating label and the input-group focus ring get plain fallbacks (label sits above the field).
   3. Firefox and Safari ignore field-sizing: the textarea keeps its min-height and the native resize handle. */
.field[data-invalid] .field-error { display: flex; }
.field[data-invalid] .field-hint { display: none; }
.field[data-invalid] :where(input, select, textarea), input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background-color: var(--field-danger-bg);
}
.field[data-invalid] .input-group, .input-group[data-invalid] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); background: var(--field-danger-bg); }
.field[data-invalid] input[type="email"] ~ .field-error, .field[data-invalid] .field-error { visibility: visible; }
@supports not selector(:has(*)) {
  .field--float > label { position: static; pointer-events: auto; white-space: normal; margin-bottom: var(--s-2); color: var(--form-label); font: 600 var(--t-small)/1.3 var(--font-text); }
  .field.field--float input[placeholder] { min-height: 48px; padding-block: 0; }
  .field--float input::placeholder { color: var(--muted); }
  .field .input-group input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .field .field-error { visibility: visible; }
}