/*
 * Fernhallow: design tokens. Every colour, font, size, weight, line-height,
 * space, radius, duration, easing, delay, scale, clip, svh height and breakpoint
 * lives here; site.css and site.js only reference them. Prefix --s- (the
 * gallery's tokens are also loaded, for the concept ribbon). One definition per
 * property; var() always takes one argument.
 *
 * Contrast, measured (WCAG 2.x relative luminance, sRGB): art director, 2026-10-02:
 *   ink #2b1a1f on petal cream #f7e3e2 ............ 13.42:1  body
 *   ink-muted #6a4650 on petal cream .............. 6.54:1   secondary + micro labels
 *   garden green #34503a on petal cream ........... 7.24:1   links (never a ground)
 *   raspberry #7d1f3f on petal cream .............. 7.96:1   accents / labels on cream
 *   petal cream on raspberry (the leaf button) .... 7.96:1;  on raspberry-deep (hover) 9.94:1
 *   petal pink #d98aa3 on petal cream ............. 2.10:1   FAILS: hover/highlight fills only, never text
 *   tag ink #2b1a1f on tag card #fbf1ee ........... 14.89:1
 *   ink-muted on tag card ......................... 7.26:1
 *   error #8c1d1d on tag card ..................... 8.19:1
 *   tag card on raspberry (the card edge) ......... 8.84:1
 *   The six variety pairs (ground / ink; the ink is used for EVERY size incl. micro labels):
 *     dahlia  #7d1f3f / #f7e3e2 ... 7.96:1     rose    #f2dacb / #7d1f3f ... 7.32:1
 *     cosmos  #efcdd5 / #23382a ... 8.60:1     aster   #d6cddd / #3d1d3f ... 9.43:1
 *     foliage #c3ccb5 / #1e3325 ... 8.12:1     seed    #e6d5b9 / #56371a ... 7.45:1
 *
 * Ground distance (CIEDE2000): petal cream #f7e3e2 vs every other site's light ground:
 *   nearest is Solenne sand-deep #f4e3d6 at 6.35; Vesperwood paper #f4efe2, Morrow bone
 *   #efe8db, Varrow chalk #f6f3ee, Halberd #e9e7e2, Saltmere #eef0ee all further.
 *   (The brief's starting cream #f6efe4 was 1.54 from Vesperwood's paper: rejected.)
 */

/* ---- Fonts: SIL OFL 1.1, latin subset WOFF2 (sources + hashes in BRIEF.md) ---- */
@font-face {
    font-family: "FH Instrument Serif";
    src: url("fonts/instrumentserif-latin-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FH Instrument Serif";
    src: url("fonts/instrumentserif-latin-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "FH Figtree";
    src: url("fonts/figtree-latin-wght.woff2") format("woff2");
    font-weight: 400 650;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "FH Figtree";
    src: url("fonts/figtree-latin-wght-italic.woff2") format("woff2");
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
}

:root {
    /* ---- Palette: "the cutting beds" ------------------------------------- */
    --s-cream: #f7e3e2;          /* petal cream: the base ground */
    --s-cream-deep: #f1d6d4;     /* a step down for panels/rules on cream */
    --s-tag: #fbf1ee;            /* the gift-tag card */
    --s-ink: #2b1a1f;            /* coffee-dahlia black: body text on cream */
    --s-ink-muted: #6a4650;      /* secondary + micro labels on cream and on the tag */
    --s-raspberry: #7d1f3f;      /* the brand colour: button fill, the closing ground */
    --s-raspberry-deep: #651632; /* button hover/pressed */
    --s-petal: #d98aa3;          /* highlights and hover fills only: never text on cream */
    --s-green: #34503a;          /* garden green: links and ink only, NEVER a ground */
    --s-green-deep: #24382a;     /* link hover */
    --s-rule: #2b1a1f26;         /* hairlines on cream */
    --s-rule-strong: #2b1a1f59;
    --s-twine: #a8865e;          /* the twine on the tag (decorative SVG stroke) */
    --s-scrim: #2b1a1fcc;        /* full-screen sheet backdrop */
    --s-error: #8c1d1d;          /* on the tag card */

    /* ---- The six variety pairs (named; content.php refers to them by 'tone') */
    --s-tone-dahlia-ground: #7d1f3f;
    --s-tone-dahlia-ink: #f7e3e2;
    --s-tone-dahlia-rule: #f7e3e240;
    --s-tone-rose-ground: #f2dacb;
    --s-tone-rose-ink: #7d1f3f;
    --s-tone-cosmos-ground: #efcdd5;
    --s-tone-cosmos-ink: #23382a;
    --s-tone-aster-ground: #d6cddd;
    --s-tone-aster-ink: #3d1d3f;
    --s-tone-foliage-ground: #c3ccb5;
    --s-tone-foliage-ink: #1e3325;
    --s-tone-seed-ground: #e6d5b9;
    --s-tone-seed-ink: #56371a;

    /* The live pair the signature section animates. Resting value = the base page. Register
       these with @property (syntax <color>) in site.css so a class/attribute toggle transitions them. */
    --s-ground: var(--s-cream);
    --s-on-ground: var(--s-ink);
    --s-on-ground-rule: var(--s-rule);

    /* Roles (template + chrome) */
    --s-link: var(--s-green);
    --s-link-hover: var(--s-green-deep);
    --s-nav-bg: var(--s-cream);
    --s-nav-ink: var(--s-ink);
    --s-btn-bg: var(--s-raspberry);
    --s-btn-ink: var(--s-cream);
    --s-btn-bg-hover: var(--s-raspberry-deep);
    --s-btn-bg-on-dark: var(--s-cream);       /* the leaf button on the raspberry closing ground */
    --s-btn-ink-on-dark: var(--s-raspberry);
    --s-focus: var(--s-green);
    --s-focus-on-dark: var(--s-cream);

    /* ---- Type --------------------------------------------------------------- */
    --s-font-display: "FH Instrument Serif", "Iowan Old Style", Georgia, serif;
    --s-font-body: "FH Figtree", "Helvetica Neue", Arial, sans-serif;

    --s-step-hero: min(clamp(3.2rem, 0.8rem + 8.6vw, 8.5rem), 15svh); /* 136px at 1440x900 (+30% on pass 1), one line beside the dahlia; capped by height */
    --s-step-hero-m: clamp(3.6rem, 1.6rem + 11vw, 4.6rem);    /* phone: two lines, ~68px at 390 */
    --s-step-variety: clamp(3.25rem, 1.9rem + 5.4vw, 6.75rem);           /* variety names, italic */
    --s-step-h2: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem);
    --s-step-h3: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
    --s-step-ledger: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);    /* the garden ledger, one italic sentence */
    --s-step-price: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
    --s-step-lede: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);      /* the italic sub beside the headline */
    --s-step-body: 1.0625rem;
    --s-step-small: 0.9375rem;
    --s-step-micro: 0.8125rem;   /* bucket labels, card labels: never smaller */
    --s-step-input: 1rem;        /* 16px stops iOS focus-zoom */
    --s-step-logo: 1.75rem;      /* wordmark, Instrument Serif italic */
    --s-step-kicker: 0.8125rem;
    --s-step-summary: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); /* the self-writing tag line: SMALL, never display size */

    --s-weight-regular: 400;
    --s-weight-medium: 500;
    --s-weight-semi: 600;
    --s-weight-heavy: 650;       /* top of the shipped Figtree range */
    --s-weight-display: 400;     /* Instrument Serif has one weight: font-synthesis: none */

    --s-leading-solid: 1;
    --s-leading-display: 0.96;
    --s-leading-heading: 1.08;
    --s-leading-body: 1.6;
    --s-leading-tight: 1.35;

    --s-track-logo: 0;
    --s-track-display: -0.01em;
    --s-track-kicker: 0.06em;    /* Figtree micro labels, sentence case */
    --s-track-micro: 0.02em;

    --s-measure: 62ch;
    --s-measure-narrow: 36ch;
    --s-measure-lede: 40ch;
    --s-num: tabular-nums lining-nums;  /* font-variant-numeric for every figure (tnum verified in the subset) */

    /* ---- Space -------------------------------------------------------------- */
    --s-gutter: clamp(16px, 3.4vw, 48px);
    --s-section: clamp(88px, 11vw, 168px);
    --s-section-tight: clamp(56px, 7vw, 104px);
    --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: clamp(48px, 6vw, 88px);
    --s-max: 1320px;
    --s-max-wide: 1600px;

    /* ---- Chrome ------------------------------------------------------------- */
    --s-ribbon-h: 34px;          /* shared/ribbon.css single line; measure in JS if it wraps at 320 */
    --s-nav-h: 64px;
    --s-nav-h-mobile: 56px;
    --s-tap: 44px;
    --s-hairline: 1px;
    --s-focus-ring: 2px;
    --s-focus-offset: 3px;
    --s-radius: 2px;             /* photographs, cards: nearly square */
    --s-leaf: 22px;              /* the LEAF button: top-left + bottom-right radiused, other two square */
    --s-leaf-s: 14px;            /* small leaf (selected chips, nav button on phone) */
    --s-btn-pad-x: 28px;
    --s-btn-h: 52px;
    --s-underline: 1px;          /* text-link underline, green */
    --s-underline-hover: 3px;    /* ...thickens on hover */
    --s-underline-offset: 0.22em;
    --s-chip-h: 44px;
    --s-swatch: 14px;            /* colour dot inside a colour chip (the label is always written) */
    --s-input-h: 52px;
    --s-z-nav: 50;
    --s-z-sheet: 60;

    /* ---- Arrival: the bucket line-up --------------------------------------- */
    --s-lineup-gap: 8px;
    --s-lineup-gap-m: 6px;
    --s-lineup-cols: 5;
    --s-lineup-cols-m: 3;
    /* "skyline of stems": each bucket's top drops by this much (left → right) */
    /* pass 2: a deliberate staircase: the dahlia stands full height, the four narrow stems step down */
    --s-drop-1: 0svh;
    --s-drop-2: 4svh;
    --s-drop-3: 8svh;
    --s-drop-4: 12svh;
    --s-drop-5: 16svh;
    --s-drop-1-m: 0svh;
    --s-drop-2-m: 3svh;
    --s-drop-3-m: 6svh;
    --s-bucket-pos: 50% 40%;     /* object-position inside each column (crops are 2:3) */
    --s-hero-row-gap: clamp(16px, 2.4svh, 28px);

    /* ---- Signature: this week's cut ---------------------------------------- */
    --s-slit-closed: inset(0 45% 0 45%);   /* the stem-slit clip, start */
    --s-slit-open: inset(0 0 0 0);
    --s-cut-photo-ratio: 4 / 5;
    --s-tone-start: top 58%;     /* ScrollTrigger: a variety takes the page when its top passes 58%... */
    --s-tone-end: bottom 42%;    /* ...and gives it back when its bottom passes 42% (overlap = hysteresis) */

    /* ---- Weddings / orders / garden ---------------------------------------- */
    --s-wed-large-w: 64%;
    --s-order-w-m: 82%;          /* phone strip card width: shows a partial next card */
    --s-order-ratio: 4 / 5;
    --s-garden-ratio: 3 / 2;
    --s-measure-ledger: 32ch;   /* the ledger sentence under the garden photograph */

    /* ---- Closing: the gift tag --------------------------------------------- */
    --s-tag-tilt: -1.5deg;       /* the CARD rotates; the fields inside counter-rotate to 0 */
    --s-tag-untilt: 1.5deg;
    --s-tag-w: min(760px, 100%);
    --s-tag-pad: clamp(24px, 4vw, 56px);
    --s-tag-hole: 22px;          /* punched hole diameter */
    --s-tag-hole-ring: 6px;      /* reinforcing ring */
    --s-tag-notch: 34px;         /* the clipped corners at the hole end */
    --s-twine-w: 2px;
    --s-tag-shadow: 0 18px 40px -18px #3a0c1d99, 0 2px 6px #3a0c1d40;

    /* ---- Motion: soft and botanical ---------------------------------------- */
    --s-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
    --s-ease-soft: cubic-bezier(0.45, 0, 0.25, 1);
    --s-dur-ui: 240ms;           /* buttons, links, chips: colour/underline only */
    --s-dur-lift: 320ms;         /* pointer hover lift */
    --s-dur-rise: 900ms;         /* arrival buckets rising */
    --s-dur-fade: 1000ms;        /* headline / stamp fades */
    --s-dur-slit: 1400ms;        /* stem-slit reveal */
    --s-dur-tone: 1600ms;        /* page ground/ink transition: SLOW, toggled, never scrubbed */
    --s-dur-settle: 1800ms;      /* wedding photo 1.04 → 1 */
    --s-stagger: 60ms;           /* bucket stagger */
    --s-delay-title: 240ms;
    --s-delay-stamp: 700ms;
    --s-rise: 12px;              /* buckets rise this far */
    --s-lift: 2px;               /* hover lift */
    --s-scale-settle: 1.04;

    /* ---- Breakpoints (read by JS via getComputedStyle; CSS uses the same numbers) */
    --s-bp-nav-inline: 1100px;
    --s-mq-phone: (max-width: 767px);
}

/* ---- Front-end engineer additions (pass 1) ------------------------------
   Layout values the build needs that the art direction did not name yet.
   Same rules: one definition each, var() with one argument. */
:root {
    /* <picture> sizes hints (read by index.php so CSS widths and srcset choice agree) */
    --s-sizes-lineup-lead: (max-width: 767px) 48vw, 31vw;   /* the dahlia: 2 of 6 tracks (444px at 1440 → 960w covers 2x) */
    --s-sizes-lineup: (max-width: 767px) 24vw, 16vw;        /* the four narrow stems */
    --s-sizes-cut-dominant: (max-width: 767px) 100vw, 45vw; /* full band height, 4:5 */
    --s-sizes-cut-detail: (max-width: 767px) 100vw, 34vw;   /* ~70% of the band, 4:5 */
    --s-sizes-cut-tall: (max-width: 767px) 100vw, 45vw;     /* 1:2 slot; the 4:5 file covers it at full band height */
    --s-sizes-wed-large: (max-width: 767px) 100vw, 62vw;
    --s-sizes-wed-small: (max-width: 767px) 48vw, 24vw;
    --s-sizes-order: (max-width: 767px) 30vw, 17vw;          /* delivery-round thumbnails, grown on hover/focus */
    --s-sizes-garden: 100vw;                                 /* edge to edge at every width */

    /* Arrival: the dahlia takes 2 of 6 tracks and the full hero height; the type row nests under the narrow stems */
    --s-lineup-tracks: 2fr 1fr 1fr 1fr 1fr;
    --s-lineup-tracks-m: 2fr 1fr 1fr;
    --s-hero-min: 520px;           /* below this the hero grows instead of squeezing the photographs */
    --s-hero-min-m: 480px;
    --s-arrival-max: 960px;        /* the phone arrival fills the small viewport up to the tallest phone (440×956); on iPhone Safari 100svh already excludes both toolbars */
    --s-hero-row-gap-top: clamp(20px, 3.4svh, 36px);
    --s-hero-pad-top: 8px;
    --s-hero-pad-bottom: clamp(20px, 3.4svh, 36px);
    --s-hero-type-gap: clamp(24px, 4vw, 72px);
    --s-hero-side-w: 34rem;
    --s-hero-side-drop: 10px;      /* lifts the side column so the button's text sits on the headline's baseline */
    --s-label-gap: 6px;

    /* Chrome on phones: the shared ribbon wraps; JS replaces this with the measured height */
    --s-ribbon-h-live: var(--s-ribbon-h);
    --s-sheet-pad: 24px;
    --s-step-sheet: clamp(2.4rem, 1.8rem + 3vw, 3.4rem);
    --s-burger-w: 18px;
    --s-burger-gap: 5px;

    /* Signature */
    --s-cut-pad-y: clamp(32px, 6svh, 64px);
    --s-cut-band-h: calc(100svh - var(--s-nav-h));         /* one band = one screen under the sticky nav */
    --s-cut-photo-h: calc(var(--s-cut-band-h) - 2 * var(--s-cut-pad-y));
    --s-cut-detail-h: calc(var(--s-cut-photo-h) * 0.92);   /* r5: nearly the full photo height, so no band reads as a small photo in a colour field */
    /* Static state (no JS / reduced motion), desktop: a band is its content plus one step above and below,
       not a screen; detail photos are 84% of the dominant height and end one step past the band's lower edge,
       inside the next band's padding, so they overlap colour and never another photograph. */
    --s-cut-static-pad: var(--s-space-xl);
    --s-cut-static-photo-h: min(76svh, 46rem);
    --s-cut-static-detail-h: calc(var(--s-cut-static-photo-h) * 0.84);
    --s-cut-tall-ratio: 2 / 3;     /* r5: wider than the old 1:2 slot so the seed heads hold their half of the band */
    --s-cut-card-w: min(38rem, 40vw);
    --s-dur-none: 0s;
    --s-ease-step: linear;
    --s-cut-gap: var(--s-space-xl);   /* photograph to card, every band */
    --s-cut-photo-cap: calc(100% - var(--s-cut-card-w) - var(--s-cut-gap)); /* the photograph column never squeezes the card below its width */
    --s-rule-mix: 28%;             /* hairlines = the current ink at this strength (follows the tone) */
    --s-dot: 10px;                 /* colour dot in the cut index */
    --s-step-count: 0.8125rem;

    /* Weddings */
    --s-wed-small-w: 27%;

    /* Delivery round (standing orders) */
    --s-round-when-w: 11rem;
    --s-round-thumb: 6.5rem;       /* resting thumbnail width (4:5) */
    --s-round-thumb-open: min(15rem, 18vw);   /* grown on hover / keyboard focus */
    --s-round-thumb-m: 5.5rem;
    --s-round-dot: 9px;
    --s-round-cols: var(--s-round-when-w) minmax(0, 2.4fr) minmax(0, 0.8fr) minmax(0, 0.7fr);
    --s-round-cols-m: minmax(0, 1fr) auto;
    --s-dur-grow: 520ms;

    /* Anchors land below the sticky nav with breathing room */
    --s-anchor-offset: calc(var(--s-nav-h) + var(--s-space-s));
    --s-anchor-offset-m: calc(var(--s-nav-h-mobile) + var(--s-space-s));

    /* Garden */
    --s-garden-ratio-display: 2 / 1;   /* desktop shows the 3:2 export as a wider band: wall in the top third, beds below */
    --s-garden-pos: 50% 38%;
    --s-season-now-pad: 4px 10px;

    /* Closing tag */
    --s-tag-max: 44rem;
    --s-twine-h: 176px;            /* room above the tag for the cord (svg below is drawn at 1:1 px) */
    --s-twine-svg-w: 200px;
    --s-twine-svg-h: 212px;
    --s-twine-hole-y: 200px;       /* where the hole centre sits inside the twine svg */
    --s-twine-light: #d8c09a;      /* the ply highlight on the twine */
    --s-twine-dash: 2 3;           /* stroke-dasharray of the ply highlight */
    --s-twine-light-w: 1.2;
    --s-step-tag-label: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); /* tag field labels: Instrument Serif italic */
    --s-chevron: 8px;
    --s-chip-pad-x: 16px;
    --s-check: 0.7rem;
    --s-tag-drop: drop-shadow(0 22px 26px #3a0c1d73) drop-shadow(0 2px 3px #3a0c1d40);
    --s-twine-w-px: 2.6;           /* SVG stroke width (px; the svg is drawn 1:1) */
    --s-twine-x: 50%;              /* where the twine meets the tag (the hole is centred) */
    --s-tag-hole-top: 26px;        /* hole centre below the tag's top edge */

    /* Motion extras */
    --s-reveal-start: top 97%;     /* reveals open as a photo's top enters, so no closed sliver ever waits at the foot of the screen */
    --s-dur-sheet: 360ms;
    --s-lift-shadow: 0 14px 28px -20px #2b1a1f80;
}
@media (max-width: 767px) {
    :root {
        --s-ribbon-h-live: 68px;   /* the ribbon wraps to two lines at 390 (measured); JS refines it */
    }
}