/*
 * Cathy Florist — the shared system for all seven pages. Every value is a --s-* token in
 * tokens.css; this file only arranges them. Page sections live in home.css, nursery.css …
 *
 * The two objects from the trade:
 *   THE SWING TAG  .cf-tag (horizontal: buttons, chips) · .cf-hang (hanging: cards) ·
 *                  .cf-panel (big hanging tag: hero panels, the closing). Both corners of one
 *                  short end are cut to a blunt point; a punched hole sits in that end. The
 *                  clip lives on ::before so the focus ring stays outside the cut.
 *   THE CONE       the bouquet's paper-wrap silhouette (home.css: THE UNWRAP, cone frames).
 */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("fonts/bricolage-latin-var.woff2") format("woff2");
    font-weight: 400 700;
    font-stretch: 80% 100%;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Petrona";
    src: url("fonts/petrona-italic-latin-var.woff2") format("woff2");
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
}

/* ---- Base ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-nav-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
    margin: 0;
    background: var(--s-page);
    color: var(--s-text);
    font: var(--s-w-body) var(--s-size-body)/var(--s-leading-body) var(--s-font);
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-body);
    letter-spacing: var(--s-track-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, ul, ol, h1, h2, h3, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.cf-on-field :focus-visible { outline-color: var(--s-focus-on-field); }
.cf-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.cf-skip {
    position: absolute; left: var(--s-gutter); top: var(--s-space-2xs); z-index: var(--s-z-sheet);
    padding: var(--s-space-2xs) var(--s-space-s); background: var(--s-ink); color: var(--s-tissue);
    transform: translateY(-200%);
}
.cf-skip:focus { transform: none; }
.cf-photo { width: 100%; height: 100%; object-fit: cover; }

/* ---- Type --------------------------------------------------------------------------- */
.cf-display, .cf-display-xl, .cf-h1, .cf-h2, .cf-h3 {
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
    text-wrap: balance;
}
.cf-display {
    font-weight: var(--s-w-display); font-size: var(--s-size-hero);
    line-height: var(--s-leading-display); letter-spacing: var(--s-track-display);
    max-width: var(--s-measure-hero);
}
/* The ONE display-scale moment on each page (never on more than one element). */
.cf-display-xl {
    font-weight: var(--s-w-display); font-size: var(--s-size-display);
    line-height: var(--s-leading-display-xl); letter-spacing: var(--s-track-display);
    max-width: var(--s-measure-display);
}
.cf-h1 {
    font-weight: var(--s-w-display); font-size: var(--s-size-h1);
    line-height: var(--s-leading-display); letter-spacing: var(--s-track-display);
    max-width: var(--s-measure-heading);
}
.cf-h2 {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h2);
    line-height: var(--s-leading-heading); letter-spacing: var(--s-track-heading);
    max-width: var(--s-measure-heading);
}
.cf-h3 {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3);
    line-height: var(--s-leading-heading); letter-spacing: var(--s-track-heading);
}
.cf-voice {
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-size: var(--s-size-voice); line-height: var(--s-leading-voice);
    font-variation-settings: normal;
}
.cf-lede { font-size: var(--s-size-lede); max-width: var(--s-measure-lede); color: var(--s-text-muted); }
.cf-body { max-width: var(--s-measure-body); }
.cf-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-weight: var(--s-w-semi); text-decoration: underline; text-decoration-thickness: var(--s-link-line-w);
    text-underline-offset: var(--s-link-offset); color: var(--s-link);
}
.cf-tagtype, .cf-tag, .cf-label, .cf-next__label {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-dot {
    display: inline-block; flex: none; width: var(--s-dot); height: var(--s-dot);
    border-radius: 50%; background: var(--s-pollen);
}

/* ---- THE SWING TAG: horizontal (buttons, chips) ----------------------------------------
 * Three tiers (tokens.css, "THE TAG HIERARCHY"):
 *   TIER 1  .cf-tag--twine   the ONE primary action per screen: deep cut, punched hole, twine.
 *   TIER 2  .cf-tag          chips, filters, secondary buttons, contact: a shallow cut end, no hole.
 *   TIER 3  .cf-link         plain underlined type.                                          */
.cf-tag {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-space-2xs);
    min-height: var(--s-tap);
    padding: var(--s-tag2-pad-y) var(--s-tag2-pad-x) var(--s-tag2-pad-y) var(--s-tag2-pad-end);
    border: 0; background: none; cursor: pointer;
    color: var(--s-btn-ink-page); text-decoration: none; white-space: nowrap;
    transform-origin: 0 50%;
    transition: transform var(--s-dur-swing) var(--s-ease-swing), color var(--s-dur-fast) var(--s-ease-out);
}
.cf-tag::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--s-btn-fill-page);
    clip-path: polygon(var(--s-tag2-cut) 0, 100% 0, 100% 100%, var(--s-tag2-cut) 100%, 0 calc(100% - var(--s-tag2-cut)), 0 var(--s-tag2-cut));
    transition: background-color var(--s-dur-fast) var(--s-ease-out);
}
/* TIER 1: the full swing tag. */
.cf-tag--twine {
    padding: var(--s-tag-pad-y) var(--s-tag-pad-x) var(--s-tag-pad-y) calc(var(--s-tag-pad-end) + var(--s-space-2xs));
    transform-origin: var(--s-tag-hole-inset) 50%;
}
.cf-tag--twine::before {
    background-image: radial-gradient(circle at var(--s-tag-hole-inset) 50%,
        var(--s-rule) calc(var(--s-tag-hole) / 2 + var(--s-reinforce)), transparent calc(var(--s-tag-hole) / 2 + var(--s-reinforce) + var(--s-aa)));
    clip-path: polygon(var(--s-tag-cut) 0, 100% 0, 100% 100%, var(--s-tag-cut) 100%, 0 calc(100% - var(--s-tag-cut)), 0 var(--s-tag-cut));
    -webkit-mask: radial-gradient(circle at var(--s-tag-hole-inset) 50%, transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
    mask: radial-gradient(circle at var(--s-tag-hole-inset) 50%, transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
}
/* The string through the hole, lying over the tag and out past its tip. */
.cf-tag--twine::after {
    content: ""; position: absolute; z-index: -1;
    top: 50%; left: calc(var(--s-tag-hole-inset) - var(--s-twine-tail));
    width: var(--s-twine-tail); height: var(--s-twine-w);
    background: var(--s-twine); transform-origin: 100% 50%; transform: rotate(var(--s-twine-angle));
}
@media (hover: hover) {
    .cf-tag:hover { transform: rotate(var(--s-swing)); }
}
.cf-tag:focus-visible { transform: rotate(var(--s-swing)); }
.cf-tag:active::before { background-color: var(--s-madder-press); }

/* Variants (fill + ink) */
.cf-tag--field { color: var(--s-btn-ink); }
.cf-tag--field::before { background-color: var(--s-btn-fill); }
.cf-tag--kraft { color: var(--s-tag-card-ink); }
.cf-tag--kraft::before { background-color: var(--s-tag-card); }
.cf-tag--kraft:active::before { background-color: var(--s-kraft-shade); }
.cf-tag--wide { width: 100%; justify-content: flex-start; }
.cf-tag--icon { padding-inline: var(--s-tag2-pad-end) var(--s-tag2-pad-x); min-width: var(--s-tap); }

/* Occasion chips: kraft tags; the chosen one turns madder. */
.cf-tag--chip { color: var(--s-tag-card-ink); }
.cf-tag--chip::before { background-color: var(--s-tag-card); }
.cf-tag--chip[aria-pressed="true"] { color: var(--s-tissue); }
.cf-tag--chip[aria-pressed="true"]::before { background-color: var(--s-madder); }

.cf-arrow {
    display: inline-block; width: var(--s-arrow); height: var(--s-arrow);
    border-top: var(--s-line-w) solid; border-right: var(--s-line-w) solid; transform: rotate(45deg);
}
.cf-arrow--prev { transform: rotate(-135deg); }

/* A small non-interactive label tag (the world's name on a panel): a solid tag in the
   field's text colour, the field showing through its punched hole. */
.cf-label {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; align-self: start; justify-self: start;
    padding: var(--s-space-3xs) var(--s-space-xs) var(--s-space-3xs) var(--s-tag2-pad-end);
    color: var(--s-field);
}
.cf-label::before {   /* tier 2: the cut end, no hole */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--s-on-field);
    clip-path: polygon(var(--s-label-cut) 0, 100% 0, 100% 100%, var(--s-label-cut) 100%, 0 calc(100% - var(--s-label-cut)), 0 var(--s-label-cut));
}

/* ---- THE SWING TAG: hanging cards (tier 2: both top corners cut, no hole, no twine) ----
   Cards sit threaded on a string (the rail / .cf-string line runs behind their tops).
   .cf-hang--t1 restores the punched hole and the twine (Say it with: the tag on its string). */
.cf-hang {
    position: relative; isolation: isolate; display: flex; flex-direction: column;
    padding: calc(var(--s-tag2-cut) + var(--s-space-xs)) var(--s-space-s) var(--s-space-s);
    color: var(--s-tag-card-ink); text-decoration: none;
    transform-origin: 50% 0;
    transition: transform var(--s-dur-swing) var(--s-ease-swing);
}
.cf-hang::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--s-tag-card);
    clip-path: polygon(0 var(--s-tag2-cut), var(--s-tag2-cut) 0, calc(100% - var(--s-tag2-cut)) 0, 100% var(--s-tag2-cut), 100% 100%, 0 100%);
}
.cf-hang--t1 { padding-top: calc(var(--s-tag-hole-inset) + var(--s-tag-hole) + var(--s-space-xs)); transform-origin: 50% var(--s-tag-hole-inset); }
.cf-hang--t1::before {
    background-image: radial-gradient(circle at 50% var(--s-tag-hole-inset),
        var(--s-kraft-shade) calc(var(--s-tag-hole) / 2 + var(--s-reinforce)), transparent calc(var(--s-tag-hole) / 2 + var(--s-reinforce) + var(--s-aa)));
    clip-path: polygon(0 var(--s-tag-cut), var(--s-tag-cut) 0, calc(100% - var(--s-tag-cut)) 0, 100% var(--s-tag-cut), 100% 100%, 0 100%);
    -webkit-mask: radial-gradient(circle at 50% var(--s-tag-hole-inset), transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
    mask: radial-gradient(circle at 50% var(--s-tag-hole-inset), transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
}
.cf-hang--t1::after {   /* the twine from the hole up to the string */
    content: ""; position: absolute; z-index: -2; left: 50%;
    bottom: calc(100% - var(--s-tag-hole-inset));
    width: var(--s-twine-w); height: calc(var(--s-twine-len) + var(--s-tag-hole-inset));
    margin-left: calc(var(--s-twine-w) / -2); background: var(--s-twine);
}
@media (hover: hover) {
    a.cf-hang:hover { transform: rotate(var(--s-swing)); }
}
a.cf-hang:focus-visible { transform: rotate(var(--s-swing)); }

/* ---- THE SWING TAG: panels (a big hanging tag that holds a page's words) --------------- */
.cf-panel {
    position: relative; isolation: isolate;
    padding: calc(var(--s-tag-hole-inset-lg) + var(--s-tag-hole-lg) + var(--s-space-m)) var(--s-panel-pad) var(--s-panel-pad);
    color: var(--s-ink);
}
.cf-panel::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--s-tissue);
    background-image: radial-gradient(circle at 50% var(--s-tag-hole-inset-lg),
        var(--s-rule) calc(var(--s-tag-hole-lg) / 2 + var(--s-reinforce)), transparent calc(var(--s-tag-hole-lg) / 2 + var(--s-reinforce) + var(--s-aa)));
    clip-path: polygon(0 var(--s-tag-cut-lg), var(--s-tag-cut-lg) 0, calc(100% - var(--s-tag-cut-lg)) 0, 100% var(--s-tag-cut-lg), 100% 100%, 0 100%);
    -webkit-mask: radial-gradient(circle at 50% var(--s-tag-hole-inset-lg), transparent calc(var(--s-tag-hole-lg) / 2), var(--s-opaque) calc(var(--s-tag-hole-lg) / 2 + var(--s-aa)));
    mask: radial-gradient(circle at 50% var(--s-tag-hole-inset-lg), transparent calc(var(--s-tag-hole-lg) / 2), var(--s-opaque) calc(var(--s-tag-hole-lg) / 2 + var(--s-aa)));
}
.cf-panel--field { color: var(--s-on-field); }
.cf-panel--field::before { background-color: var(--s-field); }
.cf-panel--kraft { color: var(--s-kraft-ink); }
/* A panel that is NOT a hero/world/closing tag drops to tier 2: the shallow cut, no hole. */
.cf-panel--t2 { padding-top: var(--s-panel-pad); }
.cf-panel--t2::before {
    background-image: none; -webkit-mask: none; mask: none;
    clip-path: polygon(0 var(--s-tag2-cut), var(--s-tag2-cut) 0, calc(100% - var(--s-tag2-cut)) 0, 100% var(--s-tag2-cut), 100% 100%, 0 100%);
}
.cf-panel--kraft::before { background-color: var(--s-kraft); }
/* A twine line rising from the panel's hole off the top of its band. */
.cf-panel--rise::after {
    content: ""; position: absolute; z-index: -2; left: 50%;
    bottom: calc(100% - var(--s-tag-hole-inset-lg));
    width: var(--s-twine-w); height: calc(var(--s-twine-rise) + var(--s-tag-hole-inset-lg));
    margin-left: calc(var(--s-twine-w) / -2); background: var(--s-twine);
}

/* ---- ART DIRECTOR rev 5: the tag is for LABELS only ----------------------------------------
   The cut-and-punched tag means "a gift tag": piece and stem labels, the hero picker, filters,
   the Say-it-with picker and the message card. Every other container is a plain panel: the
   same fill, square, no cut, no hole, no twine, no swing. ----------------------------------- */
.cf-plain { padding-top: var(--s-panel-pad); }
.cf-plain::before { background-image: none; clip-path: none; -webkit-mask: none; mask: none; }
.cf-plain::after { content: none; }
a.cf-plain:hover, a.cf-plain:focus-visible { transform: none; }

/* ---- Nav ---------------------------------------------------------------------------- */
.cf-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; gap: var(--s-space-m);
    height: var(--s-nav-h); padding-inline: var(--s-gutter-wide);
    background: var(--s-page); color: var(--s-text);
    box-shadow: 0 var(--s-rule-w) 0 var(--s-rule);
}
.cf-wordmark {
    display: inline-flex; align-items: center; gap: var(--s-space-3xs); min-height: var(--s-tap);
    margin-right: auto; text-decoration: none;
    font-size: var(--s-size-wordmark); line-height: var(--s-leading-tag); letter-spacing: var(--s-track-wordmark);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-wordmark__a { font-weight: var(--s-w-display); }
.cf-wordmark__b { font-weight: var(--s-w-body); }
.cf-nav__links ul { display: flex; gap: var(--s-space-s); }
.cf-nav__links a {
    position: relative; display: inline-flex; align-items: center; min-height: var(--s-tap);
    padding-inline: var(--s-space-3xs); text-decoration: none;
    font-weight: var(--s-w-semi); font-size: var(--s-size-small);
}
/* The tag-notch underline: a bar whose left end is cut to a point, like the tag. */
.cf-nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: var(--s-space-2xs);
    height: var(--s-notch); background: var(--s-link);
    clip-path: polygon(var(--s-notch) 0, 100% 0, 100% 100%, var(--s-notch) 100%, 0 50%);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--s-dur-fast) var(--s-ease-out);
}
.cf-nav__links a:hover::after, .cf-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.cf-nav__menu { display: none; }

@media (max-width: 63.99rem) {
    .cf-nav { gap: var(--s-space-xs); padding-inline: var(--s-gutter); }
    .cf-nav__links { display: none; }
    .cf-nav__menu { display: inline-flex; }
}
@media (max-width: 47.99rem) {
    .cf-nav__order { display: none; }
}

/* ---- Menu sheet (phones, tablets): the madder wrapping paper, every page as a tag ------ */
.cf-sheet {
    position: fixed; inset: 0; z-index: var(--s-z-sheet);
    display: flex; flex-direction: column; gap: var(--s-space-l);
    padding: var(--s-space-2xs) var(--s-gutter) calc(var(--s-space-l) + env(safe-area-inset-bottom));
    background: var(--s-madder); color: var(--s-tissue); overflow-y: auto; overscroll-behavior: contain;
}
.cf-sheet[hidden] { display: none; }
.cf-sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-nav-h); }
.cf-sheet__top .cf-wordmark { margin: 0; }
.cf-sheet__pages, .cf-sheet__contact { display: grid; gap: var(--s-space-xs); max-width: var(--s-sheet-max); }
.cf-sheet .cf-tag--field { color: var(--s-madder); }
.cf-sheet .cf-tag--field::before { background-color: var(--s-tissue); }
.cf-sheet .cf-tag--field[aria-current="page"]::before { background-color: var(--s-petal); }
.cf-sheet__contact .cf-tag { justify-self: start; }
.cf-sheet :focus-visible { outline-color: var(--s-tissue); }
.cf-lock { overflow: hidden; }

/* ---- Rails (In the buckets, The bench): swipe, keys, a visible peek ------------------- */
.cf-rail { position: relative; }
.cf-rail__track {
    display: flex; gap: var(--s-space-m);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-gutter-wide);
    padding: var(--s-space-s) var(--s-gutter-wide) var(--s-space-l);
    scrollbar-width: none;
    -webkit-mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-rail-fade)), transparent);
    mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-rail-fade)), transparent);
}
.cf-rail__track::-webkit-scrollbar { display: none; }
.cf-rail__track:focus-visible { outline-offset: calc(var(--s-focus-w) * -1); }
.cf-rail__track.is-end { -webkit-mask: none; mask: none; }
/* The string every tag is threaded on: it runs behind the cards' tops. */
.cf-rail::before {
    content: ""; position: absolute; left: 0; right: 0; top: var(--s-thread-y);
    height: var(--s-twine-w); background: var(--s-twine); pointer-events: none;
}
.cf-rail__item { flex: none; width: var(--s-rail-card); scroll-snap-align: start; }
.cf-rail__item > .cf-hang { height: 100%; }
.cf-rail-ctrl { display: flex; gap: var(--s-space-2xs); }
@media (max-width: 47.99rem) {
    .cf-rail__item { width: var(--s-rail-card-phone); }
    .cf-rail__track { scroll-padding-inline: var(--s-gutter); padding-inline: var(--s-gutter); }
}

/* Settling: hanging tags arrive tilted and settle once — only once the script is ready,
   so nothing is ever stranded in a from-state (the tags are visible throughout). */
.cf-anim [data-cf-settle] > * { transition: transform var(--s-dur-settle) var(--s-ease-swing); }
.cf-anim [data-cf-settle]:not(.is-settled) > :nth-child(odd) { transform: translateY(calc(var(--s-hang-drop) * -1)) rotate(var(--s-hang-tilt)); }
.cf-anim [data-cf-settle]:not(.is-settled) > :nth-child(even) { transform: translateY(calc(var(--s-hang-drop) * -1)) rotate(calc(var(--s-hang-tilt) * -1)); }

/* Photo reveals: a frame opens from the top edge, once. Only frames still BELOW the fold
   when the script starts are closed (.is-pending), and each opens as it arrives. */
.cf-anim [data-cf-reveal] { transition: clip-path var(--s-dur-reveal) var(--s-ease-out); }
.cf-anim [data-cf-reveal].is-pending { clip-path: inset(0 0 var(--s-reveal-clip) 0); }

/* THE CONE, static: the bouquet's paper-wrap silhouette framing a photograph. */
.cf-cone {
    overflow: hidden;
    /* rev 6: the mouth opens on a slant (the left lip lower than the right), never a V-notch */
    clip-path: polygon(
        var(--s-cone-left-x) calc(var(--s-cone-lip-y) + var(--s-cone-slant)),
        var(--s-cone-right-x) var(--s-cone-lip-y),
        calc(var(--s-cone-right-x) - var(--s-cone-shoulder-in)) var(--s-cone-shoulder-y),
        var(--s-cone-tip-x) var(--s-cone-tip-y),
        calc(var(--s-cone-left-x) + var(--s-cone-shoulder-in)) var(--s-cone-shoulder-y));
}

/* ---- Cards that hang on a string: stems (home, shop) and pieces (home, shop, occasions) ---- */
.cf-stem__photo, .cf-piece__photo { display: block; aspect-ratio: var(--s-ratio-photo); overflow: hidden; margin-bottom: var(--s-space-xs); }
.cf-stem__name, .cf-piece__name {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    letter-spacing: var(--s-track-heading); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-stem__order, .cf-piece__order, .cf-piece__type, .cf-suits__label {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-stem__order, .cf-piece__order { margin-top: auto; padding-top: var(--s-space-xs); color: var(--s-tag-card-accent); }
.cf-stem__order::after, .cf-piece__order::after {
    content: ""; display: inline-block; width: var(--s-arrow); height: var(--s-arrow); margin-left: var(--s-space-2xs);
    border-top: var(--s-line-w) solid; border-right: var(--s-line-w) solid; transform: translateY(calc(var(--s-line-w) * -1)) rotate(45deg);
}
.cf-piece__type { color: var(--s-kraft-ink); }
.cf-piece__line { margin-top: var(--s-space-3xs); font-size: var(--s-size-small); }
/* "Suits": the card voice, each reason a link into its occasion. */
.cf-suits { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-space-xs); margin-top: var(--s-space-2xs); }
.cf-suits__label { margin-right: var(--s-space-3xs); }
.cf-suits a {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-size: var(--s-size-lede); line-height: var(--s-leading-voice); font-variation-settings: normal;
    color: var(--s-tag-card-accent); text-underline-offset: var(--s-space-3xs);
}
/* The CTA is pinned to the card's foot, so a row of cards lines its CTAs up whatever the copy length. */
.cf-piece__cta { align-self: start; margin-top: auto; }
.cf-piece--bench .cf-suits { margin-bottom: var(--s-space-s); }

/* ---- Four tags on one string (home #how, order/ first frame) ---------------------------- */
.cf-string {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-space-l);
    max-width: var(--s-max); margin-inline: auto; padding-top: var(--s-space-s);
}
.cf-string::before {
    content: ""; position: absolute; left: calc(var(--s-gutter-wide) * -1); right: calc(var(--s-gutter-wide) * -1); top: var(--s-thread-y);
    height: var(--s-twine-w); background: var(--s-twine);
}
.cf-step { gap: var(--s-space-2xs); min-height: var(--s-step-h); }
.cf-step:nth-child(odd) { transform: rotate(var(--s-hang-rest)); }
.cf-step:nth-child(even) { transform: rotate(calc(var(--s-hang-rest) * -1)); }
.cf-step__n {
    font-weight: var(--s-w-display); font-size: var(--s-size-step-n); line-height: var(--s-leading-display);
    font-variant-numeric: tabular-nums; color: var(--s-tag-card-accent);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-step__title {
    font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
@media (max-width: 63.99rem) {
    .cf-string { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-space-l); }
}
@media (max-width: 47.99rem) {
    /* The string goes vertical: one line running down through every tag's hole. */
    .cf-string { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-space-l); padding-top: var(--s-space-s); }
    .cf-string::before { left: 50%; right: auto; top: 0; bottom: 0; width: var(--s-twine-w); height: auto; }
    .cf-step { min-height: 0; }
}

/* ---- Small shared pieces for the sub-pages --------------------------------------------- */
/* A tissue tag (filters, quiet actions) and an ink label for tissue panels on any world. */
.cf-tag--paper { color: var(--s-madder); }
.cf-tag--paper::before { background-color: var(--s-tissue); }
.cf-tag--paper[aria-pressed="true"] { color: var(--s-tissue); }
.cf-tag--paper[aria-pressed="true"]::before { background-color: var(--s-madder); }
.cf-tag--chip[aria-current="true"] { color: var(--s-tissue); }
.cf-tag--chip[aria-current="true"]::before { background-color: var(--s-madder); }
.cf-label--ink { color: var(--s-tissue); }
.cf-label--ink::before { background: var(--s-madder); }
.cf-tags { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.cf-band { padding: var(--s-space-section) var(--s-gutter-wide); }
.cf-band__inner { max-width: var(--s-max); margin-inline: auto; }
.cf-grid { display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap); }
.cf-grid > * { min-width: 0; }
.cf-frame { position: relative; overflow: hidden; }
.cf-frame picture { position: absolute; inset: 0; }
.cf-caption { margin-top: var(--s-space-2xs); font-size: var(--s-size-small); color: var(--s-text-muted); }
.cf-stack { display: grid; gap: var(--s-space-s); justify-items: start; align-content: start; }
.cf-stack > .cf-h2, .cf-stack > .cf-h3 { justify-self: stretch; }

@media (max-width: 47.99rem) {
    .cf-band { padding-inline: var(--s-gutter); }
}

/* The Valentine's day line (tabular). */
.cf-count {
    font-weight: var(--s-w-semi); font-size: var(--s-size-count); line-height: var(--s-leading-heading);
    font-variant-numeric: tabular-nums; font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}

/* ---- Sub-page first frame: a wide photo, the H1 on a field tag hanging over its edge ----
   (the H1 is never on the photo; on phones the tag sits below it). ------------------------ */
.cf-sub {
    position: relative; display: flex; flex-direction: column;
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    background: var(--s-page); overflow: hidden;
}
.cf-sub__photo { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--s-field); }
.cf-sub__photo picture { position: absolute; inset: 0; }
.cf-sub__row {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); align-items: end;
    gap: var(--s-space-m) var(--s-grid-gap);
    margin-top: calc(var(--s-overlap) * -2); padding: 0 var(--s-gutter-wide) var(--s-space-l);
}
.cf-sub__panel { grid-column: 1 / span 6; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start; }
.cf-sub__panel .cf-h1 { justify-self: stretch; }
.cf-sub__lede { font-size: var(--s-size-lede); max-width: var(--s-measure-lede); }
.cf-sub__aside { grid-column: 8 / -1; display: grid; gap: var(--s-space-xs); padding-bottom: var(--s-space-2xs); }
@media (max-width: 63.99rem) {
    .cf-sub { height: auto; min-height: 0; max-height: none; }
    .cf-sub__photo { flex: none; height: var(--s-subhero-photo-phone); }
    .cf-sub__row { margin-top: calc(var(--s-hero-overlap-phone) * -1); padding: 0 var(--s-gutter) var(--s-gutter); }
    .cf-sub__panel { grid-column: 1 / -1; gap: var(--s-space-xs); }
    .cf-sub__aside { display: none; }
}

/* ---- Next world: a photographic doorway -----------------------------------------------
   The next world's own photo at 100vw x ~50vh, dimmed, under a bottom scrim; the world's name
   at display size set straight on the photo (ART DIRECTOR rev 5: no tag — the tag is kept
   for labels and the message card). The whole band is one link. ------------------------- */
.cf-next { background: var(--s-ink); }
.cf-next__link {
    position: relative; display: flex; align-items: flex-end; overflow: hidden;
    height: var(--s-doorway-h); min-height: var(--s-doorway-min);
    padding: var(--s-space-xl) var(--s-gutter-wide); text-decoration: none; color: var(--s-on-field);
}
.cf-next__photo { position: absolute; inset: 0; }
.cf-next__photo picture { position: absolute; inset: 0; }
.cf-next__photo::after { content: ""; position: absolute; inset: 0; background: var(--s-doorway-scrim); }
.cf-next__photo .cf-photo {
    filter: brightness(var(--s-doorway-dim));
    transform: scale(var(--s-photo-scale-from));
    transition: transform var(--s-dur-reveal) var(--s-ease-out);
}
.cf-next__tag {
    position: relative; display: grid; gap: var(--s-space-2xs); justify-items: start;
    width: min(100%, var(--s-max)); margin-inline: auto; color: var(--s-on-photo);
}
.cf-next__label {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-next__name {
    font-weight: var(--s-w-display); font-size: var(--s-size-doorway); line-height: var(--s-leading-display-xl);
    letter-spacing: var(--s-track-display); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-next__line { color: var(--s-on-photo-muted); max-width: var(--s-measure-lede); font-size: var(--s-size-lede); }
.cf-next__go {   /* the arrow, cut like a tag's end */
    display: inline-flex; align-items: center; margin-top: var(--s-space-2xs);
    min-height: var(--s-tap); padding: 0 calc(var(--s-tag-cut) + var(--s-space-s)) 0 var(--s-space-s);
    background: var(--s-on-photo); color: var(--s-ink);
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
    clip-path: polygon(0 0, calc(100% - var(--s-tag-cut)) 0, 100% 50%, calc(100% - var(--s-tag-cut)) 100%, 0 100%);
    transition: transform var(--s-dur-swing) var(--s-ease-swing);
}
@media (hover: hover) {
    .cf-next__link:hover .cf-photo { transform: scale(var(--s-photo-scale-to)); }
    .cf-next__link:hover .cf-next__go { transform: translateX(var(--s-space-2xs)); }
}
.cf-next__link:focus-visible { outline-color: var(--s-tissue); outline-offset: calc(var(--s-focus-w) * -2); }
.cf-next__link:focus-visible .cf-next__go { transform: translateX(var(--s-space-2xs)); }
@media (max-width: 47.99rem) {
    .cf-next__link { padding: var(--s-space-l) var(--s-gutter); }
    .cf-next__tag { width: 100%; }
}

/* ---- WRITE THE CARD (the closing) ------------------------------------------------------ */
.cf-card {
    position: relative; overflow: hidden;
    background: var(--s-close-bg); color: var(--s-close-ink);
    /* It follows the next-world doorway directly: one short step of plum, never a dead band. */
    padding: var(--s-space-xl) var(--s-gutter-wide) var(--s-space-section);
}
.cf-card__inner {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-space-l) var(--s-grid-gap);
    max-width: var(--s-card-max); margin-inline: auto;
}
.cf-card__head { grid-column: 1 / span 4; align-self: start; display: grid; gap: var(--s-space-s); padding-top: var(--s-space-l); }
.cf-card__lede { color: var(--s-close-muted); font-size: var(--s-size-lede); max-width: var(--s-measure-lede); }
/* The world it ends: one small photo of this page's world, under the words (desktop only). */
.cf-card__photo { position: relative; margin-top: var(--s-space-l); aspect-ratio: var(--s-ratio-card-photo); overflow: hidden; }
.cf-card__photo picture { position: absolute; inset: 0; }
@media (max-width: 63.99rem) { .cf-card__photo { display: none; } }
.cf-cardtag {
    grid-column: 5 / -1; align-self: start; position: relative; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-space-l);
    padding: var(--s-panel-pad);
    color: var(--s-kraft-ink);
}
/* rev 5: the form is a plain kraft panel (no cut, hole or twine); the card face inside is the tag. */
.cf-cardtag::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--s-kraft);
}
/* The card tucked into the bouquet: the message appears here as it is typed. The ONE tag in the
   closing: tier-2 cut top corners and a punched hole, so it reads as the gift card it is. */
.cf-cardtag__face {
    position: relative; isolation: isolate;
    align-self: start; display: grid; gap: var(--s-space-s);
    padding: calc(var(--s-tag-hole-inset) + var(--s-tag-hole) + var(--s-space-s)) var(--s-space-m) var(--s-space-l);
    color: var(--s-ink);
    filter: drop-shadow(0 var(--s-space-2xs) var(--s-space-s) var(--s-shadow-deep));
    transform: rotate(var(--s-card-face-tilt));
}
.cf-cardtag__face::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--s-tissue);
    clip-path: polygon(0 var(--s-tag-cut), var(--s-tag-cut) 0, calc(100% - var(--s-tag-cut)) 0, 100% var(--s-tag-cut), 100% 100%, 0 100%);
    -webkit-mask: radial-gradient(circle at 50% var(--s-tag-hole-inset), transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
    mask: radial-gradient(circle at 50% var(--s-tag-hole-inset), transparent calc(var(--s-tag-hole) / 2), var(--s-opaque) calc(var(--s-tag-hole) / 2 + var(--s-aa)));
}
.cf-cardtag__label { color: var(--s-ink-muted); }
.cf-cardtag__label, .cf-field label {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase;
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-cardtag__to, .cf-cardtag__from, .cf-cardtag__message, .cf-cardtag__list {
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-variation-settings: normal; overflow-wrap: anywhere;
}
.cf-cardtag__to, .cf-cardtag__from { font-size: var(--s-size-voice); line-height: var(--s-leading-voice); color: var(--s-ink-muted); }
.cf-cardtag__to span:last-child, .cf-cardtag__from span:last-child { color: var(--s-ink); }
.cf-cardtag__message {
    font-size: var(--s-size-voice-card); line-height: var(--s-leading-voice);
    max-width: var(--s-measure-card); min-height: calc(var(--s-size-voice-card) * 4);
}
.cf-cardtag__message.is-empty { color: var(--s-ink-muted); }
.cf-cardtag__list { display: grid; gap: var(--s-space-3xs); font-size: var(--s-size-voice); line-height: var(--s-leading-voice); }
.cf-cardtag__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-s); align-content: start; }
.cf-field { display: grid; gap: var(--s-space-3xs); align-content: start; }
.cf-field--wide, .cf-cardtag__send, .cf-cardtag__status { grid-column: 1 / -1; }
.cf-field input, .cf-field select, .cf-field textarea {
    width: 100%; min-height: var(--s-tap);
    padding: var(--s-space-2xs) var(--s-space-xs);
    background: var(--s-tissue); color: var(--s-ink);
    border: var(--s-rule-w) solid var(--s-kraft-shade); border-radius: 0;
    font-size: var(--s-size-body);   /* never below 16px: iOS Safari zooms on focus */
}
.cf-field textarea { resize: vertical; line-height: var(--s-leading-body); }
/* Select: no native chrome. A tag-cut chevron drawn from tokens; 16px+ so iOS never zooms. */
.cf-field select { -webkit-appearance: none; appearance: none; }
.cf-field select {
    padding-right: calc(var(--s-space-xs) + var(--s-chevron) * 2 + var(--s-space-xs));
    background-image:
        linear-gradient(45deg, transparent calc(50% - var(--s-line-w) / 2), var(--s-madder) calc(50% - var(--s-line-w) / 2), var(--s-madder) calc(50% + var(--s-line-w) / 2), transparent calc(50% + var(--s-line-w) / 2)),
        linear-gradient(-45deg, transparent calc(50% - var(--s-line-w) / 2), var(--s-madder) calc(50% - var(--s-line-w) / 2), var(--s-madder) calc(50% + var(--s-line-w) / 2), transparent calc(50% + var(--s-line-w) / 2));
    background-size: var(--s-chevron) var(--s-chevron);
    background-repeat: no-repeat;
    background-position:
        right calc(var(--s-space-xs) + var(--s-chevron)) center,
        right var(--s-space-xs) center;
    text-overflow: ellipsis; cursor: pointer;
}
.cf-field :focus-visible { outline-color: var(--s-madder); outline-offset: 0; }
.cf-field [aria-invalid="true"] { border-color: var(--s-error); box-shadow: inset 0 0 0 var(--s-rule-w) var(--s-error); }
.cf-field__hint, .cf-field__count { font-size: var(--s-size-small); color: var(--s-kraft-ink); }
.cf-field__error { font-size: var(--s-size-small); font-weight: var(--s-w-tag); color: var(--s-kraft-ink); }
.cf-field__error[hidden] { display: none; }
.cf-cardtag__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-s) var(--s-space-l); padding-top: var(--s-space-2xs); }
.cf-cardtag__note { font-size: var(--s-size-small); max-width: var(--s-measure-lede); }
.cf-cardtag__status { font-weight: var(--s-w-semi); }
.cf-cardtag__status:empty { display: none; }

@media (max-width: 63.99rem) {
    .cf-card__head { grid-column: 1 / -1; padding-top: 0; }
    .cf-cardtag { grid-column: 1 / -1; margin-top: var(--s-space-xl); }
}
@media (max-width: 47.99rem) {
    .cf-card { padding-inline: var(--s-gutter); }
    .cf-cardtag { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-space-s); }
    .cf-cardtag__fields { grid-template-columns: minmax(0, 1fr); }
    .cf-cardtag__message { min-height: calc(var(--s-size-voice-card) * 2.6); }
}

/* ---- Footer -------------------------------------------------------------------------- */
.cf-foot { background: var(--s-madder-deep); color: var(--s-tissue); padding: var(--s-space-2xl) var(--s-gutter-wide) calc(var(--s-space-2xl) + env(safe-area-inset-bottom)); }
.cf-foot__inner {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-space-xl) var(--s-grid-gap);
    max-width: var(--s-max); margin-inline: auto;
}
.cf-foot__journey { grid-column: 1 / span 6; display: grid; gap: var(--s-space-xs); align-content: start; }
.cf-foot__promise {
    font-weight: var(--s-w-display); font-size: var(--s-size-h2); line-height: var(--s-leading-display);
    letter-spacing: var(--s-track-display); font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
}
.cf-journey { display: flex; flex-wrap: wrap; align-items: center; }
.cf-journey li { display: inline-flex; align-items: center; }
.cf-journey a, .cf-journey__sep {
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-size: var(--s-size-voice); line-height: var(--s-leading-voice); font-variation-settings: normal;
}
.cf-journey a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-petal); text-underline-offset: var(--s-space-3xs); }
.cf-journey a:hover { color: var(--s-tissue); }
.cf-journey__sep { padding-inline: var(--s-space-xs); color: var(--s-pollen); }
.cf-foot__pages { grid-column: 7 / span 2; }
.cf-foot__pages a { display: inline-flex; align-items: center; min-height: var(--s-tap); text-decoration: none; color: var(--s-petal); }
.cf-foot__pages a:hover, .cf-foot__pages a[aria-current="page"] { color: var(--s-tissue); text-decoration: underline; }
.cf-foot__contact { grid-column: 9 / -1; display: grid; gap: var(--s-space-s); align-content: start; }
.cf-foot__title { font-weight: var(--s-w-heading); font-size: var(--s-size-h3); line-height: var(--s-leading-heading); }
.cf-contact { display: flex; flex-wrap: wrap; gap: var(--s-space-xs); }
.cf-foot .cf-tag--field { color: var(--s-madder-deep); }
.cf-foot .cf-tag--field::before { background-color: var(--s-tissue); }
.cf-foot :focus-visible { outline-color: var(--s-tissue); }
.cf-foot__brand {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-space-3xs) var(--s-space-s);
    font-family: var(--s-font-voice); font-style: italic; font-weight: var(--s-w-voice);
    font-size: var(--s-size-voice); line-height: var(--s-leading-voice); font-variation-settings: normal; color: var(--s-tissue);
}
.cf-foot__since {
    font-family: var(--s-font); font-style: normal; font-weight: var(--s-w-tag); font-size: var(--s-size-tag);
    line-height: var(--s-leading-tag); letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-pollen);
    font-variation-settings: "opsz" var(--s-opsz-body), "wdth" var(--s-wdth-tag);
}
.cf-foot__concept { color: var(--s-petal); margin-top: var(--s-space-s); max-width: var(--s-measure-lede); }
.cf-foot__credits { grid-column: 7 / -1; display: grid; gap: var(--s-space-2xs); font-size: var(--s-size-small); color: var(--s-petal); }
.cf-foot__small {
    font-weight: var(--s-w-tag); font-size: var(--s-size-tag); line-height: var(--s-leading-tag);
    letter-spacing: var(--s-track-tag); text-transform: uppercase; color: var(--s-tissue);
}
.cf-foot__credits ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-space-s); }
.cf-foot__credits a { display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-petal); text-underline-offset: var(--s-space-3xs); }
@media (max-width: 63.99rem) {
    .cf-foot__journey, .cf-foot__contact, .cf-foot__credits, .cf-foot__pages { grid-column: 1 / -1; }
    .cf-foot__pages ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-space-m); }
}
@media (max-width: 47.99rem) {
    .cf-foot { padding-inline: var(--s-gutter); padding-bottom: calc(var(--s-space-2xl) + var(--s-bar-h) + env(safe-area-inset-bottom)); }
}

/* ---- Phone sticky order bar (after the hero; never over a form or the menu) ----------- */
.cf-orderbar { display: none; }
@media (max-width: 47.99rem) {
    .cf-orderbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--s-z-bar);
        display: block; padding: var(--s-space-2xs) var(--s-gutter) calc(var(--s-space-2xs) + env(safe-area-inset-bottom));
        background: var(--s-madder); box-shadow: 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule-on-field);
        transform: translateY(100%); visibility: hidden;
        transition: transform var(--s-dur-fast) var(--s-ease-out), visibility 0s linear var(--s-dur-fast);
    }
    .cf-orderbar.is-on { transform: none; visibility: visible; transition: transform var(--s-dur-fast) var(--s-ease-out); }
    .cf-orderbar .cf-tag { color: var(--s-madder); justify-content: center; }
    .cf-orderbar .cf-tag::before { background-color: var(--s-tissue); }
    .cf-orderbar :focus-visible { outline-color: var(--s-tissue); }
}