/* ═══════════════════════════════════════════════════════════════
   WITH A TWIST
   Six pages. Editorial, cinematic, deliberately sparse.
   Colour comes from the photography. Champagne is a hairline, not a fill.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:       #0F0D0B;
  --ink-2:     #14110E;
  --ink-3:     #080706;
  --ivory:     #F5F0E7;
  --ivory-70:  rgba(245,240,231,.70);
  --ivory-45:  rgba(245,240,231,.45);
  --ivory-28:  rgba(245,240,231,.28);
  --cream:     #EAE3D7;
  --cream-ink: #17140F;
  --cream-70:  rgba(23,20,15,.70);
  --cream-45:  rgba(23,20,15,.45);
  --champagne: #C6B18C;
  --rule:      rgba(245,240,231,.13);
  --rule-ink:  rgba(23,20,15,.15);

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad:  clamp(1.25rem, 5.5vw, 7rem);
  --band: clamp(4.5rem, 13vw, 11rem);
  --ease: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }

html{ -webkit-text-size-adjust:100%; scrollbar-width:none }
html::-webkit-scrollbar{ display:none }

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.9375rem,.9rem + .25vw,1.0625rem);
  line-height:1.78;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
ul,ol,dl{ list-style:none }
::selection{ background:var(--champagne); color:var(--ink) }

/* ─── type ───────────────────────────────────────────────────── */

.d1,.d2,.d3{ font-family:var(--serif); font-weight:400; letter-spacing:-.028em; text-wrap:balance }
.d1{ font-size:clamp(3rem,1.1rem + 9.4vw,10rem); line-height:.88; letter-spacing:-.038em }
.d2{ font-size:clamp(2.4rem,1.2rem + 6vw,6.4rem); line-height:.93 }
.d3{ font-size:clamp(1.7rem,1.2rem + 2.4vw,3.2rem); line-height:1.02; letter-spacing:-.02em }
.d1 em,.d2 em,.d3 em{ font-style:italic }

.lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + 1.2vw,1.85rem);
  line-height:1.5; letter-spacing:-.008em;
}

.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-size:.625rem; font-weight:300;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--champagne);
}
.eyebrow::before{ content:""; width:2.1rem; height:1px; background:currentColor; opacity:.55; flex:0 0 auto }
.eyebrow--plain::before{ display:none }

.num{
  font-family:var(--serif); font-weight:400;
  font-size:.8125rem; letter-spacing:.08em; color:var(--champagne);
}

.arrow{
  display:inline-flex; align-items:center; gap:1rem;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
}
.arrow::after{
  content:""; width:2.6rem; height:1px; background:currentColor;
  transition:width .7s var(--ease); flex:0 0 auto;
}
.arrow:hover::after{ width:4.4rem }


/* ─── header ─────────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background-color .8s var(--ease), padding .8s var(--ease), border-color .8s;
}
.nav.stuck{
  background:rgba(15,13,11,.8);
  backdrop-filter:blur(22px) saturate(1.1);
  -webkit-backdrop-filter:blur(22px) saturate(1.1);
  padding-block:.9rem; border-bottom-color:var(--rule);
}
.nav__mark{ display:flex; align-items:center; gap:.7rem }
.nav__mark img{ width:auto; height:30px; transition:height .8s var(--ease) }
.nav.stuck .nav__mark img{ height:26px }
.nav__mark span{ font-size:.6875rem; letter-spacing:.32em; text-transform:uppercase; white-space:nowrap }

.nav__links{ display:none }
.nav__inquire{ display:none }

.nav__burger{ width:30px; height:30px; display:grid; align-content:center; gap:7px }
.nav__burger i{ display:block; height:1px; background:var(--ivory); transition:transform .6s var(--ease), width .6s var(--ease) }
.nav__burger i:last-child{ width:58%; margin-left:auto }
body.menu-open .nav__burger i:first-child{ transform:translateY(4px) rotate(45deg) }
body.menu-open .nav__burger i:last-child{ width:100%; transform:translateY(-4px) rotate(-45deg) }

/* full screen menu */
.menu{
  position:fixed; inset:0; z-index:95;
  background:var(--ink-3);
  padding:7rem var(--pad) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  /* opacity + transform only. clip-path was animating at 1s and could not
     be composited, which is what made the menu feel slow to open. */
  opacity:0;
  transform:translate3d(0,-1.5%,0);
  transition:opacity .3s var(--ease), transform .34s var(--ease), visibility .34s;
  visibility:hidden;
  will-change:opacity, transform;
}
body.menu-open .menu{ opacity:1; transform:translate3d(0,0,0); visibility:visible }
.menu__list{ display:flex; flex-direction:column }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--serif);
  font-size:clamp(2rem,1.2rem + 3.6vw,3.4rem);
  line-height:1.28;
  opacity:0; transform:translate3d(0,.5rem,0);
  transition:opacity .32s var(--ease), transform .32s var(--ease), color .4s;
}
.menu__list a .num{ font-size:.625rem; letter-spacing:.2em; color:var(--ivory-28) }
body.menu-open .menu__list a{ opacity:1; transform:translate3d(0,0,0) }
.menu__list a:nth-child(1){ transition-delay:.04s }
.menu__list a:nth-child(2){ transition-delay:.08s }
.menu__list a:nth-child(3){ transition-delay:.12s }
.menu__list a:nth-child(4){ transition-delay:.16s }
.menu__list a:nth-child(5){ transition-delay:.20s }
.menu__list a:nth-child(6){ transition-delay:.24s }
.menu__list a[aria-current]{ color:var(--champagne); font-style:italic }
.menu__foot{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  padding-top:1.6rem; border-top:1px solid var(--rule);
  font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-45);
  opacity:0; transition:opacity .3s .22s;
}
body.menu-open .menu__foot{ opacity:1 }

/* ─── page masthead (inner pages) ────────────────────────────── */

.mast{
  position:relative;
  min-height:clamp(58svh,60vw,74svh);
  display:flex; align-items:flex-end;
  padding:8rem var(--pad) clamp(2.5rem,6vw,4rem);
  overflow:hidden;
}
.mast__bg{ position:absolute; inset:0; z-index:-2 }
.mast__bg img,.mast__bg video{ width:100%; height:100%; object-fit:cover }
.mast::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, var(--ink) 2%, rgba(15,13,11,.72) 34%, rgba(15,13,11,.22) 72%, rgba(15,13,11,.55) 100%);
}
.mast__inner{ width:100% }
.mast .d1,.mast .d2{ margin-top:1.8rem }
.mast__note{ margin-top:1.9rem; color:var(--ivory-70); max-width:40ch }

/* ─── generic band ───────────────────────────────────────────── */

.band{ padding:var(--band) var(--pad) }
.band--tight{ padding-block:clamp(3rem,8vw,6rem) }
.band--ink2{ background:var(--ink-2) }
.band--cream{ background:var(--cream); color:var(--cream-ink) }
.band--cream .eyebrow{ color:var(--cream-45) }


/* ─── full bleed figure ──────────────────────────────────────── */

.bleed{ position:relative; overflow:hidden; height:clamp(58svh,70vw,88svh) }
.bleed img{ width:100%; height:114%; object-fit:cover; position:absolute; top:-7%; left:0 }
.bleed::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(15,13,11,.5) 0%, transparent 20%),
             linear-gradient(to top, rgba(15,13,11,.55) 0%, transparent 22%);
}
.bleed__cap{
  position:absolute; left:var(--pad); bottom:1.5rem; z-index:2;
  font-size:.5625rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ivory);
}
.bleed__cap--top{ bottom:auto; top:1.5rem; left:auto; right:var(--pad);
  font-family:var(--serif); font-size:.8125rem; letter-spacing:.05em; text-transform:none; font-style:italic }

/* ─── editorial index (used for home nav + lists) ────────────── */

.index{ border-top:1px solid var(--rule) }
.index__row{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .8s var(--ease);
}
.index__row:hover{ padding-left:1rem }
.index__row .num{ flex:0 0 2.4rem; color:var(--ivory-28) }
.index__row h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem);
  line-height:1.05; letter-spacing:-.02em; flex:1 1 auto;
}
.index__row .meta{
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-45); text-align:right; flex:0 1 auto; display:none;
}

/* ─── magazine spread ────────────────────────────────────────── */

.spread{ margin-bottom:clamp(4rem,12vw,9rem) }
.spread:last-child{ margin-bottom:0 }
.spread__fig{ position:relative; overflow:hidden; aspect-ratio:4/5; margin-bottom:2rem }
.spread__fig img{
  width:100%; height:114%; object-fit:cover; position:absolute; top:-7%; left:0;
  transition:transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.spread:hover .spread__fig img{ transform:scale(1.03); filter:brightness(.93) }
.spread__head{ transition:transform 1s var(--ease) }
.spread:hover .spread__head{ transform:translateX(4px) }
.spread__head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:.9rem }
.spread .d3{ margin-bottom:1.1rem }
.spread__text{ color:var(--ivory-70); max-width:46ch }

.ticks{ margin:1.8rem 0 0; border-top:1px solid var(--rule) }
.ticks li{ padding:.8rem 0; border-bottom:1px solid var(--rule); font-size:.875rem; color:var(--ivory-70) }

/* ─── definition index (details, extras) ─────────────────────── */

.defs{ border-top:1px solid var(--rule) }
.defs > div{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.25rem 0; border-bottom:1px solid var(--rule);
}
.defs dt{ font-size:1rem; font-weight:300 }
.defs dd{ font-size:.875rem; color:var(--ivory-45) }
.band--cream .defs{ border-color:var(--rule-ink) }
.band--cream .defs > div{ border-color:var(--rule-ink) }
.band--cream .defs dd{ color:var(--cream-45) }

/* ─── cocktail plates ────────────────────────────────────────── */

.plate{ margin-bottom:clamp(4rem,12vw,8rem) }
.plate:last-of-type{ margin-bottom:0 }
.plate__fig{ position:relative; overflow:hidden; aspect-ratio:4/5; background:rgba(0,0,0,.06) }
.plate--tall .plate__fig{ aspect-ratio:3/4 }
.plate--wide .plate__fig{ aspect-ratio:5/4 }
.plate__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter 1.2s var(--ease) }
.plate:hover .plate__fig img{ transform:scale(1.02); filter:brightness(.965) }
.plate__head{ transition:transform .9s var(--ease) }
.plate:hover .plate__head{ transform:translateX(4px) }
.plate__body{ padding-top:1.5rem; margin-top:1.5rem; border-top:1px solid var(--rule-ink) }
.plate__head{ display:flex; align-items:baseline; gap:.9rem }
.plate__body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,1.25rem + 1.9vw,2.7rem); line-height:1.02; letter-spacing:-.02em; margin:.7rem 0 .7rem }
.plate__ing{ color:var(--cream-70); font-size:.875rem; line-height:1.8; max-width:42ch }
.plate__tag{ font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-45) }

/* ─── packages, editorial menu ───────────────────────────────── */

.tier{ border-bottom:1px solid var(--rule) }
.tier:first-of-type{ border-top:1px solid var(--rule) }
.tier__btn{
  width:100%; text-align:left; list-style:none; cursor:pointer;
  display:flex; align-items:baseline; gap:1rem;
  padding:1.8rem 0;
}
.tier__btn .num{ flex:0 0 2.4rem; color:var(--ivory-28) }
.tier__name{
  flex:1 1 auto;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.8rem); line-height:1.05; letter-spacing:-.02em;
}
.tier__price{
  font-family:var(--serif); font-size:clamp(1.1rem,.9rem + .9vw,1.6rem);
  color:var(--champagne); white-space:nowrap;
}
.tier__price span{
  font-family:var(--sans); font-size:.5625rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ivory-45); margin-right:.5em;
}
.tier__sign{ flex:0 0 auto; width:1rem; height:1rem; position:relative; margin-left:.6rem }
.tier__sign::before,.tier__sign::after{
  content:""; position:absolute; top:50%; left:0; width:100%; height:1px;
  background:var(--ivory-45); transition:transform .6s var(--ease);
}
.tier__sign::after{ transform:rotate(90deg) }
.tier[open] .tier__sign::after{ transform:rotate(0deg) }
.tier__btn::-webkit-details-marker{ display:none }
.tier__btn::marker{ content:"" }
.tier__inner{ padding:0 0 2.2rem }
.tier[open] .tier__inner{ animation:tierIn .7s var(--ease) }
@keyframes tierIn{ from{ opacity:0; transform:translateY(10px) } }
.tier__inner ul{ margin-bottom:1.6rem }
.tier__inner li{ position:relative; padding-left:1.5rem; font-size:.875rem; color:var(--ivory-70); line-height:2 }
.tier__inner li::before{ content:""; position:absolute; left:0; top:1em; width:.7rem; height:1px; background:var(--champagne); opacity:.6 }

/* ─── gallery ────────────────────────────────────────────────── */

.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem }
.shot{ position:relative; overflow:hidden; aspect-ratio:1/1; width:100%; display:block }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter 1s var(--ease) }
.shot:hover img{ transform:scale(1.03); filter:brightness(.92) }
.shot--wide{ grid-column:span 2; aspect-ratio:3/2 }

/* ─── form ───────────────────────────────────────────────────── */

.form{ max-width:660px }
.steps{ display:flex; gap:.6rem; margin-bottom:2.8rem }
.steps li{
  flex:1; padding-top:.9rem; border-top:1px solid var(--rule);
  font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-45);
  transition:color .6s var(--ease), border-color .6s var(--ease);
}
.steps li.on{ color:var(--champagne); border-top-color:var(--champagne) }
.steps li.done{ border-top-color:rgba(198,177,140,.5) }

.step{ border:0; display:none; animation:stepIn .8s var(--ease) }
.step.on{ display:block }
@keyframes stepIn{ from{ opacity:0; transform:translateY(16px) } }
.step legend{ font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.7vw,2.4rem); line-height:1.1; margin-bottom:2rem; padding:0 }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.chip{
  padding:.8em 1.3em; font-size:.8125rem; color:var(--ivory-70);
  border:1px solid var(--rule);
  transition:border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease);
}
.chip:hover{ border-color:var(--ivory-45); color:var(--ivory) }
.chip.on{ background:var(--champagne); border-color:var(--champagne); color:var(--ink) }

.field{ margin-bottom:1.8rem }
.field label{
  display:flex; align-items:baseline; gap:.5em;
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ivory-45); margin-bottom:.8rem;
}
.field label b{ font-weight:400; color:var(--champagne); font-size:.9375rem; letter-spacing:.02em }
.field label em{ font-style:normal; opacity:.55 }

input[type=text],input[type=email],input[type=tel],input[type=date],textarea{
  width:100%; padding:.9rem 0; background:transparent;
  border:0; border-bottom:1px solid var(--rule); border-radius:0;
  color:var(--ivory); font-family:var(--sans); font-size:1.0625rem; font-weight:300;
  transition:border-color .6s var(--ease);
}
input:focus,textarea:focus{ outline:0; border-bottom-color:var(--champagne) }
input::placeholder,textarea::placeholder{ color:var(--ivory-28) }
textarea{ resize:vertical; line-height:1.6 }
input[type=date]{ color-scheme:dark }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:1px; background:var(--rule); margin:1.3rem 0 .7rem }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--champagne); cursor:grab; box-shadow:0 0 0 6px rgba(198,177,140,.13);
}
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border:0; border-radius:50%; background:var(--champagne) }
.range-ends{ display:flex; justify-content:space-between; font-size:.5625rem; letter-spacing:.2em; color:var(--ivory-45) }

.form-nav{ display:flex; align-items:center; gap:1.8rem; margin-top:2.8rem; padding-top:2.2rem; border-top:1px solid var(--rule) }
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.15em 2.6em; font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  border:1px solid var(--champagne);
  transition:background-color .7s var(--ease), color .7s var(--ease);
}
.cta:hover{ background:var(--champagne); color:var(--ink) }
.ghost{ font-size:.625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-45); transition:color .5s }
.ghost:hover{ color:var(--ivory) }

.done__mark svg{ width:50px; height:50px; fill:none; stroke:var(--champagne); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round }
.done__mark circle{ stroke-dasharray:139; stroke-dashoffset:139; animation:draw 1.1s var(--ease) forwards }
.done__mark path{ stroke-dasharray:30; stroke-dashoffset:30; animation:draw .6s var(--ease) .6s forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.done h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem); margin:1.5rem 0 1rem }
.done > p{ color:var(--ivory-70); max-width:46ch }
.done__cta{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:2.4rem }
.done__note{ margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--rule); font-size:.75rem; color:var(--ivory-45) }

/* ─── closing call ───────────────────────────────────────────── */

.close{ padding:var(--band) var(--pad); text-align:center }
.close .d2{ max-width:16ch; margin:1.6rem auto 2.4rem }

/* ─── footer ─────────────────────────────────────────────────── */

.foot{ padding:var(--band) var(--pad) 2.5rem; border-top:1px solid var(--rule); background:var(--ink-3) }

/* the name is the focal point; everything else is fine print */
.foot__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.9rem,1.1rem + 9vw,9rem);
  line-height:.9; letter-spacing:-.035em;
  margin-bottom:clamp(2rem,5vw,3.2rem);
}
.foot__name em{ font-style:italic }
.foot__where{
  font-size:.75rem; line-height:1.9; color:var(--ivory-45);
  padding-bottom:clamp(1.6rem,4vw,2.4rem);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.foot__social{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  font-size:.625rem; letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:clamp(1.6rem,4vw,2.4rem);
}
.foot__social a{ color:var(--ivory-70); transition:color .4s var(--ease) }
.foot__social a:hover{ color:var(--champagne) }
.foot__ask{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.6rem;
  font-size:.75rem; color:var(--ivory-45);
}
.foot__ask a{ color:var(--ivory); border-bottom:1px solid var(--rule); padding-bottom:.15em }
.foot__ask a:hover{ color:var(--champagne); border-color:var(--champagne) }

.foot__grid{ display:grid; gap:2.8rem }
.foot__logo{ width:auto; height:clamp(100px,18vw,150px) }
.foot__col p{ font-size:.875rem; color:var(--ivory-45); line-height:2 }
.foot__col .eyebrow{ margin-bottom:1rem }
.foot__col a{ color:var(--ivory-70); border-bottom:1px solid var(--rule); padding-bottom:.1em }
.foot__col a:hover{ color:var(--champagne); border-color:var(--champagne) }
.foot__fine{ color:var(--ivory-28); font-size:.75rem }
.foot__base{
  display:flex; flex-direction:column; gap:.7rem;
  margin-top:clamp(2.5rem,8vw,4.5rem); padding-top:1.8rem; border-top:1px solid var(--rule);
  font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-28);
}
.foot__base a{ color:var(--ivory-45) }

/* ─── lightbox ───────────────────────────────────────────────── */

.lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(8,7,6,.97);
  backdrop-filter:blur(12px); display:grid; place-items:center;
  padding:clamp(1rem,5vw,4rem); animation:fade .5s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain }
.lightbox__x{ position:absolute; top:.8rem; right:1rem; font-size:2.2rem; line-height:1; width:48px; height:48px }

/* The film-grain overlay was removed on 2026-08-21: it sat above every
   photograph and the hero video and read as compression noise. The
   photography is the point — nothing goes on top of it. */
/* ─── reveals ────────────────────────────────────────────────── */

.rv{ opacity:0; transform:translateY(20px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv[data-d="1"]{ transition-delay:.1s }
.rv[data-d="2"]{ transition-delay:.2s }
.rv[data-d="3"]{ transition-delay:.3s }
.rv[data-d="4"]{ transition-delay:.4s }

/* wipe on ::after — clip-path on the observed node zeroes its
   intersectionRatio in Chromium and the reveal never fires */
.rvi{ position:relative; overflow:hidden }
.rvi::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:var(--ink); transform:translateY(0);
  transition:transform 1.5s var(--ease);
}
.band--cream .rvi::after{ background:var(--cream) }
.rvi.in::after{ transform:translateY(-101%) }

.word{ display:inline-block; overflow:hidden; vertical-align:top }
.word i{ display:inline-block; font-style:inherit; transform:translateY(108%); transition:transform 1.25s var(--ease) }
.in .word i{ transform:none }

/* ═══ ≥ 700px ═══════════════════════════════════════════════════ */
@media (min-width:700px){
  .index__row .meta{ display:block }
  .spread{ display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:clamp(2rem,6vw,5.5rem) }
  .spread__fig{ margin-bottom:0; aspect-ratio:3/4 }
  .spread--flip .spread__fig{ order:2 }
  .defs{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(2rem,6vw,5rem) }
  .plates{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(2.5rem,6vw,5.5rem) }
  .plate{ grid-column:span 3; margin-bottom:0 }
  .plate--tall .plate__fig{ aspect-ratio:2/3 }
  .plate--tall{ grid-column:span 2 }
  .plate--wide{ grid-column:span 4 }
  .plate:nth-child(2){ margin-top:clamp(2rem,6vw,5rem) }
  .plate:nth-child(5){ margin-top:clamp(1.5rem,4vw,3.5rem) }
  .grid{ grid-template-columns:repeat(3,1fr); gap:.7rem }
  .shot--wide{ grid-column:span 2; aspect-ratio:2/1 }
  .foot__grid{ grid-template-columns:auto repeat(3,1fr); gap:clamp(2rem,5vw,4rem); align-items:start }
  .foot__base{ flex-direction:row; justify-content:space-between; align-items:center }
  .tier__btn{ padding:2.2rem 0 }
  .tier__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start }
}

/* ═══ ≥ 1024px ══════════════════════════════════════════════════ */
@media (min-width:1024px){
  .nav__burger{ display:none }
  .nav__links{ display:flex; gap:2.4rem; font-size:.625rem; letter-spacing:.26em; text-transform:uppercase }
  .nav__links a{ position:relative; padding-bottom:.35em; color:var(--ivory-70); transition:color .6s var(--ease) }
  .nav__links a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--champagne);
    transform:scaleX(0); transform-origin:right; transition:transform .7s var(--ease);
  }
  .nav__links a:hover{ color:var(--ivory) }
  .nav__links a:hover::after,.nav__links a[aria-current]::after{ transform:scaleX(1); transform-origin:left }
  .nav__links a[aria-current]{ color:var(--ivory) }
  .nav__inquire{
    display:inline-flex; font-size:.625rem; letter-spacing:.28em; text-transform:uppercase;
    padding:.85em 1.8em; border:1px solid var(--rule);
    transition:background-color .6s var(--ease), border-color .6s var(--ease), color .6s var(--ease);
  }
  .nav__inquire:hover{ background:var(--champagne); border-color:var(--champagne); color:var(--ink) }

  /* Hovering a row swaps the photograph behind the whole section.
     Same <img> elements as mobile, just promoted to a full backdrop —
     explicit height, because a percentage resolves against the row. */
  /* asymmetric editorial grid for section heads */
  .head12{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:1.5rem; align-items:end }
  .head12 .eyebrow{ grid-column:1 / 4; align-self:start; padding-top:.6rem }
  .head12 .d2,.head12 .d1{ grid-column:4 / 12 }
  .head12 .note{ grid-column:9 / 13; padding-bottom:.4rem }
  .offset{ margin-left:calc(100% / 12 * 3) }
}

/* ═══ reduced motion ════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  .rvi::after{ display:none }
  .word i{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════
   THE GLASS — custom cursor
   An actual martini glass: elliptical rim, V bowl, stem, foot, and a
   twist of citrus on the edge, echoing the glass in their own logo.
   The liquid is clipped to the bowl, tilts with how fast you move, and
   fills toward the rim over anything you can click.
   Pointer devices only; the native cursor returns over text fields.
   ═══════════════════════════════════════════════════════════════ */

.glass{ display:none }

@media (hover:hover) and (pointer:fine){

  /* only hide the native cursor once JS has actually put the glass on
     screen — otherwise a script failure leaves no pointer at all */
  body.has-glass{ cursor:none }
  body.has-glass input,body.has-glass textarea{ cursor:text }

  .glass{
    display:block;
    position:fixed; top:0; left:0; z-index:190;
    width:0; height:0;
    pointer-events:none;
    will-change:transform;
    transition:opacity .35s var(--ease);
  }

  .glass svg{
    position:absolute;
    width:26px; height:32px;
    margin:-16px 0 0 -13px;      /* the pointer sits at the glass centre */
    overflow:visible;
    transform-origin:50% 50%;
    transition:transform .5s var(--ease);
  }

  .glass .line{
    fill:none;
    stroke:rgba(198,177,140,.85);
    stroke-width:1;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;   /* stays a hairline when it grows */
    transition:stroke .5s var(--ease);
  }

  .glass .pour{
    fill:rgba(198,177,140,.5);
    transition:fill .5s var(--ease);
  }

  /* level: translated down to empty it, up to fill it */
  .glass .fill{
    transform:translateY(7.5px);
    transition:transform .55s var(--ease);
  }

  /* the citrus twist on the rim */
  .glass .twist{
    fill:none;
    stroke:rgba(198,177,140,.9);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
    opacity:0;
    transform:scale(.3);
    transform-origin:22px 4px;
    transition:opacity .45s var(--ease), transform .45s var(--ease), stroke .5s var(--ease);
  }

  /* over anything clickable: the glass grows, fills, and gets its garnish */
  body.cur-hot .glass svg{ transform:scale(1.9) }
  body.cur-hot .glass .fill{ transform:translateY(1.5px) }
  body.cur-hot .glass .pour{ fill:rgba(198,177,140,.62) }
  body.cur-hot .glass .twist{ opacity:1; transform:scale(1) }

  /* pressing pours it to the rim */
  body.cur-down .glass .fill{ transform:translateY(-.5px) }

  /* the cream room needs dark ink or the champagne vanishes */
  body.cur-light .glass .line{ stroke:rgba(23,20,15,.65) }
  body.cur-light .glass .pour{ fill:rgba(23,20,15,.34) }
  body.cur-light .glass .twist{ stroke:rgba(23,20,15,.7) }

  body.cur-off .glass{ opacity:0 }
}

@media (prefers-reduced-motion:reduce){
  .glass{ display:none !important }
  body{ cursor:auto }
}

/* ─── editorial verbs ────────────────────────────────────────── */

.verb{
  font-family:var(--sans);
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-45);
}
.verb::before{ content:"\2014\00a0"; opacity:.55 }

/* ─── keyboard focus ─────────────────────────────────────────────
   the custom cursor hides the pointer, so the keyboard ring has to be
   unmistakable */
:focus-visible{ outline:1px solid var(--champagne); outline-offset:4px }
.band--cream :focus-visible{ outline-color:rgba(23,20,15,.7) }

/* ─── page transition ────────────────────────────────────────────
   The brand signs the page. Charcoal covers, their own martini mark is
   revealed by a bottom-up wipe (it is a PNG, so it cannot be stroke-drawn
   — the wipe reads like the glass filling), then the wordmark and the
   line beneath it. About 760ms, then the next page loads. */

.veil{
  position:fixed; inset:0; z-index:210;
  background:var(--ink);
  transform:translateY(100%);
  pointer-events:none;
  display:grid; place-items:center;
  visibility:hidden;
}

.veil__lockup{ display:grid; justify-items:center; text-align:center }

.veil__mark{
  width:auto;
  height:clamp(44px,8.5vw,66px);
  clip-path:inset(100% 0 0 0);
  opacity:0;
}

.veil__name{
  margin-top:clamp(1.1rem,2.6vw,1.6rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(.95rem,.85rem + .7vw,1.35rem);
  letter-spacing:.34em; text-transform:uppercase;
  text-indent:.34em;                      /* balances the trailing track */
  color:var(--ivory);
  opacity:0; transform:translateY(7px);
}

.veil__tag{
  margin-top:clamp(.7rem,1.8vw,1rem);
  font-family:var(--sans); font-weight:300;
  font-size:.5rem; letter-spacing:.36em; text-transform:uppercase;
  text-indent:.36em;
  color:var(--champagne);
  opacity:0; transform:translateY(6px);
}

/* leaving — the sequence */
body.leaving .veil{
  visibility:visible; transform:translateY(0);
  transition:transform .3s cubic-bezier(.7,0,.3,1);
}
body.leaving .veil__mark{
  clip-path:inset(0 0 0 0); opacity:1;
  transition:clip-path .28s .08s var(--ease), opacity .24s .08s var(--ease);
}
body.leaving .veil__name{
  opacity:1; transform:none;
  transition:opacity .22s .22s var(--ease), transform .22s .22s var(--ease);
}
body.leaving .veil__tag{
  opacity:.85; transform:none;
  transition:opacity .2s .32s var(--ease), transform .2s .32s var(--ease);
}

/* arriving — already assembled, nothing replays */
body.arriving .veil{ visibility:visible; transform:translateY(0) }
body.arriving .veil__mark,body.arrived .veil__mark{ clip-path:inset(0 0 0 0); opacity:1 }
body.arriving .veil__name,body.arrived .veil__name{ opacity:1; transform:none }
body.arriving .veil__tag,body.arrived .veil__tag{ opacity:.85; transform:none }

body.arrived .veil{
  visibility:visible; transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.7,0,.3,1);
}

@media (prefers-reduced-motion:reduce){
  /* simplified to a plain fade — no panel travel, no wipe */
  .veil{ transform:none; opacity:0 }
  .veil__mark{ clip-path:none }
  .veil__mark,.veil__name,.veil__tag{ opacity:1; transform:none; transition:none }
  .veil__tag{ opacity:.85 }
  body.leaving .veil{ visibility:visible; opacity:1; transform:none; transition:opacity .2s linear }
  body.arriving .veil{ visibility:visible; opacity:1; transform:none }
  body.arrived .veil{ visibility:visible; opacity:0; transform:none; transition:opacity .28s linear }
  .spread:hover .spread__head,.plate:hover .plate__head{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════
   THE TWIST — typographic, not graphic
   Hovering the word "Twist" in the hero rotates it a degree and a half.
   No line, no illustration. Most people will never consciously see it.
   ═══════════════════════════════════════════════════════════════ */

.tw i{ transition:transform .62s cubic-bezier(.19,1,.22,1) }

/* the split reveal masks each word behind overflow:hidden, which would
   clip the rotated corners — so the mask is opened once the entry has
   finished, and only on this one word */
.tw-ready .tw{ overflow:visible }
.tw-ready .tw:hover i{ transform:rotate(-1.6deg) }

@media (prefers-reduced-motion:reduce){
  .tw-ready .tw:hover i{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════
   THE OVERTURE — first entry only
   The brand introduces itself, then the panel splits vertically and
   the site is already there behind it. Roughly 1.43s end to end.
   Everything visual is CSS animation with delays, so it plays even if
   the script is slow; JS only locks scroll and clears up afterwards.
   ═══════════════════════════════════════════════════════════════ */

.overture{ display:none }

/* NB the flag class on <html> is `is-overture`, deliberately different from
   the panel's own `.overture`. Naming them the same made `.overture{display:none}`
   match <html> itself and blanked the whole document on first visit. */
html.is-overture .overture{
  display:block;
  position:fixed; inset:0; z-index:300;
  pointer-events:none;
}

.overture__half{
  position:fixed; top:0; bottom:0;
  width:50.5%;                    /* slight overlap so no seam shows */
  background:var(--ink);
  will-change:transform;
  animation-fill-mode:forwards;
}
.overture__half--l{ left:0;  animation:ovSplitL .38s cubic-bezier(.72,0,.24,1) .66s }
.overture__half--r{ right:0; animation:ovSplitR .38s cubic-bezier(.72,0,.24,1) .66s }

.overture__lockup{
  position:fixed; inset:0;
  display:grid; place-content:center; justify-items:center;
  text-align:center; padding:0 var(--pad);
  animation:ovOut .18s var(--ease) .66s forwards;
}

.overture__mark{
  width:auto; height:clamp(52px,11vw,80px);
  opacity:0; clip-path:inset(100% 0 0 0);
  animation:ovMark .3s var(--ease) .04s forwards;
}

.overture__name{
  margin-top:clamp(1.3rem,3vw,1.9rem);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,.9rem + .9vw,1.6rem);
  letter-spacing:.36em; text-transform:uppercase; text-indent:.36em;
  color:var(--ivory);
  opacity:0;
  animation:ovUp .24s var(--ease) .28s forwards;
}

.overture__tag{
  margin-top:clamp(.85rem,2vw,1.2rem);
  font-family:var(--sans); font-weight:300;
  font-size:.5rem; letter-spacing:.34em; text-transform:uppercase; text-indent:.34em;
  line-height:2.2;
  color:var(--champagne);
  opacity:0;
  animation:ovTag .22s var(--ease) .44s forwards;
}

@keyframes ovMark{ to{ opacity:1; clip-path:inset(0 0 0 0) } }
@keyframes ovUp{ from{ transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes ovTag{ from{ transform:translateY(6px) } to{ opacity:.85; transform:none } }
@keyframes ovOut{ to{ opacity:0 } }
@keyframes ovSplitL{ to{ transform:translateX(-101%) } }
@keyframes ovSplitR{ to{ transform:translateX(101%) } }
@keyframes ovIn{ to{ opacity:1 } }
@keyframes ovInTag{ to{ opacity:.85 } }

/* reduced motion: fade in, fade out, no travel and no wipe */
@media (prefers-reduced-motion:reduce){
  .overture__mark{ clip-path:none; animation:ovIn .34s linear .05s forwards }
  .overture__name{ animation:ovIn .3s linear .32s forwards }
  .overture__tag{ animation:ovInTag .3s linear .48s forwards }
  .overture__lockup{ animation:ovOut .28s linear .62s forwards }
  .overture__half--l,.overture__half--r{ animation:ovOut .3s linear .62s forwards }
}

/* ═══════════════════════════════════════════════════════════════
   EXPERIENCE INDEX — home
   One set of images, no duplicates. On desktop they stack into a
   single panel on the right and cross-fade on hover; on mobile the
   same elements simply flow beneath their row. Opacity only.
   ═══════════════════════════════════════════════════════════════ */

.xindex{ margin-top:2.6rem; border-top:1px solid var(--rule) }

.xrow{ display:block; border-bottom:1px solid var(--rule) }
.xrow__line{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.6rem 0;
  transition:transform .5s var(--ease);
}
.xrow__line .num{ flex:0 0 2.4rem; color:var(--ivory-28); transition:color .5s var(--ease) }
.xrow__name{
  flex:1 1 auto;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,1.2rem + 2vw,2.9rem);
  line-height:1.05; letter-spacing:-.02em;
  transition:color .5s var(--ease);
}
.xrow__go{
  flex:0 0 auto;
  font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne);
  opacity:0; transform:translate3d(-6px,0,0);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.xindex__bg{ display:none }
.xrow__fig{ display:block; overflow:hidden; margin:0 0 1.6rem }
.xrow__fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}

.xrow:hover .xrow__line{ transform:translate3d(8px,0,0) }
.xrow:hover .xrow__line .num{ color:var(--champagne) }
.xrow:hover .xrow__go{ opacity:1; transform:translate3d(0,0,0) }

@media (prefers-reduced-motion:reduce){
  .xrow:hover .xrow__line{ transform:none }
  .xrow__fig img{ transition:none }
}

/* ═══════════════════════════════════════════════════════════════
   BOOKING — five steps, a review, then away
   ═══════════════════════════════════════════════════════════════ */

.bk__head{ margin-bottom:clamp(2.4rem,6vw,3.4rem) }
.bk{ max-width:720px }

.bk__rail{ display:flex; gap:.5rem; margin-bottom:2.8rem }
.bk__rail li{
  flex:1; display:flex; flex-direction:column; gap:.7rem;
  font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-28);
  transition:color .4s var(--ease);
}
.bk__rail i{ display:block; height:1px; background:var(--rule); transform-origin:left }
.bk__rail li.on{ color:var(--champagne) }
.bk__rail li.on i,.bk__rail li.done i{ background:var(--champagne) }
.bk__rail li.done{ color:var(--ivory-45) }
.bk__rail li.done i{ opacity:.5 }
.bk__rail span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.bk__step{ border:0; display:none; animation:bkIn .45s var(--ease) }
.bk__step.on{ display:block }
@keyframes bkIn{ from{ opacity:0; transform:translate3d(0,12px,0) } }

.bk__q{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.7vw,2.4rem);
  line-height:1.1; letter-spacing:-.02em;
  margin-bottom:2rem; padding:0;
}

.bk__grid{ display:grid; gap:0 1.6rem }
.fld{ margin-bottom:1.7rem }
.fld label{
  display:flex; align-items:baseline; gap:.5em;
  font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ivory-45); margin-bottom:.8rem;
}
.fld label b{ font-weight:400; color:var(--champagne); font-size:.9375rem; letter-spacing:.02em }
.fld label em{ font-style:normal; opacity:.5 }

.opts{ display:flex; flex-wrap:wrap; gap:.5rem }
.opt{
  padding:.8em 1.25em; font-size:.8125rem; color:var(--ivory-70);
  border:1px solid var(--rule);
  transition:border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.opt:hover{ border-color:var(--ivory-45); color:var(--ivory) }
.opt.on{ background:var(--champagne); border-color:var(--champagne); color:var(--ink) }
.opts--sm .opt{ padding:.65em 1.05em; font-size:.75rem }

.bk__hint{ margin-top:.9rem; font-size:.75rem; color:var(--ivory-28); max-width:46ch }

.bk__err{
  margin-top:.6rem; font-size:.75rem; color:#E0A07A;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s var(--ease), opacity .3s var(--ease);
}
.bk__err.show{ max-height:3rem; opacity:1 }

.bk__review{ animation:bkIn .45s var(--ease) }
.bk__summary{ margin-top:1.6rem; border-top:1px solid var(--rule) }
.bk__summary > div{
  display:grid; grid-template-columns:9rem 1fr; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.bk__summary dt{ font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-45); padding-top:.25em }
.bk__summary dd{ font-size:.9375rem; color:var(--ivory) }

.bk__nav{
  display:flex; align-items:center; gap:1.8rem;
  margin-top:2.6rem; padding-top:2.2rem; border-top:1px solid var(--rule);
}
.bk__saved{ font-size:.5625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ivory-28) }
.cta[disabled]{ opacity:.5; pointer-events:none }

.bk__done{ max-width:640px; animation:bkIn .5s var(--ease) }
.bk__done h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.8rem,1.4rem + 2vw,2.8rem); margin:1.5rem 0 1rem }
.bk__done > p{ color:var(--ivory-70); max-width:48ch }

@media (min-width:700px){
  .bk__grid{ grid-template-columns:1fr 1fr }
}
@media (max-width:519px){
  .bk__rail span{ display:none }
  .bk__rail li{ gap:0 }
  .bk__summary > div{ grid-template-columns:1fr; gap:.25rem }
}
@media (prefers-reduced-motion:reduce){
  .bk__step,.bk__review,.bk__done{ animation:none }
}

/* ═══════════════════════════════════════════════════════════════
   EXPERIENCE INDEX — desktop backdrop
   This block must stay at the end of the file: the base index rules
   were appended after the main media queries, so an earlier
   @media block loses to them at equal specificity.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .xindex{ position:relative; min-height:34rem }
  .xindex__bg{
    display:block; position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    opacity:0; transition:opacity .6s var(--ease);
  }
  .xindex__bg::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(to right, rgba(15,13,11,.92) 0%, rgba(15,13,11,.7) 46%, rgba(15,13,11,.45) 100%);
  }
  .xindex.lit .xindex__bg{ opacity:1 }
  .xrow{ position:static; border-color:rgba(245,240,231,.16) }
  .xrow__line{ position:relative; z-index:2; width:100%; padding:3rem 0 }
  .xrow__fig{ display:none }
  .xrow:hover .xrow__name{ color:var(--ivory) }
}

/* ═══════════════════════════════════════════════════════════════
   HOME HERO — photography first, type second, nothing else
   ═══════════════════════════════════════════════════════════════ */

.mast--hero{
  min-height:100svh;
  padding-bottom:clamp(3rem,9vw,6rem);
}

/* the photograph carries more of the frame: the veil only does real
   work where the type actually sits */
.mast--hero::after{
  background:
    linear-gradient(to top,
      var(--ink) 0%,
      rgba(15,13,11,.82) 16%,
      rgba(15,13,11,.42) 34%,
      rgba(15,13,11,.08) 62%,
      rgba(15,13,11,.10) 84%,
      rgba(15,13,11,.58) 100%);   /* only enough to keep the nav legible */
}

/* a very slow drift, so the frame is never quite still */
.mast--hero .mast__bg video{
  transform-origin:52% 45%;
  animation:heroDrift 34s ease-in-out infinite alternate;
}
@keyframes heroDrift{ from{ transform:scale(1) } to{ transform:scale(1.07) } }

.d1--hero{
  font-size:clamp(3.2rem,.6rem + 11.6vw,12.5rem);
  line-height:.84;
  letter-spacing:-.045em;
}

/* below 900px it sits in the flow under the wordmark. Absolutely
   positioning it there put it straight on top of the title. */
.mast--hero{ flex-direction:column; align-items:flex-start; justify-content:flex-end }
.hero__tag{
  position:static; margin-top:1.5rem;
  font-size:.625rem; letter-spacing:.34em; text-transform:uppercase;
  line-height:2.4; color:var(--ivory-70);
}

@media (min-width:900px){
  /* with room to breathe it moves to the opposite corner, on the
     baseline of the wordmark — the tension is the composition */
  .mast--hero{ flex-direction:row; align-items:flex-end }
  .hero__tag{
    position:absolute; margin-top:0;
    right:var(--pad); left:auto; text-align:right;
    bottom:calc(clamp(3rem,9vw,6rem) + .4rem);
  }
}

@media (prefers-reduced-motion:reduce){
  .mast--hero .mast__bg video{ animation:none }
}

/* ═══════════════════════════════════════════════════════════════
   COCKTAILS — the showpiece
   Photography at full scale, captions reduced to a name and one line.
   ═══════════════════════════════════════════════════════════════ */

.drinks-lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + 1.2vw,1.85rem);
  line-height:1.5; max-width:26ch; color:var(--cream-ink);
}

.plate__body{ padding-top:1.2rem; margin-top:1.2rem }
.plate__head{ gap:1rem }
.plate__tag{ letter-spacing:.28em }

@media (min-width:1024px){
  /* big asymmetric plates rather than an even grid */
  .plates{ grid-template-columns:repeat(12,1fr); gap:clamp(4rem,9vw,8rem) 2rem }
  .plate,.plate--tall,.plate--wide{ grid-column:auto; margin:0 }

  .plate:nth-child(1){ grid-column:1 / 8 }
  .plate:nth-child(2){ grid-column:9 / 13; margin-top:clamp(4rem,10vw,9rem) }
  .plate:nth-child(3){ grid-column:2 / 6 }
  .plate:nth-child(4){ grid-column:7 / 13; margin-top:clamp(2rem,5vw,4rem) }
  .plate:nth-child(5){ grid-column:1 / 6; margin-top:clamp(2rem,5vw,4rem) }
  .plate:nth-child(6){ grid-column:7 / 12 }
  .plate:nth-child(7){ grid-column:1 / 13 }

  .plate:nth-child(1) .plate__fig{ aspect-ratio:4/3 }
  .plate:nth-child(2) .plate__fig{ aspect-ratio:3/4 }
  .plate:nth-child(3) .plate__fig{ aspect-ratio:4/5 }
  .plate:nth-child(4) .plate__fig{ aspect-ratio:5/4 }
  .plate:nth-child(5) .plate__fig{ aspect-ratio:4/5 }
  .plate:nth-child(6) .plate__fig{ aspect-ratio:4/5 }
  .plate:nth-child(7) .plate__fig{ aspect-ratio:21/9 }

  /* caption sits beside the name, not stacked under it */
  .plate__body{
    display:grid; grid-template-columns:1fr minmax(14rem,26ch);
    align-items:baseline; gap:2.5rem;
  }
  .plate__body h3{ margin:0 }
  .plate__ing{ margin:0 }
  .plate:nth-child(2) .plate__body,
  .plate:nth-child(3) .plate__body,
  .plate:nth-child(5) .plate__body{ grid-template-columns:1fr; gap:.6rem }
}

/* ─── travel map ────────────────────────────────────────────────────
   Drawn at build time from Census boundary data, inlined as SVG, so it
   inherits the page's own type and palette. Appended deliberately at the
   end: the .xindex rules depend on source order, nothing goes above them. */
.geo{ margin:clamp(2.5rem,7vw,4rem) 0 0 }

.geo__map{
  position:relative;
  width:100%; aspect-ratio:16/10;
  border:1px solid rgba(198,177,140,.16);
  overflow:hidden; line-height:0;
}
.geo__map .geo__svg{ cursor:grab }
.geo__map.is-grabbing .geo__svg{ cursor:grabbing }
.geo__svg{ display:block; width:100%; height:100% }

.m-sea { fill:#080706 }
.m-land{ fill:#1D1913; stroke:rgba(198,177,140,.26); stroke-width:1; stroke-linejoin:round;
         vector-effect:non-scaling-stroke }
.m-ring{ fill:rgba(198,177,140,.11); stroke:var(--champagne); stroke-width:1.8;
         vector-effect:non-scaling-stroke }
/* how far they will travel at all. Quieter than the free ring on purpose:
   the free zone is the answer most people are looking for. */
.m-reach{ fill:rgba(198,177,140,.035); stroke:rgba(198,177,140,.42);
          stroke-width:1.2; stroke-dasharray:9 7;
          vector-effect:non-scaling-stroke }

.m-home{ fill:var(--ivory); stroke:#0B0907; stroke-width:2; vector-effect:non-scaling-stroke;
         r:calc(5px * var(--k,1)) }
.m-dot { fill:rgba(245,240,231,.34); r:calc(3px * var(--k,1)) }

.m-lab{
  font-family:var(--sans); font-size:calc(13px * var(--k, 1)); font-weight:300;
  letter-spacing:.11em; text-transform:uppercase;
  fill:rgba(245,240,231,.52);
  /* halo, so a label crossing the ring or a county line stays readable */
  paint-order:stroke; stroke:#080706; stroke-width:3px; stroke-linejoin:round;
}
.m-home-lab{ fill:var(--ivory); letter-spacing:.16em; font-size:calc(14px * var(--k,1)); stroke-width:4px }

/* the pin the inquiry drops */
.m-run{ stroke:var(--champagne); stroke-width:1.2; stroke-dasharray:5 5; opacity:.7;
        vector-effect:non-scaling-stroke }
.m-run.is-far{ stroke:#C98F6B }
.m-pin{ fill:var(--champagne); stroke:#0B0907; stroke-width:2; vector-effect:non-scaling-stroke;
        r:calc(6px * var(--k,1)) }
.m-pin.is-far{ fill:#C98F6B }
.m-pin-lab{ fill:var(--ivory); font-size:calc(14px * var(--k,1)); letter-spacing:.13em }

@media (prefers-reduced-motion:no-preference){
  #geoPin > *{ animation:pinIn .4s cubic-bezier(.2,.7,.3,1) both }
}
@keyframes pinIn{ from{ opacity:0 } to{ opacity:1 } }

.geo__legend{
  display:flex; flex-wrap:wrap; gap:.35rem clamp(1.5rem,4vw,3rem);
  margin:1.1rem 0 0; font-size:.875rem; line-height:1.55;
  color:rgba(245,240,231,.62);
}
.geo__legend p{ margin:0 }
.geo__legend b{ color:var(--ivory); font-weight:400 }
.geo__note{
  width:100%; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(245,240,231,.38); margin-top:.5rem !important;
}

@media (min-width:900px){
  .geo__map{ aspect-ratio:21/9 }
}
@media (max-width:560px){
  .geo__map{ aspect-ratio:4/3 }
  .m-lab{ font-size:19px }
  .m-home-lab{ font-size:20px }
}

/* the readout under the City field in the inquiry */
.bk__travel{
  margin:.5rem 0 0; font-size:.8125rem; line-height:1.5;
  color:var(--champagne);
}
.bk__travel.is-far{ color:rgba(245,240,231,.66) }

@media (prefers-reduced-motion:no-preference){
  .bk__travel{ animation:travelIn .32s cubic-bezier(.2,.7,.3,1) both }
}
@keyframes travelIn{ from{ opacity:0; transform:translateY(-3px) } to{ opacity:1; transform:none } }

/* zoom controls */
.geo__ctl{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:flex; gap:6px; line-height:1;
}
.geo__ctl button{
  appearance:none; cursor:pointer;
  min-width:34px; height:34px; padding:0 .55rem;
  background:rgba(10,8,6,.78); color:var(--ivory);
  border:1px solid rgba(198,177,140,.3);
  font-family:var(--sans); font-size:1rem; font-weight:300;
  backdrop-filter:blur(4px);
  transition:background .18s ease, border-color .18s ease;
}
.geo__ctl-reset,.geo__ctl-full{
  font-size:.6875rem !important; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:560px){
  .geo__ctl{ right:10px; bottom:10px; gap:4px }
  .geo__ctl button{ min-width:30px; height:30px; padding:0 .45rem }
  .geo__ctl-reset,.geo__ctl-full{ font-size:.625rem !important; letter-spacing:.08em }
}
.geo__ctl button:hover{ background:rgba(198,177,140,.16); border-color:rgba(198,177,140,.55) }
.geo__ctl button:focus-visible{ outline:1px solid var(--champagne); outline-offset:2px }

.geo__hint{
  position:absolute; left:14px; bottom:16px; z-index:2; margin:0;
  font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(245,240,231,.4); pointer-events:none; line-height:1.4;
}
@media (max-width:560px){ .geo__hint{ display:none } }

/* ─── reaching a person ─────────────────────────────────────────── */
.reach{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.4rem clamp(1.1rem,3vw,2rem);
  margin:1.6rem 0 0; font-size:.9375rem;
}
.reach__lead{ color:rgba(245,240,231,.5) }
.reach a{
  color:var(--ivory); text-decoration:none;
  border-bottom:1px solid rgba(198,177,140,.42);
  padding-bottom:2px; transition:border-color .2s ease, color .2s ease;
}
.reach a:hover{ color:var(--champagne); border-bottom-color:var(--champagne) }

.foot__reach{
  display:flex; flex-wrap:wrap; gap:.35rem clamp(1.2rem,3vw,2.2rem);
  margin:1.1rem 0 0; font-size:.875rem; color:rgba(245,240,231,.55);
}
.foot__reach a{
  color:var(--ivory); text-decoration:none;
  border-bottom:1px solid rgba(198,177,140,.34); padding-bottom:1px;
}
.foot__reach a:hover{ color:var(--champagne); border-bottom-color:var(--champagne) }
.defs a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(198,177,140,.4) }
.defs a:hover{ color:var(--champagne) }

/* zoomed far out the secondary city labels collide; Bradbury is the one that matters */
.geo__map.is-wide .m-place{ opacity:0; transition:opacity .2s ease }
.geo__map .m-place{ transition:opacity .2s ease }

/* ─── the reference on the confirmation screen ──────────────────── */
.done__ref{
  display:inline-flex; align-items:baseline; gap:.85rem;
  margin:1.4rem 0 0; padding:.7rem 1.15rem;
  border:1px solid rgba(198,177,140,.34);
  background:rgba(198,177,140,.06);
}
.done__ref span{
  font-size:.625rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(245,240,231,.5);
}
.done__ref b{
  font-family:var(--sans); font-weight:400; font-size:1.0625rem;
  letter-spacing:.1em; color:var(--champagne);
}
.done__reach{
  display:flex; flex-wrap:wrap; gap:.3rem clamp(1rem,3vw,1.9rem);
  margin:1.1rem 0 0; font-size:.8125rem; color:rgba(245,240,231,.55);
}
.done__reach a{
  color:rgba(245,240,231,.8); text-decoration:none;
  border-bottom:1px solid rgba(198,177,140,.3);
}
.done__reach a:hover{ color:var(--champagne); border-bottom-color:var(--champagne) }