/*
 * Caldermoor: design tokens. "Chalk & lees." Every colour, font, size, space, duration and
 * easing on the site lives here; site.css and site.js only reference them. Prefix --s-.
 * One definition per token; var() always takes ONE argument (L1). Media-query overrides sit
 * inside :root (L9). Phone heights are svh, each preceded by a vh line as the cascade for
 * old engines (two declarations, never a var() fallback).
 *
 * THE PALETTE (art director, 2026-10-02)
 *   chalk  #e1e7d6  limewash, pushed towards green-white. CIEDE2000 vs neighbours' light grounds:
 *                   Halberd #e9e7e2 6.92 · Varrow chalk #f6f3ee 7.96 · Varrow limestone #e9e4da 6.39 ·
 *                   Ashgrove v2 paper #d9e1e9 11.99 · Ashgrove v2 paper-light #eef2f5 9.98 ·
 *                   Ashgrove v1 #eeede8 6.78 · Solenne #fffbf7 9.51 · Morrow bone #efe8db 6.67 ·
 *                   Fernhallow cream #f7e3e2 16.47. All >= 6.
 *   ink    #2a1418  claret-black: ALL text on chalk. No neutral grey anywhere.
 *   lees   #2e161b  deep wine-brown: the dark register, from The cellar to the end of the page.
 *   claret #5a1f2a  primary button fill on chalk.
 *   oak    #a0743a  hairlines, gauge ticks, focus ring on lees. Never body text (3.29:1 on chalk).
 *   olive  #5d6640  the active month marker only.
 *
 * CONTRAST (WCAG 2 formula)
 *   ink on chalk 13.70 · ink-soft on chalk 7.30 · ink on chalk-deep 12.15
 *   chalk on claret (button) 9.98 · claret on chalk (button on lees) 9.98
 *   chalk on lees 13.32 · chalk-dim on lees 8.35 · oak-light on lees 6.52 (micro labels OK)
 *   oak on lees 4.05 (focus ring / hairline, non-text >= 3) · olive on chalk 4.83 (marker + its label)
 *   oak-deep on chalk 5.26 (gold micro labels on chalk)
 */
:root {
    /* ---- Palette ---- */
    --s-chalk: #e1e7d6;
    --s-chalk-deep: #d3dbc6;        /* wells, the month ruler track, alternating cellar-book rows */
    --s-chalk-raise: #eaefe2;       /* the open note panel on chalk */
    --s-ink: #2a1418;
    --s-ink-soft: #5e3f45;          /* secondary text on chalk (claret-grey, never neutral) */
    --s-lees: #2e161b;
    --s-lees-deep: #24100f;         /* footer band, field wells on lees */
    --s-lees-raise: #3a1d23;        /* raised rows / open notes on lees */
    --s-chalk-dim: #b3b9a6;         /* secondary text on lees */
    --s-claret: #5a1f2a;
    --s-claret-hover: #6d2735;
    --s-oak: #a0743a;
    --s-oak-light: #c49a5e;         /* gold micro labels / figures on lees */
    --s-oak-deep: #7a5526;          /* gold micro labels on chalk */
    --s-olive: #5d6640;

    /* ---- Roles: the light register (chalk) ---- */
    --s-bg: #e1e7d6;
    --s-text: #2a1418;
    --s-text-muted: #5e3f45;
    --s-rule: #a0743a;
    --s-rule-soft: #2a14182e;       /* ink at 18% for cellar-book rules */
    --s-focus: #5a1f2a;

    /* ---- Roles: the dark register (lees) ---- */
    --s-lees-bg: #2e161b;
    --s-lees-text: #e1e7d6;
    --s-lees-muted: #b3b9a6;
    --s-lees-rule: #a0743a;
    --s-lees-rule-soft: #e1e7d624;
    --s-lees-focus: #c49a5e;

    /* ---- Buttons (the arch: top corners fully radiused, flat bottom) ---- */
    --s-btn-bg: #5a1f2a;
    --s-btn-text: #e1e7d6;
    --s-btn-bg-hover: #6d2735;
    --s-btn-lees-bg: #e1e7d6;       /* inverted on lees */
    --s-btn-lees-text: #5a1f2a;
    --s-btn-lees-bg-hover: #eaefe2;
    --s-btn-h: 52px;
    --s-btn-pad-x: 30px;
    --s-btn-pad-top: 6px;           /* optical: the arch eats the top, so the label sits slightly low */
    --s-arch-radius: 100vmax;       /* used as border-radius: R R 0 0: clamps to min(width/2, height):
                                       a true semicircle on the photos, a tombstone arch on buttons */
    --s-link-underline: 1px;
    --s-link-underline-offset: 6px;
    --s-link-underline-hover: 2px;

    /* ---- Fonts (files in assets/fonts/; preload gloock-latin.woff2 only) ---- */
    --s-font-display: "Gloock", "Iowan Old Style", Georgia, serif;
    --s-font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

    /* ---- Type scale ---- */
    --s-size-wordmark: clamp(2.5rem, 12.2vw, 11rem);         /* Gloock caps run ~7.36x the font size wide for CALDERMOOR: 12.2vw fills the content width at 390 and 1440 (14vw overflowed in the proof) */
    --s-size-h2: clamp(2.4rem, 1.2rem + 3.6vw, 4.5rem);
    --s-size-h3: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    --s-size-figure-xl: clamp(3rem, 2rem + 4vw, 6rem);      /* Descent temperature, months on lees */
    --s-size-figure: clamp(2rem, 1.4rem + 1.8vw, 3.25rem);  /* facts grids */
    --s-size-figure-sm: clamp(1.25rem, 1rem + 0.6vw, 1.6rem); /* arrival facts, wine list figures */
    --s-size-caption: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); /* Descent captions, Gloock upright */
    --s-size-sentence: clamp(1.75rem, 1rem + 2.6vw, 3.4rem); /* the closing sentence form */
    --s-size-lede: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    --s-size-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    --s-size-small: 0.9375rem;
    --s-size-micro: 0.8125rem;   /* r5: 12 to 13px; every tracked label stays readable */
    --s-size-nav: 0.9375rem;
    --s-size-logo: 1.25rem;
    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-semi: 600;
    --s-leading-solid: 0.86;        /* the wordmark */
    --s-leading-display: 1.04;
    --s-leading-sentence: 1.32;     /* room for the field underlines inside the sentence */
    --s-leading-caption: 1.25;
    --s-leading-body: 1.6;
    --s-leading-tight: 1.3;
    --s-track-wordmark: -0.01em;
    --s-track-display: -0.012em;
    --s-track-micro: 0.14em;
    --s-track-logo: 0.18em;
    --s-measure-body: 60ch;
    --s-measure-lede: 34ch;
    --s-measure-caption: 26ch;
    --s-measure-survey: 52ch;      /* the slope's figures, one sentence under the panorama */
    --s-numeric: tabular-nums;      /* Gloock only: Albert Sans has no tnum in the family (PAIR-NOTES) */
    --s-font-synthesis: none;       /* Gloock has no italic or bold: never synthesise */

    /* ---- Space ---- */
    --s-gutter: clamp(16px, 4vw, 56px);
    --s-max: 1320px;
    --s-section: clamp(72px, 9vw, 152px);
    --s-space-3xs: 4px;
    --s-space-2xs: 8px;
    --s-space-xs: 12px;
    --s-space-s: 16px;
    --s-space-m: 24px;
    --s-space-l: 40px;
    --s-space-xl: 64px;
    --s-space-2xl: 104px;

    /* ---- Chrome ---- */
    --s-ribbon-h: 34px;             /* shared ribbon; measure at 320/390 in case it wraps */
    --s-nav-h: 72px;
    --s-tap: 44px;                  /* every target, incl. logo, burger, email link */
    --s-hairline: 1px;
    --s-focus-w: 2px;
    --s-focus-offset: 3px;
    --s-row-h: 56px;                /* wine rows on the phone */
    --s-field-min-ch: 2ch;          /* the sentence fields never collapse below this */
    --s-field-underline: 2px;
    --s-z-wordmark: 1;
    --s-z-arch: 2;
    --s-z-nav: 20;
    --s-z-sheet: 30;

    /* ---- Arrival composition (desktop) ---- */
    --s-arch-w: 500px;
    --s-arch-h: 660px;
    --s-arch-max-h: calc(100vh - var(--s-ribbon-h) - var(--s-nav-h) - 96px);
    --s-arch-max-h: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h) - 96px);  /* whole composition above the fold */
    --s-wordmark-overlap: 0.18;     /* the arch tucks into the letters' feet; above ~0.2 its curve eats the E's bottom bar (reads F) */
    --s-hero-pos: 50% 30%;          /* sun in the arch's top third, the row centred */
    --s-hero-pos-p: 50% 35%;

    /* ---- Photo bands ---- */
    --s-slope-h: 80vh;
    --s-slope-h: 80svh;             /* desktop panorama ceiling */
    --s-slope-pos: 50% 55%;
    --s-photo-ratio-card: 3 / 4;    /* descent, year, cellar (glass has its own) */
    --s-photo-ratio-lees: 4 / 5;

    /* ---- The Descent (the only pinned scene) ---- */
    --s-descent-pin: 150vh;
    --s-descent-pin: 150svh;        /* desktop scroll length, <= 150svh */
    --s-descent-pin-mobile: 100vh;
    --s-descent-pin-mobile: 100svh;
    --s-gauge-w: 1px;
    --s-gauge-tick: 18px;
    --s-gauge-tick-major: 32px;
    --s-clip-from: inset(0% 0% 100% 0%);  /* the next layer wipes in from the top */
    --s-clip-to: inset(0% 0% 0% 0%);

    /* ---- Phone heights (~664px usable on iPhone with toolbars) ---- */
    --s-arch-h-mobile: 36vh;
    --s-arch-h-mobile: 36svh;       /* AD pass 2: 40svh left the facts line at ~681px: past Safari's ~664px usable */
    --s-slope-h-mobile: 70vh;
    --s-slope-h-mobile: 70svh;
    --s-card-w-mobile: 78vw;        /* year strip: partial next card visible */

    /* ---- Motion (slow, like wine) ---- */
    --s-dur-hero-scale: 1600ms;
    --s-dur-letter: 700ms;
    --s-stagger-letter: 40ms;
    --s-dur-fast: 180ms;
    --s-dur-base: 320ms;
    --s-dur-slow: 900ms;
    --s-dur-disclosure: 420ms;
    --s-dur-marker: 600ms;
    --s-dur-cellar-scale: 2200ms;
    --s-dur-rack: 1400ms;           /* r5: each bottle turns into its week's angle */
    --s-rack-stagger: 240ms;
    --s-rack-ghost: 0.4;           /* the riddling rack: week 1's bottle at 40%, rising to full in the last hole */
    --s-rack-from: 15deg;           /* on the lath: almost flat, neck a little down */
    --s-rack-to: 90deg;             /* sur pointe: neck straight down */
    --s-rack-bottle: 78%;           /* bottle length within its hole */
    --s-rack-ring: 2px;             /* the last hole (sur pointe) is ringed in oak */
    --s-rack-lees-from: 0.25;       /* the lees dot gathers: faint on the lath, solid in the neck */
    --s-rack-margin: 0px 0px -15% 0px;  /* IntersectionObserver: turn once the rack is well in view */
    --s-dur-sheet: 380ms;
    --s-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
    --s-ease-wine: cubic-bezier(0.33, 0, 0.15, 1);
    --s-ease-gsap: power2.out;      /* read in JS, never typed there */
    --s-ease-gsap-slow: power3.out;
    --s-hero-scale-from: 1.06;
    --s-cellar-scale-from: 1.06;
    --s-wordmark-rise: 8px;
    --s-parallax-slope: 4%;
    --s-delay-resize: 160ms;        /* debounce for layout recompute */

    /* ---- Breakpoints (CSS uses the literal in @media; JS reads these strings) ---- */
    --s-bp-tablet: 768px;
    --s-bp-desktop: 1024px;
    --s-mq-desktop: (min-width: 1024px);
    --s-mq-phone: (max-width: 767px);
    --s-mq-reduce: (prefers-reduced-motion: reduce);
}

@media (max-width: 767px) {
    :root {
        --s-nav-h: 60px;
        --s-section: 72px;
        --s-size-h2: 2.4rem;
    }
}

/*
 * ENGINEER ADDITIONS (front-end engineer, pass 1). Layout values the build needs that the
 * palette/type pass did not cover. Same rules: one definition, one-argument var(), svh with a
 * vh line before it.
 */
:root {
    /* Breakpoint used by the desktop LCP preload (the complement of --s-mq-phone). */
    --s-mq-not-phone: (min-width: 768px);
    --s-mq-motion: (prefers-reduced-motion: no-preference);

    /* <img sizes> per photo role (read by index.php). */
    --s-sizes-arch: 500px;
    --s-sizes-descent: (max-width: 767px) 92vw, 690px;
    --s-sizes-year: (max-width: 767px) 78vw, 16vw;
    --s-sizes-cellar: (max-width: 767px) 92vw, 48vw;   /* the stretched vault is cropped from the 3:4 master: it needs ~height x 3/4 */
    --s-sizes-glass: (max-width: 767px) 46vw, 340px;

    /* Arrival: the composition's height budget (ribbon + nav subtracted). */
    --s-arrival-h: calc(100vh - var(--s-ribbon-h) - var(--s-nav-h));
    --s-arrival-h: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    --s-arrival-pad-top: 22px;
    --s-arrival-pad-bottom: 30px;
    --s-arrival-col-gap: 48px;
    --s-size-arrival-line: clamp(1.5rem, 1rem + 1.1vw, 2.125rem);
    --s-arrival-line-measure: 15ch;
    --s-tag-rule-w: 48px;

    /* Units after a figure (cm, ha, months, g/L) sit smaller than the figure. */
    --s-size-unit: max(0.875rem, 0.5em);  /* r5: units in the cellar book never fall below 14px */
    --s-unit-gap: 0.18em;

    /* Inline sentence fields: default width (each field overrides --s-field-ch inline from content.php). */
    --s-field-ch: 8;
    --s-field-chev: 0.32em;

    /* Year ruler: 12 months; the active month and each card's start column (set inline from content.php). */
    --s-ruler-cols: 12;
    --s-ruler-active: 9;
    --s-moment-grow: 1;             /* desktop: each moment's share of the row … */
    --s-moment-grow-feature: 2;     /* … and the harvest's (twice as wide, at 4:5) */
    --s-ruler-marker-h: 3px;
    --s-ruler-dot: 5px;

    /* Descent (pinned scene) geometry. --s-gauge-progress is written by site.js (0–1). */
    --s-gauge-progress: 0;
    --s-gauge-col: 150px;
    --s-gauge-dot: 9px;
    --s-descent-card-h: calc(100vh - var(--s-nav-h) - 96px);
    --s-descent-card-h: calc(100svh - var(--s-nav-h) - 96px);
    --s-descent-card-max: 720px;
    --s-descent-hold: 0.5;          /* timeline units of stillness at each stop, between 1-unit wipes */
    --s-readout-w: 400px;           /* the temperature + caption column beside the pinned card */
    --s-descent-static-w: 690px;    /* the core-sample strip (no JS / reduced motion): 1.5x the r4 column */
    --s-descent-static-ratio: 16 / 9;   /* four butted strata, read as one continuous core */
    --s-caption-fade: 260ms;

    /* Cellar + wines + visit */
    --s-cellar-arch-w: 480px;
    --s-cellar-pos: 50% 50%;   /* the corridor's vanishing point stays centred in the taller crop */
    --s-wine-cols: minmax(0, 2.3fr) minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.7fr) 120px;
    --s-glass-w: 340px;      /* r5: new 3:4 flute-on-stone frame (453px tall at 340) */
    --s-photo-ratio-glass: 3 / 4;  /* r5: the new glass is a 3:4 master; .cm-glass img may use this or --s-photo-ratio-card (same value) */
    --s-step-n-col: 76px;
    --s-sentence-measure: 30ch;

    /* Sheet + nav */
    --s-sheet-swipe: 90px;          /* swipe-down distance that closes the menu sheet */
    --s-burger-w: 22px;
    --s-burger-gap: 6px;
    --s-z-skip: 40;

    /* ---- AD pass 2 (art director, 2026-10-02): see PAIR-NOTES ---- */
    /* The nav wordmark repeats the h1 in the first frame: hide it until the h1 has scrolled away. */
    --s-nav-mark-hidden-opacity: 0;
    --s-dur-nav-mark: 0.4s;
    /* Arrival, desktop: the facts become a vertical cellar-book column (figure left, label right,
       oak hairline between rows) filling the right margin; the left margin carries descriptor,
       line, arrival.intro, then the button: no empty quadrant either side of the arch. */
    --s-size-arrival-line-lg: clamp(1.75rem, 1rem + 1.6vw, 2.6rem);
    --s-arrival-fact-row-pad: 14px;
    --s-arrival-fact-cols: auto minmax(0, 1fr);   /* figure at its own width, label takes the rest */
    --s-arrival-intro-measure: 34ch;
    /* Closing: the button must hold its own against a display-size sentence. */
    --s-btn-h-lg: 64px;
    --s-btn-pad-x-lg: 44px;
    --s-size-btn-lg: 1.125rem;
    --s-write-btn-gap: 40px;

    /* ---- Engineer pass 3 ---- */
    --s-anchor-offset: calc(var(--s-nav-h) + var(--s-space-m));  /* every #anchor lands clear of the sticky nav */
}

@media (max-width: 1100px) {
    :root {
        --s-wordmark-overlap: 0.07;     /* narrower arch, steeper shoulders: the E sits on the curve, so the arch only kisses the feet */
    }
}

@media (max-width: 767px) {
    :root {
        --s-arrival-pad-top: 12px;
        --s-arrival-pad-bottom: 20px;
        --s-size-arrival-line: 1.3rem;
        --s-arrival-line-measure: none;
        --s-wordmark-overlap: 0.06;     /* the phone arch's apex sits right under the E: any deeper and the E reads F */
        --s-ribbon-h: 73px;             /* measured: the shared ribbon wraps to three lines at 390 (site.js re-measures) */
        --s-descent-card-h: calc(100vh - var(--s-nav-h) - 236px);
        --s-descent-card-h: calc(100svh - var(--s-nav-h) - 236px);
        --s-sentence-measure: 100%;
    }
}