/*
 * Cathy Florist — design tokens. Every colour, font, size, weight, leading, tracking,
 * measure, space, tag geometry, duration, easing, scale and breakpoint on all seven pages
 * lives here; site.css and site.js only reference them. Prefix --s- (the gallery's tokens
 * are also loaded, for the concept ribbon). Every token has ONE definition with its default
 * on :root; per-world values are set inside body[data-world] selectors. No var() fallbacks.
 *
 * "The wrapping room": one system; the FIELD changes per world, the way a florist changes
 * the wrapping paper and never the shop.
 *
 * Contrast, measured (WCAG 2.x relative luminance, sRGB):
 *   tissue #fbf4f1 on madder #701447 ............. 10.27:1  (tags/buttons on the madder field)
 *   madder on tissue ............................. 10.27:1  (primary buttons on light worlds)
 *   tissue on madder-deep #4c0d30 ................ 13.72:1  (footer, pressed)
 *   petal #f3d9e2 on madder ...................... 8.42:1   (secondary text on the madder field)
 *   ink #241318 on tissue ........................ 16.35:1
 *   ink-muted #6b4f57 on tissue / tissue-deep .... 6.70 / 5.78:1
 *   ink-muted on ivory #f7f2e8 ................... 6.53:1
 *   ink-muted on kraft ........................... 3.10:1   FAILS: never muted text on kraft
 *   kraft-ink #3a2616 on kraft #c9a27a ........... 6.08:1   (the only body-text colour on kraft)
 *   madder on kraft .............................. 4.75:1   (tag labels on kraft, >= 0.8125rem)
 *   madder on ivory .............................. 10.01:1
 *   tissue on leaf #1f5a3a / leaf on tissue ...... 7.48:1
 *   pollen #e9b43c ............................... decorative dot ONLY, never text or a button
 *   tissue on madder-night #1d0715 ............... 17.66:1  (Valentine's: the one dark page)
 *   petal on madder-night ........................ 14.48:1
 *   kraft on madder-night ........................ 8.17:1   (kraft tags hang on the dark page)
 *   madder field on madder-night ................. 1.72:1   (surface edge only, never text)
 * Madder hue 327 deg (rose-madder), off the brown-wine axis of Vesperwood (#6e0f12, 358 deg)
 * and Morrow & Rook (#6a1b2a 349 deg, #6e1f35 343 deg).
 */
:root {
    /* ---- Palette (the source; site.css uses the role tokens below) --------------- */
    --s-madder: #701447;
    --s-madder-deep: #4c0d30;
    --s-madder-press: #5a0f38;
    --s-madder-night: #1d0715;    /* Valentine's ground: near-black ROSE-madder (hue 322), not blood or navy */
    --s-petal: #f3d9e2;           /* secondary text + rules ON the madder field only; never dominant */
    --s-tissue: #fbf4f1;
    --s-tissue-deep: #f1e2dc;
    --s-ink: #241318;
    --s-ink-muted: #6b4f57;
    --s-leaf: #1f5a3a;
    --s-leaf-deep: #163f29;
    --s-kraft: #c9a27a;
    --s-kraft-ink: #3a2616;
    --s-kraft-shade: #b48c64;     /* the tag's folded edge / shadow on kraft */
    --s-ivory: #f7f2e8;
    --s-pollen: #e9b43c;
    --s-twine: #9a7a58;           /* the string line: decorative, never text */
    --s-white: #ffffff;
    --s-error: #9e1b32;           /* form error text on tissue / ivory */
    --s-rule: #24131826;          /* hairline on light grounds */
    --s-rule-on-field: #f3d9e240; /* hairline on the madder field */
    --s-scrim: #241318b3;         /* only if text must ever sit on a photo (prefer a tag) */
    --s-shadow: #2413181f;
    --s-shadow-deep: #24131838;

    /* ---- World roles (defaults = home; overridden per world below) -------------- */
    --s-field: var(--s-madder);           /* the world's wrapping colour (hero panel, closing field) */
    --s-on-field: var(--s-tissue);        /* text on the field */
    --s-on-field-muted: var(--s-petal);
    --s-field-accent: var(--s-pollen);    /* the dot / marker on the field (decorative) */
    --s-btn-fill: var(--s-tissue);        /* primary tag ON the field (inverts on madder) */
    --s-btn-ink: var(--s-madder);
    --s-btn-fill-page: var(--s-madder);   /* primary tag on the page ground */
    --s-btn-ink-page: var(--s-tissue);
    --s-page: var(--s-tissue);            /* page ground */
    --s-page-alt: var(--s-tissue-deep);   /* alternating band */
    --s-text: var(--s-ink);
    --s-text-muted: var(--s-ink-muted);
    --s-link: var(--s-madder);
    --s-focus: var(--s-madder);           /* focus ring on light grounds */
    --s-focus-on-field: var(--s-tissue);  /* focus ring on the field */
    --s-tag-card: var(--s-kraft);         /* product / stem tags */
    --s-tag-card-ink: var(--s-kraft-ink);
    --s-tag-card-accent: var(--s-madder);

    /* ---- Type ------------------------------------------------------------------- */
    --s-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --s-font-voice: "Petrona", Georgia, "Times New Roman", serif;   /* italic ONLY: the card voice */

    /* Bricolage axes (font-variation-settings); the WOFF2 is limited to opsz 14-96, wdth 80-100, wght 400-700 */
    --s-opsz-display: 96;
    --s-opsz-body: 14;
    --s-wdth-display: 88;
    --s-wdth-body: 100;
    --s-wdth-tag: 80;
    --s-w-display: 680;
    --s-w-heading: 640;
    --s-w-body: 400;
    --s-w-semi: 600;
    --s-w-tag: 620;
    --s-w-voice: 420;                     /* Petrona Italic is limited to 400-500 */

    /* ONE display-scale moment per page (art direction, revision 2): an H1 freed from its tag, or
       the order string's titles. Never on more than one element per page. */
    --s-size-display: clamp(2.75rem, 1.3rem + 5.8vw, 7rem);
    --s-leading-display-xl: 0.9;
    --s-measure-display: 11ch;
    /* Valentine's '14': a poster numeral, Bricolage wdth 80 / wght 700, tabular. */
    --s-size-numeral: clamp(10rem, 30vw, 28rem);
    --s-leading-numeral: 0.78;
    --s-track-numeral: -0.05em;
    --s-wdth-numeral: 80;
    --s-w-numeral: 700;
    --s-size-month: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);   /* 'February' in Petrona italic beside the numeral */
    --s-size-hero: clamp(2rem, 1.2rem + 2.6vw, 3.625rem);   /* ENGINEER: 3 lines max in the 5/12 hero tag (was max 4.25rem: 4 lines) */
    --s-size-h1: clamp(2rem, 1.25rem + 3vw, 3.75rem);
    --s-size-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    --s-size-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    --s-size-voice: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --s-size-voice-card: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);   /* the live card message */
    --s-size-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --s-size-body: 1rem;
    --s-size-small: 0.875rem;
    --s-size-tag: 0.8125rem;              /* tag labels: caps, wdth 80; the AA floor */
    --s-size-count: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);   /* Valentine's day count (tabular) */
    --s-size-wordmark: 1.375rem;
    --s-size-step-n: clamp(2rem, 1.5rem + 2vw, 3.25rem);

    --s-leading-display: 0.98;
    --s-leading-heading: 1.08;
    --s-leading-voice: 1.3;
    --s-leading-body: 1.6;
    --s-leading-tag: 1.15;

    --s-track-display: -0.025em;
    --s-track-heading: -0.015em;
    --s-track-tag: 0.12em;
    --s-track-body: 0em;
    --s-track-wordmark: -0.02em;

    --s-measure-hero: 13ch;
    --s-measure-heading: 18ch;
    --s-measure-body: 60ch;
    --s-measure-lede: 44ch;
    --s-measure-card: 26ch;

    /* ---- Space ------------------------------------------------------------------ */
    --s-space-3xs: 0.25rem;
    --s-space-2xs: 0.5rem;
    --s-space-xs: 0.75rem;
    --s-space-s: 1rem;
    --s-space-m: 1.5rem;
    --s-space-l: 2rem;
    --s-space-xl: 3rem;
    --s-space-2xl: clamp(3rem, 2rem + 4vw, 5.5rem);
    --s-space-section: clamp(4rem, 2.5rem + 6vw, 8.5rem);
    --s-gutter: 16px;                     /* phone side gutter */
    --s-gutter-wide: clamp(16px, 4vw, 56px);
    --s-max: 1360px;
    --s-grid-cols: 12;
    --s-grid-gap: clamp(12px, 1.6vw, 24px);

    /* ---- Chrome ----------------------------------------------------------------- */
    --s-ribbon-h: 2.25rem;                /* ENGINEER: measure shared/ribbon.php and correct */
    --s-nav-h: 4rem;
    --s-nav-h-phone: 3.5rem;
    --s-bar-h: 4rem;                      /* phone sticky order bar, plus safe-area-inset-bottom */
    --s-tap: 44px;                        /* minimum tap target, everywhere */
    --s-rule-w: 1px;
    --s-focus-w: 3px;
    --s-focus-offset: 3px;
    --s-z-nav: 40;
    --s-z-bar: 45;
    --s-z-sheet: 1100;                    /* above the concept ribbon (z 1000) */

    /* ---- THE SWING TAG: a luggage-label END. Both corners of one short end are cut at
       equal angles to a blunt point; a punched hole is centred in that end; a twine line
       runs from the hole. The clip-path goes on a ::before fill; the focus ring sits on the
       unclipped element. --------------------------------------------------------------- */
    --s-tag-cut: 0.9rem;                  /* length of each corner cut (buttons, chips) */
    --s-tag-cut-lg: 2.25rem;              /* panels and the closing tag */
    --s-tag-hole: 0.5rem;                 /* punched hole diameter (buttons, chips) */
    --s-tag-hole-lg: 1.125rem;            /* panels */
    --s-tag-hole-inset: 0.95rem;          /* hole centre from the cut end (buttons, chips) */
    --s-tag-hole-inset-lg: 2rem;          /* panels */
    --s-tag-pad-x: 1.125rem;
    --s-tag-pad-y: 0.625rem;
    --s-tag-pad-end: 1.75rem;             /* extra padding on the cut end so text clears the hole */
    --s-twine-w: 1.5px;
    --s-twine-len: 3rem;                  /* visible twine above a hanging tag */
    --s-swing: 2deg;                      /* hover / focus swing about the hole; never on sympathy */
    --s-reinforce: 0.1875rem;             /* the paper ring round the hole */

    /* THE TAG HIERARCHY (revision 2). A device on everything means nothing, so it has three tiers:
       TIER 1  the full hanging tag: cut end + punched hole + twine. ONLY hero/world panels, the
               closing tag, and ONE primary action per screen (the Order / Book tag).
       TIER 2  the cut end with NO hole and NO twine: chips, filters, secondary buttons, piece
               and stem cards, the four step tags, contact tags.
       TIER 3  plain type links with an underline: nav links, inline 'See the range' links,
               'Suits' links, footer links, sideways links between worlds.
       THE CONE is limited to THE UNWRAP (home) and the Valentine's hero. Never mask a landscape
       subject (rows, tables, benches) into it. */
    --s-tag2-cut: 0.55rem;                /* tier 2: a shallower cut, both corners of one end */
    --s-tag2-pad-x: 0.875rem;
    --s-tag2-pad-y: 0.5rem;
    --s-tag2-pad-end: 1rem;               /* no hole to clear, so the cut end needs less room */
    --s-link-line-w: 1.5px;               /* tier 3 underline */
    --s-link-offset: 0.28em;

    /* ---- THE CONE: the paper-wrap silhouette that masks photographs. Points as % of
       the frame; --s-unwrap (0 -> 1) carries each point out to the frame edge. --------- */
    --s-cone-tip-x: 50%;
    --s-cone-tip-y: 100%;
    --s-cone-left-x: 12%;                 /* top-left lip of the wrap */
    --s-cone-right-x: 88%;
    --s-cone-lip-y: 0%;
    --s-cone-flare: 6%;                   /* how far the lip folds back above the shoulder */
    --s-cone-slant: 16%;                  /* Valentine's cone: how much lower the left lip sits (a slanted mouth) */
    --s-cone-shoulder-y: 38%;
    --s-cone-outline-w: 2px;              /* reduced motion / no JS: the cone as a twine outline */

    /* ---- Photo frames ------------------------------------------------------------ */
    --s-hero-photo-h-phone: 39svh;        /* home photo-first hero on phones (38-40%) */
    --s-hero-overlap-phone: 28px;         /* tag panel overlaps the phone photo by 24-32px */
    --s-hero-pos: 50% 45%;                /* mixed-basket, desktop */
    --s-hero-pos-phone: 50% 40%;
    --s-doorstep-pos-phone: 55% 62%;      /* ENGINEER rev 3: doorstep-p re-cut on the bouquet (the old offsets pointed at the door after the master grew) */
    --s-doorstep-pos: 58% 68%;            /* 3:2 crop (2400): the bouquet sits right of centre, low on the step */
    --s-cutting-pos: 50% 50%;             /* shop hero: the empty dark board runs down the middle (tag space) */
    --s-cutting-pos-phone: 50% 40%;
    --s-night-pos: 50% 55%;               /* Valentine's rose: the heart of the rose */
    --s-buckets-pos: 50% 50%;             /* home In the buckets: king protea band, full height */
    --s-doorway-dim: 0.62;                /* Next-world doorway photo brightness under its tag */
    --s-wed-title-cols: 9 / -1;           /* weddings desktop: the H1 in the clear sky, upper right */
    --s-size-wed-title: clamp(2.6rem, -1rem + 5.6vw, 4.5rem);   /* 3 lines in the sky from 1024 to 1440+ */
    --s-wed-deck-cols: 4;                 /* the deck tag (label, lede, CTA) at the lower left */
    --s-arch-pos: 50% 8%;                 /* revision 3: the arch rides high; the tag sits on the valley below */
    --s-tunnel-pos: 50% 55%;
    --s-whitelily-max: 500px;
    --s-ratio-hero: 1.05;
    --s-ratio-say: 0.8525;                /* the four Say-it-with crops (1020x1196) */
    --s-ratio-card: 0.8;
    --s-photo-shadow: 0 1.25rem 2.5rem -1.25rem var(--s-shadow-deep);

    /* ---- Motion (read once in site.js; no literal fallbacks) ---------------------- */
    --s-dur-instant: 120ms;
    --s-dur-fast: 220ms;
    --s-dur-swap: 520ms;                  /* hero crossfade, Say-it-with crossfade */
    --s-dur-reveal: 900ms;                /* cone / tag clip reveals, once */
    --s-dur-swing: 700ms;
    --s-dur-settle: 1100ms;               /* the order string settling, once */
    --s-dur-marker: 800ms;                /* season-guide month marker */
    --s-stagger: 90ms;
    --s-swap-debounce: 60ms;              /* chip intent before fetching an alternate */
    --s-ease-out: cubic-bezier(0.22, 0.8, 0.24, 1);
    --s-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --s-ease-swing: cubic-bezier(0.34, 1.4, 0.5, 1);
    --s-photo-scale-from: 1;
    --s-photo-scale-to: 1.03;             /* hero swap */
    --s-unwrap-scale-from: 1.04;          /* THE UNWRAP: never beyond 1.04 */
    --s-unwrap-scale-to: 1;
    --s-unwrap-track: 240vh;              /* REVISION 3 (review): the pinned stretch for three beats; 160vh on phones */
    --s-line-1-at: 0.25;                  /* --s-unwrap progress at which each line appears */
    --s-line-2-at: 0.5;
    --s-line-3-at: 0.75;
    --s-flip-x: 0px;                      /* rev 6: the released line's start offset from the card (home.js measures it) */
    --s-flip-y: 0px;
    --s-flip-s: 1;
    --s-leaving-h: 4rem;                  /* the leaving line's height in the card (home.js measures it) */
    --s-reveal-shift: 1.25rem;
    --s-reveal-clip: 100%;                /* ENGINEER: a photo frame starts closed from the bottom edge */

    /* ---- Breakpoints (JS matchMedia reads these; CSS @media mirrors the same numbers) */
    --s-bp-tablet: 48rem;                 /* 768px */
    --s-bp-desktop: 64rem;                /* 1024px */
    --s-bp-wide: 90rem;                   /* 1440px */
    --s-bp-short: 42rem;                  /* short phone viewport (390x664, Safari toolbars showing) */
}

/* ==== ENGINEER: structural tokens (front-end engineer). Layout geometry, picture `sizes`,
   media queries and component dimensions. The palette, type and motion above are the art
   director's. Media-query strings are read by kit.php (<source media>) and site.js. ======== */
:root {
    --s-opaque: black;                    /* a mask's opaque stop (mask luminance, never shown) */
    --s-aa: 0.5px;                        /* one antialias step on hard-edged gradients */
    --s-mq-phone: (max-width: 47.99rem);  /* = --s-bp-tablet */
    --s-mq-reduce: (prefers-reduced-motion: reduce);

    /* picture `sizes` (what each photo is displayed at) */
    --s-sizes-hero: 100vw;               /* revision 3: the home photo is full bleed */
    --s-sizes-hero-phone: 100vw;
    --s-sizes-card: (min-width: 64rem) 16rem, 66vw;
    --s-sizes-piece: (min-width: 64rem) 15rem, 60vw;
    --s-sizes-thumb: 4rem;
    --s-sizes-half: (min-width: 64rem) 50vw, 100vw;
    --s-sizes-cone: (min-width: 64rem) 30vw, 70vw;

    /* first frames */
    --s-hero-h: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h));
    --s-hero-min: 38rem;                  /* desktop first frame never shorter (short laptops) */
    --s-hero-max: 64rem;
    --s-hero-photo-h-short: 31svh;        /* phone photo when the viewport is short (390x664) */
    --s-subhero-photo-phone: 34svh;
    --s-subhero-photo-short: 28svh;

    /* THE CONE: the shoulder bulge, and the frame-0 cone box inside the photo region
       (left/top as %, width/height as fractions). Phone values in the block below. */
    --s-cone-shoulder-in: 7%;
    --s-unwrap-box-l: 41%;                /* frame 0: the cone's shoulder holds the rose heads, centred in the space right of the card */
    --s-unwrap-box-t: 22%;
    --s-unwrap-box-w: 0.46;
    --s-unwrap-box-h: 0.76;
    --s-unwrap-range: contain 0% contain 88%;   /* the beats run while the stage is pinned */
    --s-unwrap-stage-h: calc(100svh - var(--s-nav-h));

    /* tags */
    --s-twine-tail: 1.375rem;             /* the string through a button's hole, out past the tip */
    --s-twine-angle: -18deg;
    --s-twine-rise: 100vh;                /* a panel's twine rising off-frame (clipped by its band) */
    --s-twine-rise-phone: 1.75rem;
    --s-hang-tilt: 1.6deg;                /* hanging tags before they settle */
    --s-hang-rest: 0.6deg;                /* ...and the natural tilt they settle to */
    --s-hang-drop: 1.25rem;
    --s-dot: 0.5rem;                      /* the pollen dot */
    --s-arrow: 0.625rem;
    --s-line-w: 2px;                      /* underlines, arrows, outlines */
    --s-notch: 0.4rem;                    /* the tag-notch on nav underlines */
    --s-label-cut: 0.5rem;                /* small label tags */

    /* rails, strips, panels */
    --s-rail-card: clamp(12.5rem, 10rem + 5vw, 15.5rem);
    --s-rail-card-phone: 64vw;
    --s-rail-fade: 2.5rem;
    --s-strip-h: clamp(24rem, 62vh, 40rem);   /* In the buckets: a full-height protea band */
    --s-panel-pad: clamp(1.25rem, 0.75rem + 2vw, 3rem);
    --s-overlap: clamp(1.5rem, 0.5rem + 3vw, 4.5rem);
    --s-card-max: 74rem;
    --s-card-face-tilt: -1.2deg;
    --s-thumb: 4rem;
    --s-season-label: 16rem;
    --s-season-cell-h: 1.75rem;
    --s-ratio-photo: 4 / 5;               /* stem + piece tags */
    --s-ratio-wide: 3 / 2;
    --s-sheet-max: 32rem;
    --s-unwrap-tag-w: clamp(22rem, 8rem + 26vw, 38rem);
    --s-unwrap-band: 0rem;                /* the photo cone has none; the paper (below) does */
    --s-kraft-band: clamp(1rem, 0.5rem + 1.2vw, 2rem);   /* THE UNWRAP: kraft wrap showing beside each cone edge */
    --s-paper-angle: 100deg;
    --s-arrive-pad-top: clamp(4rem, 2rem + 6vw, 9rem);  /* beat 3: the scrim's fade-in height above the words */
    --s-arrive-pad-end: 52vw;             /* desktop: the words wrap to two lines left of the bouquet */
    --s-arrive-solid: 45%;
    --s-arrive-rise: 1.5rem;
    --s-card-out: 2.5;                    /* desktop beat 3: the card is gone by 40% of the release */
    --s-line-in: 0.45;                    /* ...and the display line only starts to show after that */
    --s-close-bg: var(--s-madder);        /* WRITE THE CARD ground; tinted per world below */
    --s-close-ink: var(--s-tissue);
    --s-close-muted: var(--s-petal);
    --s-sizes-card-photo: (min-width: 64rem) 26vw, 1px;
    --s-ratio-card-photo: 4 / 5;
    --s-line-ramp: 8;                     /* how fast an unwrap line lights once its moment passes */
    --s-rail-overlap: clamp(14rem, 10rem + 10vw, 20rem);   /* the stems hang across the band's lower half */
    --s-ratio-cone: 3 / 4;
    --s-step-h: 15rem;
    --s-chip-pad-x: 0.875rem;
    --s-season-link: 11rem;
    --s-frombed-cone-h: clamp(26rem, 18rem + 18vw, 38rem);
    --s-frombed-cone-h-phone: 26rem;
    --s-protea-pos: 50% 20%;
    --s-reveal-margin: 0px 0px -12% 0px; /* a frame opens once it is this far into the viewport */
}

/* ==== ENGINEER pass B: structural tokens for shop/, occasions/, weddings/, valentines/, order/ ==== */
:root {
    /* picture `sizes` */
    --s-sizes-occ-preview: (min-width: 64rem) 55vw, 100vw;
    --s-sizes-occ-band: (min-width: 64rem) 58vw, 90vw;   /* Love at 7/12 now that rose-bunch is 1600 wide */
    --s-sizes-occ-extra: (min-width: 64rem) 22vw, 50vw;
    --s-sizes-whitelily: (min-width: 64rem) 500px, 60vw;
    --s-sizes-make-bridal: (min-width: 64rem) 30vw, 60vw;
    --s-sizes-make-buttonhole: (min-width: 64rem) 22vw, 40vw;
    --s-sizes-settings: (min-width: 64rem) 30vw, 80vw;
    --s-sizes-say: (min-width: 64rem) 40rem, (min-width: 48rem) 42vw, 100vw;   /* rev 6: 640px at 1440 (1020 source: 1.6x at DPR 2, recorded in BRIEF) */
    --s-say-photo-max: 40rem;             /* desktop: the chosen piece's photo, 6/12 */
    --s-say-photo-h-phone: 50svh;         /* phone: the photo first, the rail over its lower edge */
    --s-say-overlap: 4rem;                /* how far the picker overlaps the photo */
    --s-sizes-early: (min-width: 64rem) 46vw, 100vw;
    --s-ratio-early: 1.595;               /* rose-bunch, 1600x1003 */

    /* shop */
    --s-bench-card: clamp(14rem, 12rem + 4vw, 17rem);

    /* occasions */
    --s-occ-tag-w: clamp(8.5rem, 7rem + 3vw, 10.5rem);
    --s-ratio-square: 1;
    --s-chooser-h: 18rem;

    /* weddings */
    --s-ratio-tall: 2 / 3;
    --s-make-n: 2.5rem;
    --s-settings-tag-h: 9rem;
    --s-check: 1.125rem;
    --s-wlist-cols: 3;
    --s-tick: polygon(14% 52%, 40% 76%, 86% 22%, 96% 32%, 40% 96%, 4% 62%);

    /* valentines */
    --s-say-dot: 0.75rem;
    --s-say-dot-on: 1.5;
    --s-say-tag-w: min(100%, 22rem);
    --s-say-tag-h: 12rem;
    --s-size-early: clamp(3rem, 1.5rem + 7vw, 8rem);   /* "Order early", wdth 80 caps: the campaign's poster line */

    /* order */
    /* rev 6: four plain panels, ~35% shorter than the old tall tags, a stem photo in each */
    --s-ostep-h: clamp(16rem, 34svh, 19.5rem);           /* desktop panel height */
    --s-ostep-photo-h: 44%;                              /* the stem photo band at the panel's top */
    --s-ostep-h-phone: 7.5rem;                           /* phone: one 120px row per step */
    --s-ostep-photo-w-phone: 7.5rem;                     /* phone: the stem photo, square, at the row's end */
    --s-size-step-big: clamp(6rem, 1rem + 8vw, 10rem);    /* the step numeral, cut off by the panel's edge */
    --s-step-big-cut: -0.2em;
    --s-step-big-cut-phone: -0.12em;                     /* phone: cut by the row's left edge */
    --s-measure-step: 18ch;
    --s-sizes-ostep: (min-width: 48rem) 24vw, 120px;
}

/* ==== ENGINEER revision 3: one hero per world, the doorway, tiers, form controls ========== */
:root {
    --s-measure-home-title: 12ch;         /* home H1 at display scale: 3 lines */
    --s-measure-home-title-phone: 11ch;
    --s-hero-picker-rise: clamp(7rem, 3rem + 9vw, 12rem);
    --s-hero-split: minmax(0, 5.2fr) minmax(0, 6.8fr);   /* round 5: desktop hero, madder field | photograph */
    --s-hero-title-vh: 10.5svh;           /* the headline also fits the screen's height (three lines + the tag) */
    --s-hero-tag-hang: clamp(3rem, 6vw, 7rem);   /* the occasion tag crosses onto the photograph by this */
    --s-hero-tag-shadow: 0 24px 60px -24px #2a0715;   /* the picker tag rises over the photo's edge */
    --s-chip-fade: 4.5rem;                /* phone chip row: the next chip half shows, then fades */
    --s-thread-y: calc(var(--s-space-s) + var(--s-space-m));   /* the string runs behind the cards' tops */
    --s-chevron: 0.5rem;
    --s-doorway-h: 52vh;
    --s-doorway-min: 24rem;
    --s-doorway-tag-w: 38rem;
    --s-size-doorway: clamp(2.5rem, 1.1rem + 4.6vw, 5.5rem);

    /* shop: the wall of hanging kind tags over the cutting bench */
    --s-wall-w: clamp(8.5rem, 6rem + 5vw, 11.5rem);
    --s-wall-top: 14%;
    --s-wall-drop-1: 0rem;
    --s-wall-drop-2: 4.5rem;
    --s-wall-drop-3: 1.5rem;
    --s-wall-drop-4: 6rem;
    --s-wall-twine: 3.5rem;

    /* valentines */
    --s-night-cols: 3 / span 6;           /* desktop: the cone stands centre-left, under the '4' */
    --s-night-words-cols: 9 / -1;         /* February + the words, right-hand columns */
    --s-numeral-drop: 0.5rem;
    --s-numeral-overlap: 0.15em;          /* rev 6: the '4' overlaps the cone's left edge */
    --s-cone-edge-w: 2px;                 /* the cone's kraft edge line on madder-night */
    --s-cone-edge: var(--s-kraft);
    --s-night-w-phone: min(100%, 21rem);
    --s-sizes-night: (min-width: 64rem) 46vw, 86vw;
    --s-night-h-phone: 45svh;             /* phone: the cone first; 45svh keeps Order early above 390x664 */
    --s-night-overlap-phone: 3rem;        /* the numeral overlaps the cone's lower edge */

    /* nursery: the month strip at the hero's lower edge */
    --s-strip-cell-h: 3.25rem;
    --s-nursery-strip-h: 5.5rem;
    --s-start-wide-h: clamp(22rem, 62vh, 40rem);

    /* occasions */
    --s-sizes-occ-wide: (min-width: 64rem) 58vw, 100vw;
    --s-sizes-occ-pair: (min-width: 64rem) 30vw, 100vw;
    --s-occ-wide-h: clamp(22rem, 50vh, 36rem);
    --s-measure-occ-title: 8ch;
    --s-occ-preview-phone: 34svh;

    /* shop #made */
    --s-start-frame-h: 22rem;             /* nursery 'Where it starts': the diptych's height (panel and seedling frame) */
    --s-sizes-made-inset: (min-width: 64rem) 34vw, 50vw;
    --s-made-big-h: clamp(26rem, 16rem + 22vw, 42rem);
}
@media (max-width: 47.99rem) {
    :root {
        --s-doorway-h: 50svh;
        --s-doorway-min: 26rem;
        --s-made-big-h: 70vw;
    }
}

/* Registered for THE UNWRAP (driven 0 -> 1 by a scroll timeline). */
@property --s-unwrap {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

/* ---- Per-world fields --------------------------------------------------------------- */
[data-world="home"] {
    --s-field: var(--s-madder);
    --s-on-field: var(--s-tissue);
    --s-on-field-muted: var(--s-petal);
    --s-field-accent: var(--s-pollen);
    --s-btn-fill: var(--s-tissue);
    --s-btn-ink: var(--s-madder);
}
[data-world="shop"] {
    --s-field: var(--s-kraft);
    --s-on-field: var(--s-kraft-ink);
    --s-on-field-muted: var(--s-kraft-ink);
    --s-field-accent: var(--s-madder);
    --s-btn-fill: var(--s-madder);
    --s-btn-ink: var(--s-tissue);
    --s-focus-on-field: var(--s-madder);
}
[data-world="occasions"] {
    --s-field: var(--s-tissue-deep);
    --s-on-field: var(--s-ink);
    --s-on-field-muted: var(--s-ink-muted);
    --s-field-accent: var(--s-madder);
    --s-btn-fill: var(--s-madder);
    --s-btn-ink: var(--s-tissue);
    --s-focus-on-field: var(--s-madder);
}
[data-world="weddings"] {
    --s-close-bg: var(--s-ivory);
    --s-close-ink: var(--s-ink);
    --s-close-muted: var(--s-ink-muted);
    --s-field: var(--s-ivory);
    --s-on-field: var(--s-ink);
    --s-on-field-muted: var(--s-ink-muted);
    --s-field-accent: var(--s-leaf);
    --s-btn-fill: var(--s-madder);
    --s-btn-ink: var(--s-tissue);
    --s-focus-on-field: var(--s-madder);
    --s-page: var(--s-ivory);
}
.cf-unwrap__paper { --s-unwrap-band: var(--s-kraft-band); }
[data-world="valentines"] {
    /* The ONE dark page: the ground is madder-night; the madder field stays for tags and the closing. */
    --s-field: var(--s-madder);
    --s-on-field: var(--s-tissue);
    --s-on-field-muted: var(--s-petal);
    --s-field-accent: var(--s-pollen);
    --s-btn-fill: var(--s-tissue);        /* primary tags INVERT on the madder world */
    --s-btn-ink: var(--s-madder);
    --s-btn-fill-page: var(--s-tissue);
    --s-btn-ink-page: var(--s-madder);
    --s-page: var(--s-madder-night);
    --s-page-alt: var(--s-madder-deep);
    --s-close-bg: var(--s-madder-night);
    --s-text: var(--s-tissue);
    --s-text-muted: var(--s-petal);
    --s-link: var(--s-tissue);
    --s-focus: var(--s-tissue);
}
[data-world="nursery"] {
    --s-close-bg: var(--s-leaf);
    --s-close-muted: var(--s-tissue);
    --s-field: var(--s-leaf);
    --s-on-field: var(--s-tissue);
    --s-on-field-muted: var(--s-tissue);
    --s-field-accent: var(--s-pollen);
    --s-btn-fill: var(--s-tissue);
    --s-btn-ink: var(--s-leaf);
    --s-focus-on-field: var(--s-tissue);
}
[data-world="order"] {
    --s-field: var(--s-kraft);
    --s-on-field: var(--s-kraft-ink);
    --s-on-field-muted: var(--s-kraft-ink);
    --s-field-accent: var(--s-madder);
    --s-btn-fill: var(--s-madder);
    --s-btn-ink: var(--s-tissue);
    --s-focus-on-field: var(--s-madder);
}
/* ENGINEER: a tissue surface (a tag panel) inside ANY world — on Valentine's the page text is
   tissue, so text, links and primary tags inside a tissue panel return to ink and madder. */
.cf-paper {
    --s-text: var(--s-ink);
    --s-text-muted: var(--s-ink-muted);
    --s-link: var(--s-madder);
    --s-focus: var(--s-madder);
    --s-btn-fill-page: var(--s-madder);
    --s-btn-ink-page: var(--s-tissue);
}
/* ENGINEER: tissue cards on a kraft field (order/ first frame: the four steps). */
.cf-cards-paper {
    --s-tag-card: var(--s-tissue);
    --s-tag-card-ink: var(--s-ink);
    --s-kraft-shade: var(--s-tissue-deep);
}
/* Sympathy (occasions/#sympathy) is quiet in BOTH motion modes: white field, no swing, no reveal. */
.cf-quiet {
    --s-swing: 0deg;
    --s-reveal-shift: 0rem;
    --s-field: var(--s-white);
    --s-on-field: var(--s-ink);
    --s-on-field-muted: var(--s-ink-muted);
    --s-field-accent: var(--s-ink-muted);
}

/* Phone values — tokens always inside a selector (L9). Mirrors --s-bp-tablet. */
@media (max-width: 47.99rem) {
    :root {
        --s-cone-left-x: 18%;             /* narrower cone on phones */
        --s-cone-right-x: 82%;
        --s-unwrap-track: 160vh;
        --s-arrive-pad-end: var(--s-gutter);
        --s-tag-cut-lg: 1.5rem;
        --s-tag-hole-lg: 0.875rem;
        --s-tag-hole-inset-lg: 1.4rem;
    }
}

/* ENGINEER phone geometry (mirrors --s-mq-phone). */
@media (max-width: 47.99rem) {
    :root {
        --s-nav-h: var(--s-nav-h-phone);
        --s-unwrap-box-l: 12%;
        --s-unwrap-box-t: 4%;
        --s-unwrap-box-w: 0.86;
        --s-unwrap-box-h: 0.94;
        --s-twine-rise: var(--s-twine-rise-phone);
        --s-panel-pad: 1.25rem;
    }
}
:root {
    /* ==== ART DIRECTOR revision 5: the worlds index, the doorway on its photo ================ */
    --s-ratio-world: 4 / 3;                /* the paired world photos */
    /* round 5: the five worlds as one window of five panes (desktop) */
    --s-world-row: clamp(19rem, 38svh, 28rem);
    --s-world-tag-max: 22rem;
    --s-world-gap: var(--s-space-xs);
    --s-world-stamp: 2.5rem;
    --s-world-tag-end: var(--s-space-s);
    --s-world-tag-cut: 1.25rem;
    --s-world-tag-shadow: 0 18px 40px -22px #241318;
    --s-size-world-tile: clamp(1.75rem, 1rem + 1.4vw, 2.5rem);
    --s-ratio-world-lead: 21 / 9;          /* the lead world (the nursery's strelitzia), full width */
    --s-ratio-world-phone: 4 / 5;          /* the phone snap row */
    --s-world-card-phone: 82vw;            /* one world per swipe, the next one's edge showing */
    --s-size-world-name: clamp(2rem, 1.3rem + 2.6vw, 3.75rem);
    --s-sizes-world-lead: (min-width: 48rem) 92vw, 82vw;
    --s-sizes-world: (min-width: 48rem) 46vw, 82vw;
    --s-on-photo: var(--s-tissue);         /* doorway type set straight on the dimmed photo */
    --s-on-photo-muted: #fbf4f1d9;         /* tissue at 85% */
    --s-doorway-scrim: linear-gradient(to top, #241318d9 0%, #24131880 45%, #24131800 80%);
}
/* A short phone viewport (Safari with its toolbars showing, 390x664): the photo gives way
   so the first frame still ends on the order action. */
@media (max-width: 47.99rem) and (max-height: 44rem) {
    :root {
        --s-hero-photo-h-phone: var(--s-hero-photo-h-short);
        --s-subhero-photo-phone: var(--s-subhero-photo-short);
    }
}

/* Reduced motion is a designed state: instant swaps, no swing, the unwrap's open end. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --s-dur-swap: 0ms;
        --s-dur-reveal: 0ms;
        --s-dur-swing: 0ms;
        --s-dur-settle: 0ms;
        --s-dur-marker: 0ms;
        --s-stagger: 0ms;
        --s-swing: 0deg;
        --s-photo-scale-to: 1;
        --s-unwrap-scale-from: 1;
        --s-reveal-shift: 0rem;
    }
}