/*
 * Morrow & Rook — design tokens. Every colour, font, size, duration, easing,
 * delay, blur, breakpoint and z-index on the concept site lives here; site.css
 * and site.js only reference them (JS reads them once with getComputedStyle).
 * Prefix: --s-.
 *
 * Palette: deep forest ground, moss bands, bone menu card, copper accent.
 * Copper is for rules, numerals, dots and focus ONLY. It never carries body
 * text: on forest it is 4.8:1 (used for numerals only); on bone it fails
 * (2.8:1), so numerals on bone use --s-copper-deep (5.3:1).
 */

/* Fraunces (variable: opsz 9–144, wght 300–600 roman / 300–500 italic, SOFT 0–100; WONK pinned 0)
   and Instrument Sans (variable wght 400–600, wdth pinned 100). SIL OFL 1.1, latin subset. */
@font-face {
    font-family: "MR Fraunces";
    src: url("fonts/fr-roman.woff2") format("woff2-variations"), url("fonts/fr-roman.woff2") format("woff2");
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "MR Fraunces";
    src: url("fonts/fr-italic.woff2") format("woff2-variations"), url("fonts/fr-italic.woff2") format("woff2");
    font-weight: 300 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "MR Instrument";
    src: url("fonts/is-roman.woff2") format("woff2-variations"), url("fonts/is-roman.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── colour: the room ─────────────────────────────────────────── */
    --s-forest: #13201a;          /* page ground */
    --s-forest-deep: #0d1712;     /* footer, under-counter dark */
    --s-forest-clear: #0d171200;  /* forest-deep at zero alpha, for scrims */
    --s-forest-lift: #18281f;     /* raised panels on forest */
    --s-moss: #2c3b2f;            /* bands */
    --s-moss-deep: #223026;
    --s-bone: #efe8db;            /* the menu card */
    --s-bone-shade: #e5dccb;      /* card edge warmth */
    --s-bone-dim: #cfc7b6;        /* secondary text on forest */
    --s-smoke: #8a8f86;           /* tertiary on forest; rules */
    --s-ink: #13201a;             /* text on bone */
    --s-ink-soft: #46514a;        /* secondary text on bone */
    --s-copper: #be794f;          /* rules, numerals, dots, focus — 4.8:1 on forest */
    --s-copper-deep: #8a4f2c;     /* copper numerals on bone */
    --s-copper-soft: #be794f59;
    --s-copper-faint: #be794f26;
    --s-plated-glow: #ffc28ab3;   /* the copper halo round tonight's plated seat */
    --s-plated-glow-mid: #e0915c4d;
    --s-plated-glow-clear: #e0915c00;
    --s-error: #8e2a1c;           /* on bone */
    --s-error-on-dark: #f0a58f;   /* on forest */

    --s-rule-dark: #efe8db24;     /* hairlines on forest */
    --s-rule-bone: #13201a26;     /* hairlines on bone */
    --s-tooth: #13201a0f;         /* the card's paper tooth — subtle */
    --s-tooth-2: #8a4f2c0c;
    --s-card-edge: #8a4f2c24;     /* warm edge darkening on the card */
    --s-nav-bg: #13201af0;
    --s-scrim: #0d1712;
    --s-pill-hover: #1f3127;
    --s-bone-hover: #fbf6ec;
    --s-row-wash: #efe8db0d;      /* active course row wash */

    /* ── colour: the counter drawing ──────────────────────────────── */
    --s-oak-1: #5e3b20;           /* inner edge, in the shadow of the pass */
    --s-oak-2: #87592f;
    --s-oak-3: #ad7746;           /* the guest side, candle-warmed */
    --s-oak-4: #c8935c;
    --s-oak-grain: #5a381e;
    --s-oak-grain-lt: #d9a877;
    --s-oak-grain-soft: #5a381e2e;
    --s-oak-edge: #e6b886;
    --s-counter-shadow: #030705;
    --s-floor: #1a2b21;           /* the kitchen floor, inside the horseshoe */
    --s-floor-line: #efe8db12;
    --s-steel: #59605a;
    --s-steel-lt: #858c83;
    --s-steel-dk: #3c423d;
    --s-steel-hi: #a9afa4;        /* brushed steel catching the candles */
    --s-steel-brush: #efe8db14;
    --s-pan: #a8653d;
    --s-pan-in: #6c3c22;
    --s-pan-sheen: #e6ad7c;       /* copper pans: the sheen… */
    --s-pan-deep: #4a2414;        /* …and the shadowed side */
    --s-ember: #e0743a;
    --s-ember-glow: #e0743a66;
    --s-ember-clear: #e0743a00;
    --s-ember-hot: #ffb867;
    --s-ember-deep: #7c2c12;
    --s-kitchen-cast: #050a07b3;  /* shadows cast on the kitchen floor */
    --s-stool: #26352a;
    --s-stool-rim: #3b4b3e;
    --s-stool-hi: #3a4d3e;
    --s-napkin: #ddd4c2;
    --s-cutlery: #bdb9ae;
    --s-glass: #efe8db66;
    --s-candle: #f7ecd3;
    --s-flame: #ffd58a;
    --s-glow: #ffb867;            /* candlelight */
    --s-glow-hot: #ffb86788;
    --s-glow-mid: #ffb86729;
    --s-glow-clear: #ffb86700;
    --s-steam: #f4ece0;
    --s-steam-clear: #f4ece000;
    --s-vignette: #0d1712b3;
    --s-vignette-clear: #0d171200;

    /* ── colour: plates + food (the plating sketches) ─────────────── */
    --s-plate-porcelain: #f6f2e9;
    --s-plate-porcelain-rim: #e6dfd1;
    --s-plate-porcelain-edge: #c7bca9;
    --s-plate-stoneware: #3a3c35;
    --s-plate-stoneware-rim: #474940;
    --s-plate-stoneware-edge: #23251f;
    --s-plate-shadow: #030705;
    --s-sketch: #2a2a23;          /* the illustrator's ink outline */
    --s-sketch-light: #e9e2d2;    /* outline on a dark plate */
    --s-glaze: #be794f;
    --s-food-shell: #77827a;
    --s-food-nacre: #ccd1c6;
    --s-food-ice: #e8eef0;
    --s-food-buttermilk: #f4f1e6;
    --s-food-dill: #5f7d3e;
    --s-food-oil: #7a9228;
    --s-food-crab: #d98e5a;
    --s-food-crust: #b98b55;
    --s-food-cream: #f2e7cd;
    --s-food-apple: #ddd28c;
    --s-food-sorrel: #5c7c34;
    --s-food-bread: #9c5f2f;
    --s-food-crumb: #dcb87e;
    --s-food-butter: #f0d68a;
    --s-food-salt: #ece7de;
    --s-food-kelp: #3b4430;
    --s-food-langoustine: #e48b6a;
    --s-food-brownbutter: #a36a37;
    --s-food-tomato: #c8442e;
    --s-food-beet: #6e1f35;
    --s-food-beet-2: #96324c;
    --s-food-curd: #f4efe3;
    --s-food-blackberry: #3a1f33;
    --s-food-ash: #4a4640;
    --s-food-hay: #cdb07a;
    --s-food-scallop: #f2e8d6;
    --s-food-sear: #c4904e;
    --s-food-cauliflower: #e9dfc4;
    --s-food-buckthorn: #ea8a1d;
    --s-food-turbot: #f3ecdf;
    --s-food-skin: #8f877a;
    --s-food-veloute: #e6d6a2;
    --s-food-lovage: #4f7a3a;
    --s-food-mussel: #2c2f3a;
    --s-food-leek: #3a3a2c;
    --s-food-leek-green: #7d9a52;
    --s-food-hogget: #934434;
    --s-food-hogget-crust: #55291d;
    --s-food-celeriac: #ded0ae;
    --s-food-rowan: #d4482a;
    --s-food-jus: #4a2418;
    --s-food-honey: #d9a03a;
    --s-food-oats: #cba977;
    --s-food-quince: #e7b45a;
    --s-food-figleaf: #b9c99a;
    --s-food-almond: #e9dab9;
    --s-food-caramel: #b0682a;
    --s-food-canele: #5f2c13;
    --s-food-canele-top: #8b4a22;

    /* ── colour: provenance map + cellar ──────────────────────────── */
    --s-sea: #172720;
    --s-sea-line: #efe8db14;
    --s-land: #2c3b2f;
    --s-land-edge: #56684f;
    --s-route: #be794f;
    --s-wine: #6a1b2a;
    --s-wine-hi: #8e2a3c;

    /* ── type ─────────────────────────────────────────────────────── */
    --s-font-display: "MR Fraunces", "Iowan Old Style", Georgia, serif;
    --s-font-body: "MR Instrument", "Helvetica Neue", Arial, sans-serif;
    --s-wordmark-vary: "opsz" 144, "SOFT" 100;
    --s-display-vary: "opsz" 96, "SOFT" 50;
    --s-dish-vary: "opsz" 36, "SOFT" 100;
    --s-text-vary: "opsz" 14, "SOFT" 0;
    --s-wordmark-weight: 400;
    --s-display-weight: 340;
    --s-dish-weight: 380;

    --s-step-wordmark: clamp(3.1rem, 2rem + 4.8vw, 7.2rem);
    --s-step-h2: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
    --s-step-h3: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
    --s-step-dish: clamp(1.35rem, 1.15rem + 1vw, 2.05rem);
    --s-step-quote: clamp(1.55rem, 1.2rem + 1.7vw, 2.6rem);
    --s-step-lede: clamp(1.15rem, 1.05rem + .45vw, 1.42rem);
    --s-step-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
    --s-step-small: .9375rem;
    --s-step-micro: .875rem;
    --s-step-num: clamp(2.4rem, 1.8rem + 2.4vw, 4rem);
    --s-lh-body: 1.6;
    --s-lh-tight: 1.02;
    --s-lh-display: 1.1;
    --s-track-caps: .07em;        /* date lines and markers — set at reading size, never micro */
    --s-track-wordmark: -.025em;

    /* ── space + layout ───────────────────────────────────────────── */
    --s-max: 1320px;
    --s-gutter: clamp(20px, 4vw, 56px);
    --s-col-gap: clamp(20px, 2.6vw, 40px);
    --s-section: clamp(72px, 8vw, 128px);
    --s-section-tight: clamp(48px, 5vw, 80px);
    --s-menu-close-gap: clamp(32px, 4vw, 56px);  /* last course row to the closing note */
    --s-card-pad: clamp(22px, 3vw, 48px);
    --s-paper-pad-y: calc(var(--s-card-pad) * 1.3);
    --s-card-inset: 10px;         /* the copper rule's distance from the card edge */
    --s-rule-w: 1px;
    --s-radius-card: 3px;
    --s-radius-soft: 14px;
    --s-pill: 999px;
    --s-target: 44px;
    --s-target-row: 56px;
    --s-nav-h: 68px;
    --s-nav-h-mobile: 60px;
    --s-ribbon-est: 34px;         /* ribbon height before JS measures it (one line) */
    --s-ribbon-est-mobile: 52px;  /* two lines on a phone */
    --s-ribbon-h: var(--s-ribbon-est); /* site.js replaces this with the measured height */
    --s-hero-art-mobile: 38svh;
    --s-hero-art-mobile-fb: 38vh;
    --s-hero-art-tablet: 48svh;
    --s-hero-art-tablet-fb: 48vh;
    --s-card-overlap: -16px;
    --s-ticket-tilt: -0.6deg;     /* the interlude ticket sits slightly askew, as if pinned by hand */
    --s-dot: 6px;
    --s-marker: 46px;
    --s-plate-stage: min(36vw, 64vh, 470px);
    --s-plate-card: 96px;
    --s-plate-inline: 148px;
    --s-course-row: 22vh;
    --s-course-row-min: 196px;
    --s-dock-h: 60px;             /* phone: the docked course counter */
    --s-dock-scrim: 44px;
    --s-dock-ticks: 140px;
    --s-carousel-card: 82%;       /* 18% of the next cook peeks in */
    --s-glass-h: min(32vh, 300px);   /* desktop: the glass fills most of its column */
    --s-glass-h-m: 260px;
    --s-glass-stage: min(78vh, 700px);
    --s-glass-stage-short: min(36vh, 340px);  /* the glass shares its column with tonight's pour list */
    --s-pour-dim: .6;
    --s-glass-glow-size: 70% 46%;
    --s-glass-glow-y: 34%;
    --s-input-size: 16px;         /* iOS will not zoom at 16px */
    --s-tooth-a: 3px;
    --s-tooth-b: 7px;
    --s-tooth-dot: .65px;
    --s-tooth-clear: .9px;

    /* ── spacing scale (every gap, padding and margin in site.css) ── */
    --s-hair: 1px;
    --s-space-1: 2px;
    --s-space-2: 4px;
    --s-space-3: 6px;
    --s-space-4: 8px;
    --s-space-5: 10px;
    --s-space-6: 12px;
    --s-space-7: 14px;
    --s-space-8: 16px;
    --s-space-9: 18px;
    --s-space-10: 20px;
    --s-space-11: 22px;
    --s-space-12: 24px;
    --s-space-13: 28px;
    --s-space-14: 32px;
    --s-space-15: 36px;
    --s-space-16: 40px;
    --s-space-17: 48px;
    --s-gap-wide: clamp(28px, 5vw, 80px);      /* two-column section grids */
    --s-nav-gap: clamp(16px, 2.2vw, 34px);
    --s-marker-rule: clamp(28px, 6vw, 84px);   /* copper rules either side of a section marker */
    --s-course-gap: clamp(18px, 2.4vw, 36px);
    --s-course-pad: clamp(20px, 2.6vw, 32px);
    --s-cooks-gap: clamp(36px, 5vw, 64px);
    --s-principle-pad: clamp(28px, 4vw, 48px);
    --s-hero-pad-y: clamp(14px, 2.4vh, 28px);
    --s-card-gap: clamp(14px, 2.2vh, 26px);
    --s-stick-stage: 3vh;          /* sticky offsets below the nav */
    --s-stick-plan: 4vh;
    --s-stick-intro: 6vh;
    --s-stick-glass: 8vh;
    --s-measure-head: 22ch;
    --s-measure-short: 24ch;
    --s-measure-card: 42ch;
    --s-measure-cook: 46ch;
    --s-measure-lede: 48ch;
    --s-measure-close: 52ch;
    --s-measure-body: 54ch;
    --s-measure-note: 56ch;
    --s-target-lg: 52px;           /* primary buttons, party-size discs, fields */
    --s-sheet-num: 36px;
    --s-pin-num: 32px;
    --s-cook-tool: 76px;
    --s-cook-tool-m: 56px;
    --s-plan-max: 460px;
    --s-switch-w: 52px;
    --s-switch-h: 30px;
    --s-switch-thumb: 22px;
    --s-switch-pad: calc((var(--s-switch-h) - var(--s-switch-thumb)) / 2 - var(--s-rule-w));
    --s-switch-travel: calc(var(--s-switch-w) - var(--s-switch-h));
    --s-focus-w: 2px;
    --s-focus-offset: 3px;
    --s-rule-strong: 3px;
    --s-radius-key: 4px;
    --s-radius-day: 6px;
    --s-radius-field: 10px;
    --s-underline-offset: 4px;
    --s-tooth-offset: 1px 2px;
    --s-select-arrow-pos: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    --s-select-arrow-size: 5px 5px;

    /* ── type: fixed steps, weights, line heights, tracking ───────── */
    --s-step-strip: .8125rem;      /* calendar strip labels: never below 13px */
    --s-step-xs: .8125rem;
    --s-step-s: 1rem;
    --s-step-sm: 1.0625rem;
    --s-step-sm2: 1.125rem;
    --s-step-m: 1.25rem;
    --s-step-m2: 1.3125rem;
    --s-step-l: 1.4375rem;
    --s-step-l2: 1.5rem;
    --s-step-xl: 2rem;
    --s-step-xl2: 2.25rem;
    --s-step-wordmark-m: clamp(2.6rem, 12.5vw, 3.6rem);
    --s-svg-label: 20px;           /* SVG user units on the seating plan and map */
    --s-svg-label-sm: 16px;
    --s-svg-seat: 13px;
    --s-svg-pin: 16px;
    --s-svg-home: 22px;
    --s-weight-regular: 400;
    --s-weight-strong: 600;
    --s-lh-solid: 1;
    --s-lh-heading: 1.2;
    --s-lh-label: 1.3;
    --s-lh-lede: 1.5;
    --s-track-h2: -.015em;
    --s-track-strip: .04em;
    --s-wordmark-indent: .42em;
    --s-roll-drop: -.12em;
    --s-diet-mark-y: 1.05em;
    --s-diet-tick-y: .85em;
    --s-diet-dash-y: 1.2em;

    /* ── composite surfaces ───────────────────────────────────────── */
    --s-oak-grain-pattern: repeating-linear-gradient(2deg, transparent 0 13px, var(--s-oak-grain-soft) 13px 14px, transparent 14px 31px, var(--s-oak-grain-soft) 31px 32px);
    --s-stage-shadow: inset 0 0 0 1px var(--s-oak-edge), inset 0 -30px 60px -20px var(--s-oak-1), var(--s-card-shadow);
    --s-card-settle-shadow: 0 60px 90px -30px var(--s-counter-shadow);
    --s-field-error-ring: inset 0 0 0 1px var(--s-error);

    /* ── counter drawing strokes (SVG user units) ─────────────────── */
    --s-r-hair: 1;
    --s-r-lip-w: 1.5;
    --s-r-handle-w: 4;
    --s-r-grill-w: 3;
    --s-r-edge-alpha: .55;
    --s-r-food-alpha: .9;

    /* ── depth ────────────────────────────────────────────────────── */
    --s-z-canvas: 2;
    --s-z-card: 3;
    --s-z-chip: 20;
    --s-z-nav: 40;
    --s-z-sheet: 900;             /* below the concept ribbon (1000), so the ribbon stays visible */
    --s-card-shadow: 0 34px 70px -30px #030705e6, 0 2px 0 #03070540;
    --s-pill-shadow: 0 8px 22px -12px #030705b3;
    --s-blur-nav: 10px;
    --s-blur-plate-shadow: 7px;   /* the plate's contact shadow once it has landed */
    --s-blur-plate-shadow-air: 18px; /* …while it is still in the air */
    --s-shadow-air-scale: 1.2;
    --s-shadow-air-opacity: .35;
    --s-counter-shadow-blur: 14;  /* SVG stdDeviation, user units */
    --s-counter-shadow-drop: 16;

    /* ── motion ───────────────────────────────────────────────────── */
    --s-ease: cubic-bezier(.22, 1, .36, 1);       /* out-quint: unhurried landings */
    --s-ease-soft: cubic-bezier(.4, 0, .2, 1);
    --s-gsap-ease: expo.out;
    --s-gsap-ease-land: power4.out;
    --s-gsap-ease-lift: power2.in;
    --s-gsap-ease-draw: power2.inOut;
    --s-dur-fast: 220ms;
    --s-dur: 520ms;
    --s-dur-settle: 1400ms;      /* the menu card settling on load */
    --s-dur-setdown: 900ms;      /* a plate landing */
    --s-dur-lift: 320ms;         /* the previous plate cleared */
    --s-dur-compose: 700ms;      /* the dish drawing in */
    --s-dur-glaze: 1100ms;
    --s-dur-tick: 600ms;         /* the course numeral ticking */
    --s-delay-settle: 120ms;
    --s-delay-compose: 220ms;
    --s-stagger-compose: 40ms;
    --s-setdown-lift: 18px;      /* plates arrive from a few px above */
    --s-setdown-lift-card: 10px;
    --s-settle-y: 14px;
    --s-compose-scale: .86;
    --s-scrub: .6;               /* ScrollTrigger scrub smoothing, seconds */
    --s-resize-debounce: 180ms;
    --s-pour-start: .12;
    /* ScrollTrigger lines (read by site.js) */
    --s-st-read-start: top 55%;   /* the reading line a course crosses to be plated */
    --s-st-read-end: bottom 55%;
    --s-st-card-in: top 82%;      /* phone: a course card's plate is set down */
    --s-st-count-start: top 50%;  /* phone: the course counter ticks */
    --s-st-count-end: bottom 50%;
    --s-st-seats-start: top 65%;
    --s-st-seats-end: bottom 75%;
    --s-st-pour-start: top 70%;
    --s-st-pour-end: bottom 65%;
    --s-st-head: top 88%;
    --s-st-dock-on: top 70%;      /* phone: the counter dock appears with the first course… */
    --s-st-dock-off: bottom 85%;  /* …and leaves as the last one is read */         /* the glass already holds a splash at frame 0 */

    /* canvas: candles + steam */
    --s-canvas-fps: 30;
    --s-canvas-dpr: 1.5;
    --s-candle-radius: 44;       /* glow radius, SVG user units */
    --s-candle-flicker: .14;     /* fraction of glow radius */
    --s-candle-alpha: .38;
    --s-candle-speed: .0042;
    --s-steam-strands: 3;
    --s-steam-height: 70;        /* user units */
    --s-steam-alpha: .34;
    --s-steam-width: 2.6;
    --s-steam-speed: .0006;
    --s-steam-sway: 8;
    --s-steam-wave: .085;        /* waves per user unit of rise */
    --s-steam-step: 4;           /* user units between steam path points */

    /* breakpoints, mirrored for JS (CSS @media cannot read custom properties) */
    --s-mq-desk: (min-width: 1024px);
    --s-mq-phone: (max-width: 767px);

    /* -- added: type scale + length tokens collected from site.css literals -- */
    --s-leading-100: 1;
    --s-leading-155: 1.55;
    --s-weight-500: 500;
    --s-leading-138: 1.38;
    --s-leading-116: 1.16;
    --s-leading-145: 1.45;
    --s-leading-118: 1.18;
    --s-leading-140: 1.4;
    --s-measure-1: 1em;
}