/* ==========================================================================
   TALIANO / Design tokens
   ========================================================================== */

:root {
  --ink:        #14100B;
  --ink-soft:   #1E1810;
  --cream:      #F3ECDA;
  --cream-deep: #E4D7BA;
  /* Retuned to the crest artwork. Sampled from taliano-logo-transparent.png,
     the logo's gold is #BA8737 (hue 37); the old #C5A253 sat at hue 41 and was
     paler and yellower, dE2000 10.78 from the logo, so the two golds read as
     different colours on the same page. This is dE 2.09 from the artwork,
     about the just-noticeable threshold, and still clears AA on ink at 5.81:1. */
  --gold:       #B88532;
  /* Nudged down from #8A6A32, which gave the small uppercase labels only
     4.26:1 on cream. This clears WCAG AA for normal text at 4.54:1 and is
     indistinguishable on the hairline rules that also use it. */
  --bronze:     #846630;
  --bottle:     #1B2917;

  /* Cormorant Garamond carries headings and short editorial lines.

     Inter carries everything else. It is the closest free equivalent to the
     neo-grotesque Dom Perignon uses, and is drawn for screen reading rather
     than for display. Nothing is set below 400 any more. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drift: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-height: 4.5rem;

  /* Distance from a full-screen section's top edge to its eyebrow. Shared by
     Wines and Story so the two line up by construction. They used to ride
     their own section's vertical centring, and because the globe and the
     bottle cap at different sizes the offsets drifted apart: 18px out at
     1440 and 43px the other way at 2551. */
  --head-top: calc(var(--nav-height) + clamp(2rem, 5vh, 4rem));

  --p: 0;
  --scale-max: 0.35;
}

/* ==========================================================================
   Geometric draftsman pattern (packaging motif)
   ========================================================================== */

:root {
  --pattern-draftsman: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23C5A253' stroke-width='0.5' opacity='0.9'%3E%3Cpath d='M40 40 L120 40 L80 110 Z'/%3E%3Cpath d='M360 60 A50 50 0 0 1 410 110'/%3E%3Cpath d='M200 320 L200 400 M160 360 L240 360'/%3E%3Ccircle cx='320' cy='320' r='30'/%3E%3Cpath d='M60 380 L140 380 M100 340 L100 420'/%3E%3Cpath d='M380 380 L420 340 L460 380 Z'/%3E%3C/g%3E%3Cg fill='%23C5A253' font-family='Cormorant Garamond' font-size='11' opacity='0.85'%3E%3Ctext x='170' y='90'%3EXII%3C/text%3E%3Ctext x='400' y='200'%3EVII%3C/text%3E%3Ctext x='90' y='260'%3EXVIII%3C/text%3E%3Ctext x='300' y='420' font-size='9' letter-spacing='1'%3ER 160%3C/text%3E%3Ctext x='220' y='180' font-size='9'%3E30%C2%B0%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   Smooth scroll (Lenis) / upstream lenis.css, inlined
   ========================================================================== */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
}

html.js-scroll-scenes {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cream);
  background-color: var(--ink);
  background-image: var(--pattern-draftsman);
  background-size: 480px 480px;
  background-repeat: repeat;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--ink);
  opacity: 0.94;
  pointer-events: none;
  z-index: -2;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-deep);
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: 0.12em;
  color: var(--cream);
}

.display--sm {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: 0.1em;
}

.body-text {
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: var(--cream-deep);
  max-width: 36ch;
}

/* ==========================================================================
   Scroll progress hairline (right edge)
   ========================================================================== */

/* ==========================================================================
   Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--cream);
  border: 1px solid var(--bronze);
  font-size: 0.875rem;
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  height: var(--nav-height);
  transition: background-color 600ms var(--ease-soft),
              border-color 600ms var(--ease-soft);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background-color: var(--ink);
  border-bottom-color: rgba(132, 102, 48, 0.25);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.nav-mark {
  display: block;
}

.nav-mark__img {
  width: 2.5rem;
  height: auto;
  opacity: 0.92;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(0.75rem, 2vw, 2.5rem);
}

.nav-link {
  position: relative;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-deep);
  padding-bottom: 2px;
  transition: color 450ms var(--ease-soft);
}

/* Must come AFTER the base .nav-link above. Media queries add no specificity,
   so while this sat earlier in the file the base rule won on source order and
   these narrow-width sizes never applied at all. */
@media (max-width: 480px) {
  .nav-link {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .nav-list {
    gap: 0.7rem;
  }

  .nav-mark__img {
    width: 2rem;
  }
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-drift);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--cream);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Gold hairline rule (static)
   ========================================================================== */

/* ==========================================================================
   Scenes / scroll-driven zoom (desktop + JS)
   ========================================================================== */

.scene {
  position: relative;
}

.scene__pin {
  position: relative;
  width: 100%;
}

.scene__content {
  position: relative;
  z-index: 2;
}

.scene__media {
  transform-origin: center center;
}

/* Pinned zoom mode */
html.js-scroll-scenes .scene {
  height: calc(var(--scene-vh, 250) * 1vh);
}

html.js-scroll-scenes .scene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The frame holds still and clips; only the media inside it scales. Scaling
   .scene__media itself would grow its border and its framed placeholder. */
html.js-scroll-scenes .scene__media {
  overflow: hidden;
}

html.js-scroll-scenes .scene__media-inner {
  will-change: transform;
  transform-origin: center center;
  transform: scale(calc(1 + var(--p, 0) * var(--scale-max, 0.35)));
}

/* The frame already draws the border; a second one on the scaling child
   would grow with it. */
html.js-scroll-scenes .scene__media .image-slot {
  border: none;
}

html.js-scroll-scenes .scene__pin.section .section__inner {
  width: 100%;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-wines-transition {
  position: relative;
  isolation: isolate;
  background: var(--ink);
}

.hero-wines-transition:has(.hero__video--crop) {
  background: #000;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ink);
}

#hero:has(.hero__video--crop) {
  background: #000;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#hero:has(.hero__video--crop) .hero__media {
  background: #000;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: var(--ink);
}

/* iPad and other touch “desktop” widths: the hero film is centered by default,
   which parks the bottle under the fixed nav. Bias framing down on coarse
   pointers and sub-1200 layouts (same band as wines stacking). */
@media (max-width: 1199px), (pointer: coarse) {
  .hero__video:not(.hero__video--crop) {
    object-position: center 58%;
  }

  .hero__video--crop {
    object-position: center center;
  }
}

/* Counter-scale so transform adjusts film zoom, not the layout box (scale < 1
   must not shrink the hero to a postage stamp). */
.hero__video--crop {
  position: absolute;
  max-width: none;
  object-fit: fill;
  object-position: center center;
  background: #000;
  /* Browsers composite video blacks differently from CSS #000; feather the
     side edges so no hard seam shows. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #hero:has(.hero__video--crop) .hero__media.parallax-panel__media {
    top: 0;
    bottom: 0;
    transform: none;
    will-change: auto;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

/* These wrappers preserve the chapter groupings without creating a stack of
   sticky cards. The sections themselves remain in normal document flow. */
.editorial-transition {
  position: relative;
  isolation: isolate;
  background: var(--ink);
}

/* Dom Perignon uses a full-screen card whose media travels more slowly inside
   a clipped section. The panel still scrolls normally. Extra media height
   keeps both edges covered throughout the counter-scroll movement. */
.parallax-panel {
  position: relative;
  overflow: hidden;
}

.parallax-panel__media {
  --parallax-y: 0px;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .parallax-panel__media {
    top: -10%;
    bottom: -10%;
    transform: translate3d(0, var(--parallax-y), 0);
    will-change: transform;
  }
}

/* ==========================================================================
   Sections / shared
   ========================================================================== */

.section {
  position: relative;
  padding: clamp(5rem, 12vw, 9rem) clamp(1.25rem, 4vw, 3rem);
  width: 100%;
}

html.js-scroll-scenes .section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  width: 100%;
}

.section__inner {
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   Story / one globe, two marks
   ========================================================================== */

.section--story {
  position: relative;
  background-color: var(--ink);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The fixed nav overlays the top of the viewport, so the top padding has to
   clear it or the eyebrow renders behind the header bar. Specificity has to
   beat `html.js-scroll-scenes .section`, which sets the padding shorthand. */
.section--story,
html.js-scroll-scenes .section.section--story {
  padding-top: calc(var(--nav-height) + min(1rem, 2vh));
  padding-bottom: min(4rem, 5vh);
}

.story__stage {
  position: relative;
  width: 100%;
  --draw: 1;
}

/* Square, and sized off whichever axis binds first. The vh figure allows for
   the nav clearance above and the padding below, so the section still lands
   on exactly one screen. */
.globe {
  width: min(74vh, 78vw, 54rem);
  margin: 0 auto;
}

.globe__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* The place names are svg <text>, so without this they drag-select and
     double-click-highlight like body copy. */
  -webkit-user-select: none;
  user-select: none;
}


/* Matches .display--sm, which every other section heading uses. It was on its
   own smaller scale as a workaround for the globe, which no longer applies:
   the heading is absolutely positioned, so its size does not affect where the
   globe sits. A different size with no visible reason just reads as a mistake. */
.story__header .display {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}


.story__coda {
  margin-top: 1.5rem;
  /* Centred only in the stacked narrow layout; the desktop rule below
     right-aligns it. Both are (0,1,0), so this has to come FIRST or it wins
     on source order and silently un-does the alignment. */
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.02rem, 1.9vw, 1.35rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--cream);
  /* Two parallel sentences; balance breaks them one per line instead of
     leaving "house." stranded on its own. */
  text-wrap: balance;
}

.story__span {
  /* Block, not inline-block: on a narrow screen it tucked in beside the last
     line of the coda instead of standing as its own annotation. */
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Gold, not bronze: this sits on the dark story panel, where bronze reads at
     only 3.78:1. Bronze is the accent for cream backgrounds. */
  color: var(--gold);
}

/* Heading and coda sit in the corners the circle cannot reach. */
/* The globe is 74vh wide, so a side column beside it only clears from about
   1360px up. Below that the gap measured 12px at 1280 and went negative at
   1200, so the lead stacks above the globe instead. Wines keeps 1000px: its
   card is far narrower and clears from 1024. */
@media (min-width: 1360px) {
  .story__lead {
    position: absolute;
    top: var(--head-top);
    left: clamp(1.25rem, 4vw, 3rem);
    max-width: 22rem;
    z-index: 2;
  }

  .story__coda {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 20rem;
    text-align: right;
    z-index: 2;
  }
}

/* ========================================================================
   Availability and closing chapter
   The stockist names were placeholders. This treatment makes the map a
   geographical cue and turns availability into a direct, concierge-like
   conversation until a verified stockist list is ready to publish.
   ======================================================================== */

.section--buy {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(184, 133, 50, 0.18);
}

.section__inner--buy { gap: clamp(2.25rem, 6vh, 5.5rem); }
.buy__layout { gap: clamp(2.5rem, 7vw, 8rem); }

@media (min-width: 900px) {
  .buy__layout { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.75fr); }
}

.map { position: relative; }
.map::before {
  content: "AZERBAIJAN";
  position: absolute;
  top: -1.5rem;
  left: 0;
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: var(--gold);
}

.buy__concierge {
  border-top: 1px solid rgba(184, 133, 50, 0.6);
  border-bottom: 1px solid rgba(184, 133, 50, 0.3);
  padding: 1.5rem 0 1.65rem;
}

.buy__number { margin: 0 0 1.5rem; font-size: 0.62rem; letter-spacing: 0.3em; color: var(--gold); }
.buy__lead {
  max-width: 24rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-wrap: balance;
}
.buy__copy { max-width: 25rem; margin-top: 1.5rem; color: var(--cream-deep); font-size: 0.9rem; line-height: 1.7; }
.buy__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(228, 215, 186, 0.35);
  border-bottom: 1px solid rgba(228, 215, 186, 0.35);
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.buy__cta span { font-size: 1.1rem; line-height: 1; transition: transform 260ms var(--ease-drift); }
.buy__cta:hover, .buy__cta:focus-visible { color: var(--gold); border-color: var(--gold); }
.buy__cta:hover span, .buy__cta:focus-visible span { transform: translate(0.18rem, -0.18rem); }
.buy__cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.buy__note { margin-top: 1rem; font-size: 0.62rem; letter-spacing: 0.12em; color: var(--cream-deep); }

.site-footer {
  background-color: #0d0b08;
  color: var(--cream);
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) 1.5rem;
  border-top: 1px solid rgba(184, 133, 50, 0.35);
}
.site-footer__inner { display: grid; gap: 2.5rem; }
.site-footer__masthead { display: flex; align-items: center; gap: 1rem; }
.site-footer__logo { width: 3.75rem; filter: none; }
.site-footer__name {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: 0.8;
  letter-spacing: 0.14em;
  color: var(--cream);
}
.site-footer__body { display: grid; gap: 2rem; }
.site-footer__tagline { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; letter-spacing: 0.02em; color: var(--cream-deep); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.footer-nav a { color: var(--cream); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: color 180ms var(--ease-soft); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--gold); }
.footer-nav a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.site-footer__legal { color: rgba(228, 215, 186, 0.58); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(228, 215, 186, 0.18); }

@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 10vw, 10rem); }
  .site-footer__masthead, .site-footer__legal { grid-column: 1 / -1; }
  .site-footer__body { grid-column: 2; }
}

/* --- strokes ------------------------------------------------------------ */
/* Gold is 7.82:1 on --ink, so it carries the small labels here; on the cream
   sections it is only 2.06:1 and could not. */

.globe__svg .gl__limb,
.globe__svg .gl__grat,
.globe__svg .gl__land,
.globe__svg .gl__arc,
.globe__svg .gl__ring,
.globe__svg .gl__lead {
  fill: none;
  stroke: var(--gold);
  vector-effect: non-scaling-stroke;
}

.globe__svg .gl__limb { stroke: var(--bronze); stroke-width: 1; opacity: 0.6; }
.globe__svg .gl__grat { stroke-width: 0.6; opacity: 0.26; }
.globe__svg .gl__land { stroke-width: 0.9; opacity: 0.72; }
/* No stroke-dasharray here: the path carries pathLength="1", which normalises
   any dash value into one longer than the path, so it always rendered solid.
   For a dashed route line, drop pathLength="1" from the arc in index.html -
   the arc is revealed by opacity, so it does not need it. */
.globe__svg .gl__arc  { stroke-width: 1.1; }
.globe__svg .gl__ring { stroke-width: 1; --line-op: 0.9; }
.globe__svg .gl__lead { stroke-width: 1; --line-op: 0.45; }

.globe__svg .gl__dot { fill: var(--gold); }
.globe__svg .gl__halo { fill: var(--gold); opacity: 0.07; }

.globe__svg .gl__place {
  /* The marks move by a transform on their group, and by default the browser
     hints svg text onto the pixel grid, so a smoothly changing offset came out
     as a stepped judder. geometricPrecision turns that snapping off and
     positions the glyphs continuously. */
  text-rendering: geometricPrecision;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 1px;
  fill: var(--cream);
}

.globe__svg .gl__meta {
  text-rendering: geometricPrecision;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  fill: var(--cream-deep);
}

/* --- the reveal --------------------------------------------------------- *
   --draw runs 0 to 1, scroll-linked from main.js and therefore reversible:
   scrolling back up runs it backwards. It defaults to 1 so the globe is
   complete without JS, on mobile, and under reduced motion.

   The globe itself is NOT drawn on. The grid and the coastlines are simply
   there, and what animates is the zoom: the sphere grows as it comes into
   view, and the two marks and the line between them resolve on top of it.
   Far less moving, and what does move is the thing worth watching. */

.globe__zoom {
  /* Explicit translate/scale/translate rather than transform-origin: the
     origin is the globe's centre in viewBox units, and this avoids the
     transform-box quirks on SVG groups. Strokes carry non-scaling-stroke, so
     the hairlines stay hairlines however far it zooms. */
  /* 20% larger at both ends: 0.84 -> 1.008 and 1.00 -> 1.20. The range grows
     with them (0.16 -> 0.192) so the proportional growth, and therefore the
     feel of the zoom, is unchanged: only the size. The scroll window that
     drives --draw is untouched, so the speed is identical.

     Scaling the group rather than the container is what keeps the section
     fitting one screen: the layout box does not move, and the SVG carries
     overflow: visible so the sphere simply draws larger than its box. It has
     room to: the limb is only 84.4% of the container at scale 1, so even at
     1.20 the globe is 101.3% of it. */
  transform:
    translate(450px, 450px)
    scale(calc(1.008 + var(--draw, 1) * 0.192))
    translate(-450px, -450px);
}

/* A touch of lift as it comes in, so the sphere resolves rather than just
   growing. Deliberately subtle: this is the only thing besides the zoom that
   the globe body does. */
.globe__svg .gl__limb,
.globe__svg .gl__grat,
.globe__svg .gl__land {
  opacity: calc(var(--body-op) * clamp(0.45, 0.45 + var(--draw, 1) * 0.55, 1));
}

.globe__svg .gl__limb { --body-op: 0.6; }
.globe__svg .gl__grat { --body-op: 0.26; }
.globe__svg .gl__land { --body-op: 0.72; }

/* The line between the two places: the point of the drawing, so it arrives
   after the sphere has settled. */
/* Travels from Italy to Azerbaijan: the path was generated in that direction, so
   running the dash offset to 0 draws it west to east. */
.globe__svg .gl__arc {
  --stage: clamp(0, (var(--draw, 1) - 0.45) / 0.32, 1);
  opacity: 0.85;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--stage));
}

/* Hit target. Transparent, and far larger than the visible mark: the halo is
   only 24px across at 390px wide, exactly the WCAG 2.5.8 AA floor, and the dot
   people actually aim at is 4px. r=48 in viewBox units lands at 44px across on
   a 390px screen (the AAA target) and scales up from there. The marks are 86px
   apart at that size, so two 44px targets still leave 42px between them. */
.globe__svg .gl__hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

.globe__svg .gl__pin { outline: none; }

.globe__svg .gl__pin:hover .gl__ring,
.globe__svg .gl__pin:focus-visible .gl__ring,
.globe__svg .gl__pin[aria-expanded="true"] .gl__ring {
  stroke-width: 2;
}

.globe__svg .gl__pin:hover .gl__halo,
.globe__svg .gl__pin:focus-visible .gl__halo,
.globe__svg .gl__pin[aria-expanded="true"] .gl__halo {
  opacity: calc(0.16 * clamp(0, (var(--draw, 1) - 0.66) / 0.34, 1));
}

/* Focus has to be drawn rather than left to the UA outline, which SVG shapes
   do not render reliably. */
.globe__svg .gl__pin:focus-visible .gl__hit {
  fill: rgba(184, 133, 50, 0.10);
  stroke: var(--gold);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* ---- popups ---- *
   Positioned from the mark's live screen position by main.js and pushed
   outward along the same diagonal as the leader line, so the sphere between
   the two marks stays clear. Non-modal on purpose: nothing is blocked, the
   globe stays readable behind them, and Escape or a click outside closes. */
.pop {
  position: absolute;
  z-index: 4;
  width: min(22rem, 66vw);
  padding: 1.05rem 3.25rem 1.15rem 1.2rem;
  background: rgba(20, 16, 11, 0.94);
  border: 1px solid rgba(184, 133, 50, 0.42);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-soft), transform 240ms var(--ease-drift);
}

.pop__close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  font: 300 1.25rem/1 var(--font-body);
  transition: color 220ms var(--ease-soft), transform 280ms var(--ease-drift);
}

.pop__close:hover,
.pop__close:focus-visible {
  color: var(--gold);
  transform: rotate(90deg);
}

.pop[data-open] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pop__when {
  margin-bottom: 0.55rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

.pop__text {
  /* Sentences, set around 16px. Cormorant is a display face and is unreadable
     at this size, so running text uses the sans. Tracking back to normal:
     positive tracking on lowercase grotesque text hurts more than it helps. */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--cream);
  text-wrap: pretty;
}

/* Below the desktop breakpoint there is no room to float a card beside a mark:
   at 390px the popup covered 37% of the globe and sat on top of the other
   mark. It docks under the drawing instead, where it covers nothing. */
@media (max-width: 1359px) {
  /* A sheet fixed to the bottom of the viewport, NOT a block in normal flow.
     Docking it in flow meant opening a popup grew the story section by 135px
     and the document with it, so tapping a mark reflowed the page under the
     reader. Fixed positioning takes it out of layout entirely: the section
     height never changes, and the sheet is on screen wherever you have
     scrolled to, so nothing has to scroll to reveal it either. */
  .pop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 60;
    margin-top: 0;
    max-height: min(58vh, 24rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 1.15rem max(3.75rem, clamp(1.25rem, 4vw, 3rem)) 1.15rem clamp(1.25rem, 4vw, 3rem);
    padding-bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
    /* Fully opaque, unlike the floating one. At 0.98 the coda showed through
       the top of the sheet and read as a rendering fault. */
    background: var(--ink);
    border-top-color: rgba(184, 133, 50, 0.55);
    transform: translateY(12px);
  }

  .pop[data-open] {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pop { transition: none; transform: none; }
}

/* Marks last.

   These fade rather than draw on. A dash-based reveal never closed cleanly
   here: these strokes carry vector-effect: non-scaling-stroke, which resolves
   dash lengths in screen space and so bypasses the pathLength="1"
   normalisation the reveal depended on. The ring rendered as a spiral with a
   permanent gap of roughly an eighth of its circumference, at every value of
   --draw including 1. Verified: stroke-dasharray:none closes the circle,
   while 1 and 1.02 both leave the gap. */
.globe__svg .gl__ring,
.globe__svg .gl__lead {
  --stage: clamp(0, (var(--draw, 1) - 0.6) / 0.4, 1);
  opacity: calc(var(--line-op) * var(--stage));
}

/* The ring contracts onto the mark as it arrives, the way a sight settles on
   a target. transform-box: fill-box puts the origin at the shape's own centre,
   which is what makes a per-mark scale possible without hard-coded origins. */
.globe__svg .gl__ring,
.globe__svg .gl__dot,
.globe__svg .gl__halo {
  transform-box: fill-box;
  transform-origin: center;
}

.globe__svg .gl__ring {
  transform: scale(calc(1.9 - 0.9 * var(--stage, 1)));
}

.globe__svg .gl__dot {
  --stage: clamp(0, (var(--draw, 1) - 0.66) / 0.34, 1);
  transform: scale(var(--stage, 1));
}

.globe__svg .gl__dot,
.globe__svg .gl__place,
.globe__svg .gl__meta {
  opacity: clamp(0, (var(--draw, 1) - 0.66) / 0.34, 1);
}

.globe__svg .gl__halo {
  opacity: calc(0.07 * clamp(0, (var(--draw, 1) - 0.66) / 0.34, 1));
}

.story__coda {
  opacity: clamp(0, (var(--draw, 1) - 0.75) / 0.25, 1);
}

@media (max-width: 1359px) {
  /* Still a full screen, like the wines section: stacked rather than
     corner-anchored, but the same height. It was 672px against the wines
     section's 844px on a phone, which read as a lesser page. */
  .section--story {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .globe {
    width: min(100%, 32rem);
  }

  .globe__svg .gl__place { font-size: 40px; }
  .globe__svg .gl__meta { font-size: 20px; letter-spacing: 1.8px; }
}

/* ===========================================================================
   Wines / paired collection on desktop, swipe carousel on mobile
   ========================================================================== */

/* Measured against height, not width: a short wide laptop is constrained on
   the axis 6vw knows nothing about. Specificity has to clear
   `html.js-scroll-scenes .section`, which sets the padding shorthand. */
.section--wines,
html.js-scroll-scenes .section.section--wines {
  padding-block: min(4rem, 5vh);
}

.section--wines {
  position: relative;
  background-color: var(--cream);
  color: var(--ink);
  /* The cream plate holds a full screen so the next section never peeks in
     under it. svh last so it wins where supported. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

@media (min-width: 1200px) and (min-height: 720px) and (hover: hover) and (pointer: fine) {
  /* Out of the flow only when there is room beside the centred bottle.
     Tablets (coarse pointer) and short laptops keep the heading in flow. */
  .wines__intro {
    position: absolute;
    top: var(--head-top);
    left: clamp(1.25rem, 4vw, 3rem);
    max-width: 22rem;
    margin-bottom: 0;
    z-index: 2;
  }
}

.section--wines .eyebrow {
  color: var(--ink-soft);
}

.section--wines .display {
  color: var(--ink);
}

.wines__intro {
  margin-bottom: min(4.5rem, 4.5vh);
}

.wine-carousel {
  width: min(100%, 36rem);
  margin-inline: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wine-carousel__track {
  width: 100%;
  margin: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.wine-carousel__track::-webkit-scrollbar {
  display: none;
}

.wine-carousel__controls {
  width: 9rem;
  min-height: 2rem;
  margin: clamp(0.8rem, 2vh, 1.3rem) auto 0;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
}

.wine-carousel__arrow {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 260ms var(--ease-soft), opacity 260ms var(--ease-soft),
              transform 360ms var(--ease-drift);
}

.wine-carousel__arrow:not(:disabled):hover {
  color: var(--bronze);
  transform: translateX(var(--arrow-shift, 0));
}

.wine-carousel__arrow--previous { --arrow-shift: -0.18rem; }
.wine-carousel__arrow--next { --arrow-shift: 0.18rem; }
.wine-carousel__arrow:disabled { opacity: 0.22; cursor: default; }

.wine-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.wine-carousel__dot {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wine-carousel__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  background: rgba(23, 19, 14, 0.25);
  transform: translate(-50%, -50%) scaleX(0.55);
  transition: background-color 300ms var(--ease-soft),
              transform 420ms var(--ease-drift);
}

.wine-carousel__dot[aria-current="true"]::before {
  background: var(--bronze);
  transform: translate(-50%, -50%) scaleX(1);
}

.wine-carousel__arrow:focus-visible,
.wine-carousel__dot:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 2px;
}

.wine-panel {
  /* Strip reserved at the foot of the frame for the hover cue. The bottle is
     sized to clear it, so the cue never lands on the product. */
  --cue-band: 3.25rem;
  /* Sizes the frame from viewport height so the whole card lands above the
     fold. The -200px covers the fixed costs (intro block + name) which do not
     scale with height, so tall screens get proportionally more bottle than a
     flat vh would give them. Capped at 33rem, the original frame size.
     Tuned for the centred full-screen plate: after an anchor click the section
     top sits at the nav height, so half the plate's slack is spent before the
     content even starts. Margins below "Brut" are 18px at 1366, 37px at 1440,
     56px at 1920: raising either number eats into the 1366 case first. */
  /* The 46rem ceiling matters on tall narrow windows: at 40rem a 1201px-high
     viewport hit the cap and the leftover height pooled above the bottle
     instead of going into it. */
  --frame-h: clamp(16rem, calc(84vh - 215px), 46rem);
  --frame-h: clamp(16rem, calc(84svh - 215px), 46rem);
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.wine-panel__link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  color: inherit;
  text-align: center;
}

.wine-panel__link--static {
  cursor: default;
}

.wine-carousel__clone {
  pointer-events: none;
}

.wine-panel__link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

/* 2/3, not 3/4. The bottle is a 1:2.28 object: in a 3/4 frame it sits 19px
   from top and bottom while floating in 81px of dead space each side, a 4.3x
   imbalance. 2/3 brings that to 2.6x and opens up the cue band. */
.wine-panel__visual {
  position: relative;
  height: var(--frame-h);
  width: calc(var(--frame-h) * 2 / 3);
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: var(--cue-band);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* A warm plate rather than a dark scrim: the box acknowledges the pointer
   without dimming the product it is meant to be selling. */
.wine-panel__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--cream-deep);
  opacity: 0;
  transition: opacity 220ms var(--ease-soft);
}

/* Gold hairline draws in, echoing .nav-link::after */
.wine-panel__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-soft);
}

.wine-panel__bottle {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
  /* Raised with the frame. 62% left the bottle width-bound, so a taller frame
     alone would not have made it any bigger. The 86% still reserves the strip
     at the foot for the View details cue. */
  max-height: 86%;
  max-width: 74%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  transition: transform 420ms var(--ease-soft);
}

.wine-panel__cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: var(--cue-band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

/* Rests in the band permanently, echoing the hairline device used in every
   section header, so the card reads as composed rather than empty. It widens
   on hover the way .nav-link::after does. */
.wine-panel__cue-rule {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0.6);
  transition: transform 320ms var(--ease-drift);
}

/* Holds its space at rest so revealing it cannot nudge the rule. */
.wine-panel__cue-text {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease-soft),
              transform 280ms var(--ease-drift);
}

/* --bronze is only 4.26:1 on cream and --gold 2.06:1, both short of the 4.5:1
   this text size needs, so the label is ink and gold stays decorative. */
.section--wines .wine-panel__cue-text {
  color: var(--ink-soft);
}

.section--wines .wine-panel__name {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--ink);
}

.wine-panel__link:hover .wine-panel__plate,
.wine-panel__link:focus-visible .wine-panel__plate {
  opacity: 0.55;
}

.wine-panel__link:hover .wine-panel__visual::after,
.wine-panel__link:focus-visible .wine-panel__visual::after {
  opacity: 0.5;
}

.wine-panel__link:hover .wine-panel__bottle,
.wine-panel__link:focus-visible .wine-panel__bottle {
  transform: translateY(-4px) scale(1.02);
}

.wine-panel__link:hover .wine-panel__cue-rule,
.wine-panel__link:focus-visible .wine-panel__cue-rule {
  transform: scaleX(1);
}

.wine-panel__link:hover .wine-panel__cue-text,
.wine-panel__link:focus-visible .wine-panel__cue-text {
  opacity: 1;
  transform: none;
}

/* No pointer to discover it with, so the cue is simply always on. */
@media (hover: none) {
  .wine-panel__cue-text {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wine-panel__cue-rule {
    transform: scaleX(1);
    transition: none;
  }

  .wine-panel__bottle {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wine-panel__plate,
  .wine-panel__bottle,
  .wine-panel__cue-rule,
  .wine-panel__cue-text,
  .wine-panel__visual::after {
    transition: none;
  }

  .wine-panel__link:hover .wine-panel__bottle,
  .wine-panel__link:focus-visible .wine-panel__bottle {
    transform: none;
  }
}

/* iPad width with touch: same swipe carousel as phone, not the desktop grid. */
@media (min-width: 768px) and (pointer: coarse),
       (min-width: 768px) and (hover: none) {
  .section--wines {
    overflow: hidden;
  }

  .wine-carousel {
    width: 100%;
    max-width: none;
  }

  .wine-carousel__track {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none;
  }

  .wine-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    scroll-snap-align: center;
  }

  .wine-panel {
    --frame-h: clamp(14rem, calc(58svh - 11rem), 28rem);
  }

  .wine-panel__visual {
    max-width: min(100%, 21rem);
  }
}

@media (max-width: 767px) {
  .section--wines {
    overflow: hidden;
  }

  .section--wines .section__inner {
    width: calc(100% + 2 * clamp(1.25rem, 4vw, 3rem));
    margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem));
  }

  .section--wines .wines__intro {
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  .wine-carousel {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
  }

  .wine-carousel__track {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .wine-carousel__slide {
    --cue-band: 1.65rem;
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .wine-panel__visual {
    max-width: min(100%, 21rem);
  }

  .wine-panel__plate,
  .wine-panel__visual::after {
    display: none;
  }

  .wine-panel__bottle {
    max-height: calc(100% - var(--cue-band));
  }

  .wine-panel__cue {
    gap: 0;
  }

  .wine-panel__cue-text {
    display: none;
  }

  .wine-carousel__controls {
    width: 7.75rem;
    min-height: 1.75rem;
    margin-top: clamp(0.55rem, 1.4vh, 0.9rem);
    grid-template-columns: 1.75rem 1fr 1.75rem;
  }

  .wine-carousel__arrow {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }

  .wine-carousel__dot {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .section--wines {
    min-height: auto;
    align-items: flex-start;
    padding-block: calc(var(--nav-height) + 0.5rem) 0.85rem;
  }

  .wines__intro {
    margin-bottom: 0.5rem;
  }

  .wine-panel {
    --cue-band: 1.15rem;
    --frame-h: clamp(8.5rem, 56svh, 16rem);
  }

  .wine-panel__name {
    margin-top: 0.55rem;
    font-size: 1.2rem;
  }

  .wine-carousel__controls {
    margin-top: 0.35rem;
  }
}

/* Fine-pointer desktop only. iPad at 768px+ keeps the swipe carousel and
   in-flow “Our wines” heading so labels do not sit on the bottles. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .section--wines .section__inner {
    max-width: 90rem;
  }

  .wine-carousel {
    width: 100%;
    max-width: min(54rem, 92vw);
    margin-inline: auto;
  }

  .wine-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 5.5rem);
    overflow: visible;
    scroll-snap-type: none;
    transform: translateY(clamp(2.5rem, 5vh, 4rem));
  }

  .wine-carousel__slide {
    width: 100%;
    max-width: min(22rem, 100%);
    justify-self: center;
    scroll-snap-align: none;
  }

  .wine-carousel__controls {
    display: none;
  }

  .wine-carousel__clone {
    display: none;
  }
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (max-width: 1199px) {
  .wine-panel {
    --frame-h: clamp(14rem, calc(58svh - 11rem), 30rem);
  }

  .wine-carousel__track {
    transform: translateY(clamp(1rem, 2.5vh, 2rem));
  }
}

@media (min-width: 1200px) and (min-height: 720px) and (hover: hover) and (pointer: fine) {
  .wine-carousel {
    max-width: min(58rem, 72vw);
  }
}

/* ==========================================================================
   Image slots
   ========================================================================== */

.image-slot {
  position: relative;
  width: 100%;
  background-color: var(--bottle);
  border: 1px solid rgba(132, 102, 48, 0.35);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.25rem;
}

.image-slot--story {
  aspect-ratio: 4 / 5;
}

.image-slot__label {
  color: rgba(196, 162, 83, 0.45);
}

@media (min-width: 768px) {
}

/* ==========================================================================
   Where to Buy
   ========================================================================== */

.section--buy {
  background-color: var(--ink);
}

.section__inner--buy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .section__inner--buy {
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

.stockist-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(132, 102, 48, 0.25);
}

.stockist {
  border-bottom: 1px solid rgba(132, 102, 48, 0.18);
}

.stockist__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.35rem 0.35rem 1.35rem 0;
  text-decoration: none;
  color: inherit;
  transition: background 200ms var(--ease-soft), padding-left 240ms var(--ease-soft);
}

/* A row that leads somewhere gets a hover; the nationwide line does not,
   because there is no single place to send anyone. */
a.stockist__link:hover,
a.stockist__link:focus-visible,
.stockist[data-lit] a.stockist__link {
  background: rgba(184, 133, 50, 0.09);
  padding-left: 0.6rem;
}

a.stockist__link:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}

.stockist__link--plain { cursor: default; }
.stockist--wide .stockist__name { color: var(--cream-deep); }

.stockist__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  letter-spacing: 0.04em;
  color: var(--cream);
}

.stockist__city {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-deep);
  text-align: right;
}

/* ==========================================================================
   Footer (not pinned)
   ========================================================================== */

.site-footer {
  background-color: var(--cream);
  color: var(--ink);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem) 3rem;
  border-top: 1px solid rgba(132, 102, 48, 0.28);
  position: relative;
  z-index: 1;
}

.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.site-footer__logo {
  width: 5rem;
  height: auto;
  opacity: 0.9;
  /* Logo artwork is light-on-dark; invert for cream surfaces */
  filter: invert(1) brightness(0.18);
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.footer-link {
  position: relative;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 2px;
  margin-top: 0.5rem;
  transition: color 450ms var(--ease-soft);
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-drift);
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--ink);
}

.footer-link:hover::after,
.footer-link:focus-visible::after {
  transform: scaleX(1);
}

.site-footer__legal {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}

/* ==========================================================================
   Fallbacks: mobile, reduced motion, no JS
   ========================================================================== */

@media (max-width: 767px) {
  html.js-scroll-scenes .scene {
    height: auto;
  }

  html.js-scroll-scenes .scene__pin {
    position: relative;
    height: auto;
    min-height: 100svh;
    min-height: 100vh;
    overflow: visible;
  }

  html.js-scroll-scenes .scene__media-inner {
    transform: none;
    will-change: auto;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js-scroll-scenes .scene {
    height: auto;
  }

  html.js-scroll-scenes .scene__pin {
    position: relative;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  html.js-scroll-scenes .scene__media-inner {
    transform: none;
    will-change: auto;
  }

  .site-header {
    transition: none;
  }

  .nav-link::after,
  .footer-link::after {
    transition: none;
  }

  .nav-link,
  .footer-link {
    transition: none;
  }
}

/* ==========================================================================
   Wine detail page (wines/*.html)
   ========================================================================== */

/* No hero on this page, so the header needs its solid ground from the start. */
.page-wine .site-header {
  background-color: var(--ink);
  border-bottom-color: rgba(132, 102, 48, 0.25);
}

.wine {
  display: grid;
  grid-template-columns: 1fr;
}

/* The plate pins and the detail scrolls. Two independently scrolling panes
   were the thing to avoid: usability research on product pages finds
   split-scrolling raises navigation effort and causes confusion. This is the
   sticky form of the same layout, which the same research endorses. */
@media (min-width: 900px) {
  .wine {
    grid-template-columns: 0.85fr 1.15fr;
  }

  /* The grid ITEM stretches the full column so its background runs the whole
     page, and the sticky element lives inside it. Making the item itself
     sticky caps the sticky range at the item's own height, so the bottle
     scrolled away partway down the page. */
  .wine__plate-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
}

/* A flat panel behind a cut-out bottle reads as pasted on, whatever is behind
   it. What is missing is light and a shadow, so: a soft pool of warm light
   falling from above the bottle, and a vignette pulling the corners down. */
.wine__plate {
  background-color: var(--ink-soft);
  background-image:
    radial-gradient(ellipse 62% 48% at 50% 38%,
      rgba(184, 133, 50, 0.11) 0%,
      rgba(184, 133, 50, 0.04) 45%,
      rgba(184, 133, 50, 0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 45%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.42) 100%);
  border-right: 1px solid rgba(132, 102, 48, 0.22);
}

.wine__plate-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem);
}

.wine__bottle {
  width: auto;
  height: auto;
  max-height: min(30rem, 62vh);
  max-width: 70%;
  object-fit: contain;
  /* Follows the bottle's own alpha, so the shadow is bottle-shaped rather than
     a rectangle. Two passes: a tight one to seat it, a long soft one to throw
     it onto the ground. */
  filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55))
    drop-shadow(0 26px 34px rgba(0, 0, 0, 0.45));
}

@media (max-width: 899px) {
  .wine__plate-inner {
    display: block;
    padding: var(--nav-height) 0 0;
  }

  .wine__bottle {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter: none;
  }
}

@media (min-width: 900px) {
  .wine__bottle {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none;
  }

  .wine__plate-inner { padding: 0; }
}

.wine__detail {
  background-color: var(--cream);
  color: var(--ink);
  padding: calc(var(--nav-height) + clamp(2rem, 5vh, 3.5rem))
           clamp(1.5rem, 5vw, 4.5rem)
           clamp(4rem, 10vh, 7rem);
}

/* The panel fills its column so the cream runs edge to edge; the readable
   measure is capped on the inner wrapper instead. Capping the panel itself
   left the body's dark ground showing down the right side. */
@media (min-width: 900px) {
  .wine__detail-inner {
    max-width: 40rem;
  }
}

.wine__detail .eyebrow { color: var(--ink-soft); }
.wine__detail .display { color: var(--ink); }


.wine__lead {
  margin-top: 1.75rem;
  max-width: 40ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.wine__provisional {
  max-width: 34rem;
  margin-top: 1rem;
  color: var(--bronze);
  font-size: .58rem;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.wine__block {
  margin-top: clamp(2.75rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(132, 102, 48, 0.3);
}

.wine__h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.5rem;
}

/* Tasting notes read as label-above-passage; the tech sheet reads as a table.
   Two different shapes because they are two different kinds of information. */
.wine__notes {
  display: grid;
  gap: clamp(1.25rem, 2.5vh, 1.75rem);
}

.wine__note dt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.45rem;
}

.wine__note dd {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}

.wine__spec { display: grid; }

.wine__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(132, 102, 48, 0.18);
}

.wine__row:first-child { border-top: none; padding-top: 0; }

@media (min-width: 560px) {
  .wine__row {
    grid-template-columns: 11rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}

.wine__row dt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze);
}

.wine__row dd {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.wine__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Unfilled values, marked so they cannot be mistaken for finished copy. */
.tbc {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Full-strength bronze: at 75% alpha these sat at 4.26:1. They still read
     as unfinished from the tiny uppercase setting and the dotted underline. */
  color: var(--bronze) !important;
  border-bottom: 1px dotted rgba(132, 102, 48, 0.5);
  padding-bottom: 1px;
}

.wine__back {
  margin-top: clamp(2.75rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid rgba(132, 102, 48, 0.3);
}

.wine__detail .footer-link { color: var(--ink-soft); }
.wine__detail .footer-link::after { background: var(--bronze); }

@media (max-width: 999px) {
  .section--wines {
    align-items: flex-start;
  }

  .section--wines,
  html.js-scroll-scenes .section.section--wines {
    padding-top: var(--head-top);
  }

}

/* Buy is anchored at EVERY width, not just narrow ones. Its padding came from
   the .section shorthand above 1000px, which is vw-based, so the heading slid
   between 69px and 88px as the window widened while the other three sat at a
   fixed 117. */
.section--buy,
html.js-scroll-scenes .section.section--buy {
  padding-top: var(--head-top);
}

/* Below 1000px the heading is in normal flow rather than absolutely anchored,
   so pinning it to the top left the card sitting straight underneath and a
   dead band of about 195px at the foot of the section. The inner column now
   fills the section and the card takes whatever is left, centred inside it. */
@media (max-width: 999px) {
  .section--wines {
    align-items: stretch;
  }

  .section--wines .section__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .wines__intro {
    margin-bottom: min(2.5rem, 3vh);
    flex: none;
  }

  .wine-carousel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   Where to buy / the map
   ==========================================================================
   Drawn, not tiled. The Story section already renders the world as gold
   hairlines on ink, and a raster basemap dropped beside it reads as a
   different product entirely. tools/gen_map.py projects the same Natural
   Earth source the globe uses, so both drawings come from one hand, and the
   rows still link out to Google Maps for the part a picture cannot do:
   directions. That also means no API key, no third-party script, and no
   tile requests leaving the page. */

.buy__layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .buy__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.map {
  margin: 0;
  width: 100%;
}

.map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* the place names are svg text and would otherwise drag-select */
  -webkit-user-select: none;
  user-select: none;
}

/* Neighbours are context and stay quiet: they are there so the country reads
   as sitting on the Caspian rather than floating. */
.mp__near {
  fill: none;
  stroke: var(--bronze);
  stroke-width: 1.1;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.mp__land {
  fill: rgba(184, 133, 50, 0.06);
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mp__mark {
  transition: opacity 260ms var(--ease-soft);
  cursor: default;
}

/* The halo is the pointer target. It is 24 units on a 1000 unit viewBox, so
   about 34px across on a 700px-wide map: past the WCAG 2.5.8 floor of 24. */
.mp__halo { pointer-events: all; }
.mp__dot, .mp__ring, .mp__name { pointer-events: none; }
.mp__dot  { fill: var(--gold); }
.mp__halo { fill: var(--gold); opacity: 0.08; transition: opacity 260ms var(--ease-soft); }

.mp__ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.85;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 320ms var(--ease-drift);
}

.mp__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 1px;
  fill: var(--cream);
  text-rendering: geometricPrecision;
}

/* Lit when its stockist is hovered or focused, and the other way round. */
.mp__mark[data-lit] .mp__halo { opacity: 0.2; }
.mp__mark[data-lit] .mp__ring { transform: scale(1.35); }

.map[data-any] .mp__mark:not([data-lit]) { opacity: 0.4; }

/* ==========================================================================
   Charmat / the film
   ==========================================================================
   Replaces a 380vh pinned scene that swapped captions as you scrolled. That
   took the scroll away from the reader for four screens; this takes none.

   The two layouts are genuinely different problems, not one design scaled.
   A 16:9 source under object-fit: cover shows 100% of the frame at 1920x1080
   and 90% at 1440x900, so filling the viewport on a wide screen costs almost
   nothing. At 390x844 the same crop shows 26%: three quarters of the picture,
   including whatever the shot was composed around, is thrown away. So the
   phone gets the whole 16:9 frame in flow and the words above and below it. */

.section--charmat {
  position: relative;
  background-color: var(--ink);
  color: var(--cream);
  overflow: hidden;
}

.charmat__header { position: relative; z-index: 2; }

.charmat__film {
  position: relative;
  margin: clamp(1.75rem, 5vw, 2.75rem) 0 clamp(1.5rem, 4vw, 2.25rem);
  /* full-bleed out of the section's side padding: the film is the section's
     subject, and a 16:9 frame inset by 80px on a phone is a postage stamp */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.charmat__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0D0B08;
}

/* Only needed once the words sit ON the film, which is the wide layout. */
.charmat__scrim { display: none; }

.charmat__steps {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: charmat;
}

.charmat__step {
  counter-increment: charmat;
  border-top: 1px solid rgba(184, 133, 50, 0.22);
  padding: 0.95rem 0;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.6;
  color: var(--cream-deep);
}

/* The five steps are a real sequence, so they are numbered. */
.charmat__step::before {
  content: counter(charmat, decimal-leading-zero);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .section--charmat {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-content: space-between;
  }

  /* The film stops being a block in flow and becomes the ground. */
  .charmat__film {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    margin: 0;
    transform: none;
  }

  .charmat__video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Dark at top and bottom where the words are, clear through the middle so
     the film is not veiled where there is nothing to read. */
  .charmat__scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(20, 16, 11, 0.78) 0%,
      rgba(20, 16, 11, 0.30) 26%,
      rgba(20, 16, 11, 0.10) 48%,
      rgba(20, 16, 11, 0.52) 78%,
      rgba(20, 16, 11, 0.86) 100%);
  }

  .charmat__steps {
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: start;
  }

  .charmat__step {
    border-top: 1px solid rgba(184, 133, 50, 0.45);
    padding: 0.85rem 0 0;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    font-size: clamp(0.82rem, 0.95vw, 0.92rem);
    line-height: 1.55;
    color: var(--cream);
    text-shadow: 0 1px 12px rgba(20, 16, 11, 0.75);
  }
}

/* No film, or reduced motion with the poster showing: the section must not
   collapse to a black band with text floating in it. */
@media (prefers-reduced-motion: reduce) {
  .charmat__video { transition: none; }
}

/* Charmat is anchored at EVERY width now, like Buy. It sat in the narrow-width
   block above, which was correct while the section was a pinned scene carrying
   its own --head-top on the pin. The full-frame film has no pin, so above
   999px the heading fell back to the vw-based .section padding and landed at
   80px against every other section's 117. */
.section--charmat,
html.js-scroll-scenes .section.section--charmat {
  padding-top: var(--head-top);
}

/* Story is stacked below 1360px rather than corner-anchored, and its heading
   needs the same --head-top as the rest. The second selector is not redundant:
   `html.js-scroll-scenes .section` is (0,2,1) and sets the padding shorthand,
   so a bare `.section--story` at (0,1,0) loses to it wherever effects are on.
   This also overrides the justify-content: center set in the stacked-layout
   block further up, which would otherwise float the heading down the section. */
@media (max-width: 1359px) {
  .section--story,
  html.js-scroll-scenes .section.section--story {
    justify-content: flex-start;
    padding-top: var(--head-top);
  }
}

/* ==========================================================================
   The method / Italy 1895
   ==========================================================================
   Dom Perignon's editorial pages run on three layouts and nothing else:
   a full-viewport plate with the title over it, a block with the heading
   anchored far left and the body in two narrow columns beside it with the
   pictures staggered underneath, and a single centred line alone on screen.
   They alternate, and the full-viewport plates act as breathers between the
   text. This page follows that grammar. The globe is the opener, the tank
   drawing is the staggered plate, and the three-line coda is the centred one.

   Measured off domperignon.com at 1440: full plate 1440x900, big picture
   672px (47vw), inset 385px (27vw), heading column 328px (23vw), centred
   text 557px (39vw). Their body runs at 12px; ours stays on the site's own
   scale, because 12px would undo the readability work. */

/* The opener owns the story layout while the section stays in normal flow. */
.section--method { display: block; }

.method__opener {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* Full-screen house chapter. The supplied photograph already contains the
   Ganja Sharab mark, so the live copy begins directly beneath it. */
.house-slide {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin-left: 0;
  padding: 0;
  color: var(--cream);
  background-color: var(--ink);
}

.house-slide__media {
  position: absolute;
  inset: 0;
  padding: 56svh clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4.5rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.house-slide__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.house-slide__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 6, 3, .02) 32%, rgba(8, 6, 3, .2) 55%, rgba(8, 6, 3, .58) 100%);
}

.house-slide__copy {
  position: relative;
  z-index: 2;
  width: min(100%, 35rem);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.house-slide__copy > p {
  margin: 0 auto;
  color: var(--cream);
  font-size: clamp(.83rem, 1vw, .96rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.house-slide__copy > p + p {
  max-width: 29rem;
  margin-top: .8rem;
}

@media (max-width: 899px) {
  .house-slide__media {
    padding-top: 54svh;
  }
}

@media (max-width: 767px) {
  /* The story used to contain a second viewport-height child inside an
     already full-height section. On phones that produced a large empty tail.
     The content now determines its own height, with the outer section keeping
     only the single-screen minimum. */
  .section--story .method__opener {
    min-height: 0;
  }
}

.method__block {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(5rem, 14vh, 11rem);
}

.method__head { max-width: 22rem; }

.method__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 0.4rem 0 0;
  text-wrap: balance;
}

.method__cols { max-width: 46rem; }

.method__cols p {
  margin: 0 0 1.1rem;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.7;
  color: var(--cream-deep);
}

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

.method__plate {
  margin: 0;
  width: 100%;
}

.plate {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.pl__line,
.pl__rule,
.pl__gauge {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pl__faint { opacity: 0.4; }
.pl__rule { stroke: var(--bronze); stroke-width: 1; }
.pl__bead { fill: var(--gold); opacity: 0.75; }

.pl__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 1px;
  fill: var(--cream);
  text-rendering: geometricPrecision;
}

.pl__year {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2.4px;
  fill: var(--gold);
  text-rendering: geometricPrecision;
}

/* Mode C. One line, centred, with room around it and nothing competing. */
.method__quote {
  margin: 0 auto;
  padding: clamp(6rem, 18vh, 14rem) 0 clamp(3rem, 8vh, 6rem);
  max-width: 39rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--cream);
}

@media (min-width: 900px) {
  /* Heading far left in its own narrow column, body in two columns beside it,
     the drawing staggered underneath and pushed right. Nothing lines up on a
     shared edge, which is the whole point of the pattern. */
  .method__block {
    grid-template-columns: 23vw 1fr;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .method__head { grid-column: 1; }

  .method__cols {
    grid-column: 2;
    columns: 2;
    column-gap: clamp(1.75rem, 3vw, 2.75rem);
  }

  .method__cols p { break-inside: avoid; }

  .method__plate {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(47vw, 42rem);
    margin-top: clamp(4rem, 12vh, 10rem);
    margin-right: clamp(0rem, 4vw, 4rem);
  }
}

@media (min-width: 1360px) {
  /* At this width .story__lead and .story__coda are absolute. They now anchor
     to the opener rather than the section, so the coda stays pinned to the
     foot of the globe screen instead of falling to the bottom of the whole
     page. Dropping the section's top padding keeps the heading at --head-top
     measured from the section top, exactly as the other sections are. */
  .section--method,
html.js-scroll-scenes .section.section--method {
    padding-top: 0;
  }

  .method__opener {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-bottom: min(4rem, 5vh);
  }
}

/* Final availability/footer layer: placed last so it supersedes legacy passes. */
.section--buy { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; border-top: 1px solid rgba(184, 133, 50, 0.18); }
.section__inner--buy { gap: clamp(2.25rem, 6vh, 5.5rem); }
.buy__layout { gap: clamp(2.5rem, 7vw, 8rem); }
@media (min-width: 900px) { .buy__layout { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.75fr); } }
.map { position: relative; }
.map::before { content: "AZERBAIJAN"; position: absolute; top: -1.5rem; left: 0; font-size: 0.58rem; letter-spacing: 0.3em; color: var(--gold); }
.site-footer { background-color: #0d0b08; color: var(--cream); padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) 1.5rem; border-top: 1px solid rgba(184, 133, 50, 0.35); }
.site-footer__inner { display: grid; gap: 2.5rem; }
.site-footer__masthead { display: flex; align-items: center; gap: 1rem; }
.site-footer__logo { width: 3.75rem; filter: none; }
.site-footer__name { font-family: var(--font-display); font-size: clamp(2.35rem, 6vw, 5rem); line-height: 0.8; letter-spacing: 0.14em; color: var(--cream); }
.site-footer__body { display: grid; gap: 2rem; }
.site-footer__tagline { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; letter-spacing: 0.02em; color: var(--cream-deep); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.footer-nav a { color: var(--cream); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: color 180ms var(--ease-soft); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--gold); }
.footer-nav a:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
.site-footer__legal { color: rgba(228, 215, 186, 0.58); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(228, 215, 186, 0.18); }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 10vw, 10rem); } .site-footer__masthead, .site-footer__legal { grid-column: 1 / -1; } .site-footer__body { grid-column: 2; } }

/* The House is one complete chapter. The essential proposition stays visible;
   the globe's two popups now carry only the supporting detail. */
.story__summary {
  max-width: 21rem;
  margin: 1.35rem 0 0;
  color: var(--cream-deep);
  font-size: clamp(0.82rem, 1.05vw, 0.95rem);
  line-height: 1.72;
  text-wrap: pretty;
}

@media (min-width: 1360px) {
  .story__lead { max-width: 23rem; }
}

@media (max-width: 1359px) {
  .story__lead { width: min(100%, 32rem); margin: 0 auto 1.5rem; }
  .story__summary { max-width: 28rem; }
}

.buy__concierge .stockist-list { margin-top: 1.5rem; }
.buy__concierge .stockist__link { padding-top: 1rem; padding-bottom: 1rem; }
.buy__concierge .stockist__name { font-size: clamp(1.05rem, 1.6vw, 1.28rem); }
.buy__concierge .stockist__city { font-size: 0.61rem; }
.buy__note a { color: inherit; text-underline-offset: 0.2em; }

/* Live stockist geography belongs to Google Maps. The editorial shell stays
   native to Taliano; the map itself is real, searchable and changes with the
   venue list. */
.map::before { content: "Baku · selected venues"; z-index: 1; }
.map__svg { display: none; }
/* Branded Baku locator. Google Maps is intentionally kept as the outgoing
   directions service, rather than becoming the page's visual centre. */
.map::before { content: "Baku · selected venues"; }
.locator-map { display: block; width: 100%; height: auto; min-height: clamp(22rem, 38vw, 32rem); border: 1px solid rgba(184, 133, 50, 0.42); background: #19150e; }
.locator-map__water { fill: #0c0b09; }
.locator-map__coast { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.locator-map__road { fill: none; stroke: rgba(228, 215, 186, 0.24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.locator-map__road--main { stroke: rgba(184, 133, 50, 0.7); stroke-width: 1.2; }
.locator-map__district { fill: var(--cream-deep); font-family: var(--font-body); font-size: 10px; letter-spacing: 2px; }
.locator-map__sea { fill: rgba(228, 215, 186, 0.45); font-family: var(--font-display); font-size: 19px; font-style: italic; letter-spacing: 4px; }
.locator-map__pin { cursor: pointer; outline: none; }
.locator-map__pin circle { fill: var(--ink); stroke: var(--gold); stroke-width: 1.4; transition: fill 180ms var(--ease-soft), transform 220ms var(--ease-drift); transform-box: fill-box; transform-origin: center; }
.locator-map__pin text { fill: var(--cream); font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .5px; text-anchor: middle; pointer-events: none; }
.locator-map__pin:hover circle, .locator-map__pin:focus circle, .locator-map__pin[data-lit] circle { fill: var(--gold); transform: scale(1.15); }
.locator-map__pin:hover text, .locator-map__pin:focus text, .locator-map__pin[data-lit] text { fill: var(--ink); }
.locator-map__pin:focus-visible circle { stroke: var(--cream); stroke-width: 2; }
@media (max-width: 767px) { .locator-map { min-height: 22rem; } .locator-map__district { font-size: 9px; } }

/* Venue finder: a functional, list-first locator. A map appears only when a
   visitor explicitly asks to see a venue, keeping the initial view clear. */
.buy__layout { grid-template-columns: minmax(0, 1fr) !important; max-width: 48rem; margin: 0 auto; }
.map { display: none; }
.buy__concierge { max-width: none; }
.stockist-search { display:flex; align-items:center; gap:1rem; margin-top:1.75rem; border-bottom:1px solid rgba(228,215,186,.42); color:var(--gold); }
.stockist-search input { width:100%; min-width:0; padding:.75rem 0; border:0; outline:0; color:var(--cream); background:transparent; font:inherit; font-size:.78rem; }
.stockist-search input::placeholder { color:rgba(228,215,186,.65); }
.stockist-list { margin-top:1.1rem !important; }
.stockist { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center; padding:1.1rem 0; }
.stockist[hidden] { display:none; }
.stockist__name, .stockist__address { display:block; }
.stockist__name { font-size:clamp(1.08rem,1.7vw,1.3rem) !important; }
.stockist__address { margin-top:.18rem; color:var(--cream-deep); font-size:.67rem; letter-spacing:.07em; }
.stockist__actions { display:flex; align-items:center; gap:.75rem; }
.stockist__show, .stockist__directions { border:0; padding:0; color:var(--cream); background:transparent; font:inherit; font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; cursor:pointer; }
.stockist__show { border-bottom:1px solid var(--gold); padding-bottom:.18rem; }
.stockist__directions { color:var(--gold); }
.stockist__show:hover, .stockist__show:focus-visible, .stockist__directions:hover, .stockist__directions:focus-visible { color:var(--gold); outline:none; }
.stockist[data-open] { background:rgba(184,133,50,.08); }
.locator-view { margin-top:1.5rem; border:1px solid rgba(184,133,50,.5); background:#0d0b08; }
.locator-view[hidden] { display:none; }
.locator-view__top { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid rgba(228,215,186,.2); }
.locator-view__top p, .locator-view__close { margin:0; color:var(--cream); font:inherit; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; }
.locator-view__close { border:0; background:transparent; cursor:pointer; color:var(--cream-deep); }
.locator-view__map { display:block; width:100%; height:clamp(19rem,38vw,29rem); border:0; filter:grayscale(1) contrast(1.05) brightness(.82); }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:600px) { .stockist { grid-template-columns:1fr; gap:.65rem; } .stockist__actions { justify-content:space-between; } }

/* The finder is a real city map, not an illustration of one. Every current
   venue is visible at once; the numbered markers deliberately echo the quiet
   brass detailing used elsewhere on the site. */
.store-map {
  width: 100%;
  min-height: clamp(30rem, 55vw, 46rem);
  overflow: hidden;
  border: 1px solid rgba(184, 133, 50, 0.48);
  background: #15110c;
}

/* Leaflet's own stylesheet positions each 256px tile absolutely. These rules
   are intentionally repeated locally: if a CDN stylesheet is delayed, the
   map remains a continuous map instead of becoming a column of loose tiles. */
.store-map.leaflet-container { position: relative; z-index: 0; isolation: isolate; overflow: hidden; outline: 0; }
.store-map .leaflet-pane,
.store-map .leaflet-tile,
.store-map .leaflet-marker-icon,
.store-map .leaflet-marker-shadow { position: absolute; left: 0; top: 0; }
.store-map .leaflet-pane { z-index: 400; }
.store-map .leaflet-tile-pane { z-index: 200; }
.store-map .leaflet-marker-pane { z-index: 600; }
.store-map .leaflet-popup-pane { z-index: 700; }
.store-map .leaflet-tile { width: 256px !important; height: 256px !important; max-width: none; max-height: none; }
.store-map .leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.store-map .leaflet-top,
.store-map .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.store-map .leaflet-top { top: 0; }
.store-map .leaflet-right { right: 0; }
.store-map .leaflet-bottom { bottom: 0; }
.store-map .leaflet-left { left: 0; }

.store-map .leaflet-tile-pane { filter: grayscale(1) sepia(.14) contrast(1.08) brightness(.72); }
.store-map .leaflet-control-zoom { border: 1px solid rgba(184, 133, 50, .64); border-radius: 0; box-shadow: none; }
.store-map .leaflet-control-zoom a {
  width: 2.4rem;
  height: 2.4rem;
  border-bottom-color: rgba(184, 133, 50, .4);
  color: var(--cream);
  background: rgba(13, 11, 8, .94);
  font: 1.35rem/2.24rem var(--font-body);
}
.store-map .leaflet-control-zoom a:hover,
.store-map .leaflet-control-zoom a:focus-visible { color: var(--ink); background: var(--gold); }
.store-map .leaflet-control-attribution {
  padding: .18rem .32rem;
  color: rgba(228, 215, 186, .7);
  background: rgba(13, 11, 8, .78);
  font: .52rem/1.3 var(--font-body);
}
.store-map .leaflet-control-attribution a { color: var(--cream); }
.taliano-map-pin-wrap { border: 0; background: transparent; }
.taliano-map-pin {
  display: block;
  width: 32px;
  height: 44px;
  fill: #000;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .32));
  transition: transform 180ms var(--ease-soft), filter 180ms var(--ease-soft);
}
.taliano-map-pin:hover { transform: translateY(-2px); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .45)); }
.store-map .leaflet-popup-content-wrapper { border: 1px solid rgba(184, 133, 50, .58); border-radius: 0; color: var(--cream); background: var(--ink); box-shadow: 0 14px 38px rgba(0, 0, 0, .36); }
.store-map .leaflet-popup-tip { background: var(--ink); }
.store-map .leaflet-popup-content { margin: 1rem 1.15rem 1.05rem; }
.store-map .leaflet-popup-close-button { top: .38rem; right: .4rem; color: var(--cream) !important; }
.taliano-map-popup { display: grid; gap: .42rem; min-width: 11rem; }
.taliano-map-popup strong { padding-right: 1rem; font: 400 1.12rem/1.12 var(--font-display); letter-spacing: .02em; }
.taliano-map-popup span { color: var(--cream-deep); font-size: .63rem; line-height: 1.45; letter-spacing: .06em; }
.taliano-map-popup a { margin-top: .35rem; color: var(--gold); font-size: .59rem; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.taliano-map-popup a:hover, .taliano-map-popup a:focus-visible { color: var(--cream); }
.buy__map-note { margin: 1.15rem 0 0; color: var(--cream-deep); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; }

/* A text list is retained only for no-script or map-network failure. */
html.has-live-store-map .stockist-search,
html.has-live-store-map .stockist-list,
html.has-live-store-map .locator-view,
html.has-live-store-map .buy__cta,
html.has-live-store-map .buy__concierge { display: none; }

html.has-live-store-map .buy__layout {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (max-width: 700px) {
  .store-map { min-height: 29rem; }
  .store-map .leaflet-control-attribution { display: none; }
}

/* Desktop is a single composed locator screen: the heading supplies the
   editorial counterweight and the map gets a generous, landscape proportion.
   It must never behave like an over-tall phone panel. */
@media (min-width: 900px) {
  .section--buy,
  html.js-scroll-scenes .section.section--buy {
    height: 100svh;
    min-height: 0;
    padding-bottom: clamp(2rem, 5vh, 4rem);
  }

  .section__inner--buy {
    display: block;
  }

  .buy__header {
    position: absolute;
    top: var(--head-top);
    left: clamp(1.25rem, 4vw, 3rem);
    z-index: 2;
  }

  html.has-live-store-map .buy__layout {
    width: min(100%, 52rem);
    margin: 0 auto;
  }

  .store-map {
    height: min(60svh, 34rem);
    min-height: 0;
  }

  .buy__concierge { padding-top: .15rem; }
  .buy__map-note { margin-top: .8rem; }
}

/* Mobile is deliberately not a scaled-down desktop locator. The heading is
   read first, then the map becomes the full-width object below it; its height
   follows the available screen rather than inheriting the desktop panel. */
.mobile-map-tools,
.mobile-map-caption { display: none; }

@media (max-width: 899px) {
  .section--buy,
  html.js-scroll-scenes .section.section--buy {
    display: block;
    min-height: 100svh;
    padding-top: var(--head-top);
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
  }

  .section__inner--buy { display: block; }
  .buy__header { margin-bottom: clamp(1.75rem, 5vh, 2.75rem); }

  html.has-live-store-map .buy__layout {
    position: relative;
    width: calc(100% + (2 * clamp(1.25rem, 4vw, 3rem)));
    max-width: none;
    margin-left: calc(-1 * clamp(1.25rem, 4vw, 3rem));
    margin-right: calc(-1 * clamp(1.25rem, 4vw, 3rem));
  }

  .store-map {
    height: min(58svh, 32rem);
    min-height: 0;
    border-right: 0;
    border-left: 0;
  }

  .finder-panel { display: none; }

  /* Mobile finder A: the map is the page's main object; controls and the
     legend float over it instead of becoming a second list below it. */
  .mobile-map-tools {
    position: absolute;
    z-index: 1100;
    top: 1rem;
    right: 1rem;
    display: flex;
    overflow: hidden;
    border: 1px solid rgba(243, 236, 218, .35);
    background: rgba(20, 16, 11, .9);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
  }
  .mobile-map-tools .finder-filter {
    min-height: 2.1rem;
    padding: 0 .68rem;
    border: 0;
    color: var(--cream-deep);
    background: transparent;
    font: 500 .5rem/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color 420ms var(--ease-soft), background-color 520ms var(--ease-drift), transform 420ms var(--ease-soft);
  }
  .mobile-map-tools .finder-filter.is-active { color: var(--ink); background: var(--cream); transform: translateY(0); }
  .mobile-map-tools .finder-filter:not(.is-active):active { transform: scale(.94); }
  .mobile-map-caption {
    position: absolute;
    z-index: 1100;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem .9rem;
    padding: .8rem .9rem;
    color: var(--cream-deep);
    background: rgba(20, 16, 11, .92);
    font-size: .51rem;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .mobile-map-caption p { width: 100%; margin: 0 0 .05rem; color: var(--cream); font: 500 1.2rem/1 var(--font-display); letter-spacing: .02em; text-transform: none; }
  .mobile-map-caption span { display: inline-flex; align-items: center; }
  .mobile-map-key { display: inline-block; width: .42rem; height: .42rem; margin-right: .3rem; border-radius: 50%; }
  .mobile-map-key--venue { background: var(--gold); }
  .mobile-map-key--store { background: #000; box-shadow: 0 0 0 1px var(--cream-deep); }
}

/* Desktop locator: one dark control panel (30%) and one live map (70%).
   The panel is deliberately spare; filters change the map itself instead of
   recreating a competing list of locations. */
@media (min-width: 900px) {
  .section--buy,
  html.js-scroll-scenes .section.section--buy {
    display: block;
    height: 100svh;
    min-height: 0;
    padding: 0;
  }

  .section__inner--buy {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .section--buy > .section__inner--buy > .buy__header { display: none; }

  html.has-live-store-map .buy__layout {
    display: grid;
    grid-template-columns: 30fr 70fr !important;
    align-items: stretch;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding-top: var(--nav-height);
    gap: 0;
    background: var(--ink);
  }

  .finder-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(2.25rem, 5vh, 4.5rem) clamp(2rem, 3.5vw, 5rem);
    border-right: 1px solid rgba(184, 133, 50, .35);
    background: var(--ink);
  }

  .finder-panel__title { margin-top: .55rem; font-size: clamp(2.15rem, 3.2vw, 3.65rem); line-height: .95; }
  .finder-panel__filters { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(3.5rem, 10vh, 7rem); border-bottom: 1px solid rgba(228, 215, 186, .2); }
  .finder-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.65rem;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--cream-deep);
    background: transparent;
    cursor: pointer;
    font: 500 .57rem/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .finder-filter:hover, .finder-filter:focus-visible { color: var(--cream); outline: none; }
  .finder-filter.is-active { border-bottom-color: var(--gold); color: var(--cream); }
  .finder-filter__mark { display: block; width: .46rem; height: .46rem; border-radius: 50%; }
  .finder-filter__mark--venue { background: var(--gold); }
  .finder-filter__mark--store { background: #000; box-shadow: 0 0 0 1px var(--cream-deep); }
  .finder-panel__status { max-width: 17rem; margin-top: 1.4rem; color: var(--cream-deep); font-size: .68rem; line-height: 1.6; letter-spacing: .03em; }

  .finder-panel__results {
    min-height: 0;
    margin-top: 1.1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(184, 133, 50, .55) transparent;
  }

  .finder-panel__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .finder-location {
    border-top: 1px solid rgba(228, 215, 186, .16);
    transition: background-color 360ms var(--ease-soft);
  }

  .finder-location:last-child {
    border-bottom: 1px solid rgba(228, 215, 186, .16);
  }

  .finder-location[hidden] {
    display: none;
  }

  .finder-location__button {
    width: 100%;
    min-height: 4.65rem;
    padding: .85rem .15rem;
    display: grid;
    grid-template-columns: .55rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: .8rem;
    border: 0;
    color: var(--cream);
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .finder-location__button:hover,
  .finder-location__button:focus-visible {
    color: var(--gold);
    outline: none;
  }

  .finder-location__button:focus-visible {
    box-shadow: inset 2px 0 var(--gold);
  }

  .finder-location[data-open] {
    background: rgba(184, 133, 50, .08);
  }

  .finder-location__mark {
    width: .48rem;
    height: .48rem;
    display: block;
    border-radius: 50%;
  }

  .finder-location__mark--venue { background: var(--gold); }
  .finder-location__mark--store { background: #000; box-shadow: 0 0 0 1px var(--cream-deep); }
  .finder-location__copy { min-width: 0; display: grid; gap: .2rem; }
  .finder-location__copy strong { font: 500 1.12rem/1.05 var(--font-display); letter-spacing: .02em; }
  .finder-location__copy span { overflow: hidden; color: var(--cream-deep); font-size: .56rem; line-height: 1.45; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
  .finder-location__arrow { color: var(--gold); font-size: .85rem; transition: transform 360ms var(--ease-drift); }
  .finder-location__button:hover .finder-location__arrow,
  .finder-location__button:focus-visible .finder-location__arrow { transform: translateX(.2rem); }

  .store-map {
    grid-column: 2;
    align-self: center;
    justify-self: center;
    width: min(calc(100% - clamp(5rem, 9vw, 12rem)), 64rem);
    height: min(72svh, 42rem);
    min-height: 0;
    border: 1px solid rgba(184, 133, 50, .48);
  }
}

.taliano-map-pin--venue { fill: var(--gold); }
.taliano-map-pin--store { fill: #000; }

/* Selected header B: a centred wordmark with two quiet utility actions. */
.site-header { background: transparent; border-bottom-color: transparent; }
.site-nav {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.lang-switch {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
body:not(.page-home) .lang-switch { display: none; }
.lang-switch summary,
.lang-switch__link {
  color: var(--cream-deep);
  font: 500 .6rem/1 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.lang-switch summary { cursor: pointer; list-style: none; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after {
  content: "+";
  display: inline-block;
  margin-left: .55rem;
  color: var(--gold);
  font-size: .85rem;
  line-height: .5;
}
.lang-switch[open] summary::after { content: "−"; }
.lang-switch__list {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 0;
  display: grid;
  gap: .55rem;
  min-width: 11rem;
  margin: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  list-style: none;
  border: 1px solid rgba(184, 133, 50, .35);
  background: var(--ink);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
  transition: background 600ms ease, border-color 600ms ease;
}
.site-header:not(.is-scrolled) .lang-switch__list {
  background: transparent;
  border-color: transparent;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
}
.site-header:not(.is-scrolled) .lang-switch summary,
.site-header:not(.is-scrolled) .lang-switch__link { text-shadow: inherit; }
.lang-switch__link { text-decoration: none; }
.lang-switch__link[aria-current="true"] { color: var(--gold); }
.nav-menu__lang { display: none; margin-top: 1.25rem; }
.nav-menu__lang-list {
  display: grid;
  gap: .55rem;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}
.nav-menu__lang-link {
  color: var(--cream-deep);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-menu__lang-link[aria-current="true"] { color: var(--gold); }
.page-home .nav-menu__lang { display: none; }
@media (max-width: 767px) {
  .lang-switch { display: none !important; }
  .page-home .nav-menu__lang { display: block; }
}
@media (min-width: 768px) {
  body:not(.page-home) .nav-menu__lang { display: block; }
}
.nav-menu {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.nav-menu summary,
.nav-back {
  color: var(--cream-deep);
  font: 500 .6rem/1 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.nav-menu summary { cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::after { content: "+"; display: inline-block; margin-left: .55rem; color: var(--gold); font-size: .85rem; line-height: .5; }
.nav-menu[open] summary::after { content: "−"; }
.nav-menu__icon { display: none; }
.nav-menu .nav-list {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: calc(-1 * clamp(1.25rem, 4vw, 3rem));
  display: grid;
  gap: .85rem;
  min-width: 12rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem) 1.25rem;
  border: 1px solid rgba(184, 133, 50, .35);
  background: var(--ink);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
}
.nav-menu .nav-link { display: inline-block; font-size: .62rem; }
.nav-wordmark {
  grid-column: 2;
  grid-row: 1;
  color: var(--cream);
  font: 500 clamp(1.5rem, 2.2vw, 2.2rem)/1 var(--font-display);
  letter-spacing: .12em;
}
.nav-back {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  color: var(--cream);
}
.nav-back:hover, .nav-back:focus-visible, .nav-menu summary:hover, .nav-menu summary:focus-visible { color: var(--gold); outline: none; }

/* Selected footer I: cream paper, a house signature and only the links that
   advance the visit. */
.site-footer--signature {
  padding: clamp(3rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 3rem) 1.35rem;
  color: var(--ink);
  background: var(--cream);
  border-top: 0;
}
.site-footer--signature .site-footer__inner { display: block; max-width: none; }
.site-footer--signature .site-footer__top {
  display: grid;
  gap: 2rem;
  padding-bottom: clamp(3.5rem, 8vw, 8rem);
  border-bottom: 1px solid var(--ink);
}
.site-footer--signature .site-footer__name {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(4.6rem, 13vw, 13rem)/.65 var(--font-display);
  letter-spacing: .1em;
}
.site-footer--signature .site-footer__tagline {
  max-width: 21rem;
  margin: 0;
  color: var(--ink);
  font: 500 clamp(1.4rem, 2.3vw, 2.1rem)/1.12 var(--font-display);
}
.site-footer--signature .footer-nav { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; }
.site-footer--signature .footer-nav a { color: var(--ink); font-size: .6rem; }
.site-footer--signature .footer-nav a:hover, .site-footer--signature .footer-nav a:focus-visible { color: #71552a; }
.site-footer--signature .site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  color: rgba(20, 16, 11, .72);
  border-top: 0;
  font-size: .57rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
@media (min-width: 800px) {
  .site-footer--signature .site-footer__top { grid-template-columns: 1.45fr .55fr .72fr; align-items: end; }
}
@media (max-width: 520px) {
  .nav-menu .nav-list { left: -1.25rem; }
  .site-footer--signature .site-footer__legal { display: grid; }
}

/* Selected footer II: the Ledger. It provides the practical paths at the end
   of the visit without giving up the generous cream field of the Wines page. */
.site-footer--ledger {
  padding: clamp(3rem, 6vw, 6rem) clamp(1.25rem, 4vw, 3rem) 1.4rem;
  color: var(--ink);
  background: var(--cream);
  border-top: 0;
}
.site-footer--ledger .site-footer__inner { display: block; max-width: none; }
.site-footer--ledger .site-footer__ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--ink);
}
.site-footer--ledger .site-footer__name {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(3.4rem, 7vw, 7rem)/.78 var(--font-display);
  letter-spacing: .1em;
}
.site-footer--ledger .site-footer__tagline {
  max-width: 18rem;
  margin: 0;
  color: var(--ink);
  font-size: .74rem;
  line-height: 1.65;
}
.site-footer--ledger .site-footer__ledger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem);
}
.site-footer--ledger .site-footer__ledger-grid > div { display: grid; align-content: start; gap: .55rem; }
.site-footer--ledger .footer-label {
  margin: 0 0 .45rem;
  color: #71552a;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.site-footer--ledger .site-footer__ledger-grid a,
.site-footer--ledger .site-footer__ledger-grid p:not(.footer-label) {
  margin: 0;
  color: var(--ink);
  font-size: .7rem;
  line-height: 1.48;
  text-decoration: none;
}
.site-footer--ledger .site-footer__ledger-grid a:hover,
.site-footer--ledger .site-footer__ledger-grid a:focus-visible { color: #71552a; outline: none; }
.site-footer--ledger .site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  color: rgba(20, 16, 11, .72);
  border-top: 1px solid rgba(20, 16, 11, .3);
  font-size: .57rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
@media (max-width: 680px) {
  .site-footer--ledger .site-footer__ledger-head { display: grid; }
  .site-footer--ledger .site-footer__ledger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .site-footer--ledger .site-footer__legal { display: grid; }
}

/* Selected menu A: a quiet, left-hand drawer. The Story surface is the panel;
   the Wines cream is reserved for the navigation itself. */
.nav-menu__close { display: none; }
.nav-menu[open] .nav-menu__open { display: none; }
.nav-menu[open] .nav-menu__close { display: inline; }
.nav-menu[open] summary::after { content: "×"; }
.nav-menu .nav-list {
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  left: 0;
  display: grid;
  align-content: start;
  gap: clamp(1rem, 2.3vh, 1.55rem);
  width: min(31rem, 34vw);
  min-width: 19rem;
  margin: 0;
  padding: clamp(3rem, 8vh, 6rem) clamp(2rem, 4vw, 5rem);
  border: 0;
  border-right: 1px solid rgba(184, 133, 50, .38);
  background: var(--ink-soft);
  box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .24);
}
.nav-menu .nav-link {
  color: var(--cream);
  font: 500 clamp(2.05rem, 3.4vw, 3.5rem)/.92 var(--font-display);
  letter-spacing: .01em;
  text-transform: none;
}
.nav-menu .nav-link::after { bottom: -.28rem; background: var(--gold); }
.nav-menu .nav-link:hover, .nav-menu .nav-link:focus-visible { color: var(--gold); }
@media (max-width: 700px) {
  .nav-menu .nav-list { width: min(88vw, 25rem); min-width: 0; padding: 3rem 1.5rem; }
}

/* A cleaner version of the drawer: measured rules and a single piece of
   supporting house language, rather than oversized type competing with the
   navigation. This follows the disciplined panel hierarchy used by luxury
   house menus. */
.nav-menu__panel {
  position: fixed;
  top: var(--nav-height);
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(28rem, 31vw);
  min-width: 19rem;
  padding: clamp(2.5rem, 6vh, 4.5rem) clamp(2rem, 3.2vw, 4rem) 2rem;
  border-right: 1px solid rgba(184, 133, 50, .38);
  color: var(--cream);
  background: var(--ink);
  box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .24);
}
.site-header:not(.is-scrolled) .nav-menu__panel {
  background: transparent;
  box-shadow: none;
}
.page-wine .site-header .nav-menu__panel {
  background: var(--ink);
  box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .24);
}
.nav-menu[open] .nav-menu__panel { animation: taliano-menu-in 1100ms cubic-bezier(.16, 1, .3, 1) both; }
.nav-menu.is-closing .nav-menu__panel { animation: taliano-menu-out 700ms cubic-bezier(.7, 0, .84, 0) both; }
.nav-menu__eyebrow {
  margin: 0 0 2.4rem;
  color: var(--gold);
  font-size: .57rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.nav-menu .nav-menu__panel .nav-list {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.nav-menu .nav-menu__panel .nav-list li { border-top: 1px solid rgba(243, 236, 218, .2); }
.nav-menu .nav-menu__panel .nav-list li:last-child { border-bottom: 1px solid rgba(243, 236, 218, .2); }
.nav-menu[open] .nav-menu__panel .nav-list li { animation: taliano-menu-item 650ms cubic-bezier(.16, 1, .3, 1) both; }
.nav-menu[open] .nav-menu__panel .nav-list li:nth-child(1) { animation-delay: 160ms; }
.nav-menu[open] .nav-menu__panel .nav-list li:nth-child(2) { animation-delay: 230ms; }
.nav-menu[open] .nav-menu__panel .nav-list li:nth-child(3) { animation-delay: 300ms; }
.nav-menu[open] .nav-menu__panel .nav-list li:nth-child(4) { animation-delay: 370ms; }
.nav-menu[open] .nav-menu__panel .nav-list li:nth-child(5) { animation-delay: 440ms; }
.nav-menu .nav-menu__panel .nav-link {
  padding: 1rem 0 1.06rem;
  color: var(--cream);
  font: 500 clamp(1.45rem, 2vw, 2rem)/1 var(--font-display);
  letter-spacing: .01em;
}
.nav-menu .nav-menu__panel .nav-link::after { display: none; }
.nav-menu__house {
  margin: auto 0 0;
  padding-top: 1.5rem;
  color: var(--cream-deep);
  border-top: 1px solid rgba(184, 133, 50, .38);
  font: 400 1.05rem/1.32 var(--font-display);
}
@keyframes taliano-menu-in { from { opacity: 0; transform: translateX(-4rem); } to { opacity: 1; transform: none; } }
@keyframes taliano-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-2.5rem); } }
@keyframes taliano-menu-item { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-menu[open] .nav-menu__panel,
  .nav-menu[open] .nav-menu__panel .nav-list li,
  .nav-menu.is-closing .nav-menu__panel { animation: none; }
}
@media (max-width: 700px) {
  .nav-menu__panel { width: min(88vw, 25rem); min-width: 0; padding: 2.5rem 1.5rem 1.5rem; }
}

/* Mobile uses one quiet menu control instead of competing utility labels.
   The destination removed from the header remains available in the drawer. */
@media (max-width: 767px) {
  .site-nav {
    padding-right: max(.75rem, env(safe-area-inset-right, 0px));
    padding-left: max(.75rem, env(safe-area-inset-left, 0px));
  }

  .nav-menu summary {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
  }

  .nav-menu summary::after { display: none; }

  .nav-menu__open,
  .nav-menu__close {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-menu__icon {
    position: relative;
    display: block;
    width: 1.2rem;
    height: .8rem;
  }

  .nav-menu__icon i {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: top 520ms var(--ease-drift), bottom 520ms var(--ease-drift),
                opacity 300ms var(--ease-soft), transform 650ms var(--ease-drift);
  }

  .nav-menu__icon i:nth-child(1) { top: 0; }
  .nav-menu__icon i:nth-child(2) { top: calc(50% - .5px); }
  .nav-menu__icon i:nth-child(3) { bottom: 0; }
  .nav-menu[open] .nav-menu__icon i:nth-child(1) { top: calc(50% - .5px); transform: rotate(45deg); }
  .nav-menu[open] .nav-menu__icon i:nth-child(2) { opacity: 0; }
  .nav-menu[open] .nav-menu__icon i:nth-child(3) { bottom: calc(50% - .5px); transform: rotate(-45deg); }

  .nav-wordmark {
    max-width: calc(100vw - 7rem);
    overflow: hidden;
    font-size: 1.45rem;
    white-space: nowrap;
  }

  .nav-back {
    gap: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }

  .nav-back__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-menu__panel {
    width: calc(100vw - .75rem);
    max-width: 25rem;
  }
}

/* Selected Charmat direction A: the film is a framed object, supported by
   three material cues rather than a numbered instructional sequence. */
.section--charmat,
html.js-scroll-scenes .section.section--charmat {
  display: grid;
  align-content: center;
  gap: clamp(2rem, 6vh, 5rem);
  min-height: 100vh;
  min-height: 100svh;
  overflow: visible;
}
.charmat__lead { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
.charmat__header { z-index: auto; }
.charmat__summary { max-width:20rem; margin:1.1rem 0 0; color:var(--cream-deep); font-size:.76rem; line-height:1.65; }
.charmat__film {
  position: relative;
  width: 100%;
  margin: 0;
  transform: none;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0d0b08;
}
.charmat__video { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.charmat__scrim { display:none; }
.charmat__expand {
  position:absolute;
  z-index:3;
  right:.9rem;
  bottom:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.58rem .68rem;
  border:1px solid rgba(243,236,218,.55);
  color:var(--cream);
  background:rgba(20,16,11,.82);
  font:500 .53rem/1 var(--font-body);
  letter-spacing:.13em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 240ms var(--ease-soft), background-color 240ms var(--ease-soft), transform 240ms var(--ease-soft);
}
.charmat__expand svg { width:.78rem; height:.78rem; fill:none; stroke:currentColor; stroke-width:1.15; }
.charmat__expand:hover,.charmat__expand:focus-visible { color:var(--ink); background:var(--cream); outline:none; transform:translateY(-2px); }
.charmat__film.is-fallback .charmat__expand { display:none; }
.charmat__cues { display:grid; grid-template-columns:1fr; gap:0; margin:0; padding:0; list-style:none; }
.charmat__cues li { padding:.95rem 0; border-top:1px solid rgba(243,236,218,.2); }
.charmat__cues li:last-child { border-bottom:1px solid rgba(243,236,218,.2); }
.charmat__cues p { margin:0; color:var(--gold); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; }
.charmat__cues strong { display:block; margin-top:.45rem; color:var(--cream); font:500 1.2rem/1.05 var(--font-display); }
.charmat__cues span { display:block; margin-top:.38rem; color:var(--cream-deep); font-size:.63rem; line-height:1.5; }

@media (min-width:900px) {
  .charmat__lead { grid-template-columns:minmax(15rem,.68fr) minmax(0,1.32fr); }
  .charmat__film { position:relative; inset:auto; width:100%; height:auto; }
  .charmat__video { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
  .charmat__cues { grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,3vw,3rem); }
  .charmat__cues li { padding-top:.85rem; }
}

/* Full-screen film: native fullscreen where available, a fixed fallback
   otherwise. In either case the frame grows first, then resolves cleanly to
   black with only a discreet exit control. */
.charmat__film.is-expanding { animation:charmat-expand 380ms cubic-bezier(.16,1,.3,1) both; transform-origin:center; z-index:10002; }
.charmat__film:fullscreen,
.charmat__film:-webkit-full-screen,
.charmat__film.is-fallback-fullscreen { width:100vw; height:100svh; margin:0; border:0; background:#000; }
.charmat__film.is-fallback-fullscreen { position:fixed; inset:0; z-index:10002; }
.charmat__film:fullscreen .charmat__video,
.charmat__film:-webkit-full-screen .charmat__video,
.charmat__film.is-fallback-fullscreen .charmat__video { width:100%; height:100%; aspect-ratio:auto; object-fit:contain; background:#000; }
.charmat__film:fullscreen .charmat__expand span,
.charmat__film:-webkit-full-screen .charmat__expand span,
.charmat__film.is-fallback-fullscreen .charmat__expand span { font-size:0; }
.charmat__film:fullscreen .charmat__expand span::after,
.charmat__film:-webkit-full-screen .charmat__expand span::after,
.charmat__film.is-fallback-fullscreen .charmat__expand span::after { content:"Close"; font-size:.53rem; }
:lang(az) .charmat__film:fullscreen .charmat__expand span::after,
:lang(az) .charmat__film:-webkit-full-screen .charmat__expand span::after,
:lang(az) .charmat__film.is-fallback-fullscreen .charmat__expand span::after { content:"Bağla"; }
body.charmat-fullscreen { overflow:hidden; }
@keyframes charmat-expand { from { opacity:.82; transform:scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .charmat__film.is-expanding { animation:none; } }

/* Charmat now sits on the same cream field as Wines. The film remains dark,
   so the method reads as a precise object placed on the page. */
.section--charmat,
html.js-scroll-scenes .section.section--charmat { color:var(--ink); background:var(--cream); }
.section--charmat .charmat__header .display { color:var(--ink); }
.section--charmat .charmat__header .eyebrow { color:var(--ink); }
.section--charmat .charmat__summary { color:rgba(20,16,11,.78); }
.section--charmat .charmat__cues li { border-color:rgba(20,16,11,.22); }
.section--charmat .charmat__cues li:last-child { border-bottom-color:rgba(20,16,11,.22); }
.section--charmat .charmat__cues strong { color:var(--ink); }
.section--charmat .charmat__cues span { color:rgba(20,16,11,.7); }

/* Keep the framed-film composition fully inside the viewport.  The method
   section must not inherit any horizontal offset from its editorial scenes. */
.section--charmat .charmat__lead,
.section--charmat .charmat__header,
.section--charmat .charmat__film,
.section--charmat .charmat__cues { min-width:0; }

@media (max-width: 899px) {
  .section--charmat .charmat__summary {
    width: 100%;
    max-width: none;
  }
}

/* Desktop full-bleed Charmat entry. The detailed destination will be wired
   to Explore when its editorial structure is approved. */
.charmat__explore { display:none; }

@media (min-width: 900px) {
  .section--charmat,
  html.js-scroll-scenes .section.section--charmat {
    position:relative;
    display:block;
    width:100%;
    height:100vh;
    height:100svh;
    min-height:100vh;
    min-height:100svh;
    padding:0;
    overflow:hidden;
    color:var(--cream);
    background:#080705;
  }

  .section--charmat .charmat__lead { position:absolute; inset:0; display:block; }
  .section--charmat .charmat__film {
    position:absolute;
    z-index:0;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    border:0;
  }
  /* High-amplitude Charmat parallax is explicit here so touch-capable desktop
     browsers do not depend on the shared hover-only transform rule.
     Charmat parallax overscan keeps every edge covered throughout it. */
  .section--charmat .charmat__film.parallax-panel__media {
    top:-18%;
    bottom:-18%;
    height:auto;
    transform:translate3d(0, var(--parallax-y), 0);
    will-change:transform;
  }
  .section--charmat .charmat__video { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center; }
  .section--charmat .charmat__scrim {
    position:absolute;
    z-index:1;
    inset:0;
    display:block;
    background:linear-gradient(180deg, rgba(8,7,5,.04) 38%, rgba(8,7,5,.22) 65%, rgba(8,7,5,.78) 100%);
    pointer-events:none;
  }
  .section--charmat .charmat__header {
    position:absolute;
    z-index:2;
    right:1.5rem;
    bottom:clamp(2rem, 6vh, 4.5rem);
    left:1.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    pointer-events:none;
  }
  .section--charmat .charmat__header .eyebrow,
  .section--charmat .charmat__summary { display:none; }
  .section--charmat .charmat__header .display {
    color:var(--cream);
    font-size:clamp(3rem, 4.6vw, 5.25rem);
    line-height:.9;
    letter-spacing:.025em;
    text-shadow:0 1px 24px rgba(0,0,0,.36);
  }
  .section--charmat .charmat__header .display br { display:none; }
  .section--charmat .charmat__explore {
    display:inline-flex;
    margin-top:1.35rem;
    padding:.2rem 0 .28rem;
    border:0;
    border-bottom:1px solid currentColor;
    color:var(--cream);
    background:none;
    font:500 .6rem/1 var(--font-body);
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:1;
    pointer-events:auto;
    cursor:default;
  }
  .section--charmat .charmat__expand,
  .section--charmat .charmat__cues { display:none; }
}

/* Mobile Charmat parallax keeps the same full-bleed composition with slightly
   less travel than desktop. Matching overscan keeps every edge covered. */
@media (max-width: 899px) {
  .section--charmat,
  html.js-scroll-scenes .section.section--charmat {
    position:relative;
    display:block;
    width:100%;
    height:100vh;
    height:100svh;
    min-height:100vh;
    min-height:100svh;
    padding:0;
    overflow:hidden;
    color:var(--cream);
    background:#080705;
  }
  .section--charmat .charmat__lead { position:absolute; inset:0; display:block; }
  .section--charmat .charmat__film.parallax-panel__media {
    position:absolute;
    z-index:0;
    top:-14%;
    right:0;
    bottom:-14%;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    border:0;
    transform:translate3d(0, var(--parallax-y), 0);
    will-change:transform;
  }
  .section--charmat .charmat__video {
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
  }
  .section--charmat .charmat__scrim {
    position:absolute;
    z-index:1;
    inset:0;
    display:block;
    background:linear-gradient(180deg, rgba(8,7,5,.02) 32%, rgba(8,7,5,.18) 62%, rgba(8,7,5,.82) 100%);
    pointer-events:none;
  }
  .section--charmat .charmat__header {
    position:absolute;
    z-index:2;
    right:1.25rem;
    bottom:clamp(2rem, 7svh, 4rem);
    left:1.25rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    pointer-events:none;
  }
  .section--charmat .charmat__header .eyebrow,
  .section--charmat .charmat__summary { display:none; }
  .section--charmat .charmat__header .display {
    color:var(--cream);
    font-size:clamp(2.7rem, 14vw, 4.25rem);
    line-height:.9;
    letter-spacing:.025em;
    text-shadow:0 1px 20px rgba(0,0,0,.4);
  }
  .section--charmat .charmat__header .display::before { content:none; }
  .section--charmat .charmat__explore {
    display:inline-flex;
    margin-top:1.2rem;
    padding:.2rem 0 .28rem;
    border:0;
    border-bottom:1px solid currentColor;
    color:var(--cream);
    background:none;
    font:500 .58rem/1 var(--font-body);
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:1;
    pointer-events:auto;
    cursor:default;
  }
  .section--charmat .charmat__expand,
  .section--charmat .charmat__cues { display:none; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .section--charmat .charmat__film.parallax-panel__media {
    transform:none;
    will-change:auto;
  }
}
/* ==========================================================================
   Charmat Explore page / sharp full-bleed sequence
   Each stage is one viewport. Width and height both constrain the type scale,
   so short laptops and small phones retain the full copy without crowding.
   ========================================================================== */
.charmat-scroll {
  scroll-behavior: smooth;
  background: var(--ink);
}
.page-charmat-explore {
  color: var(--cream);
  background: var(--ink);
  background-image: none;
}
.page-charmat-explore::before { display: none; }
.page-charmat-explore .site-header .nav-menu__panel {
  background: var(--ink);
  box-shadow: 1.5rem 0 4rem rgba(0,0,0,.24);
}
.page-charmat-explore main { background: var(--ink); }
.nav-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 44px;
  padding: .5rem .15rem;
  color: var(--cream);
  font: 500 .65rem/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color 220ms ease;
}
.nav-back svg { width: 22px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.page-charmat-explore a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.charmat-process-layout { background: var(--ink); }
.charmat-stage-feed { position: relative; }
.charmat-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(2rem, 7vh, 5.5rem)) clamp(1.5rem, 6vw, 6.5rem) clamp(3rem, 8vh, 6rem);
  color: var(--cream);
  background: var(--ink);
}
.charmat-stage__media {
  position: absolute;
  z-index: -3;
  inset: 0;
  margin: 0;
  background: var(--ink);
}
.charmat-stage__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04);
}
.has-charmat-motion .charmat-stage__media img {
  transform: translate3d(
    var(--charmat-drift-x, 0),
    var(--charmat-drift-y, 0),
    0
  ) scale(var(--charmat-scale, 1.072));
  transform-origin: center;
}
.has-charmat-motion .charmat-stage--reverse .charmat-stage__media img {
  transform-origin: 68% 32%;
}
.has-charmat-motion .charmat-stage.is-charmat-motion-active .charmat-stage__media img {
  will-change: transform;
}
.charmat-stage::before,
.charmat-stage::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}
.has-charmat-motion .charmat-stage::before {
  opacity: var(--charmat-veil, 1);
}
.has-charmat-motion .charmat-stage.is-charmat-motion-active::before {
  will-change: opacity;
}
.charmat-stage::after {
  z-index: -1;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.charmat-stage--opening::before,
.charmat-stage--panorama::before {
  background:
    linear-gradient(90deg, rgba(12,9,6,.88) 0%, rgba(12,9,6,.55) 32%, transparent 68%),
    linear-gradient(0deg, rgba(12,9,6,.48), transparent 45%);
}
.charmat-stage--split::before,
.charmat-stage--reverse::before,
.charmat-stage--closing::before {
  background:
    linear-gradient(270deg, rgba(12,9,6,.9) 0%, rgba(12,9,6,.56) 33%, transparent 69%),
    linear-gradient(0deg, rgba(12,9,6,.48), transparent 45%);
}
.charmat-stage--quiet::before {
  background:
    linear-gradient(180deg, rgba(12,9,6,.86) 0%, rgba(12,9,6,.4) 48%, transparent 72%),
    linear-gradient(90deg, rgba(12,9,6,.4), transparent 62%);
}
.charmat-stage__copy {
  position: relative;
  z-index: 1;
  width: min(31rem, 44vw);
  min-width: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.charmat-stage--split,
.charmat-stage--reverse,
.charmat-stage--closing { justify-content: flex-end; }
.charmat-stage--split,
.charmat-stage--quiet { align-items: flex-start; }
.charmat-stage h1,
.charmat-stage h2 {
  margin: 0;
  color: inherit;
  font: 500 clamp(2.75rem, min(5.4vw, 9vh), 5.25rem)/.94 var(--font-display);
  letter-spacing: -.025em;
  overflow-wrap: normal;
  text-wrap: balance;
}
.charmat-stage__copy > p:last-child {
  max-width: 43ch;
  margin-top: clamp(.9rem, 2vh, 1.35rem);
  color: rgba(243,236,218,.93);
  font-size: clamp(.875rem, 1.05vw, 1.025rem);
  line-height: 1.68;
}
.charmat-explore-outro {
  display: grid;
  place-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-height) + 3rem) clamp(1.5rem, 6vw, 6.5rem) 4rem;
  color: var(--cream);
  background: var(--ink);
  text-align: center;
}
.charmat-explore-outro h2 {
  margin: 0 0 1.5rem;
  font: 400 clamp(2.8rem, min(4.8vw, 8vh), 4.8rem)/1.04 var(--font-display);
  letter-spacing: -.01em;
}
.charmat-explore-outro > p {
  max-width: 29rem;
  margin: 0 auto;
  color: rgba(243,236,218,.8);
  font-size: .9375rem;
  line-height: 1.8;
}
.charmat-explore-outro a {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--bronze);
  font: 500 .65rem/1.4 var(--font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .page-charmat-explore .site-footer__name { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .page-charmat-explore .site-footer__ledger-head { grid-template-columns: minmax(0, 1fr); }
  .page-charmat-explore .nav-wordmark { font-size: clamp(1.2rem, 5.5vw, 1.45rem); }
  .nav-back svg { width: 18px; }
  .nav-back__label { display: none; }
  .charmat-stage,
  .charmat-stage--split,
  .charmat-stage--reverse,
  .charmat-stage--closing,
  .charmat-stage--quiet {
    align-items: flex-end;
    justify-content: flex-start;
    padding: calc(var(--nav-height) + 2rem) 1.25rem 4.4rem;
  }
  .charmat-stage::before,
  .charmat-stage--opening::before,
  .charmat-stage--split::before,
  .charmat-stage--panorama::before,
  .charmat-stage--reverse::before,
  .charmat-stage--quiet::before,
  .charmat-stage--closing::before {
    background:
      linear-gradient(0deg, rgba(12,9,6,.96) 0%, rgba(12,9,6,.76) 34%, transparent 70%),
      linear-gradient(180deg, rgba(12,9,6,.45), transparent 31%);
  }
  .charmat-stage__copy {
    width: 100%;
  }
  .charmat-stage h1,
  .charmat-stage h2 {
    max-width: 11ch;
    font-size: clamp(2.35rem, min(11vw, 8.5vh), 3.6rem);
    line-height: .95;
  }
  .charmat-stage__copy > p:last-child {
    margin-top: .85rem;
    font-size: clamp(.84rem, 3.7vw, .925rem);
    line-height: 1.55;
  }
  .charmat-stage--split .charmat-stage__media img,
  .charmat-stage--quiet .charmat-stage__media img { object-position: 62% center; }
  .charmat-explore-outro > p { font-size: .875rem; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .charmat-stage {
    padding-top: calc(var(--nav-height) + 1.5rem);
    padding-bottom: 2.4rem;
  }
  .charmat-stage__copy { width: min(34rem, 48vw); }
  .charmat-stage h1,
  .charmat-stage h2 { font-size: clamp(2.55rem, min(4.8vw, 8vh), 4rem); }
  .charmat-stage__copy > p:last-child { font-size: .875rem; line-height: 1.55; }
}

@media (max-width: 380px), (max-height: 580px) and (max-width: 760px) {
  .charmat-stage { padding-bottom: 3.65rem; }
  .charmat-stage h1,
  .charmat-stage h2 { font-size: clamp(2.05rem, min(10.5vw, 7.6vh), 2.75rem); }
  .charmat-stage__copy > p:last-child { font-size: .8rem; line-height: 1.48; }
}

@media (prefers-reduced-motion: reduce) {
  .charmat-scroll { scroll-behavior: auto; }
  .has-charmat-motion .charmat-stage__media img { transform: none; }
  .has-charmat-motion .charmat-stage::before { opacity: 1; }
}

/* ==========================================================================
   Trade page (trade.html)
   ========================================================================== */

.page-trade main {
  background-color: var(--cream);
  color: var(--ink);
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100svh - var(--nav-height));
}

.trade__inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(var(--nav-height) + clamp(2.5rem, 6vh, 4rem))
           clamp(1.5rem, 5vw, 4.5rem)
           clamp(4rem, 10vh, 6rem);
}

.page-trade .eyebrow { color: var(--ink-soft); }
.page-trade .display { color: var(--ink); }

.trade__lead {
  margin-top: 1.5rem;
  max-width: 42ch;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-soft);
}

.trade__list {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  padding-top: clamp(1.5rem, 3vh, 2rem);
  border-top: 1px solid rgba(132, 102, 48, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.trade__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(132, 102, 48, 0.22);
}

.trade__item-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}

.trade__item-meta {
  margin: 0.35rem 0 0;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze);
}

.trade__item-actions {
  display: flex;
  gap: 1.25rem;
}

.trade__action {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease;
}

.trade__action:hover,
.trade__action:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
  outline: none;
}

.trade__contact {
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.trade__contact a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer--ledger .site-footer__trade {
  color: rgba(20, 16, 11, 0.72);
  text-decoration: none;
  transition: color 220ms ease;
}

.site-footer--ledger .site-footer__trade:hover,
.site-footer--ledger .site-footer__trade:focus-visible {
  color: #71552a;
  outline: none;
}