/* ============================================================
   SITE DESIGN SYSTEM
   Brand is a placeholder - see README.md and data/brand.json

   2026-09-19 REFORMAT. The site moved to a black, sans-only, split-screen
   editorial format. Three things define it and none of them are decoration:

   1. ONE TYPEFACE. Manrope carries everything. Display headings are set LIGHT
      (250) and large; body sits at 400/15px underneath them. The old pairing
      put a serif on top of BOLD body copy. That inversion is gone, and so is
      Fraunces. The font files stay on disk but nothing loads them.
   2. BLACK, NOT DARK BROWN. The page is #000. Warm white carries the text and
      caramel is the only accent, which is what keeps the coffee photography
      from looking foreign against a neutral shell.
   3. THE SPLIT. Full-height rows: photograph on one side, a kicker and one
      light sentence on the other. See .beat.

   There are ZERO runtime CDN requests anywhere on this site; keep it that way.
   ============================================================ */

@font-face{
  font-family:"Manrope";
  /* Same file twice: woff2-variations first for UAs that want the explicit
     variations hint, plain woff2 second. Costs no extra bytes. */
  src:url("../fonts/manrope-variable.woff2") format("woff2-variations"),
      url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Fraunces is deliberately NOT loaded any more. The files are still in /fonts
   in case the serif is ever wanted back; adding the two @font-face blocks and
   pointing --font-display at it is the whole revert. */

:root{
  /* ---------- palette ----------
     Channel triplets are the source of truth; the solids are derived from them so
     the two can never drift. This is what lets any colour take an alpha:
        rgb(var(--espresso-rgb) / .4)
     Chose triplets over color-mix() deliberately. color-mix() is Chrome 111+ /
     Safari 16.2+, and an unsupported color-mix drops the whole declaration - on a
     design built out of translucency that means invisible cards, not degraded ones. */
  /* THREE real colours. Everything else is one of them at an alpha.
       paper    the warm white that carries all text
       black    the page
       caramel  the only accent: kickers, links, focus, the one graphic rule
     The names below that are not those three are ALIASES, kept so the 138
     classes across 19 pages keep resolving. They are not a second palette. */
  --black-rgb:        0   0   0;  /* #000000  the page */
  --raise-rgb:       16  14  13;  /* #100E0D  cards and lifted surfaces */
  --paper-rgb:      255 248 240;  /* #FFF8F0  warm white, all text */
  --caramel-rgb:    192 138  78;  /* #C08A4E  6.99:1 on black, the one accent */
  --pistachio-rgb:  169 182 120;

  /* aliases: old names, new values. Nothing is light any more. */
  --white-rgb:      var(--paper-rgb);
  --cream-rgb:      var(--paper-rgb);
  --sand-rgb:       var(--paper-rgb);
  --clay-rgb:       var(--caramel-rgb);
  --espresso-rgb:   var(--black-rgb);
  --ink-rgb:        var(--paper-rgb);
  --ink-inv-rgb:    var(--paper-rgb);
  --near-black-rgb: var(--black-rgb);

  --black:rgb(var(--black-rgb));
  --raise:rgb(var(--raise-rgb));
  --paper:rgb(var(--paper-rgb));
  --caramel:rgb(var(--caramel-rgb));
  --pistachio:rgb(var(--pistachio-rgb));
  /* aliases */
  --white:var(--paper);
  --cream:var(--paper);
  --sand:rgb(var(--paper-rgb)/.62);
  --clay:var(--caramel);
  --espresso:var(--black);
  --ink:var(--paper);
  --ink-inv:var(--paper);
  --near-black:var(--black);

  /* ---------- contextual ---------- */
  --fg:var(--paper);
  --fg-soft:rgb(var(--paper-rgb)/.62);
  --hair:rgb(var(--paper-rgb)/.16);
  --glass-fill:rgb(var(--paper-rgb)/.045);
  --glass-edge:rgb(var(--paper-rgb)/.13);
  --glass-track:rgb(var(--black-rgb)/.72);
  --accent-text:var(--caramel);

  /* ---------- type scale ---------- */
  --step--2: clamp(.6875rem, .66rem + .14vw, .75rem);    /* 11 -> 12  micro caps */
  --step--1: clamp(.8125rem, .78rem + .17vw, .875rem);   /* 13 -> 14  meta */
  --step-0:  .9375rem;                                   /* 15        BODY, set bold */
  --step-1:  clamp(1rem, .96rem + .2vw, 1.0625rem);      /* 16 -> 17  lede */
  --step-2:  clamp(1.25rem, 1.16rem + .45vw, 1.5rem);    /* 20 -> 24  card title */
  --step-3:  clamp(1.5rem, 1.3rem + 1vw, 2.125rem);      /* 24 -> 34  h3 */
  --step-4:  clamp(2rem, 1.5rem + 2.5vw, 3.25rem);       /* 32 -> 52  h2 */
  --step-5:  clamp(2.5rem, 1.7rem + 4vw, 4.5rem);        /* 40 -> 72  h1 */
  --step-6:  clamp(3.5rem, 13vw, 12rem);                 /* 56 -> 192 giant wordmark */

  --lh-tight:1.02; --lh-head:1.06; --lh-snug:1.3; --lh-body:1.6;
  --tracking-tight:-.022em; --tracking-caps:.16em;
  /* headings LIGHT, body regular. The old 700 body was the previous format's
     signature and is the opposite of this one. */
  --fw-thin:250; --fw-head:300; --fw-body:400; --fw-caps:600;

  /* ---------- space ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --sp-section:clamp(72px,10vw,148px);
  --sp-gutter:clamp(20px,4vw,40px);

  /* ---------- radius ---------- */
  --r-xs:8px; --r-sm:12px; --r-md:20px; --r-lg:28px; --r-pill:999px; --r-nav:30px;

  /* ---------- motion ---------- */
  --ease-out:cubic-bezier(.22,.8,.32,1);
  --ease-glide:cubic-bezier(.16,1,.3,1);
  --dur-fast:.18s; --dur-base:.32s; --dur-slow:.7s; --dur-reveal:.9s;
  --blur-glass:14px; --blur-ghost:10px;
  /* A drop shadow on a black page is nothing. Depth comes from hairlines and a
     faint surface lift instead, so these go near-zero rather than being deleted:
     the token names are referenced in a dozen rules. */
  --shadow-card:0 0 0 0 transparent;
  --shadow-card-lift:0 0 0 0 transparent;
  --shadow-btn:0 0 0 0 transparent;
  --shadow-nav:0 24px 60px -30px rgb(0 0 0/.9);

  /* one family. --font-display is kept as a NAME so the forty-odd rules that ask
     for it keep working, and so the serif can be restored in one line. */
  --font-sans:"Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-sans);

  /* faint paper grain — inline SVG turbulence, one fixed layer only */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

}

/* ---------- surface contexts ----------
   The page is black end to end now, so .on-light and .on-dark no longer flip
   between a light and a dark treatment. They are kept, with the SAME text
   colours, because they are on 83 elements across 19 pages and because they
   still carry a real difference: .on-dark lifts its surfaces very slightly so
   two adjacent sections can be told apart without a rule between them.

   Keeping both as dark is what let this reformat reach every page without
   touching the markup of 18 of them. */
.on-light{
  --accent-text:var(--caramel);
  --fg:var(--paper);
  --fg-soft:rgb(var(--paper-rgb)/.62);
  --hair:rgb(var(--paper-rgb)/.14);
  --glass-fill:rgb(var(--paper-rgb)/.04);
  --glass-edge:rgb(var(--paper-rgb)/.12);
  color:var(--fg);
}
.on-dark{
  --accent-text:var(--caramel);
  --fg:var(--paper);
  --fg-soft:rgb(var(--paper-rgb)/.62);
  --hair:rgb(var(--paper-rgb)/.18);
  --glass-fill:rgb(var(--paper-rgb)/.06);
  --glass-edge:rgb(var(--paper-rgb)/.15);
  color:var(--fg);
}

section.on-dark{
  position:relative;
  background:var(--raise);
}
footer.on-dark{
  position:relative;
  background:var(--black);
  border-top:1px solid var(--hair);
}
section.on-dark > *,footer.on-dark > *{position:relative;z-index:1;}
/* ...except the full-bleed media layers. The rule above is (0,1,1) and a bare
   .band-media / .hero-media is only (0,1,0), so without this they lose their
   position:absolute and collapse to 0x0. Any future full-bleed layer inside an
   .on-dark section needs adding here too. */
.band > .band-media,.hero > .hero-media{position:absolute;inset:0;z-index:0;}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
/* Tells the UA the page is dark, so NATIVE controls follow: the date picker's
   calendar glyph, the select popup, form autofill and the scrollbars. Without
   it the date field paints a black icon on a black field. */
html{scroll-behavior:smooth;color-scheme:dark;}
body{
  position:relative;
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--step-0);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  color:var(--fg);
  /* MUST be black. --cream is now an alias for the warm white that carries text,
     so leaving this as --cream painted a white canvas underneath everything.
     body's background propagates to the canvas when html has none, so it is the
     one colour that shows through before, behind and beyond every section. */
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- the page ----------
   The old build ran a cream-to-sand gradient behind the whole document and
   earned its depth from washes on top of it. This format does the opposite:
   the page is flat black, and every bit of light on it is either a photograph
   or type. A gradient here would fight the photography.

   The grain stays. It is a fixed ELEMENT, not background-attachment:fixed,
   which on iOS is either ignored or forces a full-viewport repaint every
   scroll frame. Its opacity drops because film grain over black reads much
   stronger than the same grain over cream.

   overflow-x:hidden on body does not create a containing block for
   position:fixed (transform / filter / will-change would), so ::after is
   correctly viewport-fixed. */
body::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:var(--black);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);opacity:.28;
}

/* kept so the three page classes in the markup still resolve to something */
body.page-home,body.page-inner,body.page-short{--atmos-1:0%;--atmos-2:100%;}

body.menu-open{overflow:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:var(--fw-thin);
  line-height:var(--lh-head);
  letter-spacing:var(--tracking-tight);
  margin:0 0 .4em;
  text-wrap:balance;
}
/* Below display size the 250 weight gets spindly, so small headings step up. */
h3,h4,.gc-title,.dc-name,.card h3,.step h3,.tier h3{font-weight:var(--fw-head);}
h4{font-family:var(--font-sans);margin:0 0 .3em;}
p{margin:0 0 1em;}

/* Manrope has no italic, and synthesised oblique on a grotesque looks wrong.
   With Fraunces gone there is no real italic left anywhere on the site, so <em>
   stays semantic and is expressed with COLOUR ONLY. Do not add font-style here. */
em,i{font-style:normal;color:var(--accent-text);}
.split-copy em,h1 em,h2 em,h3 em{font-family:var(--font-display);font-style:normal;color:var(--accent-text);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:200;
  background:var(--paper);color:var(--black);
  padding:10px 18px;border-radius:8px;text-decoration:none;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{top:16px;}

:focus-visible{
  outline:2px solid var(--caramel);
  outline-offset:3px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgb(var(--black-rgb)/.9);
}

.container{width:min(1160px,calc(100% - var(--sp-gutter)*2));margin:0 auto;}
.container-wide{width:min(1400px,calc(100% - var(--sp-gutter)*2));margin:0 auto;}


/* ---------- floating shell: wordmark + menu button ---------- */
/* One treatment now. .wordmark-ink existed to flip the mark to dark ink on the
   light inner pages; there are no light pages left, so it is kept as a no-op
   alias rather than being stripped out of five files. */
.wordmark,.wordmark.wordmark-ink{
  position:absolute;top:22px;left:24px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;
  font-family:var(--font-sans);font-weight:var(--fw-head);font-size:var(--step-1);
  letter-spacing:-.01em;line-height:1;
  color:var(--paper);
  text-shadow:0 1px 18px rgb(0 0 0/.55);
  padding:8px 4px;
}
.wordmark .drip{width:15px;height:19px;flex:none;}
.wordmark span small{
  display:block;font-family:var(--font-sans);font-weight:var(--fw-caps);
  font-size:var(--step--2);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:rgb(var(--paper-rgb)/.62);margin-top:5px;
}

.menu-btn{
  position:fixed;top:var(--sp-5);right:var(--sp-gutter);z-index:95;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:44px;padding:0 var(--sp-4);
  border:1px solid rgb(var(--paper-rgb)/.22);border-radius:var(--r-pill);
  background:rgb(var(--black-rgb)/.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow-nav);
  color:var(--paper);cursor:pointer;
  font-family:var(--font-sans);font-size:var(--step--1);font-weight:var(--fw-body);
  transition:background var(--dur-fast) var(--ease-out);
}
.menu-btn:hover{background:rgb(var(--paper-rgb)/.14);}
/* closed state: little coffee cup with two dashes as the "hamburger" */
.menu-btn .cup{display:block;width:20px;height:20px;flex:none;}
.menu-btn .cup .body{fill:var(--paper);}
.menu-btn .cup .dash{stroke:var(--black);stroke-width:2.4;stroke-linecap:round;}
body.menu-open .menu-btn .cup{display:none;}
.menu-btn .bars{display:none;width:20px;height:14px;position:relative;}
body.menu-open .menu-btn .bars{display:block;}
.menu-btn .bars::before,.menu-btn .bars::after{
  content:"";position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:var(--paper);transition:transform .3s var(--ease-out),top .3s var(--ease-out),bottom .3s var(--ease-out);
}
.menu-btn .bars::before{top:1px;}
.menu-btn .bars::after{bottom:1px;}
body.menu-open .menu-btn{background:var(--paper);border-color:var(--paper);color:var(--black);}
body.menu-open .menu-btn .bars::before{top:6px;transform:rotate(45deg);background:var(--black);}
body.menu-open .menu-btn .bars::after{bottom:6px;transform:rotate(-45deg);background:var(--black);}

/* ---------- full-screen menu overlay ---------- */
.site-menu{
  position:fixed;inset:0;z-index:110;
  background:var(--black);
  color:var(--paper);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease-out),visibility 0s linear .5s;
}
.site-menu.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .5s var(--ease-out);
}
.menu-col{
  display:flex;flex-direction:column;justify-content:center;
  padding:96px clamp(28px,6vw,90px) 48px;
  min-height:100%;
}
.menu-eyebrow{
  font-size:var(--step--2);font-weight:var(--fw-caps);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--caramel);margin:0 0 26px;
}
.menu-links{list-style:none;margin:0;padding:0;}
.menu-links a{
  display:inline-block;text-decoration:none;
  font-family:var(--font-display);font-weight:var(--fw-thin);
  font-size:clamp(2rem,5.4vh,3.6rem);line-height:1.14;
  letter-spacing:var(--tracking-tight);
  color:var(--paper);
  padding:4px 0;
  transform:translateY(22px);opacity:0;
  transition:transform .55s var(--ease-out),opacity .55s var(--ease-out),color .2s;
}
.site-menu.open .menu-links a{transform:none;opacity:1;}
.menu-links li:nth-child(1) a{transition-delay:.06s;}
.menu-links li:nth-child(2) a{transition-delay:.11s;}
.menu-links li:nth-child(3) a{transition-delay:.16s;}
.menu-links li:nth-child(4) a{transition-delay:.21s;}
.menu-links li:nth-child(5) a{transition-delay:.26s;}
.menu-links li:nth-child(6) a{transition-delay:.31s;}
.menu-links a:hover,.menu-links a[aria-current="page"]{color:var(--accent-text);}
.menu-links a em{font-style:normal;color:var(--caramel);}
.menu-foot{
  margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  font-size:var(--step--1);color:var(--fg-soft);
}
.menu-foot a{color:var(--fg-soft);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;}
.menu-foot a:hover{color:var(--paper);border-color:var(--paper);}
.menu-aside{
  position:relative;overflow:hidden;background:var(--black);
}
.menu-aside img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease-out);
}
.menu-aside img.show{opacity:.92;}
.menu-aside::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--black) 0%,rgb(0 0 0/.25) 40%,rgb(0 0 0/.25) 100%);
}
@media(max-width:860px){
  .site-menu{grid-template-columns:1fr;}
  .menu-aside{display:none;}
  .menu-col{padding-top:110px;justify-content:flex-start;}
  .menu-links a{font-size:var(--step-4);}
  .menu-foot{margin-top:auto;padding-top:34px;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border-radius:999px;
  font-family:var(--font-sans);font-weight:var(--fw-body);font-size:var(--step-0);letter-spacing:.01em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .18s var(--ease-out),background .18s,color .18s,border-color .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

/* Filled = paper on black, which is the only pairing on this page that can
   out-contrast a photograph. Outline = hairline, for the second action. */
.btn-primary,.btn-light{background:var(--paper);color:var(--black);border-color:var(--paper);}
.btn-primary:hover,.btn-light:hover{background:var(--caramel);border-color:var(--caramel);color:var(--black);}
.btn-ghost,.btn-outline-light{border-color:var(--hair);color:var(--paper);background:transparent;}
.btn-ghost:hover,.btn-outline-light:hover{border-color:var(--paper);background:rgb(var(--paper-rgb)/.08);color:var(--paper);}

/* The arrow badge on filled buttons. currentColor means it inverts with the
   button on hover for free, and it needs no asset. */
.btn-primary::after,.btn-light::after{
  content:"\2197";
  display:grid;place-items:center;flex:none;
  width:22px;height:22px;margin-left:2px;
  border:1.5px solid currentColor;border-radius:50%;
  font-size:11px;line-height:1;
}
button.btn-primary::after{content:"\2192";}

/* ---------- section rhythm ---------- */
.section{padding:clamp(64px,9vw,110px) 0;}
.section-tight{padding:clamp(40px,6vw,64px) 0;}
/* The four surface classes stop being backgrounds. Sections float on the page
   atmosphere; these now only switch the contrast context, and are aliases for
   .on-light / .on-dark until the markup is swept. */

p{color:inherit;}

/* The kicker is the format's tell: a small caps line that names the section,
   sitting directly above one large light sentence. The leading rule the old
   build drew is gone; this format wants it plain. */
.kicker{
  display:block;
  font-size:var(--step--2);font-weight:var(--fw-caps);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--accent-text);margin:0 0 var(--sp-4);
}
.kicker.center{text-align:center;}
/* Last word on the kicker, so no container's paragraph rule can outrank it. */
p.kicker,.section-head p.kicker,.beat-copy p.kicker,.split-copy p.kicker{
  color:var(--accent-text);font-size:var(--step--2);max-width:none;margin:0 0 var(--sp-4);
}

.section-head{max-width:22ch;margin-bottom:clamp(30px,5vw,52px);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{font-size:var(--step-4);max-width:18ch;}
.section-head.center h2{margin-inline:auto;}
/* the supporting paragraph sets narrower than the headline, never wider */
/* :not(.kicker) matters. A bare `.section-head p` is (0,1,1) and silently
   outranks `.kicker` at (0,1,0), which is how every kicker on the old build
   ended up rendering as muted body text instead of the accent. */
.section-head p:not(.kicker){color:var(--fg-soft);font-size:var(--step-1);max-width:46ch;}
.section-head{max-width:none;}
.text-center{text-align:center;}

/* ---------- hero: the split ----------
   Two full-height halves. LEFT is the wordmark over a photograph, RIGHT is a
   second photograph carrying a kicker and one sentence at its foot. It is the
   page's thesis statement and the pattern every .beat below repeats.

   min-height uses svh first with vh as the fallback, so mobile browser chrome
   collapsing does not push the second half into view mid-scroll. */
.hero{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100svh;min-height:100vh;
  background:var(--black);
  overflow:hidden;
}
.hero-half{position:relative;display:flex;overflow:hidden;min-height:50svh;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
/* the left half is only ever a backdrop for the wordmark, so it takes the
   heavier scrim; the right half has to stay readable as a photograph */
.hero-half-mark::after,.hero-half-copy::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.hero-half-mark::after{background:rgb(0 0 0/.34);}
/* Holds .88 across the whole bottom band, because that is the band the kicker,
   the line and the buttons occupy. It only thins above them. A gradient that
   starts thinning at the copy's own top edge is a gradient measured at the
   wrong point. */
.hero-half-copy::after{
  background:linear-gradient(0deg,
    rgb(0 0 0/.93) 0%,
    rgb(0 0 0/.88) 44%,
    rgb(0 0 0/.50) 70%,
    rgb(0 0 0/.12) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;padding:clamp(88px,12vh,140px) clamp(24px,3.4vw,56px) clamp(96px,13vh,132px);
}
.hero-half-mark .hero-inner{justify-content:center;}

/* The wordmark is the H1 and it is the largest thing on the site. Clamped,
   never raw vw: {{BRAND}} is a placeholder of unknown final length. */
.hero-wordmark{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,7.2vw,6.5rem);font-weight:var(--fw-thin);
  letter-spacing:-.04em;line-height:.92;
  color:var(--paper);
  margin:0;text-wrap:balance;
}
.hero-sub{
  margin:var(--sp-5) 0 0;font-size:var(--step--2);font-weight:var(--fw-caps);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:rgb(var(--paper-rgb)/.72);
}
.hero-line{
  font-family:var(--font-display);
  font-size:var(--step-4);font-weight:var(--fw-thin);
  line-height:1.1;letter-spacing:var(--tracking-tight);
  color:var(--paper);margin:0;max-width:20ch;text-wrap:balance;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-6);}

@keyframes heroRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.hero-wordmark{animation:heroRise .6s var(--ease-out) .15s both;}
.hero-sub{animation:heroRise .6s var(--ease-out) .3s both;}
.hero-half-copy .kicker{animation:heroRise .6s var(--ease-out) .3s both;}
.hero-line{animation:heroRise .6s var(--ease-out) .42s both;}
.hero-actions{animation:heroRise .6s var(--ease-out) .54s both;}
/* parallax on the left plate only, off the one scroll listener in main.js */
.hero-half-mark .hero-media{transform:translate3d(0,calc(var(--heroP,0) * 5vh),0) scale(calc(1 + var(--heroP,0) * .05));}

@media(max-width:900px){
  /* One column. The halves become two stacked panels rather than one tall
     squeezed pair, and the wordmark panel gives up height to the copy panel. */
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-half-mark{min-height:58svh;}
  .hero-half-copy{min-height:72svh;}
  .hero-inner{padding:clamp(72px,10vh,110px) var(--sp-gutter) clamp(64px,9vh,96px);}
  /* clears the fixed pill nav, which is 48px tall on a 12px inset */
  .hero-half-copy .hero-inner{padding-bottom:clamp(104px,14vh,132px);}
  .hero-half-copy::after{
    background:linear-gradient(0deg,
      rgb(0 0 0/.94) 0%,
      rgb(0 0 0/.9) 58%,
      rgb(0 0 0/.5) 80%,
      rgb(0 0 0/.14) 100%);
  }
}

/* ---------- .beat : the split, repeated ----------
   One row = one photograph beside one idea. Each row is a viewport tall on
   desktop so the page reads as a sequence of full frames rather than a
   scrolling document.

   The media sits FIRST in source order so that when the row collapses to one
   column the photograph still leads its own paragraph. .beat.flip swaps sides
   on desktop only, and deliberately does nothing to the mobile order. */
.beat{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--black);
}
.beat-media{position:relative;overflow:hidden;min-height:100svh;}
.beat-media picture{display:block;position:absolute;inset:0;}
.beat-media img{width:100%;height:100%;object-fit:cover;}
.beat-copy{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100svh;
  padding:clamp(72px,12vh,140px) clamp(28px,4vw,80px) clamp(72px,12vh,140px);
}
.beat.flip .beat-media{order:2;}
.beat-copy h2{
  font-size:var(--step-4);font-weight:var(--fw-thin);
  line-height:1.1;letter-spacing:var(--tracking-tight);
  margin:0;max-width:19ch;
}
.beat-copy p:not(.kicker){
  color:var(--fg-soft);font-size:var(--step-1);max-width:46ch;
  margin:var(--sp-5) 0 0;
}
.beat-copy .btn,.beat-copy .beat-actions{margin-top:var(--sp-6);}
.beat-actions{display:flex;flex-wrap:wrap;gap:12px;}
/* a beat that carries a list or cards instead of a paragraph needs to breathe
   from the top rather than hang off the bottom */
.beat.beat-top .beat-copy{justify-content:center;}
@media(max-width:900px){
  .beat,.beat.flip{grid-template-columns:1fr;}
  .beat.flip .beat-media{order:0;}
  .beat-media{min-height:0;height:64svh;}
  .beat-copy{min-height:0;padding:clamp(40px,8vh,64px) var(--sp-gutter) clamp(52px,9vh,80px);}
}

/* ---------- drink cards ---------- */
.feature-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);
  margin-bottom:clamp(20px,3vw,36px);
}
@media(max-width:820px){.feature-cards{grid-template-columns:1fr;}}
.drink-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--glass-fill);border:1px solid var(--hair);border-radius:var(--r-md);
  overflow:hidden;text-decoration:none;color:var(--fg);
  transition:transform .25s var(--ease-out),border-color .25s var(--ease-out),background .25s;
}
.drink-card:hover{transform:translateY(-4px);border-color:rgb(var(--paper-rgb)/.34);background:rgb(var(--paper-rgb)/.07);}
.dc-media{overflow:hidden;aspect-ratio:16/10;background:var(--raise);}
.drink-card.portrait .dc-media{aspect-ratio:4/5;}
.dc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out);}
.drink-card:hover .dc-media img{transform:scale(1.025);}
.dc-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1;}
.dc-name{
  font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--fw-head);line-height:1.15;
  letter-spacing:-.015em;margin:0;transition:transform .25s var(--ease-out);
}
.drink-card:hover .dc-name{transform:translateX(4px);}
.feature-cards .dc-name{font-size:var(--step-3);}
.dc-desc{color:var(--fg-soft);font-size:var(--step-0);margin:0;flex:1;}
.dc-cta{
  margin-top:14px;font-weight:var(--fw-caps);font-size:var(--step--2);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-text);
  display:inline-flex;align-items:center;gap:6px;
}
.dc-cta::after{content:"\2197";font-size:11px;}
.drink-card:hover .dc-cta{color:var(--accent-text);}

.drink-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(16px,2.4vw,26px);
}

.tag{
  display:inline-flex;align-items:center;gap:6px;width:fit-content;
  font-size:var(--step--2);font-weight:var(--fw-caps);letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;margin-bottom:4px;
}
.tag-signature{background:rgb(var(--pistachio-rgb)/.16);color:var(--pistachio);}
.tag-signature::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pistachio);}
.tag-seasonal{background:rgb(var(--caramel-rgb)/.18);color:var(--caramel);}
.tag-placeholder{background:transparent;color:var(--fg-soft);border:1px dashed var(--hair);}

/* ---------- editorial split ---------- */
.split{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.split.flip{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);}
.split.flip .split-media{order:2;}
.split-media{position:relative;}
.split-media img{border-radius:var(--r-md);width:100%;max-height:min(78vh,760px);object-fit:cover;}
/* the one graphic use of the accent: a caramel rule offset behind the photo */
.split-media .accent-frame::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:58%;
  border:1px solid rgb(var(--caramel-rgb)/.55);border-radius:var(--r-md);z-index:-1;
}
.split-copy h2{font-size:var(--step-4);max-width:18ch;}
.split-copy p:not(.kicker){color:var(--fg-soft);font-size:var(--step-1);max-width:46ch;}
@media(max-width:820px){
  .split,.split.flip{grid-template-columns:1fr;}
  .split.flip .split-media{order:0;}
}

/* ---------- campaign break band ---------- */
.band{
  position:relative;min-height:86svh;display:flex;align-items:flex-end;
  color:var(--paper);overflow:hidden;background:var(--black);
}
.band-media{position:absolute;inset:0;}
.band-media .ph{border-radius:0;}
.band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,
    rgb(0 0 0/.9) 0%,
    rgb(0 0 0/.86) 40%,
    rgb(0 0 0/.4) 68%,
    rgb(0 0 0/.16) 100%);
}
.band-content{position:relative;z-index:2;width:min(1160px,calc(100% - var(--sp-gutter)*2));margin:0 auto;padding:var(--sp-9) 0;}
.band-content h2{
  font-size:var(--step-4);font-weight:var(--fw-thin);max-width:18ch;
  line-height:1.1;letter-spacing:var(--tracking-tight);
  color:var(--paper);
}
.band-content h2 em{font-style:normal;color:var(--caramel);}

/* ---------- community / offset editorial ---------- */
.offset-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,24px);align-items:start;
}
.offset-a{grid-column:1/6;margin-top:clamp(30px,6vw,84px);}
.offset-b{grid-column:6/11;}
.offset-copy{grid-column:2/12;max-width:560px;margin-top:clamp(22px,3vw,40px);}
.offset-grid img{border-radius:var(--r-md);width:100%;max-height:min(72vh,700px);object-fit:cover;}
@media(max-width:820px){
  .offset-a{grid-column:1/8;margin-top:0;}
  .offset-b{grid-column:5/13;margin-top:-40px;}
  .offset-copy{grid-column:1/13;}
}

/* ---------- stops ---------- */
.stop-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}
.stop-card{
  background:var(--glass-fill);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:20px 20px 22px;display:flex;flex-direction:column;gap:5px;
}
.stop-day{
  font-family:var(--font-display);font-weight:var(--fw-head);font-size:var(--step-2);color:var(--caramel);
}
.stop-place{font-weight:var(--fw-body);font-size:var(--step-0);}
.stop-meta{color:var(--fg-soft);font-size:var(--step--1);}
.stop-placeholder{
  font-size:var(--step--2);color:var(--fg-soft);border-top:1px dashed var(--hair);
  padding-top:8px;margin-top:6px;
}

/* ---------- proudly serving / area band ---------- */
.area-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 8px;}
.area-chip,.on-dark .area-chip{
  border:1px solid var(--hair);border-radius:999px;padding:9px 18px;
  font-weight:var(--fw-body);font-size:var(--step--1);
  background:transparent;color:var(--fg);
}

/* ---------- how-to-book steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(18px,3vw,30px);}
.step{position:relative;padding-top:14px;}
/* numbered steps carry a ringed badge, which is this format's list marker */
.step-num{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hair);
  font-family:var(--font-display);font-weight:var(--fw-head);
  font-size:var(--step-0);color:var(--paper);line-height:1;margin-bottom:18px;
}
.step h3{font-size:var(--step-2);}
.step p{color:var(--fg-soft);font-size:var(--step-0);}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:var(--step--1);color:var(--fg-soft);margin:0 0 18px;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5;}
.crumbs a{color:var(--caramel);text-decoration:none;border-bottom:1px solid transparent;}
.crumbs a:hover{border-color:var(--caramel);}
.crumbs [aria-current]{color:var(--paper);}

/* ---------- drink detail ---------- */
.drink-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.drink-hero .dh-media img{border-radius:var(--r-md);width:100%;max-height:min(74vh,720px);object-fit:cover;}
.drink-hero h1{font-size:var(--step-5);max-width:14ch;}
.drink-hero .lede{font-size:var(--step-1);color:var(--fg-soft);}
@media(max-width:820px){.drink-hero{grid-template-columns:1fr;}}

.pn-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.pn-nav a{
  display:flex;flex-direction:column;gap:4px;text-decoration:none;
  border:1px solid var(--hair);border-radius:var(--r-md);
  padding:18px 20px;color:var(--fg);background:var(--glass-fill);
  transition:transform .2s var(--ease-out),border-color .2s,background .2s;
}
.pn-nav a:hover{transform:translateY(-3px);border-color:rgb(var(--paper-rgb)/.34);background:rgb(var(--paper-rgb)/.07);}
.pn-nav .dir{font-size:var(--step--2);font-weight:var(--fw-caps);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-text);}
.pn-nav .nm{font-family:var(--font-display);font-size:var(--step-2);font-weight:var(--fw-head);letter-spacing:-.015em;}
.pn-nav a.next{text-align:right;align-items:flex-end;}
@media(max-width:560px){.pn-nav{grid-template-columns:1fr;}}

/* ---------- menu rows (dietary etc.) ---------- */
.note-strip{
  border:1px dashed var(--hair);border-radius:var(--r-md);
  background:var(--glass-fill);padding:16px 20px;font-size:var(--step--1);color:var(--fg-soft);
}

/* ---------- tiers ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2.6vw,26px);}
.tier{
  background:var(--glass-fill);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:28px 26px;position:relative;display:flex;flex-direction:column;gap:2px;
}
.tier.is-popular{border-color:rgb(var(--caramel-rgb)/.7);background:rgb(var(--caramel-rgb)/.07);}
.tier.is-popular::before{
  content:"Most requested";position:absolute;top:-12px;left:24px;
  background:var(--caramel);color:var(--black);font-size:var(--step--2);font-weight:var(--fw-caps);
  letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:999px;
}
.tier h3{font-size:var(--step-2);}
.tier-price{font-family:var(--font-display);font-size:var(--step-3);font-weight:var(--fw-thin);color:var(--paper);margin-bottom:10px;letter-spacing:-.02em;}
.tier-price .unit{font-size:var(--step--1);color:var(--fg-soft);font-weight:var(--fw-body);letter-spacing:0;}
.tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:var(--step-0);color:var(--fg-soft);}
.tier ul li{padding-left:20px;position:relative;}
.tier ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--caramel);}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--hair);max-width:760px;}
.faq-item{border-bottom:1px solid var(--hair);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-size:var(--step-1);font-weight:var(--fw-body);color:var(--fg);
  padding:22px 4px;min-height:52px;
}
.faq-q:hover{color:var(--caramel);}
.faq-q .plus{
  flex:none;font-family:var(--font-sans);font-weight:var(--fw-thin);font-size:var(--step-3);color:var(--accent-text);
  transition:transform .3s var(--ease-out);
}
.faq-item[data-open="true"] .faq-q .plus{transform:rotate(45deg);}
/* 1fr <-> 0fr sizes the panel correctly with no max-height cap, which is the
   point: the old max-height:320px silently truncated longer answers, and bold body
   copy sets wider so it produces more lines.

   The ROW ITSELF IS NOT TRANSITIONED. Animating grid-template-rows relayouts the
   whole subtree every frame, and in this tree it measurably failed to settle - the
   panel stayed at 0 after the transition should have finished. The row snaps and the
   inner wrapper fades and slides instead, which is reliable, cheap, and reads the
   same.

   Default is OPEN so a no-JS visitor and a crawler see every answer; main.js
   collapses them on init. */
.faq-a{display:grid;grid-template-rows:1fr;}
.faq-a-in{
  overflow:hidden;min-height:0;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.faq-item[data-open="false"] .faq-a{grid-template-rows:0fr;}
.faq-item[data-open="false"] .faq-a-in{opacity:0;transform:translateY(-6px);}
@supports not (grid-template-rows:0fr){
  .faq-a{display:block;}
  .faq-item[data-open="false"] .faq-a{max-height:0;overflow:hidden;}
  .faq-item[data-open="false"] .faq-a-in{opacity:0;}
}
.faq-a p{color:var(--fg-soft);padding:0 4px 20px;margin:0;font-size:var(--step-0);}

/* ---------- generic cards ---------- */
.card-grid{display:grid;gap:clamp(16px,2.4vw,24px);}
.card-grid.cols-2,.card-grid.cg-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card-grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.card{
  background:var(--glass-fill);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:26px 24px;
}
.card h3{font-size:var(--step-2);letter-spacing:-.015em;}
.card p{color:var(--fg-soft);font-size:var(--step-0);margin:0;}
.card a{color:var(--caramel);}

/* ---------- forms (book page) ---------- */
.form-card{
  background:var(--glass-fill);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:clamp(24px,4vw,44px);
}
.hp-field{position:absolute;left:-9999px;height:1px;overflow:hidden;}
.form-actions{margin-top:26px;}
.hint{display:block;font-size:var(--step--2);color:var(--fg-soft);margin-top:5px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:760px;}
.form-grid .full{grid-column:1/-1;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.field label{display:block;font-weight:var(--fw-body);font-size:var(--step--1);margin-bottom:7px;}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 15px;
  border:1px solid var(--hair);border-radius:10px;
  background:rgb(var(--paper-rgb)/.06);font:inherit;font-size:var(--step-0);color:var(--paper);
}
.field input::placeholder,.field textarea::placeholder{color:rgb(var(--paper-rgb)/.45);}
/* a native select paints its own popup with the OS palette; the option list
   needs an explicit dark pair or it renders black-on-black on some platforms */
.field select option{background:#141210;color:#FFF8F0;}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--caramel);outline-offset:1px;border-color:var(--caramel);
}
.form-note{font-size:var(--step--1);color:var(--fg-soft);}

/* ---------- social links ---------- */
.social-row{display:flex;flex-wrap:wrap;gap:14px;}
.social-link,.on-dark .social-link{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  border:1px solid var(--hair);border-radius:999px;padding:9px 20px;
  text-decoration:none;font-weight:var(--fw-body);font-size:var(--step--1);color:var(--fg);
  transition:background .2s,color .2s,border-color .2s;
}
.social-link:hover,.on-dark .social-link:hover{background:var(--paper);color:var(--black);border-color:var(--paper);}

/* ---------- footer ---------- */
.site-footer{
  background:var(--black);
  color:var(--fg-soft);padding:clamp(56px,8vw,90px) 0 36px;
  font-size:var(--step--1);
  border-top:1px solid var(--hair);
}
.footer-mark{
  font-family:var(--font-display);font-weight:var(--fw-thin);letter-spacing:-.03em;
  font-size:var(--step-4);color:var(--paper);line-height:1.02;
  margin:0 0 10px;
}
.footer-mark em{font-style:normal;color:var(--fg-soft);font-size:.55em;display:block;margin-top:6px;}
.footer-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,54px);margin:34px 0 44px;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-col .footer-h{
  font-family:var(--font-sans);
  font-size:var(--step--2);font-weight:var(--fw-caps);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--caramel);margin:0 0 14px;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.footer-col a{color:var(--fg-soft);text-decoration:none;}
.footer-col a:hover{color:var(--paper);text-decoration:underline;}
.footer-bottom{
  border-top:1px solid var(--hair);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;
  font-size:var(--step--1);color:var(--fg-soft);
}
.footer-note{font-size:var(--step--2);color:rgb(var(--paper-rgb)/.5);margin-top:16px;}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- .ph : the placeholder photo frame ----------
   Most of this site is currently made of these, so they have to read as
   deliberate rather than broken. Ratios come from the real source pixel
   dimensions, so dropping the <picture> back in shifts nothing. */
.ph{
  --ph-ar:1672/941;
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--sp-2);
  width:100%;aspect-ratio:var(--ph-ar);
  padding:var(--sp-5);text-align:center;
  border-radius:var(--r-md);overflow:hidden;
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--ink-rgb)/.045) 0 12px, rgb(var(--ink-rgb)/0) 12px 24px),
    rgb(var(--white-rgb)/.46);
  border:1px solid var(--glass-edge);
  color:var(--fg);
}
/* inset hairline: reads as a frame waiting for art, not a failed image */
.ph::before{
  content:"";position:absolute;inset:var(--sp-3);
  border:1.5px dashed rgb(var(--ink-rgb)/.22);border-radius:var(--r-sm);
  pointer-events:none;
}
.ph-key{
  position:relative;font-size:var(--step--2);font-weight:var(--fw-caps);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:rgb(var(--ink-rgb)/.62);
}
.ph-meta{
  position:relative;font-size:var(--step--2);font-weight:var(--fw-head);
  letter-spacing:.04em;color:rgb(var(--ink-rgb)/.42);
}
/* fill variant: the parent already establishes the box (.dc-media, .hero-media) */
.ph-fill{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:inherit;}

/* ---------- real photos in the fill-style media boxes ----------
   2026-09-19: the .ph frames in these containers were absolutely positioned and sized
   by the container. A <picture> is inline by default and an <img> is intrinsically
   sized, so both need saying again or the photo collapses or overflows. Same boxes,
   same crop behaviour, zero layout shift against the frames they replaced. */
.gc-media picture,.band-media picture,.hero-media picture{display:block;position:absolute;inset:0;}
.gc-media img,.band-media img,.hero-media img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;
}
.gc-stack .gc-media img,.band-media img,.hero-media img{border-radius:0;}
/* Under 900px the hero <picture> swaps to a portrait source (see index.html), which
   crops only slightly and needs no offset. Above it, the 16:9 frame crops vertically,
   so a horizontal offset would do nothing either. Centre is correct in both cases. */
.hero-media img{object-position:center;}
/* dark variant: mandatory anywhere cream copy sits over what used to be a photo */
.ph-dark,.on-dark .ph{
  background:
    repeating-linear-gradient(45deg,
      rgb(var(--ink-inv-rgb)/.05) 0 12px, rgb(var(--ink-inv-rgb)/0) 12px 24px),
    rgb(var(--espresso-rgb)/.42);
}
.on-dark .ph::before,.ph-dark::before{border-color:rgb(var(--ink-inv-rgb)/.24);}
.on-dark .ph-key,.ph-dark .ph-key{color:rgb(var(--ink-inv-rgb)/.72);}
.on-dark .ph-meta,.ph-dark .ph-meta{color:rgb(var(--ink-inv-rgb)/.48);}
@media(max-width:560px){ .ph-meta{display:none;} }

/* The old rules styled `img` specifically, so a .ph dropped in got no treatment.
   More importantly: every real photo was object-fit:cover inside a height-capped box,
   so the CONTAINER always owned the shape, not the source file. Placeholders follow
   the same rule - each slot gets one ratio, so a grid of frames lines up instead of
   stepping. --ph-ar stays on the element and ph-meta still prints the true source
   dimensions, which is what the photo actually has to be delivered at. */
.split-media .ph,.offset-grid .ph,.drink-hero .dh-media .ph{box-shadow:var(--shadow-card);}
.split-media .ph{aspect-ratio:4/5;}
.offset-a .ph{aspect-ratio:3/4;}
.offset-b .ph{aspect-ratio:4/5;}
.drink-hero .dh-media .ph{aspect-ratio:4/5;}
.gc-stack .gc-media{aspect-ratio:4/5;position:relative;overflow:hidden;}
.gc-stack .gc-media .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;}
.dc-media .ph{border-radius:0;}
@media(max-width:820px){
  .split-media .ph{aspect-ratio:16/10;}
}

/* ---------- .glass-card ---------- */
/* "glass" is a holdover name. On black there is nothing to see through, so
   these are flat surfaces with a hairline and no blur, which also drops a
   compositing layer per card. */
.glass-card{
  position:relative;display:grid;overflow:hidden;
  border-radius:var(--r-md);
  background:var(--glass-fill);
  border:1px solid var(--glass-edge);
  text-decoration:none;color:var(--fg);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base),background var(--dur-base);
}
.glass-card:hover{transform:translateY(-4px);border-color:rgb(var(--paper-rgb)/.34);background:rgb(var(--paper-rgb)/.07);}
.gc-overlay{aspect-ratio:4/5;}
.gc-overlay .gc-media{position:absolute;inset:0;}
.gc-overlay .gc-body{
  position:relative;z-index:2;align-self:end;padding:var(--sp-6) var(--sp-5);
  color:var(--paper);
  background:linear-gradient(0deg,rgb(0 0 0/.92) 0%,rgb(0 0 0/.88) 52%,rgb(0 0 0/.4) 80%,rgb(0 0 0/0) 100%);
}
.gc-overlay .gc-copy{color:rgb(var(--paper-rgb)/.78);}
.gc-stack{display:flex;flex-direction:column;}
.gc-stack .gc-media{flex:none;}
.gc-stack .gc-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1 1 auto;}
.gc-title{font-size:var(--step-2);font-weight:var(--fw-head);letter-spacing:-.015em;margin:0;}
.gc-copy{font-size:var(--step-0);font-weight:var(--fw-body);color:var(--fg-soft);margin:0;}
.gc-cta{
  margin-top:auto;padding-top:var(--sp-4);
  font-size:var(--step--2);font-weight:var(--fw-caps);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-text);
}
.gc-cta::after{content:" \2197";}

/* ---------- .pillnav : floating segmented anchor nav ----------
   --navP defaults to 1, so with no JS at all (or under reduced motion, where the
   scroll handler never runs) the nav is already at its settled position. The
   no-JS state IS the CSS default; no JS branch required.

   The track is dark glass everywhere and does not theme-switch. The reference
   can use a white translucent track because its hero is a photograph; ours is
   white, and a white track on white is invisible. */
.pillnav{
  position:fixed;left:var(--sp-5);z-index:90;
  top:auto;bottom:max(var(--sp-5),env(safe-area-inset-bottom));
  --pillnav-h:48px;
  max-width:calc(100% - var(--sp-5)*2);
}
.pillnav-track{
  position:relative;display:flex;list-style:none;margin:0;padding:4px;gap:2px;
  height:var(--pillnav-h);border-radius:var(--r-nav);
  background:rgb(var(--black-rgb)/.62);
  border:1px solid rgb(var(--paper-rgb)/.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow-nav);
}
.pillnav-item{
  position:relative;z-index:2;display:grid;place-items:center;white-space:nowrap;
  padding:0 var(--sp-4);border-radius:var(--r-nav);text-decoration:none;
  font-size:var(--step--1);font-weight:var(--fw-body);
  color:rgb(var(--paper-rgb)/.86);
  transition:color var(--dur-fast) var(--ease-out);
}
.pillnav-item:hover{color:var(--paper);}
.pillnav-item[aria-current="true"]{color:var(--black);}
/* Lives INSIDE .pillnav-track. The track has a backdrop-filter and therefore a
   stacking context of its own, so a thumb outside it always paints over the
   item labels no matter what z-index the labels carry. */
.pillnav-thumb{
  position:absolute;top:4px;bottom:4px;left:0;z-index:1;
  list-style:none;pointer-events:none;
  width:var(--thumb-w,0);transform:translateX(var(--thumb-x,0));
  background:var(--paper);border-radius:var(--r-nav);
  transition:transform var(--dur-base) var(--ease-glide),width var(--dur-base) var(--ease-glide);
}
/* no IntersectionObserver: the active ITEM gets the pill instead of a moving thumb */
.pillnav--static .pillnav-thumb{display:none;}
.pillnav--static .pillnav-item[aria-current="true"]{background:var(--paper);}
.pillnav .pillnav-item:focus-visible{outline:2px solid var(--paper);outline-offset:-2px;}

/* On a phone the nav spans the gutter so five pills still fit without clipping. */
@media(max-width:900px){
  .pillnav{left:var(--sp-3);right:var(--sp-3);max-width:none;bottom:max(var(--sp-3),env(safe-area-inset-bottom));}
  .pillnav-track{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  .pillnav-track::-webkit-scrollbar{display:none;}
}
[data-nav-section]{scroll-margin-top:calc(var(--pillnav-h,48px) + var(--sp-7));}
@media(max-width:900px){ [data-nav-section]{scroll-margin-top:var(--sp-5);} }

/* ---------- giant footer wordmark ----------
   Clamped, never raw vw: {{BRAND}} is a placeholder of unknown final length, so a
   vw-locked size would overflow on a long name and look undersized on a short one. */
.footer-wordmark{
  font-family:var(--font-display);
  font-size:var(--step-6);font-weight:var(--fw-thin);
  letter-spacing:-.045em;line-height:.84;
  /* lowercase, like the hero mark. The reference sets its wordmark lowercase
     and that is half of why it reads as one voice rather than a logo. */
  text-transform:none;
  color:var(--paper);
  margin:0 0 var(--sp-7);
  text-wrap:balance;
}

/* ---------- .deets : label left, value right, answer underneath ----------
   Shares the accordion JS with .faq-item and the same 1fr <-> 0fr mechanics. */
.deets{border-top:1px solid var(--hair);margin-top:var(--sp-7);}
.deet{border-bottom:1px solid var(--hair);}
.deet-q{
  width:100%;display:flex;align-items:center;gap:var(--sp-4);
  background:none;border:0;cursor:pointer;text-align:left;
  padding:var(--sp-4) 0;min-height:56px;color:var(--fg);
  font-family:var(--font-sans);font-size:var(--step-0);font-weight:var(--fw-body);
}
.deet-label{flex:1 1 auto;}
.deet-value{flex:0 1 auto;color:var(--fg-soft);text-align:right;}
.deet-icon{
  flex:none;position:relative;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--hair);
}
.deet-icon::before,.deet-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
  transform:translate(-50%,-50%);
}
.deet-icon::before{width:11px;height:1.5px;}
.deet-icon::after{width:1.5px;height:11px;transition:transform var(--dur-fast) var(--ease-out);}
.deet[data-open="true"] .deet-icon::after{transform:translate(-50%,-50%) scaleY(0);}
.deet-a{display:grid;grid-template-rows:1fr;}
.deet-a-in{
  overflow:hidden;min-height:0;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.deet[data-open="false"] .deet-a{grid-template-rows:0fr;}
.deet[data-open="false"] .deet-a-in{opacity:0;transform:translateY(-6px);}
@supports not (grid-template-rows:0fr){
  .deet-a{display:block;}
  .deet[data-open="false"] .deet-a{max-height:0;overflow:hidden;}
  .deet[data-open="false"] .deet-a-in{opacity:0;}
}
.deet-a p{margin:0;padding:0 0 var(--sp-5);color:var(--fg-soft);max-width:62ch;}
@media(max-width:560px){
  .deet-q{flex-wrap:wrap;}
  .deet-value{width:100%;text-align:left;order:3;}
}

/* ---------- reveal motion ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.img-reveal{clip-path:inset(0 0 16% 0);transition:clip-path .8s var(--ease-out);}
.img-reveal.in{clip-path:inset(0 0 0 0);}
/* never .img-reveal a .ph: inset(0 0 16% 0) clips exactly where the label sits */
.ph.img-reveal{clip-path:none;}

/* blur-resolve headings. Headings only, <=12 words: filter:blur() on hundreds of
   spans tanks INP. JS adds the spans and sets --i; the existing observer adds .in. */
[data-reveal="words"] .wi{
  display:inline-block;opacity:0;
  filter:blur(var(--blur-ghost));transform:translateY(.32em);
  transition:opacity var(--dur-reveal) var(--ease-glide),
             filter var(--dur-reveal) var(--ease-glide),
             transform var(--dur-reveal) var(--ease-glide);
  transition-delay:calc(var(--i,0) * 45ms);
}
[data-reveal="words"].in .wi{opacity:1;filter:blur(0);transform:none;}

/* ---------- no backdrop-filter: fall back to near-opaque, never to nothing ---------- */
/* Only the pill nav and the menu button still blur anything, and both sit over
   photography, so without backdrop-filter they go near-opaque rather than
   translucent. The cards no longer blur at all. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pillnav-track,.menu-btn{background:rgb(var(--black-rgb)/.94);}
}

/* ---------- reduced motion: show everything immediately ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .reveal,.img-reveal{opacity:1 !important;transform:none !important;clip-path:none !important;}
  [data-reveal="words"] .wi{opacity:1 !important;filter:none !important;transform:none !important;}
  .hero-media,.hero-media img{transform:none !important;}
  .menu-links a{transform:none;opacity:1;}
}

/* ---------- small screens guard ---------- */
@media(max-width:360px){
  .wordmark{font-size:var(--step-1);}
}