/* ==================================================================
   ASFA - "Field premium" design language.

   Warm canvas, deep pine chrome, rust as the single action accent,
   olive as the second natural. Flat surfaces: structure comes from
   hairline rules and column divisions, never from shadowed boxes.
   Photography sits in an offset print-plate frame.

   Architecture
     @layer legacy      the condemned Tailwind-name shim, lowest priority
                        so every real component outranks a leftover token.
                        Deleted wholesale in phase 6.
     @layer reset       normalisation
     @layer tokens      design tokens + colour schemes
     @layer base        element defaults, written with :where() so page
                        markup never has to fight specificity
     @layer layout      page shells
     @layer components  the component library
     @layer utilities   the few genuine utilities, plus the display
                        utilities that must outrank components during the
                        transition (see the note in that layer)

   Selectors are deliberately FLAT - no native nesting. The conversion
   gate (tools/audit_page.py) parses this file for its real selector set,
   and a nested selector would be invisible to that parser.
   ================================================================== */

@layer legacy, reset, tokens, base, layout, components, utilities;

/* Fonts ------------------------------------------------------------ */
@font-face {
    font-family: 'Archivo';
    src: url('../assets/fonts/archivo-var-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-stretch: 100%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/plex-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('../assets/fonts/plex-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ==================================================================
   TOKENS
   ================================================================== */
@layer tokens {
    :root {
        color-scheme: light;

        /* Primitives */
        --paper: 234 228 215;        /* #F0EBE0 canvas            */
        --panel: 224 217 201;        /* #E8E2D5 tinted band       */
        --surface: 250 248 242;      /* #F7F4EC cards, inputs     */
        --ink: 34 31 24;             /* #221F18 text              */
        --ink-muted: 87 82 63;       /* #57523F secondary text    */
        --ink-faint: 124 117 97;     /* #7C7561 captions          */
        --line: 178 168 144;         /* #CFC7B4 hairline          */
        --line-strong: 150 140 116;  /* #B3AA93 input borders     */
        --pine: 31 76 51;            /* #1F4C33 chrome            */
        --pine-hi: 24 59 40;         /* darker pine               */
        --rust: 150 64 38;           /* #A44A2F action accent     */
        --rust-hi: 122 52 34;        /* #7A3422 rust hover        */
        --olive: 107 122 84;         /* #6B7A54 second natural    */
        --plate: 169 143 107;        /* #A98F6B print-plate frame */
        --well: 26 35 27;            /* footer + notice band      */
        --well-ink: 240 235 224;

        /* Semantic. Components consume these, never the primitives, so
           a scheme flip is two token changes rather than nine patches. */
        --heading: var(--pine);
        --link: var(--rust);
        --link-hover: var(--pine);
        --on-brand: 247 244 236;     /* text on pine/rust fills */
        --scrim: 26 35 27;           /* photo overlays */
        --header-bg: var(--pine);
        --header-ink: 240 235 224;
        --accent-soft: color-mix(in oklab, rgb(var(--rust)) 10%, rgb(var(--paper)));

        /* Chip hues: one token per family, tint and ink derived */
        --hue-ab: 56 80 42;
        --hue-lci: 89 64 122;
        --hue-spec: 122 87 20;
        --hue-reg: 164 74 47;
        --hue-mut: 51 86 107;
        --hue-ok: 56 80 42;
        --hue-warn: 122 87 20;
        --hue-stop: 164 74 47;
        --hue-info: 51 86 107;

        /* Type scale, ~1.15 ratio. clamp() on display steps only: fluid
           body text makes the 24 dense data tables reflow unpredictably. */
        --fs-3xs: 0.6875rem;
        --fs-2xs: 0.75rem;
        --fs-xs: 0.8125rem;
        --fs-sm: 0.875rem;
        --fs-base: 0.9375rem;
        --fs-md: 1.0625rem;
        --fs-lg: 1.25rem;
        --fs-xl: 1.5rem;
        --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
        --fs-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 2.9rem);
        --fs-4xl: clamp(2.5rem, 1.8rem + 3.2vw, 3.4rem);

        /* Spacing, 4px grid */
        --sp-1: 0.25rem;
        --sp-2: 0.5rem;
        --sp-3: 0.75rem;
        --sp-4: 1rem;
        --sp-5: 1.5rem;
        --sp-6: 2rem;
        --sp-7: 2.75rem;
        --sp-8: 3.5rem;
        --sp-9: 5rem;

        /* Both of these were referenced with fallbacks and never declared. */
        --flow: 0.75rem;
        --flow-lg: 1.5rem;
        --nav-h: 3.2rem;
        --header-h: 3.6rem;

        /* Rules, radius, plate */
        --r-0: 0;
        --r-1: 2px;
        --r-2: 3px;
        --rule: 1px solid rgb(var(--line));
        --rule-strong: 1.5px solid rgb(var(--ink));
        --plate-offset: 11px;
    }

    /* Dark scheme: media query by default, with a manual override hook.
       Only the primitives and two semantic roles change. */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;
            /* Lifted off near-black. The page was #1A1812 with cards at
               #211E1A: 1.07:1 between them, so a document card was not a
               distinguishable surface at all, and body text sat at 12.98:1
               - high enough that light text haloes against a near-black
               ground over a long read. These give 1.27:1 between page and
               card and bring text to 9.79:1, inside the comfortable band
               and still well clear of AA. */
            --paper: 32 30 25;
            --panel: 64 59 51;
            --surface: 52 48 41;
            --ink: 228 222 209;
            --ink-muted: 168 160 144;
            --ink-faint: 138 130 115;
            --line: 74 68 58;
            --line-strong: 98 90 77;
            --pine: 140 185 153;
            --pine-hi: 168 206 181;
            --rust: 223 155 120;
            --rust-hi: 236 182 154;
            --olive: 150 165 122;
            --plate: 122 103 78;
            --well: 18 17 14;
            --well-ink: 233 227 214;
            --heading: var(--pine);
            --link: var(--rust);
            --link-hover: var(--pine);
            --on-brand: 26 24 20;
            --header-bg: 24 40 30;
            --header-ink: 226 233 226;
        }
    }
    :root[data-theme="dark"] {
        color-scheme: dark;
        /* Keep in step with the @media block above. */
        --paper: 32 30 25;
        --panel: 64 59 51;
        --surface: 52 48 41;
        --ink: 228 222 209;
        --ink-muted: 168 160 144;
        --ink-faint: 138 130 115;
        --line: 74 68 58;
        --line-strong: 98 90 77;
        --pine: 140 185 153;
        --pine-hi: 168 206 181;
        --rust: 223 155 120;
        --rust-hi: 236 182 154;
        --olive: 150 165 122;
        --plate: 122 103 78;
        --well: 18 17 14;
        --well-ink: 233 227 214;
        --heading: var(--pine);
        --link: var(--rust);
        --link-hover: var(--pine);
        --on-brand: 26 24 20;
        --header-bg: 24 40 30;
        --header-ink: 226 233 226;
    }

    @media (prefers-contrast: more) {
        :root {
            --line: var(--ink);
            --line-strong: var(--ink);
            --ink-muted: var(--ink);
            --rule: 1.5px solid rgb(var(--ink));
        }
    }
}

/* ==================================================================
   RESET
   ================================================================== */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    :where(body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, table, fieldset) { margin: 0; }
    :where(img, svg, video) { max-inline-size: 100%; block-size: auto; display: block; }
    :where(fieldset) { border: 0; padding: 0; min-inline-size: 0; }
    :where(button, input, select, textarea) { font: inherit; color: inherit; }
    html { scroll-behavior: smooth; }
    [id] { scroll-margin-block-start: calc(var(--header-h) + var(--sp-4)); }

    /* The hidden attribute must beat any display utility. Without this an
       author-level display: wins over the UA rule and the element shows -
       which is exactly how two form banners shipped visible. */
    [hidden] { display: none !important; }

    :focus-visible { outline: 2px solid rgb(var(--rust)); outline-offset: 2px; }
}

/* ==================================================================
   BASE  (:where() keeps specificity at 0)
   ================================================================== */
@layer base {
    body {
        font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: var(--fs-base);
        line-height: 1.55;
        background: rgb(var(--paper));
        color: rgb(var(--ink));
        display: flex;
        flex-direction: column;
        min-block-size: 100dvh;
        -webkit-text-size-adjust: 100%;
    }
    :where(h1, h2, h3, h4) { color: rgb(var(--heading)); text-wrap: balance; }
    :where(h1) { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
    :where(h2) { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; line-height: 1.12; }
    :where(h3) { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
    :where(h4) { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
    :where(p) { text-wrap: pretty; }
    /* Default rhythm for running text. The reset zeroes every margin, and
       until now only .prose and .doc-content put any back - so on the 40-odd
       pages that use neither, consecutive paragraphs butted together into a
       single wall of text. Zero specificity, so any component that manages
       its own rhythm (clause bodies, contact blocks, step bodies) still
       wins, and so do the shim's spacing utilities. */
    :where(p, ul, ol, dl, blockquote, figure, table) { margin-block-end: var(--sp-4); }
    :where(p, ul, ol, dl, blockquote, figure, table):last-child { margin-block-end: 0; }
    :where(strong, b) { font-weight: 700; }
    :where(a) { color: rgb(var(--link)); }
    :where(a):hover { color: rgb(var(--link-hover)); }
    :where(small) { font-size: var(--fs-xs); }
    :where(code, kbd, samp) {
        font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.9em;
    }
    :where(a, button, input, select, summary, .tab, .toggle) {
        transition: color 160ms, background-color 160ms, border-color 160ms,
                    box-shadow 160ms, opacity 160ms;
    }
    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, ::before, ::after {
            transition-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
        }
    }
}

/* ==================================================================
   LAYOUT
   ================================================================== */
@layer layout {
    .wrap {
        max-inline-size: 1160px;
        inline-size: 100%;
        margin-inline: auto;
        padding-inline: var(--sp-4);
    }
    main#main-content, main.page-main {
        font-size: var(--fs-base);
        padding-block: var(--sp-6) var(--sp-8);
        flex: 1;
    }
    .stack > * + * { margin-block-start: var(--flow); }
    .stack--sm > * + * { margin-block-start: var(--sp-2); }
    .stack--lg > * + * { margin-block-start: var(--flow-lg); }
    .stack-lg > * + * { margin-block-start: var(--flow-lg); }
    .flow > * + * { margin-block-start: var(--flow); }

    .cols {
        display: grid;
        gap: var(--sp-5);
        border-block-start: var(--rule);
        padding-block-start: var(--sp-5);
    }
    @media (min-width: 768px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
    .cell { padding-inline: var(--sp-5); }
    @media (min-width: 768px) {
        .cell + .cell { border-inline-start: var(--rule); }
        .cell:first-child { padding-inline-start: 0; }
        .cell:last-child { padding-inline-end: 0; }
    }

    .home-grid { display: grid; gap: var(--sp-7); margin-block-start: var(--sp-6); }
    @media (min-width: 1024px) { .home-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); } }

    .rail-layout { display: grid; gap: var(--sp-6); align-items: start; }
    @media (min-width: 1024px) {
        .rail-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); }
        .rail-sticky { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); }
    }

    /* --- Long-document layout -------------------------------------
       One system for the seven governance and handbook pages, which
       each carried their own near-identical copy: contents rail beside
       the text on wide screens, stacked above it on narrow. Below the
       breakpoint two of them turned the rail into a horizontal strip of
       pills, which this deliberately drops - the pills are gone from
       the design language, and one scroll behaviour beats two. */
    .doc-layout { display: grid; gap: var(--sp-6); align-items: start; }
    @media (min-width: 1024px) {
        .doc-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); }
        .toc-sidebar {
            position: sticky;
            inset-block-start: calc(var(--header-h) + var(--sp-3));
            max-block-size: calc(100vh - var(--header-h) - var(--sp-6));
            overflow-y: auto; scrollbar-width: thin;
        }
    }
    /* The policy viewer's document picker: a quiet list, not four slabs.
       The viewer marks the open document with aria-current. */
    .policy-doc-btn {
        display: block; inline-size: 100%; text-align: start;
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-sm); color: rgb(var(--ink));
        border-inline-start: 2px solid transparent;
    }
    .policy-doc-btn:hover { background: rgb(var(--panel)); color: rgb(var(--heading)); }
    .policy-doc-btn[aria-current] {
        color: rgb(var(--heading)); font-weight: 650;
        background: rgb(var(--panel));
        border-inline-start-color: rgb(var(--rust));
    }
    /* Icons in a card band size themselves; the markup asked for w-3.5,
       which does not exist, so an unsized SVG filled the whole header. */
    .card-hd svg { inline-size: 0.875rem; block-size: 0.875rem; flex: none; }

    /* A rail holding several stacked panels rather than one, as the
       policy viewer does with its document picker above its contents. */
    .doc-rail { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
    @media (min-width: 1024px) {
        .doc-rail { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-3)); }
    }
    .toc-sidebar { border: var(--rule); background: rgb(var(--surface)); padding-block: var(--sp-3); }
    .toc-header {
        font-family: 'IBM Plex Mono', monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase;
        color: rgb(var(--rust));
        padding: 0 var(--sp-4) var(--sp-2); border-block-end: var(--rule);
        margin-block-end: var(--sp-2);
    }
    .toc-sidebar a {
        display: block; padding: var(--sp-1) var(--sp-4);
        font-size: var(--fs-xs); font-weight: 500; line-height: 1.35;
        color: rgb(var(--ink)); text-decoration: none;
        border-inline-start: 2px solid transparent;
    }
    .toc-sidebar a:hover,
    .toc-sidebar a[aria-current] {
        color: rgb(var(--heading)); background: rgb(var(--panel));
        border-inline-start-color: rgb(var(--heading));
    }
    /* Headings are scroll targets from the contents rail. */
    :is(.anchor, .doc-content :is(h2, h3)[id]) {
        scroll-margin-block-start: calc(var(--header-h) + var(--sp-3));
    }

    .band {
        background: rgb(var(--panel));
        border-block: var(--rule);
        padding-block: var(--sp-6);
    }
    /* A pine-ground panel. It sets its text colour as well as its
       background, and that is the point: the shim's `text-white` lives in
       @layer legacy, below the base layer's heading colour, so layer order
       beat it and ten headings across ten pages rendered pine-on-pine -
       invisible. Setting colour here means everything inside inherits it
       and no utility is needed. */
    .band-brand { background: rgb(var(--pine)); color: rgb(var(--on-brand)); }
    .band-brand :is(h1, h2, h3, h4, h5, h6) { color: rgb(var(--on-brand)); }
    .band-brand :is(p, li, span, strong, em) { color: inherit; }
    .band-brand a:not([class*="btn"]) { color: rgb(var(--on-brand)); text-decoration: underline; }
    /* A small square marker. These were spans asking for w-1.5 h-1.5, which
       the stylesheet does not have, so they measured 0x0 and never showed. */
    .dot { display: inline-block; inline-size: 0.4rem; block-size: 0.4rem; flex: none;
           background: rgb(var(--pine)); }
}

/* ==================================================================
   COMPONENTS
   ================================================================== */
@layer components {

    /* --- Type helpers ------------------------------------------- */
    .eyebrow {
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        letter-spacing: 0.14em; text-transform: uppercase;
        color: rgb(var(--rust)); margin-block-end: var(--sp-3);
    }
    .label {
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        letter-spacing: 0.1em; text-transform: uppercase;
        color: rgb(var(--ink-muted));
    }
    .note { font-size: var(--fs-xs); color: rgb(var(--ink-muted)); }
    .lede { font-size: var(--fs-md); max-inline-size: 46rem; color: rgb(var(--ink-muted)); }
    .warn-text { color: rgb(var(--rust)); font-weight: 650; }
    .nowrap { white-space: nowrap; }
    .tabular { font-variant-numeric: tabular-nums; }

    .section-title {
        font-size: var(--fs-xl); font-weight: 750; color: rgb(var(--heading));
        padding-block-end: var(--sp-2);
        margin-block-end: var(--sp-5);
        border-block-end: var(--rule-strong);
    }
    .sec + .sec { margin-block-start: var(--sp-7); }
    .sec-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
              border-block-end: var(--rule-strong); padding-block-end: var(--sp-2);
              margin-block-end: var(--sp-4); }
    .sec-hd h2 { font-size: var(--fs-xl); }
    .sec-more { margin-inline-start: auto; font-family: 'IBM Plex Mono', monospace;
                font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
                color: rgb(var(--rust)); text-decoration: none; }
    .sec-more:hover { text-decoration: underline; text-underline-offset: 3px; }

    :is(.lnk, .linklike) {
        color: rgb(var(--link)); font-weight: 550;
        text-decoration: underline; text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
    :is(.lnk, .linklike):hover {
        color: rgb(var(--link-hover)); text-decoration-thickness: 2px;
    }
    .linklike { background: none; border: 0; padding: 0; cursor: pointer; }
    ul.disc { list-style: disc; padding-inline-start: var(--sp-5); }
    ul.disc li + li { margin-block-start: var(--sp-1); }
    .ic { display: inline-block; vertical-align: -0.125em; flex: none; }

    /* --- Surfaces ------------------------------------------------ */
    .card {
        background: rgb(var(--surface));
        border: var(--rule);
        border-radius: var(--r-1);
        padding: var(--sp-5);
        container-type: inline-size;
    }
    /* Cards narrow enough to sit in a 3-up grid get tighter padding. */
    @container (max-width: 22rem) {
        .card { padding: var(--sp-4); }
    }
    /* The header band across the top of a card, with a pine marker on the
       leading edge. 68 markup instances used to call this .card-header and
       define it in 15 separate page <style> blocks - all unlayered, so any
       one of them outranked the whole stylesheet. Renamed onto the name
       reserved for it here so that a page copy missed somewhere becomes an
       inert no-op instead of a silent override. */
    .card-hd {
        position: relative;
        display: flex; align-items: center; gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-4);
        background: rgb(var(--surface));
        border-block-end: var(--rule);
    }
    .card-hd::before {
        content: ""; position: absolute;
        inset-inline-start: 0; inset-block: 12% 12%;
        inline-size: 3px; background: rgb(var(--pine));
    }
    /* Some of these bands title themselves with a <span> rather than a
       heading, so both carry the same treatment. */
    .card-hd :is(h2, h3, h4, span) {
        margin: 0; font-size: var(--fs-sm); font-weight: 700;
        color: rgb(var(--heading)); border: 0; padding: 0;
    }
    .card-hd-meta { margin-inline-start: auto; }
    .flag { box-shadow: inset 3px 0 0 rgb(var(--rust)); }
    .flag .ic, .card-hd .ic { color: rgb(var(--rust)); }

    /* Offset print-plate frame: the signature photo treatment. */
    .plate { position: relative; padding: var(--sp-2); }
    .plate::after {
        content: ""; position: absolute; inset: 0;
        border: 1px solid rgb(var(--plate));
        translate: var(--plate-offset) var(--plate-offset);
        pointer-events: none;
    }
    .plate img { position: relative; z-index: 1; inline-size: 100%; }
    /* A detail shot - kit, a close-up - does not want the full measure the
       way a scene does. Constrained rather than cropped, so the frame and
       the aspect ratio both survive. */
    .plate--sm { max-inline-size: 22rem; }

    /* Slide-in panel and its scrim - the store cart. Neither `fixed` nor
       inset-0, z-[60] or translate-x-full is in this stylesheet, so the
       drawer and its backdrop rendered inline in the page: a black block
       and a permanently open cart sitting in the document flow. */
    .drawer-scrim {
        position: fixed; inset: 0; z-index: 60;
        background: rgb(var(--scrim) / 0.55);
    }
    .drawer {
        position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70;
        inline-size: min(100%, 24rem);
        display: flex; flex-direction: column;
        background: rgb(var(--surface));
        border-inline-start: var(--rule);
        translate: 100% 0;
        transition: translate 240ms ease;
    }
    .drawer.is-open { translate: 0 0; }
    @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }

    /* A clear button parked at the trailing edge of a search field. */
    .field-clear {
        position: absolute; inset-inline-end: var(--sp-2); inset-block-start: 50%;
        translate: 0 -50%;
        font-size: var(--fs-2xs); font-weight: 650;
        color: rgb(var(--heading));
        border: var(--rule); background: rgb(var(--panel));
        padding: 0.2rem 0.55rem;
    }
    .field-clear:hover { border-color: rgb(var(--rust)); color: rgb(var(--rust)); }

    /* A caption centred on a rule. Two pages drew this by absolutely
       positioning a white-backed span over a dashed border; `absolute` has
       no rule here, so the label dropped below the line and sat left. Flex
       does it with no positioning at all. */
    .rule-label {
        display: flex; align-items: center; gap: var(--sp-3);
        margin-block: var(--sp-5);
        font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase;
        color: rgb(var(--ink-muted));
    }
    .rule-label::before, .rule-label::after {
        content: ""; flex: 1 1 0; border-block-start: var(--rule);
    }

    /* Section rhythm on pages built from stacked blocks rather than prose. */
    .stack-gap { margin-block-end: var(--sp-8); }
    .sec-break { border-block-start: var(--rule); padding-block-start: var(--sp-7); }
    /* A block pinned to the foot of a flex card, over a rule. */
    .card-foot { margin-block-start: auto; padding-block-start: var(--sp-5);
                 border-block-start: var(--rule); }
    .card-foot > * + * { margin-block-start: var(--sp-5); }

    /* The Communique masthead. The page asked for a blackletter face it never
       loaded, so the title fell back to generic serif - the only serif
       anywhere on the site. It takes the display step instead. */
    .masthead {
        display: block; font-size: var(--fs-4xl); font-weight: 800;
        letter-spacing: -0.03em; line-height: 1; color: rgb(var(--heading));
    }

    /* Back-issue tiles. Future issues were marked unavailable with
       `opacity-50 grayscale`, neither of which exists, so an issue that is
       not out yet looked exactly like the one that is. */
    .issue-tile {
        display: block; padding: var(--sp-4); text-align: center;
        border: var(--rule); background: rgb(var(--surface));
        text-decoration: none; color: inherit;
    }
    a.issue-tile:hover { border-color: rgb(var(--rust)); background: rgb(var(--panel) / 0.6); }
    .issue-tile .label { color: rgb(var(--ink-muted)); }
    .issue-tile.is-upcoming {
        background: transparent; border-style: dashed; color: rgb(var(--ink-faint));
    }
    .issue-tile.is-upcoming .label { color: rgb(var(--ink-faint)); }

    /* A statement of purpose set as a statement, with the association's seal
       beside it, rather than as the first paragraph of body copy. The seal
       artwork is an opaque square, so it needs the plate frame to read as a
       mounted medallion instead of a sticker dropped on the page. */
    .statement-block {
        display: grid; gap: var(--sp-4); align-items: start;
        padding-block: var(--sp-6); border-block: var(--rule);
        margin-block-end: var(--sp-6);
    }
    @media (min-width: 640px) {
        .statement-block { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-7); }
    }
    .statement {
        margin: 0; font-size: var(--fs-lg); line-height: 1.4;
        color: rgb(var(--heading)); text-wrap: pretty;
    }
    .plate figcaption { position: relative; z-index: 1; margin-block-start: var(--sp-2);
                        font-size: var(--fs-xs); color: rgb(var(--ink-faint)); }
    .img-plate { border: var(--rule); }

    /* --- Buttons -------------------------------------------------- */
    .btn {
        display: inline-flex; align-items: center; gap: var(--sp-2);
        font-weight: 650; font-size: var(--fs-sm);
        color: rgb(var(--ink));
        background: transparent;
        border: 1.5px solid rgb(var(--line-strong));
        border-radius: var(--r-2);
        padding: 0.62rem 1.15rem;
        cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
        /* Never grow past whatever holds you. nowrap is deliberate - short
           labels should not break across lines - but in a 240px rail it
           meant the text ran straight out through the border. */
        max-inline-size: 100%;
    }
    .btn:hover { border-color: rgb(var(--ink)); color: rgb(var(--ink)); }
    .btn:active { transform: translateY(1px); }
    /* A button that fills its column and wraps, for labels too long to sit
       on one line in a narrow rail. */
    /* A button in a fixed brand colour - PayPal blue, a file-format tag.
       It has to declare its own text colour: :where(a) in @layer base sets
       the link colour, and a shim utility like text-white sits in @layer
       legacy below it, so the label loses and comes out the same colour as
       the button. Seven links across five pages were rendering that way -
       solid rectangles with an invisible label. */
    .btn-brand {
        background: var(--brand); border-color: var(--brand);
        color: #fff;
    }
    .btn-brand:hover { color: #fff; filter: brightness(1.08); }

    .btn-block {
        display: flex; inline-size: 100%; justify-content: center;
        white-space: normal; text-align: center;
    }
    .btn-accent {
        background: rgb(var(--rust)); border-color: rgb(var(--rust));
        color: rgb(var(--on-brand));
    }
    .btn-accent:hover { background: rgb(var(--rust-hi)); border-color: rgb(var(--rust-hi)); color: rgb(var(--on-brand)); }
    .btn-primary {
        background: rgb(var(--pine)); border-color: rgb(var(--pine));
        color: rgb(var(--on-brand));
    }
    .btn-primary:hover { background: rgb(var(--pine-hi)); border-color: rgb(var(--pine-hi)); color: rgb(var(--on-brand)); }
    .btn-sm { padding: 0.4rem 0.8rem; font-size: var(--fs-2xs); }

    /* --- Toggles (replaces pills; .pill kept until pages convert) -- */
    :is(.toggle, .pill) {
        display: inline-flex; align-items: center; gap: var(--sp-1);
        font-weight: 650; font-size: var(--fs-2xs);
        color: rgb(var(--ink-muted));
        background: rgb(var(--surface));
        border: 1px solid rgb(var(--line-strong));
        border-radius: var(--r-1);
        padding: 0.35rem 0.75rem;
        cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
    }
    :is(.toggle, .pill):hover { color: rgb(var(--ink)); border-color: rgb(var(--ink)); }
    :is(.toggle, .pill)[aria-pressed="true"],
    :is(.toggle, .pill)[aria-current],
    :is(.toggle, .pill).is-active {
        background: rgb(var(--pine)); border-color: rgb(var(--pine)); color: rgb(var(--on-brand));
    }
    :is(.toggle-row, .pill-row) { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

    /* --- Badges: rectangular chips, one hue token each ------------ */
    .badge {
        display: inline-block;
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
        padding: 0.1rem 0.42rem;
        border-radius: var(--r-0);
        white-space: nowrap;
        --hue: var(--hue-mut);
        background: color-mix(in oklab, rgb(var(--hue)) 16%, rgb(var(--paper)));
        color: color-mix(in oklab, rgb(var(--hue)) 78%, rgb(var(--ink)));
        /* unconditional, so state survives forced-colors AND print */
        border: 1px solid currentColor;
    }
    .badge--ab { --hue: var(--hue-ab); }
    .badge--lci { --hue: var(--hue-lci); }
    .badge--spec { --hue: var(--hue-spec); }
    .badge--reg { --hue: var(--hue-reg); }
    .badge--ok { --hue: var(--hue-ok); }
    .badge--warn { --hue: var(--hue-warn); }
    .badge--stop { --hue: var(--hue-stop); }
    .badge--info { --hue: var(--hue-info); }
    /* Corner-anchored badge. Replaces `absolute top-3 right-3`, which was
       never implemented, so 62 club badges fell into normal flow above
       their card title. The card provides the containing block. */
    .badge-corner { position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2); }

    /* Trial-result row furniture. */
    .trial-body { border-block-start: var(--rule); background: rgb(var(--panel) / 0.35); }
    .chev-slot { margin-inline-start: auto; flex: none; }
    .pts-col { text-align: end; flex: none; min-inline-size: 3.5rem; }

    /* Placement marker in trial results. The renderer coloured these with
       bg-blue-600 / bg-red-600 / bg-yellow-400 and gradients for the
       honours - a palette this site does not define. `text-white` DOES
       exist, so first, second, NBQ, BIF and BOB came out as white text on
       no background: an empty bordered box, which is what a reader saw
       where the placement should be. Colour comes from the rosette set
       below, so nothing is duplicated. */
    .place {
        flex: none; display: grid; place-items: center;
        inline-size: 2.5rem; block-size: 2.5rem;
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 600; font-size: var(--fs-2xs);
        border: 1px solid rgb(var(--ink) / 0.25);
        background: rgb(var(--surface)); color: rgb(var(--ink));
    }
    /* The three honours had gradients, which this design does not use.
       Flat, and ranked by weight: brand, accent, second natural. */
    .place--bif { background: rgb(var(--pine)); color: rgb(var(--on-brand)); border-color: rgb(var(--pine)); }
    .place--bob { background: rgb(var(--rust)); color: rgb(var(--on-brand)); border-color: rgb(var(--rust)); }
    .place--hss { background: rgb(var(--olive)); color: rgb(var(--on-brand)); border-color: rgb(var(--olive)); }
    /* Did not qualify, no course, disqualified - present but quiet. */
    .place--none { background: rgb(var(--panel)); color: rgb(var(--ink-muted));
                   font-size: var(--fs-3xs); font-weight: 500; }

    /* --- Placement rosettes ---------------------------------------
       The sport's own colour system, not the site's: blue first, red
       second, yellow third, white fourth, green next-best-qualified.
       These stay literal in both schemes because they are the physical
       ribbons. Was duplicated verbatim on coursing and lci_explorer. */
    .ribbon-blue, .ribbon-red, .ribbon-yellow, .ribbon-white, .ribbon-green {
        border: 1px solid rgb(var(--ink) / 0.25);
    }
    .ribbon-blue { background-color: #2563eb; color: #fff; }
    .ribbon-red { background-color: #dc2626; color: #fff; }
    .ribbon-yellow { background-color: #facc15; color: rgb(var(--ink)); }
    .ribbon-white { background-color: #ffffff; color: rgb(var(--ink)); }
    .ribbon-green { background-color: #16a34a; color: #fff; }

    /* --- Callouts ------------------------------------------------- */
    .callout {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
        justify-content: space-between;
        border-inline-start: 3px solid rgb(var(--rust));
        background: var(--accent-soft);
        padding: var(--sp-4);
        margin-block-end: var(--sp-5);
    }
    .callout--warn { border-inline-start-color: rgb(var(--hue-warn)); }
    /* .callout is a horizontal notice - message on the left, action on the
       right. When it holds a heading over a list it has to stack instead. */
    .callout--stack { display: block; }
    .callout--stack .card-hd { margin-block-end: var(--sp-3); }
    .callout--info { border-inline-start-color: rgb(var(--hue-info)); }
    .callout-title { font-weight: 700; }

    /* --- Notice band --------------------------------------------- */
    .notice {
        background: rgb(var(--well)); color: rgb(var(--well-ink) / 0.92);
        font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-4); text-align: center;
    }
    .notice strong { color: rgb(var(--well-ink)); }
    .notice a { color: rgb(var(--well-ink)); text-decoration: underline; text-underline-offset: 2px; }

    /* --- Site header ---------------------------------------------- */
    .site-header {
        position: sticky; inset-block-start: 0; z-index: 60;
        background: rgb(var(--header-bg)); color: rgb(var(--header-ink));
        border-block-end: 3px solid rgb(var(--rust));
    }
    .site-header .wrap { display: flex; align-items: center; gap: var(--sp-2); min-block-size: var(--header-h); }
    .brand { display: inline-flex; align-items: center; gap: var(--sp-2);
             text-decoration: none; color: rgb(var(--header-ink)); margin-inline-end: var(--sp-1); }
    .brand img { inline-size: 34px; block-size: 34px; border-radius: 50%; background: #fff; padding: 1px; }
    .brand-name { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em; }
    .site-nav { display: none; }
    @media (min-width: 1024px) { .site-nav { display: flex; align-items: stretch; } }
    .nav-item { position: relative; }
    .nav-btn {
        display: inline-flex; align-items: center; gap: var(--sp-1);
        block-size: var(--header-h);
        font-weight: 600; font-size: var(--fs-sm);
        color: rgb(var(--header-ink) / 0.85);
        background: none; border: 0; cursor: pointer;
        padding-inline: var(--sp-3);
    }
    .nav-btn:hover { color: rgb(var(--header-ink)); }
    .nav-btn[aria-expanded="true"] { color: rgb(var(--header-ink)); box-shadow: inset 0 -3px 0 rgb(var(--rust)); }
    .nav-btn .ic { transition: transform 180ms; }
    .nav-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
    .nav-panel {
        position: absolute; inset-inline-start: 0; inset-block-start: 100%;
        min-inline-size: 16rem; z-index: 70;
        background: rgb(var(--surface)); color: rgb(var(--ink));
        border: 1px solid rgb(var(--line-strong));
        border-block-start: 3px solid rgb(var(--rust));
        padding-block: var(--sp-2);
        max-block-size: min(75vh, 34rem); overflow-y: auto;
    }
    .nav-item:last-child .nav-panel { inset-inline-start: auto; inset-inline-end: 0; }
    .nav-panel .nav-group { display: block; padding: var(--sp-2) var(--sp-4) var(--sp-1); }
    .nav-panel a { display: block; padding: 0.36rem var(--sp-4); font-size: var(--fs-sm);
                   color: rgb(var(--ink)); text-decoration: none; }
    .nav-panel a:hover { background: rgb(var(--panel)); color: rgb(var(--heading)); }
    .nav-panel a[aria-current="page"] { color: rgb(var(--heading)); font-weight: 700;
                                        box-shadow: inset 3px 0 0 rgb(var(--rust)); }
    .nav-panel hr { border: 0; border-block-start: var(--rule); margin-block: var(--sp-1); }
    .nav-panel .warn-link { color: rgb(var(--rust)); font-weight: 700; }
    .nav-cta {
        display: none; align-items: center;
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        letter-spacing: 0.08em; text-transform: uppercase;
        color: rgb(var(--header-ink));
        background: none; border: 1.5px solid rgb(var(--rust));
        padding: 0.35rem 0.7rem; text-decoration: none; white-space: nowrap;
        margin-inline-start: auto;
    }
    .nav-cta:hover { background: rgb(var(--rust)); color: rgb(var(--on-brand)); }
    @media (min-width: 640px) { .nav-cta { display: inline-flex; } }
    .icon-btn {
        display: inline-flex; align-items: center; justify-content: center;
        inline-size: 2.3rem; block-size: 2.3rem;
        background: none; border: 0; cursor: pointer;
        color: rgb(var(--header-ink) / 0.85);
    }
    .icon-btn:hover { color: rgb(var(--header-ink)); }
    .burger { margin-inline-start: var(--sp-1); }
    @media (min-width: 1024px) { .burger { display: none; } }
    .search-box { position: relative; margin-inline-start: auto; }
    .nav-cta ~ .search-box { margin-inline-start: 0; }
    .search-panel {
        position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-1));
        inline-size: 19.5rem; z-index: 70;
        background: rgb(var(--surface));
        border: 1px solid rgb(var(--line-strong));
        border-block-start: 3px solid rgb(var(--rust));
        padding: var(--sp-2);
    }
    .search-results { margin-block-start: var(--sp-1); }
    .search-results:empty { display: none; }
    .search-hit { display: block; padding: var(--sp-2); text-decoration: none;
                  border-block-start: var(--rule); }
    .search-hit:first-child { border-block-start: 0; }
    .search-hit:hover { background: rgb(var(--panel)); }
    .search-hit .t { display: block; font-weight: 650; font-size: var(--fs-sm); color: rgb(var(--heading)); }
    .search-hit .d { display: block; font-size: var(--fs-2xs); color: rgb(var(--ink-muted)); }
    .search-empty { padding: var(--sp-2); font-size: var(--fs-xs); color: rgb(var(--ink-muted)); }

    .mobile-menu {
        background: rgb(var(--surface)); color: rgb(var(--ink));
        border-block-end: 1px solid rgb(var(--line-strong));
        max-block-size: calc(100dvh - var(--header-h)); overflow-y: auto;
    }
    @media (min-width: 1024px) { .mobile-menu { display: none; } }
    .mobile-menu .wrap { padding-block: var(--sp-3) var(--sp-4); }
    .mobile-menu details { border-block-end: var(--rule); }
    .mobile-menu summary {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        padding-block: var(--sp-3); font-weight: 700; font-size: var(--fs-sm);
    }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu summary .ic { transition: transform 180ms; color: rgb(var(--ink-muted)); }
    .mobile-menu details[open] summary .ic { transform: rotate(180deg); }
    .mobile-menu .menu-links { padding-block: var(--sp-1) var(--sp-3); }
    .mobile-menu .menu-links a { display: block; padding: 0.4rem var(--sp-2);
                                 font-size: var(--fs-sm); color: rgb(var(--ink)); text-decoration: none; }
    .mobile-menu .menu-links a:hover { color: rgb(var(--heading)); }
    .mobile-menu .menu-links a[aria-current="page"] { color: rgb(var(--heading)); font-weight: 700;
                                                      box-shadow: inset 3px 0 0 rgb(var(--rust)); }
    .mobile-menu .nav-group { display: block; padding: var(--sp-2) var(--sp-2) var(--sp-1); }
    .mobile-menu .menu-top { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-block: var(--sp-1) var(--sp-3); }
    .mobile-menu .search-inline { padding-block: var(--sp-2) var(--sp-1); }

    /* --- Page heads and heroes ------------------------------------ */
    .hero-band { background: rgb(var(--panel)); border-block-end: var(--rule); }
    .hero { display: grid; gap: var(--sp-6); padding-block: var(--sp-7); align-items: center; }
    @media (min-width: 920px) {
        .hero { grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr); gap: var(--sp-8); }
    }
    .hero-band--slim .hero { display: block; padding-block: var(--sp-6); }
    .hero-title { font-size: var(--fs-3xl); }
    .hero-lede { margin-block-start: var(--sp-3); font-size: var(--fs-md);
                 max-inline-size: 38rem; color: rgb(var(--ink-muted)); }
    .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-5); }
    /* In-page jump links under a hero lede. faq.html does this with an inline
       style and &nbsp; spacers; this replaces that hack and it can adopt this. */
    .hero-jump { display: flex; flex-wrap: wrap; align-items: baseline;
                 gap: var(--sp-1) var(--sp-4); margin-block-start: var(--sp-4); }
    .hero-jump .label { flex: none; }
    .page-head { padding-block: var(--sp-6) var(--sp-5); border-block-end: var(--rule-strong);
                 margin-block-end: var(--sp-6); }
    .page-head > .lede { max-inline-size: 44rem; }
    .page-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); }
    @media (min-width: 768px) {
        .page-head:has(.page-actions) { display: flex; align-items: flex-end;
                                        justify-content: space-between; gap: var(--sp-5); }
        .page-actions { margin-block-start: 0; flex: none; }
    }

    /* Full-bleed photo hero (home) */
    .hero-splash { position: relative; min-block-size: 26rem; display: flex; align-items: center; overflow: hidden; }
    .hero-splash > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
    .hero-splash .shade {
        position: absolute; inset: 0;
        background: linear-gradient(90deg,
            rgb(var(--scrim) / 0.88) 0%, rgb(var(--scrim) / 0.6) 45%, rgb(var(--scrim) / 0.1) 82%);
    }
    .hero-splash .wrap { position: relative; z-index: 2; }
    .hero-splash .inner { max-inline-size: 34rem; padding-block: var(--sp-8); }
    .hero-splash h1 { color: #fff; font-size: var(--fs-4xl); }
    .hero-splash h1 .accent { color: rgb(211 168 122); }
    .hero-splash .hero-lede { color: rgb(255 255 255 / 0.9); }
    .hero-splash .since {
        margin-block-start: var(--sp-5); color: rgb(211 168 122);
        font-family: 'IBM Plex Mono', monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.14em; text-transform: uppercase;
    }
    .hero-splash .btn { color: #fff; border-color: rgb(255 255 255 / 0.55); }
    .hero-splash .btn:hover { border-color: #fff; }
    .hero-splash .btn-accent { background: rgb(164 74 47); border-color: rgb(164 74 47); color: #fff; }

    /* Photo banner (inner flagship pages) */
    .page-banner { position: relative; min-block-size: 13rem; display: flex; align-items: flex-end; overflow: hidden; }
    .page-banner > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
    .page-banner .shade {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgb(var(--scrim) / 0.15) 30%, rgb(var(--scrim) / 0.8) 100%);
    }
    .page-banner .wrap { position: relative; z-index: 2; padding-block: var(--sp-4); }
    .page-banner h1 { color: #fff; font-size: var(--fs-2xl); }
    .page-banner .hero-lede { color: rgb(255 255 255 / 0.92); margin-block-start: var(--sp-1); font-size: var(--fs-sm); }

    .quick-strip { background: rgb(var(--surface)); border-block-end: var(--rule); }
    .quick-strip .wrap { display: flex; flex-wrap: wrap; align-items: center;
                         gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-2); }
    .quick-strip a {
        font-family: 'IBM Plex Mono', monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase;
        color: rgb(var(--heading)); text-decoration: none;
    }
    .quick-strip a:hover { color: rgb(var(--rust)); }

    /* --- Quick links ---------------------------------------------- */
    .qgrid { display: grid; gap: var(--sp-3); }
    @media (min-width: 640px) { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .qlink {
        display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
        border: var(--rule); background: rgb(var(--surface));
        padding: var(--sp-4); text-decoration: none; color: inherit;
    }
    .qlink:hover { border-color: rgb(var(--ink-muted)); background: rgb(var(--panel) / 0.6); }
    .qlink-title { font-weight: 700; color: rgb(var(--heading)); font-size: var(--fs-sm); }
    .qlink .note { display: block; margin-block-start: var(--sp-1); }
    .qlink .ic { color: rgb(var(--rust)); margin-block-start: var(--sp-1); }

    /* --- Ledger lists (events, news) ------------------------------ */
    .ledger { list-style: none; padding: 0; margin: 0; }
    .ledger > li { border-block-end: var(--rule); padding-block: var(--sp-3); }
    .ledger > li:first-child { border-block-start: var(--rule); }
    .ledger .when {
        display: block; font-family: 'IBM Plex Mono', monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase;
        color: rgb(var(--rust)); margin-block-end: var(--sp-1);
    }
    .ledger .what { font-weight: 650; font-size: var(--fs-sm); }
    .ledger .what a { color: rgb(var(--ink)); text-decoration: none; }
    .ledger .what a:hover { color: rgb(var(--rust)); text-decoration: underline; text-underline-offset: 3px; }
    .ledger .meta { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-xs); color: rgb(var(--ink-muted)); }
    .ledger .badges { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-inline-start: var(--sp-2); }
    .ledger-foot { margin-block-start: var(--sp-3); }

    /* --- Clause list (policy documents) --------------------------- */
    .clause-list { margin: 0; }
    .clause { display: grid; gap: var(--sp-1) var(--sp-5); padding-block: var(--sp-4);
              border-block-end: var(--rule); }
    .clause:last-child { border-block-end: 0; }
    @media (min-width: 640px) { .clause { grid-template-columns: 7rem minmax(0, 1fr); } }
    .clause-id {
        font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: var(--fs-2xs);
        letter-spacing: 0.04em; color: rgb(var(--heading)); margin: 0;
    }
    .clause-body { margin: 0; }
    .clause-body > * + * { margin-block-start: var(--sp-2); }
    .clause-cite { font-size: var(--fs-2xs); color: rgb(var(--ink-faint)); font-style: italic; }

    /* --- Steps / timeline ----------------------------------------- */
    .steps { list-style: none; margin: 0; padding: 0; }
    .step { position: relative; padding-inline-start: var(--sp-7); padding-block-end: var(--sp-5); }
    .step:last-child { padding-block-end: 0; }
    .step::before {
        content: ""; position: absolute; inset-inline-start: 0.55rem; inset-block: 1.35rem 0;
        border-inline-start: var(--rule);
    }
    .step:last-child::before { display: none; }
    .step-n {
        position: absolute; inset-inline-start: 0; inset-block-start: 0;
        inline-size: 1.5rem; block-size: 1.5rem;
        display: grid; place-items: center;
        font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-3xs); font-weight: 500;
        background: rgb(var(--pine)); color: rgb(var(--on-brand));
    }
    .step-body h3, .step-body h4 { margin-block-end: var(--sp-1); }
    /* A progression whose items are not numbered - stakes, title tracks.
       The rail carries a node per item instead of a figure, so no extra
       markup is needed. */
    .steps--plain .step { padding-inline-start: var(--sp-5); }
    .steps--plain .step::before { inset-inline-start: 0.28rem; inset-block: 0.95rem 0; }
    .steps--plain .step::after {
        content: ""; position: absolute;
        inset-inline-start: 0; inset-block-start: 0.42rem;
        inline-size: 0.6rem; block-size: 0.6rem;
        background: rgb(var(--rust));
    }
    /* Three or four short steps read better side by side; the rail would
       be doing no work across that little vertical distance. */
    @media (min-width: 768px) {
        .steps--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
                      gap: var(--sp-5); }
        .steps--row .step { padding-block-end: 0; }
        .steps--row .step::before { display: none; }
    }

    /* --- Document lists ------------------------------------------- */
    .doc-list { list-style: none; padding: 0; margin: 0; }
    .doc-row {
        display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
        padding: var(--sp-3) var(--sp-1);
        border-block-end: var(--rule); text-decoration: none;
    }
    .doc-row:hover { background: rgb(var(--panel) / 0.6); }
    .doc-row .t { font-size: var(--fs-sm); font-weight: 550; color: rgb(var(--ink)); }
    .doc-row:hover .t { color: rgb(var(--heading)); }
    /* A document offered in more than one format: the row is a container,
       not a link, and each format is its own chip. */
    .doc-item { display: flex; flex-wrap: wrap; align-items: baseline;
                justify-content: space-between; gap: var(--sp-2) var(--sp-4);
                padding: var(--sp-3) var(--sp-1); border-block-end: var(--rule); }
    .doc-item:hover { background: rgb(var(--panel) / 0.6); }
    .doc-formats { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex: none; }
    /* The handful of forms that carry a description of their own stay
       cards; the other 27 are a list. */
    .doc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
    @media (min-width: 640px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .doc-feature { display: flex; flex-direction: column; gap: var(--sp-2);
                   border: var(--rule); background: rgb(var(--surface)); padding: var(--sp-4); }
    .doc-feature .doc-name { font-size: var(--fs-sm); }
    .doc-feature .doc-formats { margin-block-start: auto; padding-block-start: var(--sp-2); }
    .doc-rev { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
               font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase;
               color: rgb(var(--ink-faint)); }
    a.doc-type { text-decoration: none; }
    a.doc-type:hover { color: rgb(var(--rust)); border-color: rgb(var(--rust)); }
    .doc-name { font-weight: 600; }
    .doc-note { display: block; font-size: var(--fs-2xs); color: rgb(var(--ink-muted)); }
    .doc-type {
        flex: none; font-family: 'IBM Plex Mono', monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        letter-spacing: 0.07em; text-transform: uppercase;
        color: rgb(var(--ink-muted)); border: 1px solid rgb(var(--line-strong));
        padding: 0.05rem 0.4rem;
    }

    /* --- People and clubs ----------------------------------------- */
    .person-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
    @media (min-width: 640px) { .person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .person-card { border: var(--rule); background: rgb(var(--surface)); padding: var(--sp-4);
                   display: flex; flex-direction: column; }
    .person-photo { inline-size: 4.5rem; block-size: 4.5rem; object-fit: cover;
                    border: 1px solid rgb(var(--line-strong)); margin-block-end: var(--sp-3); }
    .person-role { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                   font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
                   color: rgb(var(--ink-muted)); }
    .person-name { font-weight: 700; font-size: var(--fs-md); color: rgb(var(--heading));
                   margin-block-start: var(--sp-1); }
    .person-term { font-weight: 400; color: rgb(var(--ink-muted)); }
    .person-contact { font-style: normal; margin-block-start: auto; padding-block-start: var(--sp-3);
                      border-block-start: var(--rule); font-size: var(--fs-xs); }
    /* Address, phone and email each hold their own line. */
    :is(.person-contact) :is(p, a) { display: block; }
    .person-contact > * + * { margin-block-start: var(--sp-1); }
    .person-contact a { color: rgb(var(--ink)); text-decoration: none; overflow-wrap: anywhere; }
    .person-contact a:hover { color: rgb(var(--rust)); text-decoration: underline; text-underline-offset: 3px; }
    .person-who { font-weight: 650; color: rgb(var(--heading)); }
    .person-addr { color: rgb(var(--ink-muted)); }
    .club-card { position: relative; border: var(--rule); background: rgb(var(--surface));
                 padding: var(--sp-3) var(--sp-4); }
    .club-card .t { font-weight: 650; font-size: var(--fs-sm); }
    .club-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
    @media (min-width: 640px) { .club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .club-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .club-name { font-size: var(--fs-md); font-weight: 700; color: rgb(var(--heading));
                 margin: 0; line-height: 1.25; }
    .club-abbr { display: block; margin-block-start: var(--sp-1);
                 font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                 font-size: var(--fs-3xs); letter-spacing: 0.08em;
                 color: rgb(var(--ink-muted)); }
    .club-contact { font-style: normal; margin-block-start: var(--sp-3);
                    font-size: var(--fs-xs); color: rgb(var(--ink)); }
    .club-contact > * + * { margin-block-start: var(--sp-2); }
    .club-contact a { color: rgb(var(--ink)); text-decoration: none; overflow-wrap: anywhere; }
    .club-contact a:hover { color: rgb(var(--rust)); text-decoration: underline; text-underline-offset: 3px; }

    /* --- Region accordion ------------------------------------------ */
    .region-head { display: flex; flex-wrap: wrap; align-items: center;
                   justify-content: space-between; gap: var(--sp-3);
                   padding: var(--sp-4); }
    .region-head:hover { background: rgb(var(--panel) / 0.6); }
    .region-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
    .region-name { font-size: var(--fs-lg); font-weight: 700; color: rgb(var(--heading));
                   white-space: nowrap; }
    .search-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
    .region-aside { display: flex; align-items: center; gap: var(--sp-3); }
    /* The director's name is supporting detail; below 640px the region
       name and its states are what matter. */
    .region-rd { display: none; text-align: end; text-decoration: none; color: inherit; }
    @media (min-width: 640px) { .region-rd { display: block; } }
    .region-rd .who { display: block; font-size: var(--fs-xs); font-weight: 650; }
    .region-rd:hover .who { color: rgb(var(--rust)); }
    .region-body { padding: var(--sp-5) var(--sp-4); border-block-start: var(--rule); }

    /* --- Region map -------------------------------------------------
       The zones position themselves with inline percentages, which do
       nothing without a positioned container - the whole map view was
       unstyled, so every zone stacked in normal flow and the tooltips
       rendered as a wall of text under the image. */
    #map-container { position: relative; }
    #map-container > img { display: block; inline-size: 100%; block-size: auto; }
    .region-zone { position: absolute; cursor: pointer; border: 1px solid transparent; }
    .region-zone:hover, .region-zone:focus-within {
        background: rgb(var(--rust) / 0.14); border-color: rgb(var(--rust));
    }
    .region-tooltip {
        position: absolute; z-index: 5; inset-block-start: 0; inline-size: 15rem;
        visibility: hidden;
        background: rgb(var(--surface)); border: var(--rule-strong);
        padding: var(--sp-3); font-size: var(--fs-2xs); text-align: start;
        box-shadow: 0 6px 18px rgb(var(--scrim) / 0.22);
    }
    .region-zone:is(:hover, :focus-within) > .region-tooltip { visibility: visible; }
    .tip-right { inset-inline-start: calc(100% + var(--sp-2)); }
    .tip-left { inset-inline-end: calc(100% + var(--sp-2)); }
    .tip-title { font-weight: 700; color: rgb(var(--heading)); }
    .tip-states { color: rgb(var(--ink-muted)); margin-block: 0 var(--sp-2); line-height: 1.35; }
    .tip-row { display: flex; align-items: center; gap: var(--sp-2); }
    .tip-row + .tip-row { margin-block-start: var(--sp-1); }
    .tip-initials { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                    color: rgb(var(--heading)); flex: none; }
    .tip-name { color: rgb(var(--ink-muted)); overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
    /* Any disclosure's chevron turns when it opens. Two components each
       had their own copy of this and a third <details> had none, so its
       chevron sat still. */
    details[open] > summary .chev { rotate: 180deg; }

    /* Top-three markers in a standings table. The page mapped these to
       bg-yellow-400 / bg-slate-300 / bg-amber-600 - a gold-silver-bronze
       scheme from a palette this site does not define - so all three
       rendered with no background at all. One filled square marks the top
       three; the numeral is the information, and this design spends colour
       once, not three times. */
    .rank-medal {
        display: grid; place-items: center; flex: none;
        inline-size: 1.75rem; block-size: 1.75rem;
        font-family: 'IBM Plex Mono', ui-monospace, monospace;
        font-weight: 500; font-size: var(--fs-3xs);
        background: rgb(var(--pine)); color: rgb(var(--on-brand));
    }

    /* Short definition pairs set in columns - a codes key, a glossary. */
    .cols-text { display: grid; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-sm); }
    @media (min-width: 640px) { .cols-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 768px) { .cols-text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

    /* A disclosure that labels its own state. Pages wrote this with
       `group-open:hidden` / `group-open:block`, neither of which exists
       here, so the closed label showed whether the panel was open or not. */
    details[open] > summary .when-closed,
    details:not([open]) > summary .when-open { display: none; }
    .region-acc .chev { color: rgb(var(--heading)); flex: none; }
    /* A corner badge overlays the card, so the title has to yield the
       space. The markup asked for this with `pr-10`, which was never
       implemented; the card owns the reservation now that it owns the
       badge's position. */
    .club-card:has(> .badge-corner) > h3 { padding-inline-end: 3.25rem; }
    .region-acc > summary { cursor: pointer; list-style: none; }
    .region-acc > summary::-webkit-details-marker { display: none; }

    /* --- Checklist -------------------------------------------------
       Things to bring, things to do. Each item had a `flex gap-3` wrapper
       holding space for an icon the debris sweep removed, so they read as
       unmarked lines. The marker belongs to the component. */
    .checklist { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
    .checklist li { position: relative; padding-inline-start: var(--sp-6);
                    padding-block: var(--sp-2); border-block-end: var(--rule); }
    .checklist li:last-child { border-block-end: 0; }
    .checklist li::before {
        content: ""; position: absolute;
        inset-inline-start: 0; inset-block-start: 0.85em;
        inline-size: 0.6rem; block-size: 0.6rem;
        border: 1.5px solid rgb(var(--line-strong));
    }

    /* --- Score bars ------------------------------------------------
       The judging criteria and what each is worth. These were three
       nested divs relying on h-2 and w-0, neither of which is in the
       stylesheet, with an IntersectionObserver setting the width from a
       data-width attribute - and that script was lost in the first
       redesign. So the bars had no height, no width and nothing to
       animate them: five invisible rows. The width is declarative now,
       from --pct in the markup, so there is nothing left to break. */
    .score-list { list-style: none; margin: 0; padding: 0; }
    .score-row { display: grid; grid-template-columns: 1fr auto;
                 gap: var(--sp-1) var(--sp-3); margin-block-end: var(--sp-3); }
    .score-row:last-child { margin-block-end: 0; }
    .score-name { font-weight: 650; font-size: var(--fs-sm); }
    .score-num { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                 font-size: var(--fs-sm); color: rgb(var(--ink-muted)); }
    .score-track { grid-column: 1 / -1; block-size: 0.5rem;
                   background: rgb(var(--panel)); border: 1px solid rgb(var(--line)); }
    .score-fill { display: block; block-size: 100%;
                  inline-size: var(--pct, 0%);
                  background: rgb(var(--hue, var(--pine))); }
    .score-total { display: flex; justify-content: space-between; align-items: baseline;
                   margin-block-start: var(--sp-4); padding-block-start: var(--sp-3);
                   border-block-start: var(--rule); }
    .score-total .n { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                      font-size: var(--fs-xl); color: rgb(var(--heading)); }

    /* --- Stat tiles ----------------------------------------------- */
    .stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); border-block: var(--rule);
                padding-block: var(--sp-4); }
    .stat { min-inline-size: 8rem; }
    .stat + .stat { padding-inline-start: var(--sp-5); border-inline-start: var(--rule); }
    .stat-label { display: block; font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                  font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
                  color: rgb(var(--ink-muted)); }
    .stat-n { display: block; font-size: var(--fs-xl); font-weight: 750;
              font-variant-numeric: tabular-nums; color: rgb(var(--heading)); }

    /* --- Award plaques -------------------------------------------- */
    .plaque-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
    @media (min-width: 640px) { .plaque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .plaque { border: 1px solid rgb(var(--plate)); background: rgb(var(--surface)); padding: var(--sp-4); }
    .plaque-year { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: var(--fs-3xs);
                   letter-spacing: 0.1em; color: rgb(var(--ink-muted));
                   padding-block-end: var(--sp-1); border-block-end: 1px solid rgb(var(--plate));
                   margin-block-end: var(--sp-2); }
    .plaque-name { font-weight: 700; font-size: var(--fs-md); color: rgb(var(--heading)); }
    .plaque-note { font-size: var(--fs-xs); color: rgb(var(--ink-muted)); margin-block-start: var(--sp-1); }

    /* --- Tables ---------------------------------------------------- */
    .tbl { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
    .tbl caption { text-align: start; font-family: 'IBM Plex Mono', monospace;
                   font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
                   color: rgb(var(--ink-muted)); padding-block-end: var(--sp-2); }
    .tbl th {
        font-family: 'IBM Plex Mono', monospace; font-weight: 500;
        font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
        color: rgb(var(--ink-muted)); text-align: start;
        padding: var(--sp-2); border-block-end: var(--rule-strong); white-space: nowrap;
    }
    .tbl td { border-block-end: var(--rule); padding: var(--sp-2); vertical-align: top; }
    .tbl th:first-child, .tbl td:first-child { padding-inline-start: 0; }
    .tbl th:last-child, .tbl td:last-child { padding-inline-end: 0; }
    .tbl tbody tr:hover { background: rgb(var(--panel) / 0.5); }
    .tbl .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* .tbl zeroes the padding on first and last cells so a bare table lines
       up with the text above it. Inside a bordered panel that puts the type
       hard against the border, so the wrapper supplies the inset instead. */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; }
    .tbl-wrap { padding-inline: var(--sp-4); }
    .tbl-wrap > .tbl caption { padding-block-start: var(--sp-3); }
    .rank { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
    tr.rank-top .rank { color: rgb(var(--rust)); font-weight: 500; }
    .row-canceled td { color: rgb(var(--ink-faint)); }
    .row-canceled .strike { text-decoration: line-through; }

    /* Stacked rows when the table's own container is narrow - not the
       viewport. A table inside the standings rail is far narrower than
       the window and must stack there too. */
    @container (max-width: 46rem) {
        .tbl-stack thead { display: none; }
        .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; }
        .tbl-stack tr { border: var(--rule); background: rgb(var(--surface));
                        padding: var(--sp-3); }
        .tbl-stack tr + tr { margin-block-start: var(--sp-3); }
        .tbl-stack tr:hover { background: rgb(var(--surface)); }
        .tbl-stack td { border: 0; padding: 0.1rem 0; }
        .tbl-stack td:empty { display: none; }
        .tbl-stack td[data-th]::before {
            content: attr(data-th);
            display: inline-block; min-inline-size: 5.5rem; margin-inline-end: var(--sp-2);
            font-family: 'IBM Plex Mono', monospace; font-weight: 500;
            font-size: var(--fs-3xs); letter-spacing: 0.07em; text-transform: uppercase;
            color: rgb(var(--ink-muted));
        }
        .tbl-stack .num { text-align: start; }
    }

    /* --- Forms ----------------------------------------------------- */
    .fieldset { border: var(--rule); background: rgb(var(--surface));
                padding: var(--sp-5); margin-block-end: var(--sp-5); }
    .legend { font-family: 'IBM Plex Mono', monospace; font-weight: 500;
              font-size: var(--fs-3xs); letter-spacing: 0.1em; text-transform: uppercase;
              color: rgb(var(--rust)); padding-inline: var(--sp-2); margin-inline-start: calc(var(--sp-2) * -1); }
    .field-row { margin-block-end: var(--sp-4); }
    .form-label { display: block; margin-block-end: var(--sp-1);
                  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
                  font-size: var(--fs-3xs); letter-spacing: 0.09em; text-transform: uppercase;
                  color: rgb(var(--ink-muted)); }
    .req { color: rgb(var(--rust)); }
    /* mark required fields from the control itself */
    .field-row:has(:required) .form-label::after { content: " *"; color: rgb(var(--rust)); }
    .helper { display: block; margin-block-start: var(--sp-1); font-size: var(--fs-2xs); color: rgb(var(--ink-muted)); }
    :is(.field, .field--text, .select, textarea.field) {
        background: rgb(var(--surface)); border: 1.5px solid rgb(var(--line-strong));
        border-radius: var(--r-1); color: rgb(var(--ink));
        padding: 0.5rem 0.7rem; font-size: var(--fs-sm);
    }
    .field { text-align: end; font-variant-numeric: tabular-nums; padding: 0.35rem 0.5rem; }
    .field--text { display: block; inline-size: 100%; text-align: start; }
    :is(.field, .field--text, .select, textarea.field):focus-visible {
        border-color: rgb(var(--rust)); outline: 2px solid rgb(var(--rust)); outline-offset: 1px;
    }
    :is(.field, .field--text, textarea.field):user-invalid { border-color: rgb(var(--hue-stop)); }
    .select { appearance: none; inline-size: 100%; padding-inline-end: 2.2rem; }
    .select-wrap { position: relative; }
    .select-wrap .ic { position: absolute; inset-inline-end: var(--sp-2); inset-block-start: 50%;
                       translate: 0 -50%; pointer-events: none; color: rgb(var(--ink-muted)); }
    .check { display: flex; align-items: flex-start; gap: var(--sp-2); cursor: pointer; }
    .check input { accent-color: rgb(var(--pine)); margin-block-start: 0.25rem; flex: none; }
    .w-qty { inline-size: 4rem; }
    /* Status banners use the hidden attribute, never a class. */
    .form-status { padding: var(--sp-3) var(--sp-4); border-inline-start: 3px solid rgb(var(--hue-ok));
                   background: rgb(var(--panel)); font-size: var(--fs-sm); font-weight: 600; }
    .form-status--err { border-inline-start-color: rgb(var(--hue-stop)); }

    /* Per-row labels in the request tables. Above the breakpoint the
       column headers carry the meaning, so these are hidden - visually
       only. They used `sm:hidden`, which is display:none, and that takes
       a label out of the accessibility tree: it left 40 controls with no
       accessible name on exactly the widths where the table layout, and
       therefore the form, is actually used. */
    @media (min-width: 640px) {
        .fl--row {
            position: absolute; inline-size: 1px; block-size: 1px;
            padding: 0; margin: -1px; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap; border: 0;
        }
    }

    /* --- Filter bar ------------------------------------------------ */
    .filter-bar { background: rgb(var(--surface)); border: var(--rule);
                  padding: var(--sp-4); container-type: inline-size; }
    .filter-bar .filters { display: grid; gap: var(--sp-3); }
    /* Filters on one side, a search field on the other. */
    .toolbar { display: flex; flex-wrap: wrap; align-items: center;
               justify-content: space-between; gap: var(--sp-3);
               margin-block-end: var(--sp-5); }
    .toolbar-search { flex: 1 1 18rem; max-inline-size: 22rem; }
    /* Counts and colour key under the toolbar. The swatches take the same
       hue tokens as the badges they describe; they were emerald, purple
       and blue, which matched nothing on the page. */
    .count-strip { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
                   border-block-start: var(--rule); padding-block-start: var(--sp-3);
                   margin: 0; font-size: var(--fs-2xs); color: rgb(var(--ink-muted)); }
    .count-strip .key { display: inline-flex; align-items: center; gap: var(--sp-1); }
    .key-dot { inline-size: 0.5rem; block-size: 0.5rem; flex: none;
               background: rgb(var(--hue, var(--hue-mut))); }
    .key-dot--ab { --hue: var(--hue-ab); }
    .key-dot--lci { --hue: var(--hue-lci); }
    .key-dot--reg { --hue: var(--hue-reg); }
    .toolbar-search input { inline-size: 100%; }
    .filter-bar > input[type="search"] { inline-size: 100%; }
    .filter-bar > .note { margin-block-start: var(--sp-2); min-block-size: 1rem; }
    @container (min-width: 34rem) { .filter-bar .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @container (min-width: 60rem) { .filter-bar .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    /* --- Tabs ------------------------------------------------------ */
    .tab-list { display: flex; flex-wrap: wrap; gap: var(--sp-1);
                border-block-end: var(--rule); margin-block-end: var(--sp-5); }
    .tab {
        font-weight: 650; font-size: var(--fs-sm);
        color: rgb(var(--ink-muted)); background: none;
        border: 0; border-block-end: 3px solid transparent;
        padding: var(--sp-2) var(--sp-3); cursor: pointer; margin-block-end: -1px;
    }
    .tab:hover { color: rgb(var(--ink)); }
    .tab[aria-selected="true"] { color: rgb(var(--heading)); border-block-end-color: rgb(var(--rust)); }
    .tabpanel:focus-visible { outline-offset: 4px; }

    /* --- Breed rail (standings) ------------------------------------ */
    .breed-rail { border: var(--rule); background: rgb(var(--surface));
                  max-block-size: 60vh; overflow-y: auto; container-type: inline-size; }
    .breed-link {
        display: block; inline-size: 100%; text-align: start; cursor: pointer;
        background: none; border: 0; border-block-end: var(--rule);
        font-size: var(--fs-sm); color: rgb(var(--ink)); padding: var(--sp-2) var(--sp-3);
    }
    .breed-link:last-child { border-block-end: 0; }
    .breed-link:hover { background: rgb(var(--panel)); color: rgb(var(--heading)); }
    .breed-link[aria-current="true"] { color: rgb(var(--heading)); font-weight: 700;
                                       box-shadow: inset 3px 0 0 rgb(var(--rust)); background: rgb(var(--panel)); }
    .rail-only-mobile { display: block; }
    @media (min-width: 1024px) { .rail-only-mobile { display: none; } }
    .rail-only-desktop { display: none; }
    @media (min-width: 1024px) { .rail-only-desktop { display: block; } }

    /* --- Calendar --------------------------------------------------- */
    .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
               font-family: 'IBM Plex Mono', monospace; font-weight: 500;
               font-size: var(--fs-3xs); letter-spacing: 0.08em; text-transform: uppercase;
               color: rgb(var(--ink-muted)); margin-block-end: var(--sp-1); }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr);
                border-inline-start: var(--rule); border-block-start: var(--rule); }
    .cal-day { border-inline-end: var(--rule); border-block-end: var(--rule);
               min-block-size: 90px; padding: var(--sp-1); background: rgb(var(--surface)); }
    .cal-day--pad { background: rgb(var(--panel) / 0.5); }
    .cal-day--today { background: color-mix(in oklab, rgb(var(--pine)) 8%, rgb(var(--surface))); }
    .cal-num { display: inline-block; font-family: 'IBM Plex Mono', monospace;
               font-size: var(--fs-3xs); color: rgb(var(--ink-muted)); margin-block-end: var(--sp-1); }
    .cal-num--today { background: rgb(var(--pine)); color: rgb(var(--on-brand)); padding-inline: 0.3rem; }
    .cal-chip {
        display: block; font-size: var(--fs-3xs); line-height: 1.35;
        padding: 0.05rem 0.28rem; margin-block-end: 0.1rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
        --hue: var(--hue-mut);
        background: color-mix(in oklab, rgb(var(--hue)) 16%, rgb(var(--paper)));
        color: color-mix(in oklab, rgb(var(--hue)) 78%, rgb(var(--ink)));
        border: 1px solid currentColor;
    }
    .cal-chip--ab { --hue: var(--hue-ab); }
    .cal-chip--lci { --hue: var(--hue-lci); }
    .cal-chip--spec { --hue: var(--hue-spec); }
    .cal-chip--reg { --hue: var(--hue-reg); }
    .cal-chip--canceled { text-decoration: line-through; opacity: 0.55; }
    .cal-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cal-scroll > div { min-inline-size: 560px; }

    /* --- Long documents --------------------------------------------- */
    .doc-toc { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4));
               border: var(--rule); background: rgb(var(--surface)); padding: var(--sp-3);
               max-block-size: 70vh; overflow-y: auto; }
    .toc-entry { display: block; font-size: var(--fs-xs); color: rgb(var(--ink-muted));
                 text-decoration: none; padding: var(--sp-1) var(--sp-2);
                 border-inline-start: 2px solid transparent; }
    .toc-entry:hover { color: rgb(var(--ink)); background: rgb(var(--panel) / 0.6); }
    .toc-entry[aria-current] { color: rgb(var(--heading)); font-weight: 650;
                               border-inline-start-color: rgb(var(--rust)); background: rgb(var(--panel)); }
    /* .doc-content is the same thing under the name the governance and
       handbook pages already use, so both resolve here rather than each
       page restating the measure, rhythm and heading rules. */
    /* The measure belongs to the text, not to the box holding it. On these
       pages .doc-content IS the document card, so capping it at 72ch shrank
       the card and left a dead gutter running down the side of the column.
       The card fills its column; the lines inside it stay readable. */
    :is(.prose, .doc-content) { min-inline-size: 0; }
    /* 64ch, not 72: `ch` is the width of a zero, and Archivo's zero is
       wider than its average lowercase letter, so 72ch actually sets
       around 83 characters - past the comfortable band. 64ch measures
       out at roughly 74.

       `dl` is absent from the list, and .steps is excluded, for the same
       reason: both are components whose own rail or rule should span the
       card, and whose text is capped one level further in. */
    :is(.prose, .doc-content) :is(p, ul, ol, blockquote, h2, h3, h4, h5):not(.steps) {
        max-inline-size: 64ch;
    }
    /* Spacing has to reach paragraphs at ANY depth, not just direct
       children. These documents nest their clauses in indent wrappers -
       the constitution's sub-clauses sit inside <div class="pl-6">, and
       doc.js adds another .doc-section wrapper on top - so a
       `> * + *` rule reaches almost none of the real text. */
    :is(.prose, .doc-content) :is(p, ul, ol, dl, table, blockquote) {
        margin-block-end: var(--sp-4);
    }
    :is(.prose, .doc-content) :is(p, ul, ol, dl, table):last-child { margin-block-end: 0; }
    :is(.prose, .doc-content, .doc-section) > * + * { margin-block-start: var(--sp-4); }
    /* Components below manage their own rhythm and must not be doubled. */
    :is(.clause-body, .step-body, .club-contact, .person-contact) :is(p, ul, ol) {
        margin-block-end: 0;
    }
    :is(.prose, .doc-content) h2 {
        font-size: var(--fs-xl); margin-block-start: var(--sp-7);
        padding-block-end: var(--sp-2); border-block-end: var(--rule-strong);
    }
    :is(.prose, .doc-content) h2:first-child { margin-block-start: 0; }
    /* Rust for the third level, as the constitution has always had it. In
       a document that nests Article > Section > clause, giving the
       section markers their own colour is what makes the structure
       scannable; the size step alone is too small to carry it. */
    :is(.prose, .doc-content) h3 {
        font-size: var(--fs-md); margin-block-start: var(--sp-5);
        color: rgb(var(--rust));
    }
    :is(.prose, .doc-content) h4 {
        font-size: var(--fs-2xs); font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        margin-block-start: var(--sp-5);
    }
    :is(.prose, .doc-content) :is(ul, ol) { padding-inline-start: var(--sp-5); }
    :is(.prose, .doc-content) ul { list-style: disc; }
    :is(.prose, .doc-content) ol { list-style: decimal; }
    :is(.prose, .doc-content) li + li { margin-block-start: var(--sp-1); }

    /* Components that own their markers and rhythm have to survive being put
       inside a document. The document's list rules above are (0,1,1) and were
       beating .checklist / .steps / .score-list at (0,1,0) in the same layer,
       so a checklist inside prose came out with discs AND hollow squares, and
       an ol.steps came out numbered twice - visible on bowen.html today. */
    :is(.prose, .doc-content) :is(.checklist, .steps, .score-list) {
        list-style: none; padding-inline-start: 0;
    }
    :is(.prose, .doc-content) :is(.checklist, .steps, .score-list) > li + li {
        margin-block-start: 0;
    }
    /* A step heading is anchored to its numbered node; the document's heading
       rhythm must not push it down the column or recolour it rust. */
    :is(.prose, .doc-content) .step-body :is(h3, h4) {
        margin-block-start: 0; color: rgb(var(--heading));
    }
    /* The plate's register frame sits 11px past the figure box and needs the
       clearance, or it collides with whatever follows. */
    :is(.prose, .doc-content) .plate { margin-block: var(--sp-6); }

    .section-divider { border: 0; border-block-start: var(--rule-strong); margin-block: var(--sp-6); }
    /* A named passage inside a handbook: breed notes, worked examples. */
    .breed-section { border: var(--rule); background: rgb(var(--surface));
                     padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5); }
    .breed-section h3 { margin-block: 0 var(--sp-3); padding-block-end: var(--sp-2);
                        border-block-end: var(--rule); font-size: var(--fs-md); }
    .toc-sidebar a.toc-sub { padding-inline-start: var(--sp-6);
                             font-size: var(--fs-2xs); color: rgb(var(--ink-muted)); }
    /* The rulebook pages' contents links, which were a third name for
       the same thing. Kept as .nav-link because 48 markup instances use
       it; the styling is the rail's. */
    .nav-link {
        display: block; padding: var(--sp-1) var(--sp-3);
        font-size: var(--fs-xs); color: rgb(var(--ink)); text-decoration: none;
        border-inline-start: 2px solid transparent;
    }
    .nav-link:hover { color: rgb(var(--heading)); border-inline-start-color: rgb(var(--line-strong)); }
    .nav-link.active { color: rgb(var(--rust)); font-weight: 650;
                       border-inline-start-color: rgb(var(--rust)); }
    :is(.prose, .doc-content) table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
    :is(.prose, .doc-content) :is(th, td) { border: var(--rule); padding: var(--sp-2); text-align: start; }
    .doc-section + .doc-section { margin-block-start: var(--sp-5); }
    /* Search hits. The three doc pages each named their own highlight
       class; one of them also pinned the text to a literal slate, which
       vanished against the dark scheme. */
    :is(mark, mark.doc-highlight, mark.search-highlight) {
        background: color-mix(in oklab, rgb(var(--hue-warn)) 30%, rgb(var(--paper)));
        color: rgb(var(--ink)); padding-inline: 0.125rem;
    }

    /* --- Disclosures ------------------------------------------------ */
    .disclosure > summary { cursor: pointer; list-style: none;
                            display: inline-flex; align-items: center; gap: var(--sp-2); }
    .disclosure > summary::-webkit-details-marker { display: none; }
    .disclosure > summary .chev { transition: transform 200ms; color: rgb(var(--ink-muted)); }
    .disclosure[open] > summary .chev { transform: rotate(180deg); }

    /* --- Embeds and misc -------------------------------------------- */
    .embed-frame { border: var(--rule); background: rgb(var(--surface)); }
    .embed-frame iframe { display: block; inline-size: 100%; border: 0; }
    .logo-tile { display: block; background: #fff; border: var(--rule); padding: var(--sp-3); }
    .logo-tile:hover { border-color: rgb(var(--ink-muted)); }
    .scroll-skin { scrollbar-width: thin; scrollbar-color: rgb(var(--line-strong)) transparent; }
    .scroll-skin::-webkit-scrollbar { inline-size: 8px; block-size: 8px; }
    .scroll-skin::-webkit-scrollbar-thumb { background: rgb(var(--line-strong)); }
    .scroll-skin::-webkit-scrollbar-track { background: transparent; }
    .hidden-cat { display: none !important; }

    /* --- Footer well -------------------------------------------------- */
    .well { background: rgb(var(--well)); color: rgb(var(--well-ink) / 0.9);
            padding-block: var(--sp-7); margin-block-start: auto; }
    .well a { color: rgb(var(--well-ink)); text-decoration: underline; text-underline-offset: 2px; }
    .well a:hover { color: rgb(211 168 122); }
    .foot-cols { display: grid; gap: var(--sp-5) var(--sp-6); margin-block-end: var(--sp-6); }
    @media (min-width: 640px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 1024px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); } }
    .foot-cols .label { color: rgb(var(--well-ink) / 0.55); display: block; margin-block-end: var(--sp-2); }
    .foot-cols ul { list-style: none; padding: 0; margin: 0; }
    .foot-cols li + li { margin-block-start: var(--sp-1); }
    .foot-cols a { font-size: var(--fs-sm); text-decoration: none; color: rgb(var(--well-ink) / 0.85); }
    .foot-cols a:hover { text-decoration: underline; color: rgb(var(--well-ink)); }
    .foot-cols a[aria-current="page"] { color: rgb(211 168 122); }
    .foot-brand p { font-size: var(--fs-xs); line-height: 1.6; color: rgb(var(--well-ink) / 0.75); }
    .foot-brand .brand { margin-block-end: var(--sp-2); }
    #disclaimer { max-inline-size: 56rem; margin-inline: auto; font-size: var(--fs-sm); line-height: 1.65; }
    #disclaimer .flow > * + * { margin-block-start: var(--sp-3); }
    #disclaimer strong { color: rgb(var(--well-ink)); }
    .foot-fine { font-size: var(--fs-2xs); }
    .foot-fine > * + * { margin-block-start: var(--sp-2); }
    .foot-meta { margin-block-start: var(--sp-5); padding-block-start: var(--sp-4);
                 border-block-start: 1px solid rgb(var(--well-ink) / 0.14);
                 text-align: center; font-size: var(--fs-2xs); color: rgb(var(--well-ink) / 0.65); }
    .foot-meta a { color: rgb(var(--well-ink) / 0.85); }
    .foot-meta .brandline { margin-block-start: var(--sp-1); display: flex; flex-wrap: wrap;
                            justify-content: center; align-items: center; gap: var(--sp-1) var(--sp-4); }
    .foot-meta .brandline a { display: inline-flex; align-items: center; gap: var(--sp-1); text-decoration: none; }

    /* --- Accessibility helpers ---------------------------------------- */
    .sr-only {
        position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .skip-link {
        position: fixed; inset-inline-start: var(--sp-3); inset-block-start: var(--sp-3); z-index: 100;
        background: rgb(var(--surface)); color: rgb(var(--ink));
        border: 1px solid rgb(var(--line-strong));
        padding: var(--sp-2) var(--sp-3); font-weight: 650; font-size: var(--fs-xs);
        text-decoration: none; transform: translateY(-200%);
    }
    .skip-link:focus { transform: none; }

    /* State must survive Windows High Contrast, where backgrounds and
       colour-mix results are discarded. */
    @media (forced-colors: active) {
        :is(.badge, .cal-chip, .toggle, .pill, .doc-type) { border: 1px solid currentColor; }
        :is(.tab, .breed-link, .toc-entry)[aria-selected="true"],
        :is(.tab, .breed-link, .toc-entry)[aria-current] { outline: 2px solid currentColor; outline-offset: -2px; }
        .plate::after { outline: 1px solid currentColor; }
    }
}

/* ==================================================================
   PRINT
   ================================================================== */
@media print {
    :root {
        --paper: 255 255 255; --panel: 255 255 255; --surface: 255 255 255;
        --ink: 0 0 0; --ink-muted: 60 60 60; --ink-faint: 90 90 90;
        --line: 180 180 180; --line-strong: 120 120 120;
        --pine: 0 0 0; --pine-hi: 0 0 0; --rust: 0 0 0; --olive: 0 0 0;
        --plate: 150 150 150; --well: 255 255 255; --well-ink: 0 0 0;
        --heading: 0 0 0; --link: 0 0 0; --on-brand: 255 255 255; --scrim: 255 255 255;
        --header-bg: 255 255 255; --header-ink: 0 0 0;
    }
    body { display: block; }
    .no-print, .site-header, .mobile-menu, .quick-strip, .skip-link, .btn,
    .hero-splash > img, .hero-splash .shade, .page-banner > img, .page-banner .shade,
    #tab-nav, #sec-nav, .doc-toc { display: none !important; }
    .hero-splash h1, .page-banner h1 { color: #000; }
    .hero-splash .hero-lede, .page-banner .hero-lede { color: #333; }
    .notice { border-block-end: 1px solid #000; }
    .well { border-block-start: 1px solid #000; }
    .card, .clause, .person-card, .plaque { break-inside: avoid; }
    .section-title, .prose h2 { break-after: avoid; }
    [hidden] { display: none !important; }
    /* tab panels and doc sections print in full */
    .tabpanel[hidden], .doc-section[hidden] { display: block !important; }
    .badge, .cal-chip, .doc-type { border: 1px solid #000; background: #fff; color: #000; }
}

/* ==================================================================
   UTILITIES
   ================================================================== */
@layer utilities {
    /* Display utilities live at the TOP of the cascade during the
       transition. 65 markup instances depend on `hidden md:table-cell`
       resolving in source order; from the bottom layer a component's
       display would beat .hidden and those cells would always show.
       Deleted with the rest of the shim in phase 6. */
    .hidden { display: none; }
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .grid { display: grid; }
    @media (min-width: 640px) {
        .sm\:hidden { display: none; }
    }
    @media (min-width: 768px) {
        .md\:table-cell { display: table-cell; }
        .md\:hidden { display: none; }
    }
    @media (min-width: 1024px) {
        .lg\:hidden { display: none; }
    }
    @media (min-width: 1280px) {
        .xl\:hidden { display: none; }
    }

    /* The show-side variants (sm:flex, lg:block and friends). The phase 3
       assembler only recognised one rule per line, and these are written
       several to a line, so they stayed in @layer legacy - below .hidden in
       this layer. Every `hidden md:block` on the site therefore stayed
       hidden at all widths: 17 elements across 10 pages were invisible. */
    @media (min-width: 1024px) {
        .lg\:block { display: block; }
        .lg\:flex { display: flex; }
        .lg\:grid { display: grid; }
    }
    @media (min-width: 1280px) {
        .xl\:block { display: block; }
        .xl\:flex { display: flex; }
    }
    @media (min-width: 640px) {
        .sm\:block { display: block; }
        .sm\:inline { display: inline; }
        .sm\:inline-block { display: inline-block; }
        .sm\:flex { display: flex; }
        .sm\:inline-flex { display: inline-flex; }
        .sm\:grid { display: grid; }
    }
    @media (min-width: 768px) {
        .md\:block { display: block; }
        .md\:inline { display: inline; }
        .md\:inline-block { display: inline-block; }
        .md\:flex { display: flex; }
        .md\:inline-flex { display: inline-flex; }
        .md\:grid { display: grid; }
    }
}

@layer legacy {
    /* The shim still speaks the old palette. Phase 3 renamed --green and
       --green-hi to --pine and --pine-hi and did not leave aliases, so five
       shim rules resolved to an invalid colour and painted nothing at all -
       across 578 uses, including 54 backgrounds. Those were dark panels
       carrying white or pale text, so where a background vanished the text
       went with it: the "Don't See Your Breed?" band on breeds.html was
       reading at 1.11:1. Deleted with the rest of the shim in phase 6. */
    :root {
        --green: var(--pine);
        --green-hi: var(--pine-hi);
    }

    /* Strip the native button chrome. Without this, a button whose
       component class does not exist falls back to the platform's grey
       slab with a light border - which is how the policy viewer's four
       document buttons were rendering.

       It lives in THIS layer, the lowest, on purpose. Several buttons
       still get their look from shim utilities like `border-2
       border-dashed`, and layer order beats specificity: from @layer
       reset this rule would win over those and flatten them. Move it up
       to reset when the shim goes in phase 6. */
    :where(button) {
        background: none; border: 0; padding: 0;
        cursor: pointer; text-align: inherit;
    }

    /* ==================================================================
       Legacy layout layer.
       Converted pages still carry their original utility class names in
       markup; this implements the used subset as real CSS, themed to the
       tokens above, so interior pages keep their intended structure.
       Ordering matters: display utilities first, responsive variants last
       so `hidden sm:flex` style pairs resolve correctly.
       ================================================================== */
    .flex-col { flex-direction: column; }
    .flex-row { flex-direction: row; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-grow { flex-grow: 1; }
    .flex-1 { flex: 1 1 0%; }
    .shrink-0 { flex-shrink: 0; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .items-end { align-items: flex-end; }
    .items-baseline { align-items: baseline; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-end { justify-content: flex-end; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .col-span-2 { grid-column: span 2 / span 2; }
    .col-span-3 { grid-column: span 3 / span 3; }
    .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; }
    .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; }
    .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }
    .gap-x-3 { column-gap: 0.75rem; } .gap-x-5 { column-gap: 1.25rem; } .gap-x-6 { column-gap: 1.5rem; }
    .gap-y-1 { row-gap: 0.25rem; } .gap-y-2 { row-gap: 0.5rem; }
    .space-y-1 > * + * { margin-top: 0.25rem; } .space-y-1\.5 > * + * { margin-top: 0.375rem; }
    .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; }
    .space-y-4 > * + * { margin-top: 1rem; } .space-y-5 > * + * { margin-top: 1.25rem; }
    .space-y-6 > * + * { margin-top: 1.5rem; } .space-y-8 > * + * { margin-top: 2rem; }
    .space-y-10 > * + * { margin-top: 2.5rem; } .space-y-12 > * + * { margin-top: 3rem; }
    .space-x-2 > * + * { margin-left: 0.5rem; } .space-x-3 > * + * { margin-left: 0.75rem; }
    .space-x-4 > * + * { margin-left: 1rem; }
    .divide-y > * + * { border-top: 1px solid rgb(var(--line)); }

    .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; }
    .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
    .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; } .p-12 { padding: 3rem; }
    .px-1 { padding-inline: 0.25rem; } .px-2 { padding-inline: 0.5rem; } .px-2\.5 { padding-inline: 0.625rem; }
    .px-3 { padding-inline: 0.75rem; } .px-4 { padding-inline: 1rem; } .px-5 { padding-inline: 1.25rem; }
    .px-6 { padding-inline: 1.5rem; } .px-8 { padding-inline: 2rem; }
    .py-0\.5 { padding-block: 0.125rem; } .py-1 { padding-block: 0.25rem; } .py-1\.5 { padding-block: 0.375rem; }
    .py-2 { padding-block: 0.5rem; } .py-2\.5 { padding-block: 0.625rem; } .py-3 { padding-block: 0.75rem; }
    .py-4 { padding-block: 1rem; } .py-5 { padding-block: 1.25rem; } .py-6 { padding-block: 1.5rem; }
    .py-8 { padding-block: 2rem; } .py-10 { padding-block: 2.5rem; } .py-12 { padding-block: 3rem; } .py-16 { padding-block: 4rem; }
    .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; } .pt-4 { padding-top: 1rem; }
    .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; }
    .pb-1 { padding-bottom: 0.25rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-3 { padding-bottom: 0.75rem; }
    .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; }
    .pl-3 { padding-left: 0.75rem; } .pl-4 { padding-left: 1rem; } .pl-5 { padding-left: 1.25rem; } .pl-6 { padding-left: 1.5rem; }
    .pr-3 { padding-right: 0.75rem; } .pr-4 { padding-right: 1rem; }
    .m-0 { margin: 0; } .mx-auto { margin-inline: auto; }
    .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; }
    .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
    .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
    .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; }
    .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-1\.5 { margin-bottom: 0.375rem; }
    .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }
    .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
    .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; }
    .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; }
    .mr-1 { margin-right: 0.25rem; } .mr-2 { margin-right: 0.5rem; }

    .w-full { width: 100%; }
    .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-8 { width: 2rem; }
    .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; }
    .w-24 { width: 6rem; } .w-32 { width: 8rem; } .w-40 { width: 10rem; } .w-48 { width: 12rem; }
    .w-56 { width: 14rem; } .w-64 { width: 16rem; }
    .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-8 { height: 2rem; }
    .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; }
    .h-24 { height: 6rem; } .h-32 { height: 8rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; }
    .h-56 { height: 14rem; } .h-64 { height: 16rem; } .h-full { height: 100%; } .h-auto { height: auto; }
    .min-w-0 { min-width: 0; }
    .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; }
    .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; }
    .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; }
    .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; }

    .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; }
    .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; line-height: 1.2; } .text-4xl { font-size: 2.25rem; line-height: 1.15; }
    .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-black { font-weight: 850; }
    .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; }
    .italic { font-style: italic; } .underline { text-decoration: underline; }
    .tracking-tight { letter-spacing: -0.015em; } .tracking-wide { letter-spacing: 0.025em; }
    .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; }
    .leading-none { line-height: 1; } .leading-tight { line-height: 1.25; }
    .leading-snug { line-height: 1.375; } .leading-relaxed { line-height: 1.625; }
    .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; }
    .whitespace-nowrap { white-space: nowrap; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .text-white { color: #ffffff; }
    .text-asfa-green, .text-asfa-greenHover { color: rgb(var(--green-hi)); }
    @media (prefers-color-scheme: dark) { .text-asfa-green, .text-asfa-greenHover { color: rgb(var(--green)); } }
    .text-asfa-accent, .text-asfa-accentHover { color: rgb(var(--rust)); }
    .text-asfa-text { color: rgb(var(--ink)); }
    .text-asfa-text\/50 { color: rgb(var(--ink) / 0.55); }
    .text-asfa-text\/60 { color: rgb(var(--ink) / 0.62); }
    .text-asfa-text\/70 { color: rgb(var(--ink) / 0.72); }
    .text-asfa-text\/80 { color: rgb(var(--ink) / 0.82); }
    .text-asfa-text\/90 { color: rgb(var(--ink) / 0.9); }
    .text-asfa-bg1, .text-asfa-bg2 { color: rgb(var(--panel)); }
    .text-gray-400, .text-gray-500 { color: rgb(var(--ink-muted) / 0.85); }
    .text-gray-600, .text-gray-700 { color: rgb(var(--ink-muted)); }
    .bg-white { background-color: rgb(var(--surface)); }
    .bg-gray-50, .bg-gray-100, .bg-asfa-bg1 { background-color: rgb(var(--paper)); }
    .bg-asfa-bg2 { background-color: rgb(var(--panel)); }
    .bg-asfa-green { background-color: rgb(var(--green)); }
    .bg-asfa-greenHover { background-color: rgb(var(--green-hi)); }
    .bg-asfa-accent { background-color: rgb(var(--rust)); }
    .border { border: 1px solid rgb(var(--line)); }
    .border-t { border-top: 1px solid rgb(var(--line)); }
    .border-b { border-bottom: 1px solid rgb(var(--line)); }
    .border-l { border-left: 1px solid rgb(var(--line)); }
    .border-r { border-right: 1px solid rgb(var(--line)); }
    .border-b-2 { border-bottom: 2px solid rgb(var(--line-strong)); }
    .border-gray-100, .border-gray-200, .border-gray-300,
    .border-asfa-border, .border-asfa-border\/50 { border-color: rgb(var(--line)); }
    .border-asfa-green { border-color: rgb(var(--green)); }
    .border-asfa-accent { border-color: rgb(var(--rust)); }

    .rounded { border-radius: 6px; } .rounded-md { border-radius: 8px; }
    .rounded-lg { border-radius: 10px; } .rounded-xl { border-radius: 14px; }
    .rounded-2xl { border-radius: 18px; } .rounded-full { border-radius: 999px; }
    .shadow-sm { box-shadow: var(--shadow-sm); }
    .shadow, .shadow-md { box-shadow: var(--shadow-md); }
    .overflow-hidden { overflow: hidden; }
    .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .overflow-y-auto { overflow-y: auto; }
    .object-cover { object-fit: cover; }
    .object-contain { object-fit: contain; }
    .relative { position: relative; }
    .transition, .transition-colors, .transition-all { transition: color 160ms, background-color 160ms, border-color 160ms, box-shadow 160ms, transform 160ms; }
    .cursor-pointer { cursor: pointer; }
    .list-none { list-style: none; }

    /* Responsive variants (after base display utilities so `hidden md:flex`
       pairs resolve show-at-breakpoint correctly) */
    @media (min-width: 640px) {
        .sm\:flex-row { flex-direction: row; }
        .sm\:items-center { align-items: center; }
        .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .sm\:gap-6 { gap: 1.5rem; }
        .sm\:w-24 { width: 6rem; } .sm\:w-32 { width: 8rem; } .sm\:w-auto { width: auto; }
        .sm\:mt-0 { margin-top: 0; } .sm\:mt-1 { margin-top: 0.25rem; }
        .sm\:p-6 { padding: 1.5rem; } .sm\:p-8 { padding: 2rem; }
        .sm\:px-6 { padding-inline: 1.5rem; } .sm\:py-4 { padding-block: 1rem; }
        .sm\:text-sm { font-size: 0.875rem; } .sm\:text-base { font-size: 1rem; }
        .sm\:text-lg { font-size: 1.125rem; } .sm\:text-xl { font-size: 1.25rem; }
        .sm\:text-2xl { font-size: 1.5rem; } .sm\:text-3xl { font-size: 1.875rem; }
    }
    @media (min-width: 768px) {
        .md\:flex-row { flex-direction: row; }
        .md\:items-center { align-items: center; } .md\:items-end { align-items: flex-end; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-3 { grid-column: span 3 / span 3; }
        .md\:w-1\/2 { width: 50%; } .md\:w-48 { width: 12rem; } .md\:w-64 { width: 16rem; }
        .md\:p-8 { padding: 2rem; } .md\:p-12 { padding: 3rem; }
        .md\:px-3 { padding-inline: 0.75rem; } .md\:px-6 { padding-inline: 1.5rem; }
        .md\:mt-0 { margin-top: 0; }
        .md\:text-base { font-size: 1rem; } .md\:text-lg { font-size: 1.125rem; }
        .md\:text-xl { font-size: 1.25rem; } .md\:text-2xl { font-size: 1.5rem; }
        .md\:text-3xl { font-size: 1.875rem; } .md\:text-4xl { font-size: 2.25rem; }
    }
    @media (min-width: 1024px) {
        .lg\:flex-row { flex-direction: row; }
        .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        .lg\:col-span-1 { grid-column: span 1 / span 1; } .lg\:col-span-2 { grid-column: span 2 / span 2; }
        .lg\:max-w-xs { max-width: 20rem; }
        .lg\:px-8 { padding-inline: 2rem; }
    }
    @media (min-width: 1280px) {
          .xl\:flex-col { flex-direction: column; }
        .xl\:w-56 { width: 14rem; }
        .xl\:flex-row { flex-direction: row; }
        .xl\:text-sm { font-size: 0.875rem; }
    }

}