/* The script face, used for the single letter in the corner mark. */
@font-face {
  font-family: "BD Script";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/BDscriptbold.otf") format("opentype");
  font-display: swap;
}

/* While a revisit is being restored, every transition and animation is muted so
   the settled screen simply appears in place instead of playing the intro. */
.intro-instant,
.intro-instant *,
.intro-instant *::before,
.intro-instant *::after {
  transition: none !important;
  animation: none !important;
}

/* Registered so the value below resolves to pixels when script.js reads it back;
   an unregistered custom property would hand over the literal calc(). */
@property --wordmark-rest-gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Interpolated so the cream climb and the gold reveal clip share one value
   instead of two separate transform transitions fighting each other. */
@property --plate-shift {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

:root {
  color-scheme: light;
  background: #f6f1ea;
  /* The headline serif: Google's Cormorant SC (small caps), with Cormorant
     Garamond kept only as the load fallback. */
  --font-serif: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
  font-family: var(--font-serif);
  font-synthesis: none;
  --ink: #000;
  --wine: #640809;

  --gold: #c1995b;
  --cream: #f6f1ea;

  /* HOME, ABOUT and CONTACT share this ground. */
  --contact-bg: #f6f1ea;

  /* Contact-page title "LET'S / TALK / BOTTLES" with a CONTACT eyebrow.
     --ct-head-top is line 1's cap-top (board px); the lines step down by the
     shared --story-head-leading and the eyebrow hangs --tag-gap above line 1 —
     the same vertical rhythm every other title uses. Each of the four has its
     own x so it can be slid sideways on its own: the eyebrow is centred on
     --ct-tag-x, the three lines are left-aligned at --ct-l1/2/3-x. */
  --ct-head-top: 300;
  --ct-tag-x: 634;
  --ct-l1-x: 370;
  --ct-l2-x: 231;
  --ct-l3-x: 370;

  /* The eyebrow, the three title lines and the cheers.svg accent move together:
     each adds this one offset to its own position, so the whole group shifts as
     a unit while their relative placement (the x's above and the accent's spot
     below) is preserved. Its own name (not --contact-group-*, which the landing
     page's WHERE MEMORIES GATHER already owns). --ctg-dy is chosen so TALK
     (line 2) lands vertically centred on the screen. */
  --ctg-dx: 0;
  --ctg-dy: -5;

  /* The intro note on the contact page: centred horizontally, with --note-y
     setting its vertical position on the board. It is set in the about page's
     lede copy exactly (Inter, --lede-*), left-aligned. */
  --note-y: 938;
  /* Extra cream between LET'S TALK BOTTLES and everything below it. The note,
     form and office/email block all add this, so they keep their spacing. */
  --contact-below-dy: 80;

  /* The inquiry form: a narrow centred column one screen below the title.
     --form-w is its width; each field's serif title is --field-title-size board
     px at --field-title-weight (the weight is driven by the tuner while it is
     being set). */
  --form-w: 460;
  --field-title-size: 25;
  --field-title-weight: 300;
  /* The field titles can be flipped black <-> gold by the tuner; the
     required-field diamond to their left stays black and is sized by
     --diamond-size (board px). */
  --field-title-color: var(--story-ink);
  --diamond-size: 8;

  /* The GIDALA office + email block: one group (gold OFFICE / EMAIL labels over
     about-page body copy), placed to the left of the form by --info-x / -y
     (board px top-left). --info-text-size is the address/email size; the gold
     labels have their own size and weight; --info-gap is the space between the
     office and email mini-groups (each label stays pinned to its own info). */
  --info-x: 275;
  --info-y: 1400;
  --info-text-size: 17;
  --info-title-size: 15;
  --info-title-weight: 600;
  --info-gap: 33;

  /* thanks.png (1024x358), shown after a send: --thanks-size is its width,
     --thanks-y nudges it down from the STATE field's spot (board px). */
  --thanks-size: 450;
  --thanks-y: 335;

  /* anytime.svg accent on the contact page: centred on --contact-cheers-x. */
  --contact-cheers-x: 762;
  --contact-cheers-y: 719;
  --contact-cheers-w: 560;

  /* ---------------------------------------------------------------------------
     THE FRAME

     The hero is drawn once, on a fixed 1920 x 1080 board, and that whole board
     is only ever scaled to fit the window. Nothing reflows: narrow the window
     and the same picture simply gets smaller, as though you were zooming out.

     Every number in the block below is a coordinate on that board, in board
     pixels, counted from its top-left corner. They are plain numbers on
     purpose: --px turns one board pixel into whatever it is worth on screen,
     and --stage-x / --stage-y say where the board's corner has landed.
     --------------------------------------------------------------------- */
  --board-w: 1920;
  --board-h: 1080;
  --px: min(100vw / var(--board-w), 100svh / var(--board-h));
  --stage-x: calc((100vw - var(--board-w) * var(--px)) / 2);
  --stage-y: calc((100svh - var(--board-h) * var(--px)) / 2);

  /* ---------------------------------------------------------------------------
     THE MANUAL CONTROLS, all in board pixels
     --------------------------------------------------------------------- */

  /* GIDALA. --wordmark-w is the width of the box the letters are set in, so it
     reads as how large they are; the intro's letters are cut out of the same
     box, so it sizes those too. --wordmark-track is the space between the
     letters. --wordmark-rest-y is where the tops of the capitals come to rest,
     and --wordmark-hold-y is the middle of where they stand before the climb,
     which is the height they are read at all through the intro. */
  --wordmark-w: 1900;
  --intro-wine-x: 135;
  --intro-wine-y: -92;
  --intro-wine-w: 2186;
  --wordmark-track: 0.0em;
  --wordmark-rest-y: 227;
  --wordmark-hold-y: 540;

  /* Thickness (in em of the nav type) of each equalizer bar beside MUSIC. Drawn
     at this whole-pixel width (crisp + identical), then scaled to ~75% on .eq so
     the bars read ~25% thinner while staying perfectly even. */
  --eq-thick: 0.105;
  --music-vol: 0.30;

  /* hero.jpg. --film-w is how wide it is and --film-y is where its top edge
     comes to rest; the height follows the image's own proportions, so the whole
     picture is shown at that width and its foot simply runs on past the fold,
     to be met when the page is scrolled. */
  --film-w: 475;
  --film-y: 450;

  /* grape.jpg, layered over hero.jpg at the same width. --grape-x / --grape-y
     are its top-left on the board; --grape-w its width (matching hero.jpg's
     --film-w). Extra climb is --hero-speed / --grape-speed. */
  --grape-x: 1039;
  --grape-y: 1094;
  --grape-w: var(--film-w);
  --grape-speed: 0.24;
  --hero-speed: 0.05;

  /* pick1–4 between TASTE WORTH SHARING and WHERE MEMORIES GATHER.
     Board pixels traced from the 16:9 reference (1024×576 → ×1.875). */
  --pick1-x: 617;
  --pick1-y: 59;
  --pick1-w: 686;
  --pick1-h: 743;
  --pick2-x: 1101;
  --pick2-y: 554;
  --pick2-w: 309;
  --pick2-h: 386;
  --pick3-x: 0;
  --pick3-y: 443;
  --pick3-w: 382;
  --pick3-h: 527;
  --pick4-x: 1748;
  --pick4-y: 711;
  --pick4-w: 172;
  --pick4-h: 259;

  /* The four-line note under the wordmark. X is its left edge, --tagline-top is
     the top of its first line, and --tagline-leading is the board distance from
     one line to the next. */
  --tagline-size: 26;
  --tagline-x: 373;
  --tagline-top: 540;
  --tagline-leading: 31;
  --tagline-track: 0.055em;
  --tagline-weight: 300;

  /* The menu, and the gold rule standing the same height as it against the
     right-hand wall. Both are measured in from the board's top-right. Its type
     is pinned to the size it held when the note ran at 23 (23 * 0.8), so the
     note can grow without dragging the menu with it. */
  --nav-size: 18.4;
  --nav-weight: 400;
  --nav-track: 0.02em;
  --nav-right: 17;
  --nav-top: 46;
  --rule-w: 6;

  /* Size of the gold back-chevron that appears below AUSTRIA, as a multiple of
     the nav type size. */
  --nav-chev: 1.1;

  /* The corner mark, set into the board's BOTTOM-left: the script capital "G" on
     its own, in gold. --mark-x is its left edge, --mark-bottom how far it sits
     off the foot, and --glyph-size the letter. */
  --mark-x: 64;
  --mark-bottom: 48;
  --glyph-size: 109;

  /* The page's foot, on the last screen. Both sit on that section's board, so
     they are only reached by scrolling all the way down. Two independent size
     knobs — raise --copyright-size to grow the ©2026, --footer-size to grow the
     three legal lines. The footer's font, tracking and line spacing all match
     the menu; --footer-size just starts at the menu's own size. Positions are
     board pixels in from the section's edges. */
  --copyright-size: 22;
  --copyright-right: 74;
  --copyright-bottom: 54;

  --footer-size: 15;
  --footer-bottom: 44;

  /* ---------------------------------------------------------------------------
     THE STORY SECTION, one screen below the hero. Same board, same units.
     --------------------------------------------------------------------- */
  --story-ink: #191313;

  /* The small label above the headline (e.g. "EST. 2016"), black and very thin.
     --tag-cx is the board x it is centred on, so it can be hung over one word
     rather than the screen; --tag-top is its top edge. --tag-gap is the distance
     from a tag's top edge to the top of its title's capitals: EST. 2016, INQUIRE
     and GIDALA each set their --tag-top as (their own headline top − --tag-gap),
     so all three hang the same distance above their titles from one knob. Being
     position:absolute, the tags shift nothing else on the page. */
  --tag-size: 18;
  --tag-track: 0.14em;
  --tag-cx: 525;
  --tag-top: 58;
  --tag-gap: 70;

  /* The serif headline. --story-head-x is the first line's left edge,
     --story-head-top the top of its capitals and --story-head-leading the drop
     from one line to the next. --head-stag-2 / --head-stag-3 push the second
     and third lines further right for the staggered set. */
  --story-head-x: 370;
  --story-head-top: 110;
  --story-head-size: 230;
  --story-head-leading: 163;
  --story-head-weight: 300;
  --story-head-track: -0.03em;
  --head-stag-2: 175;
  --head-stag-3: 350;

  /* TASTE WORTH SHARING's horizontal position: the board x of its first line's
     left edge. Lower it to slide the whole headline left. */
  --about-head-x: 200;
  --welcome-group-x: 59;
  --welcome-group-y: 48;
  --welcome-group-scale: 0.890;
  --title-group-scale: 0.890;
  --together-y: -20;
  --collection-y: 0;
  --about-title-y: -29;
  --contact-title-x: 0;
  --contact-title-y: 0;
  --producer-title-y: 0;
  --inquire-y: 0;

  /* Each screen's "group" — the lede paragraph, its accent svg and its button —
     rides shared offsets (board pixels; +dy moves DOWN, +dx moves RIGHT). Each
     piece keeps its own -x / -y underneath; these shift the group together. */
  --about-group-dy: 91;
  --about-group-dx: 120;
  /* Slides the TASTE lede + MEET THE FOUNDER + MUSIC as one left-aligned group. */
  --about-copy-dx: -64;
  --about-copy-dy: 88;
  --contact-group-dy: 99;
  --contact-group-dx: 0;
  /* A whole-section vertical nudge for WHERE MEMORIES GATHER (headline, cheers,
     lede, buttons), on top of the per-piece offsets above. 0 leaves everything
     where it is; raise it to drop the lot together. */
  --contact-dy: 0;
  --aboutpage-group-dy: 88;

  /* ---------------------------------------------------------------------------
     THE SCRIPT ACCENTS — sublime.svg, cheers.svg, anytime.svg and discover.svg

     One accent per row, and these are the only places any of them is placed or
     sized; nothing anywhere else overrides them. All numbers are board
     pixels on the 1920 x 1080 board.

       -x  the horizontal CENTRE of the word. 960 is the middle of the board;
           raise it to move right. The cream band runs from 314 to 1606.
       -y  the TOP edge of the word. Raise it to move down.
       -w  the WIDTH of the word, which is what sizes it — the height follows
           the artwork's own proportions, so it never crops or distorts.

     Each accent is absolutely positioned and drawn on top of its section, so
     moving one can never shift, squeeze or hide anything else on the page.
     --------------------------------------------------------------------- */
  --sublime-x: 986;
  --sublime-y: 305;
  --sublime-w: 700;

  --cheers-x: 964;
  --cheers-y: 442;
  --cheers-w: 560;

  /* Moved down with the closing headline, which is now centred on its screen. */
  --discover-x: 973;
  --discover-y: 594;
  --discover-w: 810;

  /* The paragraph's box width and type. Where each paragraph actually sits is
     set in the block below. */
  --lede-w: 770;
  --lede-size: 23;
  --lede-leading: 32;
  --lede-weight: 300;

  /* The button's type. Where each one sits is set in the block below. */
  --cta-size: 15.555; /* 17, less 8.5% */
  --cta-weight: 500;
  --cta-track: 0.2em;

  /* ---------------------------------------------------------------------------
     THE PARAGRAPHS AND THEIR BUTTONS — where each one sits

     One row per piece here, and these are the only places any of them is
     placed; nothing anywhere else overrides them. All board pixels on the
     1920 x 1080 board: raise -x to move RIGHT, raise -y to move DOWN.

       about    TASTE WORTH SHARING, i.e. "Boutique importer of fine European
                wine & spirits…". Flush LEFT, so --about-lede-x is the LEFT
                edge of the box (that box is --lede-w wide). --about-copy-dx
                slides this paragraph and both buttons together.
       contact  WHERE MEMORIES GATHER, i.e. "There's always room for good
                conversation.". CENTRED on the screen, so --contact-lede-cx is
                960 (the board's middle), which the button pair shares.

     Each button is centred on its own -cx, and is its own row, so moving a
     paragraph leaves its button put.
     --------------------------------------------------------------------- */
  --about-lede-x: 740;
  --about-lede-y: 640;
  --about-cta-cx: 740;
  /* Hung off the paragraph rather than placed on its own, so moving the
     paragraph carries MEET THE FOUNDER down with it by the same amount. 185 is
     the gap between them; change that only if you want the button nearer/further
     from the text. To move the pair, use --about-lede-y. */
  --about-cta-y: calc(var(--about-lede-y) + 185);

  /* The MUSIC button sits to the RIGHT of MEET THE FOUNDER on the same row. It is
     pinned by its RIGHT edge at --music-r (board): when the label grows from ON to
     OFF it extends leftward so the last letter never moves, and it stays wholly
     independent of the founder button. */
  /* Right-pinned. Nudged left so the 8.5% CTA shrink doesn't widen the air
     between this button and MEET THE FOUNDER (tops stay on --about-cta-y). */
  --music-r: 1304;

  --contact-lede-cx: 960;
  --contact-lede-y: 660;
  --contact-cta-cx: 960;
  --contact-cta-y: 845;
  /* Slides the WHERE MEMORIES lede + the two buttons as one group (board px). */
  --contact-copy-dy: 61;
  /* The gap between the CONTACT and PRODUCERS buttons (board px). */
  --contact-btn-gap: 75;

  /* FULL CELLAR SELECTION. Photo left wall is --cellar-x. The title hangs
     --cellar-stack-gap below the photo, and that same gap sits between title
     and copy, and copy and the buttons. cellar.jpg is 1035×1520. */
  --cellar-x: 385;
  --cellar-y: 94;
  --cellar-w: 480;
  --cellar-stack-gap: 48;
  --cellar-title-size: 96;
  --cellar-title-leading: 70;
  --cellar-copy-w: 618;
  --cellar-btn-gap-x: 42;
  --cellar-rule-w: 107;

  /* BEYOND GENERATIONS — same stack as FULL CELLAR SELECTION, hung under
     heritage.jpg (1448×1086). --heritage-x is set in script so the S in
     GENERATIONS mirrors the F in FULL from the opposite board wall. */
  --heritage-x: 969;
  --heritage-y: 1556;
  --heritage-w: 640;
  --heritage-copy-w: 375;
  --heritage-rule-w: 107;
  --cta-chev-n: 0.85;

  /* ---------------------------------------------------------------------------
     OUR COLLECTION, the last screen, with a rule running out either side of the
     word OUR to the width of COLLECTION below it.

     The rules take whatever width is left over once OUR and the gaps are
     accounted for, so they always meet COLLECTION's edges however the type is
     sized. --collection-rule-inset holds them back from those edges,
     --collection-rule-gap is the air either side of OUR, --collection-rule-thick
     is the hairline's weight and --collection-rule-shift nudges it off the
     capitals' middle. All board pixels.
     --------------------------------------------------------------------- */
  --collection-rule-inset: 40;
  --collection-rule-gap: 44;
  --collection-rule-thick: 2;
  --collection-rule-shift: 0;

  /* How long the rules take to erase inwards, and the text to turn from gold to
     black, once the headline has been hovered — and the same again in reverse
     when the pointer leaves. --collection-fade is how long discover.svg takes to
     fade in and, on the way back, out. Keep --collection-fade in step with the
     FADE_MS in script.js, which waits on it before resetting the strokes. */
  --collection-wipe: 0.85s;
  --collection-fade: 0.7s;

  /* ---------------------------------------------------------------------------
     Everything below is worked out from the numbers above.
     --------------------------------------------------------------------- */
  --wordmark-box: calc(var(--wordmark-w) * var(--px));
  --wordmark-rest-gap: calc(var(--stage-y) + var(--wordmark-rest-y) * var(--px));
  --wordmark-top: calc(var(--stage-y) + var(--wordmark-hold-y) * var(--px));
  --film-top: calc(var(--stage-y) + var(--film-y) * var(--px));
  --film-shift: calc(100svh - var(--film-top));

  /* The wordmark's weight, held constant from the intro through to the settled
     screen. */
  --wordmark-weight: 400;

  /* The cream field's climb, which is also the wordmark's colour change. */
  --flood-ease: cubic-bezier(0.62, 0, 0.2, 1);
  --flood-duration: 1.9s;

  /* The letters climbing to their resting place, one after the next. */
  --rise-duration: 1.35s;
  --rise-stagger: 0.075s;
  --rise-ease: cubic-bezier(0.4, 0, 0.12, 1);

  /* The still's climb, once the letters are gone. */
  --set-ease: cubic-bezier(0.5, 0, 0.16, 1);
  --set-duration: 1.25s;

  /* Driven by state classes: the field travels, the wordmark holds. */
  --plate-shift: 100svh;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

/* The page still scrolls; the bar itself is just hidden on every engine. */
img,
video,
svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* overflow-x: clip on html makes overflow-y compute to auto, which lets the
     landing scroll under the wine cutout. Keep both axes locked until is-open. */
  overflow: hidden;
  overscroll-behavior: none;
  transition: --plate-shift var(--flood-duration) var(--flood-ease);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Locked until the plate has finished climbing, so the intro can't be
   scrolled past. script.js opens it up on the far side of the animation. */
body {
  overflow: hidden;
  color: var(--ink);
  background: #f6f1ea;
}

html.is-open,
html:has(body.about-page),
html:has(body.contact-page),
html:has(body.producer-page),
html:has(body.legal-page) {
  /* The menu's items slide clean off the right edge during the PRODUCERS swap;
     clip the x-axis so that never adds a horizontal scroll. */
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: auto;
}

body.is-open {
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   AGE GATE — white screen, type sized to the Æbele-style reference: a compact
   three-line serif title, smaller Inter body, small gold CTA. The stack is
   left-aligned and centred as a group; each title line can be nudged on x.
   --------------------------------------------------------------------------- */
:root {
  --gate-head-size: 70;
  --gate-head-leading: 58;
  /* Was 16; scaled by the same factor as ACCEPT (12 → 15.555). */
  --gate-copy-size: 20.74;
  --gate-please-x: 0;
  --gate-enjoy-x: 48;
  --gate-responsibly-x: 0;
}

html.gate-done .gate {
  display: none;
}

.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.gate__inner {
  position: relative;
  text-align: left;
}

.gate__title {
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(var(--gate-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--gate-head-leading) * var(--px));
  text-transform: uppercase;
}

.gate__title span {
  display: block;
  white-space: nowrap;
}

.gate__please {
  transform: translateX(calc(var(--gate-please-x) * var(--px)));
}
.gate__enjoy {
  transform: translateX(calc(var(--gate-enjoy-x) * var(--px)));
}
.gate__responsibly {
  transform: translateX(calc(var(--gate-responsibly-x) * var(--px)));
}

.gate__rule {
  width: 100%;
  height: calc(1.4 * var(--px));
  margin: calc(14 * var(--px)) 0 calc(22 * var(--px));
  background: var(--gold);
}

.gate__copy {
  /* Title→copy gap (40 at leading 58) is spent on the rule's margins. Bottom:
     89 matches MEET THE FOUNDER under the last lede line (185 − 3 × 32). */
  margin: 0 0 calc(89 * var(--px));
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--gate-copy-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--gate-copy-size) * 1.5 * var(--px));
}

.gate__accept {
  display: inline-flex;
}

@keyframes gate-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.gate.is-leaving {
  pointer-events: none;
}

.gate.is-leaving .gate__please,
.gate.is-leaving .gate__enjoy,
.gate.is-leaving .gate__responsibly,
.gate.is-leaving .gate__rule,
.gate.is-leaving .gate__copy,
.gate.is-leaving .gate__accept {
  animation: gate-out 0.35s ease forwards;
}

.gate.is-leaving .gate__please {
  animation-delay: 0s;
}
.gate.is-leaving .gate__enjoy {
  animation-delay: 0.07s;
}
.gate.is-leaving .gate__responsibly {
  animation-delay: 0.14s;
}
.gate.is-leaving .gate__rule {
  animation-delay: 0.21s;
}
.gate.is-leaving .gate__copy {
  animation-delay: 0.28s;
}
.gate.is-leaving .gate__accept {
  animation-delay: 0.35s;
}

/* One screen exactly, and the board is centred in it. Whatever the window's
   shape leaves over falls outside the board, which is why the field behind
   everything runs edge to edge rather than being pinned to the board. */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #fff;
}

/* Once the intro is done the hero stops clipping, so hero.jpg can run past the
   fold, and it sits above the story so that overhang reads over it. The intro's
   own scaffolding is dropped so nothing else spills. */
body.is-open .hero {
  overflow: visible;
}

body.is-open .wordmark-film,
body.is-open .edge-mask {
  display: none;
}

/* The cutout and its solid twin share a transform origin on the letters'
   optical centre, so they stay registered while the colour crossfades. Neither
   one moves any more: the field travels, the wordmark holds. */
.wordmark-film,
.hero-final-wordmark,
.plate-wordmark {
  position: absolute;
  top: var(--wordmark-top);
  left: 50%;
  width: var(--wordmark-box);
  aspect-ratio: 16 / 9;
  transform-origin: 49.48% 66.85%;
  transform: translate(-49.48%, -66.85%);
}

.wordmark-film {
  z-index: 1;
  background: #fff;
  box-shadow: 0 0 0 100vmax #fff;
}

/* Clip the wine here — not on .wordmark-film — because overflow on a
   transformed box does not clip a <video> compositor layer. */
.film-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0);
}

/* Solidifies to wine while the field is still below it, so the turn to gold
   only happens where the rising cream has already covered it. */
.hero-final-wordmark {
  z-index: 2;
  fill: var(--wine);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.hero.is-scene-active .hero-final-wordmark {
  opacity: 1;
}

.hero.is-intro-settled .wordmark-film {
  visibility: hidden;
}

html:has(.hero.is-flooded) {
  --plate-shift: 0px;
}

/* The settled screen's ground, carried up as one cream field edge to edge. It
   sits in normal flow and climbs by transform, so the document keeps its
   one-screen height. */
.hero-plate {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--cream);
  transform: translateY(var(--plate-shift));
}

/* Full-screen window over the wine letters. It does not move: --plate-shift
   clips it from the top, so gold is uncovered on the same rising edge as the
   cream. The gold GIDALA inside is parked on the wine wordmark's coordinates
   and never translates, which is what used to make it sit low mid-wipe. */
.hero-reveal {
  position: absolute;
  z-index: 14;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(var(--plate-shift) 0 0 0);
}

.plate-wordmark {
  z-index: 1;
  overflow: visible;
  fill: var(--gold);
  pointer-events: none;
}

/* Once the field has landed there is nothing left to clip, so the wordmark is
   rebuilt outside it for the climb: same coordinates, but over the film rather
   than under it. */
/* The settled wordmark rides above the brown border (which is only ever meant to
   sit over the cream background), so its outer letters aren't clipped by it. */
.risen-wordmark {
  position: absolute;
  z-index: 15;
  top: 0;
  left: 50%;
  width: var(--wordmark-box);
  aspect-ratio: 16 / 9;
  overflow: visible;
  fill: var(--gold);
  pointer-events: none;
  transform: translateY(var(--wordmark-top)) translate(-49.48%, -66.85%);
}

/* One element per letter, each pinned to the x it was measured at, climbing on
   a stagger. The travel is worked out live and handed over as --rise. */
.plate-letter {
  font-variation-settings: "wght" var(--wordmark-weight);
  animation: letter-rise var(--rise-duration) var(--rise-ease) forwards;
  animation-delay: calc(var(--i) * var(--rise-stagger));
}

@keyframes letter-rise {
  to {
    transform: translateY(calc(var(--rise, 900px) * -1));
  }
}

/* Pinned by its top edge on the board and shown at its own proportions, so the
   whole picture hangs from there and its foot runs on below the fold. Its
   --film-shift is the intro's settle and --parallax the scroll depth its own
   data-parallax earns it, same as every other picture on the page.
   Layered under the story sections (which stand at 11) so grapes.jpg, placed on
   the ABOUT board and lifted up into this run, can ride over the top of it. It
   never reaches the walls at 10 either way: at 475 board wide and centred it
   stays well inside the cream band. */
.hero-film {
  position: absolute;
  z-index: 7;
  top: var(--film-top);
  left: 50%;
  width: calc(var(--film-w) * var(--px));
  transform: translateX(-50%)
    translateY(calc(var(--film-shift) + var(--parallax, 0px)));
  transition: transform var(--set-duration) var(--set-ease);
}

.hero.is-set {
  --film-shift: 0px;
}

/* grape.jpg, layered over hero.jpg. Placed by its board top-left, sized to the
   same width, and lifted on scroll by --parallax (written by initParallax off
   its data-parallax rate). z-index 12 keeps it above hero.jpg (z7) AND above the
   story sections (z11), so the about screen rising underneath can't clip its
   bottom edge. It lives in the band, so it never reaches the walls. */
.grape {
  position: absolute;
  z-index: 12;
  top: calc(var(--stage-y) + var(--grape-y) * var(--px));
  left: calc(var(--stage-x) + var(--grape-x) * var(--px));
  width: calc(var(--grape-w) * var(--px));
  height: auto;
  transform: translateY(var(--parallax, 0px));
}

/* Once the intro is settled the set-transition has done its job and is dropped,
   so nothing is left easing behind the scroll. */
body.is-open .hero-film {
  transition: none;
}

.hero-film__still {
  display: block;
  width: 100%;
  height: auto;
}

/* A block of spaced capitals under the wordmark, its first line pinned to the
   board and each further line dropped by the leading. Lines rise the same way
   as the about-page lede, after GIDALA has finished climbing. */
.hero-tagline {
  position: absolute;
  z-index: 6;
  top: calc(var(--stage-y) + var(--tagline-top) * var(--px));
  left: calc(var(--stage-x) + var(--tagline-x) * var(--px));
  margin: 0;
  color: var(--gold);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--tagline-size) * var(--px));
  font-weight: var(--tagline-weight);
  letter-spacing: var(--tagline-track);
  line-height: calc(var(--tagline-leading) * var(--px));
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Persistent site chrome ------------------------------------------------
   The menu and the corner mark are pinned to the viewport rather than the
   board, so they hold the same corner on every screen and stay put while the
   page scrolls behind them. Their insets still scale with the board's zoom.
   On the intro they are already painted; .chrome-reveal uncovers them with the
   cream. */
.chrome-reveal {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

body:not(.is-open) .chrome-reveal {
  clip-path: inset(var(--plate-shift) 0 0 0);
}

.site-nav,
.site-mark {
  position: fixed;
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
}

/* Top-right, pulled out by its own tracking to sit optically flush. */
.site-nav {
  top: calc(var(--nav-top) * var(--px));
  right: calc(var(--nav-right) * var(--px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 calc(var(--nav-track) * -1) 0 0;
  color: var(--nav-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--nav-size) * var(--px));
  font-weight: var(--nav-weight);
  letter-spacing: var(--nav-track);
  line-height: 1.33;
  text-transform: uppercase;
  pointer-events: none;
}

/* Hung off the menu so it stands exactly as tall, but pushed back out by the
   menu's own inset so it meets the screen's right-hand edge. */
.site-nav::after {
  position: absolute;
  top: 0;
  right: calc(var(--nav-right) * var(--px) * -1);
  bottom: 0;
  width: calc(var(--rule-w) * var(--px));
  background: var(--gold);
  content: "";
}

body.is-set .site-nav,
body.is-set .site-mark {
  pointer-events: auto;
}

/* The menu stands on the cream ground throughout, so its plain items take the
   story ink at their settled weight. Carried on a property rather than set on
   the links directly, so the two rules below — the gold for the current page and
   for a hover — still win outright whichever state we are in. */
.site-nav {
  --nav-ink: var(--story-ink);
  --nav-weight: 400;
}

/* Only the colour ever changes, and only for as long as the ease takes. Nothing
   here touches the weight, so every item — selected, hovered or plain — is set
   at the one --nav-weight and none of them thins out under the pointer. */
.site-nav a {
  color: inherit;
  text-decoration: none;
  transition: color 0.5s ease;
}

/* The label is painted through its own text with a hard-edged gold-to-ink
   gradient; --nav-sweep is where the two meet. At 0% the whole word is the
   menu ink, at 100% it is all gold, so easing --nav-sweep from 0 to 100 wipes
   the gold in from the left edge of the first letter across to the last. The
   equalizer bars are left on the link's own colour (currentColor), so this
   never touches them. */
/* Registered as a colour so the menu ink can ease (used when items pass over the
   producer pages' white sheet and fade from white back to ink). */
@property --nav-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #191313;
}

@property --nav-sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.nav-label {
  --nav-sweep: 0%;
  background-image: linear-gradient(
    to right,
    var(--gold) var(--nav-sweep),
    var(--nav-ink) var(--nav-sweep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition:
    --nav-sweep 0.5s ease,
    --nav-ink 0.5s ease;
}

/* --- PRODUCERS menu swap ---------------------------------------------------
   Clicking PRODUCERS fades the five menu items out, top→bottom; once they are
   gone the five countries (and the BACK control beneath AUSTRIA) fade in the
   same way. The country list is absolutely overlaid, so the menu's height — and
   with it the gold rule's length — never change; BACK sits in that overlay, so
   it can't stretch the rule either. --nav-d is the per-item stagger delay. */
.site-nav > a,
.nav-countries > a,
.nav-back {
  --nav-d: 0s;
  transition:
    opacity 0.35s ease var(--nav-d),
    color 0.5s ease 0s;
}

/* Menu items leaving (countries shown): fade out, top → bottom. */
.site-nav.show-countries > a {
  opacity: 0;
  pointer-events: none;
}
.site-nav.show-countries > a:nth-of-type(1) { --nav-d: 0s; }
.site-nav.show-countries > a:nth-of-type(2) { --nav-d: 0.07s; }
.site-nav.show-countries > a:nth-of-type(3) { --nav-d: 0.14s; }
.site-nav.show-countries > a:nth-of-type(4) { --nav-d: 0.21s; }
.site-nav.show-countries > a:nth-of-type(5) { --nav-d: 0.28s; }

/* Menu items returning (default): wait for the countries to clear, then top → bottom. */
.site-nav > a:nth-of-type(1) { --nav-d: 0.7s; }
.site-nav > a:nth-of-type(2) { --nav-d: 0.77s; }
.site-nav > a:nth-of-type(3) { --nav-d: 0.84s; }
.site-nav > a:nth-of-type(4) { --nav-d: 0.91s; }
.site-nav > a:nth-of-type(5) { --nav-d: 0.98s; }

/* The countries, overlaid on the same rows as the menu and right-aligned to match
   (absolute, so they never affect the menu's height or the gold rule). */
.nav-countries {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* The container itself must never catch clicks — otherwise, sitting over the
     menu, it would swallow them. Only its items take pointer events, and only
     once they've faded into view (below). */
  pointer-events: none;
}
.nav-countries > a,
.nav-back {
  opacity: 0;
  pointer-events: none;
}

/* Countries leaving (default): fade out top → bottom, ahead of the menu's return. */
.nav-countries > a:nth-child(1) { --nav-d: 0s; }
.nav-countries > a:nth-child(2) { --nav-d: 0.07s; }
.nav-countries > a:nth-child(3) { --nav-d: 0.14s; }
.nav-countries > a:nth-child(4) { --nav-d: 0.21s; }
.nav-countries > a:nth-child(5) { --nav-d: 0.28s; }
.nav-back { --nav-d: 0.35s; }

/* Countries arriving (shown): wait for the menu to clear, then fade in top → bottom. */
.site-nav.show-countries .nav-countries > a,
.site-nav.show-countries .nav-back {
  opacity: 1;
  pointer-events: auto;
}
.site-nav.show-countries .nav-countries > a:nth-child(1) { --nav-d: 0.7s; }
.site-nav.show-countries .nav-countries > a:nth-child(2) { --nav-d: 0.77s; }
.site-nav.show-countries .nav-countries > a:nth-child(3) { --nav-d: 0.84s; }
.site-nav.show-countries .nav-countries > a:nth-child(4) { --nav-d: 0.91s; }
.site-nav.show-countries .nav-countries > a:nth-child(5) { --nav-d: 0.98s; }
.site-nav.show-countries .nav-back { --nav-d: 1.05s; }

/* The back control beneath AUSTRIA: the word BACK in the menu's own face, all
   gold, with a gold double-chevron facing LEFT (the mirror of the gold buttons)
   immediately to its left. Right-aligned in the column like the country names,
   so BACK's final K sits under AUSTRIA's last A. */
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.nav-back .nav-label {
  --nav-sweep: 100%; /* solid gold, same type as every other item */
}
.nav-back__chev {
  width: calc(var(--nav-chev) * var(--nav-size) * var(--px));
  height: calc(var(--nav-chev) * var(--nav-size) * var(--px));
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E")
    no-repeat center / contain;
  transform: scaleX(-1);
  flex: none;
}

/* The current page reads gold outright — its star and label both. inline-flex
   so a newline between the tag and .nav-label (ABOUT, CONTACT) cannot insert
   extra space; the star sits the same 0.4em from every word as it does on HOME. */
.site-nav a[aria-current="page"] {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
}

.site-nav a[aria-current="page"] .nav-label {
  --nav-sweep: 100%;
}

/* A star flagging the current page, set just to its left, a little smaller
   than the type it sits beside. */
.site-nav a[aria-current="page"]::before {
  margin-right: 0.4em;
  font-size: 0.7em;
  color: var(--gold);
  content: "\2726";
}

/* Hover wipes the gold across the word; the equalizer (currentColor) warms to
   gold alongside it. */
.site-nav a:hover {
  color: var(--gold);
}

.site-nav a:hover .nav-label {
  --nav-sweep: 100%;
}

/* The MUSIC item carries a little four-bar equalizer to the immediate left of
   the word. It is laid out inline with the label and sits on the same colour as
   the item (cream, ink or gold), the bars taking currentColor. */
.site-nav__music {
  display: inline-flex;
  align-items: center;
}

.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: round(0.12em, 1px);
  height: 0.68em;
  margin-right: 0.42em;
  /* Each bar is drawn at a crisp whole-pixel width (below), which is what keeps
     all four perfectly identical. We then scale the whole group down as one unit
     to make them ~25% thinner — the scale hits every bar equally, so they stay
     even. Anchored on the right so the bars keep their distance from MUSIC. */
  transform: scaleX(0.75);
  transform-origin: 100% 50%;
}

/* Each bar is anchored at its foot and swayed by script.js, which runs a single
   continuous wave for all four (so they stay out of step) and eases a shared
   amplitude 1↔0 on the MUSIC toggle. Only scaleY is ever touched here — the bars
   keep their width — so turning off settles them to a short static stub and
   turning on slides them straight back into the ongoing rhythm (no restart). */
.eq span {
  /* Whole-pixel width so every bar is an identical integer-px box (fractional
     widths snap unevenly per bar, which made them look mismatched). The group's
     scaleX on .eq makes the final rendered width the thinner one. flex:none keeps
     the layout from shrinking any bar. */
  width: max(1px, round(var(--eq-thick, 0.09) * 1em, 1px));
  flex: none;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  transform: scaleY(0.18);
}

/* Hovering MUSIC snaps the four bars straight to gold — no fade — while the word
   itself keeps its left-to-right sweep. Set explicitly (not via currentColor) so
   it doesn't ride the link's colour transition. */
.site-nav__music:hover .eq span {
  background: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .eq span {
    animation: none;
    transform: scaleY(0.6);
  }
}

/* Bottom-left: the script capital "G" on its own, in gold. Move it with
   --mark-x / --mark-bottom; size it with --glyph-size. */
.site-mark {
  bottom: calc(var(--mark-bottom) * var(--px));
  left: calc(var(--mark-x) * var(--px));
  display: flex;
  margin: 0;
  color: var(--gold);
}

a.site-mark {
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
}

.site-mark__glyph {
  font-family: "BD Script", "Snell Roundhand", cursive;
  font-size: calc(var(--glyph-size) * var(--px));
  font-weight: 700;
  line-height: 1;
}

/* ©2026 in the bottom-right corner of the last screen, in gold. On the section's
   own board, so it only appears at the very foot of the page. */
.site-copyright {
  position: absolute;
  z-index: 2;
  right: calc(var(--stage-x) + var(--copyright-right) * var(--px));
  bottom: calc(var(--stage-y) + var(--copyright-bottom) * var(--px));
  margin: 0;
  color: var(--gold);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--copyright-size) * var(--px));
  font-weight: 400;
  letter-spacing: var(--nav-track);
  line-height: 1;
}

/* The three legal lines, centred along the bottom edge of the last screen. Same
   family, weight, tracking and line spacing as the menu, so they read as its
   quiet twin; --footer-size is their own size knob. */
.site-footer {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--stage-y) + var(--footer-bottom) * var(--px));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  color: #c9c3b8;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--footer-size) * var(--px));
  font-weight: 400;
  letter-spacing: var(--nav-track);
  line-height: 1.33;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.35s ease;
}

.site-footer a:hover {
  color: var(--gold);
}

/* --- The story section, one screen below the hero -------------------------
   Same board as the hero: cream ground, and every piece placed by its board
   coordinates. */
/* Deliberately not clipped: an accent or picture placed past the section's top
   or foot has to spill over the neighbouring one rather than be cut off, which
   is what lets a negative board y lift something up into the scroll above. The
   section carries the cream edge to edge itself, and stands above the hero's own
   layers so a spill can read over them. */
.story {
  position: relative;
  z-index: 11;
  width: 100%;
  height: 100svh;
  background: var(--cream);
}

/* Extra cream under TASTE WORTH SHARING before the empty run down to
   WHERE MEMORIES GATHER. */
.story--about {
  height: calc(100svh + 11svh);
  --tag-top: calc(var(--story-head-top) - var(--tag-gap));
}

/* WELCOME + TASTE WORTH SHARING + sublime.svg, locked together. */
.welcome-title-group {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  transform-origin: calc(var(--stage-x) + var(--about-head-x) * var(--px))
    calc(var(--stage-y) + var(--story-head-top) * var(--px));
  transform: translate(
      calc(var(--welcome-group-x) * var(--px)),
      calc(var(--welcome-group-y) * var(--px))
    )
    scale(var(--welcome-group-scale));
}

.title-group {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: translate(
      calc(var(--tg-x, 0) * var(--px)),
      calc(var(--tg-y, 0) * var(--px))
    )
    scale(var(--title-group-scale));
}

.title-group[data-title-group="together"] {
  --tg-x: 0;
  --tg-y: var(--together-y);
}

.title-group[data-title-group="collection"] {
  --tg-x: 0;
  --tg-y: var(--collection-y);
}

.title-group[data-title-group="about-title"] {
  --tg-x: 0;
  --tg-y: var(--about-title-y);
}

.title-group[data-title-group="contact-title"] {
  --tg-x: var(--contact-title-x);
  --tg-y: var(--contact-title-y);
}

.title-group[data-title-group="producer-title"] {
  --tg-x: 0;
  --tg-y: var(--producer-title-y);
}

.title-group[data-title-group="inquire"] {
  --tg-x: 0;
  --tg-y: var(--inquire-y);
}

.title-group .story__headline,
.title-group .producer-inquire__headline {
  pointer-events: auto;
}

/* TASTE is only as wide as its letters, so WELCOME can centre on that word
   instead of the whole three-line title. */
.story--about .story__headline-line--1 {
  width: max-content;
}

/* The small label above the headline. Placed on the board like everything else
   in the section, so it holds its distance from the headline on every screen:
   --tag-top is its top edge and --tag-cx the x it is centred on. */
.section-tag {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--tag-top) * var(--px));
  left: calc(var(--stage-x) + var(--tag-cx) * var(--px));
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--tag-size) * var(--px));
  font-weight: 200;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  transform: translateX(-50%);
}

/* Left-aligned display serif. Lines can be staggered rightwards a step at a
   time by wrapping each in a .story__headline-line. */
.story__headline {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--story-head-top) * var(--px));
  left: calc(var(--stage-x) + var(--story-head-x) * var(--px));
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(var(--story-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--story-head-leading) * var(--px));
  text-transform: uppercase;
}

.story__headline-line {
  display: block;
}

.story__headline-line--2 {
  margin-left: calc(var(--head-stag-2) * var(--px));
}

.story__headline-line--3 {
  margin-left: calc(var(--head-stag-3) * var(--px));
}

/* The title accents (welcome.svg, discover.svg, …) are inlined Svgator words
   that draw themselves on. Each is placed and sized purely by its own three
   variables at the top of this file. They are taken out of the flow and given
   the highest layer in the section, so they sit over the headline and the
   copy — and moving one shifts nothing else. */
.story__cheers {
  position: absolute;
  z-index: 30;
  color: var(--gold);
  /* Purely decorative, and the topmost thing in the section: it must not shadow
     the words underneath it from the pointer. OUR COLLECTION's hover depends on
     that, since discover.svg is laid right across it. */
  pointer-events: none;
}

/* Centred on its own -x, so the translate takes off half its width. */
.story__cheers--svg {
  transform: translateX(-50%);
}

.story__cheers--sublime {
  top: calc(var(--stage-y) + (var(--sublime-y) + var(--about-group-dy)) * var(--px));
  left: calc(var(--stage-x) + (var(--sublime-x) + var(--about-group-dx)) * var(--px));
  width: calc(var(--sublime-w) * var(--px));
}

.story__cheers--cheers {
  top: calc(var(--stage-y) + (var(--cheers-y) + var(--contact-group-dy) + var(--contact-dy)) * var(--px));
  left: calc(var(--stage-x) + (var(--cheers-x) + var(--contact-group-dx)) * var(--px));
  width: calc(var(--cheers-w) * var(--px));
}

.story__cheers--discover {
  top: calc(var(--stage-y) + var(--discover-y) * var(--px));
  left: calc(var(--stage-x) + var(--discover-x) * var(--px));
  width: calc(var(--discover-w) * var(--px));
}

.story__cheers--svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The reveal is prepared in script.js: it recolours the letterforms to gold,
   whitens the mask's draw-strokes, hides the exporter watermark, and tags each
   draw-stroke with .cheers-stroke and its index (--i). Each stroke starts
   hidden (its length is baked into stroke-dashoffset); on scroll-in the offsets
   run to zero in sequence, writing the word once and holding — never looping. */
@keyframes cheers-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.story__cheers--svg.is-writing .cheers-stroke {
  animation: cheers-draw 0.8s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.45s);
}

.story__cheers--svg.is-written .cheers-stroke,
.about__script.is-written .cheers-stroke {
  stroke-dashoffset: 0;
  animation: none;
}

/* Right-aligned within a fixed board-width box, so it wraps and stays flush
   right the way the reference does. */
.story__lede {
  position: absolute;
  z-index: 2;
  width: calc(var(--lede-w) * var(--px));
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
  text-align: right;
}

/* Masked line reveal (Aebele-style): each visual line sits in overflow:hidden
   and starts a full line-height below, then eases up. Hidden until JS has
   wrapped the lines so the raw paragraph never flashes. */
.js-line-reveal:not(.is-lined) {
  visibility: hidden;
}

.js-line-reveal .line-reveal {
  display: block;
  overflow: hidden;
}

.js-line-reveal .line-reveal__inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
}

/* Landscapes marquee removed; WHERE MEMORIES GATHER goes to OUR COLLECTION. */

/* The button. At rest it is a gold label with a "chevrons-right" mark to its
   right ("FRANCE >>"). On hover the label slides right; the right mark rides
   along with it at the same speed, fading out; and a matching mark slides in
   from the left at the same speed, fading in ("<< landing as >> FRANCE"). Every
   piece shares --cta-dur / --cta-ease and travels --cta-slide, so they move as
   one. --cta-mark sizes the chevron, --cta-gap is the space beside the label. */
.cta {
  --cta-mark: 1.19em;
  --cta-gap: 0.5em;
  --cta-slide: calc(var(--cta-mark) + var(--cta-gap));
  --cta-dur: 0.45s;
  --cta-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cta-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 17 5-5-5-5'/%3E%3Cpath d='m13 17 5-5-5-5'/%3E%3C/svg%3E");
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--cta-size) * var(--px));
  font-weight: var(--cta-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.cta__label {
  letter-spacing: var(--cta-track);
  text-transform: uppercase;
  transition: transform var(--cta-dur) var(--cta-ease);
}

/* The resting chevron on the right; slides right with the label and fades out. */
.cta__line {
  width: var(--cta-mark);
  height: var(--cta-mark);
  margin-left: var(--cta-gap);
  background: currentColor;
  -webkit-mask-image: var(--cta-chev);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: calc(var(--cta-chev-n) * 100%);
  mask-image: var(--cta-chev);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: calc(var(--cta-chev-n) * 100%);
  transition:
    transform var(--cta-dur) var(--cta-ease),
    opacity var(--cta-dur) var(--cta-ease);
}

/* The chevron that arrives from the left; slides in and fades in on hover. */
.cta__arrows {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--cta-mark);
  height: var(--cta-mark);
  background: currentColor;
  -webkit-mask-image: var(--cta-chev);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: calc(var(--cta-chev-n) * 100%);
  mask-image: var(--cta-chev);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: calc(var(--cta-chev-n) * 100%);
  opacity: 0;
  transform: translate(calc(var(--cta-slide) * -1), -50%);
  transition:
    transform var(--cta-dur) var(--cta-ease),
    opacity var(--cta-dur) var(--cta-ease);
  pointer-events: none;
}

.cta:hover .cta__label {
  transform: translateX(var(--cta-slide));
}

.cta:hover .cta__line {
  transform: translateX(var(--cta-slide));
  opacity: 0;
}

.cta:hover .cta__arrows {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Next-country: resting chevron on the LEFT of the label, still pointing right.
   Hover slides left; a matching chevron arrives from the right. */
.cta--next .cta__line {
  order: -1;
  margin-left: 0;
  margin-right: var(--cta-gap);
}

.cta--next .cta__arrows {
  left: auto;
  right: 0;
  transform: translate(var(--cta-slide), -50%);
}

.cta--next:hover .cta__label {
  transform: translateX(calc(var(--cta-slide) * -1));
}

.cta--next:hover .cta__line {
  transform: translateX(calc(var(--cta-slide) * -1));
  opacity: 0;
}

.cta--next:hover .cta__arrows {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Previous-country: resting chevron on the RIGHT of the label, still pointing
   left. Hover is the default (slides right) with the chevrons flipped. */
.cta--prev .cta__line {
  transform: scaleX(-1);
}

.cta--prev .cta__arrows {
  transform: translate(calc(var(--cta-slide) * -1), -50%) scaleX(-1);
}

.cta--prev:hover .cta__line {
  transform: translateX(var(--cta-slide)) scaleX(-1);
  opacity: 0;
}

.cta--prev:hover .cta__arrows {
  opacity: 1;
  transform: translate(0, -50%) scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .cta__label,
  .cta__line,
  .cta__arrows {
    transition: none;
  }
}

/* Every button is centred on its own board x, which is what the translate takes
   half its width off for. */
.story__cta {
  position: absolute;
  z-index: 2;
  transform: translateX(-50%);
}

/* The MUSIC ON / OFF button. Identical styling to MEET THE FOUNDER (it is just a
   .cta), but pinned by its RIGHT edge at --music-r — left: that board x with a
   translateX(-100%) — so growing the label from ON to OFF extends it leftward and
   the last letter stays put. Wholly independent of the founder button. */
.story__music {
  position: absolute;
  z-index: 2;
  top: calc(
    var(--stage-y) +
      (var(--about-cta-y) + var(--about-group-dy) + var(--about-copy-dy)) *
      var(--px)
  );
  left: calc(var(--stage-x) + (var(--music-r) + var(--about-copy-dx)) * var(--px));
  transform: translateX(-100%);
}

/* On this button the label is a right-aligned slot whose width animates, so ON↔OFF
   reveals/clips from the LEFT while its right edge (the last letter) holds still.
   (Scoped to the music button; the founder label is untouched.) */
.story__music .cta__label {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  transition:
    width 0.4s var(--cta-ease),
    transform var(--cta-dur) var(--cta-ease);
}

/* A pair of buttons sitting side by side, centred as a unit on their board x
   (the translate takes off half the pair's width). --contact-btn-gap sets the
   air between them. */
.story__cta-pair {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}

.story--contact .story__cta-pair {
  top: calc(
    var(--stage-y) +
      (
        var(--contact-cta-y) + var(--contact-group-dy) + var(--contact-dy) +
          var(--contact-copy-dy)
      ) * var(--px)
  );
  left: calc(var(--stage-x) + (var(--contact-cta-cx) + var(--contact-group-dx)) * var(--px));
  gap: calc(var(--contact-btn-gap) * var(--px));
}

/* TASTE WORTH SHARING is hung from --about-head-x (its own horizontal knob), so
   it can slide left without touching the other screens' headlines. */
.story--about .story__headline {
  left: calc(var(--stage-x) + var(--about-head-x) * var(--px));
}

/* Each paragraph and button takes its place from its own variables, so there is
   exactly one pair of numbers per piece and no section override to fight with. */
.story--about .story__lede {
  top: calc(
    var(--stage-y) +
      (var(--about-lede-y) + var(--about-group-dy) + var(--about-copy-dy)) *
      var(--px)
  );
  left: calc(
    var(--stage-x) +
      (var(--about-lede-x) + var(--about-group-dx) + var(--about-copy-dx)) *
      var(--px)
  );
  text-align: left;
  white-space: nowrap;
}

.story--about .story__cta {
  top: calc(
    var(--stage-y) +
      (var(--about-cta-y) + var(--about-group-dy) + var(--about-copy-dy)) *
      var(--px)
  );
  left: calc(
    var(--stage-x) +
      (var(--about-cta-cx) + var(--about-group-dx) + var(--about-copy-dx)) *
      var(--px)
  );
  transform: none;
}

/* Centred on the screen (--contact-lede-cx is 960, the board's middle), so the
   translate takes off half its width. Its three lines are broken by hand in the
   document, so nowrap holds them exactly as written and no measure is needed. */
.story--contact .story__lede {
  top: calc(
    var(--stage-y) +
      (
        var(--contact-lede-y) + var(--contact-group-dy) + var(--contact-dy) +
          var(--contact-copy-dy)
      ) * var(--px)
  );
  left: calc(var(--stage-x) + (var(--contact-lede-cx) + var(--contact-group-dx)) * var(--px));
  width: auto;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* --- WHERE MEMORIES GATHER headline ----------------------------------------
   Three lines spread full width and centred on the screen (plain, no stagger),
   dropped as a group by --contact-dy. */
.story--contact .story__headline {
  top: calc(var(--stage-y) + (var(--story-head-top) + var(--contact-dy)) * var(--px));
  left: 0;
  width: 100%;
  text-align: center;
}

/* --- The scroll spacer -----------------------------------------------------
   A run of the cream ground, sitting between the hero and the story just to
   lengthen the scroll to it. Its height is the only knob: raise it to make the
   story sit further down. */
.scroll-gap {
  position: relative;
  z-index: 1;
  height: calc(15svh + 2in);
  background: var(--cream);
}

/* The two spacers sitting between the three screens below the hero. Their
   height is the gap between one screen and the next: raise it to push them
   further apart. */
.scroll-gap--between {
  height: 32svh;
}

/* pick1–4, one board screen, laid out like the reference. */
.picks {
  position: relative;
  z-index: 11;
  width: 100%;
  height: 92svh;
  background: var(--cream);
  overflow: hidden;
}

.picks__img {
  position: absolute;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.picks__1 {
  top: calc(var(--stage-y) + var(--pick1-y) * var(--px));
  left: calc(var(--stage-x) + var(--pick1-x) * var(--px));
  width: calc(var(--pick1-w) * var(--px));
  height: calc(var(--pick1-h) * var(--px));
  z-index: 1;
}

.picks__2,
.picks__3,
.picks__4 {
  transform: translateY(var(--parallax, 0px));
  will-change: transform;
}

.picks__2 {
  top: calc(var(--stage-y) + var(--pick2-y) * var(--px));
  left: calc(var(--stage-x) + var(--pick2-x) * var(--px));
  width: calc(var(--pick2-w) * var(--px));
  height: calc(var(--pick2-h) * var(--px));
  z-index: 2;
}

.picks__3 {
  top: calc(var(--stage-y) + var(--pick3-y) * var(--px));
  left: calc(var(--stage-x) + var(--pick3-x) * var(--px));
  width: calc(var(--pick3-w) * var(--px));
  height: calc(var(--pick3-h) * var(--px));
  object-position: 35% 50%;
  z-index: 1;
}

.picks__4 {
  top: calc(var(--stage-y) + var(--pick4-y) * var(--px));
  left: calc(var(--stage-x) + var(--pick4-x) * var(--px));
  width: calc(var(--pick4-w) * var(--px));
  height: calc(var(--pick4-h) * var(--px));
  object-position: left center;
  z-index: 1;
}

/* --- WORLD-CLASS CELLAR ---------------------------------------------------
   Tall cream run between WHERE MEMORIES GATHER and OUR COLLECTION. cellar.jpg
   and the copy group are placed on the board and can be dragged while tuning. */
.story--cellar {
  height: 360svh;
}

.cellar-photo {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-y) + var(--cellar-y) * var(--px));
  left: calc(var(--stage-x) + var(--cellar-x) * var(--px));
  width: calc(var(--cellar-w) * var(--px));
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cellar-group {
  position: absolute;
  z-index: 2;
  top: calc(
    var(--stage-y) +
      (
        var(--cellar-y) + var(--cellar-w) * 1520 / 1035 + var(--cellar-stack-gap)
      ) * var(--px)
  );
  left: calc(var(--stage-x) + var(--cellar-x) * var(--px));
  text-align: left;
}

.cellar-group__title {
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(var(--cellar-title-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--cellar-title-leading) * var(--px));
  text-transform: uppercase;
}

.cellar-group__title span {
  display: block;
  width: max-content;
}

.cellar-group__rule {
  display: flex;
  align-items: center;
  margin: calc(var(--cellar-stack-gap) * var(--px)) 0 0;
  gap: calc(12 * var(--px));
}

.cellar-group__hair {
  display: block;
  width: calc(var(--cellar-rule-w) * var(--px));
  height: calc(1.4 * var(--px));
  flex-shrink: 0;
  background: var(--gold);
}

.cellar-group__spectrum {
  color: var(--gold);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--cta-size) * var(--px));
  font-weight: var(--cta-weight);
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
}

.cellar-group__copy {
  margin: calc(var(--cellar-stack-gap) * var(--px)) 0 0;
  width: calc(var(--cellar-copy-w) * var(--px));
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--bio-copy-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--bio-copy-size) * 1.39 * var(--px));
  text-align: left;
}

.cellar-group__btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: calc(var(--cellar-stack-gap) * var(--px));
  gap: calc(var(--cellar-btn-gap-x) * var(--px));
}

.cellar-group__copy a {
  color: var(--gold);
  text-decoration: none;
}

.heritage-block {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--heritage-y) * var(--px));
  left: calc(var(--stage-x) + var(--heritage-x) * var(--px));
}

.heritage-photo {
  position: relative;
  top: auto;
  left: auto;
  width: calc(var(--heritage-w) * var(--px));
  height: auto;
  object-fit: contain;
}

.heritage-group {
  position: relative;
  top: auto;
  left: auto;
  margin-top: calc(var(--cellar-stack-gap) * var(--px));
}

/* Title leading is tighter than the cap height; keep the image→title air
   equal to the stack gap instead of letting the first line overflow into it. */
.heritage-group .cellar-group__title {
  padding-top: calc(
    (var(--cellar-title-size) - var(--cellar-title-leading)) * 0.5 * var(--px)
  );
}

.heritage-group .cellar-group__hair {
  width: calc(var(--heritage-rule-w) * var(--px));
}

.heritage-group .cellar-group__copy {
  width: calc(var(--heritage-copy-w) * var(--px));
}

/* --- The contact section ---------------------------------------------------
   WHERE MEMORIES GATHER, its cheers.svg accent, three lines of copy and the two
   buttons — everything centred on the screen. INQUIRE sits centred too (--tag-cx 960, the
   board's middle). The headline is dropped by --contact-dy, and INQUIRE hangs
   --tag-gap above it — the same distance EST. 2016 and GIDALA hang above theirs. */
.story--contact {
  --tag-cx: 960;
  --tag-top: calc(var(--story-head-top) + var(--contact-dy) - var(--tag-gap));
  /* The lede + the two buttons sit below the 1080 board; give the section
     enough cream so they aren't covered by WORLD-CLASS CELLAR. */
  height: calc(100svh + 8svh);
}

/* --- The closing screen ---------------------------------------------------
   OUR COLLECTION in gold, with a hairline reaching out either side of OUR. */
/* The last screen is exactly one viewport tall and is the last thing on the
   page, so scrolled to the foot it IS the screen. */

/* The closing screen is the last thing on the page, a full 100svh, so at the very
   bottom of the scroll it fills the viewport exactly — centring OUR COLLECTION in
   the section (top/left 50%, pulled back by half its own size) lands it dead
   centre of that final screen whatever the type size. */
.story--collection .story__headline {
  top: 50%;
  left: 50%;
  color: var(--gold);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: color var(--collection-wipe) ease;
}

/* The row is as wide as the headline, which COLLECTION below sets, and the two
   rules take whatever is left after OUR and the gaps — so they always run out
   to COLLECTION's own edges however the type is sized, held back only by
   --collection-rule-inset. */
.collection__row {
  display: flex;
  align-items: center;
  gap: calc(var(--collection-rule-gap) * var(--px));
  padding: 0 calc(var(--collection-rule-inset) * var(--px));
}

.collection__word {
  flex: 0 0 auto;
}

.collection__rule {
  flex: 1 1 0;
  height: calc(var(--collection-rule-thick) * var(--px));
  background: currentColor;
  transform: translateY(calc(var(--collection-rule-shift) * var(--px)));
  transition: transform var(--collection-wipe) ease;
}

/* Revealed: the gold turns black and both rules erase inwards. Each is scaled
   to nothing from the end nearest OUR, so what is left of it retreats towards
   the middle — the left rule wiped left-to-right, the right one right-to-left.

   Driven only by .is-revealed, never by :hover. script.js holds the class on for
   as long as the accent needs to finish writing, so taking the pointer away
   mid-draw cannot cut the run short; and it takes the class off again after,
   which runs every one of these transitions backwards. */
.story--collection .story__headline.is-revealed {
  color: var(--story-ink);
}

.collection__rule--left {
  transform-origin: right;
}

.collection__rule--right {
  transform-origin: left;
}

.story--collection .story__headline.is-revealed .collection__rule {
  transform: translateY(calc(var(--collection-rule-shift) * var(--px)))
    scaleX(0);
}

/* The accent that waits on a hover is faded in and out with the reveal, rather
   than simply being there once it has been drawn. On the way back out the fade
   is what is seen; script.js only winds the strokes back to hidden after it, so
   the word never blinks away mid-fade. */
.story__cheers--svg[data-trigger="hover"] {
  opacity: 0;
  transition: opacity var(--collection-fade) ease;
}

.story__cheers--svg[data-trigger="hover"].is-lit {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .story--collection .story__headline,
  .collection__rule,
  .producer-inquire__headline,
  .producer-inquire__rule,
  .producer-sep__rule {
    transition: none;
  }
}

.edge-mask {
  position: absolute;
  z-index: 3;
  display: block;
  background: #fff;
  pointer-events: none;
}

.edge-mask--top,
.edge-mask--bottom {
  right: -5px;
  left: -5px;
  height: 40px;
}

.edge-mask--top {
  top: -5px;
}

.edge-mask--bottom {
  bottom: -5px;
}

.edge-mask--right,
.edge-mask--left {
  top: -5px;
  bottom: -5px;
  width: 12px;
}

.edge-mask--right {
  right: -5px;
}

.edge-mask--left {
  left: -5px;
}

.paper {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.film {
  position: absolute;
  inset: auto;
  left: calc(var(--intro-wine-x) * var(--px));
  top: calc(var(--intro-wine-y) * var(--px));
  width: calc(var(--intro-wine-w) * var(--px));
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.film::-webkit-media-controls {
  display: none !important;
}

.paper__sheet {
  fill: #fff;
}

.paper__wordmark,
.hero-final-wordmark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-track);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* No breakpoints on purpose. The board is one fixed drawing that scales, so a
   narrow window gets the same picture at a smaller size rather than a
   rearranged one. */

/* ===========================================================================
   THE ABOUT PAGE (about.html)

   A standalone screen drawn on the same 1920×1080 board as the landing page,
   but on a slightly lighter cream and about two screens tall (room to scroll,
   for now). MARVIN and QUIJANO are set from the RAISE / A / GLASS rhythm: the
   two lines land where RAISE and GLASS do — a doubled leading between them — so
   the middle line's worth of space is left free for the gold swirl that sits
   over them. The FOUNDER tag hangs above, like EST. 2016. founder.jpg is
   dragged into place with the editor in about.js; the swirl and the tag are
   placed by the knobs below.
   =========================================================================== */
  :root {
  --about-bg: #f6f1ea;

  /* PREMIUM / WINE & SPIRITS / IMPORTER is a three-line block 3 × 132 = 396 tall,
     and it is centred on the board's 1080: (1080 − 396) / 2 = 342 puts the group
     dead centre of the first screen. Change this one number to slide the whole
     title up or down. */
  --about-head-top: 342;

    /* about.svg over PREMIUM / WINE & SPIRITS / IMPORTER. -x is the horizontal
     CENTRE (board pixels). Own class (.about__script) so it never fights the
     founder paragraphs (.about__story). */
  --about-story-x: 944;
  --about-story-y: 771;
  --about-story-w: 511;

  /* The lede paragraph's top edge, in board pixels from the board's top-left.
     Raise or lower this one number to move the whole paragraph vertically. */
  --about-copy-y: 928;

  /* founder.jpg's box (board pixels). */
  --founder-x: 383;
  --founder-y: 1380;
  --founder-w: 460;

  /* about1/3.jpg boxes (board pixels). about1's left edge sits on founder.jpg's
     left wall (--founder-x 383) and its width (1154) leaves equal 383 margins on
     both sides of the board. about3 drifts a touch slower than the page (parallax
     rate set in about.js). */
  --a1-x: 383;
  --a1-y: 2767;
  --a1-w: 1154;

  --a3-x: 165;
  --a3-y: 3182;
  --a3-w: 585;

  /* "— Cebu" caption in the about1/about3 space, in the BD Script face, black.
     --cebu-x / -y are its top-left on the board and --cebu-size is its type size
     (board pixels). It rides plain page speed, exactly like about1. The em dash
     is set apart: --cebu-dash-scale shrinks it (BD Script has no dash glyph, so
     it would otherwise fall back oversized) and --cebu-dash-rise lifts it toward
     the x-height, both relative to --cebu-size, to match the font's own look. */
  --cebu-x: 1197;
  --cebu-y: 3426;
  --cebu-size: 119;
  --cebu-dash-scale: 0.5;
  --cebu-dash-rise: 0.12;

  /* The loose "&": -x / -y are its top-left corner and -w is its type size, all
     board pixels. The editor rewrites these live as you drag/resize it, and Copy
     hands them back. */
  --amp-x: 789;
  --amp-y: 418;
  --amp-w: 293;

  /* The blank space held between WINE and SPIRITS in the title (board pixels).
     Raise it to widen the gap, lower it to tighten. */
  --wine-spirits-gap: 200;

  /* The founder block to the right of founder.jpg: FOUNDER / MARVIN / (blank) /
     VILLAMOR, centred as a group on --bio-x and dropped from --bio-y (board px).
     --bio-text-size sizes the type; --bio-leading is the line-to-line distance,
     which the blank third line also takes. */
  --bio-x: 1300;
  --bio-y: 1180;
  --bio-text-size: 75;
  --bio-leading: 70;

  /* The three group knobs (driven by the menu): --bio-group-dy moves all four
     lines AND the swirl vertically; --bio-founder-dx moves the FOUNDER line
     alone; --bio-mv-dx moves MARVIN, the swirl and VILLAMOR together. Board
     pixels, + = down / right. */
  --bio-group-dy: 375;
  --bio-founder-dx: -125;
  --bio-mv-dx: -3;

  /* swirly.svg, sitting in the blank line. --swirl-x / -y is its top-left and
     --swirl-w its width (board px); its height follows the artwork. It rides
     --bio-mv-dx across and --bio-group-dy down with the rest of the group. */
  --swirl-x: 1175;
  --swirl-y: 1298;
  --swirl-w: 255;

  /* Marvin's story: four paragraphs under the founder group, in the same face
     and colour as the lede but 22% smaller. The block hugs the board's vertical
     centre (its left edge sits on x=960) and only grows rightward, so it never
     crosses onto the left half. --bio-copy-y drops it below the group;
     --bio-copy-w is its width and --bio-copy-size its type size (board px), both
     driven by the menu. Leading tracks the size at the lede's 1.39 ratio. */
  --bio-copy-y: 1972;
  --bio-copy-w: 606;
  --bio-copy-size: 20;

  /* POURED WITH PASSION: a MEET-THE-FOUNDER-style gold label centred over the
     paragraph width, with a thin gold rule running out to either edge of that
     width. --divider-y sets its vertical centre (board px); it sits under
     VILLAMOR, just above the paragraphs, and has its own menu Y slider. */
  --divider-y: 1939;
}

/* The intro locks scrolling with body{overflow:hidden}; the about page has no
   intro, so it scrolls, and it takes the lighter ground and the story ink. The
   FOUNDER tag hangs over screen centre rather than a word, so the tag knobs are
   re-centred here. */
body.about-page {
  overflow: visible;
  color: var(--story-ink);
  background: var(--about-bg);
  --tag-cx: 960;
  /* GIDALA hangs --tag-gap above the PREMIUM title, the same distance EST. 2016
     and INQUIRE hang above theirs. */
  --tag-top: calc(var(--about-head-top) - var(--tag-gap));
}

/* The menu and the corner G ride every page. The about page has no intro to
   fade them in, so they are simply shown and made live. */
body.about-page .site-nav,
body.about-page .site-mark {
  opacity: 1;
}

body.about-page .site-nav,
body.about-page .site-mark {
  pointer-events: auto;
}

.about {
  position: relative;
  width: 100%;
  height: 340svh;
  overflow: hidden;
}

/* PREMIUM / WINE & SPIRITS / IMPORTER, three lines centred on screen on the
   headline's own leading. */
.about__headline {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-y) + var(--about-head-top) * var(--px));
  left: 0;
  width: 100%;
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(var(--story-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--story-head-leading) * var(--px));
  text-align: center;
  text-transform: uppercase;
}

.about__headline span {
  display: block;
}

/* A blank, sized gap held between WINE and SPIRITS (HTML collapses plain spaces,
   so the space is set here instead). Its width is --wine-spirits-gap board px. */
.about__headline-gap {
  display: inline-block;
  width: calc(var(--wine-spirits-gap) * var(--px));
}

/* about.svg over PREMIUM WINE & SPIRITS IMPORTER. Own class so the founder
   paragraphs (.about__story) keep their own placement. */
.about__script {
  position: absolute;
  z-index: 40;
  top: calc(var(--stage-y) + var(--about-story-y) * var(--px));
  left: calc(var(--stage-x) + var(--about-story-x) * var(--px));
  width: calc(var(--about-story-w) * var(--px));
  transform: translateX(-50%);
}

.about__script svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.about__script.is-writing .cheers-stroke {
  animation: cheers-draw 0.8s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.45s);
}

/* The lede paragraph under the title, matched to the contact screen's lede:
   Inter at the same size / leading / weight, in the story ink, centred on the
   screen and hand-broken with <br>. --about-copy-y moves it up and down. */
.about__copy {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-y) + (var(--about-copy-y) + var(--aboutpage-group-dy) + var(--about-title-y)) * var(--px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
  text-align: center;
  white-space: nowrap;
}

/* founder.jpg, placed on the board. The wrapper is the positioned box; the
   image fills its width and the box takes the picture's height. Once it reaches
   the middle of the screen about.js pins it there (see initFounderPin) by
   translating it — until the third story paragraph is centred alongside it —
   while the right-hand column keeps scrolling. will-change keeps that cheap. */
.about__founder {
  position: absolute;
  z-index: 5;
  top: calc(var(--stage-y) + var(--founder-y) * var(--px));
  left: calc(var(--stage-x) + var(--founder-x) * var(--px));
  width: calc(var(--founder-w) * var(--px));
  will-change: transform;
}

.about__founder img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* about1/3.jpg, layered above founder.jpg. Each is placed by its own
   --aN-x / -y / -w (board px). They sit outside .about (so that section's
   overflow can't clip their lower halves) with a z-index above the closing
   screen (z 11) so nothing paints over them. */
.about__extra {
  position: absolute;
  z-index: 12;
}

.about__extra--a1 {
  top: calc(var(--stage-y) + var(--a1-y) * var(--px));
  left: calc(var(--stage-x) + var(--a1-x) * var(--px));
  width: calc(var(--a1-w) * var(--px));
}

.about__extra--a3 {
  top: calc(var(--stage-y) + var(--a3-y) * var(--px));
  left: calc(var(--stage-x) + var(--a3-x) * var(--px));
  width: calc(var(--a3-w) * var(--px));
}

.about__extra img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* "— Cebu" caption living in the about1/about3 space: BD Script, black, placed
   on the board by --cebu-x / -y and sized by --cebu-size. Body-level with no
   transform, so it scrolls at plain page speed — the same as about1. */
.about__cebu {
  position: absolute;
  z-index: 13;
  top: calc(var(--stage-y) + var(--cebu-y) * var(--px));
  left: calc(var(--stage-x) + var(--cebu-x) * var(--px));
  margin: 0;
  color: #000;
  font-family: "BD Script", "Snell Roundhand", cursive;
  font-size: calc(var(--cebu-size) * var(--px));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* The em dash, shrunk and lifted so it reads like the font's own dash next to
   "Cebu" rather than the oversized fallback glyph. */
.about__cebu-dash {
  font-size: calc(var(--cebu-dash-scale) * 1em);
  vertical-align: calc(var(--cebu-dash-rise) * 1em);
}

/* The closing screen is carried onto this page too; blend it into the about
   ground so there is no seam where cream would otherwise meet the warmer bg. */
body.about-page .story--collection {
  background: var(--about-bg);
}

/* The loose "&" in the title's own face and weight (Cormorant SC, the headline
   weight and tracking). Absolutely positioned, so it shrinks to the glyph; --amp-w
   drives its type size. Laid above everything else on the page so it's easy to
   grab while placing. */
.about__amp {
  position: absolute;
  z-index: 6;
  margin: 0;
  top: calc(var(--stage-y) + var(--amp-y) * var(--px));
  left: calc(var(--stage-x) + var(--amp-x) * var(--px));
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: 1;
  font-size: calc(var(--amp-w) * var(--px));
  text-transform: uppercase;
}

/* The founder block to the right of founder.jpg: four centred lines in the
   title's face and colour, dropped from --bio-y (plus the group's --bio-group-dy)
   and centred as a group on --bio-x. --bio-text-size sizes the type; --bio-leading
   is the line spacing. */
.about__bio {
  position: absolute;
  z-index: 6;
  top: calc(var(--stage-y) + (var(--bio-y) + var(--bio-group-dy)) * var(--px));
  left: calc(var(--stage-x) + var(--bio-x) * var(--px));
  transform: translateX(-50%);
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  text-transform: uppercase;
  text-align: center;
  font-size: calc(var(--bio-text-size) * var(--px));
  line-height: calc(var(--bio-leading) * var(--px));
}

.about__bio span {
  display: block;
}

/* FOUNDER moves sideways on its own knob; MARVIN and VILLAMOR share theirs (and
   the swirl below rides the same one). */
.about__bio-founder {
  transform: translateX(calc(var(--bio-founder-dx) * var(--px)));
}

.about__bio-mv {
  transform: translateX(calc(var(--bio-mv-dx) * var(--px)));
}

/* The empty third line, held open at exactly one line's spacing. */
.about__bio-blank {
  height: calc(var(--bio-leading) * var(--px));
}

/* swirly.svg, sitting in the blank line and grouped with the names: it rides
   --bio-mv-dx across and --bio-group-dy down with them. Placed by --swirl-x /
   -y / -w; its box keeps the artwork's proportions. */
.about__bio-swirl {
  position: absolute;
  z-index: 6;
  top: calc(var(--stage-y) + (var(--swirl-y) + var(--bio-group-dy)) * var(--px));
  left: calc(var(--stage-x) + (var(--swirl-x) + var(--bio-mv-dx)) * var(--px));
  width: calc(var(--swirl-w) * var(--px));
  aspect-ratio: 817.931 / 362.123;
}

.about__bio-swirl svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The swirl starts blank (its reveal strokes are wound back) and writes itself
   once the first time it scrolls into view, then holds — the same one-shot draw
   as the landing accents and welcome.svg. Shares the @keyframes cheers-draw. */
.about__bio-swirl.is-writing .cheers-stroke {
  animation: cheers-draw 0.8s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.45s);
}

/* A hairline gold rule that fades out at both ends, spanning the full paragraph
   width. The container spans that width (left edge on x=960, --bio-copy-w wide)
   and is centred on --divider-y. */
.about__divider {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-y) + var(--divider-y) * var(--px));
  left: calc(var(--stage-x) + 960 * var(--px));
  width: calc(var(--bio-copy-w) * var(--px));
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}

.about__divider-line {
  width: 100%;
  height: max(1px, calc(1 * var(--px)));
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 30%,
    var(--gold) 70%,
    transparent
  );
}

/* Marvin's story, under the founder group: same Inter face, colour and weight
   as the lede, 22% smaller. The block's left edge is pinned to the board's
   vertical centre (x=960) and it grows only to the right, so it can never spill
   onto the left half; --bio-copy-w sets how wide it runs. */
.about__story {
  position: absolute;
  z-index: 1;
  top: calc(var(--stage-y) + var(--bio-copy-y) * var(--px));
  left: calc(var(--stage-x) + 960 * var(--px));
  width: calc(var(--bio-copy-w) * var(--px));
  margin: 0;
  transform: none;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--bio-copy-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--bio-copy-size) * 1.39 * var(--px));
  text-align: left;
}

.about__story p {
  margin: 0 0 calc(var(--bio-copy-size) * 1.39 * var(--px));
}

.about__story p:last-child {
  margin-bottom: 0;
}

/* ===========================================================================
   THE CONTACT PAGE
   A warmer, darker cream ground (the same subtle step the about page makes).
   The title LET'S / TALK / BOTTLES is set in the house display serif with a
   CONTACT eyebrow; the cheers.svg accent, the office/email block and the
   inquiry form sit below. The menu and the corner G ride along as on every
   page.
   =========================================================================== */
body.contact-page {
  overflow: visible;
  color: var(--story-ink);
  background: var(--contact-bg);
}

/* No intro on this page, so the chrome is simply shown and made live. */
body.contact-page .site-nav,
body.contact-page .site-mark {
  opacity: 1;
}

body.contact-page .site-nav,
body.contact-page .site-mark {
  pointer-events: auto;
}

.contact {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* The CONTACT eyebrow — the same face, size and tracking as every section tag,
   centred on its own --ct-tag-x. */
.contact__tag {
  position: absolute;
  z-index: 2;
  top: calc(
    var(--stage-y) +
      (var(--ct-head-top) - var(--tag-gap) + var(--ctg-dy)) * var(--px)
  );
  left: calc(var(--stage-x) + (var(--ct-tag-x) + var(--ctg-dx)) * var(--px));
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--tag-size) * var(--px));
  font-weight: 200;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  transform: translateX(-50%);
}

/* The three title lines: the house display serif, each left-aligned at its own
   x and stepped down by --story-head-leading, so the vertical rhythm matches
   every other title. */
.contact__line {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(var(--story-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  /* The same line box as .story__headline, so a glyph sits in it exactly where
     it does in every other title — the lines are then stepped down by this same
     amount, giving the identical line-to-line and eyebrow-to-title rhythm. */
  line-height: calc(var(--story-head-leading) * var(--px));
  text-transform: uppercase;
  white-space: nowrap;
}

.contact__line--1 {
  top: calc(
    var(--stage-y) + (var(--ct-head-top) + var(--ctg-dy)) * var(--px)
  );
  left: calc(var(--stage-x) + (var(--ct-l1-x) + var(--ctg-dx)) * var(--px));
}

.contact__line--2 {
  top: calc(
    var(--stage-y) +
      (var(--ct-head-top) + var(--story-head-leading) + var(--ctg-dy)) *
      var(--px)
  );
  left: calc(var(--stage-x) + (var(--ct-l2-x) + var(--ctg-dx)) * var(--px));
}

.contact__line--3 {
  top: calc(
    var(--stage-y) +
      (var(--ct-head-top) + 2 * var(--story-head-leading) + var(--ctg-dy)) *
      var(--px)
  );
  left: calc(var(--stage-x) + (var(--ct-l3-x) + var(--ctg-dx)) * var(--px));
}

/* The intro note, horizontally centred on the screen (its block centred, the
   text itself still left-aligned so the A, l and W of the three lines stack on
   the same edge). --note-y moves it vertically. Set in the about page's lede
   copy exactly (Inter, --lede-*). */
.contact__note {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + (var(--note-y) + var(--contact-below-dy)) * var(--px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
  text-align: left;
  white-space: nowrap;
}

/* The inquire.svg accent on the contact page, gold, on its own size/position. */
.contact__cheers {
  top: calc(
    var(--stage-y) + (var(--contact-cheers-y) + var(--ctg-dy)) * var(--px)
  );
  left: calc(
    var(--stage-x) + (var(--contact-cheers-x) + var(--ctg-dx)) * var(--px)
  );
  width: calc(var(--contact-cheers-w) * var(--px));
}

/* The inquiry form: a narrow column, centred horizontally and dropped one
   screen below the title (the title/note sit absolutely in the first screen, so
   the form is the one thing in normal flow and its top margin pushes it down —
   .contact's overflow keeps that margin from collapsing). */
.contact__form {
  position: relative;
  z-index: 2;
  width: calc(var(--form-w) * var(--px));
  margin: calc(100svh + var(--contact-below-dy) * var(--px)) auto 0;
  /* Leaves a clear band under the SEND button for the footer, which is pinned to
     the bottom of .contact (the page's foot). */
  padding-bottom: calc(240 * var(--px));
  display: flex;
  flex-direction: column;
}

/* One field: its serif title stacked over its input. */
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(28 * var(--px));
}

.field--org[hidden] {
  display: none;
}

.field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__form-error {
  margin: 0 0 calc(12 * var(--px));
  color: var(--wine);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--info-text-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: 1.4;
  text-align: center;
}

.contact__form-error[hidden] {
  display: none;
}

/* The title in the LET'S / TALK / BOTTLES face, only much smaller, in
   --field-title-color. */
.field__title {
  position: relative;
  margin-bottom: calc(9 * var(--px));
  color: var(--field-title-color);
  font-family: var(--font-serif);
  font-size: calc(var(--field-title-size) * var(--px));
  font-weight: var(--field-title-weight);
  letter-spacing: var(--story-head-track);
  line-height: 1;
  text-transform: uppercase;
}

/* Required fields carry the menu's current-page star, in black, hung in the
   margin to the LEFT of the title — absolutely placed so it never shifts the
   title's own position, and growing leftward as --diamond-size changes. */
.field--required .field__title::before {
  content: "\2726";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  margin-right: calc(12 * var(--px));
  color: #000;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--diamond-size) * var(--px));
  line-height: 1;
}

/* Inputs: a quiet hairline underline, the about-page body copy for the typed
   text, going gold on focus. */
.field__input {
  width: 100%;
  padding: calc(10 * var(--px)) 0;
  border: 0;
  border-bottom: 1px solid rgba(25, 19, 19, 0.3);
  border-radius: 0;
  background: transparent;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s ease;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

/* The two dropdowns carry a down-chevron in the ink, since appearance:none drops
   the native one. */
.field__select {
  cursor: pointer;
  padding-right: calc(26 * var(--px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23191313' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: calc(16 * var(--px));
}

/* Four lines by default, draggable up to seven; past that it scrolls within the
   box rather than growing (--lede-size at 1.4, plus the input's 20px padding). */
.field__textarea {
  min-height: calc((4 * 1.4 * var(--lede-size) + 20) * var(--px));
  max-height: calc((7 * 1.4 * var(--lede-size) + 20) * var(--px));
  line-height: 1.4;
  resize: vertical;
  overflow-y: auto;
}

/* The gold CTA used site-wide, here as a submit button; the native button
   chrome is cleared so only the shared .cta styling shows. */
button.cta {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.contact__form .cta--send {
  align-self: center;
  margin-top: calc(16 * var(--px));
}

/* SEND INQUIRY stays dimmed and unclickable until every required field is
   filled (contact.js toggles :disabled). */
button.cta:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* After a successful send the fields are hidden, the form keeps its height so
   the page doesn't jump, and thanks.png sits where the STATE field was, centred
   in the form column and sized by --thanks-size. */
.contact__thanks {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--thanks-y) * var(--px)));
  width: calc(var(--thanks-size) * var(--px));
  height: auto;
  display: block;
}

/* The GIDALA office + email block: gold OFFICE / EMAIL labels over about-page
   body copy, placed on the board by --info-x / -y, to the left of the form. */
.contact__info {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + (var(--info-y) + var(--contact-below-dy)) * var(--px));
  left: calc(var(--stage-x) + var(--info-x) * var(--px));
  text-align: left;
}

/* The gold OFFICE / EMAIL labels: the same copy face as the info below them, in
   gold, with their own size and weight. */
.info__title {
  margin: 0 0 calc(4 * var(--px));
  color: var(--gold);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--info-title-size) * var(--px));
  font-weight: var(--info-title-weight);
  line-height: calc(var(--info-title-size) * 1.39 * var(--px));
  text-transform: uppercase;
}

/* The address/email text, the about page's body copy (Inter, weight 300),
   sized by --info-text-size. Left-aligned, so the "2", "J" and "c" stack on the
   same edge as the "O" and "E" above them. */
.info__text {
  margin: 0;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--info-text-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--info-text-size) * 1.39 * var(--px));
  text-align: left;
}

/* The email address is a mailto link, styled as the plain copy around it. */
.info__mail {
  color: inherit;
  text-decoration: none;
}

/* Air between the office and email mini-groups: the EMAIL label (which follows
   the address text) is pushed down by --info-gap, carrying its own text with it
   while OFFICE stays pinned to the address. */
.info__text + .info__title {
  margin-top: calc(var(--info-gap) * var(--px));
}

/* --- Producer pages --------------------------------------------------------
   One hero screen per country: the country photograph full-bleed behind, the
   white tagline set in the site's own title face (same size/weight/tracking as
   WHERE MEMORIES GATHER etc., just white) centred on the screen, and the gold
   country wordmark (its own Svgator word, drawn on like the other accents).
   The wordmark is positioned by --pname-* (board pixels) and is draggable /
   size-sliderable via producer.js while these are being dialled in. */
  :root {
  --ptitle-y: 540; /* title block's vertical centre, board px (960×540 board) */
  --pname-x: 960;
  --pname-y: 858;
  --pname-w: 520;
  --pname-rot: 0;

  /* The draggable, oversized "&" used in some titles (Spain, Portugal). Same
     face/weight/tracking as the ABOUT page's "&"; --pamp-w is its type size and
     --pamp-gap is the blank gap left for it inside the title line. All board px. */
  --pamp-x: 960;
  --pamp-y: 560;
  --pamp-w: 293;
  --pamp-gap: 300;

  /* How much the country photo is dimmed (0 = none, 1 = black). */
  --bg-dim: 0;

  /* The body paragraph below the wordmark. --ptext-y is its top (board px) and
     --ptext-w the width of its (centred, wrapping) text column. */
  --ptext-y: 820;
  --ptext-w: 900;

  /* Where the white page section begins (board px) — a little below the lowest
     country description. Shared by every producer page. */
  --sheet-y: 1280;

  /* The white sheet's producer list: --pdname-size is the producer name's type
     size (board px). The list is centred on the screen. */
  --pdname-size: 75;

  /* The INQUIRE screen at the foot of the white sheet. --inq-rule-len is the
     length of each hairline flanking INQUIRE (board px, grows outward only);
     --inq-cheers-x / -y place anytime.svg (board px). */
  --inq-rule-len: 182;
  --inq-cheers-x: 981;
  --inq-cheers-y: 567;
  --inq-cheers-w: 649;

  /* Space between the previous/next country buttons (board px), centred on the
     screen so each sits the same distance from the midline. */
  --inq-btn-gap: 80;

  /* Hairline + ✦ separator between producers on the white sheet (board px). */
  --psep-w: 1180;

  /* Per-title horizontal nudges (board px) for single words that need their own
     x — France's OF, Portugal's CRAFT. Applied as a translate, so they shift
     without disturbing the rest of the line. */
  --of-x: 0;
  --craft-x: 0;
  --soul-x: 0;
}

body.producer-page {
  overflow: visible;
  color: #fff;
  background: #000;
}

body.producer-page .site-nav,
body.producer-page .site-mark {
  opacity: 1;
}

body.producer-page .site-nav,
body.producer-page .site-mark {
  pointer-events: auto;
}

/* Every producer page sits over a photograph, so their menus read white. */
body.producer-page .site-nav,
html.is-producer-chrome .site-nav {
  --nav-ink: #fff;
}

/* As the white sheet scrolls up under the fixed menu, each item it reaches turns
   from white back to ink — one by one, lowest (CONTACT) first. producer.js adds
   the class per item as the sheet's top edge rises past it. After a slide the
   visible menu lives on the parent document, which is why html.is-producer-chrome
   is the same rule as body.producer-page. */
body.producer-page .site-nav a.is-over-sheet,
html.is-producer-chrome .site-nav a.is-over-sheet {
  color: var(--story-ink);
  --nav-ink: var(--story-ink);
}
body.producer-page .site-nav a.is-over-sheet:hover,
html.is-producer-chrome .site-nav a.is-over-sheet:hover {
  color: var(--gold);
}

/* Italy's gold wordmark draws on ~38% quicker than the site default. */
body.producer-page--italia .story__cheers--svg.is-writing .cheers-stroke {
  animation-duration: 0.533s;
  animation-delay: calc(var(--i, 0) * 0.3s);
}

.producer {
  position: relative;
  /* Tall enough to carry the hero down to where the white sheet begins. */
  min-height: calc(var(--sheet-y) * var(--px));
  overflow: hidden;
}

/* The country photograph, pinned to the viewport and covering it. It drifts at
   15% of scroll speed (producer.js translates it) for a slow parallax, so it's
   made a little taller than the viewport to stay covered as it shifts up. */
.producer__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120svh;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}

body.producer-page--france .producer__bg {
  background-position: center top;
}

/* The white page section. It sits below the hero and scrolls up at normal speed
   over the parallaxing photo, beginning just below the lowest description. */
.producer__sheet {
  position: relative;
  z-index: 1;
  min-height: 120svh;
  background: #fff;
}

/* The producer list on the white sheet, centred. Each entry is a name + types,
   then a hairline-and-✦ rule that retracts on hover. */
.producer-list {
  list-style: none;
  margin: 0;
  padding: calc(150 * var(--px)) 0 calc(180 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.producer-list > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  pointer-events: none; /* only the name-width item is hoverable, not the row */
}

.producer-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--px));
  /* Shrink-wrap the producer name so the hover strip is only as wide as it. */
  width: max-content;
  padding: calc(36 * var(--px)) 0 calc(28 * var(--px));
  text-decoration: none;
  pointer-events: auto;
}

/* Producer name — the house title face. Gold wipes in left→right on hover,
   the same sweep the menu labels use (--nav-sweep). */
.producer-item__name {
  --nav-sweep: 0%;
  font-family: var(--font-serif);
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: 1;
  font-size: calc(var(--pdname-size) * var(--px));
  text-transform: uppercase;
  background-image: linear-gradient(
    to right,
    var(--gold) var(--nav-sweep),
    var(--story-ink) var(--nav-sweep)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: --nav-sweep 0.5s ease;
}

.producer-item:hover .producer-item__name {
  --nav-sweep: 100%;
}

/* The alcohol types — the ABOUT bio face/size, set uppercase and tracked like
   the reference, with gold dots between them. They warm to gold on hover. */
.producer-item__types {
  display: flex;
  align-items: center;
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--lede-weight);
  font-size: calc(var(--bio-copy-size) * var(--px));
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Pull the last letter's tracking back so the line stays visually centred.
     Sized to the name (parent width) so a longer types line doesn't widen the
     hover target; overflow stays visible and is ignored by the pointer. */
  width: 0;
  min-width: 100%;
  justify-content: center;
  white-space: nowrap;
  margin-right: -0.22em;
  pointer-events: none;
  transition: color 0.5s ease;
}

.producer-item:hover .producer-item__types {
  color: var(--gold);
}

.producer-item__dot {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin: 0 0.7em;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* Hairline + ✦ between producers. The two rules retract into the star on hover. */
.producer-sep {
  display: flex;
  align-items: center;
  width: calc(var(--psep-w) * var(--px));
  max-width: 86%;
  gap: calc(18 * var(--px));
  margin: calc(8 * var(--px)) 0 calc(12 * var(--px));
}

.producer-sep__star {
  flex: none;
  color: var(--gold);
  font-size: calc(13 * var(--px));
  line-height: 1;
}

.producer-sep__rule {
  flex: 1 1 0;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  transition: transform var(--collection-wipe) ease;
}

.producer-sep__rule--left {
  transform-origin: right;
}

.producer-sep__rule--right {
  transform-origin: left;
}

.producer-item:hover + .producer-sep .producer-sep__rule {
  transform: scaleX(0);
}

/* ---------------------------------------------------------------------------
   THE INQUIRE SCREEN — the foot of the white sheet. INQUIRE sits centred in gold
   (the exact OUR COLLECTION type), flanked by two hairlines whose length is
   --inq-rule-len; the cheers.svg accent (same size + gold as the contact page)
   is dragged into place; and a next-country button sits bottom-right where the
   ©2026 lives elsewhere.
   --------------------------------------------------------------------------- */
.producer-inquire {
  position: relative;
  z-index: 1;
  min-height: 100svh;
}

/* INQUIRE — the same face, size, weight and gold as OUR COLLECTION. Hover
   turns it ink and retracts the rules (driven by .is-revealed, same as the
   collection headline). A click goes to the contact page. */
.producer-inquire__headline {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: calc(var(--story-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--story-head-leading) * var(--px));
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--collection-wipe) ease;
}

.producer-inquire__headline.is-revealed {
  color: var(--story-ink);
}

/* INQUIRE with a hairline either side — the same gap, weight and shift as the
   OUR COLLECTION rules, but a fixed, outward-only length (--inq-rule-len). */
.producer-inquire__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--collection-rule-gap) * var(--px));
}

.producer-inquire__word {
  flex: 0 0 auto;
}

.producer-inquire__rule {
  flex: 0 0 auto;
  width: calc(var(--inq-rule-len) * var(--px));
  height: calc(var(--collection-rule-thick) * var(--px));
  background: currentColor;
  transform: translateY(calc(var(--collection-rule-shift) * var(--px)));
  transition: transform var(--collection-wipe) ease;
}

.producer-inquire__rule--left {
  transform-origin: right;
}

.producer-inquire__rule--right {
  transform-origin: left;
}

.producer-inquire__headline.is-revealed .producer-inquire__rule {
  transform: translateY(calc(var(--collection-rule-shift) * var(--px)))
    scaleX(0);
}

/* The cheers.svg — same width + gold as the contact page's. Hidden until hover
   (data-trigger="hover"), then faded in and drawn by initAccentReveal. */
.producer-inquire__cheers {
  top: calc(var(--stage-y) + var(--inq-cheers-y) * var(--px));
  left: calc(var(--stage-x) + var(--inq-cheers-x) * var(--px));
  width: calc(var(--inq-cheers-w) * var(--px));
}

/* Previous / next country buttons: both at the top of this screen, equal
   distance from the vertical midline (--inq-btn-gap is the space between). */
.producer-inquire__prev,
.producer-inquire__next {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--copyright-bottom) * var(--px));
}

.producer-inquire__prev {
  right: calc(50% + var(--inq-btn-gap) / 2 * var(--px));
}

.producer-inquire__next {
  left: calc(50% + var(--inq-btn-gap) / 2 * var(--px));
}

/* A black veil over the photo, --bg-dim opaque, for pages that need the image
   knocked back so the white type reads. Sits over the photo, under the text. */
.producer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--bg-dim, 0);
}

/* The white tagline, centred on the screen, in the site's title face. */
.producer__title {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--ptitle-y) * var(--px));
  left: 0;
  width: 100%;
  margin: 0;
  transform: translateY(-50%);
  color: #fff;
  font-family: var(--font-serif);
  font-size: calc(var(--story-head-size) * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: calc(var(--story-head-leading) * var(--px));
  text-align: center;
  text-transform: uppercase;
}

.producer__title-line {
  display: block;
  /* Never wrap: a left-aligned title is placed at left:50% and so has only half
     the viewport to auto-size into — without this a long line (e.g. SOIL & SOUL)
     would wrap and read as an extra line. */
  white-space: nowrap;
}

/* Left-aligned variant: the block shrinks to its widest line and is centred on
   the screen, with every line flushed to that block's left edge. */
.producer__title--left {
  left: 50%;
  width: auto;
  transform: translate(-50%, -50%);
  text-align: left;
}

/* A blank gap held inside a title line (HTML collapses plain spaces), leaving
   room to drag the oversized "&" into. Its width is --pamp-gap board px. */
.producer__title-gap {
  display: inline-block;
  width: calc(var(--pamp-gap) * var(--px));
}

/* The oversized, draggable "&" — the ABOUT page's title "&" in face, weight and
   tracking, white to sit in the white title, and set above everything so it is
   easy to grab while placing. */
.producer__amp {
  position: absolute;
  z-index: 6;
  margin: 0;
  top: calc(var(--stage-y) + var(--pamp-y) * var(--px));
  left: calc(var(--stage-x) + var(--pamp-x) * var(--px));
  color: #fff;
  font-family: var(--font-serif);
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: 1;
  font-size: calc(var(--pamp-w) * var(--px));
  text-transform: uppercase;
}

/* The gold country wordmark. Shares .story__cheers (gold + the draw-on reveal)
   but takes its own placement here, and — unlike the other accents — must catch
   the pointer so it can be dragged while positioning. */
.producer__name {
  top: calc(var(--stage-y) + var(--pname-y) * var(--px));
  left: calc(var(--stage-x) + var(--pname-x) * var(--px));
  width: calc(var(--pname-w) * var(--px));
  transform: translateX(-50%) rotate(calc(var(--pname-rot, 0) * 1deg));
}

/* The body paragraph beneath the wordmark: same Inter face/size/weight/leading
   as the ABOUT and CONTACT copy, just white, centred, and wrapping within a
   board-pixel-wide column (--ptext-w). --ptext-y sets its top. */
.producer__text {
  position: absolute;
  z-index: 2;
  top: calc(var(--stage-y) + var(--ptext-y) * var(--px));
  left: 50%;
  width: calc(var(--ptext-w) * var(--px));
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
  text-align: center;
}

/* ===========================================================================
   PRIVACY / TERMS
   A readable document on the about-page cream. No menu, G, or footer — just
   the copy over a faint, fixed gold GIDALA (the hero wordmark, centred).
   =========================================================================== */
body.legal-page {
  overflow: visible;
  color: var(--story-ink);
  background: var(--about-bg);
}

/* The hero GIDALA, gold at very low opacity, pinned to the viewport centre
   so it stays put while the policy scrolls over it. */
.legal__mark {
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--wordmark-box);
  aspect-ratio: 16 / 9;
  overflow: visible;
  fill: var(--gold);
  opacity: 0.08;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.legal {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: calc(120 * var(--px)) calc(80 * var(--px)) calc(120 * var(--px));
}

.legal__doc {
  position: relative;
  z-index: 1;
  max-width: calc(860 * var(--px));
  margin: 0 auto;
}

.legal__title {
  margin: 0 0 calc(12 * var(--px));
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(72 * var(--px));
  font-weight: var(--story-head-weight);
  letter-spacing: var(--story-head-track);
  line-height: 1;
  text-transform: uppercase;
}

.legal__updated {
  margin: 0 0 calc(48 * var(--px));
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
}

.legal__doc h2 {
  margin: calc(40 * var(--px)) 0 calc(14 * var(--px));
  color: var(--story-ink);
  font-family: var(--font-serif);
  font-size: calc(28 * var(--px));
  font-weight: 400;
  letter-spacing: var(--story-head-track);
  line-height: 1.2;
  text-transform: uppercase;
}

.legal__doc p,
.legal__doc li {
  margin: 0 0 calc(18 * var(--px));
  color: var(--story-ink);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--lede-size) * var(--px));
  font-weight: var(--lede-weight);
  line-height: calc(var(--lede-leading) * var(--px));
}

.legal__doc ul {
  margin: 0 0 calc(18 * var(--px));
  padding: 0 0 0 calc(28 * var(--px));
}

.legal__doc li {
  margin-bottom: calc(8 * var(--px));
}

.legal__doc a {
  color: var(--gold);
  text-decoration: none;
}

.legal__doc a:hover {
  text-decoration: underline;
}

/* In-site page slides. Menu and G stay on the live document (z-index 20)
   and are hidden inside the incoming iframe so they never ride the boards. */
html.is-page-locked,
html.is-page-locked body {
  overflow: hidden !important;
}

html.from-slide .site-nav,
html.from-slide .site-mark {
  opacity: 1 !important;
  transition: none !important;
  pointer-events: auto;
}

.page-slide-in {
  position: fixed;
  inset: 0;
  z-index: 19;
  overflow: hidden;
  pointer-events: none;
}

.page-slide-in iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.page-slide-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  pointer-events: none;
}

.hero-wordmark-mobile,
.hero-scroll,
.menu-toggle {
  display: none;
}

.hero-scene {
  display: contents;
}

/* ===========================================================================
   MOBILE ONLY — desktop rules above are unchanged
   =========================================================================== */
@media (max-width: 768px) {
  :root {
    --mobile-menu: #492d35;
    --px: calc(100vw / 390);
    --stage-x: 0px;
    --stage-y: 0px;
    --lede-size: 15;
    --lede-leading: 22;
    --lede-w: 320;
    --cta-size: 13;
    --tag-size: 11;
    --story-head-size: 44;
    --story-head-leading: 46;
    --nav-size: 22;
    --form-w: 320;
    --field-title-size: 18;
    --music-vol: 0.18;
  }

  html,
  body {
    overflow-x: clip;
    max-width: 100%;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html.is-open,
  html:has(body.about-page),
  html:has(body.contact-page),
  html:has(body.producer-page),
  html:has(body.legal-page) {
    overflow-x: visible;
    overflow-y: auto;
  }

  body:not(.is-open) {
    background: #fff;
  }

  /* --- Age gate: opaque white, then hero slides up --- */
  .gate {
    background: #fff;
  }

  .gate__inner {
    max-width: calc(100vw - 48px);
  }

  .gate__title {
    font-size: 40px;
    line-height: 0.95;
  }

  .gate__copy {
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }

  /* --- Chrome: G top-left, hamburger top-right, no gold rule --- */
  .site-nav::after {
    display: none;
  }

  .site-mark {
    top: max(18px, env(safe-area-inset-top));
    bottom: auto;
    left: 18px;
    z-index: 52;
  }

  .site-mark__glyph {
    font-size: 84px;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: fixed;
    top: max(22px, env(safe-area-inset-top));
    right: 18px;
    z-index: 52;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
  }

  .menu-toggle span {
    display: block;
    width: 44px;
    height: 3px;
    background: var(--gold);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
  }
  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
  }

  body:not(.is-open):not(.about-page):not(.contact-page):not(.producer-page):not(.legal-page) .site-mark,
  body:not(.is-open):not(.about-page):not(.contact-page):not(.producer-page):not(.legal-page) .menu-toggle {
    visibility: hidden;
  }

  html.is-mobile-hero-in .site-mark,
  html.is-mobile-hero-in .menu-toggle {
    visibility: visible;
  }

  .chrome-reveal {
    clip-path: none;
  }

  /* Full-screen overlay menu */
  .site-nav {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 80px 24px 40px;
    background: var(--mobile-menu);
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.08em;
    transform: translateY(100%);
    pointer-events: none;
    --nav-ink: #fff;
  }

  body.is-set .site-nav,
  body.about-page .site-nav,
  body.contact-page .site-nav,
  body.producer-page .site-nav {
    pointer-events: none;
  }

  html.is-menu-open .site-nav {
    pointer-events: auto;
  }

  .site-nav a,
  .site-nav .nav-back {
    color: #fff;
    padding: 8px 0;
  }

  .site-nav a .nav-label,
  .site-nav .nav-back .nav-label {
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  .site-nav a[aria-current="page"] .nav-label {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold) !important;
  }

  html.is-menu-open .site-nav > a {
    animation: menu-line-in 0.55s ease both;
  }
  html.is-menu-open .site-nav > a:nth-of-type(1) { animation-delay: 0.05s; }
  html.is-menu-open .site-nav > a:nth-of-type(2) { animation-delay: 0.12s; }
  html.is-menu-open .site-nav > a:nth-of-type(3) { animation-delay: 0.19s; }
  html.is-menu-open .site-nav > a:nth-of-type(4) { animation-delay: 0.26s; }
  html.is-menu-open .site-nav > a:nth-of-type(5) { animation-delay: 0.33s; }

  html.is-menu-open.show-countries .site-nav > a,
  html.is-menu-open .site-nav.show-countries > a {
    animation: none;
  }

  @keyframes menu-line-in {
    from {
      opacity: 0;
      transform: translateY(0.7em);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-nav .eq span {
    background: #fff;
  }

  .site-nav__music:hover .eq span,
  .site-nav a[aria-current="page"] .eq span {
    background: var(--gold);
  }

  .nav-countries {
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 40px;
  }

  /* --- Hero: grape.jpg first, then crossfade to hero.jpg while pinned --- */
  .wordmark-film,
  .hero-plate,
  .hero-reveal,
  .hero-final-wordmark,
  .risen-wordmark,
  .edge-mask {
    display: none !important;
  }

  .hero-scene {
    display: block;
    height: 200svh;
  }

  .hero {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100svh;
    overflow: hidden;
    background: #fff;
    transform: translateY(100%);
    z-index: 6;
  }

  html.is-open .hero {
    transform: none;
  }

  html.is-mobile-hero-in .hero {
    animation: mobile-hero-up 0.95s cubic-bezier(0.62, 0, 0.2, 1) both;
  }

  html.is-mobile-hero-in .site-mark,
  html.is-mobile-hero-in .menu-toggle {
    animation: mobile-hero-up 0.95s cubic-bezier(0.62, 0, 0.2, 1) both;
  }

  @keyframes mobile-hero-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .hero-film {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: none !important;
    transition: none;
  }

  .hero-film__still {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero .grape {
    display: block !important;
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    opacity: 1;
  }

  .hero-wordmark-mobile {
    display: block;
    position: relative;
    z-index: 2;
    margin: 0 0 18px;
    color: var(--gold);
    font-family: var(--font-serif);
    font-size: clamp(72px, 22vw, 108px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 0.85;
    text-transform: uppercase;
    text-align: center;
  }

  .hero-tagline {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    width: auto;
    transform: none;
    text-align: left;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.12em;
  }

  .hero-scroll {
    display: block;
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 2;
    margin: 0;
    color: var(--gold);
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transform: translateX(-50%);
  }

  /* --- Title sections: centered stack, Aebele-like scale --- */
  .story--about,
  .story--contact,
  .story--collection,
  .story--cellar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 100svh;
    padding: 96px 24px 56px;
    overflow: visible;
  }

  .welcome-title-group,
  .title-group {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: none;
    pointer-events: none;
  }

  .title-group .story__headline,
  .title-group .producer-inquire__headline {
    pointer-events: auto;
  }

  .section-tag,
  .contact__tag,
  .about__tag {
    margin-bottom: 28px;
  }

  .section-tag,
  .story__headline,
  .story__cheers,
  .contact__tag,
  .contact__line,
  .about__headline,
  .about__script,
  .about__copy,
  .contact__note {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center;
    width: auto;
    max-width: 100%;
  }

  .story__headline {
    font-size: 42px;
    line-height: 1.05;
    width: 100%;
  }

  .story__headline-line,
  .story--about .story__headline-line--1,
  .story__headline-line--2,
  .story__headline-line--3 {
    display: block;
    width: 100%;
    margin-left: 0;
    text-align: center;
  }

  .story__cheers--svg {
    width: min(240px, 70vw);
    margin: 8px 0 20px;
  }

  .story__lede,
  .about__copy,
  .contact__note,
  .producer__text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    max-width: 34ch;
    margin: 0 auto;
    text-align: center !important;
    white-space: normal !important;
    font-size: 15px;
    line-height: 1.5;
    transform: none !important;
  }

  .story__cta,
  .story__music,
  .story__cta-pair {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 28px auto 0;
  }

  .story__music {
    margin-top: 32px;
  }

  .story__cta-pair {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .contact__cheers {
    width: min(220px, 64vw);
    margin: 8px auto 20px;
  }

  .contact__line {
    font-size: 42px;
    line-height: 1.05;
    white-space: nowrap;
  }

  .picks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    height: auto;
    min-height: 70svh;
    padding: 24px 16px 48px;
  }

  .picks__img {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 28svh;
    transform: none;
  }

  .scroll-gap,
  .scroll-gap--between {
    height: 0;
  }

  .cellar-photo,
  .heritage-photo {
    position: relative;
    top: auto;
    left: auto;
    width: min(86vw, 360px);
    margin: 0 auto 20px;
    display: block;
  }

  .cellar-group,
  .heritage-block,
  .heritage-group {
    position: relative;
    top: auto;
    left: auto;
    width: min(86vw, 360px);
    margin: 0 auto;
    text-align: center;
  }

  .cellar-group__title {
    font-size: 36px;
    line-height: 1.1;
  }

  .cellar-group__copy,
  .heritage-group .cellar-group__copy {
    width: 100%;
    text-align: center;
  }

  .cellar-group__btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 32px 20px;
  }

  .cellar-group__btns .cta:nth-child(3) {
    grid-column: 1 / -1;
  }

  .contact {
    overflow: visible;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 24px 48px;
  }

  .contact .title-group {
    order: 1;
  }

  .contact__note {
    order: 2;
    margin-top: 8px;
  }

  .contact__form {
    order: 3;
  }

  .contact__info {
    order: 4;
  }

  .contact > .site-copyright {
    order: 5;
  }

  .contact > .site-footer {
    order: 6;
  }

  .contact__form {
    width: min(86vw, 330px);
    margin: 36px auto 0;
    padding-bottom: 24px;
  }

  .field__input {
    font-size: 16px;
  }

  .contact__info {
    position: relative;
    top: auto;
    left: auto;
    width: min(86vw, 330px);
    margin: 40px auto 96px;
    text-align: center;
  }

  .info__text,
  .info__title {
    text-align: center;
  }

  body.about-page {
    display: flex;
    flex-direction: column;
  }

  body.about-page .about {
    order: 1;
  }

  body.about-page .about__extra--a1 {
    order: 2;
  }

  body.about-page .about__cebu {
    order: 3;
  }

  body.about-page .story--collection {
    order: 4;
  }

  body.about-page .about__extra--a3 {
    display: none;
  }

  .about {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 24px 48px;
  }

  .about__headline {
    font-size: 36px;
    line-height: 1.1;
    width: 100%;
  }

  .about__headline-gap {
    width: auto;
    font-style: normal;
  }

  .about__headline-gap::before {
    content: " & ";
  }

  .about__amp {
    display: none;
  }

  .about__script {
    width: min(240px, 70vw);
    margin: 8px 0 20px;
  }

  .about__founder,
  .about__extra--a1,
  .about__extra--a3 {
    position: relative;
    top: auto;
    left: auto;
    z-index: 0;
    width: min(86vw, 360px);
    margin: 28px auto;
  }

  .about__bio {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12px auto;
    font-size: 28px;
    line-height: 1.15;
  }

  .about__bio-founder,
  .about__bio-mv {
    transform: none;
  }

  .about__bio-blank {
    height: auto;
    display: flex;
    justify-content: center;
    margin: 0;
    line-height: 0;
  }

  .about__bio-swirl {
    position: relative;
    top: auto;
    left: auto;
    width: 70px;
    margin: 0 auto;
  }

  .about__cebu {
    position: relative;
    top: auto;
    left: auto;
    font-size: 90px;
    margin: 8px auto 32px;
    text-align: center;
  }

  .about__divider,
  .about__story {
    position: relative;
    top: auto;
    left: auto;
    width: min(86vw, 340px);
    margin: 16px auto;
    transform: none;
  }

  .producer {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 24px 48px;
    overflow: hidden;
  }

  .producer__bg {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 100%;
    transform: none !important;
    z-index: 0;
  }

  .producer .title-group {
    position: relative;
    z-index: 2;
  }

  .producer__title,
  .producer__title--left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    transform: none !important;
    color: #fff;
    font-size: 42px;
    line-height: 1.08;
    text-align: center;
  }

  .producer__title-line {
    transform: none !important;
    display: block;
    text-align: center;
    white-space: normal;
  }

  .producer__title-gap {
    width: auto;
  }

  .producer__title-gap::before {
    content: " & ";
  }

  .producer__soul {
    transform: none !important;
  }

  .producer__amp {
    display: none;
  }

  .producer__name {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: min(72vw, 280px);
    margin: 10px auto 18px;
    transform: none !important;
  }

  .producer__text {
    position: relative !important;
    z-index: 2;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(86vw, 340px) !important;
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    transform: none !important;
  }

  .producer-item:hover .producer-item__name {
    --nav-sweep: 0%;
  }

  .producer-item:hover .producer-item__types {
    color: var(--story-ink);
  }

  .producer-item:hover + .producer-sep .producer-sep__rule {
    transform: none;
  }

  .producer-item__name {
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: var(--story-ink) !important;
    -webkit-text-fill-color: var(--story-ink) !important;
  }

  .producer-item__name {
    font-size: 28px;
  }

  .producer-item__types {
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: normal;
    width: auto;
    min-width: 0;
  }

  .producer-inquire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    padding: 40px 24px 24px;
  }

  .producer-inquire__headline,
  .story--collection .story__headline {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    color: var(--gold);
    font-size: 22px;
    line-height: 1;
    width: auto;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .collection__row,
  .producer-inquire__rule,
  .story--collection .story__cheers,
  .producer-inquire__cheers {
    display: none;
  }

  .story--collection {
    min-height: 0;
    justify-content: flex-end;
    padding: 16px 24px 12px;
    background: var(--cream);
  }

  body.about-page .story--collection {
    background: var(--about-bg);
  }

  body.about-page > .site-nav,
  body.about-page > .site-mark,
  body.about-page > .menu-toggle {
    position: fixed;
    width: auto;
    height: auto;
    margin: 0;
    order: 0;
  }

  .legal {
    padding: 88px 20px 64px;
  }

  .legal__doc {
    max-width: none;
  }

  .legal__title {
    font-size: 36px;
  }

  .legal__mark {
    width: 140vw;
  }

  .site-footer,
  .site-copyright {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    margin: 6px auto;
    font-size: 18px;
  }
}