/* ============================================================
   SITE-WIDE CHROME 2026 — universal scope
   Loaded by every page after reviews.css + glow-system.css.
   Overrides legacy masthead, nav, footer chrome.
   Cache-bust: bump ?v= in the link tag site-wide.
   ============================================================ */

html, body { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* KILL JS-INJECTED CRUFT site-wide */
.al-substrip,
.al-mega,
.al-mega-backdrop,
.al-search-btn { display: none !important; }

/* TRUST BAR — 26px */
.utility-bar {
  background: #1A1613 !important;
  color: rgba(255,255,255,0.78) !important;
  padding: 5px 0 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  border-bottom: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.utility-bar .wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
.utility-bar .util-trust { color: rgba(255,255,255,0.88) !important; }
.utility-bar .util-right { display: flex !important; gap: 1.25rem !important; }
.utility-bar a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.utility-bar a:hover {
  color: #E5C9A9 !important;
  border-bottom-color: #E5C9A9 !important;
}
@media (max-width: 520px) {
  .utility-bar { font-size: 11px !important; }
  .utility-bar .util-right { gap: 0.85rem !important; }
}

/* MASTHEAD — dark, 76px, tiny logo (inline-styled in HTML wins specificity) */
.masthead {
  background: #0E0B09 !important;
  color: #fff !important;
  padding: 12px 0 !important;
  border-bottom: 0 !important;
  text-align: center !important;
  min-height: 0 !important;
}
.masthead .wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
/* FLEX + absolute positioning so the logo is ALWAYS dead-centred,
   regardless of whether burger/search/legacy spans exist.
   The 1fr-grid approach kept letting hidden children push the logo. */
.masthead .masthead-grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  min-height: 52px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  gap: 0 !important;
}

/* Burger pinned left, search pinned right — out of logo flow */
.masthead .masthead-grid > .masthead-burger {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.masthead .masthead-grid > .masthead-search-btn {
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Logo always centred via flex parent — works for all pages */
.masthead .masthead-grid > a,
.masthead .masthead-grid > .brand-lockup {
  margin: 0 auto !important;
}

/* Legacy: hide vol/issue, dek, and wordmark-rule everywhere */
.masthead .vol,
.masthead .dek,
.masthead .wordmark-rule { display: none !important; }

/* Legacy wordmark span: if the page hasn't been migrated to inline-style logo,
   shrink it down so the page still looks reasonable. */
.masthead .brand-lockup .wordmark {
  font-family: 'Playfair Display', 'Bodoni Moda', Didot, Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.4em !important;
}
.masthead .brand-lockup .wordmark .the {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 9px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.55) !important;
  align-self: center !important;
  margin-bottom: 0 !important;
}
.masthead .brand-lockup .wordmark .glow {
  font-style: normal !important;
  font-weight: 500 !important;
  color: #fff !important;
}
.masthead .brand-lockup .wordmark .dot {
  color: #E5C9A9 !important;
}
.masthead .brand-lockup {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-self: center !important;
  gap: 0 !important;
}

/* Burger + search buttons */
.masthead-burger,
.masthead-search-btn {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0.35rem !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.masthead-burger span {
  display: block !important;
  width: 20px !important; height: 2px !important;
  background: #fff !important;
  margin: 4px auto !important;
  border-radius: 1px !important;
}
@media (min-width: 760px) {
  .masthead-burger { display: none !important; }
}

/* PRIMARY NAV — 38px tall, dark, IDENTICAL to homepage on every page.
   Uses extra-specific selectors to defeat legacy reviews.css rules at
   lines 3477+3498 that injected 1.25rem 1.1rem padding + 56px min-height
   on each <a>, which made the nav balloon way wider than the homepage. */
.review-nav,
body .review-nav {
  background: #0E0B09 !important;
  color: #fff !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 0 !important;
  position: static !important;
  min-height: 0 !important;
}
.review-nav .wrap,
body .review-nav .wrap {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}
.review-nav .nav-links,
body .review-nav .nav-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.4rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 0 1rem !important;
  margin: 0 auto !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  min-height: 0 !important;
}
.review-nav .nav-links::-webkit-scrollbar,
body .review-nav .nav-links::-webkit-scrollbar { display: none !important; }
.review-nav .nav-links a,
body .review-nav .nav-links a {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  padding: 0.2rem 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  display: inline-block !important;
}
.review-nav .nav-links a:hover,
body .review-nav .nav-links a:hover { color: #E5C9A9 !important; }
.review-nav .nav-links a[aria-current="page"],
body .review-nav .nav-links a[aria-current="page"] { color: #E5C9A9 !important; }
.review-nav .nav-links a:first-child,
body .review-nav .nav-links a:first-child { color: rgba(255,255,255,0.85) !important; }
/* Kill the legacy "current page" underline from reviews.css */
.review-nav .nav-links a::after,
.review-nav .nav-links a::before,
body .review-nav .nav-links a::after,
body .review-nav .nav-links a::before { content: none !important; display: none !important; }

/* Kill any pseudo-element separators (dots, slashes, etc.) that legacy
   CSS may inject between nav items */
.review-nav a::before,
.review-nav a::after,
.review-nav .nav-links a::before,
.review-nav .nav-links a::after,
.review-nav .nav-links > *::before,
.review-nav .nav-links > *::after {
  content: none !important;
  display: none !important;
}

/* SECONDARY EDITORIAL NAV — 38px, dark variant */
.glow-subnav {
  background: #221A16 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(229,201,169,0.12) !important;
  padding: 8px 0 !important;
}
.glow-subnav .wrap { max-width: 1280px !important; margin: 0 auto !important; padding: 0 1rem !important; }
.glow-subnav__links {
  display: flex !important;
  justify-content: center !important;
  gap: 1.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.glow-subnav__links::-webkit-scrollbar { display: none !important; }
.glow-subnav__links a {
  color: rgba(229,201,169,0.78) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  padding: 0.15rem 0 !important;
  border-bottom: 1px solid transparent !important;
  text-decoration: none !important;
}
.glow-subnav__links a:hover {
  color: #fff !important;
  border-bottom-color: #E5C9A9 !important;
}
.glow-subnav__lead {
  color: #E5C9A9 !important;
  font-weight: 500 !important;
}

@media (max-width: 760px) {
  .review-nav .nav-links,
  .glow-subnav__links { justify-content: flex-start !important; padding: 0 1rem !important; }
}

/* HIDE LEGACY top-chrome / disclosure-bar if a page still has them
   (the migration script removes them, this is a safety net) */
.top-chrome,
.disclosure-bar { display: none !important; }

/* ====================================================================
   MOBILE MENU (2026) — single burger inside masthead; off-canvas drawer
   ==================================================================== */

/* Burger button visible on mobile, hidden above 760px (matches static rule
   above for .masthead-burger). Force a large hit target. */
.masthead-burger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  z-index: 2 !important;
}
@media (min-width: 760px) {
  .masthead-burger { display: none !important; }
}

/* KILL the legacy floating .gl-burger — we use the static masthead-burger
   now. Any orphan rendering of .gl-burger from old CSS must be hidden. */
.gl-burger {
  display: none !important;
}

/* ============================================================
   ELITE DRAWER — full-bleed editorial off-canvas (2026)
   Dark canvas. Canela Light nav. Hairline cream dividers.
   Big tap targets. Magazine-quality typography.
   ============================================================ */

.gl-drawer.gl-drawer-2026 {
  background: #0E0B09 !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: -24px 0 60px rgba(0,0,0,0.6) !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sticky branded head — bigger logo, finer close */
.gl-drawer.gl-drawer-2026 .gl-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(229,201,169,0.12) !important;
  background: #0E0B09 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-close {
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
  border: 0 !important;
  width: 44px !important;
  height: 44px !important;
  margin-right: -10px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 200ms ease !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-close svg { width: 22px !important; height: 22px !important; }
.gl-drawer.gl-drawer-2026 .gl-drawer-close:hover { color: #E5C9A9 !important; }

/* Section eyebrow — small caps + hairline rule, used in nav + utility */
.gl-drawer.gl-drawer-2026 .gl-drawer-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: rgba(229,201,169,0.78) !important;
  margin: 26px 24px 16px !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-eyebrow-line {
  display: block !important;
  width: 24px !important;
  height: 1px !important;
  background: rgba(229,201,169,0.45) !important;
}

/* Primary nav — Canela Light, big serif editorial links */
.gl-drawer.gl-drawer-2026 .gl-drawer-primary {
  padding: 0 0 8px !important;
  background: #0E0B09 !important;
  border: 0 !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  min-height: 60px !important;
  font-family: var(--font-display, 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(229,201,169,0.10) !important;
  background: transparent !important;
  transition: color 220ms ease, padding-left 280ms cubic-bezier(.2,.6,.2,1) !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:first-of-type { border-top: 1px solid rgba(229,201,169,0.10) !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link:last-child { border-bottom: 0 !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link:hover,
.gl-drawer.gl-drawer-2026 .gl-flat-link:focus-visible {
  color: #E5C9A9 !important;
  padding-left: 30px !important;
  outline: none !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:hover .arrow,
.gl-drawer.gl-drawer-2026 .gl-flat-link:focus-visible .arrow {
  color: #E5C9A9 !important;
  opacity: 1 !important;
  transform: translateX(4px) !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link:active { background: rgba(255,255,255,0.04) !important; }
.gl-drawer.gl-drawer-2026 .gl-flat-link[aria-current="page"] {
  color: #E5C9A9 !important;
  font-style: italic !important;
}
.gl-drawer.gl-drawer-2026 .gl-flat-link .arrow {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 300 !important;
  color: rgba(255,255,255,0.35) !important;
  opacity: 0.7 !important;
  font-style: normal !important;
  transition: color 220ms ease, transform 220ms ease, opacity 220ms ease !important;
}

/* Utility / standard section — at the bottom, calm */
.gl-drawer.gl-drawer-2026 .gl-drawer-utility {
  margin-top: auto !important;
  padding: 0 24px 28px !important;
  background: #0E0B09 !important;
  border-top: 1px solid rgba(229,201,169,0.10) !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility .gl-drawer-eyebrow { margin: 22px 0 14px !important; }
.gl-drawer.gl-drawer-2026 .gl-drawer-utility .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 18px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a {
  color: rgba(255,255,255,0.78) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px !important;
  width: max-content !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a:hover,
.gl-drawer.gl-drawer-2026 .gl-drawer-utility a:active {
  color: #E5C9A9 !important;
  border-bottom-color: #E5C9A9 !important;
}

/* Trust line — quiet authority footer */
.gl-drawer.gl-drawer-2026 .gl-drawer-trust {
  font-family: var(--font-display, 'Canela', 'Cormorant Garamond', 'Playfair Display', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 22px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(229,201,169,0.08) !important;
  max-width: 28ch !important;
}

/* Backdrop a touch darker over the new dark chrome */
.gl-drawer-open .gl-backdrop { background: rgba(0,0,0,0.6) !important; }

/* Lock body scroll while drawer open (iOS-safe) */
body.gl-drawer-open { position: fixed !important; width: 100% !important; overflow: hidden !important; }

/* ====================================================================
   MOBILE OVERRIDES (≤760px) — brutal stripping. Less is more.
   ==================================================================== */

@media (max-width: 760px) {

  /* 1. UTILITY BAR — kill entirely on mobile. The trust message is real
        estate noise on a small screen. Repeat it inside the drawer footer
        instead if needed. */
  .utility-bar { display: none !important; }

  /* 2. MASTHEAD — only burger + logo. No search icon (search is a desktop
        nicety; on mobile users tap into the category they want). */
  .masthead { padding: 10px 0 !important; }
  .masthead .masthead-grid { min-height: 48px !important; padding: 0 0.5rem !important; }
  .masthead-burger { left: 0.5rem !important; }
  .masthead-search-btn { display: none !important; }

  /* 3. KILL desktop nav rows on mobile — the burger drawer IS the nav.
        Two scrollable horizontal rows of pill-text on mobile is the worst
        of both worlds. Hide them. */
  .review-nav,
  .glow-subnav { display: none !important; }
}

/* ====================================================================
   DRAWER MOBILE-SPECIFIC POLISH — clean list, big tap targets
   ==================================================================== */

@media (max-width: 760px) {
  .gl-drawer.gl-drawer-2026 { max-width: 88vw !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-head {
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .gl-drawer.gl-drawer-2026 .gl-flat-link {
    padding: 18px 20px !important;
    min-height: 60px !important;
    font-size: 1.25rem !important;
  }
  .gl-drawer.gl-drawer-2026 .gl-drawer-primary { padding: 4px 0 8px !important; }
  /* On mobile, hide the editorial section in the drawer — the categories
     are the priority. Less to scroll, faster to a destination. */
  .gl-drawer.gl-drawer-2026 .gl-drawer-section { display: none !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-utility { padding: 18px 20px !important; }
  .gl-drawer.gl-drawer-2026 .gl-drawer-utility .row { gap: 8px 16px !important; }
}