/* ══════════════════════════════════════════════════════════════════
   SCHIR shared.css — Phase 65.1-01 Eleventy migration
   Lifted verbatim from index.html (pre-archive) + new minimalist
   hero/tile/editorial/commerce/footer CSS.
   ══════════════════════════════════════════════════════════════════ */

/* ── :root tokens (verbatim from index.html lines 82-95 + new --cream) ── */
:root{
  --gold:          #c9a84c;
  --gold-lt:       #e4c96a;
  --gold-dim:      rgba(201,168,76,.45);
  --white:         #f2ede4;
  --white-dim:     rgba(242,237,228,.72);
  --cream:         #f4ecd9;
  --ink:           #0c1119;
  --ink-2:         #121b28;
  --ink-rgb:       12,17,25;
  --ink-2-rgb:     18,27,40;
  --line:          rgba(255,255,255,.07);
  --texture-granite: url("/assets/img/schir_granite_texture.jpg");
  --cubic-main: cubic-bezier(0.65, 0.01, 0.05, 0.99);
}

/* ── Global word-break (verbatim from index.html lines 31-51) ── */
*{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}
h1,h2,h3,h4,blockquote,.headline,[class*="title"],[class*="heading"]{
  white-space:nowrap;
  overflow:visible;
  width:auto;
  max-width:none;
}
.sh-wrap,.sh-block{
  white-space:normal !important;
  max-width:600px !important;
  word-break:keep-all !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ── Base body ── */
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--white);
  font-family:"Cormorant Garamond",Georgia,serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
  margin:0;
}
*{hyphens:none;-webkit-hyphens:none;}

/* Grain overlay (verbatim from index.html line 110-115) */
body::after{
  content:"";position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:256px 256px;opacity:.022;pointer-events:none;z-index:9999;mix-blend-mode:overlay;
}

/* ── Utility classes (verbatim from index.html lines 121-128) ── */
.eyebrow{font-family:"Cinzel",serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);opacity:1;display:block;text-align:center;}
.rule{display:block;width:40px;height:1px;background:var(--gold-dim);margin:16px 0 24px;}
.sh{font-size:clamp(28px,4vw,48px);font-weight:300;line-height:1.15;letter-spacing:-.01em;margin-bottom:24px;}
.sb{font-size:18px;font-weight:300;line-height:1.7;opacity:.75;margin-bottom:16px;}
h1,h2,h3,.sh,.wordmark,.cta-h{
  word-break:keep-all;overflow-wrap:normal;
  hyphens:none;-webkit-hyphens:none;-ms-hyphens:none;
}

/* ══════════════════════════════════════════════════════════════════
   NAV (verbatim from index.html lines 161-191)
   ══════════════════════════════════════════════════════════════════ */
#v8nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  padding:24px 48px;
  transition:all .4s var(--cubic-main);
}
#v8nav.scrolled{
  padding:14px 48px;
  background:rgba(12,17,25,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(20px);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav-logo{
  font-family:"Cinzel",serif;font-size:20px;font-weight:700;
  color:var(--white);text-decoration:none;letter-spacing:.12em;
  text-shadow:0 1px 4px rgba(12,17,25,0.45);
}
.nav-logo-i{color:var(--gold);}
.nav-section-links{display:flex;gap:32px;align-items:center;flex:1;justify-content:center;}
/* 2026-05-08 audit: nav-section-link legibility — was too dim
   (opacity .78) + too small (12px) over cream/ivory parts of hero
   illustration. Bumped weight/size/opacity + text-shadow fallback. */
.nav-section-link{
  font-family:"Cinzel",serif;
  font-size:14px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--white);
  text-decoration:none;
  opacity:.95;
  text-shadow:0 1px 4px rgba(12,17,25,0.45);
  transition:opacity .25s, color .25s;
}
.nav-section-link:hover{opacity:1;color:var(--gold);}
.nav-shop-btn{
  font-family:"Cinzel",serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--gold);
  padding:10px 20px;
  border-radius:3px;
  text-decoration:none;
  transition:background .25s;
}
.nav-shop-btn:hover{background:var(--gold-lt);}
.nav-menu-btn{
  background:none;border:1px solid rgba(255,255,255,.2);
  color:var(--white);cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:24px;
  font-family:"Cormorant Garamond",serif;font-size:15px;
  overflow:hidden;
  transition:border-color .3s;
}
.nav-menu-btn:hover{border-color:var(--gold-dim);}
.nav-btn-text{height:1.2em;overflow:hidden;position:relative;}
.nav-btn-text p{margin:0;line-height:1.2em;}
.nav-btn-icon svg{width:14px;height:14px;display:block;}

/* Hide hamburger on desktop, hide nav-section-links on mobile (verbatim from index.html lines 665-666 + 770) */
@media(min-width:1024px){.nav-menu-btn{display:none;}}
@media(max-width:1023px){
  .nav-section-links{display:none;}
  .nav-shop-btn{display:none;}
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU (verbatim from index.html lines 668-768; Phase 62-02 Sendero port)
   ══════════════════════════════════════════════════════════════════ */
#mobileMenu{
  position:fixed;
  inset:0;
  z-index:1000;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear .35s;
}
#mobileMenu[data-state="open"]{
  visibility:visible;
  pointer-events:auto;
  transition:visibility 0s linear 0s;
}
.mobile-menu-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,10,20,.65);
  opacity:0;
  transition:opacity .35s ease;
}
#mobileMenu[data-state="open"] .mobile-menu-backdrop{opacity:1;}
.mobile-menu-panel{
  position:absolute;
  top:0;
  right:0;
  width:min(86vw,420px);
  height:100vh;
  background:var(--ink);
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.65,.01,.05,.99);
  overflow-y:auto;
}
#mobileMenu[data-state="open"] .mobile-menu-panel{transform:translateX(0);}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);}
.mobile-menu-title{font-family:'Cinzel',serif;font-size:16px;font-weight:700;letter-spacing:.12em;color:var(--gold);}
.mobile-menu-close{background:transparent;border:none;color:var(--cream);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:background .2s ease;}
.mobile-menu-close:hover{background:rgba(255,255,255,.05);}
.mobile-menu-list{list-style:none;padding:8px 0;margin:0;flex:1;}
.mobile-menu-item{border-bottom:1px solid rgba(255,255,255,.04);}
.mobile-menu-parent,
.mobile-menu-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:18px 24px;
  background:transparent;
  border:none;
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
  transition:color .2s ease, background .2s ease;
}
.mobile-menu-parent:hover,
.mobile-menu-link:hover{color:var(--gold);background:rgba(255,255,255,.02);}
.mobile-menu-chevron{transition:transform .25s ease;color:currentColor;}
.mobile-menu-parent[data-state="open"] .mobile-menu-chevron{transform:rotate(180deg);}
.mobile-menu-children{
  list-style:none;
  margin:0;
  padding:0;
  max-height:0;
  overflow:hidden;
  background:rgba(0,0,0,.25);
  transition:max-height .3s cubic-bezier(.65,.01,.05,.99);
}
.mobile-menu-children[data-state="open"]{max-height:600px;}
.mobile-menu-children li{border-top:1px solid rgba(255,255,255,.04);}
.mobile-menu-children a{
  display:block;
  padding:14px 24px 14px 40px;
  color:var(--cream);
  opacity:.7;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:15px;
  text-decoration:none;
  transition:opacity .2s ease, color .2s ease;
}
.mobile-menu-children a:hover{opacity:1;color:var(--gold);}
.mobile-menu-link-shop{
  background:var(--gold);
  color:var(--ink) !important;
  margin:24px;
  border-radius:3px;
  justify-content:center;
  letter-spacing:.14em;
  font-weight:600;
}
.mobile-menu-link-shop:hover{background:var(--gold-lt,#dab94d);color:var(--ink) !important;}
.mobile-menu-footer{padding:20px 24px;border-top:1px solid var(--line);font-family:'Cormorant Garamond',Georgia,serif;font-size:12px;color:var(--cream);opacity:.4;text-align:center;}
@media(min-width:1024px){#mobileMenu{display:none !important;}}
body[data-mobile-menu-open="true"]{overflow:hidden;}

/* ══════════════════════════════════════════════════════════════════
   HERO (new — minimalist 4-element layout per D-05)
   2026-05-08 audit pass: legible subcopy + real-button CTA
   ══════════════════════════════════════════════════════════════════ */
/* 2026-05-08 audit round 3: removed rectangular glass plate ("popup feel"),
   moved content to lower-third (rule of thirds), strengthened bottom-up
   gradient, bumped subcopy weight + drop shadow, polished button padding
   and tracking. Mountain art now "breathes" in upper two-thirds. */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-bottom:12vh;box-sizing:border-box;}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;z-index:0;
  /* Ken Burns drift — 60s imperceptible scale loop adds alpine "breath"
     without distracting motion. prefers-reduced-motion respects user prefs. */
  animation:heroDrift 60s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{
  from{transform:scale(1);}
  to{transform:scale(1.05);}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg{animation:none;}
}
/* Multi-stop bottom-up gradient: top stays mostly open (.20) so the
   ibex/peaks read clearly, bottom is near-solid (.95) so text is legible
   without a plate. Mid-stop transition feels filmic, not a hard band. */
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(12,17,25,0.20) 0%,
    rgba(12,17,25,0.45) 40%,
    rgba(12,17,25,0.85) 72%,
    rgba(12,17,25,0.95) 100%);
  z-index:1;
}
/* No plate — typography + drop shadow carry legibility */
.hero-content{
  position:relative;z-index:2;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:0 32px;
  text-align:center;
  box-sizing:border-box;
}
.hero-headline{font-family:'Cinzel',serif;font-size:clamp(32px,6vw,64px);font-weight:700;letter-spacing:.04em;color:var(--white);text-transform:uppercase;line-height:1.05;margin:0 0 24px;}
/* Subcopy: 500/medium weight (was 400) for survival without plate, larger
   clamp (20-26px), drop shadow per audit spec (0,0,16px / .60 opacity).
   white-space:normal + word-break:normal !important — overrides the legacy
   global rule at line 31-36 that sets white-space:nowrap on ALL h1/h2/h3/h4
   (verbatim from old index.html). Without these the H1 here would force the
   subcopy onto a single 1400px-wide line. */
.hero-subcopy{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,2.2vw,26px);
  font-style:normal;
  font-weight:500;
  color:var(--white);
  opacity:1;
  line-height:1.5;
  margin:0 auto 44px;
  text-shadow:
    0 0 16px rgba(0,0,0,0.60),
    0 1px 3px rgba(0,0,0,0.45);
  max-width:600px;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}
/* CTA: more horizontal padding (36→44, ~22% bump) + tightened tracking
   (.20→.10em) per audit "luxury feel" recommendation.
   Border-beam: conic-gradient + @property --angle + 4s rotation gives
   a subtle traveling shimmer along the button edge. Pure CSS, no JS. */
@property --schir-cta-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.hero-cta{
  position:relative;
  font-family:'Cinzel',serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--gold);
  padding:18px 44px;
  border-radius:3px;
  text-decoration:none;
  display:inline-block;
  transition:background .25s, transform .25s, box-shadow .25s;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  isolation:isolate;
}
.hero-cta::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:5px;
  background:conic-gradient(
    from var(--schir-cta-angle),
    transparent 0%,
    rgba(228,201,106,0.95) 8%,
    transparent 18%,
    transparent 100%
  );
  z-index:-1;
  animation:schirCtaBorderBeam 5s linear infinite;
}
@keyframes schirCtaBorderBeam{
  to{--schir-cta-angle:360deg;}
}
.hero-cta:hover{
  background:var(--gold-lt);
  transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.hero-cta:active{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .hero-cta::before{animation:none;background:none;}
}
@media(max-width:560px){
  .hero{
    min-height:auto;
    padding-bottom:8vh;
    padding-top:24px;
  }
  .hero-bg{
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
    background-color:var(--ink);
    height:calc(100vw / 2.33);
    bottom:auto;
  }
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(12,17,25,0.00) 0%,
      rgba(12,17,25,0.00) calc(100vw / 2.33),
      rgba(12,17,25,0.85) calc(100vw / 2.33 + 40px),
      rgba(12,17,25,0.95) 100%);
  }
  .hero-content{
    padding:0 20px;
    margin-top:calc(100vw / 2.33 + 24px);
  }
}

/* ══════════════════════════════════════════════════════════════════
   TILE GRID (Prada Section-2 pattern, 5 tiles full viewport)
   2026-05-08 audit pass: stronger labels + clear button affordance + footer transition
   ══════════════════════════════════════════════════════════════════ */
.tile-grid-section{padding:0;background:var(--ink);position:relative;}
/* Removed min-height:100vh — tile aspect-ratio:1 was creating ~700px void below
   the row at desktop widths. Grid now sizes naturally to the row of squares. */
.tile-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
@media(max-width:1024px){.tile-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.tile-grid{grid-template-columns:1fr;}}
.tile{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--white);
  overflow:hidden;
  aspect-ratio:1;
  background:var(--ink-2);
  transition:filter .25s;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .8s var(--cubic-main),opacity .35s;
  opacity:.92;
}
/* Hover affordance: image lifts + brightens, gold inset border flashes,
   label warms to gold, gold radial glow halo for "interactive surface" feel */
.tile:hover img{transform:scale(1.06);opacity:1;}
.tile:hover .tile-label{color:var(--gold-lt);}
.tile::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid transparent;
  pointer-events:none;
  transition:border-color .25s, box-shadow .25s;
  z-index:3;
}
.tile:hover::after{
  border-color:rgba(201,168,76,0.85);
  box-shadow:0 0 24px rgba(201,168,76,0.25);
}
/* Tile label: bumped 13→17→20px + bolder + gradient backdrop for legibility on ivory art */
.tile-label{
  position:absolute;
  left:0;right:0;
  bottom:0;
  padding:64px 16px 28px;
  text-align:center;
  font-family:'Cinzel',serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white);
  background:linear-gradient(180deg,rgba(12,17,25,0) 0%,rgba(12,17,25,0.55) 40%,rgba(12,17,25,0.94) 100%);
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  z-index:2;
  transition:color .25s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.tile-sub{
  display:block;
  font-family:'Cormorant Garamond','EB Garamond',Georgia,serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:.02em;
  text-transform:none;
  color:rgba(255,255,255,0.82);
  line-height:1.35;
  max-width:90%;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
@media(max-width:1280px){
  .tile-label{font-size:18px;padding:56px 14px 24px;}
  .tile-sub{font-size:13px;}
}
@media(max-width:560px){
  .tile-label{font-size:20px;padding:56px 16px 28px;gap:8px;}
  .tile-sub{font-size:14px;}
}
/* Footer transition: gradient fade between bright-art tiles and dark navy footer
   Soft 96px buffer at the bottom of the tile grid → solves the "hard cut" audit finding */
.tile-grid-section::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;right:0;
  height:96px;
  background:linear-gradient(180deg,rgba(12,17,25,0) 0%,rgba(12,17,25,0.65) 60%,var(--ink) 100%);
  pointer-events:none;
  z-index:6;
}

/* ══════════════════════════════════════════════════════════════════
   EDITORIAL LAYOUT (/story + /the-name)
   ══════════════════════════════════════════════════════════════════ */
/* Editorial: tightened measure (780→640px) + more breathing room per 2026-05-08 audit */
.editorial{max-width:640px;margin:0 auto;padding:120px 32px 80px;}
.editorial-hero{text-align:center;margin-bottom:120px;}
.editorial-hero .eyebrow,.editorial-coda .eyebrow,.editorial-disposition .eyebrow{color:var(--gold-dim);}
.editorial-hero .rule,.editorial-disposition .rule{margin:16px auto 24px;}
.editorial-hero .sb{max-width:560px;margin:32px auto 0;}
.editorial-body{margin-bottom:120px;}
.editorial-body .sb{margin-bottom:36px;line-height:1.75;}
.editorial-pull{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:20px;text-align:center;margin:48px 0;opacity:.85;}
.editorial-disposition,.editorial-coda{text-align:center;margin-top:96px;}
/* ─── Pull-quote — display-scale, used on /story disposition H2 (council 2026-05-08) ─── */
.editorial-disposition .sh.pull-quote{
  font-family:'Cinzel',serif;
  font-size:clamp(36px,5.5vw,64px);
  font-weight:300;
  font-style:italic;
  letter-spacing:.02em;
  line-height:1.2;
  color:var(--gold-lt);
  margin:24px auto 32px;
  max-width:760px;
}
@media(max-width:560px){.editorial-disposition .sh.pull-quote{font-size:clamp(28px,8vw,40px);}}
.etym-grid-section{padding:0 32px;margin-top:64px;}

/* ── Etymology cards (verbatim from index.html lines 340-354) ── */
.etym-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;}
@media(max-width:600px){.etym-grid{grid-template-columns:1fr;}}
/* Equal-height cards via flex column: pushes meaning to consistent baseline
   regardless of varying word lengths — 2026-05-08 audit "uneven vertical alignment" fix */
.etym-card{
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:36px 32px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:220px;
}
.etym-card .etym-meaning{margin-top:auto;}
.etym-corner{
  position:absolute;top:12px;left:16px;
  font-family:"Cormorant Garamond",serif;font-size:72px;line-height:1;
  color:var(--gold);opacity:.08;
}
.etym-lang{display:block;font-family:"Cinzel",serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:8px;}
.etym-word{display:block;font-family:"Cinzel",serif;font-size:32px;font-weight:600;letter-spacing:.06em;margin-bottom:16px;}
.etym-meaning{font-size:15px;font-weight:300;line-height:1.65;opacity:.65;}

/* ══════════════════════════════════════════════════════════════════
   COMMERCE LAYOUT (/beverages + /restore)
   ══════════════════════════════════════════════════════════════════ */
.commerce{max-width:1100px;margin:0 auto;padding:120px 32px 80px;}
.commerce-hero{text-align:center;margin-bottom:96px;}
.commerce-hero .eyebrow{color:var(--gold-dim);}
.commerce-hero .rule{margin:16px auto 24px;}
.commerce-hero .sb{max-width:600px;margin:24px auto 0;}
.flavor-grid-section{margin-bottom:80px;}
.sku-grid-section{margin-bottom:80px;}
.sku-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:768px){.sku-grid{grid-template-columns:1fr;}}
.sku-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:32px 28px;}
.sku-img{display:none;}
.sku-name{display:block;font-family:'Cinzel',serif;font-size:15px;font-weight:600;letter-spacing:.05em;color:var(--gold);margin-bottom:6px;}
.sku-tagline{font-size:13px;font-style:italic;opacity:.6;margin-bottom:10px;}
.sku-usecase{font-size:14px;opacity:.75;margin-bottom:6px;}
.sku-ingredients{font-size:14px;opacity:.6;margin-bottom:10px;}
.sku-claim{font-size:13px;opacity:.7;margin-bottom:12px;}
.sku-status{display:inline-block;background:rgba(201,168,76,.08);border:1px solid var(--gold-dim);border-radius:4px;padding:6px 12px;font-family:'Cinzel',serif;font-size:12px;color:var(--gold);}
.fda-disclaimer{font-size:11px;opacity:.35;margin-top:24px;line-height:1.6;}
.commerce-waitlist{text-align:center;margin-top:120px;border-top:1px solid var(--line);padding-top:96px;}
.commerce-waitlist .rule{margin:16px auto 24px;}
.commerce-cta{text-align:center;margin-top:80px;}

/* ── Flavor cards (verbatim from index.html lines 379-435) ── */
.flavor-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:3px;
}
.flavor-card{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;
  cursor:default;
  background:#0e1826;
  border:1px solid rgba(201,168,76,0.10);
  transition:border-color .35s cubic-bezier(.4,0,.2,1);
}
.flavor-card:hover{border-color:var(--gold-dim);}
.flavor-card img{
  width:100%;height:100%;
  object-fit:contain;object-position:center center;display:block;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.flavor-card:hover img{transform:scale(1.06);}
.flavor-mask{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(4,7,13,0.82) 100%),
    linear-gradient(to top, rgba(4,7,13,0.88) 0%, rgba(4,7,13,0.30) 55%, transparent 100%);
  opacity:.80;
  transition:opacity .35s cubic-bezier(.4,0,.2,1);
}
.flavor-card:hover .flavor-mask{opacity:.92;}
.flavor-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:22px 20px;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.flavor-card:hover .flavor-info{transform:translateY(-8px);}
.fl-num{font-family:"Cinzel",serif;font-size:8px;letter-spacing:.28em;color:var(--gold);opacity:.70;margin-bottom:2px;}
.fl-name{font-family:"Cinzel",serif;font-size:clamp(11px,1.4vw,14px);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);line-height:1.3;}
.fl-desc{font-family:"Cormorant Garamond",serif;font-size:11.5px;font-style:italic;color:var(--white);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;line-height:1.5;}
.flavor-card:hover .fl-desc{opacity:.7;transform:translateY(0);}
.fl-sub{font-size:8px;color:var(--gold);opacity:.70;letter-spacing:.22em;text-transform:uppercase;}
.flavor-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .4s;}
.flavor-card:hover::after{opacity:1;}
.fc-0::after{background:linear-gradient(90deg,#3a8e4d,#9cd87f);} /* Mountain Mint Lime */
.fc-1::after{background:linear-gradient(90deg,#c93040,#e87080);} /* Foothill Cherry */

/* ── Submit button — Cinzel CTA family, scaled for forms (council 2026-05-08:
     match SHOP APPAREL hero-cta typography spec — same font/weight/letter-spacing,
     scaled down for inline-with-input contexts) ── */
.submit-btn{
  background:var(--gold);color:var(--ink);
  border:none;padding:12px 28px;border-radius:3px;cursor:pointer;
  font-family:"Cinzel",serif;font-size:13px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;
  white-space:nowrap;transition:background .2s, transform .2s, box-shadow .2s;
  text-decoration:none;display:inline-block;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.submit-btn:hover{background:var(--gold-lt);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.28);}
.submit-btn:active{transform:translateY(0);}

/* ── Macron rule — section divider (council 2026-05-08, dissented to GOLD from
     reviewer's terracotta to weave wordmark gold across the page) ── */
.macron-rule{
  border:0;
  height:2px;
  width:120px;
  margin:80px auto;
  background:var(--gold);
  opacity:.75;
}
.macron-rule.macron-rule--wide{width:240px;}
@media(max-width:560px){.macron-rule{margin:56px auto;width:96px;}}

/* ══════════════════════════════════════════════════════════════════
   FOOTER (new minimalist per D-26)
   ══════════════════════════════════════════════════════════════════ */
.site-footer{background:var(--ink-2);border-top:1px solid var(--line);padding:64px 32px 40px;}
.site-footer .inner{max-width:600px;margin:0 auto;text-align:center;}
.footer-wordmark{font-family:'Cinzel',serif;font-size:24px;font-weight:700;letter-spacing:.12em;color:var(--gold);margin-bottom:32px;}
.kl-footer-form{display:flex;gap:8px;max-width:380px;margin:0 auto 24px;}
.kl-footer-form input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--white);padding:10px 14px;border-radius:4px;font-family:'Cormorant Garamond',Georgia,serif;font-size:14px;}
.kl-footer-form input:focus{outline:none;border-color:var(--gold-dim);}
.footer-social{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);margin:24px 0 16px;}
.footer-social a{color:var(--gold-dim);text-decoration:none;}
.footer-social a:hover{color:var(--gold);}
.footer-dot{margin:0 12px;opacity:.5;}
.footer-copyright{font-size:11px;opacity:.4;font-family:'Cinzel',serif;letter-spacing:.1em;}

/* ══════════════════════════════════════════════════════════════════
   GLOW CARD (preserved accent — used by sku/flavor/etym cards)
   ══════════════════════════════════════════════════════════════════ */
.glow-card{position:relative;}

/* ══════════════════════════════════════════════════════════════════
   KLAVIYO POPUP VIEWPORT CAP (verbatim from index.html lines 1053-1060)
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:400px){
  .needsclick.kl-private-reset-css-Xuajs1,
  [class*="kl-private-reset-css"]{
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL — editorial fade-up via [data-reveal]
   JS toggles data-reveal-state="in" via IntersectionObserver.
   ══════════════════════════════════════════════════════════════════ */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--cubic-main), transform .9s var(--cubic-main);
  will-change:opacity, transform;
}
[data-reveal][data-reveal-state="in"]{
  opacity:1;
  transform:translateY(0);
}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 65 ART — story ibex hero + atmospheric page backgrounds
   ══════════════════════════════════════════════════════════════════ */

/* Story page — full-bleed ibex hero above editorial copy */
.editorial-hero-image{
  margin:0 -32px 56px;
  padding:0;
  display:block;
}
.editorial-hero-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:0;
}
@media(min-width:900px){
  .editorial-hero-image{margin:0 calc(50% - 50vw + 16px) 64px;max-width:none;}
}

/* Atmospheric page backgrounds — /the-name, /beverages, /restore.
   Low-opacity overlay keeps text readable on dark palette. */
body.page-with-bg{
  position:relative;
}
body.page-with-bg::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--page-bg-image);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0.18;
  z-index:-1;
  pointer-events:none;
}
body.page-with-bg::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(12,17,25,0.55) 0%,rgba(12,17,25,0.85) 100%);
  z-index:-1;
  pointer-events:none;
}