:root {
  --vh: 100vh;
  --cream: #fbf5e6;
  --gold: #e9b949;
  --gold-deep: #c98f1a;
  --olive: #6b7d3a;
  --deep: #0b0d07;
  --ink: #1c2010;
  --serif: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --sans: "Heebo", "Arial Hebrew", Arial, sans-serif;
  --shadow-text: 0 2px 34px rgba(0, 0, 0, .62), 0 1px 3px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; }
html { background: var(--deep); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--cream); font-family: var(--sans); font-size: 18px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.loading { overflow: hidden; height: 100vh; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; top: -80px; inset-inline-start: 16px; z-index: 200; background: var(--gold); color: #1c1505; padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 14px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: var(--vh); z-index: 0; display: block; }
#poster { position: fixed; inset: 0; z-index: 0; display: none; background: #0b0d07 url(../assets/gen/poster.jpg) center / cover no-repeat; }
#poster::after { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 5, .55); }
.no-gl #gl { display: none; }
.no-gl #poster { display: block; }

/* ── the door ─────────────────────────────────────────────────────────────── */
#gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, rgba(11, 13, 7, .55), rgba(11, 13, 7, .96) 70%), url(../assets/gen/poster.jpg) center / cover no-repeat #0b0d07;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
#gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-inner { max-width: 520px; }
.gate-logo { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 22px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); }
#gate h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 8vw, 76px); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
.gate-sub { margin: 10px 0 30px; letter-spacing: .12em; font-size: 15px; color: var(--gold); }
.gate-load { width: 220px; height: 2px; margin: 0 auto; background: rgba(255, 255, 255, .18); border-radius: 2px; overflow: hidden; }
.gate-load i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .35s ease; }
.gate-state { font-size: 15px; opacity: .75; min-height: 1.6em; margin: 12px 0 0; }
.gate-enter { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; animation: rise .7s ease both; }
.gate-enter[hidden] { display: none; }
.gate-tip { flex-basis: 100%; font-size: 14px; opacity: .7; margin: 6px 0 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 17px; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f6d06a, #dba124); color: #1c1505; box-shadow: 0 10px 34px rgba(233, 185, 73, .35); }
.btn-ghost { border-color: rgba(255, 255, 255, .38); background: rgba(12, 14, 8, .38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.btn.big { min-height: 56px; padding: 14px 32px; font-size: 19px; }

/* ── always on screen ─────────────────────────────────────────────────────── */
.hud { position: fixed; top: 0; inset-inline: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; pointer-events: none; transition: opacity .6s ease; }
.loading .hud, .loading .rail { opacity: 0; }
.hud > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 19px; text-shadow: var(--shadow-text); }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 4px 18px rgba(0, 0, 0, .4); }
.sound { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(12, 14, 8, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; }
.hud { gap: 10px; }
.brand { margin-inline-end: auto; }
.order { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 22px; border-radius: 999px; background: linear-gradient(180deg, #f6d06a, #dba124); color: #1c1505; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 8px 26px rgba(233, 185, 73, .32); transition: transform .2s ease, box-shadow .2s ease; }
.order:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(233, 185, 73, .45); }
.sound .w1, .sound .w2 { display: none; }
.sound[aria-pressed="true"] .w1, .sound[aria-pressed="true"] .w2 { display: block; }
.sound[aria-pressed="true"] .x { display: none; }
.sound[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

.rail { position: fixed; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(255, 255, 255, .8); transition: opacity .6s ease; }
.rail-bottle { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); }
.rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rail a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; text-decoration: none; }
.rail a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); transition: transform .25s ease, background .25s ease; }
.rail a.on::before { background: var(--gold); transform: scale(1.7); }
.rail a span { position: absolute; inset-inline-end: 28px; white-space: nowrap; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(12, 14, 8, .8); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }

/* ── the story: tall chapters, a pinned stage, beats that come and go ─────── */
main { position: relative; z-index: 2; }
.ch { position: relative; height: calc(var(--len, 2) * var(--vh)); pointer-events: none; }
.ch + .ch { margin-top: calc(-1 * var(--vh)); }
.stage { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.beat { position: absolute; margin: 0; opacity: 0; visibility: hidden; will-change: opacity, transform; --shift: 0px; }
.beat.live { visibility: visible; }
.beat.on { pointer-events: auto; }

.kicker { margin: 0 0 10px; font-size: clamp(13px, 1.1vw, 16px); font-weight: 500; letter-spacing: .16em; color: var(--gold); text-shadow: var(--shadow-text); }
/* the buyer's question that each chapter answers */
.kicker.q { margin: 0 0 6px; font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 2.5vw, 40px); letter-spacing: 0; line-height: 1.1; color: #f4c95a; text-shadow: 0 2px 22px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .9); }
.line { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.3vw, 66px); line-height: 1.22; letter-spacing: -.01em; text-shadow: var(--shadow-text); text-wrap: balance; }
.line.small { font-size: clamp(24px, 3vw, 44px); line-height: 1.32; }
.line.strong { font-weight: 800; }
.line em { font-style: normal; color: var(--gold); font-weight: 800; }
.mega { margin: 0; font-family: var(--serif); font-weight: 900; font-size: clamp(64px, 12.5vw, 210px); line-height: .95; letter-spacing: -.02em; text-shadow: 0 6px 60px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .4); }
.body { margin: 12px 0 0; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.6; text-shadow: var(--shadow-text); max-width: 34em; }
.body.big { font-size: clamp(20px, 1.9vw, 28px); }
.hint { margin: 12px 0 0; font-size: 15px; opacity: .85; text-shadow: var(--shadow-text); }

.pos-c { inset-inline: 8vw; top: 50%; transform: translateY(calc(-50% + var(--shift))); text-align: center; }
.pos-c.line, .pos-c > .line { max-width: 16em; margin-inline: auto; }
.pos-t { inset-inline: 8vw; top: 16vh; transform: translateY(var(--shift)); text-align: center; }
.pos-b { inset-inline: 8vw; bottom: 11vh; transform: translateY(var(--shift)); text-align: center; }
.pos-b.line { max-width: 22em; margin-inline: auto; }
.pos-r { inset-inline-start: 7vw; top: 50%; transform: translateY(calc(-50% + var(--shift))); width: min(40vw, 620px); }
/* a soft pool of shade behind words that sit on a busy picture */
.pos-r::before, .pos-c::before, .pos-b::before, .pos-t::before { content: ""; position: absolute; inset: -30% -22%; z-index: -1; background: radial-gradient(closest-side, rgba(8, 10, 5, .34), rgba(8, 10, 5, .16) 55%, transparent); pointer-events: none; }
#ch-sky .pos-c::before, #ch-descent .pos-c::before, #ch-descent .pos-b::before { background: radial-gradient(closest-side, rgba(20, 16, 30, .26), rgba(20, 16, 30, .1) 55%, transparent); }
/* words arrive one after another, rising into focus */
.w { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(7px); transition: opacity .75s ease, transform 1s cubic-bezier(.2, .7, .1, 1), filter .75s ease; transition-delay: calc(var(--i, 0) * 60ms); will-change: transform, opacity; }
.beat.live .w { opacity: 1; transform: none; filter: none; }
.static .w { opacity: 1; transform: none; filter: none; }
.panel::before { display: none; }

.hero { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 6vw 6vh; transform: translateY(var(--shift)); }
.hero .title { font-size: clamp(44px, 8.2vw, 138px); line-height: 1.02; }
.hero .lede { margin: 22px 0 0; font-size: clamp(18px, 1.9vw, 27px); text-shadow: var(--shadow-text); }
.hero-cta { margin: 26px 0 0; }
.hero-cta .btn { min-height: 54px; padding: 14px 34px; font-size: 19px; font-weight: 700; }
.cue { position: absolute; bottom: 4.5vh; inset-inline: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .08em; opacity: .9; text-shadow: var(--shadow-text); }
.cue i { width: 1px; height: 46px; background: linear-gradient(var(--cream), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.since .year { font-variant-numeric: tabular-nums; color: var(--cream); }
.since .body { font-size: clamp(20px, 2vw, 30px); font-family: var(--serif); margin-top: 4px; }

.meter { margin: 22px 0 6px; width: min(100%, 420px); }
.meter-bar { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(to left, #98ae3d 0%, #b0d05a 22%, #b55a72 55%, #3a1d3e 82%, #1b0e1f 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 4px 20px rgba(0, 0, 0, .3); }
.meter-bar i { position: absolute; top: 50%; inset-inline-start: calc(var(--m, 0) * 100%); width: 26px; height: 26px; margin: -13px -13px 0; border-radius: 50%; background: var(--cream); border: 3px solid #1c1505; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); transition: box-shadow .3s ease; }
.meter.now .meter-bar i { box-shadow: 0 0 0 8px rgba(233, 185, 73, .35), 0 4px 14px rgba(0, 0, 0, .5); }
.meter-labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; opacity: .9; text-shadow: var(--shadow-text); }
.act { display: flex; flex-direction: column; align-items: center; }

.snaps { display: flex; gap: 18px; margin-top: 26px; }
.snap { margin: 0; background: #fbf7ee; padding: 9px 9px 0; border-radius: 3px; box-shadow: 0 22px 60px rgba(0, 0, 0, .55); width: clamp(132px, 14vw, 215px); }
.snap img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 1px; }
.snap figcaption { font-family: "Amatic SC", var(--sans); font-weight: 700; font-size: clamp(20px, 1.9vw, 27px); color: #3a3526; text-align: center; padding: 3px 0 6px; line-height: 1.2; }
.snap.wide { width: clamp(190px, 22vw, 330px); }
.tilt-a { transform: rotate(3deg); }
.tilt-b { transform: rotate(-4deg) translateY(16px); }

.press .mega { font-size: clamp(54px, 10vw, 170px); }
.press { bottom: 7vh; }

.panel { width: min(44vw, 560px); padding: 26px 28px; border-radius: 24px; background: rgba(12, 14, 8, .5); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.panel .line { font-size: clamp(26px, 2.9vw, 42px); }
.panel .body { font-size: clamp(15px, 1.1vw, 17px); text-shadow: none; opacity: .92; }
.panel .ask { font-weight: 600; opacity: 1; margin-top: 16px; }
.senses { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.sense { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px; min-height: 76px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); transition: transform .18s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.sense b { font-family: var(--serif); font-size: 20px; font-weight: 800; }
.sense span { font-size: 12px; opacity: .8; line-height: 1.25; }
.sense:hover { transform: translateY(-3px); background: rgba(233, 185, 73, .16); border-color: var(--gold); }
.sense.hit { background: var(--gold); color: #1c1505; border-color: var(--gold); box-shadow: 0 0 44px rgba(233, 185, 73, .6); transform: scale(1.04); }
.sense-say { min-height: 1.7em; margin: 12px 0 0; font-family: var(--serif); font-size: 21px; color: var(--gold); }
.certs { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.cert { margin: 0; flex: 0 0 62px; }
.cert img { width: 62px; aspect-ratio: 571 / 808; object-fit: cover; border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transform: rotate(-3deg); }
.certs ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.5; opacity: .92; }

.table { inset: 0; display: grid; grid-template-columns: minmax(280px, 34vw) auto; gap: 5vw; align-items: center; justify-content: center; padding: 9vh 6vw 5vh; transform: translateY(var(--shift)); }
.table-text .line { font-size: clamp(28px, 3.3vw, 50px); }
.tabs { display: inline-flex; gap: 6px; margin: 22px 0 16px; padding: 5px; border-radius: 999px; background: rgba(12, 14, 8, .5); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tab { min-height: 44px; padding: 8px 22px; border-radius: 999px; border: 0; background: none; font-weight: 600; font-size: 17px; }
.tab.on { background: var(--gold); color: #1c1505; }
.table-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-pitch { margin: 10px 0 0; font-size: clamp(18px, 1.5vw, 22px); }
.plate { position: relative; }
#dish { display: block; width: min(64vh, 46vw); height: min(64vh, 46vw); border-radius: 30px; box-shadow: 0 40px 120px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .1); touch-action: none; cursor: crosshair; background: #2a1c12 url(../assets/gen/dish-season.jpg) center / cover; }
.plate-note { position: absolute; bottom: 14px; inset-inline: 0; margin: 0; text-align: center; font-family: "Amatic SC", var(--sans); font-weight: 700; font-size: 28px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); pointer-events: none; }

/* ── ordinary scrolling sections over the sunset ──────────────────────────── */
.flow { position: relative; z-index: 3; padding: 26vh 6vw 12vh; background: linear-gradient(to bottom, rgba(11, 13, 7, 0), rgba(11, 13, 7, .16) 12vh, rgba(11, 13, 7, .5) 30vh, rgba(11, 13, 7, .7) 60vh, rgba(11, 13, 7, .72)); }
.flow.end { padding-top: 12vh; background: linear-gradient(to bottom, rgba(11, 13, 7, .7), rgba(11, 13, 7, .5) 40%, rgba(11, 13, 7, .86)); }
.wrap { max-width: 1180px; margin: 0 auto; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 34px; padding: 0; }
.facts li { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(12, 14, 8, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 16px; }
.facts b { color: var(--gold); font-weight: 600; }
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
/* a product card: the tin photographed in the grove's own light, on a dark card like the rest of the page */
.product { position: relative; display: flex; flex-direction: column; overflow: hidden; background: rgba(13, 15, 8, .78); color: var(--cream); border: 1px solid rgba(255, 255, 255, .13); border-radius: 22px; padding: 0 0 18px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.product:hover { transform: translateY(-6px); box-shadow: 0 34px 90px rgba(0, 0, 0, .55); border-color: rgba(233, 185, 73, .55); }
.product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .6s ease; }
.product:hover img { transform: scale(1.04); }
.product > :not(img):not(.tag) { margin-inline: 18px; }
.product h3 { margin-top: 14px; margin-bottom: 2px; font-family: var(--serif); font-weight: 800; font-size: 23px; line-height: 1.2; }
.product .desc { margin-top: 0; margin-bottom: 0; font-size: 14.5px; line-height: 1.45; color: rgba(251, 245, 230, .78); flex: 1; }
.product .price { margin-top: 10px; margin-bottom: 0; font-family: var(--serif); font-weight: 900; font-size: 38px; line-height: 1; color: var(--gold); }
.product .price small { font-family: var(--sans); font-weight: 500; font-size: 14px; color: rgba(251, 245, 230, .8); margin-inline-start: 8px; }
.product .tag { position: absolute; z-index: 1; top: 14px; inset-inline-start: 14px; background: var(--gold); color: #1c1505; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.product .buy { margin-top: 14px; display: flex; gap: 8px; }
.product .buy a { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; background: linear-gradient(180deg, #f6d06a, #dba124); color: #1c1505; transition: filter .2s ease; }
.product .buy a:hover { filter: brightness(1.08); }
.product .buy a.more { flex: 0 0 auto; padding: 0 16px; background: none; color: var(--cream); border: 1px solid rgba(255, 255, 255, .32); font-weight: 600; }
.shop-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

.end .wrap { max-width: 860px; text-align: center; }
.owner { margin: 0 auto 26px; width: clamp(170px, 20vw, 250px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--cream); box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 10px rgba(233, 185, 73, .18); }
.owner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.snap img, .cert img { height: auto; }
blockquote { margin: 0; }
blockquote p { margin: 0; font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4.6vw, 62px); line-height: 1.22; text-shadow: var(--shadow-text); }
blockquote footer { margin-top: 16px; color: var(--gold); letter-spacing: .08em; font-size: 16px; }
.contact { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 34px 0 60px; }
.faq { text-align: start; max-width: 700px; margin: 0 auto; }
.faq h3 { font-family: var(--serif); font-size: 28px; margin: 0 0 12px; }
.faq details { border-top: 1px solid rgba(255, 255, 255, .18); }
.faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.faq summary { cursor: pointer; padding: 16px 4px; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 24px; line-height: 1; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 4px 18px; opacity: .9; }
.foot { margin-top: 70px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; }
.foot img { width: 96px; height: 96px; border-radius: 50%; }
.foot p { margin: 0; }
.foot .fine { font-size: 13px; opacity: .65; }
.again { margin-top: 12px; color: var(--gold); text-decoration: none; font-weight: 600; }

/* ── without the 3D picture, or with motion turned down: the same story, standing still ── */
.static .ch { height: auto; margin: 0 !important; pointer-events: auto; }
.static .stage { position: static; height: auto; overflow: visible; padding: 14vh 7vw; display: flex; flex-direction: column; gap: 7vh; }
.static .beat { position: static; opacity: 1 !important; visibility: visible; transform: none !important; inset: auto; width: auto; pointer-events: auto; }
.static .hero { min-height: 70vh; }
.static .cue, .static #press-hint { display: none; }
.static .table { display: flex; flex-direction: column; padding: 0; }

/* ── narrow screens: the words sit low, the picture gets the rest ─────────── */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .hud { padding: 10px 12px; }
  .brand span { display: none; }
  .sound span { display: none; }
  .sound { padding: 8px 12px; }
  .rail { inset-inline-end: 8px; top: auto; bottom: 14px; transform: none; }
  .rail ol { display: none; }
  .rail-bottle { width: 22px; height: 55px; }
  .pos-r { inset-inline: 6vw; top: auto; bottom: 8vh; width: auto; transform: translateY(var(--shift)); text-align: center; }
  .pos-r .body, .pos-r .meter { margin-inline: auto; }
  .pos-c { inset-inline: 6vw; }
  .hero .title { font-size: 12.4vw; }
  .hero .lede { font-size: 17px; margin-top: 16px; }
  .hero-cta { margin-top: 20px; }
  .order { min-height: 40px; padding: 6px 18px; font-size: 14px; }
  .kicker.q { font-size: 24px; }
  .snaps { justify-content: center; margin-top: 16px; }
  .snap { width: 31vw; }
  .snap.wide { width: 46vw; margin-inline: auto; }
  .panel { width: auto; inset-inline: 3vw; bottom: 2vh; padding: 16px 16px 14px; border-radius: 20px; text-align: start; }
  .panel .line { font-size: 23px; }
  .panel .body { font-size: 14px; line-height: 1.5; margin-top: 6px; }
  .panel .body:not(.ask) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .panel .ask { margin-top: 8px; }
  .senses { gap: 5px; }
  .sense { min-height: 62px; padding: 8px 2px; border-radius: 12px; }
  .sense b { font-size: 17px; }
  .sense span { font-size: 10.5px; }
  .sense-say { font-size: 18px; margin-top: 6px; }
  .certs { display: none; }
  .table { grid-template-columns: 1fr; gap: 12px; padding: 62px 5vw 2vh; align-content: center; text-align: center; }
  .table-text .line { font-size: 25px; }
  .table-text .body { font-size: 15px; margin-top: 4px; }
  .tabs { margin: 10px 0 0; }
  .tab { padding: 6px 18px; font-size: 16px; min-height: 40px; }
  .table-actions { justify-content: center; margin-top: 10px; }
  .table-actions .btn { min-height: 42px; padding: 8px 20px; font-size: 15px; }
  .table-actions #pour-for-me { display: none; }
  .plate { justify-self: center; }
  #dish { width: min(86vw, 52vh); height: min(86vw, 52vh); border-radius: 24px; }
  .flow { padding: 20vh 5vw 9vh; }
  .products { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product { padding: 0 0 14px; border-radius: 18px; }
  .product > :not(img):not(.tag) { margin-inline: 12px; }
  .product h3 { font-size: 19px; }
  .product .price { font-size: 30px; }
  .product .price small { display: block; margin: 4px 0 0; }
  .product .buy a.more { display: none; }
  .btn.big { width: 100%; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .panel .body:not(.ask) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}