/* ══ Bonsoir ══════════════════════════════════════════════════════
   Nothing on <body> or <main> may create a stacking/containing
   context (no transform, filter, backdrop-filter, will-change) —
   the fixed bottle stage has to keep painting behind the copy.
   ═════════════════════════════════════════════════════════════════ */

:root{
  --ink:        #0B0406;
  --wine-deep:  #16060B;
  --wine:       #2C0A13;
  --wine-lift:  #3E0F1D;

  --gold:       #C39A55;
  --gold-lift:  #E4CB96;
  --gold-deep:  #8A6730;
  --gold-quiet: #9A7C46;

  --paper:      #F3EDE3;   /* used sparingly, on purpose */
  --dim:        #A98F82;

  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --caps: 'Cormorant SC', 'Cormorant Garamond', serif;

  --pad: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* the warm cellar glow the bottle sits inside */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% 2%,  rgba(78,18,30,.34), transparent 64%),
    radial-gradient(95% 55% at 50% 104%, rgba(50,12,21,.44), transparent 68%),
    linear-gradient(180deg, #0D0508 0%, #080305 52%, #100509 100%);
}

img{ max-width:100%; display:block }
em{ font-style:italic }

/* ── gold type ─────────────────────────────────────────────────── */
.gold, .display em, .hero__word, .curtain__word, .foot__word{
  background:linear-gradient(176deg, var(--gold-lift) 0%, var(--gold) 44%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* the sun-and-waves mark: an alpha mask filled with the brand gold, so the
   strokes stay crisp and take a gradient instead of a flat fill */
.mark{
  display:block;
  aspect-ratio:1031 / 411;
  background:linear-gradient(172deg, var(--gold-lift) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-mask:url('../img/mark.png') center / contain no-repeat;
          mask:url('../img/mark.png') center / contain no-repeat;
}

.eyebrow{
  font-family:var(--sans);
  font-size:.66rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-quiet);
}

.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem);
  line-height:.98;
  letter-spacing:-.012em;
  color:var(--paper);
  margin-top:.42em;
}
.display em{ font-weight:400 }

.body{
  font-size:clamp(.95rem, 1.15vw, 1.06rem);
  line-height:1.72; font-weight:300;
  color:#D8C8BE;
  max-width:34ch;
  margin-top:1.7em;
}
.body--dim{ color:var(--dim); margin-top:1.1em }

.link{
  display:inline-block; margin-top:2.2em;
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); text-decoration:none;
  padding-bottom:.55em; border-bottom:1px solid rgba(195,154,85,.34);
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.link:hover{ color:var(--gold-lift); border-color:var(--gold-lift) }

/* ── curtain ───────────────────────────────────────────────────── */
.curtain{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity 1s var(--ease), visibility 1s;
}
.curtain.done{ opacity:0; visibility:hidden }
.curtain__inner{ display:grid; justify-items:center; gap:26px }
.curtain__mark{ width:190px; opacity:.9 }
.curtain__word{
  font-family:var(--caps); font-weight:300;
  font-size:1.9rem; letter-spacing:.5em; text-indent:.5em;
}
.curtain__bar{ width:172px; height:1px; background:rgba(195,154,85,.18); overflow:hidden }
.curtain__bar i{ display:block; height:100%; width:0; background:var(--gold); transition:width .35s linear }

/* ── the fixed bottle stage ────────────────────────────────────── */
.stage{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.stage.lit{ opacity:1 }
.stage canvas{ position:absolute; inset:0; width:100%; height:100% }

/* ── top bar ───────────────────────────────────────────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad);
  opacity:0; transform:translateY(-12px);
  transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s;
}
.topbar.lit{ opacity:1; transform:none }
.topbar.solid{
  padding-top:16px; padding-bottom:16px;
  background:linear-gradient(180deg, rgba(8,3,5,.94) 0%, rgba(8,3,5,.74) 62%, rgba(8,3,5,0) 100%);
}
.topbar__brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--gold);
}
.topbar__mark{ width:38px; opacity:.95 }
.topbar__brand span{
  font-family:var(--caps); font-size:1.02rem;
  letter-spacing:.3em; text-indent:.3em; font-weight:300;
}
.topbar__nav{ display:flex; gap:38px }
.topbar__nav a, .topbar__cta{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; color:var(--dim);
  transition:color .45s var(--ease);
}
.topbar__nav a:hover{ color:var(--gold-lift) }
.topbar__cta{
  color:var(--gold);
  border:1px solid rgba(195,154,85,.3);
  padding:12px 22px; border-radius:100px;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.topbar__cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold) }

.topbar__end{ display:flex; align-items:center; gap:16px }
.topbar__nav a.here, .topbar__cta.here{ color:var(--gold-lift) }
.topbar__cta.here{ background:rgba(195,154,85,.12); border-color:rgba(195,154,85,.55) }

.topbar__menu{
  display:none; min-width:52px; text-align:right;
  font-family:var(--sans); font-size:.6rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-quiet); background:none; border:0; cursor:pointer;
  padding:12px 0;
}

/* ── full-screen menu ──────────────────────────────────────────── */
.menu[hidden]{ display:none }   /* author display: wins over [hidden], so say it */
.menu{
  position:fixed; inset:0; z-index:55;
  padding:0 var(--pad);
  display:grid; place-items:center;
  background:linear-gradient(180deg, #100509, #070204);
  opacity:0; transition:opacity .45s var(--ease);
}
.menu.open{ opacity:1 }
.menu nav{ display:grid; justify-items:center; gap:6px; text-align:center }
.menu a{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.7rem, 7vw, 2.6rem);
  line-height:1.5; color:var(--paper); text-decoration:none;
  transition:color .4s var(--ease);
}
.menu a:hover{ color:var(--gold) }

/* ── sub-page head ─────────────────────────────────────────────── */
.sub main{ padding-top:clamp(96px, 13vh, 150px) }
.sub main.flush{ padding-top:0 }   /* the page leads with a photo band */

/* body::before is a fixed layer at z-index 0, so anything that is not itself
   positioned gets painted underneath it. Every top-level block must opt in. */
.sub main > *{ position:relative; z-index:2 }

.pagehead{
  position:relative; z-index:2;
  padding:clamp(50px,9vh,120px) var(--pad) clamp(30px,5vh,60px);
  max-width:1500px; margin:0 auto;
}
.pagehead .display{ margin-top:.3em }
.pagehead .body{ margin-top:2em; max-width:38ch }

/* ── hero ──────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  padding:0 var(--pad);
}

/* sits *below* the stage: the bottle stands in front of the wordmark */
.hero__word{
  position:absolute; left:0; right:0; top:24%;
  text-align:center;
  font-family:var(--caps); font-weight:300;
  font-size:clamp(4.2rem, 18.5vw, 18rem);
  line-height:.8; letter-spacing:.04em; text-indent:.04em;
  opacity:.88;
  white-space:nowrap;
}

.hero__copy{ position:absolute; z-index:2 }
.hero__copy--lead{ left:var(--pad); top:53%; }
.hero__tag{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem, 3.4vw, 3.1rem);
  line-height:1.04; letter-spacing:-.01em;
  margin-top:.6em; color:var(--paper);
  text-shadow:0 2px 34px rgba(11,4,6,.9);
}
.hero__tag em{ color:var(--gold-lift) }

.hero__copy--sub{ right:var(--pad); bottom:28%; text-align:right }
.lede{
  font-size:.92rem; line-height:1.85; color:var(--dim);
  text-shadow:0 2px 30px rgba(11,4,6,.9);
}

.hero__meta{
  position:absolute; z-index:2; bottom:16%;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-quiet);
}
.hero__meta span{
  display:block; font-family:var(--serif); font-size:1.9rem;
  letter-spacing:0; text-transform:none; color:var(--gold); margin-bottom:.1em;
}
.hero__meta--l{ left:var(--pad) }
.hero__meta--r{ right:var(--pad); text-align:right }

.scrollcue{
  position:absolute; z-index:2; left:50%; bottom:34px;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:12px;
  font-size:.55rem; letter-spacing:.4em; text-transform:uppercase;
  color:rgba(169,143,130,.7);
}
.scrollcue i{
  width:1px; height:52px;
  background:linear-gradient(180deg, var(--gold), transparent);
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%{ transform:scaleY(0); transform-origin:top }
  45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* ── chapters (the bottle keeps turning behind these) ──────────── */
.chapter{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; align-items:center;
  padding:0 var(--pad);
}
.chapter--left{ justify-content:flex-start }
.chapter--right{ justify-content:flex-end }
.chapter--right .block{ text-align:right }
.chapter--right .body{ margin-left:auto }
.block{ width:min(42ch, 46vw) }

.specs{
  list-style:none; display:flex; gap:38px; margin-top:2.6em;
  justify-content:inherit;
}
.chapter--right .specs{ justify-content:flex-end }
.specs li{ display:grid; gap:.35em }
.specs b{
  font-family:var(--serif); font-weight:400;
  font-size:1.55rem; color:var(--gold); line-height:1;
}
.specs span{
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}

.stamp{
  margin-top:2.8em;
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-quiet);
}

/* ── the sheet ─────────────────────────────────────────────────────
   Everything after the turntable lives on one opaque page. Because the
   bottle sits on a fixed layer underneath, scrolling literally draws
   this sheet up over it — the bottle is covered rather than faded.   */
.sheet{
  position:relative; z-index:2;
  margin-top:16vh;                       /* the bottle gets a beat alone first */
  border-top:1px solid rgba(195,154,85,.30);
  border-radius:5px 5px 0 0;
  background:
    radial-gradient(140% 32% at 50% 0%, rgba(92,24,39,.46), transparent 74%),
    linear-gradient(180deg, #140710 0%, #0B0408 26%, #080305 62%, #100609 100%);
  box-shadow:
    0 -46px 90px rgba(0,0,0,.92),
    0 -12px 30px rgba(0,0,0,.7);
}
/* a gleam along the leading edge, like light catching the top of a turned page */
.sheet::before{
  content:'';
  position:absolute; left:6%; right:6%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,220,175,.85) 35%, rgba(240,220,175,.85) 65%, transparent);
}

/* ── the cover stack ───────────────────────────────────────────
   Each panel sticks at the top of the viewport while the next one
   scrolls up over it, so sections cover rather than replace. Later
   siblings paint above earlier ones, so no z-index juggling — but
   every panel has to be opaque or you see straight through it.  */
.stack > .panel{
  position:sticky; top:0;
  min-height:100svh;
}
/* Sticky makes every panel its own stacking context, so paint order would
   normally follow the DOM — except .band sets z-index:2 of its own, which
   floated the photo above whatever was supposed to cover it. Stamping an
   ascending order here makes the cover independent of what any component
   sets for itself. */
.stack > .panel:nth-child(1){ z-index:1 }
.stack > .panel:nth-child(2){ z-index:2 }
.stack > .panel:nth-child(3){ z-index:3 }
.stack > .panel:nth-child(4){ z-index:4 }
.stack > .panel:nth-child(5){ z-index:5 }
.stack > .panel:nth-child(6){ z-index:6 }
.stack > .panel:nth-child(7){ z-index:7 }
.stack > .panel:nth-child(8){ z-index:8 }

/* the closing panel scrolls normally — a sticky panel taller than the viewport
   puts its own bottom out of reach, which is how the footer went missing */
.stack > .panel:last-child,
.stack > .panel--free{ position:relative; min-height:auto }
.panel{ --covered:0 }
.panel::after{                     /* the veil deepens as the next panel covers */
  content:'';
  position:absolute; inset:0;
  background:#050103;
  opacity:calc(var(--covered) * .62);
  pointer-events:none;
  z-index:5;
}
/* and the panel eases back a touch, so it reads as depth not a hard cut */
.stack > .panel > *{ transform:scale(calc(1 - var(--covered) * .04)) }
.stack > .panel:last-child::after{ display:none }

/* the craft details: bottle in the middle third, copy in a side third */
.craft{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:clamp(20px,4vw,64px);
  align-items:center;
  padding:clamp(96px,13vh,160px) var(--pad);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(62,15,29,.34), transparent 70%),
    linear-gradient(180deg, #0D0508 0%, #070204 58%, #100509 100%);
}
.craft__img{
  grid-column:2; grid-row:1;
  justify-self:center;
  min-width:0; max-width:100%;      /* or the figure sizes to the image's
                                       intrinsic width and blows the grid open */
}
.craft__img img{
  max-height:52vh; width:auto; max-width:100%;
  border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.7);
}
.craft__copy{ grid-column:1; grid-row:1 }
.craft--flip .craft__copy{ grid-column:3 }
.craft__title{
  font-family:var(--caps); font-weight:400;
  font-size:clamp(1rem,1.5vw,1.25rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-top:1.4em;
}
.craft__copy .body{ margin-top:1.4em; max-width:32ch }

.tail{
  display:grid; align-content:center;
  background:linear-gradient(180deg, #0B0407 0%, #070204 55%, #100509 100%);
}

/* ── full-bleed photo bands ─────────────────────────────────────
   The room photographs run edge to edge and carry the copy on top
   of them. No captions — the picture makes the argument, the type
   just names it.                                                 */
.band{
  position:relative; z-index:2;
  margin:0;
  min-height:100svh;
  display:grid;
  align-content:center;      /* photo and copy stay one group, centred together */
  overflow:hidden;
}
.band--top{ min-height:min(92vh, 900px) }

.band > img{
  position:relative; z-index:0;
  width:100%; height:auto;   /* natural aspect — the frame is never cropped */
}

/* a wash pulled across the copy side, plus a light vignette, so the type
   holds up over whatever happens to be in the frame */
.band--scrim::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, transparent 38%, rgba(6,2,4,.5) 56%, rgba(6,2,4,.92) 72%),
    linear-gradient(90deg, rgba(6,2,4,.6) 0%, rgba(6,2,4,.24) 46%, transparent 76%);
}

.band__copy{
  position:relative; z-index:2;
  width:100%; max-width:1500px;
  /* rides onto the lower fifth of the photograph. Expressed in vw so the
     overlap stays the same proportion of the frame at every width. */
  margin:-9vw auto 0;
  padding:0 var(--pad);
}
/* type tracks the width so the copy always sits in proportion to the photo */
.band__copy .eyebrow{ font-size:clamp(.5rem, 1.05vw, .66rem) }
.band__copy .display{ font-size:clamp(1.5rem, 5vw, 4.6rem) }
.band__copy .body{
  font-size:clamp(.74rem, 1.5vw, 1.06rem);
  margin-top:clamp(.9em, 1.6vw, 1.5em);
  max-width:40ch;
}

/* the home-page line sits straight on the picture, held up by a glow alone */
.band--quote{ min-height:100svh }
.band--quote .band__copy{ text-align:center }
.band--quote blockquote{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.2rem, 4.2vw, 3.7rem);
  line-height:1.2; letter-spacing:-.01em;
  max-width:20ch; margin:0 auto;
  color:var(--paper);
  text-shadow:
    0 2px 24px rgba(4,1,3,.96),
    0 0 60px rgba(4,1,3,.9),
    0 0 120px rgba(4,1,3,.75);
}
.band--quote em{ color:var(--gold-lift) }
.band .display, .band .eyebrow, .band .body{
  text-shadow:0 2px 26px rgba(4,1,3,.85);
}

/* ── onward cards ──────────────────────────────────────────────── */
.onward{
  position:relative; z-index:2;
  max-width:1500px; margin:0 auto;
  padding:clamp(40px,7vh,90px) var(--pad) clamp(60px,9vh,120px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,34px);
}
.onward--one{ grid-template-columns:1fr; max-width:900px }
.onward__card{
  display:grid; gap:1.1em; align-content:start;
  padding:clamp(30px,4vw,52px);
  border:1px solid rgba(195,154,85,.18); border-radius:3px;
  background:linear-gradient(160deg, rgba(62,15,29,.34), rgba(20,7,12,.2));
  text-decoration:none;
  transition:border-color .55s var(--ease), background .55s var(--ease), transform .55s var(--ease);
}
.onward__card:hover{
  border-color:rgba(195,154,85,.5);
  background:linear-gradient(160deg, rgba(78,19,36,.5), rgba(24,8,14,.3));
  transform:translateY(-3px);
}
.onward__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.12;
  color:var(--paper);
}
.onward__title em{ color:var(--gold-lift) }
.onward__go{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-quiet);
}

/* ── ritual ────────────────────────────────────────────────────── */
.ritual{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,6vw,90px);
  align-items:center;
  padding:clamp(70px,11vh,150px) var(--pad);
}
.ritual__img{
  width:100%;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.7));
}
.serves{ list-style:none; margin-top:2.8em; display:grid; gap:1.6em }
.serves li{
  display:grid; gap:.5em;
  padding-top:1.5em; border-top:1px solid rgba(195,154,85,.16);
}
.serves b{
  font-family:var(--caps); font-weight:400;
  font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.serves span{ font-size:.92rem; line-height:1.7; color:var(--dim) }

/* ── reserve ───────────────────────────────────────────────────── */
.reserve{
  position:relative; z-index:2;
  display:grid; align-content:center;
  padding:clamp(90px,13vh,150px) var(--pad);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(62,15,29,.34), transparent 70%),
    linear-gradient(180deg, #0D0508 0%, #070204 58%, #100509 100%);
}
.reserve__inner{
  width:100%; max-width:1500px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(34px,6vw,90px); align-items:start;
}
.reserve__form{ max-width:760px }
.reserve__img img{ width:100%; height:auto; display:block; border-radius:2px }
.facts{ margin-top:34px; display:grid; gap:0 }
.facts div{
  display:flex; justify-content:space-between; gap:20px;
  padding:16px 0; border-top:1px solid rgba(195,154,85,.14);
}
.facts dt{
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
  padding-top:.35em;
}
.facts dd{ font-family:var(--serif); font-size:1.15rem; color:var(--gold) }

.choices{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.choice input{ position:absolute; opacity:0; pointer-events:none }
.choice__box{
  display:block; cursor:pointer;
  padding:28px 30px;
  border:1px solid rgba(195,154,85,.18);
  border-radius:3px;
  background:rgba(44,10,19,.28);
  transition:border-color .5s var(--ease), background .5s var(--ease);
}
.choice__box b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:1.4rem; color:var(--paper); margin-bottom:.5em;
}
.choice__box i{ font-style:normal; font-size:.85rem; line-height:1.65; color:var(--dim) }
.choice__box:hover{ border-color:rgba(195,154,85,.4) }
.choice input:checked + .choice__box{
  border-color:var(--gold);
  background:rgba(62,15,29,.45);
}
.choice input:checked + .choice__box b{ color:var(--gold-lift) }
.choice input:focus-visible + .choice__box{ outline:2px solid var(--gold); outline-offset:3px }

.fields{ display:grid; grid-template-columns:1fr 1fr; gap:0 34px; margin-top:44px }
.field{ position:relative; grid-column:span 1 }
.field--wide{ grid-column:1 / -1 }

.field input{
  width:100%; background:none; border:0;
  border-bottom:1px solid rgba(195,154,85,.22);
  padding:26px 0 12px;
  font-family:var(--sans); font-size:1rem; font-weight:300;
  color:var(--paper);
  transition:border-color .5s var(--ease);
}
.field input:focus{ outline:none; border-color:var(--gold) }
.field label{
  position:absolute; left:0; top:26px;
  font-size:.95rem; color:var(--dim);
  pointer-events:none;
  transition:transform .45s var(--ease), font-size .45s var(--ease), color .45s var(--ease), letter-spacing .45s var(--ease);
  transform-origin:left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-24px);
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-quiet);
}
.field.bad input{ border-color:#B4544F }

/* the quantity picker: a select cannot use the floating-label trick, so its
   label simply sits where a floated one would land */
.field--pick{ display:grid; align-content:end; padding-top:26px }
.field--pick label{
  position:static; transform:none;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-quiet);
  margin-bottom:11px;
}
.field--pick select{
  appearance:none; -webkit-appearance:none;
  width:100%; background:transparent; border:0;
  border-bottom:1px solid rgba(195,154,85,.22);
  padding:0 26px 12px 0;
  font-family:var(--sans); font-size:1rem; font-weight:300;
  color:var(--paper); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23C39A55' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px bottom 16px;
  transition:border-color .5s var(--ease);
}
.field--pick select:focus{ outline:none; border-color:var(--gold) }
.field--pick option{ background:#120609; color:var(--paper) }

.submit{
  margin-top:46px;
  font-family:var(--sans); font-size:.63rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  border:1px solid var(--gold); border-radius:100px;
  padding:19px 40px; cursor:pointer;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.submit:hover{ background:var(--gold-lift); border-color:var(--gold-lift) }

.formnote{
  margin-top:20px; min-height:1.2em;
  font-size:.7rem; letter-spacing:.14em; color:var(--gold-quiet);
}
.formnote.bad{ color:#C97B76 }

/* ── footer ────────────────────────────────────────────────────── */
.foot{
  position:relative; z-index:2;
  display:grid; justify-items:center; gap:16px;
  padding:clamp(60px,9vh,110px) var(--pad) 48px;
  border-top:1px solid rgba(195,154,85,.13);
  text-align:center;
}
.foot__mark{ width:168px; opacity:.85 }
.foot__word{
  font-family:var(--caps); font-weight:300;
  font-size:1.7rem; letter-spacing:.46em; text-indent:.46em;
}
.foot__line, .foot__fine{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
}
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin-top:10px }
.foot__nav a{
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-quiet); text-decoration:none;
  transition:color .45s var(--ease);
}
.foot__nav a:hover{ color:var(--gold-lift) }
.foot__fine{ margin-top:22px; color:rgba(169,143,130,.5) }

/* ── grain ─────────────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-60px; z-index:40; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── reveals ───────────────────────────────────────────────────── */
[data-r]{
  opacity:0; transform:translateY(22px);
  transition:opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
[data-r].seen{ opacity:1; transform:none }

/* ── responsive ────────────────────────────────────────────────── */
/* ══ responsive ═══════════════════════════════════════════════════
   Four steps: wide desktop, small desktop / landscape tablet,
   portrait tablet, phone. Each one only moves what actually breaks.
   ═════════════════════════════════════════════════════════════════ */

/* ── small desktop & landscape tablet ──────────────────────────── */
@media (max-width:1180px){
  .block{ width:min(40ch, 60vw) }
  .reserve__inner{ grid-template-columns:1fr; gap:clamp(40px,6vh,60px) }
  .reserve__aside{ max-width:620px }
  .craft{ gap:clamp(16px,3vw,40px) }
  .craft__copy .body{ max-width:28ch }
  .onward{ gap:16px }
}

/* ── the craft grid gives up its three columns before the type does ── */
@media (max-width:960px){
  .craft{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,4vw,48px);
  }
  .craft__img{ grid-column:2 }
  .craft__copy{ grid-column:1 }
  .craft--flip .craft__img{ grid-column:1 }
  .craft--flip .craft__copy{ grid-column:2 }
  .craft__img img{ max-height:46vh }
}

/* ── portrait tablet ───────────────────────────────────────────── */
@media (max-width:860px){
  .hero__copy--sub{ max-width:44vw }
  .lede{ font-size:.86rem }
  .band__copy .body{ max-width:34ch }
  .ritual{ grid-template-columns:1fr; gap:clamp(24px,4vh,40px) }
  .ritual__img{ max-width:520px; margin:0 auto }
  .choices{ gap:14px }
}

/* ── the bar collapses once its two items stop fitting ─────────── */
/* ── the bar collapses once its two items stop fitting ─────────── */
@media (max-width:700px){
  .topbar__nav{ display:none }
  .topbar__menu{ display:block }
}

/* ── phone ─────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{ --pad:20px }

  .topbar{ padding:14px var(--pad) }
  .topbar__brand span{ font-size:.9rem; letter-spacing:.24em; text-indent:.24em }
  .topbar__mark{ width:30px }
  .topbar__cta{ padding:10px 16px; font-size:.55rem; letter-spacing:.24em }

  .menu a{ font-size:clamp(1.6rem, 8vw, 2.2rem) }

  /* hero: bottle high, copy stacked underneath it */
  .hero__word{ top:13%; font-size:clamp(3.2rem, 18vw, 8rem) }
  .hero__copy--lead{ top:auto; bottom:26%; left:var(--pad); right:var(--pad) }
  .hero__tag{ font-size:1.75rem }
  .hero__copy--sub{ display:none }
  .hero__meta{ bottom:11% }
  .hero__meta span{ font-size:1.3rem }
  .scrollcue{ bottom:18px }
  .scrollcue i{ height:32px }

  /* chapters: copy sits under the bottle on a scrim rather than beside it */
  .chapter{ min-height:100svh; align-items:flex-end; padding-bottom:9vh }
  .chapter--left, .chapter--right{ justify-content:center }
  .chapter--right .block{ text-align:left }
  .chapter--right .body{ margin-left:0 }
  .chapter--right .specs{ justify-content:flex-start }
  .block{
    width:100%;
    padding:26px 22px 24px;
    border-radius:3px;
    background:linear-gradient(180deg, rgba(11,4,6,0), rgba(11,4,6,.86) 22%, rgba(11,4,6,.94));
  }
  .display{ font-size:2.4rem }
  .body{ max-width:none; margin-top:1.3em }
  .specs{ gap:24px; margin-top:2em }
  .specs b{ font-size:1.3rem }

  /* Nothing to override: the photograph is contained, so on a phone it simply
     becomes a wide strip near the top and the copy takes the room underneath.
     Only the strip's vertical placement needs a nudge, since there is far more
     spare height on a phone than on a desktop. */
  .stack > .panel{ min-height:auto }
  .band, .panel.band, .band--quote, .panel.band--quote{
    min-height:auto; margin:0;
    padding:clamp(44px,8vh,90px) 0;
  }
  .band__copy .body{ max-width:none }
  .band--scrim::before{
    background:linear-gradient(180deg, transparent 22%, rgba(6,2,4,.6) 46%, rgba(6,2,4,.95) 74%);
  }
  .band--quote blockquote{ font-size:clamp(1.5rem,6.6vw,2.1rem); max-width:15ch }

  /* craft: photo first, copy underneath */
  .craft{
    grid-template-columns:1fr;
    gap:24px;
    padding:clamp(56px,9vh,90px) var(--pad);
  }
  .craft__img, .craft__copy,
  .craft--flip .craft__img, .craft--flip .craft__copy{ grid-column:1 }
  .craft__img{ grid-row:1 }
  .craft__copy{ grid-row:2 }
  .craft__img{ justify-self:stretch }
  .craft__img img{ max-height:40svh; width:auto; margin:0 auto; box-shadow:none }
  .craft__copy .body{ max-width:none }

  .ritual{ padding-top:clamp(50px,8vh,90px) }
  .serves li{ padding-top:1.2em }

  .pagehead{ padding:clamp(34px,6vh,70px) var(--pad) clamp(20px,3vh,40px) }
  .pagehead .body{ max-width:none }

  .onward{ grid-template-columns:1fr; padding:clamp(30px,5vh,60px) var(--pad) }
  .onward__card{ padding:26px 24px; gap:.9em }
  .onward__title{ font-size:1.35rem }

  .choices, .fields{ grid-template-columns:1fr }
  .field{ grid-column:1 / -1 }
  .choice__box{ padding:22px 22px }
  .choice__box b{ font-size:1.2rem }
  .submit{ width:100% }
  .facts div{ padding:14px 0 }
  .facts dd{ font-size:1rem }

  .foot{ padding-bottom:36px }
  .foot__mark{ width:120px }
  .foot__word{ font-size:1.35rem; letter-spacing:.36em; text-indent:.36em }
  .foot__nav{ gap:18px }
}

/* ── small phone ───────────────────────────────────────────────── */
@media (max-width:400px){
  .hero__tag{ font-size:1.5rem }
  .hero__meta span{ font-size:1.15rem }
  .display{ font-size:2rem }
  .foot__line, .foot__fine{ letter-spacing:.18em }
  .foot__nav{ gap:14px }
  .topbar__brand span{ font-size:.8rem }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  [data-r]{ opacity:1; transform:none; transition:none }
  .scrollcue i{ animation:none }
  /* keep the cover, drop the recede — the scale is decoration, the stacking
     order is the content */
  .stack > .panel > *{ transform:none }
}