/*
 * Juno Halloran: design tokens. Every colour, font, size, weight, leading, space, radius,
 * shadow, duration, easing, delay, scale and breakpoint on the site lives here; site.css and
 * site.js only reference them (prefix --s-; the gallery tokens also load, for the ribbon).
 * One definition per property; var() takes ONE argument (L1); tokens only inside selectors (L9).
 *
 * PALETTE: a warm-light family: butter ground, paper objects, espresso ink, paprika accent.
 * DISTINCTNESS (CIEDE2000 vs every other site's KEY colours; script: art/juno-halloran/deltae.py):
 *   butter   #f9edb4 nearest Ostrander manila ground #e8d6a4 5.5 · Ostrander leaf #f1e5c3 6.0 ·
 *            Morrow card-edge #e5dccb 11.7 · Morrow bone #efe8db 12+ · Vesperwood paper 12+
 *            (UNDER 10 vs Ostrander: no butter/oat light reaches 10 from manila: the max found by
 *            grid search is a lemon #fcf39c at 9.6. Raised as a REQUEST in PAIR-NOTES.)
 *   espresso #4a2a1c nearest Vesperwood ink #2b2118 11.0 · Caldermoor ink #2a1418 12.2   (pass)
 *   paprika  #9a3a16 nearest Ashgrove pen-text #b0301c 5.8 (their small-text variant) ·
 *            Ashgrove vermilion key #e0402a 15.0 · Vesperwood blood #6e0f12 14.5   (pass on keys)
 *   paper    #fbf5e6 is a surface, not a key; every near-white sits within 3 of another site's
 *            (Vesperwood paper 1.5). It is told apart by the butter ground it lies on (dE 12.0).
 *
 * CONTRAST, measured (WCAG 2.x). All type sits on OPAQUE paper, butter or espresso: never on a
 * photograph: so these are the real-pixel ratios at 390 and 1440 alike:
 *   espresso on paper 11.78 · on butter 10.86            (all body text)
 *   ink-soft #6b4a36 on paper 7.26 · on butter 6.70      (secondary text)
 *   past-ink #7f6759 on paper 4.84                     (earlier courses on the letter, dimmed)
 *   paprika on paper 6.45 · on butter 5.95               (links, course numerals, small labels OK)
 *   paper on paprika 6.45                                (the ellipse button label)
 *   bay #4d4f2a on paper 7.82 · on butter 7.21           (small labels, rules)
 *   butter/paper on espresso 10.86 / 11.78               (supper band text)
 *   paprika-lift #e0895f on espresso 4.83                (seats figures, links on the band)
 *   candle #f6d9a6 on espresso 9.39                      (focus ring + decorative glow on dark)
 *   Focus ring: espresso on light (≥10:1 non-text), candle on dark (9.39): both well over 3:1.
 */
:root {
    /* ---- Palette -------------------------------------------------------- */
    --s-butter: #f9edb4;        /* the field: a yellow-leaning butter, the page ground */
    --s-butter-deep: #efdf9c;   /* a step down from butter: the menu-line band, input wells on butter */
    --s-paper: #fbf5e6;         /* the place card, the letter, the book pages, the closing sheet */
    --s-paper-edge: #efe6cf;    /* the paper's own edge / page gutter shading (decorative) */
    --s-espresso: #4a2a1c;      /* ink, and the supper-series band */
    --s-ink-soft: #6b4a36;      /* secondary text on paper and butter */
    --s-paprika: #9a3a16;       /* ellipse fill, underlined links, course numerals */
    --s-paprika-deep: #7e2e10;  /* ellipse hover/active (colour only) */
    --s-paprika-lift: #e0895f;  /* paprika for use ON espresso */
    --s-bay: #4d4f2a;           /* small labels and rules */
    --s-candle: #f6d9a6;        /* decorative glow on dusk photos, focus on dark */
    --s-crumb: #d9c79a;         /* hairlines on espresso, the seats row rule */
    --s-error: #9a3a16;         /* plain-language form errors: paprika on paper 6.45 */
    --s-error-on-dark: #f2b48f; /* (not expected: every form sits on paper) */
    --s-rule-light: #4a2a1c26;  /* hairlines on paper/butter */
    --s-rule-dark: #f9edb42e;   /* hairlines on espresso */
    --s-shadow-ink: #3a220e;    /* colour of every contact shadow (warm, never grey) */

    /* Roles (site.css uses these; the palette above is the source) */
    --s-bg: var(--s-butter);
    --s-text: var(--s-espresso);
    --s-text-muted: var(--s-ink-soft);
    --s-surface: var(--s-paper);
    --s-link: var(--s-paprika);
    --s-btn-bg: var(--s-paprika);
    --s-btn-bg-hover: var(--s-paprika-deep);
    --s-btn-text: var(--s-paper);
    --s-focus: var(--s-espresso);
    --s-focus-on-dark: var(--s-candle);
    --s-band-bg: var(--s-espresso);
    --s-band-text: var(--s-butter);
    --s-band-accent: var(--s-paprika-lift);

    /* ---- Type: no sans anywhere (a deliberate personal-brand choice) ------ */
    --s-font-display: "Young Serif", Georgia, "Times New Roman", serif;   /* ONE weight (400); never synthesise bold */
    --s-font-text: "Source Serif 4", Georgia, "Times New Roman", serif;   /* roman for reading, italic for her voice */
    --s-font-synthesis: none;            /* stops the browser faking a bold/italic Young Serif */

    --s-weight-display: 400;
    --s-weight-text: 400;
    --s-weight-label: 600;               /* Source Serif semibold small labels, slight tracking */
    --s-weight-strong: 600;

    --s-step-card-name: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);      /* 40px at 320 → 64px at 1440 */
    --s-step-manifesto: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);    /* 40px phone → 72px desktop */
    --s-step-h2: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    --s-step-course: clamp(1.5rem, 1.25rem + 0.8vw, 2.125rem);   /* Young Serif course lead-in on the letter */
    --s-step-numeral: clamp(2.5rem, 2rem + 2vw, 4rem);           /* paprika course numeral in the margin */
    --s-step-figure: clamp(2rem, 1.5rem + 2vw, 3.25rem);         /* facts grid figures */
    --s-step-season: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);       /* supper list season words */
    --s-step-book-title: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --s-step-letter: clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem); /* 20 → 23px, leading 1.6 (r5: the menu and intro read larger) */
    --s-step-role: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --s-step-body: 1.125rem;             /* 18px */
    --s-step-small: 0.9375rem;
    --s-step-tonight: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem);   /* courses on tonight's menu card */
    --s-step-label: 0.875rem;            /* semibold small labels: never smaller */
    --s-step-input: 1.125rem;            /* ≥16px: stops iOS focus-zoom; matches the letter */
    --s-step-nav: 0.9375rem;
    --s-step-logo: 1.375rem;
    --s-step-signoff: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --s-step-recipe: 1rem;               /* the book spread's body (readable, not decorative) */

    --s-leading-display: 1.02;
    --s-leading-manifesto: 1.12;
    --s-leading-heading: 1.15;
    --s-leading-letter: 1.6;
    --s-leading-body: 1.6;
    --s-leading-tight: 1.3;
    --s-leading-label: 1.2;

    --s-track-label: 0.06em;             /* the ONLY tracking on the site: small semibold labels */
    --s-track-display: -0.005em;
    --s-measure: 62ch;
    --s-measure-letter: 34em;            /* the letter's line length at 19–20px */
    --s-measure-col: 34ch;
    --s-measure-card-line: 38ch;         /* 'I cook for tables of twelve or fewer,' on one line at 1440: two even lines, no widow */

    /* inline manifesto photos: rounded rectangles at cap height, wrapping with their word */
    --s-inline-h: 0.72em;                /* ≈ Young Serif cap height */
    --s-inline-w: 1.25em;                /* 4:3-ish, from the 480×360 crops */
    --s-inline-radius: 0.18em;
    --s-inline-gap: 0.14em;
    --s-inline-lift: -0.04em;            /* baseline nudge so the photo sits ON the line, not below it */

    /* ---- Space ---------------------------------------------------------- */
    --s-gutter: clamp(16px, 4vw, 48px);
    --s-section: clamp(96px, 12vw, 176px);
    --s-section-tight: clamp(56px, 8vw, 112px);
    --s-gap-2xs: 6px;
    --s-gap-xs: 10px;
    --s-gap-s: 16px;
    --s-gap-m: 24px;
    --s-gap-l: 40px;
    --s-gap-xl: clamp(56px, 7vw, 96px);
    --s-max: 1280px;
    --s-max-text: 720px;

    /* ---- Chrome --------------------------------------------------------- */
    --s-ribbon-h: 34px;                  /* shared/ribbon.css (measure in JS if it wraps) */
    --s-nav-h: 64px;
    --s-nav-h-p: 56px;
    --s-sticky-course-h: 44px;           /* phone "Course 2 of 5" line under ribbon + nav */
    --s-tap: 44px;
    --s-hairline: 1px;
    --s-rule: 2px;
    --s-focus-w: 3px;
    --s-focus-offset: 4px;
    --s-radius-paper: 2px;               /* paper objects are cut, not rounded */
    --s-radius-input: 4px;

    /* THE ELLIPSE (assigned button shape): a true ellipse, width ≥ 2.4× height, min 64px tall.
       Put the shape on an inner span if a clip is ever used; the focus ring sits on the element. */
    --s-btn-h: 64px;
    --s-btn-min-w: 168px;                /* 2.6 × 64 */
    --s-btn-pad-x: 34px;
    --s-btn-pad-x-p: 26px;
    --s-btn-radius: 50%;
    --s-btn-focus-radius: 50%;

    /* ---- Arrival: the place card set at the table (measured in art/juno-halloran/proof/hero.html) */
    --s-hero-min: 560px;
    --s-hero-photo-h: 66%;               /* desktop (r5): the photo stops higher so the card rests mostly on the butter and its button sits well above the fold */
    --s-hero-pos: 50% 100%;              /* crop 2400x984: board, hand and one taper; bottom-aligned so the card rests on the runner */
    --s-card-w: 560px;                   /* name on ONE line at 64px */
    --s-card-x: 56%;                     /* left edge of the card (per crop) */
    --s-card-overlap: 132px;             /* about a third of the card rides up onto the linen runner, never the food (r5) */
    --s-card-rot: -2deg;
    --s-card-pad: 32px 40px 34px;
    --s-hero-photo-h-p: clamp(220px, 47svh, 420px);   /* phone: portrait crop above the butter */
    --s-hero-pos-p: 50% 100%;
    --s-card-w-p: 86vw;
    --s-card-x-p: 7vw;
    --s-card-overlap-p: 64px;            /* phone: the card's top rests on the fork + wood strip */
    --s-card-rot-p: -0.75deg;            /* phone: half the desktop turn, so the small type stays crisp */
    --s-card-pad-p: 24px 24px 26px;
    /* the light comes from the upper left in the photo, so the shadow falls down-left */
    --s-card-shadow: -14px 22px 26px #3a220e57, -3px 5px 6px #3a220e47;
    --s-card-shadow-settled: -9px 14px 16px #3a220e57, -2px 3px 4px #3a220e52;

    /* ---- Paper objects: the letter, the book, the closing sheet ------------ */
    --s-letter-w: 620px;            /* r5: wider so the larger letter type keeps its measure */
    --s-letter-pad: clamp(28px, 4vw, 52px);
    --s-paper-shadow: 0 1px 0 #3a220e14, 0 18px 40px #3a220e33, 0 3px 8px #3a220e24;
    --s-book-w: clamp(260px, 26vw, 360px);  /* closed cover width */
    --s-book-ratio: 3 / 4;
    --s-book-spine: 14px;
    --s-book-perspective: 1600px;
    --s-book-tilt: -6deg;                /* the closed book's slight 3D turn */
    --s-book-open-angle: -178deg;        /* the cover hinges open from the left edge */
    --s-spread-w: min(1100px, 92vw);
    --s-spread-page-pad: clamp(20px, 3vw, 44px);
    --s-panorama-ratio: 12 / 5;          /* cinemascope 2.4:1 (desktop) */
    --s-panorama-ratio-p: 16 / 9;
    --s-macro-w: clamp(88px, 9vw, 152px);/* supper-row macro */
    --s-macro-ratio: 4 / 3;
    --s-supper-row-min: 64px;

    /* ---- Photographs ---------------------------------------------------- */
    --s-menu-veil: #2a180c26;            /* a breath of shadow behind the letter so its edge reads on bright frames */
    --s-photo-scale-from: 1;
    --s-photo-scale-to: 1.04;            /* arrival photo settles 1.0 → 1.04 (never more than 1.06) */
    --s-candle-glow: radial-gradient(circle at 50% 45%, #f6d9a640 0%, #f6d9a600 60%);

    /* ---- Motion: slow and domestic ---------------------------------------- */
    --s-ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
    --s-ease-ink: cubic-bezier(0.45, 0, 0.2, 1);
    --s-ease-hinge: cubic-bezier(0.65, 0, 0.25, 1);
    --s-dur-ui: 240ms;                   /* links, buttons: colour only */
    --s-dur-settle: 1100ms;              /* the place card's ~6px drop as its shadow tightens */
    --s-dur-photo: 2400ms;               /* arrival photo 1.0 → 1.04 */
    --s-dur-inline: 900ms;               /* manifesto photos open from 0 width */
    --s-dur-ink: 1000ms;                 /* a course inks in, left to right */
    --s-dur-dim: 1600ms;                 /* SLOW dim crossfade between courses (class toggle) */
    --s-dur-hinge: 1100ms;               /* the book opens */
    --s-dur-lift: 360ms;                 /* supper macro lifts on hover/focus */
    --s-hash-settle: 4000ms;             /* a #section link is held under the nav this long while late photos settle */
    --s-delay-card: 250ms;
    --s-stagger-inline: 180ms;
    --s-card-drop: 6px;
    --s-macro-lift: -4px;
    --s-macro-dim: 0.55;                 /* resting supper macro opacity; 1 on hover/focus */
    --s-past-ink: #7f6759;               /* earlier courses 'dim to ~60%' as a COLOUR (espresso 70% toward paper), 4.84:1 on paper. Not opacity: espresso at 0.6 opacity measured 3.67:1 and fails. Courses not yet reached are CLIPPED by the ink mask, never faint text */
    --s-o-hidden: 0;
    --s-menu-scrub: 1;                   /* ScrollTrigger scrub (seconds) for the pinned letter */

    /* ---- Front-end engineer additions (pass 1) ----------------------------- */
    --s-z-nav: 50;
    --s-z-sheet: 80;
    --s-nav-gap: 28px;
    --s-tonight-gap: 6px;                /* between courses on the menu card */
    --s-tonight-overlap: 120px;          /* tonight's menu card rides up onto the linen, like the place card */
    --s-tonight-rot: 1.5deg;             /* turned the other way to the place card */
    --s-tonight-pad: 22px 28px 24px;
    --s-tonight-inset: 10px;             /* the printed double rule */
    --s-card-left: min(var(--s-card-x), calc(100% - var(--s-card-w) - var(--s-gutter)));
    --s-card-top: calc(var(--s-hero-photo-h) - var(--s-card-overlap));
    --s-card-top-p: calc(var(--s-hero-photo-h-p) - var(--s-card-overlap-p));
    --s-tonight-w: min(22rem, calc(var(--s-card-left) - 2 * var(--s-gutter)));
    /* the pinned letter */
    --s-menu-step: 62svh;                /* scroll per course while the letter is pinned (about 350% in all) */
    --s-letter-window-h: min(660px, calc(100svh - var(--s-nav-h) - 88px));
    --s-letter-margin: 76px;             /* the numeral column inside the paper */
    --s-letter-fade: 56px;               /* soft paper fade where the letter scrolls under its edge */
    --s-letter-gap: 22px;
    --s-plate-w: 148px;                  /* reduced-motion desktop: the plate beside each course */
    --s-menu-dim: #1c120b;               /* the dark under the evening: each crossfade passes through it */
    /* the manifesto's inline photos open as the sentence arrives */
    --s-reveal-start: top 82%;
    --s-inline-clip-from: inset(0 100% 0 0 round 0.18em);
    --s-inline-clip-to: inset(0 0 0 0 round 0.18em);
    --s-ink-from: inset(0 100% 0 0);
    --s-ink-to: inset(0 0 0 0);
    /* the book */
    --s-spread-ratio: 3 / 2;             /* two 3:4 pages; grows if a page's text needs more */
    --s-book-shift: -25%;                /* closed: the cover sits centred, its spread folded away */
    --s-book-shift-wide: -50%;           /* closed, desktop: the cover sits in the left half, the words in the right */
    --s-page-w-p: 84vw;
    --s-hinge-half: 90deg;
    /* facts + how: the bill rail laid over the panorama's lower edge (art director, revision 3) */
    --s-facts-cols: 4;
    --s-facts-cols-p: 2;
    --s-how-cols: 3;
    --s-how-num-w: 2.6em;               /* phone: numeral column beside each step */
    --s-z-rail: 2;
    --s-rail-max: 1184px;
    --s-rail-overlap: clamp(72px, 9vw, 136px);   /* how far the rail rides up onto the room (desktop) */
    --s-rail-overlap-p: 40px;
    --s-rail-pad-y: clamp(20px, 2.4vw, 32px);
    --s-rail-pad-x: clamp(20px, 3vw, 44px);
    --s-step-rail-title: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    --s-step-how: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
    /* closing sheet */
    --s-sheet-w: 780px;
    --s-field-h: 48px;
    --s-field-line: 2px;
    --s-field-w-num: 3.4ch;
    --s-field-w-town: 10.5ch;
    --s-field-w-name: 11ch;
    --s-field-w-email: 19ch;
    --s-field-w-purpose-p: 200px;        /* phone: below this the purpose field wraps to its own line; at 390 it grows to ~213px, room for "book a private dinner" (184px) + chevron */
    --s-select-room-p: 26px;             /* phone: space kept for the chevron inside the purpose field */
    --s-flourish-w: 120px;
    --s-flourish-h: 40px;
    --s-chevron: 7px;
    --s-chevron-turn: 45deg;
    /* <img sizes> (a plain length: some engines reject clamp() in sizes) */
    --s-inline-sizes: 96px;
    --s-macro-sizes: 152px;
    --s-book-sizes: 480px;
    --s-plate-ratio: 4 / 5;
    --s-note-h: 132px;
    --s-course-watch: -40% 0px -55% 0px;   /* phone: the course in the reading band names the sticky line */
    --s-letter-mask: linear-gradient(to bottom, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    --s-leading-form: 2.6;               /* the closing letter: lines tall enough to hold a 48px field */
    --s-page-gutter: linear-gradient(to left, #efe6cf 0, #fbf5e6 14%);   /* left page shades into the spine */
    --s-page-gutter-r: linear-gradient(to right, #efe6cf 0, #fbf5e6 14%);
    --s-label-on-dark: var(--s-candle);  /* 9.39:1 on espresso */
    --s-text-on-dark-soft: #e8d9a8;      /* supper menus on espresso */

    /* ---- Round 5: intro, card, closing --------------------------------- */
    --s-step-pov-lede: clamp(1.375rem, 1.15rem + 0.8vw, 1.8125rem);   /* the first paragraph under the manifesto, in her voice */
    --s-step-card-line: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
    --s-step-closing: clamp(2.25rem, 1.4rem + 3.4vw, 4.75rem);    /* the footer's last line */
    --s-step-foot-sign: clamp(4rem, 2.6rem + 6vw, 9rem);          /* the paprika "J." that signs the page */
    --s-measure-closing: 18ch;

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