/* The Dancing Gringo — shared styles (landing + brand guidelines) */

/* ---------- Self-hosted fonts (was Google Fonts; woff2 in theme assets/fonts) ----------
   Shipped faces = the combos actually used: Bevan 400, Oswald 400/500/600/700
   (one variable woff2, weight range), Spectral 400 + Spectral italic 400.
   Dropped vs the old Google request: Bevan italic, Spectral 500/600 (the only 600
   use, .napkin-title, is italic — style-first matching faux-bolds the italic 400). */
@font-face {
  font-family: 'Bevan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bevan-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/oswald-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-italic-400.woff2') format('woff2');
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
/* Kill the grey mobile tap flash; brand-consistent :active feedback lives below. */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: #F1E9D7;
  color: #2A2A30;
  font-family: 'Spectral', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* Short pages: <main> grows so the footer always reaches the bottom of the viewport,
   and the LAST section inside it stretches so its background hugs the footer.
   (Skip link and gate are out of flow; nav/footer keep their intrinsic height.) */
main { display: block; }
#main { display: flex; flex-direction: column; flex: 1 0 auto; }
#main > * { flex-shrink: 0; }
#main > :last-child { flex-grow: 1; }

/* Item 2: skip rendering work for below-the-fold landing sections until they
   scroll near the viewport. Scoped to the home page (body#top) and only the
   anchor-LESS sections (pairings / quote / lineup / protocol) so anchor jumps
   to #faq and #join below them are unaffected. `auto` in contain-intrinsic-size
   makes the browser remember each section's real height after first render. */
body#top .pairings,
body#top .quote,
body#top .lineup,
body#top .howto {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

a { color: #1C2A47; text-decoration: none; }
a:hover { color: #9A7635; }
body.page-brand a { color: #9A7635; }
body.page-brand a:hover { color: #1C2A47; }

img { max-width: 100%; }
picture { display: contents; }

::selection { background: #C2984B; color: #14203A; }
/* Honeypot field — off-screen for humans, irresistible to bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid #C2984B; outline-offset: 2px; }
/* Form fields drop the default outline in favor of a border-color shift; restore a
   visible ring for keyboard users. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.ac-wrap input:focus-visible,
.join-form input:focus-visible { outline: 2px solid #C2984B; outline-offset: 2px; }
[id] { scroll-margin-top: 80px; }

/* Skip link — visually hidden until focused, then a navy-on-bone chip top-left. */
.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 200;
  background: #F1E9D7;
  color: #1C2A47;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px; font-weight: 600;
  padding: 12px 20px;
  border: 1px solid #C2984B;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; }

@keyframes dg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dg-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dg-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes dg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes dg-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dg-groove {
  0% { transform: rotate(0); }
  20% { transform: rotate(-5deg) scale(1.02); }
  40% { transform: rotate(4deg); }
  60% { transform: rotate(-3deg) scale(1.02); }
  80% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
@keyframes dg-spin { to { transform: rotate(360deg); } }
@keyframes dg-bubble {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: .8; }
  85% { opacity: .3; }
  100% { transform: translateY(-540px); opacity: 0; }
}
@keyframes dg-refuse {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-3px); }
  66% { transform: translateX(3px); }
}

/* Scroll reveal (progressive enhancement — html.js is set before first paint) */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-d1 { transition-delay: .12s; }
html.js .reveal-d2 { transition-delay: .24s; }
html.js .reveal-d3 { transition-delay: .36s; }

/* ---------- Shared components ---------- */
.eyebrow-row { display: flex; align-items: center; gap: 12px; color: #C2984B; }
.eyebrow-row.centered { justify-content: center; gap: 14px; }
.eyebrow {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 12px;
  color: #9A7635;
}
.eyebrow.on-dark { color: #DBC08A; }
.arrow-flip { transform: scaleX(-1); }

.btn-navy {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px;
  font-weight: 600;
  background: #1C2A47;
  color: #F1E9D7;
  border: none;
  padding: 16px 30px;
  cursor: pointer;
  display: inline-block;
  transition: background-color .25s ease, transform .15s ease;
}
a.btn-navy:hover { color: #F1E9D7; }
.btn-navy:hover { background: #26365C; }
.btn-navy:active { transform: translateY(1px); }

/* ---------- Mobile press feedback (item 5) ----------
   Instant background/border shifts (no gating needed); the transform-based
   button/answer presses are killed in the prefers-reduced-motion block. */
a:not(.btn-navy):not(.nav-cta):not(.gate-yes):active { color: #C2984B; }
.process-card:active { background: #E1D4B6; border-color: rgba(194, 152, 75, 0.6); }
.note-card:active { background: #E9DEC5; }
.pairing:active { background: rgba(194, 152, 75, 0.10); border-color: #C2984B; }
.fact-cell:active { background: #EFE6D2; border-color: #C2984B; }
.qz-answer:active { background: rgba(194, 152, 75, 0.15); border-color: #C2984B; }

/* ---------- Age gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 32, 58, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: dg-fade .4s ease both;
}
html.age-ok .gate { display: none; }
.gate-card {
  background: #F1E9D7;
  border: 1px solid #C2984B;
  max-width: 440px; width: 100%;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  animation: dg-pop .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.gate-arrow { color: #C2984B; margin-bottom: 18px; }
.gate-brand {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: 12px;
  color: #9A7635;
  margin-bottom: 14px;
}
.gate-card h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: 30px; line-height: 1.05;
  color: #1C2A47; margin: 0 0 14px;
}
.gate-card p { font-size: 15px; line-height: 1.6; color: #4a4a52; margin: 0 0 28px; }
.gate-actions { display: flex; gap: 12px; justify-content: center; }
.gate-yes {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px; font-weight: 600;
  background: #1C2A47; color: #F1E9D7;
  border: none; padding: 14px 26px; cursor: pointer;
  transition: background-color .25s ease;
}
.gate-yes:hover { background: #26365C; }
.gate-no {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px; font-weight: 600;
  color: #9A7635;
  border: 1px solid #C2984B;
  padding: 14px 26px;
  display: inline-flex; align-items: center;
}
a.gate-no:hover { color: #9A7635; }
.gate-noscript {
  margin: 22px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid rgba(194, 152, 75, 0.5);
  font-style: italic;
  color: #4a4a52;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 233, 215, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(28, 42, 71, 0.14);
  transition: box-shadow .3s ease;
}
.nav.scrolled { box-shadow: 0 8px 24px rgba(20, 32, 58, 0.10); }
.nav-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 16px 28px;
  /* Keep the bar clear of notch/rounded-corner insets in landscape. */
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-wordmark {
  font-family: 'Bevan', serif;
  font-size: 19px; letter-spacing: .01em;
  color: #1C2A47; line-height: 1;
}
a.nav-wordmark:hover { color: #1C2A47; }
.nav-links { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.nav-link {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12.5px;
  color: #1C2A47;
  padding-bottom: 4px;
  background: linear-gradient(#C2984B, #C2984B) no-repeat left bottom / 0% 2px;
  transition: background-size .3s ease;
}
a.nav-link:hover { color: #1C2A47; background-size: 100% 2px; }
.nav-cta {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12.5px; font-weight: 600;
  background: #1C2A47; color: #F1E9D7;
  padding: 11px 20px;
  transition: background-color .25s ease;
}
a.nav-cta:hover { color: #F1E9D7; background: #26365C; }
a.nav-link.active { background-size: 100% 2px; }

/* Hamburger — three uneven gold redaction bars (mobile only) */
.menu-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px 2px;
}
/* Grow the tappable target to ≥44×44 without moving the visual bars. */
.menu-toggle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}
.mt-bar {
  display: block;
  height: 3px;
  background: #1C2A47;
  transition: background-color .25s ease, width .25s ease;
}
.mt-bar:nth-child(1) { width: 26px; }
.mt-bar:nth-child(2) { width: 17px; }
.mt-bar:nth-child(3) { width: 22px; }
.menu-toggle:hover .mt-bar { background: #C2984B; width: 26px; }

/* Mobile menu overlay — midnight, numbered Bevan links, random fact at the bottom */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: #14203A;
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.menu-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/desert.svg') bottom center / contain no-repeat;
  opacity: 0.10;
  pointer-events: none;
}
.menu-overlay.open { display: flex; animation: dg-fade .25s ease both; }
body.menu-open { overflow: hidden; }
.menu-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(194, 152, 75, 0.35);
  position: relative;
}
.menu-wordmark { font-family: 'Bevan', serif; font-size: 19px; letter-spacing: .01em; color: #F1E9D7; line-height: 1; }
.menu-close {
  background: none; border: 1px solid rgba(194, 152, 75, 0.5);
  color: #C2984B;
  font-size: 16px; line-height: 1;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color .25s ease;
}
.menu-close:hover { border-color: #C2984B; }
.menu-links { display: flex; flex-direction: column; padding: 26px 24px 0; position: relative; }
.menu-link {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Bevan', serif;
  font-size: clamp(24px, 6.5vw, 32px);
  color: #F1E9D7;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(194, 152, 75, 0.18);
}
a.menu-link:hover { color: #DBC08A; }
.menu-num {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: .2em;
  color: #C2984B;
  flex-shrink: 0;
}
.menu-overlay.open .menu-link { opacity: 0; animation: dg-rise .45s ease forwards; }
.menu-overlay.open .menu-link:nth-child(1) { animation-delay: .05s; }
.menu-overlay.open .menu-link:nth-child(2) { animation-delay: .10s; }
.menu-overlay.open .menu-link:nth-child(3) { animation-delay: .15s; }
.menu-overlay.open .menu-link:nth-child(4) { animation-delay: .20s; }
.menu-overlay.open .menu-link:nth-child(5) { animation-delay: .25s; }
.menu-overlay.open .menu-link:nth-child(6) { animation-delay: .30s; }
.menu-overlay.open .menu-link:nth-child(7) { animation-delay: .35s; }
.menu-cta {
  margin: 24px 24px 0;
  background: #C2984B; color: #14203A;
  text-align: center;
  position: relative;
}
a.menu-cta:hover { color: #14203A; background: #D2A85B; }
.menu-fact {
  margin-top: auto;
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(194, 152, 75, 0.35);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.menu-fact { cursor: pointer; }
.menu-fact:hover .menu-fact-refresh { transform: rotate(90deg); }
.menu-fact-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #C2984B;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.menu-fact-refresh {
  font-family: 'Spectral', serif;
  font-size: 15px;
  letter-spacing: 0;
  display: inline-block;
  transition: transform .35s ease;
}
.menu-fact-refresh.spun { animation: dg-spin .5s ease; }
.menu-fact-text {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 16px; line-height: 1.5;
  color: #EFE6D2;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 90% at 78% 20%, #F6F0E1 0%, #F1E9D7 45%, #E9DEC5 100%);
  overflow: hidden;
}
.hero-desert {
  position: absolute; inset: 0;
  background: url('../images/desert.svg') bottom center / contain no-repeat;
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  padding: 70px 28px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px;
  align-items: center;
}
.hero-copy { animation: dg-rise .7s ease both; }
.hero-copy .eyebrow-row { margin-bottom: 22px; }
.hero h1 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(36px, 3.5vw, 48px);
  line-height: 1.14;
  color: #1C2A47;
  margin: 0 0 22px;
}
.hero h1 .gold { color: #C2984B; }
.hero-sub { font-size: 18px; line-height: 1.65; color: #45454e; max-width: 440px; margin: 0 0 30px; }
.hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.link-underline {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px; font-weight: 600;
  color: #1C2A47;
  border-bottom: 2px solid #C2984B;
  padding: 6px 2px;
}
a.link-underline:hover { color: #9A7635; }
.link-underline .arr { display: inline-block; transition: transform .25s ease; }
.link-underline:hover .arr { transform: translateX(5px); }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11.5px;
  color: #9A7635;
  border: 1px solid rgba(194, 152, 75, 0.55);
  padding: 8px 14px;
  transition: border-color .25s ease, background-color .25s ease;
}
.chip:hover { border-color: #C2984B; background: rgba(194, 152, 75, 0.08); }
.hero-visual {
  position: relative;
  align-self: stretch;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 560px;
}
.hero-glow {
  position: absolute;
  width: 420px; height: 420px;
  top: 50px; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 152, 75, 0.24) 0%, rgba(194, 152, 75, 0) 64%);
}
.hero-can-wrap {
  display: block;
  position: relative;
  margin-bottom: 26px;
  /* Animations live on the wrapper, drop-shadow on the static img: Safari squares
     the shadow whenever the filtered element (or its subtree) is the animated one. */
  animation: dg-rise .9s ease both, dg-float 7s ease-in-out 1.2s infinite;
}
.hero-can {
  display: block;
  height: 600px; max-height: 76vh;
  width: auto; /* override the width/height attribute hint (attrs kept for CLS aspect-ratio) */
  filter: drop-shadow(0 22px 30px rgba(28, 42, 71, 0.30));
}

/* ---------- Hero bubbles ---------- */
.hero-bubbles {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bubbles span {
  position: absolute; bottom: -16px;
  border: 1px solid rgba(194, 152, 75, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: dg-bubble 9s linear infinite;
}

/* ---------- Marquee ---------- */
.marquee {
  background: #1C2A47;
  overflow: hidden;
  border-top: 2px solid #C2984B;
  border-bottom: 2px solid #C2984B;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: dg-marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-half { display: flex; align-items: center; padding: 16px 0; }
.marquee-item {
  font-family: 'Bevan', serif;
  font-size: 20px;
  color: #F1E9D7;
  padding: 0 34px;
  white-space: nowrap;
}
.marquee-item.gold { color: #C2984B; }
.marquee-dot { color: #C2984B; font-size: 10px; }
.marquee-mini .marquee-track { animation-direction: reverse; animation-duration: 34s; }
.marquee-mini .marquee-item { font-size: 16px; padding: 0 26px; }
.marquee-mini .marquee-half { padding: 12px 0; }

/* ---------- Meet the Gringo ---------- */
.story {
  background: #14203A;
  color: #EFE6D2;
  position: relative;
  overflow: hidden;
}
.story-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 88px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 56px;
  align-items: center;
}
.keith-frame { position: relative; }
.keith-frame::before {
  content: '';
  position: absolute; inset: -14px;
  border: 1px solid rgba(194, 152, 75, 0.5);
}
.keith-panel {
  position: relative;
  background: radial-gradient(115% 90% at 50% 12%, #F6F0E1 0%, #F1E9D7 48%, #E4D6B8 100%);
  overflow: hidden;
}
.keith-desert {
  position: absolute; inset: 0;
  background: url('../images/desert.svg') bottom center / 100% auto no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.keith-glow {
  position: absolute;
  width: 78%; aspect-ratio: 1;
  top: 6%; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 152, 75, 0.35) 0%, rgba(194, 152, 75, 0) 65%);
}
.keith-img-wrap {
  display: block;
  position: relative;
  width: 82%;
  margin: 36px auto -5px;
  animation: dg-sway 5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.keith-img-wrap:hover { animation-duration: 0.7s; }
.keith-img-wrap.groove { animation: dg-groove .9s ease-in-out; }
.keith-img-wrap.js-dance { animation: none; }
.keith-img {
  width: 100%;
  height: auto; /* override the width/height attribute hint (attrs kept for CLS aspect-ratio) */
  display: block;
  cursor: pointer;
  filter: drop-shadow(0 26px 30px rgba(28, 42, 71, 0.3));
}
.story-copy .eyebrow-row { margin-bottom: 20px; }
.story h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(30px, 5.5vw, 44px); line-height: 1.02;
  color: #F1E9D7;
  margin: 0 0 22px;
}
.story p { font-size: 17px; line-height: 1.7; color: #cdc6b6; margin: 0 0 18px; }
.story p.last { margin-bottom: 30px; }
.fact-box {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(194, 152, 75, 0.5);
  padding: 18px 24px;
  min-width: min(320px, 100%);
  max-width: 440px;
  cursor: pointer;
}
.fact-box:hover { border-color: #C2984B; background: rgba(194, 152, 75, 0.08); }
.fact-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fact-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #C2984B;
}
.fact-refresh {
  color: #C2984B; font-size: 14px;
  display: inline-block;
  transition: transform .35s ease;
}
.fact-box:hover .fact-refresh { transform: rotate(90deg); }
.fact-refresh.spun { animation: dg-spin .5s ease; }
.fact-text.fact-swap { animation: dg-fade .45s ease both; }
.fact-text {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: #EFE6D2;
}

/* ---------- The Tequila ---------- */
.tequila { background: #F1E9D7; position: relative; }
.tequila-inner { max-width: 1180px; margin: 0 auto; padding: 90px 28px; }
.tequila-head { text-align: center; margin-bottom: 52px; }
.tequila-head .eyebrow-row { margin-bottom: 18px; }
.tequila h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(31px, 5.8vw, 46px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 16px;
}
.tequila-intro { font-size: 18px; line-height: 1.65; color: #45454e; max-width: 600px; margin: 0 auto; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  margin-bottom: 44px;
}
.process-card {
  background: #E9DEC5;
  border: 1px solid rgba(28, 42, 71, 0.12);
  padding: 32px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.process-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 42, 71, 0.10); }
.process-num { font-family: 'Bevan', serif; font-size: 30px; color: #C2984B; line-height: 1; }
.process-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 13px;
  color: #1C2A47;
  margin: 14px 0 10px;
}
.process-card p { font-size: 15px; line-height: 1.62; color: #4a4a52; margin: 0; }
/* Declassified field-recipe card */
.dossier {
  max-width: 560px;
  margin: 0 auto 44px;
  background: #E9DEC5;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 26px 32px 22px;
}
.dossier-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(28, 42, 71, 0.15);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.dossier-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #1C2A47;
}
.dossier-stamp {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: #9A7635;
  border: 1px solid rgba(194, 152, 75, 0.6);
  padding: 4px 8px;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.dossier-lines {
  list-style: none;
  margin: 0; padding: 0;
  text-align: left;
}
.dossier-lines li {
  font-family: 'Spectral', serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: #3a3a42;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(28, 42, 71, 0.12);
}
.dossier-lines li:last-child { border-bottom: none; }
.redact { position: relative; padding: 0 5px; white-space: nowrap; cursor: pointer; }
/* Transparent overlay extends the tap target ~9px above/below the ~25px text line
   (effective ≥40px) without any visual change; clicks still land on the .redact
   element, so .never's refuse behaviour is unaffected. */
.redact::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -9px; bottom: -9px;
  z-index: 1;
}
.redact::after {
  content: '';
  position: absolute; inset: 2px -1px;
  background: #1C2A47;
  transition: opacity .35s ease;
}
.redact:hover::after { opacity: 0; }
.redact.revealed::after { opacity: 0; }
.redact.never:hover::after { opacity: 1; animation: dg-refuse .3s ease; }
.redact.never.refuse::after { opacity: 1; animation: dg-refuse .3s ease; }
.dossier-foot {
  margin-top: 14px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10.5px;
  color: #9A7635;
  text-align: right;
}

.spec-chips { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.spec-chip {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: #1C2A47;
  border: 1px solid #C2984B;
  padding: 10px 18px;
}

/* ---------- Tasting Notes ---------- */
.notes { background: #E9DEC5; }
.notes-inner { max-width: 1180px; margin: 0 auto; padding: 88px 28px; }
.notes .eyebrow-row { margin-bottom: 16px; }
.notes h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(29px, 5.5vw, 44px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 44px;
  max-width: 620px;
}
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 22px;
}
.note-card {
  background: #F1E9D7;
  padding: 34px 30px;
  border-top: 3px solid #C2984B;
  transition: transform .3s ease, box-shadow .3s ease;
}
.note-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 42, 71, 0.10); }
.note-step {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 14px;
}
.note-card h3 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: 24px;
  color: #1C2A47;
  margin: 0 0 12px;
}
.note-card p { font-size: 15.5px; line-height: 1.65; color: #4a4a52; margin: 0; }

/* ---------- Smoke curl (draws itself when the soda section reveals) ---------- */
.smoke { display: flex; justify-content: center; color: #C2984B; margin-bottom: 10px; }
.smoke-path { stroke-dasharray: 240; stroke-dashoffset: 240; }
html.js .tequila-head.in .smoke-path { animation: dg-draw 2.2s ease forwards .3s; }
html:not(.js) .smoke-path { stroke-dashoffset: 0; }

/* ---------- The Maestro (provenance straight, identity redacted) ---------- */
.maestro { background: #14203A; color: #EFE6D2; position: relative; }
.maestro-inner { max-width: 1080px; margin: 0 auto; padding: 90px 28px; }
.maestro-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.maestro-head .eyebrow-row { margin-bottom: 18px; }
.maestro h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(30px, 5.6vw, 44px); line-height: 1.04;
  color: #F1E9D7;
  margin: 0 0 18px;
}
.maestro-intro { font-family: 'Spectral', serif; font-size: 17px; line-height: 1.7; color: #cdc6b6; margin: 0; }
.maestro-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px;
  align-items: start;
}
.maestro-body .dossier { margin: 0; max-width: none; }
/* Last known photo — an empty gold-line silhouette, on purpose */
.maestro-photo { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.maestro-photo-label {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: .2em; font-size: 11px; color: #DBC08A;
}
.maestro-photo-frame {
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  aspect-ratio: 4 / 5;
  display: flex; align-items: center; justify-content: center;
  color: #C2984B;
  background: rgba(194, 152, 75, 0.04);
}
.maestro-photo-frame svg { width: 46%; height: auto; opacity: 0.85; }
.maestro-photo-cap {
  font-family: 'Spectral', serif; font-style: italic;
  font-size: 14.5px; line-height: 1.5; color: #cdc6b6; margin: 0;
}
/* Radical-simplicity mantra — fourth input redacted */
.maestro-mantra {
  text-align: center;
  margin: 54px auto 0;
  font-family: 'Bevan', serif;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.1;
  color: #F1E9D7;
}
.maestro-mantra .redact { padding: 0 8px; }
.maestro-mantra .redact::after { background: #C2984B; inset: 4px -2px; }
/* Interpreter pull-quote */
.maestro-quote { max-width: 620px; margin: 44px auto 0; text-align: center; }
.maestro-quote p {
  font-family: 'Spectral', serif; font-style: italic;
  font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5;
  color: #EFE6D2; margin: 0 0 14px;
}
.maestro-quote cite {
  font-family: 'Oswald', sans-serif; font-style: normal;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 11px; color: #DBC08A;
}
@keyframes dg-draw { to { stroke-dashoffset: 0; } }

/* ---------- Approved occasions (pairings) ---------- */
.pairings { background: #F1E9D7; }
.pairings-inner { max-width: 1180px; margin: 0 auto; padding: 84px 28px; text-align: center; }
.pairings .eyebrow-row { margin-bottom: 18px; }
.pairings h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(29px, 5.5vw, 44px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 44px;
}
.pairings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}
.pairing {
  border: 1px solid rgba(194, 152, 75, 0.5);
  padding: 30px 22px 26px;
  transition: transform .3s ease, border-color .3s ease;
}
.pairing:hover { transform: translateY(-4px); border-color: #C2984B; }
.pairing-icon { color: #9A7635; height: 64px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pairing-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: #1C2A47;
  margin-bottom: 8px;
}
.pairing p { font-size: 14.5px; line-height: 1.6; color: #4a4a52; margin: 0; }

/* ---------- Lineup (one real can, two redacted) ---------- */
.lineup { background: #F1E9D7; }
.lineup-inner { max-width: 1080px; margin: 0 auto; padding: 84px 28px; text-align: center; }
.lineup .eyebrow-row { margin-bottom: 18px; }
.lineup h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(29px, 5.5vw, 44px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 12px;
}
.lineup-sub { font-size: 17px; line-height: 1.65; color: #45454e; max-width: 540px; margin: 0 auto 46px; }
.lineup-grid { display: flex; gap: 48px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.lineup-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lineup-item img { height: 320px; width: auto; }
.lineup-item.mystery img { filter: brightness(0); opacity: 0.85; }
.lineup-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: #1C2A47;
}
.lineup-item.mystery .lineup-name { background: #1C2A47; color: #1C2A47; padding: 2px 8px; user-select: none; }
.lineup-note { font-family: 'Spectral', serif; font-style: italic; font-size: 14px; color: #6a6a72; margin-top: -8px; }

/* ---------- Field reports (inside quote section) ---------- */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  max-width: 980px;
  margin: 52px auto 0;
  text-align: left;
}
.report { border: 1px solid rgba(194, 152, 75, 0.35); padding: 22px 24px; }
.report-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10.5px;
  color: #C2984B;
  margin-bottom: 10px;
}
.report p {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 15.5px; line-height: 1.6;
  color: #EFE6D2;
  margin: 0 0 10px;
}
.report-attr {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: #DBC08A;
}

/* ---------- Quote ---------- */
.quote { background: #1C2A47; color: #EFE6D2; }
.quote-inner { max-width: 1180px; margin: 0 auto; padding: 80px 28px; text-align: center; }
.quote-motif { color: #C2984B; display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 26px; }
.quote-motif .diamond { font-size: 10px; }
.quote blockquote {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: clamp(22px, 4.2vw, 30px); line-height: 1.4;
  color: #F1E9D7;
  max-width: 820px;
  margin: 0 auto 22px;
  text-wrap: balance;
}
.quote-attr {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #DBC08A;
}

/* Story page — witness-statement band (scoped extension of the shared .quote) */
.quote.witness .quote-inner { padding: 104px 28px; }
.quote.witness blockquote {
  font-size: clamp(26px, 4.6vw, 38px);
  margin-bottom: 30px;
}
.quote.witness .quote-attr {
  display: inline-flex; align-items: center; gap: 16px;
}
.quote.witness .quote-attr::before,
.quote.witness .quote-attr::after {
  content: '';
  width: 44px; height: 1px;
  background: rgba(194, 152, 75, 0.5);
}

/* ---------- How to drink it ---------- */
.howto { background: #E9DEC5; }
.howto-inner { max-width: 1080px; margin: 0 auto; padding: 88px 28px 84px; text-align: center; }
.howto .eyebrow-row { margin-bottom: 18px; }
.howto h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.05;
  color: #1C2A47;
  margin: 0 0 48px;
}
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 36px;
  align-items: start;
}
.howto-num { font-family: 'Bevan', serif; font-size: 46px; color: #C2984B; line-height: 1; }
.howto-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 14px;
  color: #1C2A47;
  margin: 14px 0 10px;
}
.howto-grid p { font-size: 15.5px; line-height: 1.6; color: #4a4a52; margin: 0 auto; max-width: 260px; }

/* ---------- The Protocol: the forbidden act ---------- */
.protocol-forbidden {
  max-width: 720px;
  margin: 56px auto 0;
  border-top: 1px solid rgba(28, 42, 71, 0.15);
  padding-top: 40px;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
}
.protocol-forbidden-copy { text-align: left; }
.protocol-forbidden-label {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: .24em; font-size: 12px; color: #9A7635; margin-bottom: 8px;
}
.protocol-forbidden-line {
  font-family: 'Bevan', serif; font-size: clamp(20px, 3vw, 28px);
  line-height: 1.15; color: #1C2A47; margin: 0; max-width: 420px;
}
.protocol-stamp {
  font-family: 'Oswald', sans-serif; text-transform: uppercase;
  letter-spacing: .28em; font-size: 20px; font-weight: 600;
  color: #A93226;
  border: 3px solid #A93226;
  padding: 10px 20px 10px 24px;
  transform: rotate(-6deg);
  white-space: nowrap;
}

/* ---------- FAQ ---------- */
.faq { background: #14203A; color: #EFE6D2; }
.faq-inner { max-width: 760px; margin: 0 auto; padding: 84px 28px; }
.faq .eyebrow-row { margin-bottom: 16px; }
.faq h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(29px, 5.5vw, 44px); line-height: 1.02;
  color: #F1E9D7;
  margin: 0 0 34px;
}
.faq-list { border-top: 1px solid rgba(194, 152, 75, 0.5); }
.faq-item { border-bottom: 1px solid rgba(194, 152, 75, 0.5); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; cursor: pointer;
  text-align: left;
  padding: 20px 2px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 14px; font-weight: 500;
  color: #F1E9D7;
  transition: color .25s ease;
}
.faq-q:hover { color: #DBC08A; }
.faq-glyph {
  color: #C2984B;
  font-family: 'Spectral', serif;
  font-size: 22px; line-height: 1;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.faq-item.open .faq-glyph { transform: rotate(45deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease;
}
.faq-a p {
  font-family: 'Spectral', serif;
  font-size: 16.5px; line-height: 1.65;
  color: #cdc6b6;
  margin: 0;
  padding: 0 2px 22px;
  max-width: 560px;
}

/* ---------- Join ---------- */
.join { background: radial-gradient(110% 80% at 20% 10%, #F6F0E1 0%, #F1E9D7 55%, #E9DEC5 100%); }
.join-inner { max-width: 760px; margin: 0 auto; padding: 96px 28px; text-align: center; }
.join .eyebrow-row { margin-bottom: 18px; }
.join h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(32px, 6vw, 48px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 18px;
}
.join-sub { font-size: 18px; line-height: 1.65; color: #45454e; margin: 0 0 34px; }
.join-form {
  display: flex; gap: 12px;
  max-width: 520px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.join-form input {
  flex: 1;
  min-width: 240px;
  font-family: 'Spectral', serif;
  font-size: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(28, 42, 71, 0.35);
  background: #F6F0E1;
  color: #1C2A47;
}
.join-confirm {
  display: none;
  align-items: center;
  gap: 12px;
  background: #1C2A47;
  color: #F1E9D7;
  padding: 18px 34px;
}
.join-confirm.visible { display: inline-flex; animation: dg-rise .5s ease both; }
.join-confirm .confirm-arrow { color: #C2984B; display: inline-flex; }
.join-confirm span.msg {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 14px;
}
.join-form input.join-zip { flex: 0 1 200px; min-width: 150px; }

/* ---------- Dance Floor Clearance Card ---------- */
.clearance-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; margin: 26px auto 0; max-width: 460px;
}
.clearance-card {
  width: 100%;
  text-align: left;
  background: #14203A;
  color: #cdc6b6;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 30px 34px 32px;
  animation: dg-rise .5s ease both;
}
.clearance-card .cc-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .28em;
  font-size: 12px; color: #C2984B;
  margin-bottom: 12px;
}
.clearance-card .cc-title {
  display: block;
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: 26px; line-height: 1.08; color: #F1E9D7;
  margin-bottom: 16px;
}
.clearance-card .cc-member {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 20px; color: #DBC08A;
  margin-bottom: 22px;
}
.clearance-card .cc-rows { margin: 0 0 20px; padding: 0; }
.clearance-card .cc-rows > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0;
  border-top: 1px solid rgba(194, 152, 75, 0.22);
}
.clearance-card .cc-rows > div:last-child { border-bottom: 1px solid rgba(194, 152, 75, 0.22); }
.clearance-card dt {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: #9A7635;
}
.clearance-card dd {
  margin: 0;
  font-family: 'Spectral', serif;
  font-size: 15px; color: #F1E9D7;
}
.clearance-card .cc-sep {
  display: block; text-align: center;
  color: #C2984B; font-size: 14px; margin: 0 0 12px;
}
.clearance-card .cc-foot {
  display: block; text-align: center;
  font-family: 'Spectral', serif; font-style: italic;
  font-size: 13px; color: #8f8a78;
}
.clearance-wrap .cc-download { align-self: center; }

/* ---------- Footer (landing) ---------- */
.footer { background: #14203A; color: #cdc6b6; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 56px 28px 30px; padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(194, 152, 75, 0.3);
  padding-bottom: 34px;
}
.footer-brand { max-width: 320px; }
.footer-wordmark { margin-bottom: 12px; }
.footer-wordmark-the {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 11px;
  color: #C2984B;
  margin-bottom: 4px;
}
.footer-wordmark-main { display: block; font-family: 'Bevan', serif; font-size: 22px; line-height: 1; color: #F1E9D7; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; margin: 0; color: #9d9789; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col-head {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #C2984B;
  margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: #cdc6b6; font-size: 14.5px; transition: color .25s ease; }
.footer-links a:hover { color: #F1E9D7; }
.footer-legal {
  display: flex; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-top: 22px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: #6f6a5e;
}

/* ==================================================================
   Subpages (story / find-us / contact)
   ================================================================== */
.page-hero { background: #14203A; color: #EFE6D2; position: relative; overflow: hidden; }
.page-hero.on-cream {
  background: radial-gradient(120% 90% at 78% 20%, #F6F0E1 0%, #F1E9D7 45%, #E9DEC5 100%);
  color: #2A2A30;
}
.page-hero-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 76px 28px 64px;
  text-align: center;
}
.page-hero .eyebrow-row { margin-bottom: 18px; }
.page-hero h1 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(34px, 5vw, 54px); line-height: 1.05;
  color: #F1E9D7;
  margin: 0 0 16px;
}
.page-hero.on-cream h1 { color: #1C2A47; }
.page-hero-sub {
  font-size: 18px; line-height: 1.65;
  color: #cdc6b6;
  max-width: 560px; margin: 0 auto;
}
.page-hero.on-cream .page-hero-sub { color: #45454e; }

/* Story page — case-file hero (scoped extension of the shared .page-hero) */
.page-hero.story-hero .page-hero-inner { position: relative; z-index: 1; padding: 100px 28px 92px; }
.page-hero.story-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  -webkit-mask: url('../images/desert.svg') bottom center / contain no-repeat;
  mask: url('../images/desert.svg') bottom center / contain no-repeat;
  background: #DBC08A;
  opacity: 0.06;
  pointer-events: none;
}
.hero-classify {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px;
  margin: 26px auto 0;
  padding-top: 22px;
  max-width: 560px;
  border-top: 1px solid rgba(194, 152, 75, 0.35);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  color: #DBC08A;
}
.hero-classify .d { color: #C2984B; font-size: 7px; letter-spacing: 0; }

/* Subpage heros — desert horizon slice (find-us / contact / correspondents).
   A bottom-pinned pseudo shows the scrub/cactus band of desert.svg rising from
   the hero's lower edge; the negative bottom offset crops the artwork's sparse
   ground dots so silhouettes land in view, and the mask fades the top out so
   nothing hard-cuts mid-stroke. Scoped modifier; base .page-hero clips overflow. */
.page-hero.has-desert::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  background: url('../images/desert.svg') left 50% bottom -120px / 112% auto no-repeat;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 98%);
  mask-image: linear-gradient(to top, #000 50%, transparent 98%);
}
.page-hero.has-desert .page-hero-inner { position: relative; z-index: 1; }
/* Flipped view of the same landscape (contact) */
.page-hero.has-desert.desert-flip::before { transform: scaleX(-1); }
/* Different stretch of horizon — tighter crop toward the agave (correspondents) */
.page-hero.has-desert.desert-offset::before { background-position: left 82% bottom -140px; background-size: 126% auto; }

/* Timeline (story page) — "artist's rendering" scene rows + evidence exhibits */
.timeline-section { background: #F1E9D7; }
.timeline-section.sand { background: #E9DEC5; }
.timeline-inner { max-width: 960px; margin: 0 auto; padding: 92px 28px; }
.timeline-inner.part-two { padding-top: 84px; }
.timeline { position: relative; }

/* Two-column scene rows, alternating sides, with a central dotted rail */
.tl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 34px 0;
}
.tl-row.flip { flex-direction: row-reverse; }
.tl-row > .tl-illo,
.tl-row > .tl-text { flex: 1 1 0; min-width: 0; }

/* Central rail segment — draws in downward as each row reveals */
.tl-row::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 2px dotted rgba(194, 152, 75, 0.5);
}
html.js .tl-row::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform .9s ease .12s;
}
html.js .tl-row.in::before { transform: translateX(-50%) scaleY(1); }

/* Illustration panel — warm archival paper, gold hairline, caption placard */
.tl-illo {
  margin: 0;
  position: relative; z-index: 1;
  background-color: #F5EFE1;
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 42, 71, 0.016) 0, rgba(28, 42, 71, 0.016) 1px, transparent 1px, transparent 4px),
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
  border: 1px solid rgba(194, 152, 75, 0.5);
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.08), 0 10px 26px rgba(28, 42, 71, 0.09);
}
.tl-illo-frame { padding: 16px 20px 8px; }
.tl-scene { display: block; width: 100%; height: auto; color: #9A7635; }
.tl-illo-cap {
  margin: 0 20px; padding: 10px 0 14px;
  border-top: 1px solid rgba(194, 152, 75, 0.4);
  display: flex; flex-direction: column; gap: 3px;
}
.tl-illo-no {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10.5px;
  color: #9A7635;
}
.tl-illo-sub {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 13px;
  color: #6a6a72;
}

/* Text block */
.tl-text { position: relative; z-index: 1; }
.tl-label {
  display: flex; align-items: center; gap: 9px;
  width: max-content;
  max-width: 100%;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #9A7635;
  margin-bottom: 12px;
}
.tl-label::before {
  content: '◆';
  font-size: 7px;
  color: #C2984B;
  line-height: 1;
}
.tl-text p { font-size: 17px; line-height: 1.75; color: #45454e; margin: 0; }

/* Stamp-in day labels */
@keyframes dg-stamp {
  0% { opacity: 0; transform: scale(1.35) rotate(-2deg); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
html.js .tl-row .tl-label { opacity: 0; transform-origin: left center; }
html.js .tl-row.in .tl-label { animation: dg-stamp .4s cubic-bezier(.2, .9, .3, 1.1) .15s both; }

/* Evidence exhibits — archival artifacts pinned between entries */
.exhibit {
  position: relative;
  max-width: 440px;
  margin: 8px auto 46px;
  background-color: #F5EFE1;
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 42, 71, 0.016) 0, rgba(28, 42, 71, 0.016) 1px, transparent 1px, transparent 4px),
    radial-gradient(120% 100% at 20% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%);
  border: 1px solid rgba(28, 42, 71, 0.14);
  padding: 28px 28px 24px;
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.10), 0 10px 28px rgba(28, 42, 71, 0.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.exhibit:last-child { margin-bottom: 0; }
.exhibit.tilt-l { transform: rotate(-1deg); }
.exhibit.tilt-r { transform: rotate(0.9deg); }
.exhibit:hover {
  transform: rotate(0deg);
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.10), 0 16px 40px rgba(28, 42, 71, 0.14);
}
.exhibit-tag {
  position: absolute; top: -12px; left: 22px;
  background: #F1E9D7;
  border: 1px solid #C2984B;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 10px;
  color: #9A7635;
  padding: 4px 11px;
}

/* Exhibit A — boarding pass */
.bp-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.bp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.bp-field label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 9.5px;
  color: #9A7635;
  margin-bottom: 2px;
}
.bp-field span { font-family: 'Spectral', serif; font-size: 14.5px; color: #1C2A47; }
.bp-code {
  font-family: 'Bevan', serif;
  font-size: 34px; line-height: 1;
  color: #1C2A47;
  border-left: 1px dashed rgba(28, 42, 71, 0.3);
  padding-left: 18px;
}
.bp-code small {
  display: block;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .18em;
  font-size: 9.5px;
  color: #9A7635;
  margin-top: 4px;
}

/* Exhibit B — bar napkin */
.napkin { background-color: #F7F1E3; }
.napkin::after {
  content: '';
  position: absolute; right: 16px; bottom: 14px;
  width: 58px; height: 58px;
  border: 3px solid rgba(154, 118, 53, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.napkin-title {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15.5px;
  color: #1C2A47;
  margin-bottom: 10px;
}
.napkin-lines { list-style: none; margin: 0; padding: 0; }
.napkin-lines li {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: #3a3a42;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(28, 42, 71, 0.18);
}
.napkin-lines li:last-child { border-bottom: none; }

/* Exhibit C — polaroid with no footage */
.polaroid { background-color: #F7F1E3; padding: 12px 12px 16px; max-width: 360px; }
.polaroid-window {
  position: relative;
  height: 190px;
  background: #EFE6D2;
  border: 1px solid rgba(28, 42, 71, 0.12);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.polaroid-window::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/desert.svg') bottom center / cover no-repeat;
  opacity: 0.16;
}
.polaroid-window span {
  position: relative;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 12px;
  color: #9A7635;
  border: 1px solid rgba(194, 152, 75, 0.6);
  padding: 8px 14px;
  transform: rotate(-3deg);
}
.polaroid-caption {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 14.5px;
  color: #3a3a42;
  margin: 12px 4px 0;
}

/* Exhibit D — customs stamp */
.stamp-card { text-align: center; padding-top: 32px; padding-bottom: 30px; }
.stamp {
  display: inline-block;
  border: 2px solid rgba(154, 118, 53, 0.75);
  box-shadow: 0 0 0 1px #E9DEC5, 0 0 0 2px rgba(154, 118, 53, 0.75) inset;
  outline: 2px solid rgba(154, 118, 53, 0.4);
  outline-offset: 4px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 15px;
  color: #9A7635;
  padding: 12px 20px;
  transform: rotate(-3deg);
}
.stamp-sub {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 14px;
  color: #6a6a72;
  margin-top: 16px;
}

@media (max-width: 720px) {
  .tl-row, .tl-row.flip { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px 0; }
  .tl-row::before { display: none; }
  .tl-illo { max-width: 420px; margin: 0 auto; width: 100%; }
  .exhibit { max-width: 100%; }
  .bp-grid { grid-template-columns: 1fr; }
  .bp-code { border-left: none; padding-left: 0; border-top: 1px dashed rgba(28, 42, 71, 0.3); padding-top: 12px; }
}

/* Static fact grid (story page) — dossier index cards */
.fact-grid-section { background: #E9DEC5; }
.fact-grid-inner { max-width: 1180px; margin: 0 auto; padding: 96px 28px; }
.fact-grid-eyebrow { margin-bottom: 18px; }
.fact-grid-title {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(29px, 5.5vw, 44px); line-height: 1.02;
  color: #1C2A47;
  margin: 0 0 44px;
  text-align: center;
}
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.fact-cell {
  background: #F5EFE1;
  border: 1px solid rgba(28, 42, 71, 0.10);
  border-top: 3px solid #C2984B;
  padding: 28px 28px 30px;
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fact-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.08), 0 14px 30px rgba(28, 42, 71, 0.12);
}
.fact-cell .num {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 12px;
}
.fact-cell .txt {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 16.5px; line-height: 1.55;
  color: #2A2A30;
}

/* Contact cards */
.contact-card a { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 600; color: #1C2A47; border-bottom: 2px solid #C2984B; padding-bottom: 3px; }

/* Launch map (find-us) — blurred classified territory */
.map-section { background: #F1E9D7; }
.map-inner { max-width: 1080px; margin: 0 auto; padding: 0 28px 90px; }
.map-inner .eyebrow-row { margin-bottom: 22px; }
.map-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  max-height: 620px;
  border-top: 1px solid rgba(194, 152, 75, 0.5);
  border-bottom: 1px solid rgba(194, 152, 75, 0.5);
  background: #F6F0E1;
  overflow: hidden;
}
.map-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
  filter: blur(5px) sepia(0.4) saturate(0.65) brightness(1.03);
  transform: scale(1.05);
  transition: filter .6s ease;
}
.map-panel:hover .map-frame { filter: blur(2.5px) sepia(0.4) saturate(0.7) brightness(1.03); }
.map-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(241, 233, 215, 0) 0%, rgba(241, 233, 215, 0.3) 100%);
}
.map-card {
  background: #F1E9D7;
  border: 1px solid #C2984B;
  padding: 30px 34px 28px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 24px 50px rgba(20, 32, 58, 0.18);
}
.map-card-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 16px;
}
.map-card .stamp { font-size: 14px; padding: 10px 16px; }
.map-card p {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 15px; line-height: 1.6;
  color: #4a4a52;
  margin: 18px 0 16px;
}
/* Nominate a territory — floating card on the map's bottom seam */
.nominate-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px 78px; }
.nominate-card {
  position: relative; z-index: 6;
  margin-top: -46px;
  background: #F6F0E1;
  border: 1px solid rgba(194, 152, 75, 0.55);
  border-top: 3px solid #C2984B;
  box-shadow: 0 20px 44px rgba(20, 32, 58, 0.14);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.nominate-intro { flex: 0 1 auto; }
.nominate-title {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: #1C2A47;
}
.nominate-sub {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 13.5px;
  color: #6a6a72;
  margin-top: 4px;
}
.nominate-form { flex: 1 1 320px; display: flex; gap: 12px; }
.ac-wrap { position: relative; flex: 1; min-width: 200px; }
.ac-wrap input {
  width: 100%;
  font-family: 'Spectral', serif;
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(28, 42, 71, 0.35);
  background: #F1E9D7;
  color: #1C2A47;
  border-radius: 0;
  transition: border-color .25s ease;
}
.ac-wrap input:focus { border-color: #C2984B; outline: none; }
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #F6F0E1;
  border: 1px solid #C2984B;
  border-top: none;
  z-index: 30;
  max-height: 236px;
  overflow-y: auto;
  text-align: left;
  box-shadow: 0 18px 32px rgba(20, 32, 58, 0.16);
}
.ac-item {
  padding: 10px 15px;
  font-family: 'Spectral', serif;
  font-size: 15px;
  color: #1C2A47;
  cursor: pointer;
  border-bottom: 1px solid rgba(194, 152, 75, 0.18);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.active { background: rgba(194, 152, 75, 0.14); }
/* No-match notice — informational only, never an option (no hover, no cursor,
   skipped by keyboard nav). Same padding rhythm as .ac-item. */
.ac-empty {
  padding: 10px 15px;
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 14px;
  color: #6a6a72;
  cursor: default;
}
.nominate-card .contact-confirm { flex: 1 1 320px; margin: 0; }
@media (max-width: 720px) {
  .nominate-wrap { padding: 0 20px 60px; }
  .nominate-card { margin-top: -28px; padding: 20px; gap: 16px; }
  .nominate-form { flex-wrap: wrap; }
  .nominate-form .btn-navy { width: 100%; }
}

@media (max-width: 720px) {
  .map-inner { padding: 0 20px 64px; }
  .map-inner[style] { padding-top: 56px !important; }
  .map-panel { aspect-ratio: 4 / 3; }
  .map-card { padding: 22px 20px; }
  .map-card p { font-size: 14px; }
}

/* Field credential (correspondents) — press-pass mock */
.credential {
  position: relative;
  background: #F1E9D7;
  border: 1px solid rgba(28, 42, 71, 0.25);
  padding: 18px 26px 30px;
  max-width: 350px;
  margin: 0 auto;
  transform: rotate(-2deg);
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.35);
}
.credential-punch { width: 46px; height: 9px; background: #14203A; margin: 0 auto 16px; }
.credential-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 2px solid #1C2A47;
  padding-bottom: 9px;
  margin-bottom: 16px;
}
.credential-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 14px;
  color: #1C2A47;
}
.credential-no {
  font-family: 'Bevan', serif;
  font-size: 15px;
  color: #C2984B;
  white-space: nowrap;
}
.credential-body { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.credential-photo {
  background: #E9DEC5;
  border: 1px solid rgba(28, 42, 71, 0.2);
  height: 116px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.credential-photo img { height: 104px; width: auto; filter: brightness(0); opacity: .8; }
.credential-fields { display: flex; flex-direction: column; gap: 9px; }
.cf-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
  color: #9A7635;
  margin-bottom: 1px;
}
.cf-value {
  font-family: 'Spectral', serif;
  font-size: 13.5px;
  color: #1C2A47;
  border-bottom: 1px dotted rgba(28, 42, 71, 0.3);
  padding-bottom: 2px;
}
.cf-value em { color: #6a6a72; }
.credential-seal {
  position: absolute;
  right: 16px; bottom: -18px;
  width: 62px; height: 62px;
  border: 2px solid rgba(154, 118, 53, 0.7);
  border-radius: 50%;
  background: #F1E9D7;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(8deg);
  color: #9A7635;
  font-size: 14px;
}
.credential-seal::after {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(154, 118, 53, 0.5);
  border-radius: 50%;
}

/* Contact form */
.contact-section { background: #F1E9D7; }
.contact-inner { max-width: 1080px; margin: 0 auto; padding: 72px 28px 90px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: start;
}
.contact-form-card {
  background: #E9DEC5;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 34px 32px 38px;
}
.contact-form-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(28, 42, 71, 0.15);
  padding-bottom: 14px;
  margin-bottom: 24px;
}
.contact-form-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #1C2A47;
}
.contact-form-stamp {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: #9A7635;
  border: 1px solid rgba(194, 152, 75, 0.6);
  padding: 4px 8px;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: 'Spectral', serif;
  font-size: 16px;
  color: #1C2A47;
  background: #F6F0E1;
  border: 1px solid rgba(28, 42, 71, 0.35);
  padding: 13px 15px;
  border-radius: 0;
  transition: border-color .25s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #C2984B; outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1 L6 6 L11 1' stroke='%23C2984B' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Field-level validation messages */
.field-error {
  display: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10.5px;
  color: #A93226;
  margin-top: 7px;
}
.field.has-error .field-error { display: block; }
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: #C0392B; }
/* Standalone errors (newsletter + nominate — no .field wrapper): toggled via .show. */
.field-error.show { display: block; }
.join-error { flex-basis: 100%; text-align: center; margin-top: 4px; }

/* Success seal — gold ring with a self-drawing check */
.confirm-seal {
  width: 54px; height: 54px;
  border: 2px solid rgba(154, 118, 53, 0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #9A7635;
  flex-shrink: 0;
}
.confirm-seal svg path { stroke-dasharray: 42; stroke-dashoffset: 42; }
.contact-confirm.visible .confirm-seal svg path { animation: dg-draw-check .5s ease .25s forwards; }
@keyframes dg-draw-check { to { stroke-dashoffset: 0; } }
.contact-submit { width: 100%; margin-top: 4px; }
.contact-confirm {
  display: none;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(194, 152, 75, 0.6);
  background: rgba(194, 152, 75, 0.07);
  padding: 22px 24px;
  margin-top: 6px;
}
.contact-confirm.visible { display: flex; animation: dg-rise .5s ease both; }
.contact-confirm-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #9A7635;
}
.contact-confirm p {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 16px; line-height: 1.6;
  color: #2A2A30;
  margin: 0;
}

/* Contact aside — direct lines + field notes */
.contact-aside-head {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #9A7635;
  margin-bottom: 16px;
}
.direct-lines { display: flex; flex-direction: column; margin-bottom: 34px; }
.direct-line {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 2px;
  border-bottom: 1px solid rgba(194, 152, 75, 0.35);
}
.direct-line:first-of-type { border-top: 1px solid rgba(194, 152, 75, 0.35); }
.direct-line-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: #1C2A47;
}
.direct-line a { font-family: 'Spectral', serif; font-size: 15.5px; color: #1C2A47; border-bottom: 1px solid rgba(194, 152, 75, 0.6); align-self: flex-start; }
.direct-line a:hover { color: #9A7635; }
.field-notes { list-style: none; margin: 0; padding: 0; }
.field-notes li {
  position: relative;
  padding: 0 0 12px 22px;
  font-family: 'Spectral', serif;
  font-size: 15px; line-height: 1.55;
  color: #4a4a52;
}
.field-notes li::before {
  content: '◆';
  position: absolute; left: 0; top: 2px;
  color: #C2984B;
  font-size: 9px;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-inner { padding: 56px 20px 64px; }
  .contact-form-card { padding: 26px 22px 30px; }
}

/* CTA band */
.cta-band { background: #14203A; color: #EFE6D2; text-align: center; }
.cta-band-inner { max-width: 760px; margin: 0 auto; padding: 72px 28px; }
.cta-band h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(28px, 4.5vw, 40px); line-height: 1.05;
  color: #F1E9D7;
  margin: 0 0 26px;
}

/* Story page — CTA is #main's last child (flex-grows on tall viewports): keep it centered */
.cta-band.story-cta { display: flex; align-items: center; justify-content: center; }
.cta-band.story-cta .cta-band-inner { padding: 96px 28px; }
.btn-navy.btn-brass { background: #C2984B; color: #14203A; }
.btn-navy.btn-brass:hover { background: #D2A85B; color: #14203A; }

/* Story-section link to the legend page */
a.link-underline.on-dark, a.link-underline.on-dark:hover { color: #DBC08A; }

@media (max-width: 720px) {
  .page-hero-inner { padding: 52px 20px 44px; }
  .page-hero.story-hero .page-hero-inner { padding: 60px 20px 52px; }
  .page-hero.has-desert::before { background-position: left 8% bottom -120px; background-size: 290% auto; }
  .page-hero.has-desert.desert-offset::before { background-position: left 74% bottom -130px; background-size: 300% auto; }
  .timeline-inner, .fact-grid-inner { padding: 60px 20px; }
  .cta-band-inner { padding: 56px 20px; }
  .cta-band.story-cta .cta-band-inner { padding: 60px 20px; }
  .quote.witness .quote-inner { padding: 64px 20px; }
}

/* ---------- Legal pages (privacy) ---------- */
.legal-section { background: #F1E9D7; }
.legal-inner { max-width: 760px; margin: 0 auto; padding: 64px 28px 90px; }
.legal-inner h2 {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 14px;
  color: #1C2A47;
  margin: 40px 0 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(194, 152, 75, 0.4);
}
.legal-inner h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-inner p, .legal-inner li { font-size: 16px; line-height: 1.7; color: #45454e; }
.legal-inner p { margin: 0 0 14px; }
.legal-inner ul { margin: 0 0 14px; padding-left: 22px; }
.legal-inner a { border-bottom: 1px solid rgba(194, 152, 75, 0.6); }
.legal-updated {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: #9A7635;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(194, 152, 75, 0.4);
}

/* ---------- 404 ---------- */
.nf-section {
  background: #14203A; color: #EFE6D2;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.nf-inner { width: 100%; }
.nf-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../images/desert.svg') bottom center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.nf-inner {
  position: relative;
  max-width: 1080px; margin: 0 auto;
  padding: 84px 28px 96px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.nf-code {
  font-family: 'Bevan', serif;
  font-size: clamp(96px, 15vw, 150px);
  line-height: 0.95;
  color: #F1E9D7;
}
.nf-code .gold { color: #C2984B; }
.nf-copy h1 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.1;
  color: #F1E9D7;
  margin: 18px 0 14px;
}
.nf-copy p { font-size: 17px; line-height: 1.65; color: #cdc6b6; max-width: 460px; margin: 0 0 30px; }
.nf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nf-actions .btn-navy { background: #C2984B; color: #14203A; }
.nf-actions .btn-navy:hover { background: #D2A85B; }

/* Missing poster */
.poster {
  position: relative;
  background: #E9DEC5;
  border: 1px solid rgba(28, 42, 71, 0.2);
  padding: 26px 26px 22px;
  max-width: 320px;
  margin: 0 auto;
  transform: rotate(2deg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.poster-head {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 26px;
  color: #1C2A47;
  border-bottom: 2px solid #1C2A47;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.poster img {
  height: 230px; width: auto;
  filter: brightness(0);
  opacity: 0.85;
  display: block;
  margin: 0 auto;
}
.poster-line {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: #1C2A47;
  margin-top: 16px;
}
.poster-sub {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 14px;
  color: #4a4a52;
  margin-top: 6px;
}
@media (max-width: 860px) {
  .nf-inner { grid-template-columns: 1fr; gap: 44px; padding: 60px 20px 72px; text-align: center; }
  .nf-copy p { margin-left: auto; margin-right: auto; }
  .nf-actions { justify-content: center; }
}

/* ==================================================================
   Brand Guidelines page
   ================================================================== */
.bg-cover { background: #14203A; color: #EFE6D2; position: relative; overflow: hidden; }
.bg-cover-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 80px 40px 70px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
  min-height: 560px;
}
.bg-cover .eyebrow-row { margin-bottom: 28px; }
.bg-cover h1 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(40px, 7.5vw, 62px); line-height: 0.98;
  color: #F1E9D7;
  margin: 0 0 22px;
}
.bg-cover-sub { font-size: 18px; line-height: 1.65; color: #cdc6b6; max-width: 440px; margin: 0 0 30px; }
.bg-cover-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.bg-cover-chip {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: #EFE6D2;
  border: 1px solid rgba(194, 152, 75, 0.5);
  padding: 9px 15px;
}
.bg-back-link-wrap { margin-top: 36px; }
.bg-back-link {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  color: #DBC08A;
  border-bottom: 2px solid #C2984B;
  padding-bottom: 4px;
}
body.page-brand a.bg-back-link { color: #DBC08A; }
.bg-cover-can { display: flex; justify-content: center; }
.bg-cover-can img { height: 480px; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.4)); }

.bg-section { max-width: 1080px; margin: 0 auto; padding: 88px 40px 40px; }
.bg-section + .bg-section { padding-top: 60px; }
.bg-section.pad-80 { padding-top: 80px; }
.bg-sechead { display: flex; align-items: baseline; gap: 18px; margin-bottom: 34px; }
.bg-secnum { font-family: 'Bevan', serif; font-size: 22px; color: #C2984B; }
.bg-secrule { flex: 1; height: 1px; background: rgba(28, 42, 71, 0.2); }
.bg-sechead.on-dark .bg-secrule { background: rgba(194, 152, 75, 0.35); }
.bg-seclabel {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: #9A7635;
}
.bg-sechead.on-dark .bg-seclabel { color: #DBC08A; }

/* 01 Positioning */
.bg-h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(28px, 5vw, 40px); line-height: 1.05;
  color: #1C2A47;
  margin: 0 0 22px;
  max-width: 760px;
}
.bg-lede { font-size: 18px; line-height: 1.7; color: #45454e; max-width: 720px; margin: 0 0 44px; }
.bg-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bg-pos-card { background: #E9DEC5; padding: 28px 26px; border-top: 3px solid #C2984B; }
.bg-card-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 12px;
}
.bg-pos-card p { font-size: 15.5px; line-height: 1.6; margin: 0; color: #3a3a42; }

/* 02 Logo */
.bg-logo-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.bg-logo-panel {
  background: #E9DEC5;
  border: 1px solid rgba(28, 42, 71, 0.12);
  padding: 44px;
  display: flex; align-items: center; justify-content: center;
}
.bg-logo-panel img { max-width: 100%; mix-blend-mode: multiply; }
.bg-logo-copy h3 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: 26px; color: #1C2A47;
  margin: 0 0 14px;
}
.bg-logo-copy p { font-size: 16px; line-height: 1.68; color: #45454e; margin: 0 0 18px; }
.bg-logo-copy ul { margin: 0; padding-left: 20px; font-size: 15.5px; line-height: 1.8; color: #3a3a42; }
.bg-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.bg-dodont-card { border: 1px solid rgba(28, 42, 71, 0.14); padding: 22px; overflow: hidden; }
.bg-do-label, .bg-dont-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  margin-bottom: 14px;
}
.bg-do-label { color: #1C8A5B; }
.bg-dont-label { color: #A93226; }
.bg-do-mark { font-family: 'Bevan', serif; font-size: 22px; color: #1C2A47; text-align: center; padding: 14px 0; }
.bg-dont-mark {
  font-family: 'Bevan', serif; font-size: 22px; color: #C2984B;
  text-align: center; padding: 14px 0;
  transform: scaleX(1.4);
  letter-spacing: -2px;
}

/* 03 Color */
.bg-color { background: #14203A; color: #EFE6D2; margin-top: 60px; }
.bg-color-inner { max-width: 1080px; margin: 0 auto; padding: 80px 40px; }
.bg-color h2 { font-family: 'Bevan', serif; font-weight: 400; font-size: clamp(28px, 4.8vw, 38px); color: #F1E9D7; margin: 0 0 12px; }
.bg-color-lede { font-size: 17px; line-height: 1.65; color: #cdc6b6; max-width: 640px; margin: 0 0 40px; }
.bg-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bg-swatch-block { height: 130px; }
.bg-swatch-block.hairline { border: 1px solid rgba(194, 152, 75, 0.3); }
.bg-swatch-name { font-family: 'Bevan', serif; font-size: 17px; color: #F1E9D7; margin-top: 14px; }
.bg-swatch-spec {
  font-family: 'Oswald', sans-serif;
  letter-spacing: .1em;
  font-size: 12px;
  color: #9d9789;
  margin-top: 3px;
}

/* 04 Type */
.bg-type-rows { display: flex; flex-direction: column; gap: 20px; }
.bg-type-row {
  background: #E9DEC5;
  padding: 34px 32px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}
.bg-type-aa-bevan { font-family: 'Bevan', serif; font-size: 58px; color: #1C2A47; line-height: 1; }
.bg-type-aa-oswald { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 50px; color: #1C2A47; line-height: 1; }
.bg-type-aa-spectral { font-family: 'Spectral', serif; font-size: 54px; color: #1C2A47; line-height: 1; }
.bg-type-role {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: #9A7635;
  margin-top: 8px;
}
.bg-type-name-bevan { font-family: 'Bevan', serif; font-size: 32px; color: #1C2A47; margin-bottom: 8px; }
.bg-type-name-oswald {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 26px; color: #1C2A47; margin-bottom: 8px;
}
.bg-type-name-spectral { font-family: 'Spectral', serif; font-size: 28px; color: #1C2A47; margin-bottom: 8px; }
.bg-type-row p { font-size: 15px; line-height: 1.6; color: #45454e; margin: 0; }

/* 05 Voice */
.bg-voice-h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(28px, 4.8vw, 38px); line-height: 1.05;
  color: #1C2A47;
  margin: 0 0 30px;
  max-width: 720px;
}
.bg-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bg-say { background: #1C2A47; color: #EFE6D2; padding: 32px 30px; }
.bg-say-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #7ED9A6;
  margin-bottom: 18px;
}
.bg-say-list { display: flex; flex-direction: column; gap: 16px; }
.bg-say p { font-family: 'Spectral', serif; font-style: italic; font-size: 17px; line-height: 1.55; margin: 0; color: #F1E9D7; }
.bg-not { background: #E9DEC5; padding: 32px 30px; }
.bg-not-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #A93226;
  margin-bottom: 18px;
}
.bg-not p { font-family: 'Spectral', serif; font-size: 17px; line-height: 1.55; margin: 0; color: #6a6a72; }
.bg-traits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
.bg-trait { border-left: 3px solid #C2984B; padding: 6px 0 6px 18px; }
.bg-trait-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: #1C2A47;
  margin-bottom: 6px;
}
.bg-trait p { font-size: 14.5px; line-height: 1.55; color: #4a4a52; margin: 0; }

/* 06 Motifs */
.bg-motifs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bg-motifs-col { display: flex; flex-direction: column; gap: 18px; }
.bg-motif-card { background: #E9DEC5; padding: 34px; text-align: center; }
.bg-motif-card.slim { padding: 26px 34px; }
.bg-motif-arrow { color: #C2984B; display: flex; justify-content: center; margin-bottom: 16px; }
.bg-motif-diamonds { color: #C2984B; font-size: 12px; letter-spacing: 1.2em; margin-bottom: 12px; }
.bg-motif-mesa { display: flex; justify-content: center; margin-bottom: 8px; color: rgba(154, 118, 53, 0.85); }
.bg-motif-mesa svg { max-width: 100%; height: auto; }
.bg-motif-caption {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: #1C2A47;
}
.bg-keith-card { background: #14203A; padding: 24px; display: flex; flex-direction: column; }
.bg-keith-panel {
  background: radial-gradient(115% 90% at 50% 12%, #F6F0E1 0%, #F1E9D7 55%, #E4D6B8 100%);
  overflow: hidden;
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
}
.bg-keith-panel img { width: 76%; display: block; }
.bg-keith-copy { padding-top: 18px; }
.bg-keith-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #DBC08A;
  margin-bottom: 8px;
}
.bg-keith-copy p { font-size: 14.5px; line-height: 1.6; color: #cdc6b6; margin: 0; }

/* Brand footer */
.bg-footer { background: #14203A; color: #9d9789; margin-top: 70px; }
.bg-footer-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 44px 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.bg-footer-wordmark { font-family: 'Bevan', serif; font-size: 20px; color: #F1E9D7; }
.bg-footer-legal {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
}

/* ==================================================================
   Mobile — landing + shared (≤720px)
   ================================================================== */
@media (max-width: 720px) {
  /* Nav: slim sticky bar — wordmark + hamburger; links live in the overlay */
  .nav-inner { padding: 13px 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  [id] { scroll-margin-top: 64px; }

  /* Eyebrows: smaller arrows, tighter tracking; centered rows drop the trailing arrow */
  .eyebrow-row svg { width: 44px; flex-shrink: 0; }
  .eyebrow { letter-spacing: .22em; }
  .eyebrow-row.centered .arrow-flip { display: none; }

  /* Hero */
  .hero-inner { padding: 48px 20px 28px; gap: 28px; }
  .hero-sub { font-size: 16.5px; }
  .hero-visual { min-height: 0; }
  .hero-can { height: 460px; max-height: 60vh; }
  .hero-can-wrap { margin-bottom: 18px; }
  .hero-glow { width: 300px; height: 300px; top: 30px; }

  /* Tighter section rhythm */
  .story-inner { padding: 64px 20px; gap: 44px; }
  .tequila-inner { padding: 64px 20px; }
  .maestro-inner { padding: 64px 20px; }
  .maestro-body { gap: 32px; }
  .notes-inner { padding: 64px 20px; }
  .quote-inner { padding: 60px 20px; }
  .howto-inner { padding: 64px 20px 60px; }
  .howto-grid { gap: 28px; }
  .faq-inner { padding: 64px 20px; }
  .pairings-inner, .lineup-inner { padding: 60px 20px; }
  .lineup-grid { gap: 28px; }
  .lineup-item img { height: 230px; }
  .dossier { padding: 22px 20px 18px; }
  .dossier-head { flex-wrap: wrap; }
  .join-inner { padding: 68px 20px; }
  .footer-inner { padding: 44px 20px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .footer-cols { gap: 36px; }

  /* Age gate */
  .gate-card { padding: 40px 28px; }
  .gate-actions { flex-wrap: wrap; }
}

/* ---------- Quiz / personality assessment (/quiz/) ---------- */
.qz-word { color: #C2984B; }
.qz-classify {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 12px;
  margin: 26px auto 0;
  padding-top: 22px;
  max-width: 560px;
  border-top: 1px solid rgba(194, 152, 75, 0.4);
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  color: #9A7635;
}
.qz-classify .d { color: #C2984B; font-size: 7px; letter-spacing: 0; }

.qz-section { background: #E9DEC5; }
.qz-inner { max-width: 720px; margin: 0 auto; padding: 84px 28px; }

.qz-machine {
  background: #F5EFE1;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 34px 36px 32px;
  box-shadow: 0 1px 2px rgba(28, 42, 71, 0.08), 0 10px 28px rgba(28, 42, 71, 0.09);
}
.qz-noscript {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 16px; line-height: 1.7;
  color: #45454e;
  margin: 0;
}
.qz-live { display: none; }
html.js .qz-live { display: block; }

/* Progress */
.qz-progress { margin-bottom: 30px; }
.qz-progress-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.qz-progress-count, .qz-progress-pct {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: #9A7635;
}
.qz-progress-track {
  display: block;
  height: 3px;
  background: rgba(194, 152, 75, 0.22);
  position: relative;
}
.qz-progress-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: #C2984B;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.qz-machine.qz-at-1 .qz-progress-fill { width: 20%; }
.qz-machine.qz-at-2 .qz-progress-fill { width: 40%; }
.qz-machine.qz-at-3 .qz-progress-fill { width: 60%; }
.qz-machine.qz-at-4 .qz-progress-fill { width: 80%; }
.qz-machine.qz-at-5 .qz-progress-fill,
.qz-machine.qz-done .qz-progress-fill { width: 100%; }

/* Question stage */
.qz-stage { animation: dg-rise .4s ease both; }
.qz-q-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 14px;
}
.qz-q {
  font-family: 'Bevan', serif;
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.18;
  color: #1C2A47;
  margin: 0 0 26px;
}
.qz-q:focus { outline: none; }
.qz-q:focus-visible { outline: 2px solid #C2984B; outline-offset: 4px; }

.qz-answers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qz-answer {
  display: flex; align-items: baseline; gap: 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(194, 152, 75, 0.5);
  padding: 16px 20px;
  cursor: pointer;
  font-family: 'Spectral', serif;
  font-size: 17px; line-height: 1.5;
  color: #3a3a42;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.qz-answer:hover { background: rgba(194, 152, 75, 0.09); border-color: #C2984B; }
.qz-answer:active { transform: translateY(1px); }
.qz-answer:focus-visible { outline: 2px solid #C2984B; outline-offset: 2px; }
.qz-answer .qz-mark {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  color: #C2984B;
  flex: 0 0 auto;
}

/* Nav */
.qz-nav { margin-top: 22px; }
.qz-back {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: #9A7635;
}
.qz-back:hover { color: #C2984B; }
.qz-back:focus-visible { outline: 2px solid #C2984B; outline-offset: 3px; }

/* Result dossier */
.qz-result { animation: dg-rise .5s ease both; }
.qz-result-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(28, 42, 71, 0.15);
  padding-bottom: 12px;
  margin-bottom: 22px;
}
.qz-result-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #1C2A47;
}
.qz-result-stampword {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10.5px;
  color: #9A7635;
  border: 1px solid rgba(194, 152, 75, 0.6);
  padding: 4px 8px;
  transform: rotate(-2deg);
  white-space: nowrap;
}
.qz-verdict-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 11px;
  color: #9A7635;
  margin-bottom: 12px;
}
.qz-verdict {
  font-family: 'Bevan', serif;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  color: #1C2A47;
  margin: 0 0 20px;
}
.qz-verdict:focus { outline: none; }
.qz-verdict:focus-visible { outline: 2px solid #C2984B; outline-offset: 4px; }
.qz-profile {
  font-family: 'Spectral', serif;
  font-size: 17.5px; line-height: 1.75;
  color: #45454e;
  margin: 0 0 22px;
}
.qz-compat {
  border-top: 1px dashed rgba(28, 42, 71, 0.18);
  padding-top: 18px;
  margin: 0 0 26px;
  font-family: 'Spectral', serif;
  font-style: italic;
  font-size: 16px; line-height: 1.6;
  color: #3a3a42;
}
.qz-compat b {
  font-style: normal;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .04em;
  color: #1C2A47;
}
.qz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.qz-retake {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: #9A7635;
}
.qz-retake:hover { color: #C2984B; }
.qz-retake:focus-visible { outline: 2px solid #C2984B; outline-offset: 3px; }

/* Join stays hidden until a result is shown (present in DOM for no-JS + SEO) */
html.js .qz-join { display: none; }
html.js .qz-join.qz-join--on { display: block; }

@media (max-width: 620px) {
  .qz-machine { padding: 26px 22px 24px; }
  .qz-inner { padding: 60px 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy, .hero-can-wrap, .keith-img-wrap, .marquee-track, .gate, .gate-card, .join-confirm.visible, .clearance-card { animation: none; }
  /* Kill the remaining one-shot spins/fades/shakes (higher-specificity overrides). */
  .fact-refresh.spun, .menu-fact-refresh.spun,
  .fact-text.fact-swap,
  .keith-img-wrap.groove { animation: none !important; }
  .redact.never:hover::after, .redact.never.refuse::after { animation: none !important; }
  .hero-bubbles { display: none; }
  .faq-a { transition: none; }
  .menu-overlay.open, .menu-overlay.open .menu-link { animation: none; opacity: 1; }
  .smoke-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .confirm-seal svg path { stroke-dashoffset: 0 !important; animation: none !important; }
  .pairing, .pairing:hover { transition: none; transform: none; }
  html.js .tl-row .tl-label { opacity: 1; animation: none; }
  /* Rail shows fully; no draw-in scale */
  html.js .tl-row::before,
  html.js .tl-row.in::before { transform: translateX(-50%); transition: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  /* Keep exhibits tilted, no straighten-on-hover motion */
  .exhibit { transition: none; }
  .exhibit.tilt-l:hover { transform: rotate(-1deg); }
  .exhibit.tilt-r:hover { transform: rotate(0.9deg); }
  .fact-cell { transition: none; }
  .fact-cell:hover { transform: none; }
  .process-card, .note-card, .link-underline .arr { transition: none; }
  .process-card:hover, .note-card:hover { transform: none; }
  /* Quiz: no question-transition / result-reveal motion */
  .qz-stage, .qz-result { animation: none; }
  .qz-progress-fill { transition: none; }
  .qz-answer, .qz-answer:active { transition: none; transform: none; }
  /* Item 5: kill the button press nudge (instant colour states are kept). */
  .btn-navy:active { transform: none; }
}

/* Brand page: stack fixed grids on narrow screens */
@media (max-width: 860px) {
  .bg-cover-inner,
  .bg-grid3,
  .bg-logo-grid,
  .bg-dodont,
  .bg-swatches,
  .bg-voice-grid,
  .bg-traits,
  .bg-motifs-grid { grid-template-columns: 1fr; }
  .bg-swatches { grid-template-columns: repeat(2, 1fr); }
  .bg-type-row { grid-template-columns: 1fr; }

  .bg-cover-inner { padding: 56px 24px 48px; min-height: 0; gap: 36px; }
  .bg-cover-can img { height: 380px; }
  .bg-section { padding: 64px 24px 32px; }
  .bg-section + .bg-section, .bg-section.pad-80 { padding-top: 56px; }
  .bg-color { margin-top: 48px; }
  .bg-color-inner { padding: 64px 24px; }
  .bg-type-row { padding: 28px 24px; }
  .bg-logo-panel { padding: 30px; }
  .bg-keith-card { min-height: 420px; }
  .bg-do-mark, .bg-dont-mark { font-size: 16px; }
  .bg-footer { margin-top: 56px; }
  .bg-footer-inner { padding: 36px 24px; }
}

/* ============================================================
   Mezcal, explained (/mezcal/) — education page.
   Reuses .page-hero, .notes-grid/.note-card, .dossier, .howto,
   .faq, .tl-label + the dg-stamp / dg-draw keyframes.
   ============================================================ */

/* Hero — same masked-desert treatment as the story-page case file */
.page-hero.mezcal-hero .page-hero-inner { position: relative; z-index: 1; padding: 100px 28px 92px; }
.page-hero.mezcal-hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  -webkit-mask: url('../images/desert.svg') bottom center / contain no-repeat;
  mask: url('../images/desert.svg') bottom center / contain no-repeat;
  background: #DBC08A;
  opacity: 0.06;
  pointer-events: none;
}

/* Shared scoped section shell + centered head */
.mz-inner { max-width: 1080px; margin: 0 auto; padding: 88px 28px; }
.mz-head { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.mz-head .eyebrow-row { margin-bottom: 18px; }
.mz-head h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06;
  color: #1C2A47;
  margin: 0 0 16px;
}
.mz-head p { font-family: 'Spectral', serif; font-size: 17px; line-height: 1.7; color: #45454e; margin: 0; }

/* What mezcal is — sand, cream cards */
.mz-what { background: #E9DEC5; }

/* Mezcal vs tequila — cream, side-by-side case files */
.mz-vs { background: #F1E9D7; }
.mz-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 26px;
  align-items: start;
}
.mz-compare .dossier { margin: 0; max-width: none; }
.mz-compare .dossier-lines li strong {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: #1C2A47;
  margin-right: 6px;
}
.mz-verdict {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 22px 26px;
  text-align: center;
  font-family: 'Spectral', serif;
  font-size: 18px; line-height: 1.6;
  color: #3a3a42;
  border-top: 3px solid #C2984B;
  border-bottom: 1px solid rgba(194, 152, 75, 0.5);
  background: #E9DEC5;
}

/* A brief history — sand, left dotted rail with diamond nodes */
.mz-history { background: #E9DEC5; }
.mz-rail { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 720px; }
.mz-rail::before {
  content: '';
  position: absolute; left: 6px; top: 10px; bottom: 10px;
  border-left: 2px dotted rgba(194, 152, 75, 0.5);
}
.mz-mile { position: relative; padding: 0 0 40px 42px; }
.mz-mile:last-child { padding-bottom: 4px; }
.mz-node {
  position: absolute; left: 1px; top: 5px;
  width: 12px; height: 12px;
  background: #C2984B;
  transform: rotate(45deg);
}
.mz-mile .tl-label { margin-bottom: 10px; }
.mz-mile p { font-family: 'Spectral', serif; font-size: 17px; line-height: 1.75; color: #45454e; margin: 0; }
html.js .mz-mile .tl-label { opacity: 0; transform-origin: left center; }
html.js .mz-mile.in .tl-label { animation: dg-stamp .4s cubic-bezier(.2, .9, .3, 1.1) .15s both; }

/* The smoke question — midnight */
.mz-smoke { background: #14203A; color: #EFE6D2; }
.mz-smoke-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.mz-smoke-head .eyebrow-row { margin-bottom: 18px; }
.mz-smoke-head h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08;
  color: #F1E9D7;
  margin: 0;
}
html.js .mz-smoke-head.in .smoke-path { animation: dg-draw 2.2s ease forwards .3s; }
.mz-smoke-body { max-width: 720px; margin: 0 auto; }
.mz-smoke-body p {
  font-family: 'Spectral', serif;
  font-size: 17.5px; line-height: 1.75;
  color: #cdc6b6;
  margin: 0 0 20px;
}
.mz-smoke-pull {
  margin-top: 8px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(194, 152, 75, 0.35);
  color: #DBC08A !important;
  font-style: italic;
}

/* How to taste it — cream override of the sand .howto */
.howto.mz-taste { background: #F1E9D7; }

/* Keep going — cream closing, cross-links + newsletter CTA */
.mz-close { background: #F1E9D7; }
.mz-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
}
.mz-link {
  display: block;
  text-decoration: none;
  background: #E9DEC5;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 26px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mz-link:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 42, 71, 0.10); }
.mz-link-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: #1C2A47;
  margin-bottom: 10px;
}
.mz-link-desc {
  display: block;
  font-family: 'Spectral', serif;
  font-size: 15.5px; line-height: 1.6;
  color: #4a4a52;
}
.mz-link .arr { display: inline-block; color: #9A7635; transition: transform .25s ease; }
.mz-link:hover .arr { transform: translateX(5px); }
.mz-cta { text-align: center; margin-top: 40px; }

@media (max-width: 720px) {
  .page-hero.mezcal-hero .page-hero-inner { padding: 60px 20px 52px; }
  .mz-inner { padding: 60px 20px; }
  .mz-head { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .mz-mile .tl-label { opacity: 1; animation: none; }
  html.js .mz-smoke-head.in .smoke-path { animation: none; }
  .mz-link, .mz-link:hover { transition: none; transform: none; }
  .mz-link .arr { transition: none; }
}

/* ============================================================
   Press kit (/press/) — media file.
   Reuses .page-hero (on-cream / has-desert), .hero-classify,
   .eyebrow-row, .reveal. Section rhythm: cream / sand / midnight.
   ============================================================ */

/* Classification strip works on the cream hero too */
.page-hero.on-cream .hero-classify {
  color: #9A7635;
  border-top-color: rgba(154, 118, 53, 0.35);
}
.page-hero.on-cream .hero-classify .d { color: #C2984B; }

/* Shared scoped section shell + centered head */
.press-section { background: #F1E9D7; }
.press-inner { max-width: 1080px; margin: 0 auto; padding: 88px 28px; }
.press-inner-narrow { max-width: 760px; }
.press-head { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.press-head .eyebrow-row { margin-bottom: 18px; }
.press-head h2 {
  font-family: 'Bevan', serif; font-weight: 400;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.06;
  color: #1C2A47;
  margin: 0 0 16px;
}
.press-head p {
  font-family: 'Spectral', serif;
  font-size: 17px; line-height: 1.7;
  color: #45454e;
  margin: 0;
}
.press-head.on-dark h2 { color: #F1E9D7; }
.press-head.on-dark p { color: #cdc6b6; }

/* The facts — sand, spec sheet */
.press-facts { background: #E9DEC5; }
.press-spec {
  max-width: 760px; margin: 0 auto;
  background: #F1E9D7;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 8px 32px;
}
.press-spec-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(28, 42, 71, 0.14);
}
.press-spec-row:last-child { border-bottom: none; }
.press-spec dt {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12.5px;
  color: #1C2A47;
  padding-top: 2px;
}
.press-spec dd {
  margin: 0;
  font-family: 'Spectral', serif;
  font-size: 17px; line-height: 1.6;
  color: #3a3a42;
}

/* Boilerplate — cream, copy-friendly card */
.press-boiler-section { background: #F1E9D7; }
.press-boiler-card {
  background: #E9DEC5;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 24px 32px 30px;
}
.press-boiler-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(28, 42, 71, 0.15);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.press-boiler-label {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #1C2A47;
}
.press-copy {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
  color: #1C2A47;
  background: transparent;
  border: 1px solid #C2984B;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.press-copy:hover { background: #1C2A47; color: #F1E9D7; }
.press-copy.is-copied { background: #C2984B; color: #14203A; border-color: #C2984B; }
.press-copy-icon { display: inline-flex; }
.press-boiler-text {
  font-family: 'Spectral', serif;
  font-size: 18px; line-height: 1.72;
  color: #3a3a42;
  margin: 0;
}

/* Keith, for the record — midnight */
.press-keith { background: #14203A; }
.press-keith-body { max-width: 720px; margin: 0 auto; text-align: center; }
.press-keith-body p {
  font-family: 'Spectral', serif;
  font-size: 20px; line-height: 1.7;
  color: #EFE6D2;
  margin: 0;
}
.press-keith-note {
  margin-top: 22px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(194, 152, 75, 0.35);
  font-size: 16.5px !important;
  color: #cdc6b6 !important;
}

/* Assets — cream, download grid */
.press-assets { background: #F1E9D7; }
.press-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  max-width: 960px;
  margin: 0 auto;
}
.press-asset {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: #E9DEC5;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 24px 26px 22px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.press-asset:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28, 42, 71, 0.10); }
.press-asset-name {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 14px;
  color: #1C2A47;
  margin-bottom: 10px;
}
.press-asset-desc {
  font-family: 'Spectral', serif;
  font-size: 15.5px; line-height: 1.55;
  color: #4a4a52;
  margin-bottom: 18px;
}
.press-asset-meta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
  color: #9A7635;
}
.press-asset-meta::before {
  content: '↓';
  color: #C2984B;
  font-size: 13px;
  transition: transform .25s ease;
}
.press-asset:hover .press-asset-meta::before { transform: translateY(3px); }
.press-asset-zip {
  background: #1C2A47;
  border-color: #1C2A47;
  border-top-color: #C2984B;
}
.press-asset-zip .press-asset-name { color: #F1E9D7; }
.press-asset-zip .press-asset-desc { color: #cdc6b6; }
.press-asset-zip .press-asset-meta { color: #DBC08A; }
.press-asset-fine {
  max-width: 620px; margin: 28px auto 0;
  text-align: center;
  font-family: 'Spectral', serif; font-style: italic;
  font-size: 14.5px; line-height: 1.6;
  color: #6f6a5e;
}

/* Press contact — sand */
.press-contact { background: #E9DEC5; }
.press-contact-card {
  max-width: 620px; margin: 0 auto;
  text-align: center;
  background: #F1E9D7;
  border: 1px solid rgba(194, 152, 75, 0.5);
  border-top: 3px solid #C2984B;
  padding: 32px 34px;
}
.press-contact-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  color: #9A7635;
  margin-bottom: 14px;
}
.press-contact-email {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: 'Bevan', serif;
  font-size: clamp(20px, 3vw, 28px);
  color: #1C2A47;
  text-decoration: none;
  border-bottom: 2px solid rgba(194, 152, 75, 0.6);
  padding-bottom: 4px;
  transition: color .25s ease, border-color .25s ease;
}
.press-contact-email:hover { color: #9A7635; border-color: #C2984B; }
.press-contact-note {
  margin: 22px 0 0;
  font-family: 'Spectral', serif;
  font-size: 16px; line-height: 1.65;
  color: #45454e;
}

@media (max-width: 720px) {
  .press-inner { padding: 60px 20px; }
  .press-head { margin-bottom: 34px; }
  .press-spec { padding: 4px 22px; }
  .press-spec-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .press-boiler-card { padding: 20px 22px 24px; }
  .press-boiler-text { font-size: 17px; }
  .press-keith-body p { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .press-asset, .press-asset:hover { transition: none; transform: none; }
  .press-asset:hover .press-asset-meta::before { transform: none; }
  .press-copy { transition: none; }
}

/* ============================================================
   Mobile swipe carousels — .dg-swipe
   Stacked tile groups become horizontal scroll-snap rows at
   <=720px. Desktop (>720px) carries NO .dg-swipe layout rules,
   so every grid renders exactly as before. The position dots
   are injected by js/main.js and stay hidden on desktop.
   ============================================================ */
.dg-swipe-dots { display: none; }

@media (max-width: 720px) {
  .dg-swipe {
    display: flex;
    flex-wrap: nowrap;
    /* never center an overflowing scroller — content left of scroll 0
       becomes unreachable (bit us on .lineup-grid's first can) */
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 6px;
    /* the group already sits inside a 20px page gutter, so the
       scroller stays within it — no negative margins, no bleed */
    scroll-padding-left: 0;
    scroll-padding-right: 0;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge */
  }
  .dg-swipe::-webkit-scrollbar { width: 0; height: 0; display: none; }

  .dg-swipe > * {
    flex: 0 0 auto;
    width: min(78vw, 320px);      /* a sliver of the next card peeks */
    scroll-snap-align: center;
    margin-bottom: 0;
  }

  /* process-grid carries a desktop margin-bottom; drop it so the
     dots sit directly beneath the carousel on mobile */
  .process-grid.dg-swipe { margin-bottom: 0; }

  /* Lineup is NOT a carousel — three narrow cans fit one centered row.
     (These override the earlier 720px rules: gap 28px / img 230px.)
     flex:1 1 0 + min-width:0 guarantees the trio never wraps; labels
     wrap inside their column instead. */
  .lineup-grid { gap: 14px; }
  .lineup-item { flex: 1 1 0; min-width: 0; gap: 12px; }
  .lineup-item img { height: 160px; }
  .lineup-name {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-align: center;
    line-height: 1.5;
  }
  .lineup-note { font-size: 12.5px; margin-top: -4px; }

  /* Field reports live on navy — full-width scroller, keep left aligned */
  .reports-grid.dg-swipe { margin-top: 34px; max-width: none; }

  /* Swipe position dots — brand diamonds, sharp corners, no new colors */
  .dg-swipe-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 18px 0 34px;
  }
  .dg-swipe-dots:last-child { margin-bottom: 0; }
  .dg-dot {
    width: 7px; height: 7px;
    background: transparent;
    border: 1px solid rgba(194, 152, 75, 0.55);
    transform: rotate(45deg);     /* ◆ echo */
    flex: 0 0 auto;
  }
  .dg-dot.is-current { background: #C2984B; border-color: #C2984B; }
}