/*
 * Cathy Florist — HOME sections. Values are --s-* tokens (tokens.css); shared components
 * (tags, panels, rails, card, footer) are in site.css.
 */

/* ---- #top: the occasion picker ------------------------------------------------------- *
 * Desktop: the photo full bleed above; the rose-madder field below carries the H1 at display
 * scale; the picker hangs as one long tissue tag over the photo's bottom edge.
 * Phones: type first (H1 + the picker on the field), the photo below with the tag over its top. */
.cf-hero {
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
    height: var(--s-hero-h); min-height: var(--s-hero-min); max-height: var(--s-hero-max);
    overflow: hidden; background: var(--s-field);
}
.cf-hero__photo { grid-row: 1; grid-column: 1; position: relative; overflow: hidden; background: var(--s-madder-deep); }
.cf-hero__frame { position: absolute; inset: 0; transition: opacity var(--s-dur-swap) var(--s-ease-out); }
.cf-hero__frame:not(.is-current) { opacity: 0; }
.cf-hero__frame picture { display: block; width: 100%; height: 100%; }
.cf-hero__frame .cf-photo {
    object-position: var(--s-hero-pos);
    transform: scale(var(--s-photo-scale-from));
    transition: transform var(--s-dur-reveal) var(--s-ease-out);
}
.cf-hero__frame.is-entering .cf-photo { transform: scale(var(--s-photo-scale-to)); transition: none; }
.cf-hero__buckets { position: absolute; left: var(--s-gutter-wide); top: var(--s-space-m); z-index: 1; }
.cf-hero__buckets[hidden] { display: none; }

.cf-hero__field {
    grid-row: 2; grid-column: 1; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); column-gap: var(--s-grid-gap);
    align-items: end; padding: var(--s-space-l) var(--s-gutter-wide) var(--s-space-l);
    color: var(--s-on-field);
}
.cf-hero__title { grid-column: 1 / span 7; max-width: var(--s-measure-home-title); }
.cf-hero__picker {
    grid-column: 8 / -1; align-self: start; margin-top: calc(var(--s-hero-picker-rise) * -1);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-space-s); justify-items: start;
}
.cf-chips .cf-tag { padding-left: var(--s-tag2-pad-end); padding-right: var(--s-chip-pad-x); }
.cf-chips-wrap { width: 100%; min-width: 0; }
.cf-chips { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.cf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs) var(--s-space-l); }

/* Desktop (round 5): one composed first frame. The madder field on the left carries the whole headline and the
   occasion tag, hung so it crosses onto the photograph; the protea basket fills the right, full height. The
   headline is sized from the viewport height too, so it is never cut on a short laptop screen. */
@media (min-width: 64rem) {
    .cf-hero { grid-template-columns: var(--s-hero-split); grid-template-rows: minmax(0, 1fr); }
    .cf-hero__photo { grid-column: 2; grid-row: 1; }
    .cf-hero__field {
        grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
        gap: var(--s-space-l); padding: var(--s-space-xl) 0 var(--s-space-xl) var(--s-gutter-wide);
    }
    .cf-hero__title { font-size: min(var(--s-size-display), var(--s-hero-title-vh)); max-width: none; padding-right: var(--s-space-l); }
    .cf-hero__picker { --s-twine-rise: var(--s-space-l); margin: 0 calc(var(--s-hero-tag-hang) * -1) 0 0; align-self: stretch; box-shadow: var(--s-hero-tag-shadow); }
    .cf-hero__buckets { left: auto; right: var(--s-gutter-wide); top: auto; bottom: var(--s-space-l); }
}
@media (max-width: 63.99rem) {
    .cf-hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; }
    .cf-hero__field { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-space-m); padding: var(--s-space-m) var(--s-gutter) 0; }
    .cf-hero__title { max-width: var(--s-measure-home-title-phone); }
    .cf-hero__picker { align-self: stretch; margin: 0 0 calc(var(--s-hero-overlap-phone) * -1); gap: var(--s-space-xs); }
    .cf-hero__photo { flex: none; height: var(--s-hero-photo-h-phone); }
    .cf-hero__frame .cf-photo { object-position: var(--s-hero-pos-phone); }
    .cf-hero__buckets { top: auto; bottom: var(--s-space-s); left: var(--s-gutter); }
}
@media (max-width: 47.99rem) {
    /* One chip row that looks scrollable: a half-visible chip at the edge, a fade, snap. */
    .cf-chips-wrap { margin-inline: calc(var(--s-panel-pad) * -1); width: calc(100% + var(--s-panel-pad) * 2); }
    .cf-chips {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        padding: var(--s-focus-w) var(--s-panel-pad) calc(var(--s-focus-w) + var(--s-focus-offset));
        scroll-padding-inline: var(--s-panel-pad);
        -webkit-mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-chip-fade)), transparent);
        mask: linear-gradient(to right, var(--s-opaque) calc(100% - var(--s-chip-fade)), transparent);
    }
    .cf-chips::-webkit-scrollbar { display: none; }
    .cf-chips li { flex: none; scroll-snap-align: start; }
}

/* ---- #unwrap: THE UNWRAP ------------------------------------------------------------ *
 * --s-unwrap (0 -> 1, registered in tokens.css) carries every point of the cone out to the
 * frame edge. Default = 1, the open end state (reduced motion, no support, no JS). A CSS
 * view timeline drives it where supported; site's home.js scrubs it with GSAP elsewhere.  */
/* At rest (reduced motion, no support, no JS) the section is one screen showing the open end
 * state. When it moves, the wrapper grows to --s-unwrap-track and the stage sticks under the
 * nav: three beats (Grown, Made, Delivered) run across that pinned stretch.                 */
@keyframes cf-unwrap { from { --s-unwrap: 0; } to { --s-unwrap: 1; } }
.cf-unwrap {
    --s-unwrap: 1;
    --s-release: clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1);   /* beat 3's progress */
    position: relative; background: var(--s-tissue-deep); }
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .cf-unwrap { height: var(--s-unwrap-track); animation: cf-unwrap linear both; animation-timeline: view(); animation-range: var(--s-unwrap-range); }
        .cf-unwrap .cf-unwrap__stage { position: sticky; top: var(--s-nav-h); }
    }
}
.cf-unwrap.is-scrub { height: var(--s-unwrap-track); animation: none; }
.cf-unwrap.is-scrub .cf-unwrap__stage { position: sticky; top: var(--s-nav-h); }

.cf-unwrap__stage { position: relative; height: var(--s-unwrap-stage-h); overflow: hidden; }
.cf-unwrap__photo { position: absolute; inset: 0; }
.cf-unwrap__cone, .cf-unwrap__paper {
    position: absolute; inset: 0;
    clip-path: polygon(
        calc((var(--s-unwrap-box-l) + var(--s-cone-left-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-lip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 50% * var(--s-unwrap))
            calc((var(--s-unwrap-box-t) + (var(--s-cone-lip-y) + var(--s-cone-flare)) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + var(--s-cone-right-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-lip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap))),
        calc((var(--s-unwrap-box-l) + (var(--s-cone-right-x) - var(--s-cone-shoulder-in)) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-shoulder-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + var(--s-cone-shoulder-y) * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap) + var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) + 50% * var(--s-unwrap))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + var(--s-cone-tip-x) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-tip-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + 100% * var(--s-unwrap)),
        calc((var(--s-unwrap-box-l) + (var(--s-cone-left-x) + var(--s-cone-shoulder-in)) * var(--s-unwrap-box-w)) * (1 - var(--s-unwrap)) - var(--s-unwrap-band))
            calc((var(--s-unwrap-box-t) + var(--s-cone-shoulder-y) * var(--s-unwrap-box-h)) * (1 - var(--s-unwrap)) + var(--s-cone-shoulder-y) * var(--s-unwrap))
    );
}
.cf-unwrap__cone picture { position: absolute; inset: 0; }
.cf-unwrap__img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: var(--s-doorstep-pos);
    transform: scale(calc(var(--s-unwrap-scale-from) + (var(--s-unwrap-scale-to) - var(--s-unwrap-scale-from)) * var(--s-unwrap)));
}
/* The wrap: kraft paper one band wider than the cone on both sides; it travels out with the
   cone's edges and leaves the frame as the bouquet opens. */
.cf-unwrap__paper { background: linear-gradient(var(--s-paper-angle), var(--s-kraft), var(--s-kraft-shade)); }
/* Frame 0's crease: the cone as a twine line. It fades out by beat 2 and is never part of the
   open end state (reduced motion, no support, no JS: --s-unwrap = 1 there, so opacity is 0). */
.cf-unwrap__outline {
    position: absolute; overflow: visible; pointer-events: none;
    left: var(--s-unwrap-box-l); top: var(--s-unwrap-box-t);
    width: calc(var(--s-unwrap-box-w) * 100%); height: calc(var(--s-unwrap-box-h) * 100%);
    fill: none; stroke: var(--s-tissue); stroke-width: var(--s-cone-outline-w);
    vector-effect: non-scaling-stroke; stroke-linejoin: round;
    opacity: calc(1 - clamp(0, var(--s-unwrap) / var(--s-line-2-at), 1));
}
/* Beat 3: the arrival at display size over the photo's lower-left, on its own scrim. */
.cf-unwrap__arrive {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
    padding: var(--s-arrive-pad-top) var(--s-arrive-pad-end) var(--s-space-xl) var(--s-gutter-wide);
    background: linear-gradient(to top, var(--s-scrim) var(--s-arrive-solid), transparent);
    color: var(--s-tissue); 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);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
    text-wrap: balance; max-width: none;
    opacity: var(--s-release);
}
/* rev 6 — the release, FLIP: the words start where the card's third line sat (--s-flip-*, measured
   by home.js) at its size, and travel out to the display line. Without JS the offsets are 0: a plain fade. */
.cf-unwrap__arrive-words {
    display: inline-block; transform-origin: 0 0;
    translate: calc((1 - var(--s-release)) * var(--s-flip-x)) calc((1 - var(--s-release)) * var(--s-flip-y) + (1 - var(--s-release)) * var(--s-arrive-rise));
    scale: calc(1 - (1 - var(--s-release)) * (1 - var(--s-flip-s)));
}
/* The third line in the card: present while the cone is closed, it leaves as the release starts and
   is collapsed in the open end state, so the card lists two lines and the display line says the third once. */
.cf-unwrap__line--leaving {
    overflow: hidden; opacity: calc(1 - var(--s-release) * 2);
    max-height: calc((1 - var(--s-release)) * var(--s-leaving-h));
}
.cf-unwrap.is-measuring .cf-unwrap__line--leaving { max-height: none; }
.cf-unwrap.is-measuring .cf-unwrap__arrive-words { translate: none; scale: none; }

.cf-unwrap__outline polygon { vector-effect: non-scaling-stroke; }

.cf-unwrap__tag {
    position: absolute; left: var(--s-gutter-wide); top: var(--s-space-xl); z-index: 2;
    width: var(--s-unwrap-tag-w); display: grid; gap: var(--s-space-m); justify-items: start;
}
.cf-unwrap__title { max-width: none; }
.cf-unwrap__lines { display: grid; gap: var(--s-space-3xs); width: 100%; }
.cf-unwrap__line > * {
    display: flex; align-items: center; gap: var(--s-space-xs); min-height: var(--s-tap); padding-block: var(--s-space-3xs);
    text-decoration: none; font-weight: var(--s-w-heading); font-size: var(--s-size-h2); line-height: var(--s-leading-heading);
    font-variation-settings: "opsz" var(--s-opsz-display), "wdth" var(--s-wdth-display);
    box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-rule);
}
.cf-unwrap__line a:hover { text-decoration: underline; text-underline-offset: var(--s-space-3xs); }
/* Each line lights in turn as the cone opens: muted ink (still AA) to full ink + its dot. */
.cf-unwrap__line--1 a { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-1-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--2 a { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-2-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--3 > * { color: color-mix(in srgb, var(--s-ink) calc(clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1) * 100%), var(--s-ink-muted)); }
.cf-unwrap__line--1 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-1-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__line--2 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-2-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__line--3 .cf-dot { transform: scale(clamp(0, (var(--s-unwrap) - var(--s-line-3-at)) * var(--s-line-ramp), 1)); }
.cf-unwrap__cta { margin-top: var(--s-space-2xs); }
/* The order link that travels with the display line: only while the scene moves (at rest the
   card keeps its own, so the open end state never shows two). */
.cf-unwrap__arrive-cta { display: none; width: max-content; margin-top: var(--s-space-m); pointer-events: auto; }

/* Desktop, while the scene moves: each beat is ONE composition. Beats 1 and 2 = the card as a
   full-height column on the left beside the cone; beat 3 = the card gone, the photo whole, the
   display line and its order link in the space the card left. The card is fully faded before the
   line is seen (--s-card-out / --s-line-in), so the two never share the screen. */
@media (min-width: 48rem) {
    .cf-unwrap.is-scrub .cf-unwrap__tag {
        top: var(--s-space-xl); bottom: var(--s-space-xl); align-content: center;
        opacity: calc(1 - var(--s-release) * var(--s-card-out));
    }
    .cf-unwrap.is-scrub .cf-unwrap__arrive { opacity: calc((var(--s-release) - var(--s-line-in)) / (1 - var(--s-line-in))); }
    .cf-unwrap.is-scrub .cf-unwrap__arrive-cta { display: flex; }
    .cf-unwrap.is-scrub .cf-unwrap__tag:focus-within, .cf-unwrap.is-scrub .cf-unwrap__arrive:focus-within { opacity: 1; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
        .cf-unwrap .cf-unwrap__tag {
            top: var(--s-space-xl); bottom: var(--s-space-xl); align-content: center;
            opacity: calc(1 - var(--s-release) * var(--s-card-out));
        }
        .cf-unwrap .cf-unwrap__arrive { opacity: calc((var(--s-release) - var(--s-line-in)) / (1 - var(--s-line-in))); }
        .cf-unwrap .cf-unwrap__arrive-cta { display: flex; }
        .cf-unwrap .cf-unwrap__tag:focus-within, .cf-unwrap .cf-unwrap__arrive:focus-within { opacity: 1; }
    }
}

@media (max-width: 47.99rem) {
    /* Phones: the photo above, the three lines BELOW it on tissue (never over it). */
    .cf-unwrap__stage { display: flex; flex-direction: column; }
    .cf-unwrap__photo { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
    .cf-unwrap__img { object-position: var(--s-doorstep-pos-phone); }
    .cf-unwrap__tag {
        position: relative; left: auto; top: auto; transform: none; width: auto;
        margin: calc(var(--s-space-l) * -1) var(--s-gutter) calc(var(--s-bar-h) + var(--s-space-xs) + env(safe-area-inset-bottom)); gap: var(--s-space-xs);
    }
    .cf-unwrap__line > * { font-size: var(--s-size-h3); min-height: var(--s-tap); padding-block: 0; }
    .cf-unwrap__arrive { padding: var(--s-arrive-pad-top) var(--s-gutter) calc(var(--s-space-l) + var(--s-space-m)); }
}

/* ---- #buckets: IN THE BUCKETS --------------------------------------------------------- */
.cf-buckets { padding-top: var(--s-space-2xl); background: var(--s-tissue-deep); overflow: hidden; }
.cf-buckets__head {
    display: grid; grid-template-columns: repeat(var(--s-grid-cols), minmax(0, 1fr)); align-items: end;
    gap: var(--s-space-s) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto; padding-inline: var(--s-gutter-wide);
}
.cf-buckets__head .cf-h2 { grid-column: 1 / span 5; }
.cf-buckets__head .cf-lede { grid-column: 6 / span 5; }
.cf-buckets__head .cf-rail-ctrl { grid-column: 11 / -1; justify-self: end; }
.cf-buckets__strip { height: var(--s-strip-h); margin-top: var(--s-space-l); }
.cf-buckets__strip .cf-photo { object-position: var(--s-buckets-pos); }
.cf-buckets .cf-rail { margin-top: calc(var(--s-rail-overlap) * -1); }

/* (.cf-stem / .cf-piece cards are shared: site.css) */
@media (max-width: 63.99rem) {
    .cf-buckets__head .cf-h2, .cf-buckets__head .cf-lede { grid-column: 1 / -1; }
    .cf-buckets__head .cf-rail-ctrl { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 47.99rem) {
    .cf-buckets__head { padding-inline: var(--s-gutter); }
    .cf-buckets__head .cf-rail-ctrl { display: none; }
}

/* ---- #worlds: one house, every reason (ART DIRECTOR rev 5) -------------------------------
   An editorial index, not a stack of tags: one large photo per world, its name at display size
   set straight on the tissue ground, one line and an underline link. The first world (the
   nursery: the grower's own strelitzia) is the full-width lead; the rest pair two to a row.
   Phone: one horizontal snap row, the next world's photo showing at the edge. ------------- */
.cf-worlds { padding: var(--s-space-section) var(--s-gutter-wide) var(--s-space-xl); background: var(--s-tissue); }
.cf-worlds__title { max-width: var(--s-max); margin: 0 auto var(--s-space-xl); }
.cf-worlds__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-space-2xl) var(--s-grid-gap); max-width: var(--s-max); margin-inline: auto;
    list-style: none; padding: 0;
}
.cf-world--lead { grid-column: 1 / -1; }
.cf-world__link {
    display: grid; gap: var(--s-space-2xs); justify-items: start;
    color: var(--s-ink); text-decoration: none;
}
.cf-world__photo {
    position: relative; display: block; width: 100%; overflow: hidden;
    aspect-ratio: var(--s-ratio-world); margin-bottom: var(--s-space-s);
}
.cf-world--lead .cf-world__photo { aspect-ratio: var(--s-ratio-world-lead); }
.cf-world__photo picture { position: absolute; inset: 0; }
.cf-world__photo .cf-photo { transition: transform var(--s-dur-reveal) var(--s-ease-out); }
.cf-world__name {
    font-weight: var(--s-w-display); font-size: var(--s-size-world-name); 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-world--lead .cf-world__name { font-size: var(--s-size-doorway); }
.cf-world__line { max-width: var(--s-measure-lede); font-size: var(--s-size-lede); color: var(--s-ink-muted); }
.cf-world__go {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-weight: var(--s-w-semi); color: var(--s-link);
    text-decoration: underline; text-decoration-thickness: var(--s-link-line-w); text-underline-offset: var(--s-link-offset);
}
@media (hover: hover) {
    .cf-world__link:hover .cf-photo { transform: scale(var(--s-photo-scale-to)); }
    .cf-world__link:hover .cf-world__go { text-decoration-thickness: var(--s-notch); }
}
.cf-world__link:focus-visible { outline-offset: var(--s-focus-w); }
.cf-world__tag { display: contents; }

/* Desktop (round 5): the five worlds as ONE composed spread, a florist's window of five panes: the nursery
   tall on the left, the rest set round it at four sizes. Each pane is the photograph with its name, line and
   link on a tissue tag cut at its foot (the house's tag language), its number punched in the corner. */
.cf-worlds__head { max-width: var(--s-max); margin: 0 auto var(--s-space-xl); display: grid; gap: var(--s-space-s); }
.cf-worlds__head .cf-worlds__title { margin: 0; }
.cf-worlds__lede { max-width: var(--s-measure-lede); font-size: var(--s-size-lede); color: var(--s-ink-muted); }
@media (min-width: 64rem) {
    .cf-worlds__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
    .cf-worlds__lede { justify-self: end; text-align: right; }
    .cf-worlds__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--s-world-row));
        grid-template-areas:
            "n n n n w w w w w v v v"
            "n n n n o o o s s s s s";
        gap: var(--s-world-gap);
    }
    .cf-world { position: relative; min-width: 0; }
    .cf-world--nursery { grid-area: n; } .cf-world--weddings { grid-area: w; } .cf-world--valentines { grid-area: v; }
    .cf-world--occasions { grid-area: o; } .cf-world--shop { grid-area: s; }
    .cf-world__link { position: relative; display: block; height: 100%; overflow: hidden; color: var(--s-ink); }
    .cf-world__photo, .cf-world--lead .cf-world__photo { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
    .cf-world::before {
        content: attr(data-n); position: absolute; z-index: 2; top: var(--s-space-s); left: var(--s-space-s);
        display: grid; place-items: center; width: var(--s-world-stamp); height: var(--s-world-stamp); border-radius: 50%;
        background: var(--s-tissue); color: var(--s-ink);
        font-weight: var(--s-w-semi); font-size: var(--s-size-small); font-variant-numeric: tabular-nums;
    }
    .cf-world__tag {
        position: absolute; z-index: 1; left: var(--s-space-s); bottom: var(--s-space-s);
        max-width: min(calc(100% - 2 * var(--s-space-s)), var(--s-world-tag-max));
        display: grid; gap: var(--s-space-3xs); justify-items: start;
        padding: var(--s-space-s) calc(var(--s-space-m) + var(--s-world-tag-cut)) var(--s-space-3xs) var(--s-space-m);
        background: var(--s-tissue); box-shadow: var(--s-world-tag-shadow);
        clip-path: polygon(0 0, calc(100% - var(--s-world-tag-cut)) 0, 100% var(--s-world-tag-cut), 100% 100%, 0 100%);
        transition: transform var(--s-dur-swap) var(--s-ease-out);
    }
    .cf-world__name, .cf-world--lead .cf-world__name { font-size: var(--s-size-world-tile); }
    .cf-world__line { font-size: var(--s-size-small); max-width: var(--s-measure-lede); color: var(--s-ink-muted); }
    @media (hover: hover) {
        .cf-world__link:hover .cf-world__tag { transform: translateY(calc(var(--s-space-2xs) * -1)); }
    }
    .cf-world__count { position: absolute; z-index: 2; top: var(--s-space-s); right: var(--s-space-s); }
}
@media (max-width: 47.99rem) {
    .cf-worlds { padding-inline: var(--s-gutter); }
    .cf-worlds__grid {
        display: flex; gap: var(--s-space-m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(var(--s-gutter) * -1); padding-inline: var(--s-gutter); scroll-padding-inline: var(--s-gutter);
    }
    .cf-worlds__grid::-webkit-scrollbar { display: none; }
    .cf-world { flex: none; width: var(--s-world-card-phone); scroll-snap-align: start; }
    .cf-world__photo, .cf-world--lead .cf-world__photo { aspect-ratio: var(--s-ratio-world-phone); }
    .cf-world--lead .cf-world__name { font-size: var(--s-size-world-name); }
}

/* ---- #how: one line, one link. The steps themselves are order/'s hero. ------------------- */
.cf-how { padding-inline: var(--s-gutter-wide); background: var(--s-field); color: var(--s-on-field); }
.cf-how__band {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-xs) var(--s-space-l);
    max-width: var(--s-max); margin-inline: auto; padding-block: var(--s-space-l);
    color: inherit; text-decoration: none;
}
.cf-how__title { color: var(--s-on-field); }
.cf-how__steps { flex: 1 1 auto; color: var(--s-on-field-muted); }
.cf-how__band:hover .cf-how__steps { text-decoration: underline; text-underline-offset: var(--s-space-3xs); }
.cf-how__band:focus-visible { outline: var(--s-focus-w) solid var(--s-focus-on-field); outline-offset: calc(var(--s-focus-offset) * -1); }
@media (max-width: 47.99rem) {
    .cf-how { padding-inline: var(--s-gutter); }
}