/* ============================================================
   N⁰6 PONCHA BAR & EATERY
   Palette drawn from the room itself: dark wood, cream menu card,
   copper stirrers, Madeira gold — then the fruit does the shouting.
   ============================================================ */
:root{
  --ink:#16120E;
  --ink-2:#241C15;
  --cream:#F2E7D3;
  --cream-2:#E7D8BC;
  --paper-line:#C9B693;
  --wood:#8A5A38;
  --wood-dk:#5C3A22;
  --gold:#C99A3C;
  --gold-lt:#E3BE76;
  --lemon:#E5C22E;
  --lime:#7C9B3A;
  --passion:#C6551F;
  --plum:#5B2A4A;

  --vz-yellow:#F2C230;
  --vz-blue:#12408F;
  --vz-red:#C8102E;

  --display:'Cormorant Garamond', 'Iowan Old Style', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --body:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sign:'Archivo Black', 'Arial Black', 'Helvetica Neue', Impact, sans-serif;

  --gut: clamp(20px, 5vw, 72px);
  --band-y: clamp(64px, 10vw, 140px);
}
:root{ --gold-lt:#E3BE76; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- textures ---------- */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.42; mix-blend-mode:multiply;
  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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.woodwall{
  background:
    repeating-linear-gradient(96deg, rgba(0,0,0,.30) 0 2px, rgba(255,255,255,.018) 2px 9px, rgba(0,0,0,.16) 9px 11px, rgba(255,255,255,0) 11px 34px),
    repeating-linear-gradient(92deg, rgba(0,0,0,.22) 0 1px, rgba(255,255,255,0) 1px 63px),
    linear-gradient(174deg,#2A1F16 0%,#1B140E 42%,#120D09 100%);
}

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; line-height:1.02; }
.eyebrow{
  font-family:var(--body); font-size:.68rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.85em; margin:0 0 1.1rem;
}
.eyebrow::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--gold),transparent); opacity:.55; }
.eyebrow.solo::after{ display:none; }
.h-xl{ font-size:clamp(2.6rem,7.4vw,5.4rem); letter-spacing:-.005em; }
.h-lg{ font-size:clamp(2.1rem,5.4vw,3.9rem); }
.pt{ font-style:italic; color:var(--gold); font-family:var(--display); }
.lede{ font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.72; max-width:56ch; color:rgba(242,231,211,.82); }

.band{ position:relative; padding:var(--band-y) var(--gut); }
.wrap{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gut);
  background:rgba(18,13,9,.88); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(201,154,60,.22);
  transition:background .45s ease, border-color .45s ease;
}
.nav.tri{ background:rgba(18,13,9,.72); border-bottom-color:rgba(242,194,48,.55); }
.nav-mark{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.nav-logo{ height:34px; width:auto; }
.nav-mark b{ font-family:var(--display); font-size:1.42rem; font-weight:700; letter-spacing:.02em; line-height:1; }
.nav-mark b sup{ font-size:.5em; top:-.55em; position:relative; text-decoration:underline; text-underline-offset:.14em; }
.nav-mark span{ font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(242,231,211,.55); }
.nav-links{ display:flex; align-items:center; gap:clamp(.7rem,2vw,1.9rem); }
.nav-links a{
  text-decoration:none; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,231,211,.7); padding:.4rem 0; position:relative; white-space:nowrap;
}
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--gold); transition:right .3s ease; }
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ right:0; }
.nav-links a.tri-link{ color:var(--vz-yellow); }
.nav-links a.tri-link::after{ background:var(--vz-yellow); }
/* On a phone, keep only the two links people actually want in the thumb
   zone: the food menu and booking. Everything else is a scroll away. */
@media (max-width:820px){
  .nav-links a:not(.tri-link):not(.nav-book){ display:none; }
  .nav-mark span{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:clamp(96px,14vh,150px) var(--gut) clamp(56px,8vh,90px); overflow:hidden; }
.hero-grid{ max-width:1180px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; position:relative; z-index:3; }
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; gap:34px; } }

.flags{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.6rem; }
.flag{ width:38px; height:26px; border-radius:2px; box-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(242,231,211,.18); overflow:hidden; }
.flag-sep{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,231,211,.42); }

.wordmark{ margin:0 0 .35em; line-height:.86; }
.wordmark .n{ font-family:var(--display); font-weight:700; font-size:clamp(4.6rem,14vw,9.5rem); letter-spacing:-.03em; display:inline-block; color:var(--cream); }
.wordmark .n sup{ font-size:.34em; position:relative; top:-1.05em; text-decoration:underline; text-underline-offset:.1em; text-decoration-thickness:.055em; }
.wordmark .n .six{ color:var(--gold); }
.hero-sub{ font-family:var(--display); font-style:italic; font-size:clamp(1.35rem,3.1vw,2.05rem); color:var(--cream); line-height:1.25; margin:0 0 .5rem; }
.hero-rule{ width:78px; height:2px; background:var(--gold); margin:1.5rem 0; }
.hero-meta{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,231,211,.6); line-height:2.1; }
.hero-meta b{ color:var(--gold); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.btn{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:.95rem 1.5rem; border:1.5px solid var(--gold); color:var(--gold);
  background:transparent; transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); }
.btn.fill{ background:var(--gold); color:var(--ink); }
.btn.fill:hover{ background:var(--cream); border-color:var(--cream); }

/* still life */
.stilllife{ position:relative; }
.stilllife svg{ width:100%; height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)); }
.stir{ transform-box:fill-box; transform-origin:50% 96%; animation:stir 5.2s ease-in-out infinite; }
.stir.b{ animation-delay:-2.6s; }
@keyframes stir{ 0%,100%{ transform:rotate(-3.5deg);} 50%{ transform:rotate(3.5deg);} }
.rise{ opacity:1; }
.js .rise{ opacity:0; transform:translateY(24px); animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards; }
.rise.d1{ animation-delay:.08s; } .rise.d2{ animation-delay:.2s; } .rise.d3{ animation-delay:.34s; } .rise.d4{ animation-delay:.48s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

.scrollcue{ position:absolute; left:var(--gut); bottom:26px; z-index:4; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,231,211,.4); display:flex; align-items:center; gap:.7rem; }
.scrollcue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--gold),transparent); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker{ background:var(--gold); color:var(--ink); overflow:hidden; padding:.55rem 0; border-block:2px solid var(--ink); }
.ticker-in{ display:flex; gap:2.6rem; width:max-content; animation:slide 34s linear infinite; }
.ticker span{ font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; gap:2.6rem; }
.ticker span::after{ content:"◆"; font-size:.55em; opacity:.55; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ============================================================
   RITUAL — the three beats of making poncha
   ============================================================ */
.ritual{ background:var(--ink-2); }
.ritual-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:end; margin-bottom:clamp(40px,6vw,72px); }
@media (max-width:820px){ .ritual-head{ grid-template-columns:1fr; gap:20px; } }
.beats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,38px); }
@media (max-width:820px){ .beats{ grid-template-columns:1fr; } }
.beat{ position:relative; padding-top:1.6rem; border-top:1px solid rgba(201,154,60,.32); }
.beat-n{ font-family:var(--display); font-style:italic; font-size:.95rem; color:var(--gold); letter-spacing:.1em; margin-bottom:.9rem; }
.beat svg{ height:120px; width:auto; margin-bottom:1.1rem; }
.beat h3{ font-size:1.75rem; margin-bottom:.4rem; }
.beat h3 em{ font-style:normal; display:block; font-family:var(--body); font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(242,231,211,.45); margin-top:.5rem; }
.beat p{ margin:0; font-size:.95rem; color:rgba(242,231,211,.72); }

/* ============================================================
   MENU CARD (shared)
   ============================================================ */
.card{
  background:var(--cream); color:var(--ink); position:relative;
  padding:clamp(30px,5vw,66px);
  box-shadow:0 34px 70px rgba(0,0,0,.5);
}
.card::before{
  content:""; position:absolute; inset:14px; border:1px solid var(--paper-line); pointer-events:none;
}
.card-in{ position:relative; z-index:2; }
.card .eyebrow{ color:var(--wood); }
.card .eyebrow::after{ background:linear-gradient(90deg,var(--wood),transparent); }

.menu-title{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1.5rem; margin-bottom:.6rem; }
.menu-title h2{ font-size:clamp(2.2rem,5vw,3.5rem); }
.menu-title .note{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--wood); }
.card .intro{ max-width:60ch; color:rgba(22,18,14,.72); font-size:.98rem; margin:0 0 clamp(26px,4vw,44px); }

/* poncha list */
.pour{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px) clamp(28px,4vw,58px); }
@media (max-width:760px){ .pour{ grid-template-columns:1fr; } }
.pour-item{ display:flex; gap:1.1rem; align-items:flex-start; }
.pour-item .fruit{ flex:0 0 78px; width:78px; transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.pour-item:hover .fruit{ transform:rotate(-9deg) scale(1.07); }
.pour-body{ flex:1; min-width:0; }
.pour-name{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1.15; }
.dots{ flex:1; border-bottom:1.5px dotted rgba(22,18,14,.35); transform:translateY(-.32em); min-width:16px; }
.price{ font-family:var(--body); font-size:.92rem; font-weight:700; letter-spacing:.04em; white-space:nowrap; }
.pour-desc{ font-size:.86rem; line-height:1.55; color:rgba(22,18,14,.66); margin:.3rem 0 0; }
.pour-desc em{ font-family:var(--display); font-style:italic; font-size:1.05em; color:var(--wood); }

/* Small phones (320px): the fruit icon + card padding + price column
   together exceed the viewport. Tighten all three rather than let the
   page scroll sideways. */
@media (max-width:420px){
  .card{ padding:26px 18px; }
  .card::before{ inset:9px; }
  .pour-item{ gap:.7rem; }
  .pour-item .fruit{ flex:0 0 56px; width:56px; }
  .pour-name{ font-size:1.3rem; }
  .menu-title h2{ font-size:2rem; }
}

.jug{
  margin-top:clamp(28px,4vw,44px); padding:1.5rem clamp(1.2rem,3vw,2.2rem);
  background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.jug h4{ font-size:1.6rem; margin-bottom:.15rem; }
.jug p{ margin:0; font-size:.85rem; color:rgba(242,231,211,.66); }
.jug .price{ color:var(--gold); font-size:1.05rem; }

/* ============================================================
   BAR LIST
   ============================================================ */
.bar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,52px); margin-top:clamp(30px,4vw,50px); }
@media (max-width:900px){ .bar-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .bar-grid{ grid-template-columns:1fr; } }
.bar-col h4{
  font-family:var(--body); font-size:.66rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid rgba(201,154,60,.3);
}
.h4-badge{ display:flex; align-items:center; gap:.6rem; }
.sb-badge{ width:40px; height:40px; flex:0 0 auto; transform:rotate(-8deg); }
.line{ display:flex; align-items:baseline; gap:.5rem; padding:.42rem 0; font-size:.95rem; }
.line .dots{ border-bottom-color:rgba(242,231,211,.24); }
.line .price{ color:var(--gold); font-size:.86rem; }
.line small{ display:block; font-size:.76rem; color:rgba(242,231,211,.5); letter-spacing:.02em; }
.line-name{ font-weight:500; }
.nikita{
  margin-top:clamp(34px,5vw,56px); border:1px solid rgba(201,154,60,.35); padding:clamp(20px,3vw,34px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,32px); align-items:center;
}
@media (max-width:640px){ .nikita{ grid-template-columns:1fr; } }
.nikita svg{ width:92px; }
.nikita h4{ font-family:var(--display); font-size:1.7rem; color:var(--cream); margin-bottom:.3rem; }
.nikita p{ margin:0; font-size:.92rem; color:rgba(242,231,211,.7); max-width:52ch; }
.nikita .tag{ display:inline-block; margin-top:.7rem; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); background:var(--gold); padding:.3rem .6rem; }

/* ============================================================
   LA TRICOLOR — the gear change
   ============================================================ */
.tricolor{
  background:
    linear-gradient(180deg, rgba(242,194,48,.10), rgba(200,16,46,.07)),
    #17110B;
  border-top:6px solid var(--vz-yellow);
  border-bottom:6px solid var(--vz-red);
}
.tri-bands{ position:absolute; inset:0; opacity:.09; pointer-events:none;
  background:repeating-linear-gradient(-14deg, var(--vz-yellow) 0 26px, var(--vz-blue) 26px 52px, var(--vz-red) 52px 78px, transparent 78px 240px);
}
.tri-head{ text-align:center; margin-bottom:clamp(34px,5vw,60px); }
.tri-stars{ display:flex; justify-content:center; gap:.5rem; margin-bottom:1.3rem; }
.tri-stars i{ width:11px; height:11px; background:var(--cream); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.tri-name{
  font-weight:900;
  font-family:var(--sign); font-size:clamp(2.4rem,8vw,5.6rem); line-height:.92; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--cream); margin:0 0 .3rem;
  text-shadow:4px 4px 0 var(--vz-blue), 8px 8px 0 rgba(200,16,46,.85);
}
.tri-kicker{ font-size:.68rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--vz-yellow); }
.tri-lede{ max-width:56ch; margin:1.5rem auto 0; font-size:1rem; color:rgba(242,231,211,.78); }



/* ---- La Tricolor tabbed menu ---- */
.tabbar{ display:none; gap:.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.75rem; margin-bottom:clamp(26px,3.5vw,42px); border-bottom:1px solid rgba(242,194,48,.28); }
.js .tabbar{ display:flex; }
.tabbar::-webkit-scrollbar{ height:3px; }
.tabbar::-webkit-scrollbar-thumb{ background:rgba(242,194,48,.45); }
.tab{
  flex:0 0 auto; font-family:var(--sign); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(242,231,211,.6); background:transparent; border:1px solid rgba(242,231,211,.18);
  padding:.62rem 1rem; cursor:pointer; white-space:nowrap;
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
.tab:hover{ color:var(--cream); border-color:rgba(242,194,48,.5); }
.tab[aria-selected="true"]{ color:var(--ink); background:var(--vz-yellow); border-color:var(--vz-yellow); }
.panel{ display:block; }
.js .panel{ display:none; }
.js .panel.on{ display:block; animation:fadein .35s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
/* min() guard: a bare minmax(330px,…) forces a 330px column and pushes the
   page sideways on a 320px phone. min(330px,100%) lets it shrink instead. */
.panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:clamp(24px,3.2vw,46px); align-items:start; }
.m-group{ background:rgba(242,231,211,.045); border:1px solid rgba(242,194,48,.26); padding:clamp(20px,3vw,32px); position:relative; }
.m-group::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--vz-yellow) 0 33.3%,var(--vz-blue) 33.3% 66.6%,var(--vz-red) 66.6% 100%); }
.m-group h3{ font-family:var(--sign); font-size:1.2rem; text-transform:uppercase; color:var(--vz-yellow); margin-bottom:.3rem; }
.m-note{ font-size:.78rem; color:rgba(242,231,211,.5); margin:0 0 1.2rem; line-height:1.5; }
.m-row{ padding:.7rem 0; border-bottom:1px dashed rgba(242,231,211,.13); }
.m-row:last-child{ border-bottom:0; padding-bottom:0; }
.m-t{ display:flex; align-items:baseline; gap:.5rem; }
.m-n{ font-family:var(--sign); font-size:.85rem; text-transform:uppercase; letter-spacing:.02em; color:var(--cream); }
.m-d{ font-size:.8rem; color:rgba(242,231,211,.6); margin:.25rem 0 0; line-height:1.5; }
.m-sub{ display:flex; align-items:baseline; gap:.5rem; padding:.3rem 0 .3rem 1rem; font-size:.82rem; color:rgba(242,231,211,.78); }
.panel .dots, .m-sub .dots{ border-bottom-color:rgba(242,231,211,.2); }
.panel .price, .m-sub .price{ color:var(--vz-yellow); }
.tg{ display:inline-block; font-family:var(--body); font-size:.55rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.15rem .4rem; margin-left:.35rem; vertical-align:.12em; }
.tg.v{ background:rgba(124,155,58,.85); color:#0F1408; }
.tg.gf{ background:rgba(201,154,60,.85); color:var(--ink); }
.tg.na{ background:transparent; border:1px solid rgba(200,16,46,.7); color:#F09A8B; }
.m-check{ font-size:.72rem; color:rgba(242,231,211,.45); margin-top:clamp(22px,3vw,34px); font-style:italic; }

/* ============================================================
   HOME
   ============================================================ */
.home{ background:var(--cream); color:var(--ink); }
.home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,70px); align-items:center; }
@media (max-width:860px){ .home-grid{ grid-template-columns:1fr; } }
.home h2{ font-size:clamp(2.2rem,5.6vw,3.9rem); line-height:1.04; margin-bottom:1.3rem; }
.home p{ color:rgba(22,18,14,.75); max-width:52ch; }
.home .sig{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--wood); margin-top:2rem; }
.polas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pola{ background:#fff; padding:12px 12px 40px; box-shadow:0 14px 30px rgba(0,0,0,.24); position:relative; }
.pola:nth-child(1){ transform:rotate(-2.4deg); }
.pola:nth-child(2){ transform:rotate(1.8deg) translateY(16px); }
.pola:nth-child(3){ transform:rotate(1.4deg); }
.pola:nth-child(4){ transform:rotate(-1.6deg) translateY(16px); }
.pola .ph{ aspect-ratio:1/1; background:linear-gradient(150deg,var(--cream-2),#D6C3A2); display:flex; align-items:center; justify-content:center; }
.pola .ph svg{ width:56%; opacity:.62; }
.pola .cap{ position:absolute; left:0; right:0; bottom:11px; text-align:center; font-family:var(--display); font-style:italic; font-size:.9rem; color:rgba(22,18,14,.6); }
.pola .tape{ position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg); width:64px; height:19px; background:rgba(201,154,60,.42); box-shadow:0 1px 2px rgba(0,0,0,.12); }

/* ============================================================
   VISIT
   ============================================================ */
.visit{ background:var(--ink); }
.visit-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,68px); }
@media (max-width:860px){ .visit-grid{ grid-template-columns:1fr; } }
.addr{ font-family:var(--display); font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.12; margin-bottom:1.2rem; }
.addr span{ display:block; color:var(--gold); }
.hours{ margin-top:.6rem; }
.hours .row{ display:flex; align-items:baseline; gap:.6rem; padding:.55rem 0; border-bottom:1px solid rgba(242,231,211,.1); font-size:.95rem; }
.hours .row.today{ color:var(--gold); font-weight:700; }
.hours .row .d{ flex:0 0 108px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.hours .row .t{ margin-left:auto; font-variant-numeric:tabular-nums; }
.hours-note{ font-size:.78rem; color:rgba(242,231,211,.45); margin-top:1rem; font-style:italic; font-family:var(--display); font-size:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink-2); padding:clamp(44px,6vw,72px) var(--gut) clamp(30px,4vw,46px); border-top:1px solid rgba(201,154,60,.2); }
.foot-in{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.foot-logo{ height:46px; width:auto; margin:0 0 .9rem; }
.foot .flags{ margin:0 0 1rem; }
.foot-small{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,231,211,.4); line-height:2; }
.foot-sig{ font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--gold); }

/* reveal on scroll */
.rv{ opacity:1; transform:none; }
.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1; transform:none; } }

/* the stirrer rail — signature */
.rail{ position:fixed; left:16px; top:50%; transform:translateY(-50%); z-index:40; display:none; pointer-events:none; }
@media (min-width:1280px){ .rail{ display:block; } }
.rail-track{ width:2px; height:190px; background:rgba(201,154,60,.22); position:relative; margin:0 auto; }
.rail-fill{ position:absolute; inset:0 0 auto 0; height:0%; background:var(--gold); }
.rail-stick{ width:34px; margin:10px auto 0; transform-origin:50% 20%; }
.rail-lbl{ font-size:.55rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(242,231,211,.35); writing-mode:vertical-rl; margin:0 auto 12px; }

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink); padding:.8rem 1.2rem;
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

/* ============================================================
   BOOK
   ============================================================ */
.book{ background:var(--ink-2); }
.book-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,68px); align-items:start; }
@media (max-width:860px){ .book-grid{ grid-template-columns:1fr; } }
.book-alt{ margin-top:1.6rem; font-size:.9rem; color:rgba(242,231,211,.6); }
.book-alt a{ color:var(--gold); }
.bookform{ background:rgba(242,231,211,.04); border:1px solid rgba(201,154,60,.3); padding:clamp(22px,3.4vw,38px); }
.f-row{ margin-bottom:1.1rem; }
.f-two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.f-row label{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.f-row input, .f-row textarea{
  width:100%; background:rgba(0,0,0,.28); border:1px solid rgba(242,231,211,.2);
  color:var(--cream); font-family:var(--body); font-size:.95rem; padding:.75rem .85rem; border-radius:0;
}
.f-row input:focus, .f-row textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.f-row input[aria-invalid="true"], .f-row textarea[aria-invalid="true"]{ border-color:var(--vz-red); }
.f-row textarea{ resize:vertical; }
.f-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.bookform .btn{ width:100%; justify-content:center; margin-top:.4rem; cursor:pointer; font-family:var(--body); }
.bookform .btn[disabled]{ opacity:.55; cursor:progress; }
.f-msg{ margin:.9rem 0 0; font-size:.88rem; min-height:1.2em; }
.f-msg.ok{ color:var(--lime); }
.f-msg.bad{ color:#F09A8B; }

/* nav book link reads as the action */
.nav-links a.nav-book{ color:var(--gold); }

/* Logo images carry width/height attributes in the HTML so the browser
   reserves the right box before they load. The explicit sizes set earlier
   (.nav-logo, .foot-logo, .sb-badge) are authoritative — never add a
   blanket height:auto down here, it silently overrides all three. */