/* ПЛАТО — landing. Desktop layout is authored in Figma frame pixels (1920×1080)
   and scaled by JS-provided custom properties:
     --s, --ox, --oy  cover transform shared by the film canvas and the text stage
     --k              contain scale for persistent UI (header, rail) and where-to-buy
     --dw, --dh       viewport size in design px (viewport / --k)
     --bx, --by       offsets that centre a contain-scaled 1920×1080 box            */

:root {
  --bg: #0A0908;
  --bg-buy: #0B0A09;
  --gold: #D4B36A;
  --gold-hover: #E0C27F;
  --gold-deep: #B8913F;
  --cream: #F2ECE0;
  --body: #B5AD9F;
  --muted: #8C857A;     /* was #6B655B (3.4:1) — raised to 5.4:1 for 11–12px labels (WCAG AA) */
  --rail-off: #6B655B;  /* side rail numbers keep the Figma colour */
  --err: #E8876B;       /* form errors: must not look like focus (gold) */
  --muted-2: #8A8378;
  --hair: rgba(231, 214, 166, .18);
  --l14: 5, 20, 33;     /* #051421 */
  --l18: 32, 12, 9;     /* #200C09 */
  --l26: 24, 14, 30;    /* #180E1E */

  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-sans: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --s: 1; --ox: 0px; --oy: 0px;
  --k: 1; --dw: 1920; --dh: 1080; --bx: 0px; --by: 0px;
  /* Legibility factors set by JS (1 at 1920×1080): --ts small text, --tb body text */
  --ts: 1; --tb: 1;
}
.ov { --ts: var(--ts-s, 1); --tb: var(--tb-s, 1); }
.ui, .buy, .gate { --ts: var(--ts-k, 1); --tb: var(--tb-k, 1); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); overflow-anchor: none; scrollbar-color: #3a352e var(--bg); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
p, h1, h2, h3, dl, dd, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; }
a { color: inherit; }
button { font: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
/* Sections receive programmatic focus after an in-page CTA (tabindex=-1): no ring around the whole section */
#track > section[tabindex="-1"]:focus { outline: none; }
html.gate-on { overflow: hidden; }

/* Story progress: the page is ~16 screens long; a hairline shows how far along you are */
.progress { position: fixed; left: 0; top: 0; z-index: 11; width: 100%; height: 2px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--gold); opacity: .7; transform: scaleX(0); transform-origin: 0 50%; }
html.gate-on .progress { display: none; }

/* ---------- Film canvas + loader ---------- */
.film {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  z-index: 0; display: block; pointer-events: none;
}
.loader {
  position: fixed; left: 50%; top: 50%; z-index: 1; width: 120px; height: 1px;
  transform: translate(-50%, -50%); background: var(--hair); overflow: hidden;
  transition: opacity .4s ease;
}
.loader span {
  position: absolute; inset: 0; width: 40%; background: var(--gold);
  animation: loader 1.2s ease-in-out infinite;
}
@keyframes loader { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
html.is-loaded .loader { opacity: 0; visibility: hidden; }

/* ---------- Buttons & shared text ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border-radius: 2px; border: 0;
  font: 600 16px/24px var(--f-display); letter-spacing: 1.28px;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--outline { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn--outline:hover { background: rgba(212, 179, 106, .08); }
.btn--fill { background: var(--gold); color: var(--bg); }
.btn--fill:hover { background: var(--gold-hover); }
.btn--lg { padding: 18px 40px; font-size: 17px; line-height: 25px; letter-spacing: 1.36px; }

.text-link {
  font: 500 13px/17px var(--f-mono); letter-spacing: 2.08px; color: var(--gold);
  white-space: pre; text-decoration: none; transition: color .2s ease;
}
.text-link:hover { color: var(--gold-hover); }

.hairline { display: block; height: 1px; background: var(--hair); }
.eyebrow { font: 500 13px/17px var(--f-mono); letter-spacing: 2.34px; color: var(--gold); white-space: nowrap; }
.eyebrow--14 { font-size: 14px; line-height: 18px; letter-spacing: 2.52px; }
.headline { font: 700 60px/1.2 var(--f-display); letter-spacing: -.9px; color: var(--cream); }
.lead { font: 400 18px/1.5 var(--f-sans); color: var(--body); }

/* ---------- Persistent UI layer (header + rail) ---------- */
.ui {
  position: fixed; left: 0; top: 0; z-index: 10;
  width: calc(var(--dw) * 1px); height: calc(var(--dh) * 1px);
  transform: scale(var(--k)); transform-origin: 0 0;
  pointer-events: none;
}
.ui a, .ui button { pointer-events: auto; }
.hdr {
  position: absolute; left: 24px; right: 24px; top: 40px; height: 59px;
  display: flex; align-items: center; justify-content: space-between;
}
.hdr__logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.hdr__word {
  font: 700 40px/59px var(--f-display); letter-spacing: 13.6px; color: var(--gold);
  margin-right: -13.6px; /* cancel the trailing tracking so the logo block is 216px as in Figma */
  white-space: nowrap; transition: color .3s ease;
}
.hdr__hair {
  position: absolute; left: 24px; right: 24px; top: 119px; height: 1px;
  background: rgba(20, 18, 16, .14); display: none;
}
/* Set (08): compact header with the deeper gold wordmark */
.ui[data-hdr="set"] .hdr__word { color: var(--gold-deep); }
.ui[data-hdr="set"] .hdr__hair { display: block; }
/* Where-to-buy (09) uses the base header and rail, like every other screen */

.rail {
  position: absolute; left: 70px; top: calc(50% + .5px); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  font: 500 16px/21px var(--f-mono); letter-spacing: 1.6px; white-space: nowrap;
}
.rail a { color: var(--rail-off); text-decoration: none; transition: color .25s ease; }
.rail a:hover { color: var(--body); }
.rail a.is-active { color: var(--gold); }

/* ---------- Scroll track ---------- */
#track { position: relative; }
.hold { position: relative; height: 70vh; }
.trans { height: clamp(70vh, calc(var(--f) * 1.4vh), 220vh); }
.dim { position: relative; z-index: 5; height: 100vh; background: linear-gradient(to bottom, rgba(11, 10, 9, 0) 70%, var(--bg-buy) 100%); } /* feathers the top edge of .buy */

/* ---------- Text stage overlays (fixed, cover-transformed like the film) ---------- */
.ov {
  position: fixed; left: 0; top: 0; z-index: 2;
  width: 1920px; height: 1080px;
  transform: translate(var(--ox), var(--oy)) scale(var(--s));
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, translate;
}
.ov a, .ov button { pointer-events: auto; }
/* Off-screen copy stays readable for screen readers; it just stops taking clicks */
.ov.is-off a, .ov.is-off button { pointer-events: none; }
.ov .blk { position: absolute; }
html.reduce-motion .ov { transition: opacity .25s ease, visibility .25s; }

/* 01 hero */
.hero__mask {
  position: absolute; inset: 0;
  -webkit-mask-image: url(../media/masks/S1@1080-inv.png);
          mask-image: url(../media/masks/S1@1080-inv.png);
  -webkit-mask-size: 1920px 1080px; mask-size: 1920px 1080px;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.hero__title {
  position: absolute; left: calc(31.25% + 56.5px); top: 50%; transform: translate(-50%, -50%);
  width: 587px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-family: var(--f-display); font-weight: 700; color: var(--cream); text-align: center;
}
.hero__brand { display: block; width: 100%; font-size: 180px; line-height: .9; letter-spacing: 3.6px; }
.hero__num { display: block; width: 100%; font-size: 500px; line-height: .82; letter-spacing: -15px; }
/* CSS adds letter-spacing after the last glyph too; Figma does not. Re-centre by half of it. */
.hero__brand { position: relative; left: 1.8px; }
.hero__num { position: relative; left: -7.5px; }
.hero__cta {
  left: calc(66.67% - 40px); top: calc(50% + 25px); transform: translateY(-50%);
  width: 385px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.hero__text { width: 385px; font: 400 18px/1.55 var(--f-sans); color: var(--body); }
.hero__text p + p { margin-top: 1.55em; }
.hero__btn { width: 250px; }
/* Hero is a complete-looking screen: say that the story continues below */
.scroll-cue {
  left: 1240px; top: 984px; display: flex; align-items: center; gap: 14px;
  font: 500 calc(12px * var(--ts))/calc(16px * var(--ts)) var(--f-mono); letter-spacing: 2.4px; color: var(--body);
}
.scroll-cue i { display: block; width: 1px; height: 32px; background: linear-gradient(var(--gold), rgba(212, 179, 106, 0)); transform-origin: 50% 0; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* 02 density */
.about {
  left: 160px; top: calc(50% + .5px); transform: translateY(-50%); width: 520px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
}
.about__text { display: flex; flex-direction: column; gap: 20px; width: 520px; }
.about__cta { width: 250px; }
.specs {
  left: 1375px; top: 50%; transform: translateY(-50%); width: 385px; padding: 40px 0;
  display: flex; flex-direction: column; gap: 24px;
}
.spec { display: flex; flex-direction: column; }
.spec__label { font: 500 12px/16px var(--f-mono); letter-spacing: 1.92px; color: var(--muted); white-space: nowrap; }
.spec__value { margin-bottom: 4px; font: 600 54px/80px var(--f-display); letter-spacing: -1.08px; color: var(--cream); white-space: nowrap; }
.spec__body { font: 400 16px/1.5 var(--f-sans); color: var(--body); }

/* 03 cellar */
.process {
  left: 160px; top: calc(50% + .5px); transform: translateY(-50%); width: 520px;
  display: flex; flex-direction: column; gap: 36px;
}
.process__text { display: flex; flex-direction: column; gap: 20px; }
.chart { position: relative; width: 520px; height: 190px; }
.chart > * { position: absolute; }
.chart__axis { left: 0; top: 156px; width: 520px; height: 1px; background: var(--hair); }
.chart__tick { left: 180px; top: 151px; width: 1px; height: 10px; background: rgba(231, 214, 166, .40); }
.chart__line { left: 6px; top: 21px; width: 508.037px; height: 119.999px; max-width: none; }
.chart__dot { width: 8px; height: 8px; }
.chart__dot--start { left: 2px; top: 18px; }
.chart__dot--end { left: 510px; top: 136px; }
.chart__temp, .chart__phase { font: 500 11px/14px var(--f-mono); letter-spacing: 1.54px; white-space: nowrap; }
.chart__temp { color: var(--body); }
.chart__temp--start { left: 0; top: -4px; }
.chart__temp--end { right: 0; top: 116px; }
.chart__phase { top: 170px; color: var(--muted); }
.chart__phase--ferm { left: 0; }
.chart__phase--cellar { left: 196px; }
.chart__word { left: 212px; top: 92px; font: 700 24px/36px var(--f-display); letter-spacing: 7.2px; color: var(--cream); white-space: nowrap; }
.steps {
  /* translate by half of the 1920×1080 height: boosted text grows the column downwards, away from the bottle */
  left: 1375px; top: 50%; transform: translateY(calc(-50% / var(--tb))); width: 385px;
  display: flex; flex-direction: column; gap: 16px;
}
.step { display: flex; flex-direction: column; gap: 6px; }
.step__title { font: 600 22px/33px var(--f-display); letter-spacing: .44px; color: var(--cream); white-space: nowrap; }
.step__meta { font: 500 12px/16px var(--f-mono); letter-spacing: 1.68px; color: var(--gold); white-space: nowrap; }
.step__body { font: 400 15px/1.5 var(--f-sans); color: var(--body); }

/* 04 taste */
.taste__copy { left: 160px; top: 300px; width: 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.taste__title { width: 520px; }
.taste__lead { width: 420px; font: 400 17px/1.55 var(--f-sans); color: var(--body); }
.serving { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
.serving__line { width: 420px; }
.serve-row { display: flex; align-items: center; }
.serve-row dt { width: 140px; flex: none; font: 500 12px/16px var(--f-mono); letter-spacing: 1.92px; color: var(--muted); }
.serve-row dd { font: 400 16px/21px var(--f-sans); color: var(--cream); white-space: nowrap; }
.ingredient { width: 385px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ingredient .hairline { width: 100%; }
.ingredient--1 { left: calc(66.67% - 40px); top: 188px; }
.ingredient--2 { left: calc(75% - 65px); top: calc(50% - 26px); transform: translateY(-50%); }
.ingredient--3 { left: calc(66.67% - 40px); top: 712px; }
.ingredient__title { font: 600 22px/33px var(--f-display); letter-spacing: .44px; color: var(--cream); white-space: nowrap; }
.ingredient__notes { font: 500 12px/16px var(--f-mono); letter-spacing: 1.92px; color: var(--gold); white-space: nowrap; }
.ingredient__text { width: 100%; font: 400 16px/1.5 var(--f-sans); color: var(--body); }

/* 05 ladder (14 / 18 / 26) */
.nav-scrim { position: absolute; left: 0; top: -40px; width: 1920px; height: 240px; pointer-events: none; } /* 40px above the stage so the overlay slide never uncovers the top edge */
.ov--ladder[data-tone="14"] .nav-scrim { --c: var(--l14); }
.ov--ladder[data-tone="18"] .nav-scrim { --c: var(--l18); }
.ov--ladder[data-tone="26"] .nav-scrim { --c: var(--l26); }
.nav-scrim { background: linear-gradient(to bottom, rgba(var(--c), .92) 0, rgba(var(--c), .92) 40px, rgba(var(--c), .55) 160px, rgba(var(--c), 0) 240px); }
/* Figma centres this block (top: 50% + 20.5px, translateY(-50%)), which lands it on a fractional y
   and blurs the CTA's 1px gold border across two rows. Use the whole-pixel tops of the Figma boxes
   instead (14/18: y 270, 3 lead lines; 26: y 256, 4 lead lines) and a whole-pixel lead line-height
   (Figma's lead box is 81px for 3 lines), so every child, the CTA included, sits on whole pixels. */
.ladder__copy {
  left: 160px; top: var(--copy-top, 270px); width: 520px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
}
.ov--ladder[data-tone="26"] { --copy-top: 256px; }
.ladder__body { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
.ladder__title {
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--f-display); font-weight: 700; line-height: 1.2; color: var(--cream); white-space: nowrap;
}
.ladder__brand { display: block; font-size: 60px; letter-spacing: -.9px; margin-bottom: -40px; }
.ladder__num { display: block; font-size: 190px; letter-spacing: -2.85px; }
.ladder__lead { width: 520px; font: 400 17px/27px var(--f-sans); color: var(--body); }
.ladder__tags { font: 500 13px/17px var(--f-mono); letter-spacing: 2.08px; color: var(--gold); white-space: pre; }
.ladder__spec { display: flex; gap: 40px; align-items: flex-start; white-space: nowrap; }
.ladder__cell { display: flex; flex-direction: column; gap: 4px; }
.ladder__val { font: 600 28px/41px var(--f-display); color: var(--cream); }
.ladder__lbl { font: 500 11px/14px var(--f-mono); letter-spacing: 1.76px; color: var(--muted); }
.ladder__cta { white-space: pre; }
#ladder-14 .ladder__cta { padding-right: 26.875px; }
/* Where am I on the ladder: 22 lives in the hero, so 14 → 18 → 26 alone read as "three of four?" */
.ladder__steps {
  position: absolute; left: 0; top: -52px; display: flex; align-items: center; gap: 6px;
  font: 500 calc(13px * var(--ts))/calc(17px * var(--ts)) var(--f-mono); letter-spacing: 2.08px;
}
.ladder__stepsl { color: var(--muted); margin-right: 10px; }
.ladder__step { padding: 4px 6px; color: var(--body); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease; }
a.ladder__step:hover { color: var(--cream); border-bottom-color: var(--hair); }
.ladder__step.is-current { color: var(--gold); border-bottom-color: var(--gold); } /* trailing space + its tracking: box 182px as in Figma */

/* 06 set */
.set__copy { left: 160px; top: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.set__eyebrow { font: 500 13px/17px var(--f-mono); letter-spacing: 2.34px; color: var(--gold); white-space: pre; }
.set__h { width: 900px; font: 700 76px/.92 var(--f-display); letter-spacing: -1.14px; color: var(--cream); }
.set__body { width: 560px; font: 400 18px/1.6 var(--f-sans); color: var(--body); }
.set__card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.set__card .hairline { width: 560px; }
.set__title {
  width: 560px; display: flex; justify-content: space-between; align-items: baseline;
  font: 600 28px/41px var(--f-display); color: var(--cream); white-space: nowrap;
}
.set__price { color: var(--gold); }
.set__specs { font: 500 12px/16px var(--f-mono); letter-spacing: 1.68px; color: var(--muted); white-space: pre; }
.set__ctas { display: flex; align-items: center; gap: 28px; }

/* ---------- 07 where to buy (in flow, opaque) ---------- */
.buy { position: relative; z-index: 5; height: 100vh; background: var(--bg-buy); overflow: hidden; }
.buy__stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform: translate(var(--bx), var(--by)) scale(var(--k)); transform-origin: 0 0;
}
.buy__copy { position: absolute; left: 160px; top: 250px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.buy__h2 { font: 700 60px/1.1 var(--f-display); letter-spacing: -.9px; color: var(--cream); white-space: nowrap; }
.buy__body { width: 560px; font: 400 17px/1.55 var(--f-sans); color: var(--body); }
.buy__body--520 { width: 520px; }
.stores { position: relative; display: flex; align-items: flex-start; gap: 48px; }
/* "Где купить 14" filters the list until reset (was an 8-second tint) */
.filter { position: absolute; left: 0; top: calc(-31px * var(--ts)); font: 500 calc(12px * var(--ts))/calc(16px * var(--ts)) var(--f-mono); letter-spacing: 1.92px; color: var(--gold); white-space: pre; }
.filter__reset { padding: 0; border: 0; background: none; color: var(--cream); font: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.filter__reset:hover { text-decoration-color: currentColor; }
.stores.is-filtered .store:not(.is-match) { opacity: .32; }
.store__order { margin-top: 4px; }
.city { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.city h3 { font: 600 22px/33px var(--f-display); color: var(--cream); white-space: nowrap; }
.city__hair { width: 200px; height: 1px; background: var(--hair); }
.store { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; transition: opacity .3s ease; }
.store__n { font: 400 16px/21px var(--f-sans); color: var(--cream); transition: color .3s ease; }
.store__s { font: 500 11px/14px var(--f-mono); letter-spacing: 1.32px; color: var(--muted); transition: color .3s ease; }
.store.is-match .store__n { color: var(--gold); }
.store.is-match .store__s { color: var(--body); }

.release { position: absolute; left: 1240px; top: 250px; width: 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.release__h { font: 700 44px/1.1 var(--f-display); letter-spacing: -.44px; color: var(--cream); white-space: nowrap; }
.signup { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; width: 500px; }
.signup__input {
  width: 340px; height: 55px; padding: 18px 20px; margin: 0;
  border: 1px solid rgba(231, 214, 166, .35); border-radius: 0; background: transparent;
  color: var(--cream); font: 500 13px/17px var(--f-mono); letter-spacing: 1.82px;
  outline: none; transition: border-color .2s ease;
}
.signup__input::placeholder { color: var(--muted); opacity: 1; }
.signup__input:focus { border-color: var(--gold); }
.signup__btn { width: 148px; height: 56px; }
.signup__msg {
  flex-basis: 100%; min-height: calc(14px * var(--ts)); white-space: nowrap;
  font: 500 11px/14px var(--f-mono); letter-spacing: 1.32px; color: var(--gold);
}
.signup__note { flex-basis: 100%; font: 400 calc(13px * var(--tb))/1.5 var(--f-sans); color: var(--muted); }
.signup.is-error .signup__input { border-color: var(--err); }
.signup.is-error .signup__msg { color: var(--err); }
.signup.is-done .signup__note { display: none; }
.signup.is-done .signup__input, .signup.is-done .signup__btn { display: none; }
.signup.is-done .signup__msg {
  position: static; height: 56px; display: flex; align-items: center;
  font-size: 13px; letter-spacing: 2.08px;
}
.brewery { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 36px; }
.brewery .hairline { width: 520px; }

.foot {
  position: absolute; left: 160px; top: 1018px; width: 1600px; padding-top: 17px; border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 32px; align-items: start;
}
.foot__hair { display: none; }
.foot .foot__legal, .foot .foot__social, .foot .foot__copy { position: static; }
.foot .foot__copy { justify-self: end; }
.foot__legal, .foot__social, .foot__copy,
.gate__legal, .gate__copy {
  position: absolute; top: 1036px; font: 500 11px/14px var(--f-mono); letter-spacing: 1.76px; white-space: pre;
}
.foot__legal, .gate__legal { left: 160px; color: var(--body); }
.foot__social { left: 810px; color: var(--body); }
.foot__social a { text-decoration: none; transition: color .2s ease; }
.foot__social a:hover { color: var(--gold); }
.foot__soon { color: var(--muted); }
.foot__copy, .gate__copy { right: 160px; color: var(--muted-2); }

/* ---------- 00 age gate ---------- */
.gate { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow: hidden; transition: opacity .5s ease; }
html.gate-off .gate { display: none; }
.gate.is-leaving { opacity: 0; pointer-events: none; }
.gate:focus { outline: none; }
.gate__veil { position: absolute; inset: 0; background: rgba(8, 7, 6, .94); }
.gate__stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform: translate(var(--bx), var(--by)) scale(var(--k)); transform-origin: 0 0;
}
.gate__hair { position: absolute; left: 160px; top: 1018px; width: 1600px; height: 1px; background: var(--hair); }
.gate__box {
  position: absolute; left: 50%; top: calc(50% + .5px); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center;
}
.gate__title { font: 700 96px/142px var(--f-display); letter-spacing: -1.44px; color: var(--cream); white-space: nowrap; }
.gate__note { max-width: 620px; font: 400 18px/1.55 var(--f-sans); color: var(--body); }
.gate__answers { display: flex; gap: 16px; align-items: flex-start; }
.gate__answers [hidden] { display: none; }

/* ---------- Legibility floor on small desktops (factors are 1 at 1920×1080) ---------- */
.text-link, .eyebrow, .ladder__tags, .set__eyebrow { font-size: calc(13px * var(--ts)); line-height: calc(17px * var(--ts)); }
.eyebrow--14 { font-size: calc(14px * var(--ts)); line-height: calc(18px * var(--ts)); }
.spec__label, .step__meta, .serve-row dt, .ingredient__notes, .set__specs { font-size: calc(12px * var(--ts)); line-height: calc(16px * var(--ts)); }
.ladder__lbl, .store__s, .signup__msg, .foot__legal, .foot__social, .foot__copy,
.gate__legal, .gate__copy { font-size: calc(11px * var(--ts)); line-height: calc(14px * var(--ts)); }
.signup__input { font-size: calc(13px * var(--ts)); }
.lead, .hero__text, .set__body { font-size: calc(18px * var(--tb)); }
.taste__lead, .buy__body { font-size: calc(17px * var(--tb)); }
.spec__body, .ingredient__text { font-size: calc(16px * var(--tb)); }
.step__body { font-size: calc(15px * var(--tb)); }
.ladder__lead { font-size: calc(17px * var(--tb)); line-height: calc(27px * var(--tb)); }
.serve-row dd, .store__n { font-size: calc(16px * var(--tb)); line-height: calc(21px * var(--tb)); }

/* ---------- Mobile / portrait: canvas centred on the product, text in flowing panels ---------- */
@media (max-width: 900px), (max-aspect-ratio: 6/5) {
  .ui { width: 100%; height: auto; transform: none; }
  .hdr {
    position: fixed; left: 0; right: 0; top: 0; height: auto; padding: 14px 16px 26px;
    background: linear-gradient(to bottom, rgba(10, 9, 8, .9), rgba(10, 9, 8, 0));
  }
  .hdr__word { font-size: 24px; line-height: 34px; letter-spacing: 8px; margin-right: -8px; }
  .hdr__hair, .rail { display: none; }
  .hdr__buy { padding: 9px 16px; font-size: 13px; line-height: 18px; letter-spacing: 1.04px; margin: 0; }

  .hold { height: auto; padding-top: 62vh; }
  /* Hero: the whole title (ПЛАТО + 22, ~210px) sits above the fold on the first screen:
     viewport − panel padding (120) − title (~212) − 24px margin */
  #hero.hold { padding-top: max(36vh, calc(100vh - 356px)); padding-top: max(36svh, calc(100svh - 356px)); }
  .trans { height: clamp(40vh, calc(var(--f) * .9vh), 140vh); }
  .dim { height: 60vh; }

  .ov {
    position: relative; width: auto; height: auto; transform: none; translate: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: flex; flex-direction: column; gap: 40px;
    padding: 120px 16px 72px;
    background: linear-gradient(to bottom, rgba(10, 9, 8, 0) 0, rgba(10, 9, 8, .82) 120px, rgba(10, 9, 8, .9) 100%);
  }
  .ov .blk { position: relative; left: auto; top: auto; right: auto; transform: none; translate: none; width: auto; max-width: 560px; }
  .nav-scrim { display: none; }
  /* Set: the box numerals (gold) sit right above the panel; darken earlier and drop the
     eyebrow below them so the gold mono line never sits on gold digits */
  .ov--set {
    padding-top: 176px;
    background: linear-gradient(to bottom, rgba(10, 9, 8, 0) 0, rgba(10, 9, 8, .55) 40px, rgba(10, 9, 8, .88) 120px, rgba(10, 9, 8, .9) 100%);
  }

  .headline { font-size: 36px; letter-spacing: -.5px; }
  .lead, .hero__text { font-size: 16px; }
  .about__text, .taste__title, .taste__lead, .ladder__lead, .set__h, .set__body,
  .set__card .hairline, .set__title, .serving__line { width: auto; max-width: 100%; }

  .hero__mask { position: relative; inset: auto; -webkit-mask-image: none; mask-image: none; }
  .hero__title { position: relative; left: auto; top: auto; transform: none; width: auto; align-items: flex-start; text-align: left; gap: 4px; }
  .hero__brand { font-size: 64px; letter-spacing: 1.3px; left: 0; }
  .hero__num { font-size: 180px; letter-spacing: -5px; left: 0; }
  .hero__text { width: auto; }

  .spec__value { font-size: 40px; line-height: 56px; }
  .specs { padding: 0; }
  .chart { zoom: .66; }
  .serve-row { align-items: flex-start; }
  .serve-row dt { width: 120px; padding-top: 3px; }
  .serve-row dd { white-space: normal; }
  .ingredient { width: auto; }
  .ladder__num { font-size: 120px; }
  .ladder__brand { margin-bottom: -22px; }
  .ladder__tags, .set__eyebrow, .set__specs { white-space: pre-wrap; }
  .ladder__spec { gap: 28px; }
  .set__h { font-size: 44px; }
  .set__title { font-size: 22px; line-height: 32px; flex-wrap: wrap; gap: 4px 16px; white-space: normal; }
  .set__ctas { flex-wrap: wrap; gap: 20px; }

  .buy { height: auto; }
  .buy__stage { position: relative; width: auto; height: auto; transform: none; padding: 104px 16px 32px; display: flex; flex-direction: column; gap: 64px; }
  .buy__copy, .release { position: static; width: auto; }
  .buy__h2, .release__h { white-space: normal; font-size: 40px; }
  .buy__body, .buy__body--520, .brewery .hairline { width: auto; max-width: 100%; }
  .stores { flex-direction: column; gap: 36px; }
  .store { white-space: normal; }
  .signup { flex-wrap: wrap; width: 100%; padding-bottom: 24px; }
  .signup__input { width: 100%; }
  .signup__btn { width: 100%; }
  .signup__msg { top: auto; bottom: 0; white-space: normal; }
  .signup.is-done .signup__msg { position: static; }
  .foot { position: relative; left: auto; top: auto; width: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); }
  .foot .foot__copy { justify-self: auto; }
  .foot__hair { display: none; }
  .foot__legal, .foot__social, .foot__copy { position: static; white-space: pre-wrap; }

  .gate__stage { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
  .gate__box { width: calc(100% - 32px); }
  .gate__title { font-size: 44px; line-height: 1.2; white-space: normal; }
  .gate__answers { flex-wrap: wrap; justify-content: center; }
  .gate__hair { left: 16px; right: 16px; width: auto; top: auto; bottom: 72px; }
  .gate__legal, .gate__copy { top: auto; left: 16px; right: 16px; white-space: pre-wrap; font-size: 10px; letter-spacing: 1.2px; }
  .gate__legal { bottom: 36px; }
  .gate__copy { bottom: 16px; text-align: left; }

  /* Touch targets ≥ 44px */
  .hdr__logo { min-height: 44px; }
  .hdr__buy { padding-top: 13px; padding-bottom: 13px; }
  .text-link, .foot__social a, .filter__reset { display: inline-flex; align-items: center; min-height: 44px; }
  .ladder__step { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
  .ladder__steps { position: static; flex-wrap: wrap; gap: 0 2px; margin-bottom: 4px; }
  .scroll-cue { display: none; }
  .filter { position: static; white-space: pre-wrap; }
  .signup { width: 100%; }
  .signup__msg { white-space: normal; }
  /* Ladder: the big ПЛАТО 14 sat on the label's own numerals — darken the panel top sooner */
  .ov--ladder { background: linear-gradient(to bottom, rgba(10, 9, 8, 0) 0, rgba(10, 9, 8, .6) 48px, rgba(10, 9, 8, .88) 140px, rgba(10, 9, 8, .9) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .loader span { animation: none; width: 100%; }
  .scroll-cue i { animation: none; }
}

/* ---------- возврат к кейсу на сайте-портфолио (как NavPill в шапке сайта) ---------- */
.to-case {
  position: fixed; left: 24px; bottom: 24px; z-index: 110; /* выше возрастного гейта (100): уйти к кейсу можно и с него */
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 14px; border-radius: 999px;
  background: rgba(17, 18, 20, 0.6); color: #f4f4f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  font: 500 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.to-case:hover { background: rgba(38, 40, 44, 0.85); border-color: rgba(255, 255, 255, 0.24); }
.to-case:focus-visible { outline: 2px solid #f4f4f5; outline-offset: 2px; }
.is-embed .to-case { display: none; }
@media (max-width: 900px) { .to-case { left: 16px; bottom: 16px; } }
@media print { .to-case { display: none; } }