/* ==========================================================================
   Thaiquila — direction 06 "Agave Petrol"
   --------------------------------------------------------------------------
   Four rules the whole sheet obeys. Break one and this stops looking premium:

   1. PETROL IS A SURFACE, NEVER INK. It appears as a zone background or
      behind photography. No petrol text, no petrol borders on bone.
   2. BLACK CARRIES THE NUMBERS. The figures band and every primary button
      are pure black. Black is the accent here — not the teal.
   3. ONE BONE. #F3F6F5 does all type, all rules, all icons. Opacity is the
      only permitted variation.
   4. NO THIRD COLOUR. Not for tags, not for success states, not for links.

   Photography: every .plate is a placeholder until a real shot lands. Set
   `--shot: url("…")` on the element and the duotone + grain treatment
   applies itself. Nothing else needs to change.

   Type is two families and both are stand-ins:
     display — Big Shoulders Display 800 · standing in for Druk Condensed
     text/UI — Figtree · close enough to the reference geometric to ship
   ========================================================================== */

:root{
  /* petrol — surfaces only, darkest to brightest */
  --void:   #03181E;
  --deep:   #04262E;
  --mid:    #0A5462;
  --lift:   #0E6B7B;
  --bright: #1A98A2;

  --black:  #000;
  --bone:   #F3F6F5;
  --mist:   #93BCC0;

  --hair:   rgba(243,246,245,.14);
  --hair-2: rgba(243,246,245,.30);
  --soft:   rgba(243,246,245,.66);
  --softer: rgba(243,246,245,.46);

  /* display scale — condensed, so it can afford to be large */
  --d-hero:  clamp(3.25rem, 11vw, 8.25rem);
  --d-shout: clamp(2.25rem, 5.2vw, 4.25rem);
  --d-lg:    clamp(1.75rem, 3.4vw, 2.75rem);
  --d-md:    clamp(1.35rem, 2.2vw, 1.65rem);

  /* text scale */
  --t--2: .625rem;
  --t--1: .719rem;
  --t-0:  1rem;
  --t-1:  1.0625rem;
  --t-2:  1.25rem;

  --air-1: clamp(3rem,  6vw,  5rem);
  --air-2: clamp(4rem,  8vw,  7rem);
  --air-3: clamp(5rem, 10vw,  9rem);
  --gut:   clamp(1.15rem, 5vw, 4.5rem);
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--deep);
  color:var(--bone);
  font:400 var(--t-1)/1.62 Figtree,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit}

.wrap{width:min(100% - (var(--gut) * 2), 1180px);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;left:var(--gut);top:-4rem;z-index:99;background:var(--bone);color:var(--black);
  padding:.85rem 1.25rem;border-radius:99px;font:700 var(--t--1)/1 Figtree;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;transition:top .18s var(--ease)}
.skip:focus{top:1rem}

:focus-visible{outline:2px solid var(--bone);outline-offset:3px;border-radius:2px}

/* ── type primitives ─────────────────────────────────────────────────── */
.display,.shout{
  font-family:Big Shoulders Display,Oswald,Impact,sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.004em;margin:0;
}
.display{font-size:var(--d-hero);line-height:.8}
.display em{
  font-size:.3em;font-style:normal;display:inline-block;vertical-align:top;
  line-height:1.1;margin-right:.14em;letter-spacing:.02em;
}
.shout{font-size:var(--d-shout);line-height:.88}
.shout u{text-decoration:none;color:var(--mist)}

.eyebrow{margin:0 0 1.15rem;font:600 var(--t--1)/1 Figtree;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mist)}

.lede{margin:0;font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.62;color:rgba(243,246,245,.9);max-width:44ch}

.mono{font:500 var(--t--1)/1.5 Figtree;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--black);color:#fff;border:1.5px solid var(--black);
  border-radius:99px;padding:1.0625rem 2.125rem;
  font:700 var(--t--1)/1 Figtree;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
/* hover lifts only where there is a pointer; on touch it sticks after a tap */
@media (hover: hover){.btn:hover{transform:translateY(-2px)}}
.btn--ghost{background:transparent;color:var(--bone);border-color:rgba(243,246,245,.45)}
.btn--ghost:hover{background:rgba(243,246,245,.08)}
.btn--ink{background:var(--bone);color:var(--black);border-color:var(--bone)}
.btn--ink:hover{background:#fff}

/* ── photo plates ────────────────────────────────────────────────────────
   Placeholder until a shot lands. `--shot: url("…")` swaps it in and the
   duotone + grain below treat it automatically.                          */
.plate{
  position:relative;overflow:hidden;background-color:var(--deep);
  background-image:var(--shot, linear-gradient(158deg,#0F6C7C 0%,#084A58 42%,#03212A 100%));
  background-size:cover;background-position:center;
}
.plate::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(72% 56% at 32% 24%, rgba(168,230,238,.38), transparent 62%),
    radial-gradient(90% 82% at 84% 96%, rgba(2,20,26,.88), transparent 70%);
}
.plate::after{
  content:"";position:absolute;inset:0;z-index:2;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='.6'/></svg>");
}
.plate__cap{
  position:absolute;left:.7rem;bottom:.65rem;z-index:4;
  font:600 var(--t--2)/1 Figtree;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.26);
  padding:.35rem .5rem;border-radius:3px;
}

/* ── header ──────────────────────────────────────────────────────────── */
.head{position:absolute;inset:0 0 auto;z-index:20;padding-block:clamp(1.15rem,2.4vw,2rem)}
.head__in{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__mark{width:1.375rem;height:1.375rem;opacity:.9}
.brand__name{font:800 var(--t--1)/1 Figtree;letter-spacing:.36em;text-transform:uppercase;color:var(--bone)}
.brand__name b{font-weight:800}

.head__menu{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);margin-left:auto}

.nav{display:flex;gap:clamp(1rem,1.8vw,1.75rem);flex-wrap:wrap}
.nav a{font:500 var(--t--1)/1 Figtree;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;transition:color .18s var(--ease)}
.nav a:hover{color:var(--bone)}

.head .btn{padding:.9rem 1.5rem}

/* phones only, and only once menu.js can open it; see the 760px block */
.menu-btn{display:none;align-items:center;justify-content:center;flex:none;
  width:2.75rem;height:2.75rem;padding:0;margin-left:auto;border-radius:99px;
  background:transparent;color:var(--bone);border:1.5px solid rgba(243,246,245,.45);cursor:pointer}
.menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{
  display:block;width:1.125rem;height:1.5px;border-radius:1px;background:currentColor;
  transition:transform .2s var(--ease),background-color .2s var(--ease)}
.menu-btn__bars{position:relative}
.menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0}
.menu-btn__bars::before{top:-6px}
.menu-btn__bars::after{top:6px}
.menu-btn[aria-expanded="true"] .menu-btn__bars{background-color:transparent}
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ── zone A · hero, over photography ─────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(7.5rem,15vw,11rem) var(--air-2);background:var(--deep)}

.hero__photo{position:absolute;inset:0;z-index:-1;background-color:var(--deep);
  background-image:var(--shot, linear-gradient(158deg,#12707E 0%,#0A4E5C 46%,#03222A 100%));
  background-size:cover;background-position:70% center}
/* petrol wash over the shot, darkest behind the type on the left */
.hero__photo::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(78% 68% at 26% 18%, rgba(150,225,232,.32), transparent 62%),
    linear-gradient(90deg, rgba(3,24,30,.88) 0%, rgba(3,24,30,.55) 45%, rgba(4,38,46,.18) 75%),
    linear-gradient(0deg, rgba(3,24,30,.9) 0%, transparent 35%);
}
.hero__photo::after{
  content:"";position:absolute;inset:0;opacity:.6;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23h)' opacity='.6'/></svg>");
}
.hero__cap{position:absolute;left:auto;right:var(--gut);bottom:1rem;z-index:2}

.hero__in{position:relative;z-index:2}
.hero .display{margin-bottom:clamp(1.4rem,2.4vw,2rem)}

.finder{display:flex;gap:.625rem;margin:clamp(1.75rem,3vw,2.5rem) 0 .875rem;flex-wrap:wrap;max-width:32rem}
.finder input{
  flex:1 1 15rem;min-width:0;background:rgba(3,24,30,.5);color:var(--bone);
  border:1.5px solid rgba(243,246,245,.35);border-radius:99px;
  padding:1.0625rem 1.5rem;font:400 var(--t-0)/1 Figtree;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.finder input::placeholder{color:var(--softer)}
.finder input:focus{outline:none;border-color:var(--bone);background:rgba(3,24,30,.72)}

.hero__hint{margin:0;font:400 var(--t--1)/1.5 Figtree;letter-spacing:.1em;
  text-transform:uppercase;color:var(--softer)}
.hero__hint b{font-weight:600;color:var(--mist)}

/* ── zone B · the figures band, black ────────────────────────────────── */
.band{background:var(--black);padding-block:var(--air-1)}
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:clamp(1rem,3vw,2.75rem)}
/* six figures sit as two rows of three, never 5 + 1 */
.figures--six{grid-template-columns:repeat(auto-fit,minmax(max(11rem,30%),1fr))}
.figure__n{margin:0;font:800 clamp(2.25rem,4.4vw,3.75rem)/.88 Big Shoulders Display,sans-serif;color:var(--bone)}
.figure__n sup{font-size:.28em;vertical-align:top;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;margin-left:.2em;font-family:Figtree,sans-serif;color:var(--mist)}
.figure__t{margin:.6rem 0 0;font-size:var(--t-0);line-height:1.55;color:var(--softer)}
.figure__t b{font-weight:600;color:var(--soft)}

/* ── zone C · room of the month, mid petrol ──────────────────────────── */
.paper{background:linear-gradient(180deg,var(--mid),#064352);padding-block:var(--air-2)}
.spot{display:grid;grid-template-columns:minmax(13rem,.85fr) 1.15fr;gap:clamp(1.25rem,3.4vw,3.25rem);align-items:start}
.spot__main{grid-column:2;grid-row:1 / span 2}
.spot__shot{aspect-ratio:4/5;border-radius:4px}

.spot h2.shout{margin-bottom:.35rem}
.spot .shout span{display:block;font:500 var(--t--1)/1 Figtree;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist);margin-top:.85rem}
.spot__body{margin:1.25rem 0 0;font-size:var(--t-1);line-height:1.62;color:rgba(243,246,245,.86);max-width:46ch}

.pours{display:grid;gap:.75rem;margin:1.5rem 0 0;max-width:26rem}
.pour__row{display:flex;justify-content:space-between;gap:.75rem;
  font:600 var(--t--1)/1 Figtree;letter-spacing:.1em;text-transform:uppercase}
.pour__row span{color:var(--mist);font-weight:500}
.pour__track{display:block;height:3px;background:rgba(243,246,245,.22);margin-top:.45rem}
.pour__fill{display:block;height:100%;width:0;background:var(--bone);
  transition:width 1.1s var(--ease)}

.spot__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem}

.spot__meta{grid-column:1;border-top:1px solid var(--hair-2);margin-top:1.5rem}
.spot__meta div{display:flex;justify-content:space-between;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--hair)}
.spot__meta span:first-child{font:500 var(--t--2)/1.4 Figtree;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist)}
.spot__meta span:last-child{font:800 var(--t-2)/1 Big Shoulders Display,sans-serif}

/* ── zone D · the directory, deepest petrol ──────────────────────────── */
.dir{background:var(--deep);padding-block:var(--air-2)}
.dir__head{display:flex;align-items:flex-end;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.5rem}
.dir__head h2{font-family:Big Shoulders Display,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:var(--d-lg);line-height:.92;margin:0}

.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-left:auto}
.chip{
  background:transparent;border:1px solid rgba(243,246,245,.26);border-radius:99px;
  color:var(--soft);padding:.65rem .95rem;cursor:pointer;
  font:600 var(--t--1)/1 Figtree;letter-spacing:.12em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
@media (hover: hover){.chip:hover{border-color:var(--bone);color:var(--bone)}}
.chip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:var(--black)}

.count{margin:0 0 .4rem;font:500 var(--t--1)/1 Figtree;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist)}
.count b{font-weight:800;color:var(--bone)}

.list{list-style:none;margin:0;padding:0}
.row{
  display:grid;
  grid-template-columns:1.875rem 3.875rem minmax(8rem,1.15fr) minmax(10rem,1.5fr) 4.625rem;
  gap:clamp(.625rem,1.6vw,1.375rem);align-items:center;
  padding:.8125rem 0;border-bottom:1px solid var(--hair);
}
.row:first-child{border-top:1px solid var(--hair-2)}
.row[hidden]{display:none}
.row__i{margin:0;font:600 var(--t--1)/1 Figtree;color:var(--softer)}
.row__shot{height:2.625rem;border-radius:3px}
.row__name{margin:0;font:800 var(--d-md)/1 Big Shoulders Display,sans-serif;text-transform:uppercase}
.row__where{display:block;font:500 var(--t--2)/1.4 Figtree;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);margin-top:.3rem}
.row__body{min-width:0}
.row__note{margin:0;font-size:var(--t--1);line-height:1.45;color:var(--softer)}
.row__tags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.45rem}
.tag{font:600 var(--t--2)/1 Figtree;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);border:1px solid var(--hair);border-radius:99px;padding:.35rem .5rem}
.tag--o{border-color:var(--hair-2);color:var(--soft)}
.row__end{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.row__pours{margin:0;font:800 var(--d-md)/1 Big Shoulders Display,sans-serif;text-align:right}
.row__pours sub{display:block;font:500 var(--t--2)/1 Figtree;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);margin-top:.25rem;bottom:0}
.row__go{font:600 var(--t--2)/1 Figtree;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;border-bottom:1px solid var(--hair-2);padding-bottom:.15rem}
.row__go:hover{border-color:var(--bone)}

.empty{margin:1.75rem 0 0;font-size:var(--t-0);color:var(--mist)}
.dir__foot{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:clamp(1.75rem,3vw,2.5rem)}
.dir__foot .btn{margin-left:auto}

/* ── zone E · the standard + the tip form, black ─────────────────────── */
.glow{background:var(--black);padding-block:var(--air-3)}
.give{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,4.5rem);align-items:start}

.creed{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem;max-width:34rem}
.creed li{display:grid;grid-template-columns:1.125rem 1fr;gap:.875rem;align-items:start}
.creed svg{width:1.125rem;height:1.125rem;color:var(--mist);margin-top:.15rem}
.creed span{font-size:var(--t-0);line-height:1.6;color:var(--softer)}
.creed b{font-weight:600;color:var(--bone)}

.tip{background:var(--deep);border:1px solid var(--hair);border-radius:10px;
  padding:clamp(1.25rem,2.4vw,2rem);display:grid;gap:.45rem}
.tip label{font:600 var(--t--2)/1 Figtree;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);margin-top:.75rem}
.tip label:first-of-type{margin-top:0}
.tip input{
  background:rgba(3,24,30,.6);border:1px solid var(--hair-2);border-radius:6px;
  color:var(--bone);padding:.875rem 1rem;font:400 var(--t-0)/1 Figtree;
  transition:border-color .18s var(--ease);
}
.tip input::placeholder{color:var(--softer)}
.tip input:focus{outline:none;border-color:var(--bone)}
.tip .btn{margin-top:1.25rem;background:var(--bone);color:var(--black);border-color:var(--bone)}
.tip__note{margin:.875rem 0 0;font-size:var(--t--1);line-height:1.55;color:var(--softer)}
.tip__ok{margin:.75rem 0 0;font:600 var(--t--1)/1.5 Figtree;letter-spacing:.06em;color:var(--mist)}
.tip__err{margin:.75rem 0 0;font:600 var(--t--1)/1.5 Figtree;letter-spacing:.06em;color:var(--bone)}
.tip__err a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.tip .btn:disabled{opacity:.6;cursor:wait}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{background:var(--void);padding-block:var(--air-1) 2.25rem}
.foot__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.75rem,4vw,4rem);align-items:start}
.foot__word{margin:0;font:800 var(--d-md)/1.08 Big Shoulders Display,sans-serif;
  text-transform:uppercase;max-width:18ch}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.75rem}
.foot__cols h3{margin:0 0 .875rem;font:600 var(--t--2)/1 Figtree;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mist)}
.foot__cols a{display:block;margin-bottom:.55rem;font-size:var(--t--1);color:var(--softer);
  text-decoration:none;transition:color .18s var(--ease)}
.foot__cols a:hover{color:var(--bone)}
.foot__rule{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--hair);margin-top:var(--air-1);padding-top:1.25rem}
.foot__rule p{margin:0;font:500 var(--t--2)/1 Figtree;letter-spacing:.16em;
  text-transform:uppercase;color:var(--softer)}

/* ── entry pages · one per bar ───────────────────────────────────────── */
.row__name a{text-decoration:none}
.row__name a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

.entry-hero{padding-bottom:var(--air-1)}
.entry-hero__in{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,4rem);align-items:end}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair-2)}
.crumb a:hover{border-color:var(--mist)}
.entry-hero__name{font-size:clamp(3rem,9vw,7rem);line-height:.84}
.entry-hero__where{margin:.9rem 0 1.4rem;font:600 var(--t--1)/1 Figtree;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist)}
.entry-hero__tags{margin-top:1.25rem}
.entry-hero__shot{aspect-ratio:4/5;border-radius:4px}

.band .figure__t{max-width:22ch}

.tk{color:var(--mist)}

.entry{background:var(--deep);padding-block:var(--air-1) var(--air-2)}
.entry__status{margin:0 0 clamp(2rem,4vw,3rem);padding:1rem 1.25rem;max-width:62rem;
  border:1px solid var(--hair-2);border-radius:6px;font-size:var(--t-0);line-height:1.6;color:var(--soft)}
.entry__status b{color:var(--bone);font-weight:600}

.entry__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,5rem);align-items:start}

.prose h2,.entry__aside-h{font:800 var(--d-lg)/.92 Big Shoulders Display,sans-serif;
  text-transform:uppercase;margin:0 0 1.25rem}
.prose p{margin:0 0 1.1rem;max-width:62ch;color:rgba(243,246,245,.86)}
.prose h2:not(:first-child){margin-top:2.75rem}

.entry__aside-h{font-size:var(--d-md);margin-top:2.25rem}
.entry__aside-h:first-child{margin-top:0}

.facts{margin:0;border-top:1px solid var(--hair-2)}
.facts div{display:grid;grid-template-columns:6.5rem 1fr;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--hair)}
.facts dt{font:500 var(--t--2)/1.6 Figtree;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.facts dd{margin:0;font-size:var(--t-0);line-height:1.45}

.sources{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.sources a{font-size:var(--t--1);color:var(--soft);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.sources a:hover{color:var(--bone);border-color:var(--bone)}

.entry__fix{margin:2rem 0 0;font-size:var(--t--1);line-height:1.6;color:var(--softer)}
.entry__fix a{color:var(--soft)}

/* the agave list, as the bar publishes it */
.agave-list{margin-top:var(--air-1);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--hair-2)}
.agave-list__note{margin:0 0 clamp(1.75rem,3vw,2.5rem);max-width:62ch;font-size:var(--t-0);line-height:1.6;color:var(--soft)}
.agave-list__grid{columns:2 22rem;column-gap:clamp(2rem,5vw,5rem)}
.agave-list__grid .agave-list__t{break-inside:avoid;margin-bottom:clamp(2rem,4vw,3.5rem)}
.agave-list__t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.agave-list__t caption{text-align:left;padding-bottom:.75rem;
  font:800 var(--d-md)/1 Big Shoulders Display,sans-serif;text-transform:uppercase}
.agave-list__t thead th{padding:0 0 .5rem;border-bottom:1px solid var(--hair-2);
  font:500 var(--t--2)/1.6 Figtree;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.agave-list__t th,.agave-list__t td{text-align:left;vertical-align:top}
.agave-list__t tbody th,.agave-list__t tbody td{padding:.55rem 0;border-bottom:1px solid var(--hair);
  font-size:var(--t-0);line-height:1.4;font-weight:400}
.agave-list__t .n{text-align:right;white-space:nowrap;padding-left:1rem;width:1%}
.agave-list__t tbody th span{display:block;margin-top:.15rem;font-size:var(--t--1);color:var(--softer)}
.agave-list__flights{margin-bottom:clamp(2rem,4vw,3.5rem);max-width:44rem}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:var(--air-1);
  border-top:1px solid var(--hair-2);padding-top:1.5rem}
.pager__link{text-decoration:none;font:800 var(--d-md)/1 Big Shoulders Display,sans-serif;text-transform:uppercase}
.pager__link span{display:block;margin-bottom:.5rem;font:600 var(--t--2)/1 Figtree;letter-spacing:.2em;color:var(--mist)}
.pager__link--next{text-align:right}
.pager__link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}

/* ── motion ──────────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;transform:none;transition:none}
  .pour__fill{transition:none}
  .btn:hover{transform:none}
  .menu-btn__bars,.menu-btn__bars::before,.menu-btn__bars::after{transition:none}
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .head{position:static;background:var(--black)}
  .hero{padding-top:var(--air-1)}
  .head__in{flex-wrap:wrap;row-gap:.875rem}
  /* the wrapper steps aside so the nav can take its own row */
  .head__menu{display:contents}
  .nav{margin-left:0;order:3;width:100%;gap:1.125rem}
  /* taller hit area for thumbs, same visual position */
  .nav a{padding-block:.75rem;margin-block:-.75rem}
  .head .btn{margin-left:auto}
  .give,.foot__grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  /* the smallest labels go from 10px to 11px on phones */
  :root{--t--2:.6875rem}
  /* header: nav and "Add a bar" fold into a panel behind the menu button */
  .js .menu-btn{display:inline-flex}
  .js .head__menu{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0}
  .js .head.is-open .head__menu{display:flex}
  .js .head__menu .nav{order:0;flex-direction:column;flex-wrap:nowrap;gap:0;width:100%;border-top:1px solid var(--hair)}
  .js .head__menu .nav a{padding-block:1.125rem;margin-block:0;border-bottom:1px solid var(--hair);color:var(--bone)}
  .js .head__menu .btn{margin:1.25rem 0 .375rem}
  .hero__photo::before{background:
    radial-gradient(90% 50% at 20% 12%, rgba(150,225,232,.22), transparent 62%),
    linear-gradient(90deg, rgba(3,24,30,.86) 0%, rgba(3,24,30,.62) 100%)}
  .spot{grid-template-columns:1fr}
  .spot__main,.spot__meta{grid-column:1;grid-row:auto}
  .spot__shot{aspect-ratio:16/10}
  .row{grid-template-columns:1.625rem minmax(0,1fr) 4rem;gap:.875rem}
  .row__body{display:none}
  .row__shot,.row__note,.row__tags{display:none}
  .row__where{margin-top:.25rem}
  .row__go{display:none}
  /* the name is the row's only link here, so the whole row takes the tap */
  .row{position:relative}
  .row__name a::after{content:"";position:absolute;inset:0}
  .sources{gap:.75rem}
  .sources a{position:relative}
  .sources a::after{content:"";position:absolute;inset:-.375rem 0}
  .foot__cols a{margin-bottom:0;padding-block:.3rem}
  .dir__head{align-items:flex-start}
  .chips{margin-left:0}
  .dir__foot .btn{margin-left:0}
  .entry-hero__in,.entry__grid{grid-template-columns:1fr}
  .entry-hero__shot{aspect-ratio:16/10}
  .entry-hero__tags{display:flex}
}