/* Fernhallow: layout and craft. Every value comes from assets/tokens.css.
 *
 * Reading order: base · chrome (nav, sheet) · 1 arrival · 2 this week's cut ·
 * 3 weddings · 4 standing orders · 5 the garden · 6 the gift tag · footer ·
 * phone composition · motion (only when the visitor allows it).
 *
 * The signature: with JS + motion, the cut section paints the live pair
 * (--s-ground / --s-on-ground) chosen by site.js; without them, every variety
 * paints its own pair, a striped bed of colour, which is the designed static state.
 */

/* ---- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    background: var(--s-cream);
}
body {
    margin: 0;
    background: var(--s-cream);
    color: var(--s-ink);
    font: var(--s-weight-regular) var(--s-step-body)/var(--s-leading-body) var(--s-font-body);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible {
    outline: var(--s-focus-ring) solid var(--s-focus);
    outline-offset: var(--s-focus-offset);
}

/* Anchors land below the sticky nav (iOS Safari honours scroll-margin on the target more reliably than scroll-padding). */
[id] { scroll-margin-top: var(--s-anchor-offset); }

.fh-wrap {
    width: 100%;
    max-width: var(--s-max);
    margin-inline: auto;
    padding-inline: var(--s-gutter);
}
.fh-num { font-variant-numeric: var(--s-num); }
.fh-skip {
    position: absolute; left: var(--s-space-s); top: var(--s-space-s); z-index: var(--s-z-sheet);
    padding: var(--s-space-xs) var(--s-space-s);
    background: var(--s-raspberry); color: var(--s-cream);
    transform: translateY(-200%);
}
.fh-skip:focus-visible { transform: none; outline-color: var(--s-ink); }

.fh-kicker {
    margin-bottom: var(--s-space-s);
    color: var(--s-raspberry);
    font: var(--s-weight-semi) var(--s-step-kicker)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-kicker);
}
.fh-h2 {
    font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display);
    letter-spacing: var(--s-track-display);
    text-wrap: balance;
}
.fh-h3 {
    font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display);
}
.fh-body { max-width: var(--s-measure-narrow); color: var(--s-ink-muted); text-wrap: pretty; }

/* Text link: green, an underline that thickens on hover. */
.fh-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    color: var(--s-link);
    font-weight: var(--s-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: var(--s-underline);
    text-underline-offset: var(--s-underline-offset);
    transition: text-decoration-thickness var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease);
}
.fh-link:hover { color: var(--s-link-hover); text-decoration-thickness: var(--s-underline-hover); }

/* The leaf button: top-left and bottom-right radiused, the other two square. */
.fh-leaf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--s-btn-h);
    padding: 0 var(--s-btn-pad-x);
    border: 0;
    border-radius: var(--s-leaf) 0 var(--s-leaf) 0;
    background: var(--s-btn-bg);
    color: var(--s-btn-ink);
    font: var(--s-weight-semi) var(--s-step-body)/var(--s-leading-solid) var(--s-font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--s-dur-ui) var(--s-ease), border-radius var(--s-dur-lift) var(--s-ease);
}
.fh-leaf:hover { background: var(--s-btn-bg-hover); }

/* ---- Chrome: nav + menu sheet ----------------------------------------------- */
.fh-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);
    background: var(--s-nav-bg);
    color: var(--s-nav-ink);
    border-bottom: var(--s-hairline) solid var(--s-rule);
}
.fh-wordmark {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    margin-right: auto;
    font: italic var(--s-weight-display) var(--s-step-logo)/var(--s-leading-solid) var(--s-font-display);
    letter-spacing: var(--s-track-logo);
    text-decoration: none;
    color: var(--s-ink);
}
.fh-nav__links ul { display: flex; gap: var(--s-space-l); }
.fh-nav__link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font-size: var(--s-step-small);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--s-underline);
    text-underline-offset: var(--s-underline-offset);
    transition: text-decoration-color var(--s-dur-ui) var(--s-ease);
}
.fh-nav__link:hover { text-decoration-color: var(--s-green); }
.fh-leaf--nav { min-height: var(--s-tap); font-size: var(--s-step-small); }
.fh-nav__menu {
    display: inline-flex; align-items: center; gap: var(--s-space-2xs);
    min-height: var(--s-tap); min-width: var(--s-tap);
    padding: 0 var(--s-space-2xs);
    border: 0; background: transparent; cursor: pointer;
    font-size: var(--s-step-small); font-weight: var(--s-weight-medium);
}
.fh-nav__menu[hidden] { display: none; }
.fh-burger { display: grid; gap: var(--s-burger-gap); width: var(--s-burger-w); }
.fh-burger span { display: block; height: var(--s-hairline); background: currentColor; }
.fh-burger span + span { width: 66%; }

.fh-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--s-cream); color: var(--s-ink);
}
.fh-sheet::backdrop { background: var(--s-scrim); }
.fh-sheet__inner {
    display: flex; flex-direction: column; gap: var(--s-space-l);
    min-height: 100%;
    padding: var(--s-space-2xs) var(--s-gutter) var(--s-sheet-pad);
}
.fh-sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--s-nav-h-mobile); }
.fh-sheet__close {
    min-height: var(--s-tap); min-width: var(--s-tap);
    border: 0; background: transparent; cursor: pointer;
    font-size: var(--s-step-small); font-weight: var(--s-weight-medium);
    text-decoration: underline; text-underline-offset: var(--s-underline-offset);
}
.fh-sheet__list { display: grid; gap: var(--s-space-2xs); }
.fh-sheet__list a {
    display: flex; align-items: center; min-height: var(--s-tap);
    padding-block: var(--s-space-2xs);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    font: italic var(--s-weight-display) var(--s-step-sheet)/var(--s-leading-heading) var(--s-font-display);
    text-decoration: none;
}
.fh-sheet__foot { display: grid; gap: var(--s-space-s); margin-top: auto; }
.fh-sheet__note { color: var(--s-ink-muted); font-size: var(--s-step-small); }

/* ---- 1. Arrival: the bucket line-up ---------------------------------------
   One grid: the dahlia takes two of six tracks and the full height (the LCP and the brand
   colour); the four narrow stems step down left to right; the type row nests under them,
   so the headline sits level with the dahlia's lower half on plain cream (no text on a photo). */
.fh-arrival {
    display: grid;
    grid-template-columns: var(--s-lineup-tracks);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--s-lineup-gap);
    height: calc(100vh - var(--s-ribbon-h-live) - var(--s-nav-h));
    height: calc(100svh - var(--s-ribbon-h-live) - var(--s-nav-h));
    min-height: var(--s-hero-min);
    padding: var(--s-hero-pad-top) var(--s-gutter) var(--s-hero-pad-bottom);
    scroll-margin-top: var(--s-nav-h);
}
.fh-lineup {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    counter-reset: fh-bucket;
}
.fh-bucket { grid-row: 1; display: flex; min-height: 0; padding-top: var(--drop); counter-increment: fh-bucket; }
.fh-bucket--lead { grid-row: 1 / -1; }
.fh-bucket__fig { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.fh-bucket__photo {
    position: relative; flex: 1 1 0; min-height: 0;
    overflow: hidden;
    border-radius: var(--s-radius);
    background: var(--s-cream-deep);
}
.fh-bucket--lead .fh-bucket__photo { border-radius: var(--s-leaf) 0 var(--s-leaf) 0; }
.fh-bucket__photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--s-bucket-pos);
}
.fh-bucket__label {
    display: grid;
    padding-top: var(--s-label-gap);
    font-size: var(--s-step-micro);
    line-height: var(--s-leading-tight);
    letter-spacing: var(--s-track-micro);
}
.fh-bucket__name { font-weight: var(--s-weight-semi); color: var(--s-ink); }
.fh-bucket__name::before {
    content: counter(fh-bucket, decimal-leading-zero);
    margin-right: var(--s-space-2xs);
    color: var(--s-raspberry);
    font-variant-numeric: var(--s-num);
}
.fh-bucket__note { color: var(--s-ink-muted); }
.fh-bucket__short { display: none; }
.fh-bucket__name, .fh-bucket__note { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.fh-arrival__type {
    position: relative; z-index: 1;
    grid-column: 2 / -1;
    grid-row: 2;
    display: grid;
    gap: var(--s-space-m);
    padding: var(--s-hero-row-gap-top) 0 0 var(--s-hero-type-gap);
}
.fh-arrival__main { display: grid; gap: var(--s-space-xs); }
.fh-arrival__title {
    font: var(--s-weight-display) var(--s-step-hero)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
    white-space: nowrap;
}
.fh-arrival__side {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--s-space-s) var(--s-space-l);
}
.fh-arrival__lede {
    max-width: var(--s-measure-lede);
    font: italic var(--s-weight-display) var(--s-step-lede)/var(--s-leading-tight) var(--s-font-display);
}
.fh-arrival__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-2xs) var(--s-space-m); }
.fh-stamp {
    color: var(--s-ink-muted);
    font-size: var(--s-step-micro);
    letter-spacing: var(--s-track-micro);
    font-variant-numeric: var(--s-num);
}
.fh-stamp time { color: var(--s-ink); font-weight: var(--s-weight-semi); }

/* ---- 2. This week's cut ---------------------------------------------------- */
.fh-cut {
    background: var(--s-ground);
    color: var(--s-on-ground);
    transition: background-color var(--s-dur-tone) var(--s-ease-soft), color var(--s-dur-tone) var(--s-ease-soft);
}
.fh-cut :focus-visible { outline-color: currentColor; }
.fh-cut .fh-kicker { color: inherit; }
.fh-cut__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--s-cut-card-w));
    align-items: end;
    gap: var(--s-space-m) var(--s-space-xl);
    padding-block: var(--s-section) var(--s-section-tight);
}
.fh-cut__intro { color: inherit; }
.fh-cut__index { grid-column: 1 / -1; }
.fh-cut__index ol {
    display: flex; flex-wrap: wrap; gap: 0 var(--s-space-l);
    padding-top: var(--s-space-s);
    border-top: var(--s-hairline) solid color-mix(in srgb, currentColor var(--s-rule-mix), transparent);
}
.fh-cut__index a {
    display: inline-flex; align-items: center; gap: var(--s-space-2xs);
    min-height: var(--s-tap);
    font: italic var(--s-weight-display) var(--s-step-lede)/var(--s-leading-tight) var(--s-font-display);
    text-decoration: none;
}
.fh-cut__index a:hover { text-decoration: underline; text-underline-offset: var(--s-underline-offset); }
.fh-dot {
    width: var(--s-dot); height: var(--s-dot);
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 0 var(--s-hairline) color-mix(in srgb, currentColor var(--s-rule-mix), transparent);
}

.fh-variety {
    display: grid;
    grid-template-columns: fit-content(var(--s-cut-photo-cap)) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-cut-gap);
    min-height: var(--s-cut-band-h);
    padding-inline: var(--s-gutter);
    max-width: var(--s-max-wide);
    margin-inline: auto;
    scroll-margin-top: var(--s-nav-h);
    transition: background-color var(--s-dur-tone) var(--s-ease-soft), color var(--s-dur-tone) var(--s-ease-soft);
}
/* Static state (no JS / reduced motion): each variety paints its own pair. */
.fh-variety[data-tone="dahlia"]  { background: var(--s-tone-dahlia-ground);  color: var(--s-tone-dahlia-ink); }
.fh-variety[data-tone="rose"]    { background: var(--s-tone-rose-ground);    color: var(--s-tone-rose-ink); }
.fh-variety[data-tone="cosmos"]  { background: var(--s-tone-cosmos-ground);  color: var(--s-tone-cosmos-ink); }
.fh-variety[data-tone="aster"]   { background: var(--s-tone-aster-ground);   color: var(--s-tone-aster-ink); }
.fh-variety[data-tone="foliage"] { background: var(--s-tone-foliage-ground); color: var(--s-tone-foliage-ink); }
.fh-variety[data-tone="seed"]    { background: var(--s-tone-seed-ground);    color: var(--s-tone-seed-ink); }
/* Live state: the whole section takes the pair of the variety on the reading line. */
.fh-tone-live .fh-variety { background: transparent; color: inherit; }
.fh-cut[data-active="dahlia"]  { --s-ground: var(--s-tone-dahlia-ground);  --s-on-ground: var(--s-tone-dahlia-ink); }
.fh-cut[data-active="rose"]    { --s-ground: var(--s-tone-rose-ground);    --s-on-ground: var(--s-tone-rose-ink); }
.fh-cut[data-active="cosmos"]  { --s-ground: var(--s-tone-cosmos-ground);  --s-on-ground: var(--s-tone-cosmos-ink); }
.fh-cut[data-active="aster"]   { --s-ground: var(--s-tone-aster-ground);   --s-on-ground: var(--s-tone-aster-ink); }
.fh-cut[data-active="foliage"] { --s-ground: var(--s-tone-foliage-ground); --s-on-ground: var(--s-tone-foliage-ink); }
.fh-cut[data-active="seed"]    { --s-ground: var(--s-tone-seed-ground);    --s-on-ground: var(--s-tone-seed-ink); }

/* The stage holds one photograph per band, framed three ways (content.php 'frame'):
   dominant = the full band height, bleeding off the page edge; detail = ~70% of the band;
   tall = a 1:2 slot. Detail and tall sit on the page margin. The photograph column is sized
   to the photograph, so the gap to the card is always --s-cut-gap. Side 'a' puts the
   photograph left; side 'b' (every second band) mirrors the band (desktop; tablet and phone stack). */
.fh-variety__stage {
    display: flex;
    align-self: stretch;
    min-width: 0;  /* lets the capped photograph column clamp the photograph instead of overflowing the card */
    align-items: center;
    justify-content: flex-start;
    min-height: var(--s-cut-band-h);
    padding-block: var(--s-cut-pad-y);
}
.fh-variety__photo {
    height: var(--s-cut-photo-h);
    aspect-ratio: var(--s-cut-photo-ratio);
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--s-radius);
}
.fh-variety[data-frame="dominant"] .fh-variety__stage {
    padding-block: 0;
    margin-left: calc(-1 * var(--s-gutter));
}
.fh-variety[data-frame="dominant"] .fh-variety__photo { height: var(--s-cut-band-h); border-radius: 0; }
.fh-variety[data-frame="detail"] .fh-variety__photo { height: var(--s-cut-detail-h); }
@media (min-width: 1024px) {
    .fh-variety[data-side="b"] { grid-template-columns: minmax(0, 1fr) fit-content(var(--s-cut-photo-cap)); }
    .fh-variety[data-side="b"] > .fh-variety__stage { grid-column: 2; grid-row: 1; justify-content: flex-end; }
    .fh-variety[data-side="b"] > .fh-variety__card { grid-column: 1; grid-row: 1; justify-self: end; }
    .fh-variety[data-side="b"][data-frame="dominant"] .fh-variety__stage { margin-left: 0; margin-right: calc(-1 * var(--s-gutter)); }
}
.fh-variety[data-frame="tall"] .fh-variety__photo { aspect-ratio: var(--s-cut-tall-ratio); }
.fh-variety__photo picture, .fh-variety__photo img { width: 100%; height: 100%; }
.fh-variety__photo img { object-fit: cover; }
.fh-variety__card { display: grid; gap: var(--s-space-m); max-width: var(--s-cut-card-w); width: 100%; }
.fh-variety__count {
    font-size: var(--s-step-count);
    font-weight: var(--s-weight-semi);
    letter-spacing: var(--s-track-kicker);
}
.fh-variety__name {
    font: italic var(--s-weight-display) var(--s-step-variety)/var(--s-leading-display) var(--s-font-display);
    letter-spacing: var(--s-track-display);
}
.fh-variety__colour { margin-top: calc(-1 * var(--s-space-xs)); font-size: var(--s-step-lede); }
.fh-cutlist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: var(--s-hairline) solid color-mix(in srgb, currentColor var(--s-rule-mix), transparent);
}
.fh-cutlist > div {
    display: grid; gap: var(--s-space-3xs);
    padding: var(--s-space-s) 0;
    border-bottom: var(--s-hairline) solid color-mix(in srgb, currentColor var(--s-rule-mix), transparent);
}
.fh-cutlist > div:first-child { padding-right: var(--s-space-s); border-right: var(--s-hairline) solid color-mix(in srgb, currentColor var(--s-rule-mix), transparent); }
.fh-cutlist > div:nth-child(2) { padding-left: var(--s-space-m); }
.fh-cutlist__going { grid-column: 1 / -1; }
.fh-cutlist dt {
    font-size: var(--s-step-micro);
    font-weight: var(--s-weight-semi);
    letter-spacing: var(--s-track-kicker);
}
.fh-cutlist dd { font-size: var(--s-step-h3); line-height: var(--s-leading-tight); }
.fh-cutlist__going dd { font-size: var(--s-step-body); line-height: var(--s-leading-body); }
.fh-variety__note {
    max-width: var(--s-measure-lede);
    font: italic var(--s-weight-display) var(--s-step-lede)/var(--s-leading-tight) var(--s-font-display);
}

/* Static state (no JS / reduced motion) on desktop: a striped bed of colour. Each band is its
   content plus one step above and below, not a screen, so no photograph floats in a field of
   colour. Every photograph stays inside its own band. */
@media (min-width: 1024px) {
    :root:not(.fh-tone-live) .fh-variety { min-height: 0; padding-block: var(--s-cut-static-pad); }
    :root:not(.fh-tone-live) .fh-variety__stage { min-height: 0; padding-block: 0; }
    :root:not(.fh-tone-live) .fh-variety[data-frame="dominant"] .fh-variety__photo,
    :root:not(.fh-tone-live) .fh-variety[data-frame="tall"] .fh-variety__photo { height: var(--s-cut-static-photo-h); }
    :root:not(.fh-tone-live) .fh-variety[data-frame="detail"] .fh-variety__photo { height: var(--s-cut-static-detail-h); }
}

/* ---- 3. Weddings ------------------------------------------------------------ */
.fh-weddings { padding-block: var(--s-section) var(--s-section-tight); }
.fh-weddings__head, .fh-orders__head, .fh-garden__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--s-cut-card-w));
    align-items: end;
    gap: var(--s-space-m) var(--s-space-xl);
    margin-bottom: var(--s-space-xl);
}
.fh-weddings__head .fh-h2, .fh-orders__head .fh-h2, .fh-garden__head .fh-h2 { max-width: var(--s-measure-narrow); }
.fh-weddings__spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--s-wed-small-w);
    grid-template-areas: "large smalls" "detail smalls";
    gap: var(--s-space-l) var(--s-space-xl);
    align-items: start;
}
.fh-weddings__large { grid-area: large; overflow: hidden; border-radius: var(--s-radius); aspect-ratio: var(--s-garden-ratio); }
.fh-weddings__large picture, .fh-weddings__large img { width: 100%; height: 100%; object-fit: cover; }
.fh-weddings__smalls { grid-area: smalls; display: grid; align-content: start; gap: var(--s-space-l); }
.fh-weddings__small { overflow: hidden; border-radius: var(--s-radius); }
.fh-weddings__detail {
    grid-area: detail;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-space-m) var(--s-space-xl);
}
.fh-weddings__detail .fh-h3 { grid-column: 1 / -1; }
.fh-includes { counter-reset: fh-inc; border-top: var(--s-hairline) solid var(--s-rule); }
.fh-includes li {
    counter-increment: fh-inc;
    display: grid; grid-template-columns: var(--s-space-l) 1fr;
    padding: var(--s-space-xs) 0;
    border-bottom: var(--s-hairline) solid var(--s-rule);
    font-size: var(--s-step-small);
}
.fh-includes li::before {
    content: counter(fh-inc, decimal-leading-zero);
    color: var(--s-raspberry);
    font-size: var(--s-step-micro);
    font-weight: var(--s-weight-semi);
    font-variant-numeric: var(--s-num);
    padding-top: var(--s-space-3xs);
}
.fh-prices { display: grid; gap: var(--s-space-m); align-content: start; }
.fh-prices > div { padding-top: var(--s-space-xs); border-top: var(--s-hairline) solid var(--s-rule-strong); }
.fh-prices dt { font-size: var(--s-step-micro); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-kicker); }
.fh-prices__value {
    color: var(--s-raspberry);
    font: var(--s-weight-display) var(--s-step-price)/var(--s-leading-heading) var(--s-font-display);
}
.fh-prices__note { color: var(--s-ink-muted); font-size: var(--s-step-small); }
.fh-weddings__detail .fh-includes { grid-row: 2 / span 2; }
/* The ask sits under the prices, level with the end of the list, so the spread closes square. */
.fh-weddings__cta { grid-column: 2; grid-row: 3; align-self: end; }

/* ---- 4. Standing orders: the delivery round ------------------------------------
   One ruled list, set like the cutting list it is: when the van calls, where, how often,
   from what. A rail joins the stops; each thumbnail grows when its row is hovered or focused. */
.fh-orders { padding-block: var(--s-section-tight) var(--s-section); }
.fh-round__heads, .fh-round__row {
    display: grid;
    grid-template-columns: var(--s-round-cols);
    column-gap: var(--s-space-l);
}
.fh-round__heads {
    padding-bottom: var(--s-space-xs);
    border-bottom: var(--s-hairline) solid var(--s-rule-strong);
    color: var(--s-ink-muted);
    font-size: var(--s-step-micro); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-kicker);
}
.fh-round__heads span:last-child { justify-self: end; }
.fh-round__list { counter-reset: fh-stop; }
.fh-round__row {
    position: relative;
    align-items: start;
    padding-block: var(--s-space-m);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    transition: background-color var(--s-dur-ui) var(--s-ease);
}
.fh-round__row:hover, .fh-round__row:focus-within { background: var(--s-cream-deep); }
/* The rail: a line down the 'when' column with a stop on each row. */
.fh-round__when {
    position: relative;
    align-self: stretch;
    align-content: start;
    display: grid; gap: var(--s-space-3xs);
    padding-left: var(--s-space-m);
}
.fh-round__when::before {
    content: ""; position: absolute; left: 0; top: calc(-1 * var(--s-space-m)); bottom: calc(-1 * var(--s-space-m));
    border-left: var(--s-hairline) solid var(--s-rule-strong);
}
.fh-round__row:first-child .fh-round__when::before { top: var(--s-space-xs); }
.fh-round__row:last-child .fh-round__when::before { bottom: auto; height: var(--s-space-s); }
.fh-round__when::after {
    content: ""; position: absolute; left: 0; top: var(--s-space-xs);
    width: var(--s-round-dot); height: var(--s-round-dot);
    border-radius: 50%;
    background: var(--s-raspberry);
    transform: translateX(-50%);
}
.fh-round__day { font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.fh-round__time { color: var(--s-ink-muted); font-size: var(--s-step-small); }
.fh-round__thumb {
    flex: none;
    width: var(--s-round-thumb);
    aspect-ratio: var(--s-order-ratio);
    overflow: hidden;
    border-radius: var(--s-leaf-s) 0 var(--s-leaf-s) 0;
    background: var(--s-cream-deep);
    transition: width var(--s-dur-grow) var(--s-ease);
}
.fh-round__row:hover .fh-round__thumb, .fh-round__row:focus-within .fh-round__thumb { width: var(--s-round-thumb-open); }
.fh-round__thumb picture, .fh-round__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fh-round__where { display: flex; align-items: flex-start; gap: var(--s-space-l); }
.fh-round__text { display: grid; gap: var(--s-space-2xs); align-content: start; padding-top: var(--s-space-3xs); }
.fh-round__name { font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.fh-round__name a {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    margin-block: calc(-1 * var(--s-space-2xs));
    text-decoration: underline;
    text-decoration-color: var(--s-green);
    text-decoration-thickness: var(--s-underline);
    text-underline-offset: var(--s-underline-offset);
    transition: text-decoration-thickness var(--s-dur-ui) var(--s-ease);
}
.fh-round__name a:hover { text-decoration-thickness: var(--s-underline-hover); }
.fh-round__what, .fh-round__often { color: var(--s-ink-muted); font-size: var(--s-step-small); }
.fh-round__often { padding-top: var(--s-space-2xs); }
.fh-round__label { display: none; }
.fh-round__price { justify-self: end; text-align: right; padding-top: var(--s-space-3xs); }
.fh-round__figure {
    color: var(--s-raspberry);
    font: var(--s-weight-semi) var(--s-step-price)/var(--s-leading-solid) var(--s-font-body);
    font-variant-numeric: var(--s-num);
}
.fh-round__per { display: block; color: var(--s-ink-muted); font-size: var(--s-step-small); }
.fh-orders__note { margin-top: var(--s-space-l); color: var(--s-ink-muted); font-size: var(--s-step-small); }

/* ---- 5. The garden ---------------------------------------------------------- */
.fh-garden { padding-block: var(--s-section-tight) var(--s-section); border-top: var(--s-hairline) solid var(--s-rule); }
/* Edge to edge at every width: the one photograph on the page with no frame round it. */
.fh-garden__photo picture { overflow: hidden; aspect-ratio: var(--s-garden-ratio-display); }
.fh-garden__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--s-garden-pos); }
.fh-ledger {
    max-width: var(--s-measure-ledger);
    padding-block: var(--s-space-xl);
    font: italic var(--s-weight-display) var(--s-step-ledger)/var(--s-leading-heading) var(--s-font-display);
    text-wrap: balance;
}

.fh-seasons .fh-h3 { margin-bottom: var(--s-space-m); }
.fh-seasons__table { width: 100%; border-collapse: collapse; font-size: var(--s-step-small); }
.fh-seasons__table thead th {
    padding: 0 var(--s-space-s) var(--s-space-xs) 0;
    text-align: left;
    font-size: var(--s-step-micro); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-kicker);
    color: var(--s-ink-muted);
    border-bottom: var(--s-hairline) solid var(--s-rule-strong);
}
.fh-seasons__table tbody th, .fh-seasons__table td {
    padding: var(--s-space-s) var(--s-space-s) var(--s-space-s) 0;
    text-align: left; vertical-align: top;
    border-bottom: var(--s-hairline) solid var(--s-rule);
}
.fh-seasons__table tbody th { width: 24%; font-weight: var(--s-weight-regular); }
.fh-seasons__table td:nth-child(2) { width: 38%; }
.fh-seasons__name {
    display: flex; align-items: center; gap: var(--s-space-xs);
    font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display);
}
.fh-seasons__months { display: block; color: var(--s-ink-muted); font-size: var(--s-step-micro); }
.fh-seasons__table tr.is-now > * { background: var(--s-cream-deep); }
.fh-seasons__table tr.is-now > th { padding-left: var(--s-space-s); }
.fh-seasons__now {
    padding: var(--s-season-now-pad);
    border-radius: var(--s-leaf-s) 0 var(--s-leaf-s) 0;
    background: var(--s-raspberry); color: var(--s-cream);
    font: var(--s-weight-semi) var(--s-step-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro);
}

/* ---- 6. Enquire: the gift tag ---------------------------------------------- */
.fh-enquire {
    padding-block: var(--s-section);
    background: var(--s-raspberry);
    color: var(--s-cream);
    overflow: hidden;
}
.fh-enquire :focus-visible { outline-color: var(--s-focus-on-dark); }
.fh-enquire__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head tag" "visits tag";
    gap: var(--s-space-xl);
    align-items: start;
}
.fh-enquire__head { grid-area: head; }
.fh-enquire .fh-kicker, .fh-enquire .fh-body { color: var(--s-cream); }
.fh-enquire .fh-h2 { font-size: var(--s-step-hero); line-height: var(--s-leading-display); }
.fh-enquire .fh-body { margin-top: var(--s-space-m); }

.fh-tag-wrap { grid-area: tag; padding-top: var(--s-twine-h); filter: var(--s-tag-drop); }
.fh-tag {
    position: relative;
    max-width: var(--s-tag-max);
    margin-inline: auto;
    padding: calc(var(--s-tag-hole-top) + var(--s-tag-hole) + var(--s-space-s)) var(--s-tag-pad) var(--s-tag-pad);
    color: var(--s-ink);
    transform: rotate(var(--s-tag-tilt));
}
/* The card itself: notched corners at the hole end. */
.fh-tag::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--s-tag);
    border-radius: 0 0 var(--s-radius) var(--s-radius);
    clip-path: polygon(var(--s-tag-notch) 0, calc(100% - var(--s-tag-notch)) 0, 100% var(--s-tag-notch), 100% 100%, 0 100%, 0 var(--s-tag-notch));
}
.fh-tag__hole {
    position: absolute; z-index: 1;
    top: var(--s-tag-hole-top); left: var(--s-twine-x);
    width: var(--s-tag-hole); height: var(--s-tag-hole);
    border-radius: 50%;
    background: var(--s-raspberry);
    box-shadow: 0 0 0 var(--s-tag-hole-ring) var(--s-cream-deep);
    transform: translate(-50%, -50%);
}
.fh-twine {
    position: absolute; z-index: 2;
    left: var(--s-twine-x);
    top: calc(var(--s-tag-hole-top) - var(--s-twine-hole-y));
    width: var(--s-twine-svg-w);
    height: var(--s-twine-svg-h);
    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
}
.fh-twine path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fh-twine__ply path { stroke: var(--s-twine); stroke-width: var(--s-twine-w-px); }
.fh-twine__light path { stroke: var(--s-twine-light); stroke-width: var(--s-twine-light-w); stroke-dasharray: var(--s-twine-dash); }
.fh-twine__knot { fill: var(--s-twine); }
.fh-tag__form {
    position: relative; z-index: 1;
    display: grid; gap: var(--s-space-m);
    transform: rotate(var(--s-tag-untilt));
}
.fh-tag__to {
    padding-bottom: var(--s-space-xs);
    border-bottom: var(--s-hairline) solid var(--s-rule-strong);
    font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display);
}
.fh-field { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--s-space-2xs); }
.fh-label, .fh-field legend {
    padding: 0;
    font: italic var(--s-weight-display) var(--s-step-tag-label)/var(--s-leading-tight) var(--s-font-display);
}
.fh-label .fh-hint, .fh-field legend .fh-hint {
    margin-left: var(--s-space-2xs);
    font: var(--s-weight-regular) var(--s-step-micro)/var(--s-leading-tight) var(--s-font-body);
    letter-spacing: var(--s-track-micro);
}
.fh-field legend { margin-bottom: var(--s-space-2xs); }
.fh-hint { color: var(--s-ink-muted); font-weight: var(--s-weight-regular); }
.fh-chips { display: flex; flex-wrap: wrap; gap: var(--s-space-2xs); }
.fh-chip-wrap { position: relative; display: inline-flex; }
.fh-chip-input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.fh-chip {
    display: inline-flex; align-items: center; gap: var(--s-space-2xs);
    min-height: var(--s-chip-h);
    padding: 0 var(--s-chip-pad-x);
    border: var(--s-hairline) solid var(--s-rule-strong);
    border-radius: 0;
    font-size: var(--s-step-small);
    cursor: pointer;
    transition: background-color var(--s-dur-ui) var(--s-ease), color var(--s-dur-ui) var(--s-ease), border-radius var(--s-dur-ui) var(--s-ease), border-color var(--s-dur-ui) var(--s-ease);
}
.fh-chip-input:hover + .fh-chip { border-color: var(--s-ink); }
.fh-chip-input:checked + .fh-chip {
    background: var(--s-raspberry); color: var(--s-cream); border-color: var(--s-raspberry);
    border-radius: var(--s-leaf-s) 0 var(--s-leaf-s) 0;
}
.fh-chip-input:focus-visible + .fh-chip { outline: var(--s-focus-ring) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.fh-swatch {
    width: var(--s-swatch); height: var(--s-swatch); border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 var(--s-hairline) var(--s-rule-strong);
}
.fh-chip-input:checked + .fh-chip .fh-swatch { box-shadow: 0 0 0 var(--s-hairline) var(--s-cream); }
.fh-select { position: relative; max-width: var(--s-measure-narrow); }
.fh-select::after {
    content: ""; position: absolute; right: var(--s-space-2xs); top: 50%;
    width: var(--s-chevron); height: var(--s-chevron);
    border-right: var(--s-hairline) solid currentColor;
    border-bottom: var(--s-hairline) solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}
.fh-input {
    width: 100%;
    min-height: var(--s-input-h);
    padding: 0;
    border: 0;
    border-bottom: var(--s-hairline) solid var(--s-rule-strong);
    border-radius: 0;
    background: transparent;
    font-size: var(--s-step-input);
    -webkit-appearance: none;
    appearance: none;
}
.fh-input--select { padding-right: var(--s-space-l); cursor: pointer; }
.fh-input:focus-visible { border-bottom-color: var(--s-green); }
.fh-input[aria-invalid="true"] { border-bottom-color: var(--s-error); }
.fh-tag__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-space-m); }
.fh-error { color: var(--s-error); font-size: var(--s-step-small); }
.fh-error[hidden] { display: none; }
.fh-tag__summary { padding-top: var(--s-space-xs); border-top: var(--s-hairline) dashed var(--s-rule-strong); }
.fh-tag__summary-label { color: var(--s-ink-muted); font-size: var(--s-step-micro); letter-spacing: var(--s-track-kicker); }
.fh-tag__summary-line {
    display: block;
    min-height: calc(var(--s-step-summary) * var(--s-leading-tight));
    color: var(--s-raspberry);
    font: italic var(--s-weight-display) var(--s-step-summary)/var(--s-leading-tight) var(--s-font-display);
}
.fh-tag__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-s) var(--s-space-m); }
.fh-tag__status { flex: 1 1 var(--s-measure-narrow); font-size: var(--s-step-small); }
.fh-tag__status:empty { display: none; }

.fh-visits { grid-area: visits; }
.fh-visits__title { margin-bottom: var(--s-space-s); font: italic var(--s-weight-display) var(--s-step-h3)/var(--s-leading-heading) var(--s-font-display); }
.fh-visits dl > div {
    display: grid; gap: var(--s-space-3xs);
    padding: var(--s-space-xs) 0;
    border-top: var(--s-hairline) solid var(--s-tone-dahlia-rule);
}
.fh-visits dt { font-size: var(--s-step-micro); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-kicker); }
.fh-visits dd { font-size: var(--s-step-small); }

/* ---- Footer ------------------------------------------------------------------- */
.fh-foot { padding-block: var(--s-section-tight); background: var(--s-cream); }
.fh-foot__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s-space-l) var(--s-space-xl);
}
.fh-foot__descriptor, .fh-foot__week { color: var(--s-ink-muted); font-size: var(--s-step-small); }
.fh-foot__week { margin-top: var(--s-space-s); font-variant-numeric: var(--s-num); }
.fh-foot__title { font: var(--s-weight-semi) var(--s-step-small)/var(--s-leading-tight) var(--s-font-body); }
.fh-foot__intro { margin: var(--s-space-2xs) 0 var(--s-space-s); color: var(--s-ink-muted); font-size: var(--s-step-micro); max-width: var(--s-measure); }
.fh-credits { columns: 2; column-gap: var(--s-space-l); font-size: var(--s-step-micro); }
.fh-credits li { break-inside: avoid; padding-block: var(--s-space-3xs); }
.fh-credits a { display: inline-block; min-height: var(--s-tap); padding-block: var(--s-space-xs); color: var(--s-link); text-underline-offset: var(--s-underline-offset); }
.fh-credits li { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-space-2xs); }
.fh-credits span { color: var(--s-ink-muted); }
.fh-foot__end {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-space-s);
    padding-top: var(--s-space-s);
    border-top: var(--s-hairline) solid var(--s-rule);
    color: var(--s-ink-muted); font-size: var(--s-step-micro);
}

/* ---- Tablet: the nav collapses to the sheet ------------------------------------- */
html.fh-sheet-open { overflow: hidden; }
@media (min-width: 1100px) {
    .fh-nav__menu { display: none; }
}
@media (max-width: 1099px) {
    .fh-js .fh-nav__links { display: none; }
}

/* ---- Tablet: below desktop the band's card sits beneath its photograph ------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
    .fh-variety { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-space-l); padding-block: var(--s-section-tight); }
    .fh-variety__stage { min-height: 0; padding-block: 0; }
    .fh-variety[data-frame="dominant"] .fh-variety__stage { margin-left: 0; }
    .fh-variety[data-frame="dominant"] .fh-variety__photo { height: var(--s-cut-photo-h); border-radius: var(--s-radius); }
}

/* ---- Tablet + phone: the round stacks, thumbnail beside each stop ---------------------- */
@media (max-width: 1023px) {
    .fh-round__heads { display: none; }
    .fh-round__row {
        grid-template-columns: var(--s-round-cols-m);
        grid-template-areas: "when when" "where where" "often price";
        column-gap: var(--s-space-s);
        row-gap: var(--s-space-2xs);
        padding-block: var(--s-space-m);
    }
    .fh-round__thumb, .fh-round__row:hover .fh-round__thumb, .fh-round__row:focus-within .fh-round__thumb { width: var(--s-round-thumb-m); }
    .fh-round__where { gap: var(--s-space-s); }
    .fh-round__when { grid-area: when; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-space-2xs); padding-left: 0; }
    .fh-round__when::before, .fh-round__when::after { display: none; }
    .fh-round__where { grid-area: where; }
    .fh-round__often { grid-area: often; align-self: end; }
    .fh-round__price { grid-area: price; justify-self: end; }
    .fh-round__figure { font-size: var(--s-step-h3); }

}

/* ---- Phone: its own composition --------------------------------------------------- */
@media (max-width: 767px) {
    /* Phone: the tag hangs straight under the invitation, so its cord, not empty plum, follows the words. */
    .fh-enquire { padding-top: var(--s-section-tight); }
    .fh-enquire__grid { row-gap: var(--s-space-s); }
    .fh-nav { height: var(--s-nav-h-mobile); gap: var(--s-space-2xs); }
    .fh-nojs .fh-nav { height: auto; flex-wrap: wrap; padding-block: var(--s-space-2xs); }
    .fh-nojs .fh-nav__links ul { flex-wrap: wrap; gap: 0 var(--s-space-m); }
    .fh-leaf--nav { padding-inline: var(--s-space-s); }
    [id] { scroll-margin-top: var(--s-anchor-offset-m); }
    .fh-variety { scroll-margin-top: var(--s-nav-h-mobile); }

    /* Arrival: dahlia (2 tracks) + roses + cosmos stepping down; the type takes the full width beneath. */
    .fh-arrival {
        grid-template-columns: var(--s-lineup-tracks-m);
        column-gap: var(--s-lineup-gap-m);
        height: calc(100vh - var(--s-ribbon-h-live) - var(--s-nav-h-mobile));
        height: calc(min(var(--s-arrival-max), 100svh) - var(--s-ribbon-h-live) - var(--s-nav-h-mobile));
        min-height: var(--s-hero-min-m);
        padding: var(--s-space-2xs) var(--s-gutter) var(--s-space-m);
    }
    .fh-bucket { padding-top: var(--drop-m); }
    .fh-bucket--lead { grid-row: 1; }
    .fh-bucket--wide { display: none; }
    .fh-bucket__note { display: none; }
    .fh-bucket__name:has(.fh-bucket__short) .fh-bucket__full { position: absolute; width: var(--s-hairline); height: var(--s-hairline); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .fh-bucket__short { display: inline; }
    .fh-bucket__name::before { margin-right: var(--s-space-3xs); }
    .fh-arrival__type { grid-column: 1 / -1; gap: var(--s-space-s); padding: var(--s-space-s) 0 0; }
    .fh-arrival__title { font-size: var(--s-step-hero-m); white-space: normal; }
    .fh-arrival__side { display: grid; gap: var(--s-space-s); }
    .fh-arrival__lede { max-width: none; }
    .fh-arrival__actions { flex-wrap: nowrap; justify-content: space-between; gap: var(--s-space-s); }

    .fh-cut__head, .fh-weddings__head, .fh-orders__head, .fh-garden__head { grid-template-columns: minmax(0, 1fr); }
    .fh-cut__index ol { gap: 0 var(--s-space-m); }
    .fh-variety {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 0;
        padding: 0 0 var(--s-section-tight);
    }
    .fh-variety__stage { min-height: 0; padding-block: 0; }
    .fh-variety[data-frame] .fh-variety__stage { margin-left: 0; }
    .fh-variety[data-frame] .fh-variety__photo { width: 100%; height: auto; aspect-ratio: var(--s-cut-photo-ratio); border-radius: 0; }
    .fh-variety__card { padding: var(--s-space-l) var(--s-gutter) 0; max-width: none; justify-self: stretch; }

    .fh-weddings__spread { grid-template-columns: 1fr 1fr; grid-template-areas: "large large" "smalls smalls" "detail detail"; padding-inline: 0; }
    .fh-weddings__large { aspect-ratio: auto; border-radius: 0; }
    .fh-weddings__smalls { grid-template-columns: 1fr 1fr; gap: var(--s-lineup-gap-m); padding: 0 var(--s-lineup-gap-m); }
    .fh-weddings__detail { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s-gutter); }
    .fh-weddings__detail .fh-includes, .fh-weddings__cta { grid-row: auto; grid-column: auto; }

    .fh-garden__photo picture { aspect-ratio: auto; }
    .fh-garden__photo img { object-position: center; }
    .fh-seasons__table thead { position: absolute; width: var(--s-hairline); height: var(--s-hairline); overflow: hidden; clip-path: inset(50%); }
    .fh-seasons__table, .fh-seasons__table tbody, .fh-seasons__table tr, .fh-seasons__table th, .fh-seasons__table td { display: block; width: auto; }
    .fh-seasons__table tbody tr { padding: var(--s-space-s) 0; border-bottom: var(--s-hairline) solid var(--s-rule); }
    .fh-seasons__table tbody th, .fh-seasons__table td { border: 0; padding: var(--s-space-3xs) 0; }
    .fh-seasons__table tr.is-now { background: var(--s-cream-deep); padding-inline: var(--s-space-s); }
    .fh-seasons__table tr.is-now > * { background: transparent; padding-left: 0; }
    .fh-seasons__table td::before {
        content: attr(data-label);
        display: block;
        color: var(--s-ink-muted);
        font-size: var(--s-step-micro); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-kicker);
    }

    .fh-enquire__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tag" "visits"; }
    .fh-enquire .fh-h2 { font-size: var(--s-step-h2); }
    .fh-tag { padding-inline: var(--s-space-m); }
    .fh-tag__row { grid-template-columns: minmax(0, 1fr); }
    .fh-select { max-width: none; }

    .fh-foot__inner { grid-template-columns: minmax(0, 1fr); }
    .fh-credits { columns: 1; }
}

/* ---- Motion: only when the visitor allows it --------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .fh-bucket { animation: fh-rise var(--s-dur-rise) var(--s-ease) both; animation-delay: calc(var(--i) * var(--s-stagger)); }
    .fh-arrival__title { animation: fh-fade var(--s-dur-fade) var(--s-ease) var(--s-delay-title) both; }
    .fh-arrival__lede, .fh-arrival__actions { animation: fh-fade var(--s-dur-fade) var(--s-ease) var(--s-delay-title) both; }
    .fh-stamp { animation: fh-fade var(--s-dur-fade) var(--s-ease) var(--s-delay-stamp) both; }

    /* Stem-slit: set only once site.js has created the trigger that opens it. */
    .fh-motion [data-fh-slit] { clip-path: var(--s-slit-closed); transition: clip-path var(--s-dur-slit) var(--s-ease); }
    .fh-motion [data-fh-slit] img { transform: scale(var(--s-scale-settle)); transition: transform var(--s-dur-settle) var(--s-ease); }
    .fh-motion [data-fh-slit].is-open { clip-path: var(--s-slit-open); }
    .fh-motion [data-fh-slit].is-open img { transform: none; }

    .fh-motion [data-fh-settle] img { transform: scale(var(--s-scale-settle)); transition: transform var(--s-dur-settle) var(--s-ease); }
    .fh-motion [data-fh-settle].is-in img { transform: none; }

    @media (hover: hover) and (pointer: fine) {
        .fh-lift { transition: transform var(--s-dur-lift) var(--s-ease), box-shadow var(--s-dur-lift) var(--s-ease); }
        .fh-lift:hover { transform: translateY(calc(-1 * var(--s-lift))); box-shadow: var(--s-lift-shadow); }
        .fh-leaf:hover { border-radius: var(--s-leaf-s) 0 var(--s-leaf) 0; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .fh-cut, .fh-variety { transition: none; }
}

@keyframes fh-rise {
    from { opacity: 0; transform: translateY(var(--s-rise)); }
}
@keyframes fh-fade {
    from { opacity: 0; transform: translateY(var(--s-rise)); }
}