/* geist-switch 2026-10-17: font and weights mapped by scratchpad/switch-to-geist.py */
/* Alda home: everything under the hero stage - the section system the three directions share,
   then each direction's own modules. Composed on commerce.css: the same tokens, type and
   hairlines, with one addition - a radius scale, since the page below the stage is soft where
   the canvas and the PDP are square. Widths come in three measures against the house 8.9vw
   gutter: contained (82.2vw), wide (94vw) and full-bleed backgrounds behind either.

   Motion is home.js: elements carry data-rv (reveal), data-px (parallax) and a few named hooks;
   nothing here animates on its own but hover. */

:root {
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --hm-gut: 8.9vw;
}

/* ---------- the page under the stage ---------- */
.hm { position: relative; z-index: 2; background: var(--ac-bg); color: var(--ac-ink); font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.hm *, .hm-foot * { box-sizing: border-box; }
.hm img, .hm video, .hm-foot img { display: block; max-width: 100%; }
/* the element reset sits inside :where(), so it outranks the site bundle's element rules but
   never a component class of ours declared below it */
.hm :where(h1, h2, h3, h4, p, figure, blockquote), .hm-foot :where(h3, h4, p) { margin: 0; padding: 0; border: 0; color: inherit; font-size: inherit; line-height: inherit; }
.hm :where(a), .hm-foot :where(a) { color: inherit; text-decoration: none; }
.hm button, .hm-foot button, .hm-foot input { font-family: inherit; }

.hm-sec { position: relative; padding: 14vh 0; }
.hm-sec.is-panel { background: var(--ac-panel); }
.hm-sec.is-dark { background: var(--ac-ink); color: var(--ac-bg); }
.hm-wrap { width: calc(100% - 2 * var(--hm-gut)); margin: 0 auto; }
.hm-wrap.is-narrow { width: 58vw; }
.hm-wrap.is-wide { width: 94vw; }

/* type - the house display voice, weight doing the work */
.hm-eyebrow { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); }
.is-dark .hm-eyebrow, .is-over .hm-eyebrow { color: rgba(245, 246, 238, 0.62); }
.hm-h { font-weight: 550; letter-spacing: -0.03em; line-height: 1.02; }
.hm-h.is-xl { font-size: 5.4vw; letter-spacing: -0.04em; line-height: 0.95; }
.hm-h.is-lg { font-size: 3.6vw; }
.hm-h.is-md { font-size: 2.3vw; line-height: 1.1; }
.hm-h.is-sm { font-size: 1.5vw; line-height: 1.2; letter-spacing: -0.02em; }
.hm-h.is-light { font-weight: 400; }
.hm-p { font-size: 1em; line-height: 1.6; color: var(--ac-muted); max-width: 34em; }
.is-dark .hm-p, .is-over .hm-p { color: rgba(245, 246, 238, 0.7); }
.hm-center { text-align: center; }
.hm-center .hm-p, .hm-center .hm-actions { margin-left: auto; margin-right: auto; }
.hm-center .hm-actions { justify-content: center; }
.hm-head { margin-bottom: 6vh; }
.hm-head .hm-eyebrow { margin-bottom: 1.3em; }
.hm-head .hm-p { margin-top: 1.5em; }
.hm-after { margin-top: 6vh; }
/* SplitText line masks - the split wraps each line; keep the wrappers from adding height */
.hm-line { display: block; }

/* buttons - the house pill; the fill does the ranking */
.hm-btn { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.92em; line-height: 1.2; padding: 0.85em 1.6em; border-radius: 100px; border: 1px solid var(--ac-ink); background: var(--ac-ink); color: var(--ac-bg); cursor: pointer; text-decoration: none; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-btn:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.hm-btn:active { transform: scale(0.97); }
.hm-btn.is-ghost { background: transparent; color: var(--ac-ink); border-color: var(--ac-line); }
.hm-btn.is-ghost:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.is-dark .hm-btn, .is-over .hm-btn { background: var(--ac-bg); border-color: var(--ac-bg); color: var(--ac-ink); }
.is-dark .hm-btn:hover, .is-over .hm-btn:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.is-dark .hm-btn.is-ghost, .is-over .hm-btn.is-ghost { background: transparent; color: inherit; border-color: rgba(245, 246, 238, 0.4); }
.is-dark .hm-btn.is-ghost:hover, .is-over .hm-btn.is-ghost:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.hm-btn svg { width: 0.8em; height: 0.8em; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-btn:hover svg { transform: translateX(3px); }
/* keyboard focus (focus: Option C, site.css) - never a red ring: the black button keeps its red fill (the house rule) with a
   2px cream line inside (orbit.css draws it on the enhanced buttons); the round + and the arrows take a 1.5px ink inner
   edge (a cream line inside it once the + is ink); questions take the rows' tint and ink bar */
.hm-btn:focus-visible { background: var(--ac-red); border-color: var(--ac-red); color: #fff; outline: 2px solid var(--ac-bg); outline-offset: -5px; }
.hm-add:focus-visible, .hm-arrows button:focus-visible { outline: 0; border-color: var(--ac-ink); box-shadow: inset 0 0 0 0.5px var(--ac-ink), inset 0 0 0 2px var(--ac-bg); }
.hm-acc-item summary:focus-visible { outline: 0; }
.hm-actions { display: flex; gap: 0.6em; flex-wrap: wrap; align-items: center; }
.hm-more { display: inline-flex; align-items: center; gap: 0.6em; margin-top: 1.1em; font-size: 0.88em; color: var(--ac-ink); }
.hm-more .ac-chev { width: 0.4em; height: 0.4em; transform: rotate(-45deg); }
.hm-more:hover { color: var(--ac-red); }

/* frames - photography and film, soft-cornered; a shot still to be made holds the same frame */
.hm-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--ac-panel); }
.hm-frame img, .hm-frame video { width: 100%; height: 100%; object-fit: cover; }
.hm-frame.is-pending { border: 1px solid var(--ac-line-soft); }
.hm-frame.is-pending span { position: absolute; left: 1.1em; bottom: 0.9em; font-size: 0.78em; color: var(--ac-muted); letter-spacing: 0.02em; }
/* a parallaxed image is set taller than its frame so it can travel without showing an edge */
.hm-frame img[data-px], .hm-frame video[data-px] { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; }

/* product card - the house tile, softened. The link is the card; a quick-add sits beside it. */
.hm-pcard { position: relative; display: block; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); padding: 1.1em 1.1em 1.2em; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s; }
.hm-pcard:hover { transform: translateY(-6px); border-color: var(--ac-line); background: var(--alda-paper); }
.hm-pcard .hit { display: block; }
/* the picture is the product's white-background PDP main view, filling a rounded frame like the listings' photography
   cards (2026-10-14; it was a cut-out at 78% on the panel) - the hover zooms inside the frame */
.hm-pcard .art { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-md); background: var(--alda-paper); }
.hm-pcard .art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-pcard:hover .art img { transform: scale(1.05); }
.hm-pcard .n { margin-top: 0.7em; font-weight: 550; font-size: 0.98em; line-height: 1.3; }
.hm-pcard .t { margin-top: 0.25em; font-size: 0.8em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hm-pcard .tag { position: absolute; left: 1.1em; top: 1.1em; z-index: 1; font-size: 0.72em; letter-spacing: 0.04em; padding: 0.35em 0.8em; border-radius: 100px; border: 1px solid var(--ac-line-soft); color: var(--ac-muted); background: var(--ac-bg); }
.hm-add { position: absolute; right: 1.1em; bottom: 1.2em; width: 2.4em; height: 2.4em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: var(--ac-ink); display: grid; place-items: center; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s; }
.hm-add svg { width: 0.8em; height: 0.8em; }
.hm-add:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.hm-add:active { transform: scale(0.94); }
.hm-pcard.has-add .n, .hm-pcard.has-add .t { padding-right: 3em; }

/* the three categories, one line: a picture, a name and count, the shelves as chips */
.hm-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
.hm-ccard { display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); color: inherit; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s; }
.hm-ccard:hover { transform: translateY(-6px); border-color: var(--ac-line); background: var(--alda-paper); }
.hm-ccard .hm-frame { border-radius: 0; aspect-ratio: 4 / 3; }
.hm-ccard .hm-frame img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-ccard:hover .hm-frame img { transform: scale(1.04); }
.hm-ccard .body { padding: 1.3em 1.4em 1.5em; }
.hm-ccard .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.hm-ccard h3 { font-size: 1.5em; font-weight: 550; letter-spacing: -0.03em; line-height: 1.1; }
.hm-ccard .t { font-size: 0.8em; color: var(--ac-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-ccard .subs { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1em; }
.hm-ccard .subs span { font-size: 0.75em; padding: 0.3em 0.75em; border-radius: 100px; border: 1px solid var(--ac-line-soft); color: var(--ac-muted); }
#shelves .hm-ccard .row { flex-wrap:wrap; align-items:center; gap:12px 20px; }
#shelves .hm-ccard h3 { margin:0; }
#shelves .shelf-explore { display:inline-flex; align-items:center; gap:8px; color:var(--ac-ink); font-size:13px; white-space:nowrap; }
#shelves .shelf-explore > span { color:inherit; }
#shelves .hm-ccard:is(:hover,:focus-visible) .shelf-explore { color:var(--alda-red); }

/* accordion - native details, numbered, a round plus that turns; home.js eases the open */
.hm-acc { border-top: 1px solid var(--ac-line-soft); }
.hm-acc-item { border-bottom: 1px solid var(--ac-line-soft); }
.hm-acc-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 1.35em 0; font-size: 1.05em; }
.hm-acc-item summary::-webkit-details-marker { display: none; }
.hm-acc-item .num { font-size: 0.78em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hm-acc-item .aside { display: inline-flex; align-items: center; gap: 1.2em; }
.hm-acc-item .rng { font-size: 0.78em; color: var(--ac-muted); letter-spacing: 0.02em; }
.hm-acc-item .plus { position: relative; width: 2em; height: 2em; border-radius: 100px; border: 1px solid var(--ac-line); transition: background 0.3s, border-color 0.3s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-acc-item .plus::before, .hm-acc-item .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 1.2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-acc-item .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.hm-acc-item summary:hover .plus { border-color: var(--ac-red); color: var(--ac-red); }
.hm-acc-item[open] .plus { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.hm-acc-item[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.hm-acc-body { overflow: hidden; }
.hm-acc-body > div { padding: 0 0 1.5em 4.2em; font-size: 0.92em; line-height: 1.62; color: var(--ac-muted); max-width: 40em; }
.hm-acc-body p { margin: 0 0 0.6em; }
.is-dark .hm-acc, .is-dark .hm-acc-item { border-color: rgba(245, 246, 238, 0.14); }
.is-dark .hm-acc-item .plus { border-color: rgba(245, 246, 238, 0.3); }
.is-dark .hm-acc-item[open] .plus { background: var(--ac-bg); border-color: var(--ac-bg); color: var(--ac-ink); }
.is-dark .hm-acc-body > div, .is-dark .hm-acc-item .num, .is-dark .hm-acc-item .rng { color: rgba(245, 246, 238, 0.66); }

/* arrows - a pair of round steppers */
.hm-arrows { display: inline-flex; gap: 0.5em; }
.hm-arrows button { width: 2.6em; height: 2.6em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.hm-arrows svg { width: 0.75em; height: 0.75em; }
.hm-arrows button:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.is-dark .hm-arrows button, .is-over .hm-arrows button { border-color: rgba(245, 246, 238, 0.35); }
.is-dark .hm-arrows button:hover, .is-over .hm-arrows button:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }

/* icon disc */
.hm-ic { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 100px; background: var(--ac-bg); border: 1px solid var(--ac-line-soft); color: var(--ac-ink); }
.hm-ic svg { width: 1em; height: 1em; }
.is-dark .hm-ic, .is-over .hm-ic { background: transparent; border-color: rgba(245, 246, 238, 0.3); color: var(--ac-bg); }

/* marquee - one run set twice, home.js slides the track by half */
.hm-marquee { overflow: hidden; padding: 3.2vh 0; border-top: 1px solid var(--ac-line-soft); border-bottom: 1px solid var(--ac-line-soft); }
.hm-marquee .track { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.hm-marquee .run { display: flex; align-items: center; }
.hm-marquee span { font-size: 2.6vw; font-weight: 550; letter-spacing: -0.03em; line-height: 1; padding: 0 1.4vw; }
.hm-marquee i { width: 0.55vw; height: 0.55vw; border-radius: 100px; background: var(--ac-red); flex: none; }

/* ---------- footer ---------- */
.hm-foot { position: relative; z-index: 2; padding: 12vh var(--hm-gut) 3vh; font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ac-ink); background: var(--ac-bg); }
.hm-foot.is-dark { background: var(--ac-ink); color: var(--ac-bg); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.hm-foot.is-light { border-top: 1px solid var(--ac-line); }
.hm-foot.is-tuck { margin-top: -6vh; padding-top: 16vh; }
.hm-foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--ac-gut); align-items: start; }
.hm-foot h4 { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.3em; opacity: 0.6; }
.hm-foot h4 a:hover { color: var(--ac-red); }
.hm-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; font-size: 0.92em; overflow: visible; }
.hm-foot li a { transition: color 0.2s; }
.hm-foot li a:hover { color: var(--ac-red); }
.hm-news .hm-p { margin-top: 0.9em; }
.hm-news form { display: flex; align-items: center; gap: 0.4em; margin-top: 1.6em; max-width: 26em; padding: 0.3em 0.3em 0.3em 1.3em; border-radius: 100px; border: 1px solid var(--ac-line); }
.is-dark .hm-news form { border-color: rgba(245, 246, 238, 0.3); }
.hm-news input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-size: 0.92em; color: inherit; }
.hm-news input::placeholder { color: inherit; opacity: 0.5; }
.hm-news .hm-btn { padding: 0.65em 1.2em; font-size: 0.85em; }
.hm-foot-mark { margin-top: 12vh; }
.hm-foot-mark svg { width: 100%; height: auto; display: block; fill: currentColor; }
.hm-foot-legal { display: flex; justify-content: space-between; gap: 2em; margin-top: 2.4vh; font-size: 0.78em; opacity: 0.6; }
/* a product set in front of the wordmark's last letter, the way the reference sets its flower */
.hm-foot .prod { position: absolute; right: 5vw; bottom: 8vh; z-index: 1; width: 22vw; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); pointer-events: none; }

/* ============================================================ direction A - the stage
   Nexwell's principles in the house voice: the product isolated on a soft stage, its story told
   in cards floating around it, a numbered list beside cropped material studies, everything
   centred and generous, and a single landscape leading into a dark footer. */
.hmA-stage { position: relative; margin-top: 2vh; }
.hmA-plinth { position: relative; height: 68vh; border-radius: var(--r-xl); border: 1px solid var(--ac-line-soft); background: radial-gradient(62% 72% at 50% 58%, #ffffff 0%, var(--ac-panel) 58%, #eff0e7 100%); }
.hmA-hero-img { position: absolute; left: 50%; top: 50%; width: 34vw; height: auto; transform: translate(-50%, -52%); filter: drop-shadow(0 40px 50px rgba(34, 34, 34, 0.22)); will-change: transform; }
.hmA-float { position: absolute; width: 17.5vw; padding: 1.4em 1.4em 1.5em; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--ac-line-soft); box-shadow: 0 24px 48px rgba(34, 34, 34, 0.07); }
.hmA-float .hm-ic { margin-bottom: 1.1em; }
.hmA-float h3 { font-size: 1.02em; font-weight: 550; line-height: 1.3; margin-bottom: 0.4em; }
.hmA-float p { font-size: 0.85em; line-height: 1.55; color: var(--ac-muted); }
.hmA-float.p1 { left: -2vw; top: 9vh; }
.hmA-float.p2 { right: -2vw; top: 13vh; }
.hmA-float.p3 { left: 2.5vw; bottom: 8vh; }
.hmA-float.p4 { right: 1.5vw; bottom: 11vh; }
.hmA-buy { display: flex; align-items: center; justify-content: space-between; gap: 2em; margin-top: 4vh; padding-top: 3vh; border-top: 1px solid var(--ac-line-soft); }
.hmA-buy .n { font-weight: 550; }
.hmA-buy .t { margin-left: 1em; color: var(--ac-muted); font-size: 0.9em; }

.hmA-mat-head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--ac-gut); align-items: end; margin-bottom: 6vh; }
.hmA-mat-head .hm-eyebrow { grid-column: 1 / -1; margin-bottom: 0.4em; }
.hmA-mat-head .hm-p { margin-bottom: 0.3em; }
.hmA-mat { display: grid; grid-template-columns: 7fr 5fr; gap: 6vw; align-items: start; }
.hmA-mat-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vw; }
.hmA-mat-imgs .hm-frame { aspect-ratio: 1; }
.hmA-mat-imgs .hm-frame:nth-child(2) { margin-top: 7vh; }

/* the cards sit on one point and home.js fans them out; it owns the transform entirely, so the
   centring is xPercent/yPercent there rather than a CSS translate it would have to add to */
.hmA-stack { position: relative; height: 54vh; }
.hmA-quote { position: absolute; left: 50%; top: 50%; width: 30vw; padding: 2.2em 2.2em 2em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); box-shadow: 0 30px 60px rgba(34, 34, 34, 0.08); }
.hmA-quote blockquote { font-size: 1.2em; line-height: 1.45; font-weight: 400; letter-spacing: -0.01em; }
.hmA-quote blockquote::before { content: "\201C"; color: var(--ac-red); }
.hmA-quote .who { display: flex; align-items: center; gap: 0.8em; margin-top: 1.6em; font-size: 0.84em; color: var(--ac-muted); }
.hmA-quote .av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 100px; background: var(--ac-bg); border: 1px solid var(--ac-line-soft); overflow: hidden; }
.hmA-quote .av img { width: 70%; height: auto; }

.hmA-cta { padding-bottom: 0; }
.hmA-cta-frame { position: relative; }
.hmA-cta .hm-frame { aspect-ratio: 21 / 9; border-radius: var(--r-xl); }
.hmA-cta .over { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ac-bg); border-radius: var(--r-xl); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)); }
.hmA-cta .over .hm-h { margin: 0.4em 0 0.7em; }

/* ============================================================ direction B - bands
   Lumiere's rhythm: photographic triptychs, a manifesto trio, a ticker, a split of image and
   panel, then ink. Full-bleed backgrounds alternate under contained content. */
.hmB-ritual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
.hmB-ritual .hm-frame { aspect-ratio: 3 / 4; }
.hmB-ritual .lab { position: absolute; left: 1.2em; top: 1.2em; z-index: 1; font-size: 0.78em; padding: 0.4em 0.95em; border-radius: 100px; background: rgba(245, 246, 238, 0.86); color: var(--ac-ink); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hmB-ritual .cap { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.1em; font-size: 0.92em; }
.hmB-ritual .cap .m { color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hmB-ritual a:hover .cap { color: var(--ac-red); }
.hmB-ritual .hm-frame img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hmB-ritual a:hover .hm-frame img { transform: scale(1.04); }

.hmB-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; margin-top: 8vh; }
.hmB-trio h3 { font-size: 1.1em; font-weight: 550; margin: 1.2em 0 0.55em; }
.hmB-trio p { font-size: 0.92em; line-height: 1.6; color: var(--ac-muted); }

.hmB-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.hmB-split .hm-frame { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
.hmB-split .copy { border-radius: var(--r-xl); background: var(--ac-panel); padding: 6vw; display: flex; flex-direction: column; justify-content: center; }
.hmB-split .copy .hm-h { margin: 1em 0 1em; }
.hmB-split .copy .hm-actions { margin-top: 2.2em; }

.hmB-dark .hmB-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4vw; align-items: center; }
.hmB-dark .hm-h { margin: 1em 0 1em; }
.hmB-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 2.4em; }
.hmB-chips span { font-size: 0.82em; padding: 0.45em 1em; border-radius: 100px; border: 1px solid rgba(245, 246, 238, 0.28); }
.hmB-dark .hm-actions { margin-top: 2.4em; }
.hmB-group { position: relative; height: 62vh; }
.hmB-group img { position: absolute; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); will-change: transform; }
.hmB-group .g1 { left: 6%; top: 4%; width: 48%; }
.hmB-group .g2 { right: 0; top: 34%; width: 44%; }
.hmB-group .g3 { left: 32%; bottom: 0; width: 32%; }

.hmB-favs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vw; }
.hmB-favs .hm-pcard .art { margin-top: 1.2em; }

.hmB-time { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 10vh 6vw; color: var(--ac-bg); }
.hmB-time .bg { position: absolute; inset: 0; background: var(--ac-ink); }
.hmB-time .bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(0.62) saturate(0.9); transform: scale(1.12); }
.hmB-time .in { position: relative; }
.hmB-time .rows { margin-top: 6vh; }
.hmB-time .row { display: grid; grid-template-columns: 3em 1fr 1.5fr; gap: 2.5vw; padding: 4vh 0; border-top: 1px solid rgba(245, 246, 238, 0.2); align-items: start; }
.hmB-time .row:last-child { border-bottom: 1px solid rgba(245, 246, 238, 0.2); }
.hmB-time .row h3 { font-size: 1.6vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.hmB-time .row h4 { font-weight: 550; font-size: 1.05em; margin-bottom: 0.45em; }
.hmB-time .row p { font-size: 0.92em; line-height: 1.6; color: rgba(245, 246, 238, 0.7); }

.hmB-quote { display: grid; grid-template-columns: 7fr 4fr; gap: 6vw; align-items: center; }
.hmB-quote .q { font-size: 2.3vw; font-weight: 400; line-height: 1.3; letter-spacing: -0.02em; }
.hmB-quote .q::before { content: "\201C"; color: var(--ac-red); }
.hmB-quote .who { margin-top: 1.4em; font-size: 0.9em; color: var(--ac-muted); }
.hmB-quote .ctr { display: flex; align-items: center; gap: 1.6em; margin-top: 4vh; font-size: 0.82em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hmB-quote .hm-frame { aspect-ratio: 4 / 5; }
.hm-rot { position: relative; }
.hm-rot [data-item][hidden] { display: none; }

/* ============================================================ direction C - statement
   Pureglow's confidence: a giant statement with the products set inline, four tall tiles, a
   band in the brand red, then the shop itself - a strip you can buy from - and the questions. */
.hmC-statement { font-size: 3.1vw; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; text-align: center; }
.hmC-statement .w { display: inline-block; }
.hmC-statement .th { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: 0.3em; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); vertical-align: -0.16em; margin: 0 0.1em; overflow: hidden; }
.hmC-statement .th img { width: 82%; height: auto; }
.hmC-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5em; margin-top: 6vh; }
.hmC-chips span { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.85em; padding: 0.5em 1.05em; border-radius: 100px; border: 1px solid var(--ac-line); }
.hmC-chips svg { width: 1em; height: 1em; }

.hmC-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4vw; }
.hmC-tiles .t { display: block; }
.hmC-tiles .t:nth-child(even) { margin-top: 7vh; }
.hmC-tiles .hm-frame { aspect-ratio: 3 / 4; }
.hmC-tiles .cap { position: absolute; left: 1.3em; right: 1.3em; bottom: 1.2em; z-index: 1; color: var(--ac-bg); font-size: 0.92em; line-height: 1.3; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35); }
.hmC-tiles .cap small { display: block; font-size: 0.82em; opacity: 0.8; margin-top: 0.2em; }
.hmC-tiles .hm-frame img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hmC-tiles .t:hover .hm-frame img { transform: scale(1.04); }
.hmC-tiles .hm-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); pointer-events: none; }

.hmC-band { padding: 16vh 0 14vh; overflow: hidden; }
.hmC-band .hm-h.is-xl { max-width: 58vw; margin-top: 1.2em; }
.hmC-band .lede { margin-top: 1.6em; max-width: 30em; }
.hmC-band .hm-actions { margin-top: 2.6em; }
.hmC-band .feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; margin-top: 10vh; padding-top: 4vh; border-top: 1px solid rgba(245, 246, 238, 0.18); }
.hmC-band .feats h3 { font-size: 1em; font-weight: 550; margin-bottom: 0.45em; }
.hmC-band .feats p { font-size: 0.88em; line-height: 1.58; color: rgba(245, 246, 238, 0.7); }
.hmC-band .float { position: absolute; right: 4vw; top: 4vh; width: 36vw; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); will-change: transform; pointer-events: none; }

.hmC-discover { display: grid; grid-template-columns: 6fr 5fr; gap: 8vw; align-items: start; }
.hmC-discover .hm-h { margin: 1em 0 1em; }

.hmC-shop .hm-frame.is-wide { aspect-ratio: 21 / 9; border-radius: var(--r-xl); }
.hmC-shop .bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-top: 10vh; margin-bottom: 4vh; }
.hmC-shop .bar .hm-h { margin-top: 0.5em; }
/* the strip bleeds to both edges but snaps its cards to the house gutter */
.hmC-strip { display: flex; gap: 1.4vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--hm-gut); scroll-behavior: smooth; padding: 0.5vh var(--hm-gut) 2vh; margin: 0 calc(-1 * var(--hm-gut)); scrollbar-width: none; }
.hmC-strip::-webkit-scrollbar { display: none; }
.hmC-strip .hm-pcard { flex: 0 0 15.6vw; scroll-snap-align: start; }

.hmC-testi .avs { display: flex; justify-content: center; margin-bottom: 4vh; }
.hmC-testi .avs span { display: grid; place-items: center; width: 3.6em; height: 3.6em; border-radius: 100px; background: var(--ac-panel); border: 2px solid var(--ac-bg); margin-left: -0.9em; overflow: hidden; }
.hmC-testi .avs span:first-child { margin-left: 0; }
.hmC-testi .avs img { width: 68%; height: auto; }
.hmC-testi .q { font-size: 2vw; font-weight: 400; line-height: 1.35; letter-spacing: -0.02em; max-width: 52vw; margin: 0 auto; }
.hmC-testi .who { margin-top: 1.4em; font-size: 0.9em; color: var(--ac-muted); }
.hmC-testi .ctr { display: flex; align-items: center; justify-content: center; gap: 1.6em; margin-top: 4vh; font-size: 0.82em; color: var(--ac-muted); font-variant-numeric: tabular-nums; }

.hmC-kit { display: grid; grid-template-columns: 7fr 5fr; gap: 5vw; align-items: center; }
.hmC-kit .hm-h { margin: 1em 0 1em; }
.hmC-kit .items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vw; margin-top: 5vh; }
.hmC-kit .items a { display: block; text-align: center; font-size: 0.84em; line-height: 1.35; }
.hmC-kit .items .art { aspect-ratio: 1; border-radius: var(--r-md); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); display: grid; place-items: center; margin-bottom: 0.7em; transition: background 0.3s, border-color 0.3s; }
.hmC-kit .items a:hover .art { background: var(--alda-paper); border-color: var(--ac-line); }
.hmC-kit .items img { width: 72%; height: auto; }
.hmC-kit .items .m { display: block; color: var(--ac-muted); font-size: 0.9em; }
.hmC-kit .hm-actions { margin-top: 5vh; }
.hmC-kit .hm-frame { aspect-ratio: 4 / 5; }

.hmC-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 6vw; align-items: start; }
.hmC-faq .hm-h { margin: 1em 0 1em; }

/* ============================================================ the navbars
   One shelf, three doors, each with the shelf's imagery in it: A opens a mega panel under the
   bar, one pane per category; B drops a full-screen curtain with the categories at display size
   beside a tall visual; C slides a drawer in from the right and pushes the page aside. home.js
   opens and closes them; the bars' icons turn in CSS. */
.mn-nav.is-mega { justify-content: space-between; }
.mn-links { display: flex; gap: 0.2em; }
.mn-link { display: inline-flex; align-items: center; gap: 0.55em; background: none; border: 0; padding: 0.45em 0.95em; border-radius: 100px; font: inherit; font-size: 0.85em; text-transform: lowercase; color: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
.mn-link .ac-chev { width: 0.4em; height: 0.4em; border-color: currentColor; transform: rotate(45deg) translate(-0.1em, -0.1em); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mn-link:hover, .mn-link.is-on { background: rgba(245, 246, 238, 0.14); }
.ld-nav.is-ink .mn-link:hover, .ld-nav.is-ink .mn-link.is-on { background: rgba(34, 34, 34, 0.07); }
.mn-link.is-on .ac-chev { transform: rotate(-135deg) translate(-0.05em, 0.05em); }
.mn-link:focus-visible, .mn-tab:focus-visible, .mn-toggle:focus-visible, .mn-burger:focus-visible, .mn-cat:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 2px; }
.mn-shop { display: none; }
.mn-scrim { position: fixed; inset: 0; z-index: 5; background: rgba(34, 34, 34, 0.45); }
.is-mega ~ .mn-scrim { background: rgba(34, 34, 34, 0.18); }
html.mn-open { overflow: hidden; }
/* the bar goes cream over a dark curtain or a dimmed page; the drawer's right side sits over
   the cream drawer itself, so that end stays ink */
.ld-nav.is-curtain.is-open, .ld-nav.is-drawer.is-open { color: var(--ac-bg); }
.ld-nav.is-open .ac-navlink { border-color: rgba(245, 246, 238, 0.4); }
.ld-nav.is-drawer.is-open .ld-navright { color: var(--ac-ink); }
.ld-nav.is-drawer.is-open .ld-navright .ac-navlink { border-color: var(--ac-line); }
/* the menu button's icon: two or three bars that become a cross */
.mn-toggle, .mn-burger { display: inline-flex; align-items: center; gap: 0.6em; cursor: pointer; font: inherit; font-size: 0.85em; text-transform: lowercase; }
.mn-burger { padding: 0.5em 0.85em; }
.mn-ico { position: relative; display: inline-block; width: 1.05em; height: 0.75em; }
.mn-ico i { position: absolute; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; border-radius: 1px; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.mn-toggle .mn-ico i:nth-child(1) { top: 22%; }
.mn-toggle .mn-ico i:nth-child(2) { top: 78%; }
.mn-burger .mn-ico i:nth-child(1) { top: 5%; }
.mn-burger .mn-ico i:nth-child(2) { top: 50%; }
.mn-burger .mn-ico i:nth-child(3) { top: 95%; }
.mn-toggle.is-x .mn-ico i, .mn-burger.is-x .mn-ico i { top: 50%; }   /* as specific as the resting positions above */
.is-x .mn-ico i:nth-child(1) { transform: rotate(45deg); }
.mn-toggle.is-x .mn-ico i:nth-child(2) { transform: rotate(-45deg); }
.mn-burger.is-x .mn-ico i:nth-child(2) { opacity: 0; }
.mn-burger.is-x .mn-ico i:nth-child(3) { transform: rotate(-45deg); }

/* A - the mega panel */
.mn-mega { position: fixed; left: 8.9vw; right: 8.9vw; top: 11.6vh; z-index: 5; border-radius: var(--r-xl); background: var(--ac-panel); color: var(--ac-ink); border: 1px solid var(--ac-line-soft); box-shadow: 0 40px 90px rgba(34, 34, 34, 0.14); font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.mn-mega *, .mn-curtain *, .mn-drawer * { box-sizing: border-box; }
.mn-mega a, .mn-curtain a, .mn-drawer a { color: inherit; text-decoration: none; }
.mn-mega a:focus-visible, .mn-curtain a:focus-visible, .mn-drawer a:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 3px; border-radius: 4px; }
.mn-tabs { display: none; }
.mn-pane { display: grid; grid-template-columns: 5fr 7fr; gap: 3vw; padding: 3vh 3vw 3.4vh; }
.mn-pane[hidden] { display: none; }
.mn-list .hm-eyebrow { margin-bottom: 0.8em; }
.mn-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 1.05em 0; border-top: 1px solid var(--ac-line-soft); }
.mn-sub .n { font-size: 1.25em; font-weight: 550; letter-spacing: -0.02em; transition: color 0.2s; }
.mn-sub .t { font-size: 0.8em; color: var(--ac-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mn-sub:hover .n { color: var(--ac-red); }
.mn-list .hm-btn { margin-top: 1.6em; }
.mn-imgs { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.2vw; }
.mn-imgs a { display: block; height: 100%; }
.mn-imgs .hm-frame { height: 100%; min-height: 32vh; }
.mn-imgs .hm-frame img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mn-imgs a:hover .hm-frame img { transform: scale(1.04); }
.mn-imgs .cap { position: absolute; left: 1em; bottom: 0.9em; z-index: 1; font-size: 0.85em; padding: 0.4em 0.95em; border-radius: 100px; background: rgba(245, 246, 238, 0.88); color: var(--ac-ink); }

/* B - the curtain */
.mn-curtain { position: fixed; inset: 0; z-index: 5; background: var(--ac-ink); color: var(--ac-bg); overflow: auto; font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.mn-curtain-in { min-height: 100%; padding: 15vh 8.9vw 5vh; display: grid; grid-template-columns: 7fr 5fr; gap: 5vw; align-items: center; }
.mn-row { display: grid; grid-template-columns: 3em minmax(0, 1fr); column-gap: 1em; align-items: start; padding: 3.2vh 0; border-top: 1px solid rgba(245, 246, 238, 0.16); }
.mn-row:last-child { border-bottom: 1px solid rgba(245, 246, 238, 0.16); }
.mn-row .i { font-size: 0.72em; letter-spacing: 0.14em; color: rgba(245, 246, 238, 0.55); padding-top: 1.1em; }
.mn-row .n { display: block; font-size: 5.2vw; font-weight: 550; letter-spacing: -0.04em; line-height: 0.95; transition: color 0.25s; }
.mn-row:hover .n { color: rgba(245, 246, 238, 0.7); }
.mn-row .subs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 1.2em; }
.mn-row .subs a { font-size: 0.82em; padding: 0.42em 0.95em; border-radius: 100px; border: 1px solid rgba(245, 246, 238, 0.28); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.mn-row .subs a:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.mn-visual .hm-frame { aspect-ratio: 3 / 4; background: rgba(245, 246, 238, 0.06); }
.mn-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.mn-visual img.is-on { opacity: 1; }
.mn-visual .cap { margin-top: 1em; font-size: 0.85em; color: rgba(245, 246, 238, 0.6); }
.mn-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2.2em; align-self: end; font-size: 0.85em; color: rgba(245, 246, 238, 0.6); }
.mn-foot a:hover { color: var(--ac-bg); }

/* C - the drawer */
.mn-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 5; width: 40vw; min-width: 400px; background: var(--ac-bg); color: var(--ac-ink); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: -30px 0 90px rgba(34, 34, 34, 0.18); overflow: auto; font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.mn-drawer-in { min-height: 100%; padding: 14vh 3.4vw 5vh; display: flex; flex-direction: column; }
.mn-acc { border-top: 1px solid var(--ac-line-soft); }
.mn-acc:last-child { border-bottom: 1px solid var(--ac-line-soft); }
.mn-cat { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1em; background: none; border: 0; padding: 2.4vh 0; font: inherit; font-size: 4.4vw; font-weight: 550; letter-spacing: -0.045em; line-height: 1; color: inherit; cursor: pointer; text-align: left; }
.mn-cat .plus { position: relative; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 100px; border: 1px solid var(--ac-line); transition: background 0.3s, border-color 0.3s; }
.mn-cat .plus::before, .mn-cat .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.85rem; height: 1.2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mn-cat .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.mn-cat:hover .plus { border-color: var(--ac-red); color: var(--ac-red); }
.mn-cat[aria-expanded="true"] .plus { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.mn-cat[aria-expanded="true"] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.mn-acc-body { height: 0; overflow: hidden; }
.mn-acc-body > div { display: grid; gap: 0.15em; padding: 0 0 2.4vh; }
.mn-acc-body a { font-size: 1.08em; padding: 0.35em 0; transition: color 0.2s; }
.mn-acc-body a:hover { color: var(--ac-red); }
.mn-acc-body .all { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.7em; font-size: 0.88em; color: var(--ac-muted); }
.mn-acc-body .all svg { width: 0.8em; height: 0.8em; }
.mn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vw; margin-top: auto; padding-top: 6vh; }
.mn-tiles .hm-frame { aspect-ratio: 1; border-radius: var(--r-md); }
.mn-tiles .hm-frame img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mn-tiles a:hover .hm-frame img { transform: scale(1.05); }
.mn-tiles .cap { position: absolute; left: 0.9em; bottom: 0.8em; z-index: 1; color: var(--ac-bg); font-size: 0.85em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.mn-drawer .mn-foot { margin-top: 4vh; color: var(--ac-muted); }
.mn-drawer .mn-foot button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mn-drawer .mn-foot a:hover, .mn-drawer .mn-foot button:hover { color: var(--ac-ink); }
.hm-page { position: relative; }

/* ============================================================ base page (grid-v2) */
.hm-grid-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-gut); align-items: start; padding-top: 6vh; border-top: 1px solid var(--ac-line-soft); margin-top: 8vh; }
.hm-grid-cta .hm-actions { margin-top: 1.6em; }

/* ============================================================ direction D - one continuous scroll
   Every section is a screen: 100vh, snapped to, transparent - home.js tweens main.hm's background
   per section (data-bg: cream / panel / ink) so the colour shifts under the whole page. Four of
   the screens are pinned and hold for a longer scroll: the showcase, the manifesto, the rail and
   the kitchen. Everything else here is the shared vocabulary (hm-h, hm-p, hm-btn, hm-pcard,
   hm-ccard, hmA-quote, hmC-kit) laid out one screen at a time. */
body.hmD .hm { background: var(--ac-bg); transition: color 0.6s; }
body.hmD .hm.is-dark { color: var(--ac-bg); }
.hmD-sec { min-height: 100vh; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; background: transparent; }
.hmD-sec > .hm-wrap { padding: 12vh 0; }
.hmD-sec .hm-h, .hmD-sec .hm-p, .hmD-sec .hm-eyebrow { transition: color 0.6s; }

/* 1 the statement: one word turns over inside the headline, masked to its own line */
.hmD-say .hmD-say-h { max-width: 82vw; margin: 0.35em auto 0; }
.hmD-rot { display: inline-grid; grid-template-columns: 1fr; vertical-align: baseline; overflow: hidden; color: var(--ac-red); text-align: left; }
.hmD-rot .w { grid-area: 1 / 1; white-space: nowrap; justify-self: start; }
.hmD-say .hmD-say-sub { max-width: 60vw; margin: 0.9em auto 0; }
.hmD-say .hm-p { margin: 3vh auto 0; text-align: center; }
.hmD-say .hmC-chips { margin-top: 4vh; }

/* 2 the showcase: the pan on a soft plinth, scaled by the scroll; four cards at four depths */
.hmD-show { overflow: hidden; }
.hmD-show-stage { position: relative; height: 100vh; }
.hmD-show-plinth { position: absolute; left: 50%; top: 50%; width: 48vw; height: 48vw; transform: translate(-50%, -50%); border-radius: 100%; background: radial-gradient(closest-side, #ffffff 0%, var(--ac-panel) 52%, rgba(251, 251, 245, 0) 100%); }
.hmD-show-img { position: absolute; left: 50%; top: 50%; width: 42vw; height: auto; filter: drop-shadow(0 40px 50px rgba(34, 34, 34, 0.22)); will-change: transform; }
.hmD-show-copy { position: absolute; left: 0; right: 0; top: 13vh; text-align: center; }
.hmD-show-copy .hm-h { margin-top: 0.6em; }
.hmD-show-card { position: absolute; color: var(--ac-ink); width: 17.5vw; padding: 1.4em 1.4em 1.5em; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--ac-line-soft); box-shadow: 0 24px 48px rgba(34, 34, 34, 0.07); will-change: transform; }
.hmD-show-card .hm-ic { margin-bottom: 1.1em; }
.hmD-show-card h3 { font-size: 1.02em; font-weight: 550; line-height: 1.3; margin-bottom: 0.4em; }
.hmD-show-card p { font-size: 0.85em; line-height: 1.55; color: var(--ac-muted); }
.hmD-show-card.p1 { left: var(--hm-gut); top: 20vh; }
.hmD-show-card.p2 { right: var(--hm-gut); top: 26vh; }
.hmD-show-card.p3 { left: calc(var(--hm-gut) + 3vw); bottom: 22vh; }
.hmD-show-card.p4 { right: calc(var(--hm-gut) + 2vw); bottom: 18vh; }
.hmD-show-buy { position: absolute; left: var(--hm-gut); right: var(--hm-gut); bottom: 5vh; display: flex; align-items: center; justify-content: space-between; gap: 2em; padding-top: 2.5vh; border-top: 1px solid var(--ac-line-soft); }
.hmD-show-buy .n { font-weight: 550; }
.hmD-show-buy .t { margin-left: 1em; color: var(--ac-muted); font-size: 0.9em; }

/* 3 the manifesto: words brighten as the scroll reads them; three products drift behind */
.hmD-read-stage { position: relative; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.hmD-read .hm-wrap { position: relative; z-index: 1; }
.hmD-read .txt { font-size: 2.55vw; font-weight: 400; line-height: 1.32; letter-spacing: -0.015em; text-align: center; margin: 3vh 0 0; }
.hmD-read .txt .w { display: inline-block; color: rgba(245, 246, 238, 0.2); }
.hmD-read .layer { position: absolute; height: auto; opacity: 0.5; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); will-change: transform; pointer-events: none; }
.hmD-read .l1 { left: 2vw; top: 8vh; width: 16vw; }
.hmD-read .l2 { right: -3vw; top: 52vh; width: 22vw; }
.hmD-read .l3 { left: 13vw; bottom: -6vh; width: 15vw; }

/* 4 the rail: the head above, nine cards on one track the scroll slides sideways */
.hmD-rail { overflow: hidden; }
.hmD-rail-stage { height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 6vh; }
.hmD-rail .bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; }
.hmD-rail .bar .hm-h { margin-top: 0.5em; }
.hmD-rail .bar .hm-p { max-width: 24em; text-align: right; }
.hmD-rail .track { display: flex; gap: 1.4vw; padding: 0 var(--hm-gut); width: max-content; will-change: transform; }
.hmD-rail .track .hm-pcard { flex: 0 0 21vw; }

/* 5 the materials: a sticky photograph beside four blocks; the block in the middle owns the picture */
.hmD-matsec > .hm-wrap { padding: 0; }
.hmD-mats { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; }
.hmD-mats .vis { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
.hmD-mats .stack { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; border-radius: var(--r-xl); overflow: hidden; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.hmD-mats .stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hmD-mats .stack img.is-on { opacity: 1; transform: scale(1); }
.hmD-mats .stack .pend { position: absolute; left: 1.1em; bottom: 0.9em; font-size: 0.78em; color: var(--ac-muted); opacity: 0; }
.hmD-mats .stack .pend.is-on { opacity: 1; }
.hmD-mats .blks { padding: 14vh 0; }
.hmD-mats .blk { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity 0.6s; }
.hmD-mats .blk.is-on { opacity: 1; }
.hmD-mats .blk .hm-h { margin: 0.8em 0 0.8em; }

/* 6 three layers: the kadai wall in section, three strokes drawn by the scroll, the kadai beside */
.hmD-ply-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 5vw; align-items: center; }
.hmD-ply .copy .hm-h { margin: 0.8em 0 0.9em; }
.hmD-ply .copy .hm-actions { margin-top: 2.4em; }
.hmD-ply .fig { position: relative; padding-right: 10vw; }
.hmD-ply .fig > svg { width: 100%; height: auto; display: block; overflow: visible; }
.hmD-ply .p { fill: none; stroke: var(--ac-bg); stroke-linecap: round; stroke-width: 3; }
.hmD-ply .p.core { stroke: rgba(245, 246, 238, 0.42); stroke-width: 14; }
.hmD-ply .lab { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; fill: rgba(245, 246, 238, 0.72); }
.hmD-ply .lab .n { fill: var(--ac-red); }
.hmD-ply .prod { position: absolute; right: -7vw; bottom: -12vh; width: 24vw; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); will-change: transform; pointer-events: none; }

/* 6 the film: the tri-ply story cut to frames, scrubbed by the scroll on a pinned canvas. The
   captions read along per scene at the left over a soft scrim; a rail of three ticks at the right
   names the scenes and glides to them; the scroll rests softly on each scene's start (home.js). */
.hmD-film-stage { position: relative; height: 100vh; overflow: hidden; background: #0b0b0a center / cover no-repeat; }
.hmD-film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hmD-film-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(11, 11, 10, 0.78), rgba(11, 11, 10, 0.42) 32%, rgba(11, 11, 10, 0) 56%), linear-gradient(to bottom, rgba(11, 11, 10, 0.5), rgba(11, 11, 10, 0) 18%); }
.hmD-film-copy { position: absolute; left: var(--hm-gut); top: 0; bottom: 0; width: 31vw; display: grid; align-items: center; color: var(--ac-bg); }
.hmD-film-copy .cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.hmD-film-copy .cap .hm-h { margin: 0.7em 0 0.85em; }
.hmD-film-copy .cap .hm-p { color: rgba(245, 246, 238, 0.86); }
.hmD-film-copy .cap .hm-p .w { display: inline-block; color: rgba(245, 246, 238, 0.28); }
.hmD-film-copy .cap .hm-actions { margin-top: 2.2em; }
.hmD-film-copy .layers { list-style: none; margin: 2em 0 0; padding: 0; display: grid; gap: 0.7em; }
.hmD-film-copy .layers li { display: flex; align-items: baseline; gap: 0.9em; font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 246, 238, 0.32); transition: color 0.5s; }
.hmD-film-copy .layers li b { font-weight: 550; color: var(--ac-red); opacity: 0.55; transition: opacity 0.5s; }
.hmD-film-copy .layers li.is-on { color: rgba(245, 246, 238, 0.92); }
.hmD-film-copy .layers li.is-on b { opacity: 1; }
/* the rail: three ticks, the active one filled, its label shown; a counter beneath */
.hmD-film-rail { position: absolute; right: var(--hm-gut); top: 50%; transform: translateY(-50%); display: grid; gap: 2.2vh; justify-items: end; color: var(--ac-bg); }
.hmD-film-rail button { display: inline-flex; align-items: center; gap: 0.9em; background: none; border: 0; padding: 0.2em 0; font: inherit; font-size: 0.74em; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245, 246, 238, 0.5); cursor: pointer; transition: color 0.3s; }
.hmD-film-rail button .lab { opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.3s; }
.hmD-film-rail button i { width: 0.55em; height: 0.55em; border-radius: 100px; border: 1px solid rgba(245, 246, 238, 0.55); background: transparent; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.hmD-film-rail button:hover, .hmD-film-rail button.is-on { color: var(--ac-bg); }
.hmD-film-rail button:hover .lab, .hmD-film-rail button.is-on .lab { opacity: 1; transform: none; }
.hmD-film-rail button.is-on i { background: var(--ac-bg); border-color: var(--ac-bg); transform: scale(1.25); }
/* keyboard focus on the film: the chapter's name shows, cream, with a 2px cream underline */
.hmD-film-rail button:focus-visible { outline: 0; color: var(--ac-bg); }
.hmD-film-rail button:focus-visible .lab { opacity: 1; transform: none; text-decoration: underline 2px; text-underline-offset: 5px; }
.hmD-film-rail .ctr { font-size: 0.72em; letter-spacing: 0.14em; color: rgba(245, 246, 238, 0.5); font-variant-numeric: tabular-nums; margin-top: 1vh; }
.hmD-film-rail .ctr b { font-weight: 550; color: var(--ac-bg); }
/* a thin progress line along the bottom */
.hmD-film-line { position: absolute; left: var(--hm-gut); right: var(--hm-gut); bottom: 5vh; height: 1px; background: rgba(245, 246, 238, 0.16); }
.hmD-film-line i { display: block; height: 100%; width: 100%; background: var(--ac-bg); transform-origin: left; transform: scaleX(0); }
/* the nudge: shows until the film starts moving */
.hmD-film-nudge { position: absolute; left: 50%; bottom: 7.5vh; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.7em; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 246, 238, 0.55); transition: opacity 0.5s; }
.hmD-film-nudge .ac-chev { width: 0.4em; height: 0.4em; transform: rotate(45deg); margin-top: -0.2em; }
.hmD-film-stage.is-moving .hmD-film-nudge { opacity: 0; }

@media (max-width: 767px) {
  /* Phones skip the film (the user's call, 2026-09-28); home.js pins it only from 768px up. */
  .hmD-sec.hmD-film { display: none; }
  .hmD-film-stage { height: 100vh; height: 100svh; }
  .hmD-film-scrim { background: linear-gradient(to top, rgba(11, 11, 10, 0.86), rgba(11, 11, 10, 0.4) 42%, rgba(11, 11, 10, 0) 62%), linear-gradient(to bottom, rgba(11, 11, 10, 0.5), rgba(11, 11, 10, 0) 18%); }
  .hmD-film-copy { left: var(--hm-gut); right: var(--hm-gut); width: auto; top: auto; bottom: 12vh; display: grid; align-items: end; }
  .hmD-film-copy .cap .hm-h { font-size: 7.4vw; }
  .hmD-film-copy .layers { gap: 0.45em; margin-top: 1.4em; }
  .hmD-film-rail { right: var(--hm-gut); top: auto; bottom: 5vh; transform: none; grid-auto-flow: column; gap: 1.6em; }
  .hmD-film-rail button .lab, .hmD-film-rail .ctr { display: none; }
  .hmD-film-line { display: none; }
  .hmD-film-nudge { display: none; }
}

/* 7 the kitchen: a photograph that opens from a slot, the story over its lower third */
.hmD-kitchen-stage { position: relative; height: 100vh; overflow: hidden; }
.hmD-kitchen .photo { position: absolute; inset: 0; background: var(--ac-panel); will-change: clip-path; }
.hmD-kitchen .photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* d-kitchen-family is 21:9: wide stages trim the top lightly (the family's heads sit high), narrower ones trim the empty counter on the left */
.hmD-kitchen .photo img[src*="d-kitchen-family"] { object-position: 88% 30%; }
.hmD-kitchen .photo .pend { position: absolute; left: 1.1em; bottom: 0.9em; font-size: 0.78em; color: var(--ac-muted); }
.hmD-kitchen .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0) 24%); pointer-events: none; }
.hmD-kitchen .copy { position: absolute; left: var(--hm-gut); right: var(--hm-gut); bottom: 8vh; color: var(--ac-bg); display: grid; grid-template-columns: 5fr 7fr; gap: 4vw; align-items: end; }
.hmD-kitchen .copy .hm-h { margin-top: 0.6em; }
.hmD-kitchen .copy .hm-actions { margin-top: 2.5vh; }
.hmD-kitchen .row { display: grid; grid-template-columns: 3em 1fr 1.5fr; gap: 2vw; padding: 2.4vh 0; border-top: 1px solid rgba(245, 246, 238, 0.25); align-items: start; }
.hmD-kitchen .row:last-child { border-bottom: 1px solid rgba(245, 246, 238, 0.25); }
.hmD-kitchen .row h3 { font-size: 1.3vw; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.hmD-kitchen .row h4 { font-weight: 550; font-size: 1em; margin-bottom: 0.35em; }
.hmD-kitchen .row p { font-size: 0.88em; line-height: 1.55; color: rgba(245, 246, 238, 0.72); }

/* 8 the shelves: the category cards' shape, holding shelves; the categories as pills under */
.hmD-catlinks { margin-top: 6vh; }

@media (max-width: 767px) {
  .hmD-sec { min-height: auto; display: block; }
  .hmD-sec > .hm-wrap { padding: 10vh 0; }
  .hmD-say .hmD-say-h, .hmD-say .hmD-say-sub { max-width: none; }
  .hmD-show-stage { height: auto; padding: 8vh 0 6vh; display: flex; flex-direction: column; gap: 3vh; }
  .hmD-show-plinth { display: none; }
  .hmD-show-img { position: relative; left: auto; top: auto; width: 70vw; margin: 0 auto; transform: none !important; }
  .hmD-show-copy { position: relative; top: auto; padding: 0 var(--hm-gut); }
  .hmD-show-card { position: relative; width: auto; margin: 0 var(--hm-gut); left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .hmD-show-buy { position: relative; margin: 2vh var(--hm-gut) 0; left: auto; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; }
  .hmD-read-stage { height: auto; padding: 10vh 0; }
  .hmD-read .txt { font-size: 6.2vw; }
  .hmD-read .layer { display: none; }
  .hmD-rail-stage { height: auto; padding: 10vh 0; }
  .hmD-rail .bar { flex-direction: column; align-items: flex-start; }
  .hmD-rail .bar .hm-p { text-align: left; }
  .hmD-rail .track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--hm-gut); scrollbar-width: none; transform: none !important; }
  .hmD-rail .track::-webkit-scrollbar { display: none; }
  .hmD-rail .track .hm-pcard { flex: 0 0 66vw; scroll-snap-align: start; }
  .hmD-mats { grid-template-columns: 1fr; gap: 0; }
  .hmD-mats .vis { position: relative; height: auto; }
  .hmD-mats .stack { max-height: none; aspect-ratio: 4 / 3; }
  .hmD-mats .blks { padding: 4vh 0 0; }
  .hmD-mats .blk { min-height: 0; padding: 4vh 0; opacity: 1; }
  .hmD-ply-grid { grid-template-columns: 1fr; }
  .hmD-ply .fig { padding-right: 0; }
  .hmD-ply .prod { position: relative; right: auto; bottom: auto; width: 60vw; margin: 2vh auto 0; display: block; }
  .hmD-kitchen-stage { height: auto; }
  .hmD-kitchen .photo { position: relative; aspect-ratio: 4 / 5; clip-path: none !important; }
  .hmD-kitchen .photo img[src*="d-kitchen-family"] { object-position: 62% 50%; }
  .hmD-kitchen .shade { display: none; }
  .hmD-kitchen .copy { position: relative; grid-template-columns: 1fr; padding: 5vh var(--hm-gut) 6vh; left: auto; right: auto; bottom: auto; color: inherit; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .hmD-kitchen .copy .hm-eyebrow, .hmD-kitchen .copy .hm-h, .hmD-kitchen .rows .row, .hmD-kitchen .copy .hm-actions { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .hmD-kitchen .copy .hm-eyebrow { color: var(--ac-muted); }
  .hmD-kitchen .copy .hm-btn { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
  .hmD-kitchen .copy .hm-ic { background: var(--ac-bg); border-color: var(--ac-line-soft); color: var(--ac-ink); }
  .hmD-kitchen .row { grid-template-columns: 3em 1fr; border-color: var(--ac-line-soft); }
  .hmD-kitchen .row > div { grid-column: 2; }
  .hmD-kitchen .row h3 { font-size: 1.1em; }
  .hmD-kitchen .row p { color: var(--ac-muted); }
}

/* ============================================================ mobile */
@media (max-width: 767px) {
  .hm { font-size: 15px; }
  .hm-sec { padding: 10vh 0; }
  .hm-wrap, .hm-wrap.is-narrow { width: 92vw; }
  .hm-wrap.is-wide { width: 96vw; }
  .hm-h.is-xl { font-size: 12vw; }
  .hm-h.is-lg { font-size: 9vw; }
  .hm-h.is-md { font-size: 6.6vw; }
  .hm-h.is-sm { font-size: 5vw; }
  .hm-cats { grid-template-columns: 1fr; }
  /* the menus on a phone: the mega panel becomes a tabbed sheet, the curtain a list, the drawer full width */
  .mn-links { display: none; }
  .mn-shop { display: inline-block; }
  .mn-mega { left: 3vw; right: 3vw; top: 9vh; max-height: 84vh; overflow: auto; }
  .mn-tabs { display: flex; gap: 0.4em; padding: 2.2vh 4vw 0; }
  .mn-tab { font: inherit; font-size: 0.82em; padding: 0.45em 1em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: inherit; cursor: pointer; }
  .mn-tab.is-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
  .mn-pane { grid-template-columns: 1fr; padding: 2vh 4vw 3vh; gap: 3vh; }
  .mn-imgs { grid-template-columns: 1fr 1fr; }
  .mn-imgs .hm-frame { min-height: 0; aspect-ratio: 4 / 3; }
  .mn-curtain-in { grid-template-columns: 1fr; padding: 12vh 4vw 4vh; align-items: start; gap: 4vh; }
  .mn-row .n { font-size: 11vw; }
  .mn-visual { display: none; }
  .mn-drawer { width: 100vw; min-width: 0; border-radius: 0; }
  .ld-nav.is-drawer.is-open { color: var(--ac-ink); }
  .mn-drawer-in { padding: 12vh 6vw 5vh; }
  .mn-cat { font-size: 10vw; }
  .hm-marquee span { font-size: 7vw; padding: 0 3vw; }
  .hm-marquee i { width: 1.6vw; height: 1.6vw; }
  .hm-foot { padding: 10vh 4vw 3vh; }
  .hm-foot-top { grid-template-columns: 1fr 1fr; }
  .hm-news { grid-column: 1 / -1; }
  .hm-foot-top > div:last-child { grid-column: 1 / -1; }
  .hm-foot-mark { margin-top: 8vh; }
  .hm-foot-legal { flex-direction: column; gap: 0.4em; }
  .hm-foot .prod { display: none; }

  .hmA-plinth { height: auto; padding: 8vh 0 6vh; }
  .hmA-hero-img { position: relative; left: auto; top: auto; width: 70vw; margin: 0 auto; transform: none; }
  .hmA-float { position: static; width: auto; margin: 4vw 4vw 0; }
  .hmA-buy { flex-direction: column; align-items: flex-start; }
  .hmA-mat-head, .hmA-mat { grid-template-columns: 1fr; gap: 4vh; }
  .hmA-mat-imgs .hm-frame:nth-child(2) { margin-top: 0; }
  .hmA-stack { height: auto; display: grid; gap: 3vw; }
  .hmA-quote { position: static; width: auto; transform: none !important; }
  .hmA-cta .hm-frame { aspect-ratio: 4 / 5; }

  .hmB-ritual, .hmB-trio, .hmB-split, .hmB-dark .hmB-grid, .hmB-favs, .hmB-quote { grid-template-columns: 1fr; }
  .hmC-strip { scroll-padding: 0 4vw; }
  .hmB-split .copy { padding: 10vw 7vw; }
  .hmB-group { height: 50vh; }
  .hmB-time { padding: 8vh 6vw; }
  .hmB-time .row { grid-template-columns: 1fr; gap: 1.2vh; }
  .hmB-time .row h3 { font-size: 6vw; }
  .hmB-quote .q { font-size: 6.4vw; }

  .hmC-statement { font-size: 7.6vw; }
  .hmC-tiles { grid-template-columns: 1fr 1fr; }
  .hmC-tiles .t:nth-child(even) { margin-top: 5vh; }
  .hmC-band .hm-h.is-xl { max-width: none; }
  .hmC-band .feats { grid-template-columns: 1fr 1fr; }
  .hmC-band .float { position: relative; right: auto; top: auto; width: 70vw; margin: 6vh auto 0; }
  .hmC-discover, .hmC-kit, .hmC-faq { grid-template-columns: 1fr; gap: 5vh; }
  .hmC-shop .hm-frame.is-wide { aspect-ratio: 4 / 3; }
  .hmC-shop .bar { flex-direction: column; align-items: flex-start; }
  .hmC-strip { padding-left: 4vw; padding-right: 4vw; margin: 0 -4vw; }
  .hmC-strip .hm-pcard { flex-basis: 64vw; }
  .hmC-testi .q { font-size: 6vw; max-width: none; }
  .hmC-kit .items { grid-template-columns: 1fr 1fr; }
  .hm-grid-cta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-pcard, .hm-pcard .art img, .hm-btn, .hm-btn svg, .hmB-ritual .hm-frame img, .hmC-tiles .hm-frame img, .hm-acc-item .plus, .hm-acc-item .plus::before, .hm-acc-item .plus::after { transition: none; }
}
/* Home D: two deliberate scroll moments, with natural-flow sections between them. */
body.hmD .hmD-read { min-height: 60vh; }
body.hmD .hmD-read-stage { height: auto; padding: 12vh 0; }
body.hmD .hmD-read .txt { color: var(--ac-bg); font-size: clamp(26px, 3.2vw, 52px); }
body.hmD .hmD-rail { min-height: 0; }
body.hmD .hmD-rail-stage { height: auto; padding: 10vh 0; }
body.hmD .hmD-rail .track { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw 1.8vw; overflow: visible; transform: none; }
body.hmD .hmD-film-copy { width: 33vw; }
body.hmD .hmD-film-copy .cap .hm-h { margin: 0; font-size: clamp(32px, 4vw, 66px); line-height: 1.08; max-width: 9ch; }
body.hmD .hmD-film-end { min-height: 0; }
body.hmD .hmD-film-end > .hm-wrap { padding: 4vh 0 6vh; }
body.hmD .hmD-show-card .hm-ic { display: none; }
body.hmD .hmD-show-card { padding: 1.2em; }
body.hmD .hmD-kitchen .copy { grid-template-columns: 1fr; }
body.hmD .hmD-kit-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8vw; margin-top: 8vh; scroll-margin-top: 120px; }
@media (max-width: 767px) {
  body.hmD .hmD-rail .track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6vw 3vw; }
  body.hmD .hmD-film-copy { width: auto; bottom: 10vh; }
  body.hmD .hmD-film-copy .cap .hm-h { font-size: clamp(32px, 8vw, 48px); max-width: 12ch; }
  body.hmD .hmD-kit-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6vw 3vw; }
}
/* Scrub film: physically separate image and copy, including between scene transitions. */
body.hmD .hmD-film-stage { background: #000 !important; }
body.hmD .hmD-film-canvas { inset: 0; width: 100%; height: 100%; }
body.hmD .hmD-film-scrim { display: none; }
body.hmD .hmD-film-copy { left: var(--hm-gut); right: auto; width: 25%; }
body.hmD .hmD-film-stage.is-image-left .hmD-film-canvas { inset: 0; }
body.hmD .hmD-film-stage.is-image-left .hmD-film-copy { left: auto; right: 5vw; width: 24%; }
@media (max-width: 767px) {
  body.hmD .hmD-film-stage .hmD-film-canvas { inset: 0; width: 100%; height: 100%; }
  body.hmD .hmD-film-stage .hmD-film-copy { left: var(--hm-gut); right: var(--hm-gut); top: 14%; bottom: auto; width: auto; align-items: start; }
  body.hmD .hmD-film-stage .hmD-film-copy .cap .hm-h { max-width: 12ch; font-size: 7vw; }
}

/* Home D review: local surfaces, photographic introduction and a three-note reveal. */
body.hmD .hmD-sec[data-bg="cream"] { background: var(--ac-bg); color: var(--ac-ink); }
body.hmD .hmD-sec[data-bg="panel"] { background: var(--ac-panel); color: var(--ac-ink); }
body.hmD .hmD-sec[data-bg="ink"] { background: var(--alda-ink); color: var(--ac-bg); }
body.hmD .hmD-show { background: var(--ac-panel); color: var(--ac-ink); }
body.hmD .hm { overflow-x: clip; }
body.hmD .hmD-read { position: relative; }
body.hmD .hmD-say { min-height: 0; }
.hmD-intro-head { display: flex; justify-content: space-between; align-items: end; gap: 2em; margin-bottom: 5vh; }
.hmD-intro-head .hm-h, .hmD-notes-head .hm-h { font-size: clamp(38px, 5.2vw, 82px); line-height: 1.04; letter-spacing: -0.045em; margin-top: 0.35em; }
.hmD-intro-head em { font-style: normal; color: var(--ac-red); }
.hmD-intro-head > .hm-p { padding-bottom: 0.4em; }
.hmD-moments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5vw; align-items: start; }
.hmD-moment { position: relative; height: 49vh; min-height: 330px; border-radius: 24px; overflow: hidden; isolation: isolate; color: var(--ac-bg) !important; }
.hmD-moment:nth-child(2) { margin-top: 5vh; }
.hmD-moment-photo { position: absolute; inset: 0; }
.hmD-moment-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.hmD-moment:hover img { transform: scale(1.04); }
.hmD-moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%,rgba(0,0,0,.7)); z-index: -1; }
.hmD-moment-photo { z-index: -2; }
.hmD-moment-label { position: absolute; left: 2vw; right: 2vw; bottom: 3vh; }
.hmD-moment-label > span { font-size: 12px; letter-spacing: .14em; }
.hmD-moment-label h3 { display: flex; justify-content: space-between; align-items: center; font-size: clamp(30px,3.2vw,50px); letter-spacing: -.04em; margin: .2em 0; }
.hmD-moment-label h3 span { font-size: .6em; }
.hmD-moment-label p { font-size: 14px; opacity: .8; }
.hmD-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.7vw; margin-top: 6vh; perspective: 1000px; }
.hmD-note { display: flex; flex-direction: column; min-height: 400px; padding: 2vw; background: var(--alda-paper); border: 1px solid var(--ac-line-soft); border-radius: 24px; transform-origin: 50% 100%; }
.hmD-note:nth-child(2) { background: #e9ecdf; }
.hmD-note:nth-child(3) { background: #ece3d8; }
.hmD-note-top { display: flex; align-items: start; justify-content: space-between; gap: 1em; margin-bottom: 1.5em; }
.hmD-note-top > span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; padding-top: 1em; }
.hmD-note-top img { width: 90px; height: 90px; object-fit: cover; border-radius: 14px; background: var(--alda-paper); }
.hmD-note h3 { font-size: clamp(22px,2vw,32px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: .8em; }
.hmD-note blockquote { font-size: 17px; line-height: 1.5; margin: 0 0 2em; }
.hmD-note-who { display: flex; justify-content: space-between; margin-top: auto; padding-top: 1.4em; border-top: 1px solid var(--ac-line); font-size: 13px; }
.hmD-note-who span { color: var(--ac-muted); }
@media (max-width: 767px) {
  body.hmD .hmD-film-stage .hmD-film-copy { left: 4vw; right: auto; top: 0; bottom: 0; width: 32%; align-items: center; }
  body.hmD .hmD-film-stage.is-image-left .hmD-film-copy { left: auto; right: 4vw; top: 0; bottom: 0; width: 32%; }
  body.hmD .hmD-film-stage .hmD-film-copy .cap .hm-h { font-size: 24px; }
  .hmD-intro-head { display: block; }
  .hmD-intro-head > .hm-p { margin-top: 1.5em; }
  .hmD-moments { gap: 12px; grid-template-columns: 1fr; }
  .hmD-moment { height: 48vh; min-height: 280px; }
  .hmD-moment:nth-child(2) { margin-top: 0; }
  .hmD-moment-label { left: 24px; right: 24px; bottom: 24px; }
  .hmD-notes { grid-template-columns: 1fr; gap: 18px; }
  .hmD-note { min-height: 340px; padding: 26px; }
}
@media (prefers-reduced-motion: reduce) { .hmD-moment-photo img { transition: none; } }
/* Final film scene: keep the action within the footage's left clearspace. */
body.hmD .hmD-film-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 100%; min-height: 48px; padding: 12px 18px; margin-top: 28px; border: 1px solid #f5f6f155; border-radius: 28px; color: var(--alda-paper); background: transparent; font-size: 13px; line-height: 1.3; text-decoration: none; pointer-events: auto; transition: background .25s,color .25s; }
body.hmD .hmD-film-cta:hover { background: var(--alda-red); color: #fff; }
body.hmD .hmD-film-cta:focus-visible { outline: 2px solid var(--alda-paper); outline-offset: -5px; }
@media(max-width:600px) { body.hmD .hmD-film-cta { font-size: 11px; padding: 10px 12px; gap: 8px; margin-top: 20px; border-radius: 18px; } }
/* Homepage refinement: give each section a clear role and a shorter scroll. */
body.hmD .hmD-hero-action { position: absolute; left: 8.9vw; top: 65vh; pointer-events: auto; }
body.hmD .ld-label { display: none; }
body.hmD .hmD-hero-action .orbit-action { --orbit-bg: var(--alda-paper) !important; --orbit-ink: var(--alda-ink) !important; --orbit-border: var(--alda-paper) !important; }
body.hmD :is(.hmD-say,.hmD-rail,.hmD-shelves,.hmD-quotes,.hmD-kit) { min-height: 0; }
body.hmD .hmD-sec > .hm-wrap { padding-block: 8vh; }
body.hmD .hmD-moment { height: 39vh; min-height: 280px; }
body.hmD .hmD-material-guide { margin: 22px 0; }
body.hmD .hmD-material-guide > div { border-top: 1px solid #22222220; padding: 14px 0; }
body.hmD .hmD-material-guide dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--alda-muted); margin-bottom: 6px; }
body.hmD .hmD-material-guide dd { margin: 0; font-size: 16px; line-height: 1.5; max-width: 34ch; }
body.hmD .hmD-mats .blk { min-height: 65vh; padding-block: 8vh; }
body.hmD .hmD-kitchen-stage { min-height: 65vh; height: 65vh; }
body.hmD .hmD-kitchen { min-height: 0; }
body.hmD .hmD-note-body { font-size: 16px; line-height: 1.55; margin: 0 0 24px; }
body.hmD .hmD-note .hm-more { margin-top: auto; padding-top: 18px; border-top: 1px solid #22222220; }
#care { scroll-margin-top: 120px; }
.hm-news > .hm-btn { margin-top: 22px; }
@media(max-width:767px) {
 body.hmD .hmD-hero-action { left: 6vw; top: 63vh; }
 body.hmD .hmD-sec > .hm-wrap { padding-block: 50px; }
 body.hmD .hmD-moment { height: 300px; min-height: 0; }
 body.hmD .hmD-mats .blk { min-height: 0; padding-block: 30px; }
 body.hmD .hmD-material-guide dd { font-size: 14px; }
 /* auto: phones stack the 4:5 photo over the copy; a fixed 55vh clipped the copy away entirely */
 body.hmD .hmD-kitchen-stage { height: auto; min-height: 0; }
 body.hmD .hmD-film-cta.orbit-action { padding-left: 10px !important; padding-right: 34px !important; font-size: 10px !important; }
}

/* Final hero: one viewport, editorial copy, quiet scene controls. */
body.hmD .ld-stage { height:100svh; min-height:620px; }
body.hmD .hmD-hero-action { top:44%; left:8.9vw; color:var(--alda-paper); }
body.hmD .ld-hero-eyebrow { font-size:11px; letter-spacing:.14em; margin:0 0 18px; }
body.hmD .ld-hero-heading { font-size:clamp(48px,5.3vw,82px); line-height:1.02; letter-spacing:-.055em; font-weight:500; margin:0 0 28px; color:inherit; }
body.hmD .ld-vignette { background:linear-gradient(90deg,rgba(18,14,9,.5),transparent 75%),linear-gradient(0deg,rgba(18,14,9,.3),transparent 35%); }
body.hmD .ld-sheet { top:auto; bottom:26px; left:auto; right:4vw; width:300px; height:auto; background:transparent; border:0; color:var(--alda-paper); overflow:visible; }
body.hmD .ld-glass,body.hmD .ld-thumb,body.hmD .ld-sub,body.hmD .ld-next-k,body.hmD .ld-next-v { display:none; }
body.hmD .ld-panel { height:auto; padding:0; }
body.hmD .ld-chapterbar { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0; background:transparent; border:0; box-shadow:none; border-radius:0; backdrop-filter:none; }
body.hmD .ld-title { font-size:14px; letter-spacing:0; margin:0; color:inherit; }
body.hmD .ld-next { width:130px; margin:0; position:relative; }
body.hmD .ld-arrows { position:static; display:flex; gap:8px; }
body.hmD .ld-arrows button { width:36px; height:36px; border:1px solid #ffffff65; border-radius:50%; color:inherit; background:transparent; display:grid; place-items:center; }
body.hmD .ld-div { display:none; }
body.hmD .ld-progress { margin-top:10px; background:#ffffff35; }
body.hmD .ld-fill { background:var(--alda-paper); }
body.hmD .hmD-show-card { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--alda-paper); }
@media(max-width:767px){
 body.hmD .ld-stage {min-height:560px;}
 body.hmD .hmD-hero-action {left:6vw; top:43%;}
 body.hmD .ld-hero-heading {font-size:clamp(40px,10vw,56px);}
 body.hmD .ld-sheet {left:6vw;right:6vw;bottom:24px;width:auto;}
 body.hmD .ld-vignette {background:linear-gradient(90deg,#120e0966,transparent),linear-gradient(0deg,#120e0966,transparent 60%);}
}

body.hmD .ld-vignette {display:block;}
body.hmD .ld-hero-eyebrow {color:inherit;}

body.hmD .ld-arrows button {color:var(--alda-paper);}
body.hmD .ld-arrows svg {fill:currentColor;}
/* the hero film (2026-10-13): the pause and play are drawn icons (landing.js), and the film's bright chapters - the
   polished steel cooker, the silver dunes - get a soft shade behind the words only, so the white headline holds at
   least 5:1 on desktop and 3.8:1 on phones in every chapter (the cooker was 1.9:1). The second shade (2026-10-14) sits
   under the bottom-right sheet, centred on it in pixels as the sheet is: over the end-grain board's cream wall the small
   range name and the outlined arrows were 2.4:1 and 2.2:1 */
body.hmD .ld-pause svg {width:10px;height:10px;fill:currentColor;display:block;}
body.hmD .ld-film~.ld-vignette {background:radial-gradient(ellipse 34% 30% at 24% 57%,rgba(18,14,9,.5),rgba(18,14,9,.22) 60%,transparent 100%),radial-gradient(ellipse 420px 140px at calc(100% - 4vw - 150px) calc(100% - 50px),rgba(18,14,9,.45),rgba(18,14,9,.3) 50%,transparent 100%),linear-gradient(90deg,rgba(18,14,9,.5),transparent 75%),linear-gradient(0deg,rgba(18,14,9,.3),transparent 35%);}
@media(max-width:767px){
 body.hmD .ld-film~.ld-vignette {background:radial-gradient(ellipse 90% 24% at 34% 55%,rgba(18,14,9,.62),rgba(18,14,9,.3) 60%,transparent 100%),linear-gradient(90deg,#120e0966,transparent),linear-gradient(0deg,#120e0966,transparent 60%);}
}
/* a phone on its side, and any short landscape screen (2026-10-14): the stage is the screen with no 620/560px floor, and
   the words start under the header (--sn-height grows with the festival strip), smaller, so the headline, the button
   and the sheet that names the range are all on the first screen - at 844x390 the button and the sheet were below it.
   The sheet keeps to the bottom right, as on desktop, with the desktop shade (the corner one under it included), so
   the words never run into it, even with the strip's detail row open */
@media (orientation:landscape) and (max-height:500px){
 body.hmD .ld-stage {min-height:0;}
 body.hmD .hmD-hero-action {top:calc(var(--sn-height) + 8px);}
 body.hmD .ld-hero-eyebrow {margin-bottom:10px;}
 body.hmD .ld-hero-heading {font-size:clamp(28px,9vh,44px);margin-bottom:16px;}
 body.hmD .ld-sheet {left:auto;right:4vw;bottom:16px;width:min(300px,44vw);}
 body.hmD .ld-film~.ld-vignette {background:radial-gradient(ellipse 34% 30% at 24% 57%,rgba(18,14,9,.5),rgba(18,14,9,.22) 60%,transparent 100%),radial-gradient(ellipse 420px 140px at calc(100% - 4vw - 150px) calc(100% - 50px),rgba(18,14,9,.45),rgba(18,14,9,.3) 50%,transparent 100%),linear-gradient(90deg,rgba(18,14,9,.5),transparent 75%),linear-gradient(0deg,rgba(18,14,9,.3),transparent 35%);}
}

/* Tri-ply depth section (#vitale-depth), rebuilt 2026-09-28. The live rules are the same block in home.css;
   this file keeps the section's own copy next to its markup (section.html) and script (vitale.js).
   Layout (Mobbin: Telepathic Instruments' product-left split, Oura's and Popcorn's icon specs on hairlines):
   the photograph large on the left; on the right the eyebrow, headline, one line of why, three specs, the
   button. Phones: headline, photograph, specs, button. The WebGL canvas draws the whole photograph in a
   rounded frame (the top 86% of the box) and lets only the pan step out through the bottom edge; the <img>
   is the still fallback, cropped to the same frame. Only one of the two is ever visible. */
.vt-depth{position:relative;overflow:hidden;background:var(--ac-ink);color:var(--ac-bg)}
.vt-pattern{position:absolute;inset:-70px;z-index:0;pointer-events:none;background:url('/alda-assets/depth/pattern/background.svg') repeat;background-size:720px 720px;opacity:.065;transform:translate3d(0,0,0)}
.vt-pin{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-areas:"stage head" "stage rest";align-content:center;column-gap:clamp(40px,5vw,96px);box-sizing:border-box;min-height:100svh;max-width:1680px;margin:0 auto;padding:clamp(110px,13vh,150px) clamp(20px,4vw,80px) clamp(56px,8vh,96px)}
.vt-stage{grid-area:stage;align-self:center;min-width:0}
.vt-photo{position:relative;width:100%;aspect-ratio:3/2}
.vt-photo img,.vt-photo canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.vt-photo img{object-fit:cover;clip-path:inset(0 0 14% 0 round 18px)}
.vt-photo canvas{visibility:hidden;pointer-events:none}
.vt-depth.is-ready .vt-photo canvas{visibility:visible}.vt-depth.is-ready .vt-photo img{visibility:hidden}
.vt-head{grid-area:head;align-self:end;max-width:460px}
.vt-rest{grid-area:rest;align-self:start;max-width:460px}
.vt-eyebrow{margin:0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(245,246,238,.62)}
.vt-head h2{margin:14px 0 18px;font-size:clamp(40px,4.4vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.055em;color:inherit}
.vt-lede{margin:0;max-width:38ch;font-size:16px;line-height:1.6;color:rgba(245,246,238,.72)}
.vt-specs{list-style:none;margin:30px 0 32px;padding:0;border-top:1px solid rgba(245,246,238,.14)}
.vt-specs li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid rgba(245,246,238,.14)}
.vt-specs svg{width:24px;height:24px;margin-top:1px;color:var(--ac-bg)}
.vt-specs b{display:block;font-size:15px;font-weight:550;letter-spacing:-.01em;color:var(--ac-bg)}
.vt-specs span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:rgba(245,246,238,.6)}
.vt-rest .hm-btn{--orbit-bg:var(--alda-paper)!important;--orbit-ink:var(--alda-ink)!important;--orbit-border:var(--alda-paper)!important;text-shadow:none}
@media(max-width:900px){
.vt-pin{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "rest";row-gap:26px;min-height:0;padding:120px 20px 64px}
.vt-head,.vt-rest{max-width:none}
.vt-head h2{font-size:clamp(34px,9vw,48px);margin:12px 0 14px}
.vt-specs{margin:4px 0 28px}
.vt-pattern{background-size:520px 520px;opacity:.05}
}
@media(prefers-reduced-motion:reduce){.vt-pattern{transform:none!important}}
/* Kitchen Shelf */
#say .ks-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:38px}#say .ks-head .hm-h{font-size:clamp(36px,4.5vw,68px);line-height:1.05;max-width:650px;margin-top:16px}#say .ks-head>p{font-size:14px;line-height:1.6;opacity:.65}
.ks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.ks-card{display:flex;flex-direction:column;min-width:0;border-radius:20px;overflow:hidden;background:var(--alda-paper);color:var(--alda-ink);padding:22px;text-decoration:none}.ks-meta{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}.ks-art{height:220px;display:flex;align-items:center;justify-content:center;margin:12px 0 16px;overflow:hidden;border-radius:12px}.ks-art img{width:90%;height:95%;object-fit:contain;transition:transform .95s cubic-bezier(.22,1,.36,1)}.ks-photo .ks-art img{width:100%;height:100%;object-fit:cover}.ks-label{display:flex;justify-content:space-between;align-items:center;gap:10px}.ks-label h3{font-size:clamp(19px,1.8vw,28px);letter-spacing:-.04em;font-weight:500}.ks-arrow{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--alda-ink);color:white;transition:transform .95s cubic-bezier(.22,1,.36,1),background-color .42s cubic-bezier(.4,0,.2,1)}a.ks-card:hover .ks-art img,a.ks-card:focus-visible .ks-art img{transform:translateY(-5px) scale(1.035)}a.ks-card:hover .ks-arrow,a.ks-card:focus-visible .ks-arrow{transform:rotate(45deg);background:var(--ac-red)}a.ks-card:focus-visible{outline:2px solid var(--ac-ink);outline-offset:4px}
@media(max-width:700px){#say .ks-head{display:block;margin-bottom:26px}#say .ks-head>p{margin-top:18px}.ks-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ks-card{padding:13px;border-radius:14px}.ks-art{height:145px;margin:10px 0}.ks-meta{font-size:8px;letter-spacing:.02em;flex-wrap:wrap}.ks-label h3{font-size:18px;line-height:1.12}.ks-arrow{width:26px;height:26px}.ks-photo .ks-art{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.ks-art img,.ks-arrow{transition:none}}
/* a shelf card with a second picture - its PDP in-use photograph - fades it in on hover (Cast Iron, 2026-09-28) */
.ks-art{position:relative}
.ks-art .ks-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1),transform .95s cubic-bezier(.22,1,.36,1)}
a.ks-card.has-alt:hover .ks-alt,a.ks-card.has-alt:focus-visible .ks-alt{opacity:1;transform:scale(1.05)}
@media(hover:none){.ks-art .ks-alt{display:none}}
/* Keep the static shelf painted independently of adjacent media surfaces. */
#say{isolation:isolate;contain:paint;background:var(--ac-bg);color:var(--ac-ink)}

/* Category collections: studio at rest, kitchen on hover or keyboard focus. */
#shelves .hm-ccard{background:var(--alda-paper);transition:border-color .3s}
#shelves .hm-ccard:hover{transform:none;background:var(--alda-paper)}
#shelves .shelf-pair{aspect-ratio:1;background:var(--alda-paper);margin:0}
#shelves .shelf-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:opacity .85s cubic-bezier(.22,1,.36,1)}
#shelves .shelf-kitchen{opacity:0}
#shelves .hm-ccard:focus-visible{outline:2px solid var(--ac-ink);outline-offset:4px}
#shelves .hm-ccard:focus-visible .shelf-kitchen{opacity:1}
#shelves .hm-ccard:focus-visible .shelf-studio{opacity:0}
@media(hover:hover) and (pointer:fine){#shelves .hm-ccard:hover .shelf-kitchen{opacity:1}#shelves .hm-ccard:hover .shelf-studio{opacity:0}}
@media(prefers-reduced-motion:reduce){#shelves .shelf-pair img{transition:none}}
/* The film on portrait screens (home.js adds .is-square): the square phone frame sits a little above
   centre, and the caption reads in the black beneath it, never over the product. */
body.hmD .hmD-film-stage.is-square .hmD-film-copy,
body.hmD .hmD-film-stage.is-square.is-image-left .hmD-film-copy { left: 6vw; right: 6vw; top: auto; bottom: 9vh; width: auto; align-items: end; }
body.hmD .hmD-film-stage.is-square .hmD-film-copy .cap .hm-h { font-size: clamp(26px, 7.2vw, 40px); max-width: 14ch; }

/* Quick add, 2026-09-28 (home.js): more than one size opens a chooser instead of adding the hero size.
   On a desktop, up to four sizes are chips over the photograph and more are a list over it; a phone
   always gets a bottom sheet. Ink on hover, never red - red stays an accent. */
.hm-sizes { position: absolute; left: 1.1em; right: 1.1em; top: 1.1em; aspect-ratio: 1; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45em; padding: 0.55em; border-radius: calc(var(--r-lg) - 6px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.3s; }
.hm-sizes::before { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; border-radius: inherit; background: linear-gradient(to top, rgba(251, 251, 245, 0.97) 35%, rgba(251, 251, 245, 0)); }
.hm-pcard.is-sizing .hm-sizes { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-sizes-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4em; }
.hm-size { display: grid; gap: 0.15em; padding: 0.6em 0.65em; border: 1px solid var(--ac-line); border-radius: 8px; background: var(--alda-paper); color: var(--ac-ink); font: inherit; font-size: 0.78em; line-height: 1.2; text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.hm-size .l { font-weight: 550; }
.hm-size .p { color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hm-size:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.hm-size:hover .p { color: rgba(245, 246, 238, 0.72); }
/* keyboard focus (focus: Option C): the chip stays pale and takes a 1.5px ink inner edge - no red fill, no ring */
.hm-sizes:not(.is-list) .hm-size:focus-visible { outline: none; border-color: var(--ac-ink); box-shadow: inset 0 0 0 0.5px var(--ac-ink); }
.hm-sizes.is-list { justify-content: flex-start; background: rgba(251, 251, 245, 0.97); border: 1px solid var(--ac-line-soft); }
.hm-sizes.is-list::before { display: none; }
.hm-sizes-k { margin: 0.15em 0.35em 0.25em; font-size: 0.68em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-muted); }
.hm-sizes.is-list .hm-sizes-opts { grid-template-columns: 1fr; gap: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.hm-sizes.is-list .hm-size { display: flex; justify-content: space-between; align-items: center; gap: 1em; border: 0; border-bottom: 1px solid var(--ac-line-soft); border-radius: 6px; background: transparent; padding: 0.55em 0.5em; }
.hm-sizes.is-list .hm-size:hover, .hm-sizes.is-list .hm-size:focus-visible { background: rgba(34, 34, 34, 0.06); color: var(--ac-ink); }
.hm-sizes.is-list .hm-size:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ac-ink); }
.hm-sizes.is-list .hm-size:hover .p, .hm-sizes.is-list .hm-size:focus-visible .p { color: var(--ac-muted); }
.hm-add svg { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-pcard.is-sizing .hm-add { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.hm-pcard.is-sizing .hm-add svg { transform: rotate(45deg); }
.hm-sheet { position: fixed; inset: 0; z-index: 200000; visibility: hidden; pointer-events: none; }
.hm-sheet.is-on { visibility: visible; pointer-events: auto; }
.hm-sheet-scrim { position: absolute; inset: 0; background: rgba(34, 34, 34, 0.38); opacity: 0; transition: opacity 0.3s; }
.hm-sheet.is-on .hm-sheet-scrim { opacity: 1; }
.hm-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column; background: var(--alda-paper); color: var(--ac-ink); border-radius: 18px 18px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.12); transform: translateY(100%); transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hm-sheet.is-on .hm-sheet-panel { transform: none; }
.hm-sheet-panel::before { content: ""; align-self: center; flex: none; width: 36px; height: 4px; margin-bottom: 10px; border-radius: 4px; background: rgba(34, 34, 34, 0.18); }
.hm-sheet-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ac-line-soft); }
.hm-sheet-img { width: 52px; height: 52px; flex: none; object-fit: contain; border-radius: 8px; background: var(--ac-panel); }
.hm-sheet-tx { flex: 1; min-width: 0; }
.hm-sheet-k { margin: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-muted); }
.hm-sheet-n { margin: 2px 0 0; font-size: 16px; font-weight: 550; }
.hm-sheet-x { width: 40px; height: 40px; flex: none; border-radius: 8px; border: 1px solid rgba(34, 34, 34, 0.16); background: var(--alda-paper); color: var(--ac-ink); font-size: 20px; line-height: 1; cursor: pointer; }
.hm-sheet-opts { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
.hm-size-row { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--ac-line-soft); background: none; color: var(--ac-ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.hm-size-row .p { color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.hm-size-row:active { background: var(--ac-panel); }
.hm-size-row:focus-visible { outline: none; }   /* the rows' tint and ink bar (site.css) */
@media (prefers-reduced-motion: reduce) { .hm-sizes, .hm-sheet-panel, .hm-sheet-scrim, .hm-add svg { transition: none; } }

/* Cook by dish, 2026-09-28 (home_dish.py; replaces the sticky materials scroll): a large-type dish list
   (Mobbin: KÖPPEN) drives one photograph, one line and three quick-add cards (Assembly Coffee). The
   panels share one grid cell, so switching never changes the section's height. */
body.hmD .hmD-dishsec > .hm-wrap { padding-block: 6vh; }
.hmD-dish-head { margin-bottom: 3.2vh; }
.hmD-dish { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5vw; align-items: start; }
.hmD-dish-tabs { display: grid; border-top: 1px solid var(--ac-line-soft); }
.hmD-dish-tab { display: grid; gap: 0.45em; padding: 1.35em 0 1.25em; border: 0; border-bottom: 1px solid var(--ac-line-soft); background: none; color: rgba(34, 34, 34, 0.3); font: inherit; text-align: left; cursor: pointer; transition: color 0.35s; }
.hmD-dish-tab .k { font-size: 0.7em; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.35s; }
.hmD-dish-tab .d { font-size: clamp(30px, 3.3vw, 54px); font-weight: 500; line-height: 1.02; letter-spacing: -0.045em; }
.hmD-dish-tab:hover, .hmD-dish-tab.is-on { color: var(--ac-ink); }
.hmD-dish-tab.is-on .k { color: var(--ac-red); }
.hmD-dish-tab:focus-visible { outline: 0; color: var(--ac-ink); border-bottom-color: var(--ac-ink); box-shadow: 0 1px 0 var(--ac-ink); }   /* a tab label: a 2px ink underline */
.hmD-dish-panels { display: grid; }
.hmD-dish-panel { grid-area: 1 / 1; display: grid; gap: 2vh; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.4s; }
.hmD-dish-panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.05s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s; }
.hmD-dish-photo { margin: 0; aspect-ratio: 2 / 1; border-radius: var(--r-lg); overflow: hidden; background: var(--ac-panel); }
.hmD-dish-photo img { width: 100%; height: 100%; object-fit: cover; }
.hmD-dish-copy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 1em 2.2em; align-items: start; }
.hmD-dish-copy .why { margin: 0; font-size: 1.02em; line-height: 1.45; }
.hmD-dish-copy .know { margin: 0; font-size: 0.86em; line-height: 1.5; color: var(--ac-muted); }
.hmD-dish-copy .know span { display: block; margin-bottom: 0.35em; font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; }
.hmD-dish-copy .hm-more { white-space: nowrap; }
.hmD-dish-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1vw; }
.hmD-dish-cards .hm-pcard { font-size: 0.9em; }
@media (max-width: 767px) {
  .hmD-dish { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hmD-dish-tabs { display: flex; gap: 8px; margin: 0 -4vw; padding: 0 4vw 2px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .hmD-dish-tabs::-webkit-scrollbar { display: none; }
  .hmD-dish-tab { flex: none; padding: 10px 15px; border: 1px solid var(--ac-line-soft); border-radius: 100px; color: var(--ac-ink); }
  .hmD-dish-tab .k { display: none; }
  .hmD-dish-tab .d { font-size: 15px; letter-spacing: -0.01em; }
  .hmD-dish-tab.is-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
  .hmD-dish-photo { aspect-ratio: 4 / 3; }
  .hmD-dish-copy { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hmD-dish-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58vw; gap: 10px; margin: 0 -4vw; padding: 0 4vw 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hmD-dish-cards .hm-pcard { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .hmD-dish-panel, .hmD-dish-panel.is-on { transition: none; transform: none; } }

/* The sale band, 2026-10-12 (scratchpad/patch-landing-sale.py writes the markup from the sale data; it is not there
   when nothing is on sale). Between the tri-ply film and the kitchen, on cream: the words in one column - eyebrow, the
   figure (red text, the say section's accent), the line - with the button at their foot on the right, so the head
   lines up at every width; under it four of the house's quick-add cards. Each card's discount rides in its corner as
   red text on the cream tag, the Sale page's form; never a red block. The selling price reads in ink, the struck MRP
   stays muted, and a row's prices share one line however long the names run. Two by two below 1024px. Fewer than
   four cards (data-cards; none today): three share the row as the rail's do, one or two sit beside the head on
   desktop. The reveals are home.js's, made after the pins (data-rv-late). */
body.hmD .hmD-sale { min-height: 0; scroll-margin-top: 90px; }
body.hmD .hmD-sale > .hm-wrap { padding-block: 12vh 13vh; }
.hmD-sale-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em 4vw; margin-bottom: 6vh; }
.hmD-sale-head .hm-h { margin-top: 0.4em; }
.hmD-sale-head .hm-h em { font-style: normal; color: var(--ac-red); }
.hmD-sale-head .hm-p { margin-top: 1em; max-width: 30em; }
.hmD-sale-head .hm-actions { flex: none; }
.hmD-sale-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8vw; }
.hmD-sale .hm-pcard { display: flex; flex-direction: column; }
.hmD-sale .hm-pcard .hit { flex: 1 1 auto; display: flex; flex-direction: column; }
.hmD-sale .hm-pcard .tag { line-height: 1.2; }
.hmD-sale .hm-pcard .tag .pr-off { font-size: inherit; }
.hmD-sale .hm-pcard .t { margin-top: auto; padding-top: 0.3em; color: var(--ac-ink); font-size: 0.86em; }
/* a card's size list opens over its photo: the corner tag steps aside instead of showing through the panel */
.hm-pcard .tag { transition: opacity 0.2s; }
.hm-pcard.is-sizing .tag { opacity: 0; }
@media (min-width: 768px) {
  .hmD-sale[data-cards="3"] .hmD-sale-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hmD-sale[data-cards="1"] > .hm-wrap, .hmD-sale[data-cards="2"] > .hm-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.8vw; align-items: end; }
  .hmD-sale[data-cards="1"] > .hm-wrap { grid-template-columns: minmax(0, 1fr) calc((100% - 3 * 1.8vw) / 4); }
  .hmD-sale[data-cards="1"] .hmD-sale-head, .hmD-sale[data-cards="2"] .hmD-sale-head { flex-direction: column; align-items: flex-start; gap: 2.4em; margin-bottom: 0; }
  .hmD-sale[data-cards="1"] .hmD-sale-cards { grid-template-columns: minmax(0, 1fr); }
  .hmD-sale[data-cards="2"] .hmD-sale-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .hmD-sale-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4vw; }
}
@media (max-width: 767px) {
  body.hmD .hmD-sale > .hm-wrap { padding-block: 50px; }   /* the phones' section rhythm (10vh on the section + 50px) */
  .hmD-sale-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }
  .hmD-sale-cards { gap: 6vw 3vw; }
}
@media (prefers-reduced-motion: reduce) { .hm-pcard .tag { transition: none; } }