/*
 * Ashgrove Kell v2 — "The Bundle". Every colour, font, size, length, duration, easing, filter,
 * z-index and breakpoint on the site lives here; site.css and site.js only reference them
 * (JS reads them once with getComputedStyle — no literal fallbacks). Prefix: --s-.
 * One definition per property; var() always takes ONE argument (L1).
 *
 * PALETTE — "paper, ink, pen". Vermilion is the ONLY colour; photographs are pure neutral
 * monochrome (R=G=B verified after encoding). Measured WCAG ratios:
 *   ink #111214 on paper #d9e1e9        14.2:1
 *   graphite #4f5358 on paper            5.9:1  (secondary text at ANY size, incl. 0.8rem notes)
 *   graphite on paper-light #eef2f5      6.9:1
 *   pen #e0402a on paper                 3.2:1  → strokes, tabs, rules, figures >= 24px only
 *   pen-text #b0301c on paper            4.8:1  → small vermilion text on paper (markers, errors)
 *   paper-light #eef2f5 on night         17.3:1
 *   night-muted #8f969d on night          6.5:1  (secondary text on night)
 *   pen-night #ff5a40 on night            6.3:1  → outcome lines, markers on night (AA small)
 *   night #0c0d0f on pen (tab labels)     4.6:1
 *
 * DISTINCTNESS (CIEDE2000, ground vs ground — must be >= 6):
 *   paper #d9e1e9 vs Halberd #e9e7e2 7.3 · Caldermoor (draft chalk #e9e9e2) 7.9 · Varrow chalk
 *   #f6f3ee 8.4 / limestone #e9e4da 9.6 · Solenne #fffbf7 9.2 · Saltmere #eef0ee 6.1 · Vesperwood
 *   #f4efe2 11.2 · Ashgrove v1 #f7f5f0 8.4. A cool blue-grey bond: the only cool paper in the set.
 *   night #0c0d0f vs Vantrell #1b1916 4.6 · #13110f 2.5 · Nightweave #07080f 2.2 (near-blacks
 *   are never far apart in ΔE; the register split against a cool paper is what tells them apart).
 */

/* Literata (opsz 7–72, wght 400–600; smcp, c2sc, onum, lnum, tnum, pnum, frac kept) + Italic
   (opsz 7–72, wght 400), and Schibsted Grotesk (wght 400–600; tnum kept, NO smcp — never fake it).
   SIL OFL 1.1, latin subset, built on the Pi lab. Sources, features and SHA-256 in BRIEF.md. */
@font-face {
    font-family: "AK Literata";
    src: url("fonts/literata-latin-var.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "AK Literata";
    src: url("fonts/literata-italic-latin-var.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "AK Schibsted";
    src: url("fonts/schibsted-latin-var.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- colour: paper register ---- */
    --s-paper: #d9e1e9;            /* cool blue-grey bond: the paper register ground */
    --s-paper-light: #eef2f5;      /* the cover sheet, raised tiles, type on night */
    --s-paper-deep: #ccd5de;       /* field wells, the index sheet's alternate rows */
    --s-ink: #111214;              /* text on paper; the primary button fill */
    --s-graphite: #4f5358;         /* secondary text on paper, 5.9:1 */
    --s-hair: #1112142e;           /* hairline rules on paper */
    --s-hair-strong: #11121480;    /* ruled field baselines, table rules */

    /* ---- colour: night register ---- */
    --s-night: #0c0d0f;            /* neutral blue-black ground */
    --s-night-raised: #15171a;     /* the nav sheet, brief cards */
    --s-night-text: #eef2f5;       /* = paper-light */
    --s-night-muted: #8f969d;      /* 6.5:1 on night */
    --s-night-hair: #eef2f524;
    --s-night-hair-strong: #eef2f55c;

    /* ---- colour: the pen (the ONLY colour) ---- */
    --s-pen: #e0402a;              /* strokes, exhibit tabs, rules, the button stroke, big figures */
    --s-pen-text: #b0301c;         /* small vermilion text on paper (footnote markers, errors) */
    --s-pen-night: #ff5a40;        /* outcome lines + markers on night, 6.3:1 */
    --s-pen-wash: #e0402a1f;       /* footnote highlight wash */
    --s-tab-ink: #0c0d0f;          /* label colour on a vermilion tab */
    --s-redact: #050506;           /* redaction bars on a matter file: true black on paper */
    --s-redact-night: #2a2d32;     /* redaction bars on night: a bar, not a hole */
    --s-select: #e0402a40;
    --s-focus: #111214;            /* focus ring on paper */
    --s-focus-night: #eef2f5;      /* focus ring on night */
    --s-scrim-photo: #0c0d0f;      /* letterbox frame around Exhibit B before it opens */

    /* ---- type ---- */
    --s-serif: "AK Literata", "Iowan Old Style", Georgia, serif;
    --s-sans: "AK Schibsted", "Helvetica Neue", Arial, sans-serif;

    /* The statement: three lines in columns 1–8 at 1440 (measure in Chrome AND Safari);
       five lines at 390. opsz pinned to the axis max. */
    --s-step-statement: clamp(3.2rem, .2rem + 6.7vw, 6.25rem);   /* line ≈ 8.4 × size: clears Exhibit A by >= 32px from 1024 to 1440+ */   /* AD proof: 6rem = ~800px for the
                                       longest line at 1440, inside the 886px 8-column span */
    --s-opsz-statement: 72;
    --s-opsz-display: 48;           /* section titles, monograms' companions */
    --s-opsz-text: 12;              /* briefs, clauses, body */
    --s-opsz-note: 8;               /* footnotes */
    --s-step-monogram: clamp(4.5rem, 3rem + 4vw, 7.5rem);
    --s-step-monogram-sm: 2.75rem;  /* phone rows: 72px monogram cell */
    --s-step-h2: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
    --s-step-h3: clamp(1.375rem, 1.15rem + .6vw, 1.75rem);
    --s-step-lead: clamp(1.25rem, 1rem + .8vw, 1.75rem);
    --s-step-claim: clamp(1.375rem, 1.05rem + 1.1vw, 2.125rem);   /* "their position" in a brief */
    --s-step-outcome: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
    --s-step-figure: clamp(2.5rem, 1.8rem + 2.2vw, 4rem);         /* ratio figures, totals */
    --s-step-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
    --s-step-small: .9375rem;
    --s-step-ledger: 1.0625rem;     /* fee tables, the partners' register and their 'known for' lines: read, not glanced at */
    --s-step-note: .8125rem;        /* footnotes: the scale contrast against the statement */
    --s-step-label: .9375rem;       /* Schibsted UI labels, tabs, running head: 15px uppercase (was 13px, too tight to read); graphite on paper 5.9:1, night-muted on night 6.5:1 */
    --s-step-wordmark: 1.1875rem;
    --s-step-input: 1.0625rem;      /* >= 16px: no iOS focus zoom */
    --s-step-stamp: 1.5rem;         /* the angled RECEIVED stamp */
    --s-step-marker: .62em;         /* footnote superscripts, relative to their line */

    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-semi: 600;

    --s-leading-statement: .98;
    --s-leading-display: 1.06;
    --s-leading-tight: 1.18;
    --s-leading-body: 1.55;
    --s-leading-note: 1.45;
    --s-leading-ui: 1.2;
    --s-leading-solid: 1;

    --s-track-statement: -.022em;
    --s-track-display: -.012em;
    --s-track-caps: .06em;          /* Literata small caps (wordmark, section names) */
    --s-track-ui: .08em;            /* Schibsted uppercase UI: tabs, band, stamps */
    --s-track-running: .04em;

    --s-measure-brief: 34ch;
    --s-measure-body: 38em;
    --s-measure-note: 30em;
    --s-measure-clause: 44em;
    --s-indent-optical: -.045em;    /* optical indent of the statement's first glyph (Chrome/Firefox:
                                       hanging-punctuation is Safari-only) */
    --s-marker-rise: -.62em;        /* vertical-align of footnote markers */

    /* ---- grid + space ---- */
    --s-max: 1344px;
    --s-gutter: clamp(16px, 3.4vw, 48px);
    --s-cols: 12;
    --s-col-gap: clamp(16px, 2vw, 32px);
    --s-statement-span: 9;          /* columns the statement occupies at desktop (manager r4: 1–9) */
    --s-exhibit-span: 4;            /* columns 9–12: Exhibit A */
    --s-section: clamp(72px, 9vw, 144px);
    --s-space-2xs: 4px;
    --s-space-xs: 8px;
    --s-space-s: 12px;
    --s-space-m: 20px;
    --s-space-l: 32px;
    --s-space-xl: 56px;
    --s-space-2xl: 96px;
    --s-tap: 44px;
    --s-input-h: 52px;
    --s-nav-h: 64px;
    --s-nav-h-sm: 56px;
    --s-above-est: 100px;           /* ribbon + nav until site.js measures the real height */

    /* ---- the register split (first frame). Two declarations in CSS: the vh token first as the
       cascade for very old engines, then the svh token (NOT a var() fallback). ---- */
    --s-night-share-vh: 56vh;
    --s-night-share: 56svh;         /* night register share of the first frame, desktop (r5: raised one step — no dead night above the statement) */
    --s-night-share-sm-vh: 52vh;
    --s-night-share-sm: 52svh;      /* phone (r5: leaves room for the Exhibit A strip AND the CTA inside Safari's ~664px) */
    --s-register-edge: 1px;         /* the hard horizontal edge: a sheet laid on a dark desk */
    --s-sheet-shadow: 0 -1px 0 #0c0d0f, 0 -18px 40px -24px #000000b3;  /* paper's top edge on night */

    /* ---- exhibits ---- */
    --s-exhibit-a-w: clamp(300px, 30vw, 460px);         /* desktop display width of Exhibit A (square master, 1024:1024): AD pass 2 —
                                       the square fills the night's right column, which a 7:5 left empty */
    --s-tab-h: 28px;
    --s-tab-pad-x: 12px;
    --s-tab-rise: 6px;              /* tabs slide up this far on entry */
    --s-photo-frame: 1px;           /* hairline frame so a dark photo keeps its edge on night */
    --s-photo-frame-color: #eef2f547;
    --s-slit-vh: 14vh;
    --s-slit: 14svh;                /* Exhibit B closed: a letterbox across the width */
    --s-slit-open-vh: 90vh;
    --s-slit-open: 90svh;           /* Exhibit B open, desktop */
    --s-slit-sm-vh: 18vh;
    --s-slit-sm: 18svh;             /* phone, closed */
    --s-slit-open-sm-vh: 75vh;
    --s-slit-open-sm: 75svh;        /* phone, open (portrait crop) */
    --s-slit-scale-from: 1.08;      /* the one photo allowed past 1.06: Exhibit B only */
    --s-slit-scale-to: 1;
    --s-slit-pos: 50% 40%;          /* desktop object-position (boardroom, AD pass 3): the slit lands on the chair crowns, the head chair and the lit sash windows */
    --s-slit-pos-sm: 50% 46%;       /* phone portrait crop: window + head chair + chandelier tail */
    --s-slit-focus: .3;             /* AD R9: the closed slit is centred on this line of the photo (window + head chair), not its middle */
    --s-slit-focus-sm: .26;         /* phone: slit near the top of the figure so § 3 shows the tab at once (R10) */
    --s-photo-scale-to: 1.04;       /* every other exhibit: slow scale on entry, never past 1.06 */

    /* ---- the pen ---- */
    --s-pen-w: 3px;                 /* hero stroke under "itself" */
    --s-pen-w-fine: 1.5px;          /* partner hairlines, caption rules */
    --s-btn-stroke-over: 24px;      /* the button's pen stroke runs this far past its right edge */
    --s-btn-stroke-rise: 10px;      /* ...on a gentle rising curve */
    --s-btn-pad-y: 16px;
    --s-btn-pad-x: 28px;
    --s-rule: 1px;
    --s-rule-strong: 2px;
    --s-focus-w: 2px;
    --s-focus-off: 3px;
    --s-redact-h: .82em;            /* bar height within a line */
    --s-redact-y: .1em;
    --s-stamp-angle: -8deg;
    --s-stamp-border: 2px;
    --s-stamp-dot: 10px;            /* timeline stamp marks */
    --s-note-rule: 3px;             /* vermilion left rule on a highlighted footnote */

    /* ---- layers ---- */
    --s-z-photo: 0;
    --s-z-tab: 2;
    --s-z-nav: 50;
    --s-z-sheet: 1100;           /* above the concept ribbon (1000) */
    --s-z-skip: 1200;

    /* ---- motion: almost none, perfectly placed ---- */
    --s-ease-pen: cubic-bezier(.55, .05, .25, 1);
    --s-ease-calm: cubic-bezier(.22, .61, .36, 1);
    --s-gsap-pen: power2.inOut;     /* GSAP's nearest named curves to the beziers above */
    --s-gsap-calm: power3.out;
    --s-dur-fast: 160ms;
    --s-dur-mid: 320ms;
    --s-dur-pen: 700ms;             /* the stroke under "itself", once, on load */
    --s-delay-pen: 350ms;
    --s-dur-marker: 240ms;          /* footnote 1 appears after the stroke */
    --s-dur-tab: 420ms;
    --s-dur-redact: 560ms;          /* an outcome bar lifts, right to left */
    --s-gap-redact: 90ms;
    --s-dur-hairline: 640ms;        /* partner hairlines */
    --s-dur-stamp: 220ms;
    --s-gap-stamp: 260ms;
    --s-dur-note: 400ms;            /* footnote highlight tween */
    --s-resize-delay: 180ms;
    --s-count-delay: 700ms;         /* the character counter speaks after a pause in typing */
    --s-trigger-start: top 82%;
    --s-slit-start: center 95%;     /* Exhibit B scrub (scrubbed, NOT pinned): starts as a slit at the foot of the screen */
    --s-slit-end: center 45%;
    --s-slit-scrub: .6;
    --s-spy-margin: -45% 0px -50% 0px;

    /* ---- breakpoints: CSS @media mirrors these literally; JS reads them here ---- */
    --s-mq-wide: (min-width: 1024px);
    --s-mq-phone: (max-width: 767px);
    --s-mq-nav: (min-width: 1180px);

    /* ==== Front-end engineer additions (layout, pen geometry, sizes, runtime defaults) ==== */
    /* Runtime values: these are the DEFAULTS (finished state, no JS). site.js / index.php set them
       per element: --s-slit-p (Exhibit B open 0..1), --s-divider-k (tab position), --s-redact-n. */
    --s-slit-p: 1;
    --s-divider-k: 0;
    --s-redact-n: 8;

    /* <picture sizes> (read by index.php) */
    --s-sizes-exhibit-a: (min-width: 1024px) min(460px, 30vw), calc(100vw - 32px);
    --s-sizes-exhibit-c: (min-width: 1024px) min(1344px, 100vw - 96px), 100vw;
    --s-sizes-exhibit-d: (min-width: 1024px) 660px, 100vw;
    --s-sizes-exhibit-e: (min-width: 1024px) 420px, 100vw;
    --s-sizes-full: 100vw;
    --s-sizes-phone-full: 100vw;

    /* statement + its pen */
    --s-step-statement-sm-vh: clamp(2.6rem, min(1.2rem + 10vw, 10vh - 1.5625rem), 3.7rem);
    --s-step-statement-sm: clamp(2.6rem, min(1.2rem + 10vw, 10svh - 1.5625rem), 3.7rem);   /* phone: grows with the usable height —
        iPhone with toolbars (~664px) 2.6rem on three lines; a tall viewport (844) ~3.6rem on five lines, which
        fills the night register instead of leaving a band above the statement (AD pass 2) */
    --s-statement-max: none;
    --s-mark-pen-x: -3%;
    --s-mark-pen-y: .04em;
    --s-mark-pen-w: 106%;
    --s-mark-pen-h: .26em;
    --s-step-marker-statement: .3em;
    --s-marker-rise-statement: -1.55em;
    --s-marker-gap-statement: .24em;   /* clears the overhang of the f in "itself" */
    --s-marker-gap: .08em;
    --s-marker-hit: -12px -8px;     /* invisible hit area around a superscript marker */

    /* buttons + links */
    --s-btn-pen-h: 20px;
    --s-btn-pen-y: -7px;
    --s-btn-stroke-gap: 40px;       /* clear space after a button so its stroke never meets the next target */
    --s-underline-off: .22em;
    --s-icon: 16px;
    --s-icon-stroke: 1.5;
    --s-tap-pull: -12px;            /* pulls a 44px icon target back into a small line */
    --s-chev-turn: 180deg;

    /* section divider tabs (a bundle's dividers, staggered like real ones) */
    --s-divider-h: 48px;            /* r4: 1.6x — the tabs announce a new section, not a chip */
    --s-divider-radius: 3px;
    --s-divider-step: clamp(28px, 9vw, 168px);
    --s-sheet-lift: 0 -1px 0 #11121414, 0 -16px 32px -24px #1112144d;
    --s-sheet-card: 0 1px 0 #11121414, 0 24px 48px -32px #11121466;

    /* masthead + exhibits */
    --s-exhibit-a-rise: clamp(180px, 19vw, 274px);      /* Exhibit A rises this far into the night register (top ~ the statement's cap line at 1440x900) */
    --s-exhibit-a-ratio-sm: 16 / 9;
    --s-exhibit-a-pos-sm: 50% 28%;  /* phone 16:9 strip under the night half: lamp shade to lit base and the desk glint (AD pass 5) */
    --s-exhibit-c-ratio: 16 / 7;
    --s-slit-cap-room: 128px;       /* space under Exhibit B for its caption */
    --s-cap-rule-w: 120px;

    /* index, briefs, partners, terms, sheet */
    --s-num-col: 3.5rem;
    --s-num-nudge: .3em;
    --s-measure-lead: 34em;
    --s-measure-brief-wide: 46rem;
    --s-leader-min: 24px;
    --s-leader-w: 2px;
    --s-leader-y: -.28em;
    --s-total-pen-y: -10px;
    --s-brief-margin: 7rem;
    --s-brief-margin-wide: 10rem;
    --s-brief-label: 9.5rem;
    --s-briefs-indent: 0px;
    --s-redact-gap: .12em;
    --s-bar-bleed: -.06em -.12em;
    --s-delay-redact: 120ms;
    --s-mono-cell: 72px;
    --s-mono-pen-w: 92%;            /* the partner's pen mark runs UNDER the initials' baseline, never through */
    --s-mono-pen-h: .14em;
    --s-mono-pen-y: -.16em;
    --s-track-engraved: .12em;      /* engraved small-cap monograms */
    --s-step-monogram-lead: clamp(7rem, 4rem + 6vw, 11rem);
    --s-dot: 3px;
    --s-stamp-dot-top: .2em;
    --s-stamp-from: 1.25;
    --s-stamp-tilt-1: -2deg;
    --s-stamp-tilt-2: 1.5deg;
    --s-stamp-tilt-3: -1deg;
    --s-memo-label: 11.5rem;
    --s-memo-label-y: 18px;         /* label baseline against a 52px ruled field */
    --s-area-h: 112px;
    --s-check: 18px;
    --s-check-dot: 8px;
    --s-radio-radius: 50%;          /* a radio reads as one-of-many; everything else stays square */
    --s-received-top: 72px;
    --s-sheet-num-w: 3rem;
    --s-sheet-row: 64px;

    /* ==== Engineer pass 2 (after the 6.9 review) ==== */
    --s-briefs-open: 2;             /* matter files laid open; the rest are indexed tabs that open in place */
    --s-statement-foot: .22em;      /* the statement's last line sits ON the night/paper edge: descender tips meet it */
    --s-step-divider-num: 1.5rem;   /* § numeral on a divider tab, display Literata */
    --s-step-divider-t: .875rem;    /* section name on a divider tab, tracked caps */
    --s-divider-pad-x: 20px;
    --s-section-end: clamp(48px, 5vw, 80px);   /* a section's foot: the next divider tab announces the change */
    --s-btn-stroke-over-sm: 12px;   /* phone: the stroke overshoots the full-width button by this much */
    --s-btn-pen-from-sm: 58%;       /* phone: the stroke starts here along the button */
    --s-memo-label-sm: 6.25rem;     /* phone cover sheet: label and field share one ruled line */
    --s-memo-label-y-sm: 14px;      /* phone: the label sits on the line the typed text will sit on */
    --s-file-pad: clamp(20px, 3vw, 40px);
    --s-file-tab-h: 64px;
    --s-file-gap: 14px;
    --s-file-edge: #000000;         /* the ink edge of a matter file on the night */
    --s-file-shadow: 0 1px 0 #000000, 0 22px 44px -28px #000000e6;
    --s-strike-y: .56;              /* the pen crosses a claim's line at this fraction of the line box */
    --s-strike-pos: 60%;            /* no-JS fallback strike: background-position of the straight line in each line box */
    --s-strike-wobble: 1.6px;
    --s-strike-over: 6px;           /* the stroke starts/ends this far past the words */
    --s-pen-w-strike: 2px;
    --s-dur-strike: 520ms;
    --s-gap-strike: 160ms;
    --s-delay-strike: 200ms;
    --s-pen-w-mono: 2px;
    --s-mast-note-gap: 20px;        /* footnote 1 hangs this far under the confidence line */

    /* r5 · masthead margin column: 1.1–1.3 set beside the CTA on the paper, behind a ruled legal margin */
    --s-mast-act-span: 4;           /* CTA, confidence line, footnote 1: columns 1–4 */
    --s-mast-clauses-from: 5;       /* the clauses: columns 5–8 */
    --s-mast-clauses-span: 4;
    --s-margin-rule: 3px;           /* a double hairline (border-style double), the margin of a ruled legal sheet */
    --s-step-clause-title: 1.0625rem;

    /* r5 · docket figure in an open matter file's empty right column: paper ink, never vermilion */
    --s-step-docket: clamp(3.5rem, 1.5rem + 3.4vw, 5.25rem);
    --s-docket-w: 11rem;
    --s-docket-pad: 16px;
    --s-leading-docket: .9;

    /* r6 · section openers varied (§ 3 on Exhibit B, § 4 index + ledger, § 5 contents rail) */
    --s-slit-scrim: linear-gradient(to top, color-mix(in srgb, var(--s-night) 94%, transparent) 0%, color-mix(in srgb, var(--s-night) 78%, transparent) 26%, transparent 58%);
    --s-mopen-pad: clamp(24px, 4vw, 56px);  /* the heading's distance from the photograph's bottom edge */
    --s-measure-over: 22em;         /* § 3 lead over the photo: a short measure on the dark lower third */
    --s-measure-stack: 26em;        /* § 4 lead stacked under its heading */
    --s-head-ledger-span: 6;        /* § 4: heading + lead, columns 1–6 */
    --s-head-ledger-from: 8;        /* § 4: the ledger, columns 8–12 */
    --s-ledger-row: 64px;
    --s-reg-mono: 3.5rem;           /* register: the small monogram in the margin */
    --s-step-reg-mono: 1.375rem;
    --s-reg-cols: var(--s-reg-mono) minmax(0, 3fr) minmax(0, 3.2fr) 5.5rem minmax(0, 4fr) var(--s-icon);
    --s-reg-row: 64px;
    --s-rail-span: 3;               /* § 5: the contents rail, columns 1–3 */
    --s-terms-main-span: 5;         /* § 5: the clauses, columns 4–8; the rate card and Exhibit E, 9–12 */
    --s-rail-top: calc(var(--s-nav-h) + var(--s-space-l));
}