/* Koe Earth: home page (scroll build)
   Layout concept: a calm gallery of two bars. Dark wet-slate scenes for the moments
   (arrival, the split, the ritual, the close), limestone grounds for the facts.
   One accent: the cobalt of the blue clay itself. */

:root {
  --slate: #1c231f;
  --slate-2: #252e28;
  --bone: #efe9dc;
  --bone-soft: #bdbaaa;
  --stone: #ebe5d8;
  --stone-2: #e2dbcb;
  --ink-dark: #1f2620;
  --ink-dark-soft: #59614f;
  --cobalt: #3157c6;
  --cobalt-deep: #24449f;

  --sc-canvas: var(--slate);
  --sc-surface: var(--slate-2);
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--cobalt);
  --sc-accent-ink: #f6f2e8;
  --sc-font-display: "Young Serif", Georgia, "Noto Serif", serif;
  --sc-font-text: "Jost", "Segoe UI", Roboto, system-ui, sans-serif;
  --sc-shadow-color: 140 20% 6%;
}
body.home {
  background: var(--sc-canvas);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* --------------------------------------------------------------- shared */

.home .btn-primary { background: var(--cobalt); color: var(--sc-accent-ink); }
.home .btn-primary:hover { background: var(--cobalt-deep); color: var(--sc-accent-ink); }
.home .btn-lg { min-height: 54px; padding: 0 28px; font-size: var(--step-1); }
.home :focus-visible { outline: 3px solid #e2b55c; outline-offset: 3px; }

.h-section {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--ink-dark); margin: 0 0 0.4em; text-wrap: balance;
}
.h-section--light { color: var(--bone); }

.ground-light { color: var(--ink-dark); background: var(--stone); }
.ritual, .close__stage { background: var(--slate); }
.ground-light a:not(.btn) { color: var(--ink-dark); }

/* label schema: the one shape every fact on the page uses */
.label { margin: 0; display: grid; gap: 0; border-top: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.label > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent);
}
.label dt { font-size: var(--step--1); letter-spacing: 0.04em; opacity: 0.72; padding-top: 2px; }
.label dd { margin: 0; }

/* header over the hero */
.site-header--home {
  position: fixed; inset: 0 0 auto; top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in oklab, var(--slate) 72%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--bone) 10%, transparent);
  color: var(--bone);
}
.site-header--home .main-nav a { color: var(--bone); }
.site-header--home .main-nav a:hover { color: #fff; }
.site-header--home .cart-btn { border-color: color-mix(in oklab, var(--bone) 55%, transparent); color: var(--bone); }
.site-header--home .cart-btn:hover { background: var(--bone); color: var(--slate); }
.site-header--home .main-nav { gap: 24px; }
@media (min-width: 760px) and (max-width: 1080px) {
  .site-header--home .main-nav a:nth-child(n+4) { display: none; }
}

/* WebGPU canvases sit on their image and fade in only once they draw */
.fx-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 700ms ease-out; pointer-events: none;
}
.fx-canvas.is-live { opacity: 1; }

/* ================================================================ 1. hero */

.hero__stage { background: var(--slate); }
.hero__plate {
  position: absolute; inset: -3%;
  transform: scale(calc(1.02 + var(--sc-p, 0) * 0.07)) translate3d(0, calc(var(--sc-p, 0) * -2.5%), 0);
  transform-origin: 60% 70%;
}
.hero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.hero__mist { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.55; }
.hero__mist i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 232, 214, 0.42), rgba(226, 232, 214, 0) 70%);
  filter: blur(8px);
  animation: mist 38s ease-in-out infinite alternate;
}
.hero__mist i:first-child { width: 70vw; height: 30vh; left: 18vw; top: 34vh; }
.hero__mist i:last-child { width: 55vw; height: 24vh; left: -10vw; top: 48vh; animation-duration: 52s; animation-delay: -12s; }
@keyframes mist { from { transform: translate3d(-4vw, 0, 0); } to { transform: translate3d(6vw, -2vh, 0); } }

.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 80% at 0% 55%, rgba(18, 24, 20, 0.78), rgba(18, 24, 20, 0.35) 55%, rgba(18, 24, 20, 0) 80%);
}

.hero__copy {
  position: absolute; z-index: 3;
  left: max(var(--gutter), 5vw, env(safe-area-inset-left, 0px)); top: clamp(110px, 20vh, 200px);
  width: min(38rem, 46vw);
  opacity: calc(1 - var(--sc-p, 0) * 1.6);
  transform: translate3d(0, calc(var(--sc-p, 0) * -9vh), 0);
}
.hero__title {
  font-family: var(--serif); font-weight: 400; color: var(--bone);
  font-size: clamp(2.7rem, 1.5rem + 4.2vw, 5.6rem);
  line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 0.35em;
  text-wrap: balance;
}
.hero__lede { font-size: var(--step-1); max-width: 30ch; color: #e6e2d4; margin-bottom: 1.4em; }
.hero__tag { margin: 1.6em 0 0; font-size: var(--step--1); color: var(--bone-soft); }
.hero__tag span { display: block; color: var(--bone); font-weight: 500; }

/* the bar sits on the right slab; its contact point stays on the stone */
.hero__bar {
  position: absolute; z-index: 2;
  left: 60%; bottom: 25%;
  width: clamp(230px, 25vw, 440px);
  transform: translate3d(0, calc(var(--sc-p, 0) * -7vh), 0);
}
.hero__soap {
  width: 100%; height: auto;
  filter: brightness(0.9) saturate(0.94) drop-shadow(0 18px 22px rgba(10, 14, 12, 0.45));
  transform: rotate(calc(-2deg - var(--sc-p, 0) * 5deg));
  transform-origin: 50% 100%;
}
.hero__contact {
  position: absolute; left: 6%; right: 6%; bottom: 1%; height: 14%;
  background: radial-gradient(closest-side, rgba(6, 9, 7, 0.75), rgba(6, 9, 7, 0));
  transform: translate3d(0, calc(var(--sc-p, 0) * 7vh), 0) scale(calc(1 + var(--sc-p, 0) * 0.3));
  opacity: calc(1 - var(--sc-p, 0) * 0.7);
}

.hero__leaves {
  position: absolute; z-index: 4; pointer-events: none;
  width: 48vw; height: auto; left: -9vw; bottom: -12vh;
  filter: blur(2.5px) brightness(0.62) saturate(0.85);
  transform: translate3d(0, calc(var(--sc-p, 0) * -34vh), 0) rotate(-14deg);
}

@media (max-width: 760px) {
  .hero__plate img { object-position: 50% 60%; }
  .hero__scrim { background: linear-gradient(to bottom, rgba(18, 24, 20, 0.82) 0%, rgba(18, 24, 20, 0.5) 36%, rgba(18, 24, 20, 0) 60%); }
  .hero__copy { left: var(--gutter); right: var(--gutter); width: auto; top: 92px; }
  .hero__title { font-size: clamp(2.3rem, 9.6vw, 3rem); }
  .hero__lede { font-size: var(--step-0); margin-bottom: 1em; }
  .hero__tag { display: none; }
  .hero__bar { left: 50%; bottom: 7%; width: 58vw; margin-left: -29vw; }
  .hero__leaves { width: 78vw; left: -26vw; bottom: -5vh; transform: translate3d(0, calc(var(--sc-p, 0) * -24vh), 0) rotate(-20deg); }
}

/* ================================================================ 2. bars */

.bars { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.bars__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bars__intro { color: var(--ink-dark-soft); font-size: var(--step-1); }
.bars__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .bars__grid { grid-template-columns: 1.08fr 0.92fr; align-items: start; column-gap: clamp(3rem, 7vw, 7rem); }
  .obj--b { margin-top: clamp(6rem, 12vw, 11rem); }
}
.obj { display: grid; gap: 22px; }
.obj__fig { position: relative; margin: 0; width: min(100%, 440px); }
.obj--b .obj__fig { width: min(100%, 380px); }
.obj__img { width: 100%; height: auto; filter: drop-shadow(0 22px 22px rgba(60, 50, 30, 0.22)); }
.obj__shadow {
  position: absolute; left: 12%; right: 12%; bottom: 2%; height: 9%; z-index: -1;
  background: radial-gradient(closest-side, rgba(60, 50, 30, 0.35), rgba(60, 50, 30, 0));
}
.obj__name { font-family: var(--serif); font-weight: 400; font-size: var(--step-2); color: var(--ink-dark); margin: 0 0 12px; }
.obj__label { max-width: 30rem; }
.obj .label { margin-bottom: 20px; color: var(--ink-dark); }
.obj .stepper { background: #fbf8f1; }

.bars__hush {
  margin: clamp(5rem, 10vw, 9rem) 0 0 auto; max-width: 22ch; text-align: right;
  font-family: var(--serif); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); line-height: 1.15;
  color: var(--ink-dark);
}

/* ======================================================= 3. the split (peak) */

.split { color: var(--bone); }
.split__stage {
  --p: var(--sc-p, 0);
  --turn: clamp(0, calc((var(--p) - 0.04) / 0.5), 1);
  --band: clamp(0, calc((var(--p) - 0.1) / 0.18), 1);
  --open: clamp(0, calc((var(--p) - 0.28) / 0.3), 1);
  --rise: clamp(0, calc((var(--p) - 0.5) / 0.2), 1);
  background:
    radial-gradient(60% 55% at 38% 58%, rgba(70, 86, 72, 0.45), rgba(28, 35, 31, 0) 70%),
    var(--slate);
  display: grid;
}

.split__scene {
  position: absolute; left: 0; top: 0; bottom: 0; width: 60%;
  display: grid; place-items: center;
  perspective: 1400px; perspective-origin: 50% 40%;
}
.split__tilt {
  transform-style: preserve-3d;
  transform: rotateX(calc(-14deg - var(--turn) * 6deg + var(--tx, 0) * 1deg)) rotateY(calc(-30deg - var(--turn) * 26deg + var(--ty, 0) * 1deg));
  transition: transform 120ms linear;
}
.bar3d {
  --w: clamp(170px, 24vw, 330px);
  --h: calc(var(--w) * 0.86);
  --dt: calc(var(--w) * 0.5);
  --dtop: calc(var(--dt) * 0.64);
  --dbase: calc(var(--dt) * 0.36);
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  margin-top: -6vh;
}
.slab { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.slab--top {
  --d: var(--dtop);
  transform: translate3d(calc(var(--open) * var(--w) * -0.12), 0, calc(var(--dt) / 2 - var(--dtop) / 2 + var(--open) * var(--w) * 0.42));
}
.slab--base {
  --d: var(--dbase);
  transform: translate3d(calc(var(--open) * var(--w) * 0.12), 0, calc((var(--dt) / 2 - var(--dbase) / 2) * -1 - var(--open) * var(--w) * 0.34));
}
.face {
  position: absolute; overflow: hidden; border-radius: 7px;
  left: calc(var(--fw) / -2); top: calc(var(--fh) / -2);
  width: var(--fw); height: var(--fh);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 22px rgba(0, 0, 0, 0.22);
}
.face::after { content: ""; position: absolute; inset: 0; }
.face--front  { --fw: var(--w); --fh: var(--h); transform: translateZ(calc(var(--d) / 2)); }
.face--back   { --fw: var(--w); --fh: var(--h); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.face--right  { --fw: var(--d); --fh: var(--h); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.face--left   { --fw: var(--d); --fh: var(--h); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.face--top    { --fw: var(--w); --fh: var(--d); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.face--bottom { --fw: var(--w); --fh: var(--d); transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }
.face--front::after  { background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.12)); }
.face--back::after   { background: rgba(0, 0, 0, 0.32); }
.face--right::after  { background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)); }
.face--left::after   { background: rgba(255, 255, 255, 0.06); }
.face--top::after    { background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); }
.face--bottom::after { background: rgba(0, 0, 0, 0.5); }

.tex { position: absolute; inset: 0; opacity: 0; background-size: 180px 180px; transition: opacity 450ms ease-out; }
.tex--blue    { background-image: url("../img/scene/tex-blue.webp"); }
.tex--red     { background-image: url("../img/scene/tex-red.webp"); }
.tex--multani { background-image: url("../img/scene/tex-multani.webp"); }
.slab--top .tex--blue,
[data-base="red"] .slab--base .tex--red,
[data-base="multani"] .slab--base .tex--multani,
[data-base="blue"] .slab--base .tex--blue { opacity: 1; }

/* the paper band slides off before the bar opens */
.band { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--band) * var(--h) * -1.2), 0); }
.band__face {
  --bh: calc(var(--h) * 0.34);
  position: absolute; top: calc(var(--bh) / -2); height: var(--bh);
  background: linear-gradient(180deg, #f3ecdc, #e9e0cb);
  box-shadow: inset 0 0 0 1px rgba(80, 60, 30, 0.08);
  opacity: calc(1 - var(--band) * 1.15);
  display: grid; place-items: center;
}
.band__face--front, .band__face--back { width: calc(var(--w) + 4px); left: calc(var(--w) / -2 - 2px); }
.band__face--front { transform: translateZ(calc(var(--dt) / 2 + 2px)); }
.band__face--back  { transform: rotateY(180deg) translateZ(calc(var(--dt) / 2 + 2px)); filter: brightness(0.82); }
.band__face--left, .band__face--right { width: calc(var(--dt) + 4px); left: calc(var(--dt) / -2 - 2px); }
.band__face--right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2 + 2px)); filter: brightness(0.8); }
.band__face--left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 + 2px)); }
.band__face img { height: calc(var(--h) * 0.24); width: auto; max-width: 70%; object-fit: contain; }

.split__floor {
  position: absolute; left: 50%; top: 50%; width: 60%; height: 16%;
  transform: translate(-50%, calc(var(--w, 300px) * 0.1 + 14vh)) scaleX(calc(1 + var(--open) * 0.5));
  background: radial-gradient(closest-side, rgba(5, 8, 6, 0.6), rgba(5, 8, 6, 0));
  pointer-events: none;
}

/* the two pours, each with the clay that made it */
.pours {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 4%; width: 54%; bottom: clamp(24px, 7vh, 72px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.pour { opacity: var(--rise); transform: translate3d(0, calc((1 - var(--rise)) * 36px), 0); }
.pour--base { transition: none; }
.pour__variant { display: none; }
[data-base="red"] .pour__variant[data-variant="red"],
[data-base="multani"] .pour__variant[data-variant="multani"],
[data-base="blue"] .pour__variant[data-variant="blue"] { display: block; }
.pour__dish { width: clamp(72px, 7vw, 108px); height: auto; border-radius: 50%; margin-bottom: 10px;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.5); }
.pour__name { font-family: var(--serif); font-size: var(--step-1); margin: 0 0 2px; color: var(--bone); }
.pour__does { margin: 0; color: var(--bone-soft); font-size: var(--step--1); max-width: 24ch; }

.split__panel {
  position: absolute; right: max(var(--gutter), 5vw); top: 50%; translate: 0 -50%;
  width: min(26rem, 34vw);
}
.split__lede { color: var(--bone-soft); margin-bottom: 22px; max-width: 34ch; }
.swap { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--bone) 28%, transparent); margin-bottom: 22px; }
.swap button {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--bone); font: 500 var(--step-0) var(--sans);
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.swap button[aria-checked="true"] { background: var(--bone); color: var(--slate); }
.swap button:not([aria-checked="true"]):hover { background: color-mix(in oklab, var(--bone) 12%, transparent); }
.split__buy .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .split__stage { grid-template-rows: auto 1fr auto; padding: 84px var(--gutter) 22px; }
  .split__panel { position: static; translate: none; width: auto; grid-row: 1; }
  .split__panel .h-section { font-size: clamp(1.8rem, 7.4vw, 2.4rem); margin-bottom: 4px; }
  .split__lede { font-size: var(--step--1); margin-bottom: 12px; }
  .swap { margin-bottom: 0; margin-right: 8px; vertical-align: middle; }
  .split__buy { display: inline-block; vertical-align: middle; margin-top: 10px; }
  .split__buy .btn { min-height: 44px; padding: 0 16px; font-size: var(--step--1); }
  .split__scene { position: relative; width: auto; grid-row: 2; min-height: 0; }
  .bar3d { --w: clamp(140px, 40vw, 220px); margin-top: 0; }
  .pours { position: static; width: auto; grid-row: 3; gap: 14px; }
  .pour__dish { width: 56px; margin-bottom: 6px; }
  .pour__name { font-size: var(--step-0); }
}

/* ============================================================== 4. prices */

.prices__stage { display: flex; align-items: center; background: var(--stone-2); }
.prices .rail { gap: clamp(20px, 3vw, 40px); padding-inline: max(var(--gutter), 5vw); align-items: stretch; }
.rail__lead { flex: 0 0 min(30rem, 38vw); align-self: center; padding-right: 2vw; }
.rail__lead p { color: var(--ink-dark-soft); font-size: var(--step-1); }
.tag {
  flex: 0 0 clamp(250px, 25vw, 340px);
  padding: 28px 26px; border-radius: 14px;
  background: #f7f2e8; border: 1px solid #d9d0bd;
  display: grid; align-content: start; gap: 6px;
  box-shadow: 0 2px 4px rgba(70, 56, 30, 0.06), 0 16px 32px -18px rgba(70, 56, 30, 0.35);
}
.tag--best { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt), 0 16px 32px -18px rgba(36, 68, 159, 0.45); }
.tag .mini-bars { height: 46px; margin-bottom: 14px; width: auto; }
.tag__count { font-family: var(--sans); font-weight: 500; font-size: var(--step-1); color: var(--ink-dark); margin: 0; }
.tag__price { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1.1; margin: 6px 0 10px; color: var(--ink-dark); }
.tag__fact { margin: 0; color: var(--ink-dark-soft); font-size: var(--step--1); }

@media (max-width: 760px) {
  .rail__lead { flex-basis: 78vw; }
  .tag { flex-basis: 70vw; }
}

/* ============================================================== 5. ritual */

.ritual { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; padding: clamp(5rem, 10vw, 8rem) 0; }
.ritual__water {
  position: absolute; top: 0; right: 0; bottom: 0; width: 70%; margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%);
          mask-image: linear-gradient(to right, transparent 0%, #000 34%);
}
.ritual__water img { width: 100%; height: 100%; object-fit: cover; }
.ritual__copy { position: relative; z-index: 1; }
.ritual__copy > * { max-width: 30rem; }
.ritual__lede { color: var(--bone-soft); font-size: var(--step-1); margin-bottom: 26px; }
.ritual .steps { list-style: none; margin: 0 0 26px; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.ritual .steps li { counter-increment: step; position: relative; padding-left: 48px; font-size: var(--step-1); color: #dfdbcc; }
.ritual .steps li::before { content: counter(step); position: absolute; left: 0; top: 0.05em; font-family: var(--serif); font-size: var(--step-2); line-height: 1; color: #d8b062; }
.ritual .steps strong { color: var(--bone); font-weight: 500; }
.ritual__note { font-size: var(--step--1); color: var(--bone-soft); border-top: 1px solid color-mix(in oklab, var(--bone) 16%, transparent); padding-top: 16px; }

@media (max-width: 860px) {
  .ritual { align-items: end; padding-top: 0; }
  .ritual__water { width: 100%; bottom: auto; height: 56svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
  .ritual__copy { padding-top: 44svh; }
}

/* ============================================================== 6. inside */

.inside { padding: clamp(5rem, 10vw, 9rem) 0; }
.inside__wrap { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .inside__wrap { grid-template-columns: 1.35fr 1fr; align-items: center; } }
.inside__fig { margin: 0; border-radius: 16px; overflow: hidden; }
.inside__fig img { width: 100%; height: auto; }
.inside__text p { color: var(--ink-dark-soft); max-width: 46ch; }
.label--ingredients { margin-top: 24px; color: var(--ink-dark); }
.label--ingredients > div { grid-template-columns: 9rem 1fr; }

/* ================================================================= 7. faq */

.home .faq { padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); }
.home .faq details { border-color: #d3cab7; }
.home .faq summary { color: var(--ink-dark); }
.home .faq summary::after { color: var(--cobalt); }
.home .faq details p { color: var(--ink-dark-soft); }

/* =============================================================== 8. close */

.close__stage { display: grid; place-items: center; padding: 0 var(--gutter); }
.close__plate {
  width: min(30rem, 100%);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid color-mix(in oklab, var(--bone) 26%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, var(--slate-2) 70%, transparent);
}
.close__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); margin: 0 0 18px; color: var(--bone); }
.label--close { color: var(--bone); margin-bottom: 26px; }
.close__plate .btn { width: 100%; }

/* ======================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hero__mist i { animation: none; }
  .hero__plate, .hero__copy, .hero__bar, .hero__soap, .hero__contact, .hero__leaves { transform: none; opacity: 1; }
  .split__stage { --p: 1; }
  .split__tilt { transition: none; }
}