/* =========================================================================
   SAVIOR SPIRITS — saviorspirits.net
   Digital identity for a producer-led Mexican spirits house.
   Editorial / documentary system. No frameworks.
   Fonts self-hosted (SIL OFL): Archivo (variable wdth/wght) for architecture,
   Newsreader (variable opsz/wght) for voice.
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Archivo"; src: url("assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 200 800; font-stretch: 62% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-var.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("assets/fonts/newsreader-var-italic.woff2") format("woff2"); font-weight: 280 500; font-style: italic; font-display: swap; }

/* ---------- Palette — pulled from Michoacán and the vinata ---------- */
:root {
  --black:   #0b0908;   /* deep near-black — night, the manifesto            */
  --char:    #13100d;   /* char — firebox soot                                */
  --earth:   #251c16;   /* earth — the producers                               */
  --earth-2: #33271f;
  --paper:   #e9e1d2;   /* aged paper                                          */
  --cream:   #f2ece1;   /* cream — type on dark                                */
  --stone:   #a79a87;   /* stone — secondary type on dark                      */
  --stone-d: #5b5146;   /* stone, deep — secondary type on paper (AA)          */
  --stone-m: #938878;   /* stone, mid — small type on near-black (AA)          */
  --ink:     #16120f;   /* type on paper                                       */
  --agave:   #7b8671;   /* agave — used only for the smallest details          */
  --copper:  #b9693b;   /* copper — the still; the single accent               */
  --copper-l:#cf8656;   /* copper for text on dark (AA on char)                */
  --copper-d:#8b4722;   /* copper for text on paper (AA on paper)              */

  --rule-d: rgba(242, 236, 225, .14);
  --rule-p: rgba(22, 18, 15, .16);

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 5vw, 96px);
  --maxw: 1680px;
  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .16, 1);
  --slow: 1.4s;

  --fs-body: clamp(.98rem, .93rem + .18vw, 1.08rem);
  --fs-small: .6875rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0; background: var(--char); color: var(--cream); overflow-x: clip;
  font-family: var(--f-serif); font-size: var(--fs-body); font-weight: 370; line-height: 1.68;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-kerning: normal; font-feature-settings: "kern", "liga", "onum";
  hanging-punctuation: first;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
a, button, [role="button"] { cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
em { font-style: italic; }
::selection { background: var(--copper); color: var(--black); }
h1, h2, h3, .display { text-wrap: balance; }
p { text-wrap: pretty; }

/* film grain — barely there, fixed, never interactive */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--copper); color: var(--black); padding: .7em 1em; font-family: var(--f-display); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 1px solid var(--copper-l); outline-offset: 4px; }

/* architecture: the display face */
.display {
  font-family: var(--f-display); font-stretch: 62%; font-weight: 780; text-transform: uppercase;
  line-height: .84; letter-spacing: -.012em; font-feature-settings: "kern";
}
.indent { display: block; }
/* small type: the field notebook */
.label, .marker, figcaption, .plate, .fineprint, .brand__kicker, .process__n, .spirits__n {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 560; font-size: var(--fs-small);
  letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; font-style: normal;
}
.serif-italic { font-family: var(--f-serif); font-style: italic; font-weight: 330; }
.muted { color: var(--stone-d); }

/* section marker — N° 02 ——————————— Production */
.marker { display: flex; align-items: center; gap: 1.4rem; flex-wrap: nowrap; color: var(--stone-d); margin: 0 0 clamp(48px, 7vw, 120px); }
.marker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; order: 1; }
.marker > span:first-child { color: var(--copper-d); }
.marker > span:nth-child(2) { margin-left: -.2rem; }
.marker > span:first-child::after { content: "/"; margin-left: 1.4rem; opacity: .5; }
.marker__mark { order: 2; }
.marker--light { color: var(--stone); }
.marker--light > span:first-child { color: var(--copper-l); }

/* captions — documentary plates */
figcaption, .plate { display: flex; gap: 1em; align-items: baseline; margin-top: .9rem; color: var(--stone-d); letter-spacing: .18em; }
figcaption > span:first-child, .plate > span:first-child { color: var(--copper-d); }
figcaption, .plate:not(.plate--hero) { flex-wrap: wrap; row-gap: .3rem; }
figcaption > span:first-child, .plate > span:first-child { white-space: nowrap; }
.plate--light { color: var(--stone); }
.plate--light > span:first-child { color: var(--copper-l); }

/* =========================================================================
   MAKER'S MARK — SAVIOR / PRODUCER MADE / MICHOACÁN, MÉXICO
   One tiny recurring device: entry screen, section markers, photo captions,
   footer. Captions carry the short form (SAVIOR / PRODUCER MADE) so the mark
   never reads as a claim about where a particular photo was taken.
   ========================================================================= */
.mark { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 .85em; font-family: var(--f-display); font-stretch: 100%; font-weight: 560; font-size: .5625rem; letter-spacing: .3em; text-transform: uppercase; line-height: 1.6; font-style: normal; white-space: nowrap; }
.mark i { font-style: normal; color: var(--copper-l); opacity: .9; letter-spacing: 0; }
.chapter--paper .mark i, .made .mark i, .mich .mark i, .spirits__head .mark i, .awards .mark i, .brand--puesto .mark i { color: var(--copper-d); }
.mark--cap { margin-left: auto; padding-left: 1.4rem; }
.plate--light .mark--cap { color: rgba(242,236,225,.9); }
.lockup { display: flex; flex-direction: column; margin: 0 0 1.4rem; }
.lockup__name { font-family: var(--f-display); font-weight: 760; font-stretch: 80%; font-size: .9375rem; letter-spacing: .3em; text-transform: uppercase; }
.lockup__pm { font-family: var(--f-display); font-stretch: 62%; font-weight: 780; text-transform: uppercase; font-size: clamp(2rem, 1rem + 2vw, 3.4rem); line-height: .9; color: var(--copper-l); margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--rule-d); }
.footer__mark { margin: 0 0 1.4rem; color: var(--stone-m); }
.age-gate__mark-line { margin: 0; color: var(--stone); }

/* =========================================================================
   CTAs — an invitation from the producer, never a banner
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.2em;
  min-height: 48px; padding: 1.05em 1.35em 1.05em 1.7em;
  font-family: var(--f-display); font-stretch: 100%; font-weight: 600; font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase;
  line-height: 1; border: 1px solid transparent; border-radius: 0; white-space: nowrap;
  transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.btn span[aria-hidden] { display: inline-flex; align-items: center; align-self: stretch; padding-left: 1.2em; border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 35%, transparent); font-size: 1.1em; letter-spacing: 0; transition: transform .6s var(--ease); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn--solid { background: var(--copper); color: var(--black); }
.btn--solid:hover { background: var(--cream); }
.btn--lg { min-height: 58px; padding: 1.3em 1.5em 1.3em 2em; font-size: .75rem; }
.btn--quiet { color: var(--stone); }
.btn--quiet:hover { color: var(--cream); }
.btn--nav { min-height: 40px; padding: .9em 1em .9em 1.3em; background: var(--copper); color: var(--black); font-size: .625rem; }
.btn--nav:hover { background: var(--cream); }
.btn--nav:hover span[aria-hidden] { transform: translate(2px, -2px); }

/* quiet text invitation: words + a drawn hairline + arrow */
.cta-link {
  display: inline-flex; align-items: center; gap: .9em; margin-top: 1.6rem; min-height: 44px;
  font-family: var(--f-display); font-weight: 600; font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--copper-d); transition: color .5s var(--ease);
}
.cta-link span[aria-hidden] { display: inline-flex; align-items: center; gap: .7em; letter-spacing: 0; font-size: 1.1em; }
.cta-link span[aria-hidden]::before { content: ""; display: block; width: 3rem; height: 1px; background: currentColor; transition: width .7s var(--ease); }
.cta-link:hover span[aria-hidden]::before { width: 5rem; }
.cta-link--light { color: var(--copper-l); }
.cta-link--light:hover { color: var(--cream); }
.cta-link--ink { color: var(--ink); }
.cta-link:not(.cta-link--light):hover { color: var(--ink); }
.cta-link--ink:hover { color: var(--copper-d) !important; }

/* =========================================================================
   Header — transparent over the film, recedes on the way down
   ========================================================================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: transform .7s var(--ease), background-color .6s var(--ease); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-d); opacity: 0; transition: opacity .6s var(--ease); }
.site-header.is-scrolled { background: rgba(19, 16, 13, .92); }
.site-header.is-scrolled::after { opacity: 1; }

.site-header__bar { height: var(--header-h); max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: clamp(1.4rem, 2.8vw, 3.2rem); }
.logo { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.logo__word { font-family: var(--f-display); font-weight: 760; font-stretch: 80%; font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase; }
.logo__tag { font-family: var(--f-display); font-weight: 600; font-size: .5625rem; letter-spacing: .44em; text-transform: uppercase; color: var(--copper-l); margin-top: .55em; padding-top: .55em; border-top: 1px solid rgba(207,134,86,.45); align-self: flex-start; }
.nav__list { display: flex; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav__list a { font-family: var(--f-display); font-weight: 520; font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; position: relative; padding: .6em 0; color: var(--stone); transition: color .5s var(--ease); }
.nav__list a:hover, .nav__list a[aria-current="true"] { color: var(--cream); }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--copper-l); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.nav-toggle { display: none; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--copper); transform: scaleX(0); transform-origin: left; }

/* =========================================================================
   01 · HERO — full-screen production still, type laid over the film
   ========================================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--black); }
.hero__media { position: absolute; inset: -12% 0 -12% 0; will-change: transform; }
.hero__media picture, .hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__img { transform: scale(1.06); transition: transform 3.2s var(--ease); }
.is-loaded .hero__img { transform: scale(1); }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11,9,8,.55) 0, rgba(11,9,8,0) 20%),
    linear-gradient(to right, rgba(11,9,8,.62) 0, rgba(11,9,8,.1) 62%),
    linear-gradient(to top, rgba(11,9,8,.9) 0, rgba(11,9,8,.2) 55%);
}
.hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: calc(var(--header-h) + 6vh) var(--gutter) clamp(36px, 6vh, 72px); }
.hero__label { color: var(--cream); letter-spacing: .44em; margin-bottom: clamp(18px, 3vh, 32px); display: flex; align-items: center; gap: 1.2rem; }
.hero__label::before { content: ""; width: 2.6rem; height: 1px; background: var(--copper-l); }
.hero__label { flex-wrap: wrap; }
.hero__by { color: var(--cream); opacity: .82; letter-spacing: .26em; }
.hero__by::before { content: "—"; margin-right: 1.2rem; color: var(--copper-l); }
.hero__title { font-size: clamp(3.4rem, 10.6vw, 13.2rem); line-height: .82; margin-bottom: clamp(28px, 5vh, 60px); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.hero__title .line > span { display: inline-block; }
.hero__title .line--accent { color: var(--copper-l); }
.hero__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); padding-top: clamp(18px, 2.6vh, 28px); border-top: 1px solid var(--rule-d); align-items: start; }
.hero__lede { grid-column: 1 / span 5; font-size: clamp(1.25rem, .95rem + 1.1vw, 2.1rem); line-height: 1.2; margin: 0; letter-spacing: -.005em; }
.hero__copy { grid-column: 8 / span 4; color: var(--stone); font-size: .95rem; line-height: 1.62; }
.hero__copy p { margin-bottom: .5em; }
.hero__make { color: var(--cream); font-style: italic; }
.hero__cta { margin-top: 1.4rem; display: grid; gap: .9rem; justify-items: start; }
.hero__cta .fineprint { color: var(--stone); letter-spacing: .12em; font-size: .5625rem; max-width: 40ch; line-height: 1.7; }
.plate--hero { position: absolute; z-index: 2; right: calc(var(--gutter) * .55); top: 50%; margin: 0; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); color: rgba(242,236,225,.55); }
.plate--hero > span:first-child { color: var(--copper-l); }
.plate--hero .mark { margin-top: 2.4rem; color: rgba(242,236,225,.55); }

.js .hero__title .line > span { transform: translateY(104%); transition: transform 1.5s var(--ease); }
.js .hero__title .line:nth-child(2) > span { transition-delay: .09s; }
.js .hero__title .line:nth-child(3) > span { transition-delay: .24s; }
.js.is-loaded .hero__title .line > span { transform: none; }
.js .hero__label, .js .hero__foot, .js .plate--hero { opacity: 0; transition: opacity 1.6s var(--ease) .7s; }
.js.is-loaded .hero__label, .js.is-loaded .hero__foot { opacity: 1; }
.js.is-loaded .plate--hero { opacity: 1; }

/* =========================================================================
   02 · MADE, NOT SOURCED — paper, typography as architecture
   ========================================================================= */
.made { background: var(--paper); color: var(--ink); padding: clamp(96px, 13vw, 220px) 0 clamp(96px, 12vw, 200px); }
.made__title { font-size: clamp(3.8rem, 14.6vw, 18.5rem); line-height: .8; }
.made__title .indent { text-align: right; color: var(--copper-d); }
.made__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(72px, 10vw, 180px); align-items: start; }
.made__fig { grid-column: 1 / span 4; margin-left: calc(-1 * var(--gutter)); }
.made__fig img { width: 100%; aspect-ratio: 4 / 5.4; }
.made__fig figcaption { padding-left: var(--gutter); }
.made__text { grid-column: 6 / span 6; padding-top: clamp(0px, 6vw, 120px); }
.made__lead { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.9rem); line-height: 1.14; font-weight: 320; letter-spacing: -.012em; max-width: 22ch; }
.made__we { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 7rem); color: var(--copper-d); margin: .5em 0 .6em; }
.made__body { max-width: 34ch; color: var(--stone-d); margin-left: auto; margin-right: 8%; }
.cascade { margin: clamp(96px, 12vw, 200px) 0 0; }
.cascade li { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(2rem, 1rem + 4.4vw, 6.4rem); line-height: 1.04; letter-spacing: -.02em; }
.cascade li:nth-child(2) { padding-left: 10%; }
.cascade li:nth-child(3) { padding-left: 24%; }
.cascade li:nth-child(4) { padding-left: 40%; }
.cascade li:nth-child(5) { padding-left: 54%; color: var(--copper-d); }
.made__again { margin: clamp(40px, 5vw, 80px) 0 0 54%; color: var(--stone-d); }

/* interlude — one sentence, one screen */
.process-wrap { background: var(--char); padding-bottom: clamp(100px, 13vw, 220px); }
.interlude { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter); }
.interlude p { font-family: var(--f-serif); font-style: italic; font-weight: 280; font-size: clamp(2.3rem, 1rem + 5.6vw, 8.4rem); line-height: .98; letter-spacing: -.03em; max-width: 15ch; margin: 0; color: var(--cream); }
.interlude p::before { content: "“"; color: var(--copper-l); margin-left: -.42em; }

/* process line */
.process { border-top: 1px solid var(--rule-d); }
.process__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) clamp(140px, 17vw, 300px); align-items: center; gap: clamp(12px, 2vw, 40px); padding: clamp(14px, 1.6vw, 24px) 0; border-bottom: 1px solid var(--rule-d); }
.process__n { color: var(--stone); }
.process__w { font-size: clamp(2.8rem, 1rem + 7vw, 10rem); color: var(--cream); transition: color .7s var(--ease); }
.process__img { overflow: hidden; }
.process__img img { width: 100%; aspect-ratio: 3 / 2; transition: transform 1.4s var(--ease), filter 1.4s var(--ease); filter: saturate(.82); }
.process__row:hover .process__w { color: var(--copper-l); }
.process__row:hover .process__img img { transform: scale(1.04); filter: saturate(1); }
.process__arrow { font-family: var(--f-display); font-weight: 200; font-size: 1.4rem; line-height: 1; color: var(--agave); padding: .7rem 0 .6rem 5.5rem; border-bottom: 1px solid var(--rule-d); }
.process__row--end .process__w { color: var(--copper-l); }
.made__close { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 4rem; margin-top: clamp(96px, 12vw, 200px); }
.made__do { font-size: clamp(3.4rem, 1.2rem + 9vw, 13rem); margin: 0; color: var(--cream); }

/* =========================================================================
   03 · MICHOACÁN — landscape → paper → landscape
   ========================================================================= */
.michoacan { background: var(--paper); color: var(--ink); }
.fullbleed { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--black); color: var(--cream); }
.fullbleed__media { position: absolute; inset: -10% 0; will-change: transform; }
.fullbleed__media picture, .fullbleed__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fullbleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,9,8,.82) 0%, rgba(11,9,8,.18) 50%, rgba(11,9,8,.08) 100%); }
.fullbleed__overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(40px, 6vw, 96px); }
.fullbleed__overlay .marker { margin-bottom: clamp(24px, 3vw, 48px); }
.fullbleed__title { font-size: clamp(4rem, 1rem + 14vw, 20rem); line-height: .8; }
.mich { padding: clamp(100px, 13vw, 220px) 0 clamp(100px, 12vw, 200px); }
.mich__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.mich__fig { grid-column: 1 / span 3; grid-row: 1 / span 2; margin-left: calc(-1 * var(--gutter)); }
.mich__fig img { width: 100%; aspect-ratio: 2 / 3.2; }
.mich__fig figcaption { padding-left: var(--gutter); }
.mich__intro { grid-column: 5 / -1; }
.mich__not { font-size: clamp(2.8rem, 1rem + 6.6vw, 10rem); margin: 0; }
.mich__ours { font-size: clamp(2.6rem, 1rem + 6vw, 9rem); line-height: .95; color: var(--copper-d); margin: .06em 0 0; letter-spacing: -.03em; }
.mich__roots { font-family: var(--f-display); font-weight: 600; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; margin: clamp(40px, 5vw, 80px) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--rule-p); max-width: 34ch; }
.mich__text { grid-column: 8 / span 4; margin-top: clamp(48px, 6vw, 110px); color: var(--stone-d); }
.mich__lead { font-size: clamp(1.3rem, 1rem + .9vw, 1.9rem); line-height: 1.25; color: var(--ink); font-weight: 340; letter-spacing: -.01em; }
.mich__text em { color: var(--ink); }
.widescreen { position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 520px; background: var(--black); }
.widescreen__media { position: absolute; inset: -8% 0; will-change: transform; }
.widescreen__media picture, .widescreen__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.widescreen .plate { position: absolute; left: var(--gutter); bottom: clamp(20px, 3vw, 40px); margin: 0; z-index: 2; color: rgba(242,236,225,.8); }

/* =========================================================================
   04 · THE PRODUCERS — earth
   ========================================================================= */
.producers { background: var(--earth); color: var(--cream); padding: clamp(100px, 13vw, 220px) 0 clamp(100px, 13vw, 220px); }
.producers__title { font-size: clamp(3.4rem, 1rem + 10vw, 15rem); line-height: .82; }
.producers__title .indent { padding-left: 16%; }
.producers__names { font-family: var(--f-display); font-weight: 600; font-size: .75rem; letter-spacing: .5em; text-transform: uppercase; color: var(--copper-l); margin: clamp(32px, 4vw, 60px) 0 clamp(56px, 7vw, 110px) 16%; }
.producers__names span { color: var(--stone); margin: 0 .6em; }
.producers__fig { padding-inline: var(--gutter); max-width: calc(var(--maxw) + 0px); margin-inline: auto; }
.producers__fig > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Evidence mosaic — the four photographs of Salvador + Adrian, set inside the
   same dark, hairline-framed 16:9 panel the placeholder occupied. */
.producers__fig.evidence { padding: 3.2%; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); }
.evidence { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; background: #1f1813; display: flex; flex-direction: column; }
.evidence::after { content: ""; position: absolute; inset: 1.5%; border: 1px solid #3a2e24; pointer-events: none; }
.evidence__head { position: relative; z-index: 1; margin: 0 0 .28em; color: var(--cream); font-size: clamp(2rem, 6.8cqw, 7.4rem); line-height: .86; letter-spacing: -.005em; }
.evidence__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 7fr 2.6fr 2.4fr; grid-template-rows: 1fr 1fr; gap: 6px; }
.evidence__grid > div { position: relative; overflow: hidden; min-height: 0; background: var(--black); }
.evidence__grid picture, .evidence__grid img { position: absolute; inset: 0; width: 100%; height: 100%; }
.evidence__grid img { object-fit: cover; }
.evidence__key { grid-column: 1; grid-row: 1 / span 2; }
.evidence__a { grid-column: 2 / span 2; grid-row: 1; }
.evidence__b { grid-column: 2; grid-row: 2; }
.evidence__c { grid-column: 3; grid-row: 2; }
.producers__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(72px, 9vw, 160px); align-items: start; }
.producers__lead { grid-column: 1 / span 7; }
.producers__labels { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.8rem); line-height: 1.14; font-weight: 300; letter-spacing: -.012em; max-width: 20ch; }
.producers__make { font-size: clamp(2.6rem, 1rem + 5.4vw, 8.4rem); color: var(--copper-l); margin: .45em 0 0; }
.producers__text { grid-column: 9 / span 4; color: var(--stone); padding-top: .6rem; }
.producers__a { grid-column: 1 / span 5; margin-top: clamp(80px, 10vw, 180px); }
.producers__a img { width: 100%; aspect-ratio: 4 / 5; }
.producers__b { grid-column: 7 / span 3; margin-top: clamp(200px, 24vw, 420px); }
.producers__b img { width: 100%; aspect-ratio: 3 / 4.2; }
.producers__a figcaption, .producers__b figcaption { color: var(--stone); }
.producers__a figcaption > span:first-child, .producers__b figcaption > span:first-child { color: var(--copper-l); }
.producers__coda { grid-column: 10 / span 3; align-self: end; }
.producers__coda p { font-style: italic; font-size: clamp(1.1rem, .9rem + .5vw, 1.45rem); line-height: 1.3; color: var(--stone); margin: 0; }
.producers__coda .producers__same { font-style: normal; font-size: clamp(2rem, 1rem + 2.2vw, 3.6rem); line-height: .9; color: var(--cream); margin: .7em 0 0; }

/* =========================================================================
   05 · THE SPIRITS WE MAKE
   ========================================================================= */
.spirits__head { background: var(--paper); color: var(--ink); padding: clamp(100px, 13vw, 220px) 0 clamp(80px, 9vw, 150px); }
.spirits__title { font-size: clamp(4rem, 1rem + 14vw, 20rem); line-height: .8; }
.spirits__title .indent { text-align: right; color: var(--copper-d); }
.spirits__index { margin-top: clamp(72px, 9vw, 160px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.spirits__index li + li a { border-left: 1px solid var(--rule-p); }
.spirits__index a { display: grid; gap: .5rem; padding: 1.1rem 1.4rem 1.6rem; transition: color .5s var(--ease); }
.spirits__index li:first-child a { padding-left: 0; }
.spirits__n { color: var(--stone-d); }
.spirits__b { font-family: var(--f-display); font-stretch: 62%; font-weight: 780; text-transform: uppercase; font-size: clamp(1.6rem, 1rem + 1.4vw, 2.8rem); line-height: .9; }
.spirits__index em { font-size: .95rem; color: var(--stone-d); }
.spirits__index a:hover { color: var(--copper-d); }

.brand__kicker { display: flex; gap: 1.4em; margin-bottom: clamp(24px, 3vw, 44px); color: var(--stone); }
.brand__kicker span { color: var(--copper-l); }
.brand__head { font-size: clamp(3rem, 1rem + 5.4vw, 8.6rem); margin-bottom: clamp(28px, 3vw, 48px); }
.brand__head--xl { font-size: clamp(3.4rem, 1rem + 11vw, 16.5rem); line-height: .8; }
.brand__copy { color: var(--stone); max-width: 36ch; }
.brand__line { font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.3vw, 2.4rem); line-height: 1.15; letter-spacing: -.012em; max-width: 20ch; margin-top: 1.4rem; }

/* La Luna — night, image-led */
.brand--luna { display: grid; grid-template-columns: 7fr 5fr; min-height: 100vh; min-height: 100svh; background: var(--char); }
.brand--luna .brand__media { position: relative; overflow: hidden; min-height: 70vh; }
.brand--luna .brand__media picture, .brand--luna .brand__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand--luna .brand__body { align-self: end; padding: clamp(64px, 8vw, 140px) clamp(24px, 5vw, 96px) clamp(64px, 8vw, 140px); }
.agaves { font-style: italic; font-weight: 320; color: var(--copper-l); font-size: clamp(1.2rem, 1rem + .8vw, 1.8rem); line-height: 1.35; margin: 2rem 0; max-width: 24ch; }
.brand__stack { font-family: var(--f-display); font-weight: 560; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; line-height: 2.1; color: var(--cream); padding-top: 1.2rem; border-top: 1px solid var(--rule-d); }

/* Gustoso — type-led, earth */
.brand--gustoso { background: var(--earth); padding: clamp(110px, 14vw, 240px) 0; }
.gustoso__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: clamp(56px, 7vw, 120px); align-items: start; }
.gustoso__cane { grid-column: 1 / span 5; margin-left: calc(-1 * var(--gutter)); }
.gustoso__cane img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.brand--gustoso .brand__body { grid-column: 6 / span 3; padding-top: clamp(0px, 4vw, 80px); }
.gustoso__bottle { grid-column: 10 / span 3; margin-top: clamp(40px, 6vw, 110px); }
.gustoso__bottle img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Puesto — paper, collage of fruit, still, botanicals */
.brand--puesto { background: var(--paper); color: var(--ink); padding: clamp(110px, 14vw, 240px) 0; }
.brand--puesto .brand__kicker { color: var(--stone-d); }
.brand--puesto .brand__kicker span { color: var(--copper-d); }
.brand--puesto .brand__copy { color: var(--stone-d); }
.puesto__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.brand--puesto .brand__body { grid-column: 1 / span 4; grid-row: 1; }
.brand--puesto .brand__head { font-size: clamp(2.8rem, 1rem + 4.2vw, 7rem); }
.puesto__a { grid-column: 6 / span 4; grid-row: 1 / span 2; }
.puesto__a img { width: 100%; aspect-ratio: 2 / 3; }
.puesto__b { grid-column: 10 / span 3; grid-row: 1 / span 2; margin-top: 44%; margin-right: calc(-1 * var(--gutter)); }
.puesto__b img { width: 100%; aspect-ratio: 3 / 4; }
.puesto__c { grid-column: 2 / span 2; grid-row: 2; margin-top: clamp(40px, 6vw, 100px); }
.puesto__c img { width: 100%; aspect-ratio: 1; }

/* Gran Dovejo — the headline set into the sky */
.brand--dovejo { background: var(--char); padding-bottom: clamp(110px, 14vw, 240px); }
.dovejo__field { position: relative; overflow: hidden; height: min(100svh, 62vw); min-height: 520px; background: #d9d8d2; }
.dovejo__media { position: absolute; inset: -6% 0; will-change: transform; }
.dovejo__media picture, .dovejo__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dovejo__over { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(12px, 3vw, 48px)); z-index: 2; margin-inline: auto; }
.brand__kicker--ink { color: var(--ink); }
.brand__kicker--ink span { color: var(--copper-d); }
.brand__head--ink { color: var(--ink); font-size: clamp(3rem, 1rem + 5.2vw, 8.4rem); margin: 0; }
.dovejo__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; margin-top: clamp(-120px, -6vw, -40px); position: relative; z-index: 2; }
.dovejo__bottle { grid-column: 2 / span 3; }
.dovejo__bottle img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.dovejo__text { grid-column: 7 / span 4; margin-top: clamp(110px, 10vw, 190px); }

/* =========================================================================
   06 · FROM THIS… TO THIS — black, cinematic
   ========================================================================= */
.sequence { position: relative; background: var(--black); }
.sequence__frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sequence__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.sequence__img.is-active { opacity: 1; }
.sequence__img picture, .sequence__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sequence__frame::after { content: ""; position: absolute; inset: 0; background: rgba(11, 9, 8, .5); transition: background-color 1.2s var(--ease); }
.sequence.is-final .sequence__frame::after { background: rgba(11, 9, 8, .66); }
.sequence__index { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(28px, 5vh, 56px); display: flex; gap: 1.6rem; }
.sequence__index li { font-family: var(--f-display); font-weight: 560; font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(242,236,225,.35); padding-top: .8rem; border-top: 1px solid rgba(242,236,225,.2); transition: color .8s var(--ease), border-color .8s var(--ease); }
.sequence__index li span { margin-right: .5em; }
.sequence__index li.is-active { color: var(--cream); border-top-color: var(--copper-l); }
.sequence__steps { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; }
.sequence__step { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: var(--maxw); margin-inline: auto; padding: var(--header-h) var(--gutter); }
.sequence__step .marker { width: 100%; margin-bottom: clamp(24px, 4vh, 48px); }
.sequence__from { font-size: clamp(2.2rem, 1rem + 3.6vw, 5.4rem); color: var(--stone); margin: 0 0 .15em; }
.sequence__word { font-size: clamp(3.6rem, 1rem + 13vw, 19rem); margin: 0; hyphens: manual; }
.sequence__to { font-size: clamp(5rem, 1rem + 17vw, 24rem); margin: 0; line-height: .8; }
.sequence__prod { font-size: clamp(2rem, 1rem + 3.4vw, 5rem); color: var(--copper-l); margin: .4em 0 1.6em; }

/* =========================================================================
   07 · PHILOSOPHY — paper, quiet, then three enormous lines
   ========================================================================= */
.awards { background: var(--paper); color: var(--ink); padding: clamp(100px, 13vw, 220px) 0 clamp(100px, 12vw, 200px); }
.awards__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.awards__title { grid-column: 1 / span 9; font-size: clamp(3rem, 1rem + 6.4vw, 10rem); }
.awards__title .muted { color: var(--stone-d); }
.awards__text { grid-column: 8 / span 4; grid-row: 2; margin-top: clamp(64px, 8vw, 140px); color: var(--stone-d); }
.awards__lead { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); line-height: 1.18; font-weight: 320; color: var(--ink); letter-spacing: -.01em; }
.awards__conseq { font-family: var(--f-display); font-weight: 600; font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--copper-d); margin-top: 1.6rem; }
.awards__fig { grid-column: 2 / span 4; grid-row: 2; margin-top: clamp(64px, 8vw, 140px); }
.awards__fig img { width: 100%; aspect-ratio: 4 / 5; }
.firsts { margin-top: clamp(100px, 13vw, 220px); border-top: 1px solid var(--ink); }
.firsts li { display: flex; justify-content: space-between; align-items: baseline; gap: .25em; font-size: clamp(3rem, .8rem + 10.2vw, 16rem); line-height: .86; padding: .08em var(--gutter) .02em; border-bottom: 1px solid var(--rule-p); }
.firsts__f { color: var(--copper-d); }
.awards__close { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 3rem; margin-top: clamp(40px, 5vw, 80px); }
.awards__real { font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.6rem); line-height: 1.1; margin: 0; letter-spacing: -.012em; }
.awards__close .cta-link { margin-top: 0; }

/* =========================================================================
   08 · MANIFESTO — near-black, minimal, dramatic
   ========================================================================= */
.manifesto { background: var(--black); color: var(--cream); }
.manifesto__inner { padding-block: clamp(120px, 15vw, 260px) clamp(100px, 12vw, 200px); }
.manifesto__title { display: flex; flex-direction: column; font-size: clamp(3.6rem, 1rem + 11vw, 17rem); line-height: .82; }
.manifesto__l2 { color: var(--copper-l); padding-left: 18%; }
.js .manifesto__l2[data-reveal] { transition-delay: .3s; }
.manifesto__nots { margin: clamp(80px, 10vw, 180px) 0 clamp(80px, 10vw, 180px) 50%; }
.manifesto__nots p { font-style: italic; font-weight: 300; font-size: clamp(1.2rem, .95rem + .9vw, 1.9rem); line-height: 1.35; color: var(--stone); margin: 0; }
.manifesto__nots p:first-child { color: var(--cream); }
.manifesto__big { font-size: clamp(4rem, 1rem + 16vw, 25rem); line-height: .78; margin: 0 0 .3em; }
.manifesto__support { font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 1rem + 1vw, 2rem); color: var(--stone); margin: 0 0 clamp(80px, 10vw, 180px) 50%; max-width: 26ch; line-height: 1.2; }
.invite { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(28px, 3.6vw, 60px) 0; border-top: 1px solid var(--copper); border-bottom: 1px solid var(--copper); color: var(--copper-l); position: relative; isolation: isolate; transition: color .7s var(--ease); }
.invite::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; background: var(--copper); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease); }
.invite:hover { color: var(--black); }
.invite:hover::before { transform: scaleY(1); }
.invite__label { font-size: clamp(2rem, 1rem + 4.6vw, 7.4rem); line-height: .9; }
.invite__arrow { font-family: var(--f-display); font-weight: 200; font-size: clamp(2rem, 1rem + 4vw, 6.4rem); line-height: 1; transition: transform .8s var(--ease); }
.invite:hover .invite__arrow { transform: translateX(10px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--cream); padding: clamp(72px, 8vw, 120px) 0 clamp(28px, 3vw, 40px); overflow: hidden; border-top: 1px solid var(--rule-d); }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.footer__brand { grid-column: 1 / span 5; }
.footer__name { font-family: var(--f-display); font-weight: 760; font-stretch: 80%; font-size: .9375rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: .6rem; }
.footer__pm { font-family: var(--f-display); font-stretch: 62%; font-weight: 780; text-transform: uppercase; font-size: clamp(2rem, 1rem + 2vw, 3.4rem); line-height: .9; color: var(--copper-l); margin-bottom: 1.4rem; }
.footer__meta { font-style: italic; color: var(--stone); font-size: .95rem; line-height: 1.6; }
.footer__col { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 8 / span 2; }
.footer__h { font-family: var(--f-display); font-weight: 560; font-size: var(--fs-small); letter-spacing: .26em; text-transform: uppercase; color: var(--stone-m); margin-bottom: 1.2rem; }
.footer__col li { margin: 0; }
.footer__col a { display: inline-block; padding: .62rem 0; font-family: var(--f-display); font-size: .6875rem; font-weight: 520; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); transition: color .5s var(--ease); }
.footer__col a:hover { color: var(--cream); }
.footer__col a.footer__shop { color: var(--copper-l); }
.footer__social li:has(a[href=""]) { display: none; }
.footer__social a[href=""] { display: none; }
.footer__word::before { content: "Savior Spirits"; }
.footer__word { font-size: calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) * .168); line-height: .78; color: var(--earth-2); margin: clamp(72px, 9vw, 150px) 0 clamp(28px, 3vw, 48px) -.02em; white-space: nowrap; letter-spacing: -.02em; }
.footer__legal { border-top: 1px solid var(--rule-d); padding-top: 1.4rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; font-family: var(--f-display); font-size: .6875rem; line-height: 1.8; letter-spacing: .02em; color: var(--stone-m); }
.footer__compliance { grid-column: 1 / span 7; max-width: 96ch; margin: 0; }
.footer__copy { grid-column: 10 / -1; text-align: right; margin: 0; letter-spacing: .2em; text-transform: uppercase; font-size: .625rem; }

/* ---------- Mobile sticky shop CTA ---------- */
.mobile-shop { display: none; }

/* ---------- Age gate ---------- */
.age-gate { position: fixed; inset: 0; z-index: 120; background: var(--black); display: grid; place-items: center; padding: var(--gutter); }
.age-gate[hidden] { display: none; }
.age-gate__inner { max-width: 620px; display: flex; flex-direction: column; align-items: flex-start; }
.age-gate__mark { margin-bottom: 2.4rem; opacity: .9; }
.age-gate__title { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.12; letter-spacing: -.012em; margin: 1.2rem 0 2.4rem; }
.age-gate__actions { display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; }
.age-gate__denied { margin-top: 1.6rem; color: var(--copper-l); font-style: italic; }
.gate-open { overflow: hidden; }

/* =========================================================================
   Reveals — text fades, images uncover
   ========================================================================= */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js figure[data-reveal] { overflow: hidden; transform: none; opacity: 1; clip-path: inset(0 0 16% 0); transition: clip-path 1.8s var(--ease); }
.js figure[data-reveal] img { transform: scale(1.07); transition: transform 2.4s var(--ease); }
.js figure[data-reveal].is-in { clip-path: inset(0 0 -40px 0); }
.js figure[data-reveal].is-in img { transform: none; }

/* =========================================================================
   PHOTO CROPS — art direction for every photograph on the page.
   Each <img> carries data-crop="…"; its focal point is set here so the
   subject survives every aspect ratio. Adjust percentages to re-frame.
   ========================================================================= */
[data-crop] { object-fit: cover; }
[data-crop="mich-agave"] { object-position: 50% 58%; }
[data-crop="hero"]           { object-position: 36% 55%; }   /* producer + firebox left of centre; type sits lower-left on the darkened scrim */
[data-crop="made-harvest"]   { object-position: 50% 62%; }   /* keep both jimadores + piña, trim sky */
[data-crop="proc-raw"]       { object-position: 50% 48%; }   /* piña dead centre */
[data-crop="fermentation-key"]   { object-position: 50% 46%; }   /* nearest tina + the rows of vats and the Fermentación sign */
[data-crop="proc-distill"]   { object-position: 62% 30%; }   /* hands + hose at the still hatch */
[data-crop="proc-spirit"]    { object-position: 50% 55%; }   /* bottle line + still */
[data-crop="mich-field"]     { object-position: 50% 62%; }   /* agave rows foreground, mountains retained */
[data-crop="mich-agave"]     { object-position: 50% 55%; }
[data-crop="mich-mist"]      { object-position: 50% 78%; }   /* bottle neck to base + cloud line */
[data-crop="prod-jima"]      { object-position: 50% 58%; }   /* jimador + piña */
[data-crop="prod-fire"]      { object-position: 50% 30%; }   /* face, plank, firebox */
[data-crop="luna-bottles"]   { object-position: 50% 74%; }   /* three labels readable */
[data-crop="puesto-pina"]    { object-position: 45% 50%; }
[data-crop="puesto-still"]   { object-position: 45% 58%; }   /* bowl of fruit entering the still */
[data-crop="puesto-botanical"] { object-position: 50% 35%; }
[data-crop="dovejo-field"]   { object-position: 50% 58%; }   /* rider + horizon, sky kept as quiet space */
[data-crop="evid-key"]       { object-position: 50% 58%; }   /* both faces + foaming drum; trims roof and brick */
[data-crop="evid-1"]         { object-position: 40% 35%; }   /* both faces, laughing */
[data-crop="evid-2"]         { object-position: 44% 40%; }   /* both men, cup raised */
[data-crop="evid-3"]         { object-position: 46% 38%; }   /* both men at the microphone */
[data-crop="la-luna-bruto-manso"] { object-position: 50% 60%; }   /* all three bottles, labels readable; trims empty shelf top */
[data-crop="awards-table"]   { object-position: 50% 55%; }
[data-crop="seq-agave"]      { object-position: 50% 54%; }   /* harvester + piña band of a tall frame */
[data-crop="seq-fire"]       { object-position: 50% 44%; }   /* producer + firebox + copper hood */
[data-crop="seq-ferment"]    { object-position: 60% 60%; }   /* tinas */
[data-crop="seq-distill"]    { object-position: 50% 50%; }   /* producer left, copper still right */
[data-crop="seq-bottle"]     { object-position: 50% 38%; }   /* bottle shoulder + label; vinata behind */
@media (max-width: 899px) {
  [data-crop="hero"]         { object-position: 42% 50%; }
  [data-crop="proc-raw"]     { object-position: 50% 46%; }
  [data-crop="fermentation-key"] { object-position: 50% 48%; }
  [data-crop="la-luna-bruto-manso"] { object-position: 50% 62%; }
  [data-crop="evid-key"]     { object-position: 50% 52%; }
  [data-crop="proc-distill"] { object-position: 60% 26%; }
  [data-crop="luna-bottles"] { object-position: 50% 70%; }
  [data-crop="dovejo-field"] { object-position: 58% 60%; }
  [data-crop="seq-ferment"]  { object-position: 74% 55%; }
  [data-crop="seq-distill"]  { object-position: 32% 50%; }
  [data-crop="seq-bottle"]   { object-position: 30% 45%; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (min-width: 900px) {
  .sequence__img.is-active img { animation: drift 8s linear both; }
  @keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
}

@media (max-width: 1180px) {
  .nav__list { gap: 1.2rem; }
  .hero__copy { grid-column: 7 / span 6; }
}

@media (max-width: 899px) {
  :root { --header-h: 62px; --fs-small: .625rem; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* nav → full-screen index */
  .btn--nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .8rem; padding: .6rem 0 .6rem .6rem; min-height: 44px; font-family: var(--f-display); font-weight: 560; font-size: .625rem; letter-spacing: .26em; text-transform: uppercase; position: relative; z-index: 2; }
  .nav-toggle__lines { width: 22px; height: 7px; position: relative; }
  .nav-toggle__lines::before, .nav-toggle__lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
  .nav-toggle__lines::before { top: 0; }
  .nav-toggle__lines::after { top: 6px; }
  .nav-open .nav-toggle__lines::before { top: 3px; transform: rotate(45deg); }
  .nav-open .nav-toggle__lines::after { top: 3px; transform: rotate(-45deg); }
  .nav { position: fixed; inset: 0; z-index: 1; background: var(--black); display: flex; align-items: flex-end; padding: calc(var(--header-h) + 24px) var(--gutter) calc(110px + env(safe-area-inset-bottom)); visibility: hidden; opacity: 0; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
  .nav-open .nav { visibility: visible; opacity: 1; transition: opacity .5s var(--ease); }
  .nav__list { flex-direction: column; gap: 0; width: 100%; counter-reset: n; }
  .nav__list a { display: flex; align-items: baseline; gap: 1rem; font-stretch: 62%; font-weight: 780; font-size: clamp(3rem, 15vw, 4.6rem); letter-spacing: -.01em; line-height: 1; padding: .12em 0; border-bottom: 1px solid var(--rule-d); color: var(--cream); counter-increment: n; }
  .nav__list a::before { content: "0" counter(n); font-size: .625rem; font-stretch: 100%; font-weight: 560; letter-spacing: .26em; color: var(--copper-l); min-width: 2.4em; }
  .nav__list a::after { display: none; }
  .logo { position: relative; z-index: 2; }
  .nav-open { overflow: hidden; }
  .nav-open .site-header { background: var(--black); transform: none; }

  /* mobile sticky invitation — appears once you've left the hero */
  .mobile-shop { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(11, 9, 8, .94); border-top: 1px solid var(--rule-d); transform: translateY(110%); transition: transform .7s var(--ease); }
  .show-sticky .mobile-shop { transform: none; }
  .mobile-shop__btn { display: flex; align-items: stretch; justify-content: space-between; min-height: 50px; background: var(--copper); color: var(--black); font-family: var(--f-display); font-weight: 600; font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; }
  .mobile-shop__btn span:first-child { display: flex; align-items: center; padding-left: 1.2rem; }
  .mobile-shop__btn span:last-child { display: flex; align-items: center; padding: 0 1.2rem; border-left: 1px solid rgba(11,9,8,.3); letter-spacing: 0; font-size: .9rem; }
  .gate-open .mobile-shop, .cta-in-view .mobile-shop { transform: translateY(110%); }
  .nav-open .mobile-shop { transform: none; }

  /* hero */
  .hero__media { inset: 0; }
  .hero__content { padding-top: calc(var(--header-h) + 26vh); padding-bottom: 36px; }
  .hero__title { font-size: clamp(3.2rem, 17.4vw, 7.4rem); }
  .hero__foot { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero__lede, .hero__copy { grid-column: 1 / -1; }
  .hero__copy { font-size: .9rem; }
  .hero__cta .btn { width: 100%; justify-content: space-between; }
  .plate--hero { display: none; }
  .marker__mark { display: none; }
  .mark--cap { flex-basis: 100%; margin-left: 0; padding-left: 0; margin-top: .3rem; }
  figcaption { flex-wrap: wrap; }
  .hero__label { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .hero__label::before { display: none; }
  .hero__by::before { display: none; }
  .hero__by { letter-spacing: .2em; line-height: 1.7; }

  /* 02 */
  .made__title { font-size: clamp(3.4rem, 17.6vw, 8rem); }
  .made__grid { grid-template-columns: 1fr; }
  .made__fig { grid-column: 1; width: 78%; }
  .made__text { grid-column: 1; padding-top: 2.6rem; }
  .made__body { margin: 0 0 0 18%; }
  .cascade li { font-size: clamp(2rem, 10vw, 3.6rem); }
  .cascade li:nth-child(2) { padding-left: 8%; }
  .cascade li:nth-child(3) { padding-left: 16%; }
  .cascade li:nth-child(4) { padding-left: 24%; }
  .cascade li:nth-child(5) { padding-left: 32%; }
  .made__again { margin-left: 32%; }
  .interlude { min-height: 88svh; }
  .interlude p { font-size: clamp(2.2rem, 11.4vw, 4.6rem); padding-left: .3em; }
  .process__row { grid-template-columns: 2.2rem minmax(0, 1fr); row-gap: .9rem; }
  .process__w { font-size: clamp(2.4rem, 12vw, 4.8rem); }
  .process__img { grid-column: 2; }
  .process__img img { aspect-ratio: 16 / 8; }
  .process__arrow { padding-left: 2.2rem; }
  .made__close { flex-direction: column; align-items: flex-start; }
  .made__do { font-size: clamp(3.2rem, 17vw, 7rem); }

  /* 03 */
  .fullbleed__title { font-size: clamp(3.6rem, 19vw, 8rem); }
  .mich__grid { grid-template-columns: 1fr; }
  .mich__intro, .mich__text { grid-column: 1; }
  .mich__fig { grid-column: 1; grid-row: 3; width: 72%; margin-top: 3rem; }
  .mich__fig img { aspect-ratio: 3 / 4; }
  .mich__not { font-size: clamp(2.6rem, 13.4vw, 5.4rem); }
  .mich__ours { font-size: clamp(2.6rem, 13vw, 5.4rem); }
  .mich__text { margin-top: 2.8rem; }
  .widescreen { height: auto; min-height: 0; aspect-ratio: 4 / 5; }

  /* 04 */
  .producers__title { font-size: clamp(3rem, 14.6vw, 7rem); }
  .producers__title .indent { padding-left: 0; }
  .producers__names { margin-left: 0; letter-spacing: .38em; }
  .producers__fig { padding-inline: 0; }
  .producers__fig > img { aspect-ratio: 4 / 3; }
  .producers__fig.evidence { width: 100%; max-width: none; }
  .producers__fig.evidence { aspect-ratio: auto; padding: 22px 16px 16px; }
  .evidence::after { inset: 8px; }
  .evidence__head { font-size: clamp(2.2rem, 11.4cqw, 3.6rem); margin: 6px 0 .4em; }
  .evidence__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 5px; }
  .evidence__key { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1 / 1; }
  .evidence__a { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .evidence__b, .evidence__c { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
  .producers__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .producers__lead, .producers__text, .producers__coda { grid-column: 1 / -1; }
  .producers__text { margin-top: 1.6rem; }
  .producers__a { grid-column: 1 / span 4; margin-top: 3.6rem; }
  .producers__b { grid-column: 3 / -1; margin-top: 1.6rem; }
  .producers__coda { margin-top: 3.6rem; }

  /* 05 */
  .spirits__title { font-size: clamp(3.6rem, 18vw, 8rem); }
  .spirits__index { grid-template-columns: 1fr 1fr; }
  .spirits__index li:nth-child(3) a { border-left: 0; padding-left: 0; }
  .spirits__index li:nth-child(n+3) a { border-top: 1px solid var(--rule-p); }
  .brand--luna { grid-template-columns: 1fr; min-height: 0; }
  .brand--luna .brand__media { aspect-ratio: 4 / 5; min-height: 0; }
  .brand--luna .brand__body { padding: 56px var(--gutter) 88px; }
  .brand__head { font-size: clamp(2.8rem, 13.6vw, 5.6rem); }
  .brand__head--xl { font-size: clamp(3rem, 15.4vw, 7rem); }
  .gustoso__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gustoso__cane { grid-column: 1 / span 5; }
  .brand--gustoso .brand__body { grid-column: 1 / -1; padding-top: 1.6rem; }
  .gustoso__bottle { grid-column: 3 / -1; margin-top: 2.4rem; }
  .puesto__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .brand--puesto .brand__body { grid-column: 1 / -1; margin-bottom: 2.6rem; }
  .brand--puesto .brand__head { font-size: clamp(2.8rem, 13vw, 5.4rem); }
  .puesto__a { grid-column: 1 / span 4; grid-row: 2; }
  .puesto__b { grid-column: 4 / -1; grid-row: 3; margin-top: -30%; margin-right: 0; }
  .puesto__c { display: none; }
  .dovejo__field { height: auto; min-height: 0; aspect-ratio: auto; background: var(--char); overflow: visible; }
  .dovejo__media { position: relative; inset: auto; transform: none !important; aspect-ratio: 4 / 3; overflow: hidden; }
  .dovejo__over { position: static; padding-top: 80px; padding-bottom: 32px; }
  .brand__kicker--ink { color: var(--stone); }
  .brand__kicker--ink span { color: var(--copper-l); }
  .brand__head--ink { color: var(--cream); font-size: clamp(2.8rem, 13.6vw, 5.6rem); }
  .dovejo__field { display: flex; flex-direction: column-reverse; }
  .dovejo__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 3rem; }
  .dovejo__bottle { grid-column: 2 / span 4; }
  .dovejo__text { grid-column: 1 / -1; margin-top: 2rem !important; }

  /* 06 — lighter on phones: no drift, index hidden */
  .sequence__index { display: none; }
  .sequence__word { font-size: clamp(3rem, 16vw, 7rem); }
  .sequence__to { font-size: clamp(4rem, 22vw, 9rem); }

  /* 07 */
  .awards__grid { grid-template-columns: 1fr; }
  .awards__title, .awards__text, .awards__fig { grid-column: 1; grid-row: auto; }
  .awards__title { font-size: clamp(2.8rem, 13.4vw, 6rem); }
  .awards__fig { width: 80%; margin-top: 3rem; }
  .awards__text { margin-top: 2.4rem; }
  .firsts li { flex-direction: column; gap: 0; font-size: clamp(3rem, 16vw, 7rem); padding-block: .14em .1em; }

  /* 08 */
  .manifesto__title { font-size: clamp(3.2rem, 15.4vw, 7rem); }
  .manifesto__l2 { padding-left: 0; }
  .manifesto__nots, .manifesto__support { margin-left: 0; }
  .manifesto__big { font-size: clamp(4rem, 21vw, 9rem); }
  .invite__label { font-size: clamp(2rem, 10vw, 4rem); }

  .footer__top { grid-template-columns: 1fr 1fr; gap: 2.6rem; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col, .footer__col:first-of-type { grid-column: span 1; }
  .footer__legal { grid-template-columns: 1fr; }
  .footer__compliance, .footer__copy { grid-column: 1; text-align: left; }
}

@media (max-width: 360px) {
  .logo__word { font-size: .9rem; letter-spacing: .24em; white-space: nowrap; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js figure[data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .js figure[data-reveal] img, .hero__img { transform: none !important; }
  .js .hero__title .line > span, .js .hero__label, .js .hero__foot, .js .plate--hero { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-shop, .age-gate, body::after { display: none !important; }
  body { background: #fff; color: #000; }
}