/*
 * Ostrander & Quill: design tokens. "Pattern paper": manila ground, navy-ink drafting,
 * tailor's-chalk blue lines, tacking-white basting, a rare selvedge red. Every colour, font,
 * size, weight, leading, space, radius, duration, easing, filter and breakpoint on the site
 * lives here; site.css and site.js only reference them. Prefix --s-.
 *
 * Contrast, measured (WCAG 2.x, sRGB):
 *   ink #1c2335 on manila #e8d6a4 ................ 10.88:1  (all text)
 *   ink on manila-leaf #f1e5c3 ................... 12.48:1  (order-book leaf)
 *   ink on manila-deep #dcc68e ................... 9.33:1   (pattern-piece fills, ticket rows)
 *   ink-soft #4a4f63 on manila / leaf / deep ..... 5.63 / 6.46 / 4.83:1  (secondary text, all AA)
 *   tacking #f5f2ea on ink ....................... 14.00:1  (text on the ticket header + stub)
 *   manila on ink ................................ 10.88:1  (primary button label)
 *   chalk #6c8ebf on manila ...................... 2.33:1   FAILS: lines, ruler fill and hover only, never text
 *   chalk on ink ................................. 4.67:1   (large/UI only on navy; prefer tacking for text)
 *   selvedge #a3352b on manila ................... 4.70:1   (perforation dots only; no text by design)
 *   carbon #2f4a8a on manila ..................... 5.91:1   (the duplicate ruling: decorative, aria-hidden)
 *
 * Ground distance (CIEDE2000, manila #e8d6a4 vs every other site's light ground/panel):
 *   Halberd concrete #e9e7e2 15.05 · Morrow bone #efe8db 11.97 · Morrow bone-shade #e5dccb 9.84 ·
 *   Varrow chalk #f6f3ee 15.84 · Varrow limestone #e9e4da 12.84 · Varrow limestone-deep #ddd6c9 11.22 ·
 *   Vesperwood bone #ece5d3 10.07 · Vesperwood paper #f4efe2 12.61 · Vesperwood paper-edge #d8ccb0 6.40 ·
 *   Solenne sand #fbf2ea 14.92 · Solenne sand-deep #f4e3d6 12.93 · Saltmere mineral #eef0ee 17.20.
 *   Caldermoor / Fernhallow / Ashgrove v2 grounds were still template values at write time:
 *   each pair must check against #e8d6a4 (>= 6).
 */

/* Fonts (SIL OFL 1.1, github.com/google/fonts; latin subsets made with fontTools 4.62.1 , 
   source URLs, kept features and SHA-256 in BRIEF.md). Preload ONLY the display face. */
@font-face {
    font-family: "Libre Caslon Display";
    src: url("fonts/librecaslondisplay-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Libre Caslon Text";
    src: url("fonts/librecaslontext-latin-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Libre Caslon Text";
    src: url("fonts/librecaslontext-italic-latin-var.woff2") format("woff2");
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "DM Mono";
    src: url("fonts/dmmono-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "DM Mono";
    src: url("fonts/dmmono-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Palette ---------------------------------------------------------- */
    --s-manila: #e8d6a4;          /* page ground: manila pattern paper, matte */
    --s-manila-leaf: #f1e5c3;     /* the order-book leaf, notation chips on manila */
    --s-manila-deep: #dcc68e;     /* pattern-piece fill behind a photo, ticket zebra */
    --s-ink: #1c2335;             /* navy ink: every word, every drafting line */
    --s-ink-soft: #4a4f63;        /* secondary text */
    --s-chalk: #6c8ebf;           /* tailor's chalk: chalk marks, week ruler fill, hover: never text on manila */
    --s-tacking: #f5f2ea;         /* tacking thread: basting dashes on navy, text on navy */
    --s-selvedge: #a3352b;        /* RARE: the counterfoil perforation only */
    --s-carbon: #2f4a8a;          /* carbon-copy duplicate ruling (decorative) */
    --s-grid: #1c233514;          /* the drafting grid on the ground (8% ink) */
    --s-grid-major: #1c233526;    /* every fifth grid line (15% ink) */
    --s-rule: #1c23354d;          /* hairlines on manila (30% ink) */
    --s-rule-strong: #1c2335;     /* ticket hairlines */
    --s-ruling: #2f4a8a40;        /* ruled lines on the order-book leaf */
    --s-carbon-ghost: #2f4a8a24;  /* the offset duplicate ruling behind the leaf */
    --s-veil: #1c2335e6;          /* bottom-sheet backdrop on phones */
    --s-shadow-paper: 0 1px 0 #1c23351f, 0 10px 24px -14px #1c233559;  /* a cut piece lying on paper */
    --s-error: #8a2a22;           /* form error text on the leaf (darkened selvedge, 6.87:1 on the leaf, 5.99:1 on manila) */

    /* Roles */
    --s-bg: var(--s-manila);
    --s-text: var(--s-ink);
    --s-muted: var(--s-ink-soft);
    --s-line: var(--s-ink);
    --s-focus: var(--s-ink);
    --s-btn-bg: var(--s-ink);
    --s-btn-text: var(--s-manila);
    --s-btn-stitch: var(--s-tacking);
    --s-btn-bg-hover: #10162a;
    --s-link-underline: var(--s-chalk);

    /* ---- Type ------------------------------------------------------------- */
    --s-font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --s-font-text: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --s-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-bold: 700;
    --s-step-hero: clamp(3rem, 1.6rem + 5.6vw, 7rem);           /* 48px at 390 → 112px at 1440 */
    --s-step-h2: clamp(2.2rem, 1.5rem + 2.9vw, 4.25rem);
    --s-step-h2-pinned: clamp(2rem, 1.3rem + 1.7vw, 3rem);   /* the signature's title inside its pinned frame */
    --s-step-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
    --s-step-sub: clamp(1.15rem, 1.02rem + 0.55vw, 1.5rem);     /* italic subs and pull lines */
    --s-step-lede: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
    --s-step-body: 1.0625rem;
    --s-step-small: 0.9375rem;
    --s-step-note: 0.8125rem;    /* DM Mono notations, swatch tags: never below this */
    --s-step-figure: clamp(2.4rem, 1.7rem + 2.6vw, 4.2rem);    /* ledger total (Display) */
    --s-step-wordmark: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
    --s-step-input: 1rem;        /* 16px: no iOS focus-zoom */
    --s-step-price: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem);
    --s-step-drafting: 11px;     /* SVG drafting labels (CF, GRAIN, CUT 2), in viewBox-scaled px */
    --s-leading-display: 0.98;
    --s-leading-heading: 1.12;
    --s-leading-body: 1.62;
    --s-leading-tight: 1.3;
    --s-leading-note: 1.45;
    --s-track-wordmark: 0.16em;  /* tracked caps (Libre Caslon Text ships no smcp: see PAIR-NOTES) */
    --s-track-caps: 0.12em;      /* nav, kickers, ticket head */
    --s-track-note: 0.02em;
    --s-track-display: -0.01em;
    --s-measure: 62ch;
    --s-measure-narrow: 40ch;
    --s-numeric: lining-nums tabular-nums;   /* figures, ledger, ticket (Caslon Text has tnum) */

    /* ---- Space ------------------------------------------------------------ */
    --s-gutter: clamp(16px, 4.4vw, 64px);
    --s-section: clamp(64px, 8.4vw, 124px);      /* review r4: section spacing cut ~30% */
    --s-section-tight: clamp(56px, 8vw, 112px);
    --s-gap-xs: 6px;
    --s-gap-s: 12px;
    --s-gap-m: 24px;
    --s-gap-l: 40px;
    --s-gap-xl: clamp(48px, 7vw, 104px);
    --s-max: 1320px;
    --s-grid-cols: 12;
    --s-grid-gap: clamp(16px, 2vw, 32px);
    --s-hero-cols-text: 5;       /* headline column (of 12) on desktop */

    /* ---- Chrome ------------------------------------------------------------ */
    --s-ribbon-h: 34px;          /* shared ribbon, one line; JS measures it if it wraps on phones */
    --s-nav-h: 64px;
    --s-nav-h-mobile: 56px;
    --s-tap: 44px;
    --s-radius: 0px;             /* square: patterns are cut with shears, not rounded */
    --s-hairline: 1px;
    --s-rule-weight: 1.25px;     /* drafting lines in SVG */
    --s-focus-ring: 2px;
    --s-focus-offset: 3px;

    /* Primary button: square navy fill, dashed tacking stitch inset via negative outline-offset */
    --s-btn-h: 52px;
    --s-btn-pad-x: 26px;
    --s-stitch-width: 1.5px;
    --s-stitch-inset: -5px;      /* outline-offset: the stitch sits 4–5px inside the edge */
    --s-stitch-dash: 6px;        /* dash length for the stepped-background version on hover */
    --s-stitch-gap: 4px;

    /* ---- Drafting (grid, lines, pinking) ---------------------------------- */
    --s-grid-cell: 24px;         /* drafting grid cell (SVG pattern built from these) */
    --s-grid-major-every: 5;
    --s-grid-fade: 96px;         /* the drafting grid fades out over this distance where a ruled section ends */
    --s-pink-size: 14px;         /* pinked zig-zag: one tooth's width */
    --s-pink-depth: 7px;         /* pinked zig-zag: tooth depth (amplitude) */
    --s-dash-baste: 7 5;         /* stroke-dasharray of the basting line on a pattern piece */
    --s-dash-cf: 10 4 2 4;       /* centre-front line (dash-dot, as drafted) */
    --s-dash-chalk: 3 4;         /* chalk marks */
    --s-notch: 10px;             /* notch length in viewBox units */
    --s-arrow: 8px;              /* grain-line arrowhead */
    --s-swatch-overlap: -44px;   /* swatches on the card overlap like a merchant's card */
    --s-swatch-tilt-1: -1.2deg;
    --s-swatch-tilt-2: 0.6deg;
    --s-swatch-tilt-3: -0.4deg;
    --s-swatch-ratio: 3 / 5;     /* hero swatch (files are 3:5) */
    --s-stage-ratio: 2 / 3;      /* forepart piece (viewBox 400 x 600) */
    --s-sleeve-ratio: 1000 / 380;
    --s-sleeve-ratio-p: 380 / 1000;
    --s-bunch-fan: 2.5deg;       /* rotation step between squares in the spread bunch */
    --s-bunch-shift: clamp(30px, 3.6vw, 52px);   /* horizontal step between squares: each shows a strip of its cloth */           /* rotation step between squares in the fanned bunch */
    --s-bunch-lift: -40px;       /* the chosen square comes forward */
        --s-bunch-size: clamp(200px, 20vw, 290px);   /* review r4: ~290px squares in the fan at 1440 */
    --s-ticket-col: minmax(0, 1fr) auto;
    --s-leaf-rule: 34px;         /* ruled-line pitch on the order-book leaf */
    --s-carbon-offset: 6px 8px;  /* duplicate ruling offset behind the leaf */
    --s-perf-dot: 4px;           /* selvedge-red perforation dots */
    --s-perf-gap: 9px;
    --s-pocket-label-w: clamp(260px, 30vw, 380px);   /* inside-pocket label in the footer */

    /* ---- Photographs ------------------------------------------------------ */
    --s-photo-fit: cover;
    --s-hero-card-w: 55%;        /* swatch card share of the desktop arrival */
    --s-strip-h: 26vh;           /* phone swatch strip (cascade line for old engines) */
    --s-strip-h-svh: 26svh;      /* phone swatch strip: svh, the real height */
    --s-strip-item: calc(100vw - var(--s-gutter) - var(--s-gap-s) - var(--s-strip-peek));  /* one swatch + an intentional slice of the next */
    --s-strip-peek: 14vw;
    --s-sub-optical: 0.2em;      /* review r4: the italic sub's swash A / f overhang; pulls its ink onto the headline's left edge */
    --s-work-overlap: -72px;     /* review r4: the pocket flap is laid over the facing's shoulder by ~15%, like pieces on a board */
    --s-work-drop: 56px;         /* ...and dropped just below the facing's top, so the two read as one lay */
    --s-facts-phone-fig: 1.375rem;  /* phone: the four figures fit one row (Display, tabular) */        /* the next swatch shows a 14% slice */
    --s-pos-cloth: 50% 30%;
    --s-pos-thread: 55% 40%;   /* swatch No. 2, the thread (AD pass 5): x crops the desktop cut; y sets the phone strip, so its 14vw peek lands on the sharp windings */
    --s-pos-shears: 55% 45%;
    --s-pos-house: 50% 50%;
    --s-pos-stage: 50% 40%;
    --s-pos-patterns: 60% 40%;

    /* ---- Heights (phone: svh; a vh line first only for very old engines) -- */
    --s-hero-min: 640px;
    --s-pin-desktop: 140svh;     /* signature pin length, desktop ceiling */
    --s-pin-phone: 100svh;       /* signature pin length, phone ceiling */
    --s-stage-h: 78svh;          /* the forepart piece on the pinned stage (desktop) */
    --s-stage-h-vh: 78vh;
    --s-stage-h-phone: 56svh;
    --s-stage-h-phone-vh: 56vh;
    --s-sheet-max: 86svh;        /* cloth bottom sheet on phones */
    --s-sheet-max-vh: 86vh;

    /* ---- Motion: precise, never showy ------------------------------------- */
    --s-ease-draft: cubic-bezier(0.65, 0, 0.35, 1);    /* a line drawn with a steady hand */
    --s-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
    --s-ease-ui: cubic-bezier(0.2, 0, 0, 1);
    --s-dur-ui: 220ms;
    --s-dur-draw: 1200ms;        /* drafting line from headline to swatch 1 */
    --s-dur-line: 900ms;         /* section drafting lines, drawn once on entry */
    --s-dur-settle: 700ms;       /* swatches settle */
    --s-dur-fan: 520ms;          /* cloth bunch fan */
    --s-dur-count: 1400ms;       /* ledger counts up once, settles on its exact total */
    --s-dur-sheet: 360ms;        /* phone bottom sheet */
    --s-dur-stitch: 2400ms;      /* stitch dashes march on button hover (one dash period) */
    --s-dur-torn: 260ms;         /* the counterfoil stub shifts as if torn */
    --s-stagger: 110ms;
    --s-settle-shift: 6px;       /* swatches settle 6px */
    --s-reveal-shift: 10px;
    --s-torn-shift: 4px;
    --s-scale-photo: 1.04;       /* photos only ever 1.0–1.06 */
    --s-scrub: 0.8;              /* ScrollTrigger scrub smoothing (s) */
    --s-stage-hold: 0.3;         /* fraction of each stage held still */

    /* ---- Breakpoints (JS reads these; CSS uses the same numbers) ----------- */
    --s-bp-tablet: 768px;
    --s-bp-desktop: 1024px;
    --s-bp-nav-inline: 1360px;
    --s-mq-phone: (max-width: 767px);
    --s-mq-wide: (min-width: 768px);
    --s-mq-pin: (min-width: 1024px) and (min-height: 640px);

    /* ---- Engineer additions (FE pass 1) ----------------------------------- */
    /* <picture sizes> lists (index.php reads these through lib.php). */
    --s-sizes-default: (max-width: 767px) 100vw, 50vw;
    --s-sizes-phone-full: calc(100vw - 32px);
    --s-sizes-swatch: (max-width: 767px) 80vw, 20vw;
    --s-sizes-swatch-p: 80vw;    /* swatch 2's landscape phone cut (AD pass 5), served only under --s-mq-phone */
    --s-sizes-house: (max-width: 767px) 100vw, min(92vw, 1320px);
    --s-sizes-stage: (max-width: 767px) 64vw, (max-width: 1023px) 44vw, 34vw;
    --s-sizes-bunch: (max-width: 767px) 62vw, 20vw;
    --s-sizes-work-a: (max-width: 767px) 92vw, 34vw;
    --s-sizes-work-b: (max-width: 767px) 92vw, 54vw;
    --s-sizes-patterns: (max-width: 767px) 92vw, 30vw;
    /* Nominal display sizes the cut shapes are generated for (teeth and notches keep their size). */
    --s-nom-swatch-w: 280px;
    --s-nom-swatch-h: 540px;
    --s-nom-strip-w: 300px;
    --s-nom-strip-h: 250px;
    --s-nom-bunch: 220px;
    --s-nom-work-b-w: 680px;
    --s-nom-work-b-h: 453px;
    --s-curve-steps: 14;         /* points per Bezier when a drafted outline becomes a clip polygon */
    --s-arrow-turn: 45deg;       /* grain-line arrowhead chevron */
    --s-swatch-shape: 1 / 1.92;  /* hero swatch as displayed (files 3:5, cropped by cover) */
    --s-swatch-stagger-2: 34px;  /* swatch 2 is cut shorter: tops step, notes share one floor */
    --s-swatch-stagger-3: 12px;
    --s-swatch-h: clamp(360px, 64svh, 600px);   /* hero swatch height on desktop: shares the headline's top line, and its notes share the facts' floor */
    --s-swatch-h-vh: clamp(360px, 64vh, 600px);
    --s-drop-paper: drop-shadow(0 10px 12px #1c233547) drop-shadow(0 1px 0 #1c233530);
    --s-stroke-baste: 1.6px;     /* basting outline, viewBox units */
    --s-stroke-mark: 1.1px;      /* CF, grain, dart, pocket marks */
    --s-mask-stroke: 14px;       /* reveal stroke under a dashed line while it draws */
    --s-weeks-pin-desktop: 140svh;
    --s-weeks-pin-phone: 100svh;
    --s-ruler-w: 2px;
    --s-ruler-fill: 4px;
    --s-tick: 10px;
    --s-tick-major: 18px;
    --s-sheet-radius: 0px;
    --s-measure-sub: 30ch;
    --s-measure-label: 14ch;
    --s-measure-note: 28ch;
    --s-margin-leader: 28px;     /* house margin note: the ruled leader before it (phone/tablet, under the paragraph) */
    --s-margin-reach: 72px;      /* desktop: the leader runs this far back across the gutter to the paragraph */
    --s-margin-rule-y: 0.7em;    /* the leader sits on the note's first x-height */
    --s-margin-tilt: -1.5deg;    /* pencilled by hand, not set */
    --s-label-halo: 3px;         /* ink halo behind tacking-white drafting labels on photographs */
    --s-sleeve-h-phone: 74svh;   /* the portrait sleeve piece on phones */
    --s-piece-w-sheet: 360px;    /* one forepart on the static pattern sheet */
    --s-ruler-h: 62%;            /* the upright week ruler on desktop */
    --s-bunch-item-phone: 62vw;
    --s-sheet-thumb: 34vw;       /* cloth thumbnail in the phone bottom sheet */
    --s-bunch-stage-h: clamp(320px, 28vw, 420px);
    --s-bunch-pivot: 150%;       /* the bunch is bound below its squares: the fan's hinge */
    --s-detail-w: 360px;
    --s-detail-img: clamp(220px, 25vw, 360px);   /* the brought-forward square (review r4 asked ~420; 360 leaves the notes a readable column) */
    --s-bullet-y: 0.8lh;
    --s-terms-label: 7.5rem;
    --s-kept-w-phone: 78%;
    --s-leaf-rule-start: 88px;   /* first ruled line below the leaf header */
    --s-carbon-paper: #e6dbbd;   /* the duplicate leaf showing behind, a shade darker than the leaf */
    --s-leaf-line: 34px;         /* textarea line pitch = the ruling */
    --s-torn-turn: -0.6deg;
    --s-bunch-peek: -8px;
    --s-ligatures: common-ligatures;  /* AD pass 2: long-s s_t/s_p stripped from the italic WOFF2's liga (fonts/subset.sh); fi/ff/fl return */
    --s-ruler-dot: 32px;
    --s-caption-fade: 0.18;      /* captions swap inside this fraction of a stage change, so two never overlap long */
    --s-step-nav: 0.875rem;
    --s-step-hero-phone: clamp(2.75rem, 1.6rem + 5.6vw, 3.25rem);
    --s-line-halo: drop-shadow(0 0 1px #1c2335) drop-shadow(0 0 1px #1c2335);   /* ink halo under the grain line chalked on swatch 1 */
    --s-sizes-detail: (max-width: 767px) 34vw, 360px;
    --s-swipe: 40px;             /* a swipe on the bunch or the sheet must travel this far */
    --s-ease-gsap: power2.out;   /* GSAP's name for the settle curve (ledger count) */
    --s-spy-margin: -45% 0px -50% 0px;   /* nav spy: the section crossing the middle of the screen */
    --s-draw-margin: 0px 0px -12% 0px;   /* drafting lines draw once this far into view */

    /* ---- Engineer additions (FE pass 2, review r4) ----------------------- */
    --s-step-lead-price: clamp(2.6rem, 1.6rem + 3.4vw, 5rem);   /* r5: the lead row of the ticket */
    --s-rule-lead: 2px;
    --s-measure-closing: 22ch;   /* r5: the footer's closing line */
    --s-measure-sub: 46ch;
    --s-label-tilt: -1.5deg;     /* the sewn label sits a touch off true */
    --s-label-shadow: 0 2px 0 #0a0d1640, 0 14px 30px #0a0d1659;
    --s-tacking-soft: #c9c8c4;   /* secondary text on navy ink (9.35:1) */
    --s-rule-on-ink: #f5f2ea40;  /* hairlines on the navy grounds */
    --s-shadow-ink: drop-shadow(0 12px 14px #0a0d17a6) drop-shadow(0 1px 0 #0a0d1780);  /* a cut piece lying on navy cloth */
    --s-page-inline: calc(max(0px, (100% - var(--s-max)) / 2) + var(--s-gutter));  /* nav padding = the content edge, both sides */
    --s-links-gap: 18px;
    --s-nav-gap: 20px;
    --s-track-nav: 0.07em;
    --s-nav-cta-pad: 18px;
    --s-grain-inset: 14%;        /* the grain line drawn on swatch 1: inset from top and bottom */
    --s-chip-pad-x: 0.16;        /* drafting-label chip padding, fraction of the label's box */
    --s-chip-pad-y: 0.34;
    --s-flap-radius: 64px;       /* pocket flap's rounded lower corners (nominal px) */
    --s-flap-stitch: 18px;       /* stitching line inset on the flap */
    --s-band-foot: 260px;        /* the closing's navy band stops this far above the book's foot, so the stub lies on manila */
    --s-band-foot-phone: 62%;    /* phones: the band covers the top of the leaf only */
    --s-band-head: 40px;         /* how far the band starts above the order-book leaf */
    --s-cloth-pad: clamp(40px, 5vw, 80px);   /* inner padding of the navy cloth board */
    --s-panel-inline: clamp(0px, 2vw, 24px); /* the cloth board's inset from the page margins */

    /* ---- Layers ----------------------------------------------------------- */
    --s-z-nav: 50;
    --s-z-sheet: 60;
    --s-z-menu: 70;
}