/* ---- Site_Header_Injection.html line 395 ---- */
@keyframes black-lodge-glow {
    0%   { color: #ff0000; text-shadow: 0 0 8px #ff0000, 0 0 20px #ff0000, 0 0 40px #cc0000; }
    50%  { color: #ffffff; text-shadow: 0 0 8px #ffffff, 0 0 20px #ffffff, 0 0 40px #ffcccc; }
    100% { color: #ff0000; text-shadow: 0 0 8px #ff0000, 0 0 20px #ff0000, 0 0 40px #cc0000; }
  }
  .black-lodge-active {
    animation: black-lodge-glow 2s ease-in-out infinite !important;
  }

/* ---- Site_Header_Injection.html line 458 ---- */
/* Barlow Condensed only -- Squarespace's site-level typography
   auto-loads Poppins for us (weights 300-700 + italic variants),
   so we DON'T need to re-import it here. Importing Poppins again
   from googleapis.com would duplicate Squarespace's own load and
   cost an extra CSS round-trip (DNS + TLS + parse) even though
   browser dedup catches the woff2 files themselves. Barlow
   Condensed isn't part of Squarespace's load, so this @import
   is the only place it comes from -- if you remove this line,
   the dh-drawer-row uppercase nav, the dh-mega-item-eyebrow
   labels, the carousel section headers, and a handful of other
   typography elements all fall back to Poppins. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&display=swap');

/* -- Hide Squarespace's native header & mobile nav ----------
   IMPORTANT: these selectors must NOT match our .dumb-header
   or any ancestor element that wraps the code injection block.
   Use child combinators and :not() to stay safe.
   --------------------------------------------------------- */
/* Native SQS header elements */
#siteWrapper > #header,
#header > .header,
.sqs-header-background,
.header-announcement-bar-wrapper,
.sqs-announcement-bar,
/* SQS 7.1 mobile overlay (the burger menu that slides in) */
.mobile-overlay-nav,
.mobile-overlay-folder,
.mobile-overlay-open-btn,
.mobile-overlay-close-btn,
.burger-inner,
/* SQS top bar / announcement bar */
.top-bar:not(#dumbHeader):not(.dumb-header) {
  display: none !important;
}

/* ========== Root tokens ========== */
/* Defined at :root so sibling elements (the mobile drawer, header spacer)
   can access them too -- CSS custom properties only inherit down the
   tree, not sideways. .dumb-header re-declares locally for scoped
   responsive overrides (e.g. --h-full at 768px). */
:root {
  --orange: #F75E1C;
  --orange-rgb: 247, 94, 28;   /* channel token: rgba(var(--orange-rgb), α) for one-off washes/glows */
  --orange-soft: rgba(var(--orange-rgb), 0.2);
  --orange-mid: rgba(var(--orange-rgb), 0.55);
  --bg: #000000;
  --bg-dropdown: #0f0b07;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.72);
  --ink-faint: rgba(255, 255, 255, 0.5);
  --border: rgba(255, 255, 255, 0.08);
  --radius: 20px;
  --h-full: 100px;
  --h-compact: 74px;
}

.dumb-header {
  /* Colors/radius inherit from :root (custom properties cascade down the tree,
     and every header element is a :root descendant). Only the sizing tokens are
     re-declared here because they get scoped responsive overrides below. */
  --h-full: 100px;
  --h-compact: 74px;

  position: fixed !important;
  top: var(--ann-h, 0px) !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  color: #ffffff !important;
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom: none !important;
  height: 100px !important;
  height: var(--h-full) !important;
  min-height: 64px !important;
  transition: height 0.35s cubic-bezier(.4,0,.2,1),
              background 0.35s cubic-bezier(.4,0,.2,1),
              border-bottom 0.35s cubic-bezier(.4,0,.2,1);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dumb-header.is-compact {
  height: var(--h-compact) !important;
  background: #000 !important;
  border-bottom: none !important;
}

/* ----- Float-over-hero opt-in -----
   The default is transparent header + full spacer -- content sits
   below the header on every page, no shift. Visually on dark pages
   this looks like a solid black header (body bg shows through the
   transparent layer; there's nothing else to see through to).

   For pages with a hero element designed to extend into the header
   area (full-bleed video, top banner, edge-to-edge image), opt in
   to collapse the spacer so the hero renders BEHIND the floating
   nav. Add this one line to Page Settings -> Advanced -> Page
   Header Code Injection:
     document.documentElement.classList.add('dumb-header-floats')
   The hero now fills the whole viewport including the area behind
   the nav, and the transparency actually shows through to it. */
html.dumb-header-floats .dumb-header-spacer {
  height: 0 !important;
}
html.dumb-header-floats .dumb-header.is-compact ~ .dumb-header-spacer {
  height: var(--h-compact, 74px) !important;
}

/* ----- Solid-black-header opt-in -----
   Some pages have a body background color that "bleeds through" the
   transparent default header in an undesired way -- e.g. blog post
   templates whose body bg renders white but whose page content is
   dark, leaving a white strip at the very top. Opt those pages in
   to a forced solid black header. Add this one line to Page Settings
   -> Advanced -> Page Header Code Injection:
     document.documentElement.classList.add('dumb-header-solid')
   The spacer is already full by default, so no other adjustments
   are needed -- just paints the header solid black. */
html.dumb-header-solid .dumb-header {
  background: #000 !important;
}

/* ----- Auto-apply solid black on all blog post pages -----
   Squarespace adds two classes to <body> on every single blog post
   page (regardless of which blog collection): a collection-type
   class starting with "collection-type-blog" (e.g. blog-masonry,
   blog-basic-grid, blog-side-by-side, etc) AND `view-item`
   indicating it's a single post view rather than a list. Combine
   those two and we automatically catch every Digest post, every
   Jackey post, every MJ&Chris post, etc -- no per-page snippet
   needed. (List views like /digest itself stay default
   transparent because they don't have view-item.) */
body[class*="collection-type-blog"].view-item .dumb-header {
  background: #000 !important;
}

/* ----- Light-page mode -----
   Applied to the header on pages with white backgrounds (set on init
   via JS path-matching, removed on scroll once .is-compact takes over).
   Inverts the logo + flips all nav text, icons, and burger lines to
   dark so they're legible against the white page beneath. */
.dumb-header.is-light .dh-logo img {
  /* Logo is white-on-transparent; invert to black-on-transparent. */
  filter: invert(1) brightness(0.92);
}
.dumb-header.is-light .dh-nav a,
.dumb-header.is-light .dh-nav button.dh-folder-trigger,
.dumb-header.is-light .dh-nav button.dh-console-link {
  /* Mirror the footer's color: rgba(255,255,255,0.85) treatment --
     same 0.85 alpha, just inverted hue. Solid #111 here read
     visually heavier than the footer at the same 400 weight, since
     black-on-white renders denser than white-on-dark to the eye.
     The alpha softening compensates so both navs feel like the
     same weight on the cart page where both are visible together. */
  color: rgba(0,0,0,0.85) !important;
}
.dumb-header.is-light .dh-nav a:hover,
.dumb-header.is-light .dh-nav button.dh-folder-trigger:hover,
.dumb-header.is-light .dh-nav button.dh-console-link:hover,
.dumb-header.is-light .dh-nav li:hover > a,
.dumb-header.is-light .dh-nav li:hover > button.dh-folder-trigger,
.dumb-header.is-light .dh-nav li:focus-within > a,
.dumb-header.is-light .dh-nav li:focus-within > button.dh-folder-trigger {
  color: var(--orange) !important;
}
/* The is-light rules above flip the top-level nav text to dark ink so it
   reads against the white header bar. But the dropdown PANELS stay dark on
   every page, so their contents must keep the dark-surface (light-ink)
   palette. The broad `.dh-nav a` selector would otherwise turn every
   dropdown link to dark ink -> invisible against the dark panel on product,
   store, and blog pages. Restore the light palette for dropdown contents.
   The extra `.dh-dropdown` class raises specificity above `.dh-nav a` so
   this wins regardless of stylesheet source order (a plain `.dh-dropdown a`
   only ties, and the injected sheet's later rule would win the tie). */
.dumb-header.is-light .dh-nav .dh-dropdown a,
.dumb-header.is-light .dh-nav .dh-dropdown button {
  color: var(--ink) !important;
}
.dumb-header.is-light .dh-nav .dh-dropdown a:hover,
.dumb-header.is-light .dh-nav .dh-dropdown li:hover > a {
  color: var(--orange) !important;
}
.dumb-header.is-light .dh-icon-btn {
  color: #111 !important;
}
.dumb-header.is-light .dh-icon-btn:hover {
  color: var(--orange) !important;
}
/* Cart count pill: dark page wants the badge to read on white. */
.dumb-header.is-light .dh-cart-count {
  background: #111 !important;
  color: #fff !important;
}
/* Mobile burger lines */
.dumb-header.is-light .dh-burger span {
  background: #111 !important;
}
/* Back-chevron variant of the burger (shown when on a sub-screen)
   uses borders, not background, so flip those too. */
.dumb-header.is-light .dh-burger::before {
  border-left-color: #111 !important;
  border-bottom-color: #111 !important;
}
/* Search input: by default styled for dark headers with white text +
   white-tinted bg + white-tinted border. On light pages all of those
   disappear into the white header bg, so we flip everything to dark
   ink + a subtle dark-tinted bg/border that reads on white. */
.dumb-header.is-light .dh-search-mount input {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.2) !important;
  color: #111 !important;
}
.dumb-header.is-light .dh-search-mount input:focus {
  border-color: rgba(0,0,0,0.35) !important;
}
.dumb-header.is-light .dh-search-mount input::placeholder {
  color: rgba(0,0,0,0.4) !important;
}
/* The transparent header has no background by default. On light pages
   we give it a solid white background so product content scrolling
   under it is hidden cleanly (rather than bleeding through and clashing
   with the dark text). No border/shadow -- a clean edge against the
   page works better than a hairline that catches at sub-pixel ratios. */
.dumb-header.is-light {
  background: #fff !important;
}

/* Spacer reserves vertical space below the fixed header. Default is
   full height -- content sits below the header on every page, no
   shift. The header itself stays transparent: on dark pages this
   looks visually identical to a solid black header (body bg shows
   through), but on hero pages that opt in to `dumb-header-floats`
   above, the spacer collapses to 0 and the hero renders behind the
   transparent nav. */
.dumb-header-spacer {
  height: calc(var(--h-full, 100px) + var(--ann-h, 0px));
  transition: height 0.35s cubic-bezier(.4,0,.2,1);
}
.dumb-header.is-compact ~ .dumb-header-spacer {
  height: calc(var(--h-compact, 74px) + var(--ann-h, 0px));
}
@media (max-width: 1024px) {
  .dumb-header-spacer { height: calc(var(--h-full, 100px) + var(--ann-h, 0px)); }
  .dumb-header.is-compact ~ .dumb-header-spacer { height: calc(var(--h-compact, 74px) + var(--ann-h, 0px)); }
}
@media (max-width: 768px) {
  .dumb-header-spacer { height: calc(71px + var(--ann-h, 0px)); }
  .dumb-header.is-compact ~ .dumb-header-spacer { height: calc(69px + var(--ann-h, 0px)); }
}

/* ========== Inner layout ========== */
.dh-inner {
  width: 100%;
  height: 100% !important;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 4vw;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 0;
  box-sizing: border-box;
}

/* ========== Logo ========== */
.dh-logo-wrap {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.dh-logo {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.dh-logo img {
  height: 58px !important;
  width: auto !important;
  min-height: 40px;
  transition: height 0.35s cubic-bezier(.4,0,.2,1);
  display: block !important;
}
.dumb-header.is-compact .dh-logo img { height: 42px !important; }

/* ---- Clubhouse Beta page: bigger logo ---- */
.dh-page-clubhouse-beta .dh-logo img { height: 78px !important; }
.dh-page-clubhouse-beta .dumb-header.is-compact .dh-logo img { height: 58px !important; }

/* ========== Nav (desktop) ========== */
.dh-nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 0 0 20px;   /* breathing room between logo and first nav item */
  padding: 0;
}
.dh-nav > li { position: relative; }

.dh-nav a,
.dh-nav button.dh-folder-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0.3px;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  position: relative;
}
.dh-nav a:hover,
.dh-nav button.dh-folder-trigger:hover,
.dh-nav > li:hover > button.dh-folder-trigger,
.dh-nav > li:hover > a,
.dh-nav > li:focus-within > button.dh-folder-trigger,
.dh-nav > li:focus-within > a {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.06);
  font-weight: 400 !important;
}

/* -- FOLDER TAB -- clean highlight, no connected-tab elbows -- */
.dh-nav > li:hover > .dh-folder-trigger {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
  border: none;
  border-radius: 10px;
  z-index: 10001;
}

.dh-caret {
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.dh-nav > li:hover .dh-caret {
  transform: rotate(225deg) translate(-2px, -2px);
}

/* -- Animated label swap ---------------------------------------
   For nav triggers that expand their label on hover (Clubhouse,
   Art). Short label is in normal flow (drives the container's
   default width and height); long label is absolutely positioned
   (doesn't contribute to layout). JS measures both labels at init
   and sets --dh-label-w-short / --dh-label-w-long on the wrapper,
   which the CSS animates between. Keeps the button compact by
   default and smoothly widens on hover — no character reveal, no
   layout jitter. */
.dh-trigger-labels {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  /* Fallback to auto so the button renders correctly before JS
     has measured and set the custom properties. */
  width: var(--dh-label-w-short, auto);
  transition: width 0.35s cubic-bezier(.4, 0, .2, 1);
}
.dh-trigger-label {
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.dh-trigger-label--short {
  display: inline-block;
  opacity: 1;
}
.dh-trigger-label--long {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
/* Width expansion is driven by a JS-toggled .dh-expanded class rather
   than :hover/:focus-within so it can be STICKY: once a trigger reveals
   its full name, the wider width is held until the pointer/focus leaves
   the whole nav. That keeps sibling triggers from shifting position mid-
   travel (the "hover-chase" that made Shop hard to reach past Art). See
   the stickyTriggerLabels() block in JS. */
.dh-nav > li.dh-expanded .dh-trigger-labels {
  width: var(--dh-label-w-long, auto);
}
.dh-nav > li.dh-expanded .dh-trigger-label--short {
  opacity: 0;
}
.dh-nav > li.dh-expanded .dh-trigger-label--long {
  opacity: 1;
}

/* ========== Mega-menu dropdowns (Squarespace 7.1 style) ========== */
/* Dropdowns are positioned absolutely relative to their parent li so the
   panel sits directly below the menu item that triggers it. JS adjusts the
   horizontal alignment so the panel doesn't get clipped off-screen. */
.dh-dropdown {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  width: 1040px;
  max-width: calc(100vw - 24px);
  /* No min-width — it was forcing dropdowns to nearly full viewport width,
     overriding the tablet media query's smaller width and also blocking
     per-dropdown width overrides like .dh-events-dropdown. */
  /* Near-solid so text contrast never depends on the page behind it. At 0.72
     the panel washed out to gray over light product pages, making the white
     titles and dim "New in Store" eyebrow unreadable. Mirrors the solid
     Programs mega-menu backdrop. */
  background: rgba(12, 10, 8, 0.96);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius) !important;
  padding: 24px;
  list-style: none;
  margin: 0;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;  /* don't catch hover when closed */
  transform-origin: top left;
  transform: translateX(var(--dh-offset-x, 0)) scaleY(0.94) translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.2s;
  max-height: calc(100vh - var(--h-full) - 32px);
  overflow-y: auto;
  z-index: 9999;
}

.dh-nav > li:hover > .dh-dropdown,
.dh-nav > li:focus-within > .dh-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;  /* re-enable when open */
  transform: translateX(var(--dh-offset-x, 0)) scaleY(1) translateY(0);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(.4,0,.2,1), visibility 0s;
}

/* ========== CONSOLE nav items ==========
   Top-level header links (Live Monitor / Lineups / Library / Social Media) that
   sit beside Donate and switch the embedded dashboard's view, replacing the
   dashboard's own in-app tab bar.

   Two gates, deliberately separate:
   - html.dh-console-page : added synchronously on the /console path. Hides the
     dashboard's own tab bar so it never double-renders with the header nav.
   - html.dh-on-console   : added on EVERY page once an access check confirms the
     logged-in account is a member of "Dumb Admin" (i.e. Squarespace serves them
     the paywalled /console page). This reveals the nav items site-wide for the two
     admins — clicking one off /console jumps to /console with that view seeded —
     while non-members never see them. */
.dh-console-item { display: none; }
html.dh-on-console .dh-console-item { display: block; }
/* Styled to match the regular nav links (.dh-nav a) since these are now
   top-level items rather than dropdown rows. */
.dh-console-link {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 400 !important;
  letter-spacing: 0.3px; color: var(--ink);
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: 10px; white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.dh-console-link:hover { color: var(--orange); background: rgba(var(--orange-rgb), 0.06); }
.dh-console-link.is-active { color: var(--orange); background: rgba(var(--orange-rgb), 0.12); font-weight: 500 !important; }
/* The dashboard's own tab bar is replaced by the header Console nav on /console.
   Path-based (dh-console-page), not membership-gated, so it's hidden before the
   async access check resolves and never flashes alongside the header nav. */
html.dh-console-page .d247-tabs { display: none !important; }

/* Bridge: keep dropdown open while cursor moves from trigger to the
   panel. A single wide ::after on the LI extends far beyond the
   trigger bounds in both directions to cover diagonal traversal.

   Why so wide: JS can translate dropdowns up to ~600px left or
   right of the trigger to fit the viewport. Archives is the
   worst-case -- its trigger sits in the right portion of the nav,
   so the 960px dropdown gets shifted heavily left, putting the
   rightmost tiles (Random + Browse Downloads) a couple hundred
   pixels right of where the trigger is. Diagonal cursor paths
   from trigger down-right to those tiles need bridge coverage
   well past the trigger's own width.

   History: an earlier version split this into two bridges -- a
   narrow li::after for straight-down + a wide .dh-dropdown::before
   for diagonal. The wide one broke silently because .dh-dropdown
   has overflow-y: auto (max-height safety net for short viewports),
   and per CSS spec a non-visible overflow-y forces overflow-x to
   auto too. The dropdown becomes a scroll container that clips abs-
   positioned descendants outside its box -- including a ::before at
   top: -18px. The bridge was invisible AND non-hit-testable, so
   diagonal hover to far-right tiles fell into a dead zone. Pulling
   the bridge up to the LI sidesteps the clipping entirely; the LI
   has no overflow constraint, so negative left/right just works.

   Tradeoff: while a dropdown is open, the bridge keeps it open even
   if the cursor drifts well left or right of the trigger at bridge
   height (y between LI bottom and dropdown top). This is fine in
   practice -- the bridge is a thin 25px strip just below the nav,
   so any meaningful "I'm leaving this menu" movement (up to nav
   level, down past the dropdown, or to another LI) immediately
   exits the bridge and closes the dropdown normally. */
.dh-nav > li::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -700px; right: -700px;
  height: 25px;
  display: none;
}
.dh-nav > li:hover::after, .dh-nav > li:focus-within::after { display: block; }

/* ===== Simple dropdown (Art, Shop, Programs, About -- unchanged for now) ===== */
.dh-dropdown.is-simple {
  width: min(320px, calc(100vw - 48px));
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dh-dropdown.is-simple > li { list-style: none; }
.dh-dropdown.is-simple a {
  display: block;
  padding: 12px 18px;
  border-radius: var(--radius) !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: normal;
  text-align: left;
}
.dh-dropdown.is-simple a:hover {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
}
.dh-dropdown.is-simple a.is-sub {
  padding-left: 32px;
  font-size: 13px;
  color: var(--ink-dim);
}

/* ===============================================================
   MEGA-MENU -- image-first magazine grid
   One card style everywhere: image covers the slot, opaque strip
   at bottom holds a single-line title. No clipping. No clutter.
   =============================================================== */

/* -- GRID --------------------------------------------------- */
.dh-mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 24px;
}

/* -- CARD BASE ---------------------------------------------- */
.dh-mega-hero,
.dh-mega-item {
  position: relative;
  display: block;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  text-decoration: none;
  color: #fff;
  background: #0f0b07;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Border as ::after overlay so it renders above full-bleed images */
.dh-mega-hero::after,
.dh-mega-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.2s ease;
}
.dh-mega-hero { grid-column: 1; grid-row: 1; }
.dh-mega-item { min-width: 0; }
.dh-mega-hero:hover,
.dh-mega-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(var(--orange-rgb), 0.18), 0 8px 30px rgba(0,0,0,0.45);
}
.dh-mega-hero:hover::after,
.dh-mega-item:hover::after {
  border-color: var(--orange-mid);
}

/* -- IMAGE -------------------------------------------------- */
.dh-mega-hero img:not(.dh-mega-hero-bg),
.dh-mega-item-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.38s ease;
}
.dh-mega-hero:hover img:not(.dh-mega-hero-bg),
.dh-mega-item:hover .dh-mega-item-thumb img { transform: scale(1.04); }
.dh-mega-hero img.is-hidden,
.dh-mega-item-thumb img.is-hidden { opacity: 0; }

.dh-mega-item-thumb { position: absolute; inset: 0; }
.dh-mega-hero-bg    { display: none !important; }
.dh-mega-hero-img-wrap { display: contents; }

/* -- TITLE OVERLAY -- gradient behind text ------------------- */
.dh-mega-hero-overlay,
.dh-mega-item-overlay {
  position: absolute;
  /* Use negative offsets and slightly larger width to eliminate sub-
     pixel rendering gaps that produce a thin bright line at the tile
     edges. The parent has overflow:hidden + border-radius so the
     1px overhang is clipped invisibly. */
  left: -1px; right: -1px; bottom: -1px;
  height: calc(60% + 1px);
  /* Hold fully opaque for the bottom 15% of the gradient so the whole
     rounded-corner zone (radius ~20px on a ~220px tile) is covered and
     no image bleeds through where the corner curves meet the lighter
     dropdown background. Fade starts above the corner zone. */
  background: linear-gradient(to top,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    15%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.50) 65%,
    rgba(0,0,0,0.0)  100%);
  padding: 36px 20px 18px;
  box-sizing: border-box;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.dh-mega-hero-eyebrow,
.dh-mega-item-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* item eyebrow hidden by default -- shown in 2x2 via .is-2x2 override below */
.dh-mega-item-eyebrow { display: none; }
.dh-mega.is-2x2 .dh-mega-item-eyebrow { display: block; }

.dh-mega-hero-title,
.dh-mega-item-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: #fff;
  text-transform: capitalize;
  /* Wrap at 2 lines instead of truncating */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.dh-mega-hero-title { font-size: 22px; }

.dh-mega-hero-meta,
.dh-mega-item-meta {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--orange);
  margin: 4px 0 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}
.dh-mega-hero-meta:empty,
.dh-mega-item-meta:empty { display: none; }

/* -- SIDE STACK --------------------------------------------- */
.dh-mega-side {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  min-width: 0;
}
.dh-mega-side.layout-tt-i,
.dh-mega-side.layout-t-i-t,
.dh-mega-side.layout-ii-t { grid-template-rows: 1fr 1fr 1fr; }

/* -- NO-THUMB -- dark placeholder card, text pinned to bottom - */
.dh-mega-item.no-thumb {
  background: linear-gradient(150deg, #1c1007, #0a0805);
  border: 0.5px solid transparent;
}
.dh-mega-item.no-thumb .dh-mega-item-thumb { display: none; }
.dh-mega-item.no-thumb .dh-mega-item-overlay {
  /* Same position as image cards -- always at the bottom */
  top: auto;
  bottom: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    15%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.50) 65%,
    rgba(0,0,0,0.0)  100%);
  backdrop-filter: none;
}
.dh-mega-item.no-thumb .dh-mega-item-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--orange); margin: 0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-mega-item.no-thumb .dh-mega-item-title {
  font-size: 22px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize;
}
.dh-mega-item.no-thumb .dh-mega-item-meta {
  font-family: 'Poppins', sans-serif; font-weight: 300;
  font-size: 11px; color: var(--ink-dim);
  margin-top: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dh-mega-item.no-thumb:hover { border-color: var(--orange-mid); }

/* -- SHIMMER ------------------------------------------------ */
.dh-mega-hero.is-loading,
.dh-mega-item.is-loading {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -- LOCKED TILE -- members-only tease ----------------------
   Used by tiles representing gated content the visitor doesn't
   have access to (e.g. a members-only blog). The thumb is
   heavily blurred behind a centered lock icon + "Become A
   Member To Unlock" CTA. Click should land on /signup, not
   the gated content itself.

   Single rule set covers both desktop .dh-mega-item and mobile
   .dh-drawer-tile because both use the same structural pattern
   (relative parent, absolute-positioned img, absolute overlay).
   The .dh-tile-lock element is the centered overlay; both the
   regular .dh-mega-item-overlay and .dh-drawer-tile-overlay
   are hidden when .is-locked is present so the lock visual
   isn't fighting the standard bottom gradient. -------------- */
.dh-mega-item.is-locked .dh-mega-item-overlay,
.dh-drawer-tile.is-locked .dh-drawer-tile-overlay {
  display: none;
}
/* Inverse: hide the lock overlay when the tile ISN'T locked. Both
   overlays live in the DOM permanently so JS just toggles .is-locked
   to switch states -- no markup surgery needed. */
.dh-mega-item:not(.is-locked) .dh-tile-lock,
.dh-drawer-tile:not(.is-locked) .dh-tile-lock {
  display: none;
}
.dh-mega-item.is-locked .dh-mega-item-thumb img,
.dh-drawer-tile.is-locked > img {
  /* Heavy blur + scale up to hide blur edge transparency. Without
     scale, blur exposes ~14px of the dark tile background around
     the perimeter (browser blurs each pixel against transparent
     edges). 1.15x scale eats those edges back into the visible
     area so the blurred image fills the tile cleanly. */
  filter: blur(14px) brightness(0.55);
  transform: scale(1.15);
  transition: filter 0.25s ease, transform 0.25s ease;
}
.dh-mega-item.is-locked:hover .dh-mega-item-thumb img,
.dh-drawer-tile.is-locked:hover > img {
  /* Subtle "tease" -- brighten slightly on hover, but blur stays
     so the content remains gated. Don't override the standard
     :hover scale rule on dh-mega-item-thumb img -- that's why we
     re-declare scale here instead of relying on the parent rule. */
  filter: blur(12px) brightness(0.65);
  transform: scale(1.18);
}
.dh-tile-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  pointer-events: none;  /* clicks pass through to the parent <a> */
  z-index: 6;            /* above the .dh-mega-item::after border (z 5) */
  /* Subtle dark vignette helps text readability over varied
     blurred image content -- cheaper than per-image testing. */
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.5) 100%);
}
.dh-tile-lock-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  line-height: 1;
}
.dh-tile-lock-icon {
  width: 32px;
  height: 32px;
  color: #fff;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transition: transform 0.2s ease, color 0.2s ease;
}
.dh-mega-item.is-locked:hover .dh-tile-lock-icon,
.dh-drawer-tile.is-locked:hover .dh-tile-lock-icon {
  color: var(--orange);
  transform: scale(1.08);
}
.dh-tile-lock-text {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/* Mobile drawer tile sizing is slightly smaller -- mobile tiles
   are ~150-170px squares, so the lock graphic needs to scale
   down a touch to feel proportional rather than crowded. */
.dh-drawer-tile.is-locked .dh-tile-lock { gap: 8px; padding: 12px; }
.dh-drawer-tile.is-locked .dh-tile-lock-icon { width: 26px; height: 26px; }
.dh-drawer-tile.is-locked .dh-tile-lock-text { font-size: 10px; letter-spacing: 1.2px; }
.dh-drawer-tile.is-locked .dh-tile-lock-eyebrow { font-size: 10px; letter-spacing: 2px; }

/* -- EVENTS -- hero left (16:9), list right (same height, clips) -- */
.dh-mega.is-row {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  align-items: start;
}
.dh-mega.is-row .dh-mega-hero {
  grid-column: 1; grid-row: 1;
  aspect-ratio: 16 / 9;
}
.dh-mega.is-row .dh-mega-side {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 12px;
  align-self: stretch;    /* match hero height exactly */
  overflow: hidden;       /* events never bleed past the hero */
}

/* -- CLUBHOUSE GRID -- iOS-widget-style 4-col grid:
   wide hero spans 2 cols (= 2 small tiles + 1 gap wide), squares span 1 col.
   Also used for Art, Shop, and Archives mega menus. --------- */
.dh-mega.is-clubhouse {
  grid-template-columns: repeat(4, 1fr);
  /* Two equal-height rows. Combined with the container aspect-ratio below,
     each row works out to ≈ 1 column width (so squares come out actually
     square). This is more reliable than per-tile aspect-ratio + stretch,
     which has browser-specific quirks with grid row sizing. */
  grid-template-rows: 1fr 1fr;
  /* Container width = 4 cols + 3 gaps; height = 2 rows + 1 gap.
     At 24px gap with square cells: width/height = (4w+72)/(2w+24).
     For a 960px dropdown (w≈210), that's ≈ 912/444 = 76/37. Close enough
     across the desktop dropdown width range that tiles remain visually
     square without special-casing each width. */
  aspect-ratio: 76 / 37;
}
/* 3-row variant -- used by the Clubhouse mega only. Other dropdowns
   sharing .is-clubhouse layout (Art, Shop, Archives) have just 2 rows
   and use the base rule above. */
.dh-mega.is-clubhouse.has-3-rows {
  grid-template-rows: 1fr 1fr 1fr;
  /* Width unchanged; height = 3 rows + 2 gaps. For w≈210: 912/678. */
  aspect-ratio: 152 / 113;
}
.dh-mega.is-clubhouse .dh-ch-wide {
  grid-column: span 2;
}
/* Giant 2x2 tile -- spans 2 cols and 2 rows, used by Art for the
   Community Gallery hero. Only valid inside .has-3-rows since it needs
   a third row of small tiles below it to balance the layout. */
.dh-mega.is-clubhouse .dh-ch-giant {
  grid-column: span 2;
  grid-row: span 2;
}
.dh-mega.is-clubhouse > *:not(.dh-ch-wide):not(.dh-ch-giant) {
  grid-column: span 1;
  /* Row height is set by the grid — no per-tile aspect-ratio needed. */
}
.dh-mega.is-clubhouse .dh-mega-item-eyebrow { display: block; }
.dh-mega.is-clubhouse > *:not(.dh-ch-wide):not(.dh-ch-giant) .dh-mega-item-title {
  font-size: 14px !important;
  -webkit-line-clamp: 2;
}

/* ===== Archive library tiles =====
   Used on the Archives mega (third row) for the show-library shortcuts:
   MJP, Mystery Hour, Super Dumb Bros, Dumb Odds & Ends.
   Mirrors the Programs mega menu pattern exactly: solid dark backdrop
   with the logo centered via top:50%/left:50% + transform translate,
   contain-fitted at an explicit width/height. Per-show width tweaks
   (100% vs 85%) match the equivalent Programs tiles so the same
   logos render at the same visual size in both menus. */
.dh-mega-item.dh-archive-library .dh-mega-item-thumb,
.dh-drawer-tile.dh-archive-library {
  background: #0d0a07;
}
/* Desktop: centered transform pattern (mirrors .dh-mega-program img).
   `inset: auto` cancels the base `inset: 0` from .dh-mega-item-thumb img
   so top/left/transform can take over positioning. */
.dh-mega-item.dh-archive-library .dh-mega-item-thumb img {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  object-fit: contain;
  box-sizing: border-box;
}
/* Hover scale -- combine with the centering translate, otherwise the
   base .dh-mega-item:hover .dh-mega-item-thumb img rule (just
   `transform: scale(1.04)`) wipes out the centering and the logo
   jumps to the top-left corner. Higher specificity ensures we win. */
.dh-mega-item.dh-archive-library:hover .dh-mega-item-thumb img {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Mobile: padding-based contain (mirrors .dh-drawer-tile.is-logo img).
   Works here because the base img rule already has inset:0 + width/
   height:100%, so adding box-sizing:border-box + padding eats inward. */
.dh-drawer-tile.dh-archive-library > img {
  object-fit: contain;
  padding: 20%;
  box-sizing: border-box;
}

/* Per-show sizing -- the three logos below have small/tight artwork
   that needs a slight bump above the default to read at the same
   visual scale as Mystery Hour. */
.dh-mega-item.dh-archive-library[href="/the-mary-jo-pehl-show"] .dh-mega-item-thumb img,
.dh-mega-item.dh-archive-library[href="/super-dumb-bros"] .dh-mega-item-thumb img,
.dh-mega-item.dh-archive-library[href="/dumb-odds-ends"] .dh-mega-item-thumb img {
  width: 82%;
  height: 82%;
}

/* ===== Clubhouse tile now-playing ticker =====
   Scrolling strip at the bottom of the Enter Clubhouse wide tile.
   Shows NOW PLAYING / UP NEXT text populated by loadTvGuide().
   Hidden until JS writes content and adds .is-visible. */
.dh-ch-ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  height: 24px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  display: none;
  align-items: center;
  border-top: 0.5px solid rgba(var(--orange-rgb), 0.3);
  /* Match the parent tile's bottom corner radius so the backdrop-filter
     compositing layer doesn't escape the parent's overflow:hidden clip
     (a known WebKit/Safari behaviour with backdrop-filter). */
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  pointer-events: none;
}
.dh-ch-ticker.is-visible { display: flex; }
.dh-ch-ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: dhChTickerScroll var(--dh-ticker-dur, 30s) linear infinite;
}
.dh-ch-ticker-segment {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.9);
  padding-right: 80px; /* gap between seamless loop copies */
}
/* Push the "Enter Clubhouse" text up so it clears the ticker strip --
   applies to both the desktop mega-menu tile and the mobile drawer tile. */
a[href="/dumbclubhouse"] .dh-mega-item-overlay,
a[href="/dumbclubhouse"] .dh-drawer-tile-overlay {
  padding-bottom: 32px;
}
/* Mobile drawer tiles use a 16px radius -- match the ticker's bottom
   corners so the backdrop-filter layer stays clipped on Safari. */
.dh-drawer-tile .dh-ch-ticker {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
@keyframes dhChTickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* -- SHOP GRID -- now uses is-clubhouse layout */

/* -- EVENTS -- stacked: hero on top, list below, CTA at bottom */

/* -- ABOUT GRID -- iOS-widget-style 4-col grid.
   Row 1: About (1:1)    | FAQs (1:1)        | Discord (large 1:1, spans rows 1-2)
   Row 2: Newsletter (wide, spans 2 cols)    | Discord cont.
   Row 3: Blog (wide, spans 2 cols)          | Follow Us (wide, spans 2 cols)

   Geometry matches .dh-mega.is-clubhouse.has-3-rows exactly: container-
   level aspect-ratio + 1fr rows make every row exactly one column wide.
   That gives consistent tile sizes across all mega menus:
     small 1:1   = 1 col × 1 row
     large 1:1   = 2 cols × 2 rows  (Discord here, dh-ch-giant elsewhere)
     wide tile   = 2 cols × 1 row   (Newsletter, Blog, Follow Us) */
/* About sets no width of its own: the shared hybrid-dropdown rule in
   #dh-hybrid-nav gives every text menu the same fixed 340px. This used
   to force `width: max-content !important`, whose !important outranked
   that shared rule and left About sized to its featured post's title. */
.dh-mega.is-about {
  /* Neutralize the old 4-col grid + aspect-ratio; the hybrid flex layout
     in #dh-hybrid-nav governs this panel now. */
  aspect-ratio: auto;
}
.dh-mega.is-about .dh-mega-item-eyebrow { display: block; }
@keyframes dh-ch-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.88); }
}
/* -- EVENTS -- stacked: hero on top, list below, CTA at bottom */
.dh-events-dropdown {
  /* Prefer 480px; shrink if viewport is narrower than that. Now that the
     base .dh-dropdown min-width is gone, we don't need separate min/max
     overrides — this single line does the right thing at every size. */
  width: min(480px, calc(100vw - 24px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
.dh-events-hero {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  flex-shrink: 0 !important;
  grid-column: unset !important;
  grid-row: unset !important;
}
.dh-events-hero .dh-mega-item-thumb,
.dh-events-hero .dh-mega-hero-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
.dh-events-hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.dh-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dh-events-cta {
  display: block !important;
  text-align: center !important;
  padding: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--orange) !important;
  text-decoration: none !important;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  transition: color 0.15s ease !important;
  letter-spacing: 0.3px;
}
.dh-events-cta:hover {
  color: #fff !important;
}

/* -- PROGRAMS GRID ------------------------------------------ */
.dh-programs-dropdown {
  /* Programs mirrors the mobile drawer: a narrow 2-column logo grid
     rather than the wide 4-column wall. Narrower panel = tiles land at
     a sensible size and the rightmost-trigger off-screen risk shrinks. */
  width: 360px !important;
}
.dh-mega-programs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns, like the mobile Programs screen */
  gap: 10px;            /* tightened to match the mobile drawer's compact grid */
  width: 100%;
}
.dh-mega-program {
  position: relative; display: block;
  aspect-ratio: 1 / 1; border-radius: var(--radius) !important;
  overflow: hidden !important; text-decoration: none;
  background: #0d0a07;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Border overlay above the logo image, matching the .dh-mega-item
   ::after pattern so program tiles get the same orange-glow hover
   border as every other tile across the header mega menus. Without
   this, a Program tile only animated its inner logo on hover -- it
   read as inert compared to neighboring panels. z-index:5 sits the
   border above the logo (which is positioned at translate -50/-50
   inside the tile) but below any future overlay content. */
.dh-mega-program::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.2s ease;
}
.dh-mega-program img {
  /* Uniform contained fit -- mirrors the mobile drawer's .dh-drawer-tile.is-logo
     img (object-fit: contain + 14% padding) so every program logo sits at the
     same scale with even breathing room instead of per-show size hacks. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9%;
  box-sizing: border-box;
  /* Per-show visual-size normalization -- see the --logo-scale block below. */
  transform: scale(var(--logo-scale, 1));
  transition: transform 0.38s ease;
}
.dh-mega-program:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(var(--orange-rgb), 0.18), 0 8px 30px rgba(0,0,0,0.45);
}
.dh-mega-program:hover::after {
  border-color: var(--orange-mid);
}
.dh-mega-program:hover img { transform: scale(calc(var(--logo-scale, 1) * 1.06)); }

/* Per-show visual-size normalization. The source logos have wildly
   different aspect ratios, so a plain contain-fit lets the square /
   circular emblems (Mystery Hour, Dave Hill, The Mads) fill the whole
   tile and tower over the wide horizontal lockups. These scales pull
   the tall ones back so every logo reads at roughly the same size. The
   three wide bars (Weird, Super Dumb Bros, Witching Hour) stay at 1 --
   they're already the visual floor and can't grow without clipping. */
.dh-mega-program[href="/mysteryhour-landing"],
.dh-mega-program[href="/goodtimehour"],
.dh-mega-program[href="/themadsareback"] { --logo-scale: 0.80; }
.dh-mega-program[href="/themaryjopehlshow"],
.dh-mega-program[href="/artdrawsustogether"] { --logo-scale: 0.90; }

/* -- EVENT ROWS --------------------------------------------- */
.dh-mega-event {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 9px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid transparent;
  border-radius: var(--radius) !important; text-decoration: none; color: var(--ink);
  width: 100%; box-sizing: border-box;
  flex: 1;               /* each row grows equally to fill side column */
  min-height: 0;         /* allow flex children to shrink below content size */
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dh-mega-event:hover { border-color: rgba(var(--orange-rgb), 0.45); background: rgba(var(--orange-rgb), 0.06); }
.dh-mega-event-date {
  flex: 0 0 44px; text-align: center;
  padding: 6px 0; background: rgba(var(--orange-rgb), 0.14);
  border-radius: 8px; font-family: 'Barlow Condensed', sans-serif;
}
.dh-mega-event-month {
  display: block; font-size: 9px; font-weight: 700;
  letter-spacing: 1.5px; color: var(--orange);
  text-transform: uppercase; line-height: 1;
}
.dh-mega-event-day {
  display: block; font-size: 20px; font-weight: 700;
  color: #fff; line-height: 1.1; margin-top: 1px;
}
.dh-mega-event-body { flex: 1; min-width: 0; }
.dh-mega-event-title {
  font-size: 12px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: capitalize; line-height: 1.3;
}
.dh-mega-event-time { font-size: 11px; color: var(--ink-dim); font-weight: 300; margin-top: 2px; }

/* Simple dropdown -- uniform radius to match glass style */
.dh-dropdown.is-simple { border-radius: var(--radius) !important; }

.dh-mega.is-2x2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}
.dh-mega.is-2x2 > * {
  aspect-ratio: 16 / 9;
  grid-column: auto !important;
  grid-row: auto !important;
}
/* Subtle border on 2x2 panels -- hover only */
.dh-mega.is-2x2 .dh-mega-item,
.dh-mega.is-2x2 .dh-mega-tvguide {
  border: 0.5px solid transparent;
}
.dh-mega.is-2x2 .dh-mega-item:hover,
.dh-mega.is-2x2 .dh-mega-tvguide:hover {
  border-color: var(--orange-mid);
  box-shadow: 0 0 18px rgba(var(--orange-rgb), 0.18), 0 8px 30px rgba(0,0,0,0.45);
}
/* Show eyebrow labels in 2x2 panels -- handled in overlay block above */

/* ========== Search ========== */
/* Hide prices in shop mega menu (desktop + mobile drawer). The
   meta elements exist in both markup trees so fillCard's metaEl
   lookup succeeds, but they're suppressed visually -- can be
   re-enabled by removing this rule if pricing is ever wanted in
   the nav. */
#dhShopFeaturedMeta, #dhShopLatestMeta,
#dhShopFeaturedMobileMeta, #dhShopLatestMobileMeta { display: none !important; }

/* Search mount point in header actions */
.dh-search-mount {
  position: relative;
  width: 0;
  opacity: 0;
  overflow: visible;
  transition: width 0.25s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
}
.dh-search-mount.is-open {
  width: 400px;
  opacity: 1;
}
/* Style the SQS block when it lives inside our mount */
.dh-search-mount .sqs-block-search,
.dh-search-mount .sqs-block {
  padding: 0 !important;
  margin: 0 !important;
}
.dh-search-mount input {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 0.5px solid rgba(255,255,255,0.2) !important;
  border-radius: 15px !important;
  padding: 8px 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  caret-color: var(--orange);
  -webkit-appearance: none !important;
}
.dh-search-mount input:focus {
  border-color: rgba(255,255,255,0.35) !important;
  outline: none !important;
  box-shadow: none !important;
}
.dh-search-mount input::placeholder {
  color: rgba(255,255,255,0.35) !important;
  font-weight: 300 !important;
}
/* Results dropdown from SQS block */
.dh-search-mount .sqs-search-page-list,
.dh-search-mount .search-results,
.dh-search-mount ul {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: 420px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  background: rgba(12, 10, 8, 0.94) !important;
  backdrop-filter: blur(40px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--radius) !important;
  padding: 12px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important;
  z-index: 10004 !important;
  list-style: none !important;
}
.dh-search-mount li {
  list-style: none !important;
}
.dh-search-mount a {
  display: block !important;
  padding: 10px 14px !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  transition: background 0.15s ease !important;
}
.dh-search-mount a:hover {
  background: rgba(var(--orange-rgb), 0.08) !important;
  color: var(--orange) !important;
}
.dh-search-mount img {
  border-radius: 8px !important;
}
/* Animate search icon out */
.dh-actions .dh-search-toggle {
  transition: opacity 0.15s ease, width 0.2s ease, padding 0.2s ease;
  overflow: hidden;
}
.dh-actions .dh-search-toggle.is-hidden {
  opacity: 0 !important;
  width: 0 !important;
  padding: 0 !important;
}
/* The toggle button holds TWO icons — a magnifier (default) and an X
   (shown when the header has .is-searching on mobile). */
.dh-search-toggle .dh-search-close { display: none; }


/* -- RESPONSIVE --------------------------------------------- */
@media (max-width: 1080px) {
  /* Shrink dropdowns to 500px on tablet — with the base min-width gone,
     this now actually applies. Bounded by viewport via max-width. */
  .dh-dropdown { width: 500px; padding: 20px; }
  /* No .dh-about-dropdown width override here either. It used to be
     `width: max-content !important`, which made About the odd one out in
     the 1025-1080px band -- the only stretch where this query and the
     desktop nav overlap (the drawer takes over at <=1024px). */
  .dh-programs-dropdown { width: 500px !important; }

  /* Grids collapse to 2 columns */
  .dh-mega, .dh-mega.is-2x2 { grid-template-columns: 1fr 1fr; }

  /* Clubhouse/Art/Shop/Archives: hero spans both cols on its own row,
     squares share the next row. Wide tile needs an explicit aspect-ratio
     here because it's alone on its row — no squares stretching it. */
  .dh-mega.is-clubhouse {
    grid-template-columns: 1fr 1fr;
    /* Reset desktop's row-locking — tablet has 4 rows, not 2 */
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  /* Reset .has-3-rows too. It's more specific than .is-clubhouse
     (3 classes vs 2), so its desktop "grid-template-rows: 1fr 1fr 1fr"
     and aspect-ratio: 152/113 keep winning here unless we explicitly
     undo them. Without this override the Clubhouse mega rendered
     overlapping/clipped at tablet width because the desktop's locked
     3-row layout was fighting the 2-column tablet flow. */
  .dh-mega.is-clubhouse.has-3-rows {
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .dh-mega.is-clubhouse .dh-ch-wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }
  /* Giant 2×2 (Community Gallery in the Art mega) collapses to a
     wide-tile shape at tablet width. Without this override its
     desktop "span 2 cols, span 2 rows" tried to fill 4 cells of the
     2-col tablet grid -- pushing other tiles into wrong positions
     and breaking the Art menu visually. Falling back to wide-tile
     proportions keeps Community Gallery prominent without
     monopolizing the layout at narrower widths. */
  .dh-mega.is-clubhouse .dh-ch-giant {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 2 / 1;
  }
  .dh-mega.is-clubhouse > *:not(.dh-ch-wide):not(.dh-ch-giant) {
    /* Restore per-tile aspect-ratio for the 2-col tablet layout */
    aspect-ratio: 1 / 1;
  }

  /* About: 2 squares on row 1, then each wide tile takes a full row.
     Reset desktop's container-level row-locking (grid-template-rows +
     aspect-ratio) so the natural tablet flow works -- same pattern as
     the .is-clubhouse override above. Per-tile aspect-ratios are
     restored below since the grid no longer dictates row heights. */
  .dh-mega.is-about {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  /* Programs stays 4 cols */
  .dh-mega-programs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .dh-dropdown { width: calc(100vw - 48px); }
  .dh-mega-programs { grid-template-columns: repeat(2, 1fr); }
}

/* ========== Right-side actions ========== */
.dh-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.dh-icon-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: #ffffff !important;            /* explicit white */
  color: var(--ink) !important;
  text-decoration: none;
  border-radius: 12px;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.18s ease;
  position: relative;
  flex-shrink: 0;
}
.dh-icon-btn:hover {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
  transform: scale(1.1);
}
.dh-icon-btn svg { width: 20px; height: 20px; stroke-width: 1.8; }
.dh-cart-count {
  position: absolute !important;
  top: 4px !important; right: 4px !important;
  min-width: 16px !important;
  width: auto !important;
  height: 16px !important;
  max-height: 16px !important;
  padding: 0 4px !important;
  background: var(--orange) !important;
  color: #070503 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  /* Some SQS templates set a global text-shadow/border on spans
     inside headers -- zero those out so the badge stays flat. */
  text-shadow: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dh-cart-count.has-items { display: flex !important; }

/* ========== Hamburger ========== */
.dh-burger {
  display: none;
  width: 40px; height: 40px;   /* matches the 40px browse/AirPlay icons on the right */
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;          /* for back-arrow pseudo-element */
}
.dh-burger span {
  display: block !important;
  width: 20px; height: 2px;
  background: #ffffff !important;        /* explicit white -- never overridden */
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.dh-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dh-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dh-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- Back-arrow state --------------------------------------
   When the drawer is on a sub-screen, the burger turns into a
   back chevron. Spans fade out, chevron fades in. */
.dh-burger::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 11px; height: 11px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-radius: 1px;
  /* Rotate 45deg gives a chevron pointing left; nudged slightly
     right of center so the tip sits near the visual centre. */
  transform: translate(-30%, -50%) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.dh-burger.is-back::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s;
}
.dh-burger.is-back span {
  opacity: 0 !important;
}

/* ===========================================================
   MOBILE DRAWER -- two-level slide navigation
   Level 0: section list  |  Level 1: per-section tile grid
   Visual language mirrors the desktop mega-menus, adapted
   to a 2-column mobile layout with wide tiles spanning 2.
   =========================================================== */

/* -- Drawer container (full-screen below header) ---------- */
/* NOTE on positioning: .dh-drawer is a *sibling* of .dumb-header
   (both injected as children of <body>), so it cannot inherit the
   --h-full / --h-compact custom properties, which are scoped to
   .dumb-header. We use explicit px values matching those vars. */
.dh-drawer {
  display: none;
  position: fixed;
  top: 100px;                /* matches --h-full */
  left: 0; right: 0;
  /* Height instead of bottom:0 to fix the iOS Safari layout-viewport
     bug. On iOS, position:fixed is relative to the LAYOUT viewport,
     which extends behind the URL bar + bottom toolbar. Anchoring
     bottom:0 puts the drawer's bottom edge below the visible area --
     so the lowest nav items render correctly but sit physically
     off-screen behind Safari's chrome, requiring a scroll to reach.
     100dvh (dynamic viewport height) respects only the currently
     VISIBLE viewport, so the drawer is exactly the height of what
     the user can see and resizes live as Safari's chrome appears/
     hides during scroll. The vh declaration is a fallback for
     browsers that don't understand dvh (rare in 2026); modern
     browsers use the second, dvh-aware declaration. */
  height: calc(100vh - 100px);
  height: calc(100dvh - 100px);
  background: #000;
  /* Cross-fade with the header so the whole top of the screen reads
     as a single black surface arriving together. Timing + easing
     deliberately match the header's `transition: background 0.35s
     cubic-bezier(.4,0,.2,1)` declared up in .dumb-header -- if you
     change one, change both. pointer-events gates interaction so
     the drawer can't be tapped while it's invisible. `will-change`
     hints the browser to promote this to its own compositor for
     smoother fades on mobile. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
  z-index: 99999;
  overflow: hidden;          /* screens handle their own scroll */
}
@media (max-width: 1024px) { .dh-drawer { display: block; } }
@media (max-width: 768px) {
  .dh-drawer {
    top: 71px;
    height: calc(100vh - 71px);
    height: calc(100dvh - 71px);
  }
}
.dumb-header.is-compact ~ .dh-drawer {
  top: 69px;
  height: calc(100vh - 69px);
  height: calc(100dvh - 69px);
}
.dh-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ----- Light-mode drawer ----- 
   When the header is in .is-light mode (white-page state), the mobile
   drawer matches: white background, dark nav text, dark icons. The
   drawer is a sibling of the header so we use the sibling selector.
   When the user scrolls and .is-light flips off, the drawer auto-
   reverts -- but in practice the drawer is closed when scrolling so
   the transition is invisible. */
.dumb-header.is-light ~ .dh-drawer {
  background: #fff;
}
/* Each .dh-drawer-screen has its own opaque #000 background that
   would otherwise cover the wrapper's white. Match white on light. */
.dumb-header.is-light ~ .dh-drawer .dh-drawer-screen {
  background: #fff;
}
.dumb-header.is-light ~ .dh-drawer .dh-drawer-row {
  color: #111;
}
.dumb-header.is-light ~ .dh-drawer .dh-drawer-row:active,
.dumb-header.is-light ~ .dh-drawer .dh-drawer-row:focus-visible {
  background: rgba(var(--orange-rgb), 0.1);
  color: var(--orange);
}
.dumb-header.is-light ~ .dh-drawer .dh-drawer-icons a {
  color: #111;
}
.dumb-header.is-light ~ .dh-drawer .dh-drawer-icons a:active {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.1);
}
/* Social icons row uses fill (not stroke) so we override fill+color
   together. Hover stays orange (orange reads on both bg colors). */
.dumb-header.is-light ~ .dh-drawer .dh-social-icons a {
  color: #111;
}
.dumb-header.is-light ~ .dh-drawer .dh-social-icons svg {
  fill: #111;
}
.dumb-header.is-light ~ .dh-drawer .dh-social-icons a:hover {
  color: var(--orange);
}
.dumb-header.is-light ~ .dh-drawer .dh-social-icons a:hover svg {
  fill: var(--orange);
}
/* Sub-screen back buttons + headers also need dark text */
.dumb-header.is-light ~ .dh-drawer .dh-drawer-back,
.dumb-header.is-light ~ .dh-drawer .dh-drawer-subheader {
  color: #111;
}

/* -- Screen stack: main + per-section sub-screens --------- */
.dh-drawer-screens {
  position: relative;
  width: 100%;
  height: 100%;
}
.dh-drawer-screen {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #000;
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  box-sizing: border-box;
  /* Bottom breathing room is fluid: ~48px on tall screens, ~12px on
     short ones. Combined with the fluid row sizing below, this keeps
     the full nav + account/cart + social row visible without scroll
     on small phones. */
  padding-bottom: clamp(12px, 4vh, 48px);
  /* Centre each panel's contents vertically, the way the main screen
     centres its nav list -- a short panel (Art: four links) otherwise
     sits jammed under the logo with a screenful of black beneath it.

     `safe` is load-bearing, not decoration. This element is the scroll
     container (overflow-y: auto above), and a tall panel -- Clubhouse
     has 11 rows plus a widget -- can exceed a short phone's viewport.
     Plain `center` would then push the panel's top edge out of the
     scrollable area, unreachable. `safe center` reverts to flex-start
     exactly in that case. Browsers too old to parse `safe` drop the
     declaration entirely and simply keep the old top-aligned layout. */
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
/* Main screen is always in place. Sub-screens slide in over it. */
.dh-drawer-screen.dh-drawer-main {
  transform: translateX(0);
  /* Vertically center the nav list + account/cart icons as a group */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dh-drawer-screen.is-active {
  transform: translateX(0);
}

/* =====================
   MAIN SCREEN (Level 0)
   ===================== */
.dh-drawer-list {
  /* Fluid top/bottom padding -- 6/8px on tall screens, ~2/3px on short. */
  padding: clamp(2px, 0.8vh, 6px) 0 clamp(2px, 1vh, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers each row in the drawer */
}
.dh-drawer-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;           /* only the text + padding is clickable */
  /* Fluid vertical padding: shrinks on short screens so all 8 nav items
     plus the icon row fit without scrolling. Cap was 20px -- lowered
     to 13px so taller phones (iPhone 16, Pro Max, etc.) don't render
     huge rows that overflow Safari's visible viewport. The cap only
     affects screens taller than ~720px; shorter screens use the vh
     middle term unchanged. */
  padding: clamp(4px, 1.8vh, 13px) 24px;
  font-family: 'Barlow Condensed', sans-serif;
  /* Fluid font-size: cap lowered 24px -> 19px -> 16px. At 19px the
     bold uppercase Barlow Condensed rows still read cramped on real
     phones; 16px lets the whole list sit comfortably with clean
     vertical rhythm and keeps wide words (CLUBHOUSE, PROGRAMS) well
     off the edges. */
  font-size: clamp(14px, 2.4vh, 16px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dh-drawer-row:hover {
  color: var(--orange);
  transform: scale(1.06);
}
.dh-drawer-row:active,
.dh-drawer-row:focus-visible {
  background: rgba(var(--orange-rgb), 0.08);
  color: var(--orange);
  outline: none;
  transform: scale(1.06);
}
/* Tablet override: between 768px and 1024px the drawer is still in
   use (drawer hides above 1024px) but the screen is large enough
   that phone-sized 19px font + 13px padding looks cramped relative
   to the available real estate. Bump caps up so iPads and similar
   tablets get proportionate sizing. Floors are raised too -- even
   short tablets in landscape have plenty of room compared to the
   tightest phones, so no need for them to shrink as aggressively.
   Phones (<=767px) keep their tighter caps, untouched.

   The inner-menu links (.dh-drawer-link) need the identical bump, but
   their base rule lives further down the file and would beat this
   override on source order (media queries add no specificity). Their
   tablet override is co-located with that base rule instead -- see the
   DRAWER TYPE SCALE section below. */
@media (min-width: 768px) and (max-width: 1024px) {
  .dh-drawer-row {
    padding: clamp(10px, 2vh, 22px) 24px;
    font-size: clamp(20px, 3vh, 28px);
  }
}
/* Light-mode hover: same grow, same orange (orange reads against
   both dark and light backgrounds, no need to vary by mode). */
.dumb-header.is-light ~ .dh-drawer .dh-drawer-row:hover {
  color: var(--orange);
}
/* Chevrons removed per design -- main nav rows, CTA rows */
.dh-drawer-chev { display: none; }

/* Account + Cart icons below the nav list. Icon-only, centered.
   Matches the desktop header's icon style but lives in the drawer. */
.dh-drawer-icons {
  display: flex;
  justify-content: center;
  gap: 36px;
  /* Top padding gives breathing room from the nav above. Bottom is 0
     because the social row below has its own matching top padding,
     producing equal spacing above and below the account/cart row.
     Floor lowered from 8px -> 4px to match the rest of the drawer's
     short-screen behavior. */
  padding: clamp(4px, 2vh, 20px) 0 0;
}
.dh-drawer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  position: relative;  /* for .dh-cart-count positioning */
}
.dh-drawer-icons a:hover,
.dh-drawer-icons a:active {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
  transform: scale(1.12);
}
.dh-drawer-icons svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

/* Social icon row below the account/cart icons in the mobile drawer.
   Inherits base .dh-social-icons sizing. Top padding matches the
   account/cart row's top padding so the gap above the social row
   equals the gap above the account/cart row. */
.dh-drawer-social {
  /* Floors lowered from 8/12 -> 4/8 to match the rest of the drawer's
     short-screen tightening; the row collapses gracefully on small
     phones rather than plateauing and pushing the top nav off-screen. */
  padding: clamp(4px, 2vh, 20px) 0 clamp(8px, 3vh, 32px);
  gap: 4px;
}


/* ============================
   SUB-SCREENS (Level 1)
   ============================ */
/* Subheader (back button + section title) is hidden per design --
   the hamburger's back-chevron state is the sole back affordance
   and tiles fill the drawer edge-to-edge. */
.dh-drawer-subheader {
  /* Shown as the inner-menu header — the main-menu item's name, styled
     like a column header. The back affordance is still the hamburger's
     back chevron, so the back button inside stays hidden. */
  display: block;
  text-align: center;
  padding: 16px 16px 2px;
}
.dh-drawer-back {
  /* Hidden -- the hamburger transforms into a back chevron
     when a sub-screen is active and serves as the back button.
     Handler is still wired to this element as a defensive fallback. */
  display: none;
}
.dh-drawer-back-chev {
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.dh-drawer-section-title {
  display: block;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5) !important;
}

/* Tile grid -- 2 columns on mobile, every tile is a 1:1 square */
.dh-drawer-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 14px;
}

/* Individual tiles -- structure mirrors desktop .dh-mega-item so text
   styles can match exactly, just scaled down for the narrower column. */
.dh-drawer-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0b07;
  text-decoration: none;
  color: #fff;
  box-sizing: border-box;
  transition: transform 0.15s ease;
}
.dh-drawer-tile:active { transform: scale(0.98); }

/* When a section has an odd number of tiles, the last one is an orphan.
   Span it across both columns with a 2:1 aspect so it reads as a
   natural bottom banner instead of leaving an empty cell.
   Explicit .is-full does the same thing when hierarchy calls for it. */
.dh-drawer-tiles > .dh-drawer-tile.is-full,
.dh-drawer-tiles > .dh-drawer-tile:not(.is-square):last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}

/* Explicit opt-out from the orphan-stretch rule above.
   Add .is-square to a tile that should remain a 1:1 square even when
   it happens to be the last child at an odd position. Used in Art and
   Shop drawers, where the last tile (Random Session / Latest Download)
   is a member of a 2-column "small squares" row -- letting the orphan
   rule fire would stretch it across the row and break the visual pair
   it forms with the tile right above (Latest Blog / Featured Download).
   :nth-last-child(2) backstop also normalises the *previous* tile in
   that row -- without it, when the orphan rule used to fire, the last
   even-position tile would sit in column 1 alone. */
.dh-drawer-tiles > .dh-drawer-tile.is-square {
  grid-column: auto;
  aspect-ratio: 1 / 1;
}

/* Giant variant -- spans both columns but keeps the 1:1 aspect of the
   regular square tiles, so it renders as a big full-width SQUARE
   instead of a half-height banner. Mirrors the desktop .dh-ch-giant
   Community Gallery hero in the Art mega menu, where the tile is
   the visual anchor of the panel. On mobile this becomes a roughly
   ~340px square (full drawer width) -- significantly more prominent
   than the standard 1:1 tiles, so it reads as a hero rather than
   just another row in the grid. */
.dh-drawer-tiles > .dh-drawer-tile.is-giant {
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
}

/* Loading-state shimmer for dynamic tiles */
.dh-drawer-tile.is-loading {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}
/* Dynamic thumb starts hidden, fades in when loaded */
.dh-drawer-tile img.is-hidden { opacity: 0; }
.dh-drawer-tile img {
  transition: opacity 0.3s ease;
}

.dh-drawer-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dh-drawer-tile.is-logo img {
  /* Program logo tiles: contain-fit with padding */
  object-fit: contain;
  padding: 14%;
  box-sizing: border-box;
}

/* Gradient overlay -- same shape as desktop tiles */
.dh-drawer-tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,1)    15%,
    rgba(0,0,0,0.85) 35%,
    rgba(0,0,0,0.50) 65%,
    rgba(0,0,0,0.0)  100%);
  padding: 18px 14px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 2;
}

/* Eyebrow -- exact desktop styling, slightly smaller to fit the column */
.dh-drawer-tile-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Title -- exact desktop styling, scaled down for mobile */
.dh-drawer-tile-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-transform: capitalize;
}

/* Meta line -- small price/secondary text below the title, mirrors
   the desktop .dh-mega-item-meta. Used by the Shop product tiles
   to show prices. The :empty rule means tiles without a meta value
   collapse cleanly with no leftover spacing. */
.dh-drawer-tile-meta {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: var(--orange);
  margin: 4px 0 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-drawer-tile-meta:empty { display: none; }

/* Orphan (full-width) tile gets slightly larger type to match its size.
   Mirrors the orphan-stretch rule above: skipped when .is-square opts
   the tile out of stretching, since a square tile shouldn't bump its
   type size. */
.dh-drawer-tiles > .dh-drawer-tile:not(.is-square):last-child:nth-child(odd) .dh-drawer-tile-title {
  font-size: 20px;
}

/* Text-only tile (no image) -- used when no good image is available */
.dh-drawer-tile.is-text {
  background: linear-gradient(135deg, #1a1107 0%, #0a0604 100%);
  border: 0.5px solid rgba(var(--orange-rgb), 0.18);
}
.dh-drawer-tile.is-text .dh-drawer-tile-overlay {
  background: none;
  height: 100%;
  justify-content: flex-end;
}

/* "View [section] page" CTA is hidden per design -- tiles inside
   each section already link to their respective pages, so the
   footer CTA is redundant. Rule kept so the class is a no-op
   rather than a leak if reintroduced later. */
.dh-drawer-section-cta {
  display: none;
}

/* ===========================================================
   NEWSLETTER + SOCIAL PANELS inside the mobile drawer
   These reuse the desktop panel modifier classes
   (.dh-about-newsletter-panel, .dh-about-social-panel) on top
   of the standard .dh-drawer-tile base, so they share structure
   (border-radius, :active scale) with the rest of the drawer.
   The overrides below replace what the legacy .dh-about-panel
   class used to provide (centered flex layout, padding) and dim
   the background image to match the desktop panels'
   .dh-mega-item-thumb img opacity.

   The two panels need *different* aspect rules: the newsletter
   matches the standard .is-full wide tile (2:1) so it reads as a
   sibling of the Blog tile sitting right above it, while the
   social panel needs more vertical room for the eyebrow + full
   icon row + gaps and so keeps a content-driven height.
   =========================================================== */
.dh-drawer-tiles .dh-about-newsletter-panel,
.dh-drawer-tiles .dh-about-social-panel {
  grid-column: 1 / -1;
  padding: 22px 20px !important;
  /* Center inner content vertically + horizontally. .dh-drawer-tile
     defaults to display:block; we need flex here to stack and center
     the eyebrow / title / icons over the background image. */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
/* Newsletter panel: matches the standard wide-tile (.is-full) aspect
   ratio of 2:1 so it reads as the same size as the Blog tile that
   sits right above it in the About drawer. Previously this used
   `aspect-ratio: auto + min-height: 170px` which on an iPhone-class
   viewport rendered a few pixels shorter than its 2:1 neighbours,
   making the row look mismatched. */
.dh-drawer-tiles .dh-about-newsletter-panel {
  aspect-ratio: 2 / 1;
  /* Safety net for very narrow viewports where 2:1 of the drawer
     width would still feel cramped against the eyebrow + 22px title. */
  min-height: 170px;
}
/* Social panel needs more vertical room than the newsletter panel --
   eyebrow + full icon row + gaps want about 220px of content height,
   plus breathing room so the tile reads as a proper bottom banner
   rather than looking cramped. Aspect-ratio:auto lets the height
   grow with content. */
.dh-drawer-tiles .dh-about-social-panel {
  aspect-ratio: auto !important;
  min-height: 220px;
}
/* Background image dimming -- match the muted look of the desktop
   panels (which apply opacity:0.7 to .dh-mega-item-thumb img). The
   mobile tiles now have a direct <img> child instead of the legacy
   .dh-about-panel-bg wrapper, so we target the image directly. */
.dh-drawer-tiles .dh-about-newsletter-panel > img,
.dh-drawer-tiles .dh-about-social-panel > img {
  opacity: 0.7;
}
/* Newsletter heading -- bigger than the standard .dh-drawer-tile-title
   (17px) to match the visual prominence of the desktop newsletter
   panel. Remove the line-clamp ellipsis so the wrapping reads cleanly. */
.dh-drawer-tiles .dh-about-newsletter-panel .dh-drawer-tile-title {
  font-size: 22px;
  -webkit-line-clamp: 2;
}
/* Eyebrow on the newsletter tile carries longer text ("Free Download
   + 15% Off"), so allow it to wrap onto a second line. The default
   .dh-drawer-tile-eyebrow is nowrap+ellipsis. */
.dh-drawer-tiles .dh-about-newsletter-panel .dh-drawer-tile-eyebrow {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 95%;
}

/* ===== Mobile drawer Discord tile =====
   Spans both columns (is-giant = full-width square). Reuses the same
   dh-discord-* child classes as the desktop tile; only the count font
   size is dialed back slightly to suit the narrower mobile viewport. */
.dh-drawer-discord-tile {
  /* Layered backgrounds matching the desktop tile's treatment, but at
     62% height to match .dh-drawer-tile-overlay (mobile drawer uses
     a slightly taller gradient than desktop's 60%). See the desktop
     .dh-about-discord-tile rule for why we layer here instead of
     using ::after (border) or ::before (blurple glow). */
  background:
    linear-gradient(to top,
      rgba(0,0,0,1)    0%,
      rgba(0,0,0,1)    15%,
      rgba(0,0,0,0.85) 35%,
      rgba(0,0,0,0.50) 65%,
      rgba(0,0,0,0.0)  100%) bottom / 100% 62% no-repeat,
    #1a1b1e !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 28px !important;
  box-sizing: border-box;
  text-align: center;
}
.dh-drawer-discord-tile::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 55%;
  background: radial-gradient(ellipse, rgba(88,101,242,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.dh-drawer-discord-tile .dh-discord-count {
  font-size: 64px;
  letter-spacing: -1px;
}

/* When search opens, the 400px-wide input no longer fits comfortably
   alongside the full nav at narrower widths -- it pushes the
   account/cart icons offscreen or overflows the viewport. Hide the
   nav while .is-searching is active so search has room. The nav
   reappears the moment search closes. 1460px is the threshold where
   the nav + 400px search start crowding each other; above that there's
   enough room for both to coexist. */
@media (max-width: 1460px) {
  .dumb-header.is-searching .dh-nav {
    display: none !important;
  }
}

@media (max-width: 1280px) {
  /* .dh-console-link (Live Monitor / Lineups / Library) is a sibling of the
     regular nav links inside .dh-nav, so it must shrink in lockstep — otherwise
     the Console items stay at the 13px base size while everything else drops to
     12px, reading as a mismatched font on /console and any ≤1280px width. */
  .dh-nav a, .dh-nav button.dh-folder-trigger, .dh-nav button.dh-console-link {
    padding: 10px 10px;
    font-size: 12px;
  }
  .dh-inner { gap: 16px; padding: 0 24px; }
}
@media (max-width: 1080px) {
  .dh-nav a, .dh-nav button.dh-folder-trigger, .dh-nav button.dh-console-link {
    /* Tighter vertical padding in the wrap zone so the two rows read as one
       compact block instead of two far-apart lines. Horizontal padding is
       unchanged so the per-row item packing (and the pill hover shape) stays
       the same as before. Console links included so they match the rest. */
    padding: 4px 8px;
    font-size: 11.5px;
    letter-spacing: 0.2px;
  }
  /* Wrap zone: between the full desktop bar and the mobile burger (≤768px), let
     the nav wrap onto extra rows instead of overflowing. Rows stay left-aligned
     after the logo, reading as a stacked two-line (sometimes three, for admins
     whose extra Console links push the count to 13) menu. row-gap kept small so
     the wrapped rows sit tight together rather than looking like two menus. */
  .dh-nav { flex-wrap: wrap; row-gap: 3px; align-content: center; }
  .dh-inner { gap: 12px; padding: 0 20px; }
}
@media (min-width: 769px) and (max-width: 1080px) {
  /* The wrapped nav can need a 2nd or 3rd row, so let the header grow to fit
     instead of clipping — but never shrink below its normal height (so it's
     unchanged at the >1080px boundary and when only one row is needed). The
     fixed-position header is offset by the spacer below it, which is CSS-fixed;
     JS measures the grown header and feeds the value back via --h-wrap (same
     idiom as the announcement bar's --ann-h) so page content never hides under
     it. Compact-on-scroll keeps the normal height here rather than shrinking,
     which also avoids a 3rd row clipping at the 74px compact height. */
  .dumb-header,
  .dumb-header.is-compact {
    height: auto !important;
    min-height: var(--h-full, 100px) !important;
  }
  .dumb-header-spacer,
  .dumb-header.is-compact ~ .dumb-header-spacer {
    height: calc(var(--h-wrap, 100px) + var(--ann-h, 0px)) !important;
  }
}
@media (max-width: 768px) {
  /* Hide desktop nav, show hamburger */
  .dh-nav { display: none !important; }
  .dh-burger { display: flex !important; }

  /* (Removed the forced black background that used to live here.
     Letting mobile inherit the same transparency logic as desktop --
     .is-light handles light-background pages by flipping the burger
     lines to dark; .is-compact paints it black on scroll;
     .dumb-header-solid and the blog-post auto-selector cover the
     opt-in solid cases; .dumb-header-floats handles hero pages.
     If a page reads as transparent-over-white and the white burger
     lines vanish, fix it by adding that path to .is-light or dropping
     dumb-header-solid in its page header injection.) */

  /* When the mobile drawer is open, paint the header to match the
     drawer below it -- otherwise on transparent/hero pages there's a
     visible strip at the top where the page bleeds through. The
     burger gets .is-open at the same time the drawer does, so we key
     off it via :has() (no JS coupling needed). The header fade and
     the drawer fade share identical timing/easing (see .dh-drawer's
     transition) so they cross-fade as one unified surface. The
     .is-light variant has higher specificity to keep the white
     drawer pairing intact. */
  .dumb-header:has(.dh-burger.is-open) {
    background: #000 !important;
  }
  .dumb-header.is-light:has(.dh-burger.is-open) {
    background: #fff !important;
  }

  /* Mobile actions: keep only the search icon in the header.
     Account + cart live in the drawer as icon-only links instead. */
  .dh-actions > a[aria-label="Account"],
  .dh-actions > a[aria-label="Cart"] {
    display: none !important;
  }

  /* On mobile: hamburger left, logo centered, actions right */
  .dh-inner {
    position: relative !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    gap: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .dh-burger    { order: 1; }
  .dh-actions   { order: 3; }

  /* Logo absolutely centered regardless of flanking widths */
  .dh-logo-wrap {
    order: 2;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none;
  }
  .dh-logo-wrap a { pointer-events: auto; }

  /* When search is open on mobile, the logo animates away so the
     search input can expand to fill the available width. */
  .dumb-header.is-searching .dh-logo-wrap {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) !important;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
  }
  .dumb-header:not(.is-searching) .dh-logo-wrap {
    transition: opacity 0.22s ease 0.05s, transform 0.22s ease 0.05s;
  }

  /* Burger stays visible when searching on mobile -- the layout is
     [burger] [search input fills] [X]. Only the (absolutely-centered)
     logo fades out to make room for the expanded input. */

  /* Default mobile search mount width (when NOT actively searching).
     Not actually shown -- mount is width:0 until opened. Kept as a
     baseline in case is-searching isn't applied for some reason. */
  .dh-search-mount.is-open {
    width: calc(100vw - 100px) !important;
    max-width: 420px;
  }

  /* ======================================================
     MOBILE SEARCH-OPEN STATE
     When is-searching is on the header, the mobile layout is:
       [ search input .................. ] [ X ]
     - Burger (left) and logo (absolute-centered) are hidden via
       the rules above (.dh-burger width:0, .dh-logo-wrap opacity:0)
     - .dh-actions expands to fill the full inner width (margin-left:0)
     - Inside .dh-actions, the search mount sits on the LEFT (order:-1)
       and the toggle-turned-X sits on the RIGHT
     - Search mount takes flex:1 to fill the remaining width
     - Toggle stays visible (overriding .is-hidden) and shows the close
       icon instead of the magnifier
     ====================================================== */
  .dumb-header.is-searching .dh-actions {
    margin-left: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }
  /* Match the 8px gap on each side of the search input -- on the right
     side the .dh-actions gap provides it (between mount and the X), on
     the left side the .dh-inner gap provides it (between the burger
     and .dh-actions). Together these give a symmetric margin around
     the search bar so it sits centered between the two Xs. */
  .dumb-header.is-searching .dh-inner {
    gap: 8px !important;
  }
  .dumb-header.is-searching .dh-search-mount.is-open {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    order: -1;
  }
  /* Toggle stays visible on mobile when searching -- the JS adds the
     .is-hidden class which normally hides it on desktop. Here we undo
     that on mobile so it can serve as the close-X. Match the burger's
     44x44 container so left & right icons are visually identical. */
  .dumb-header.is-searching .dh-search-toggle,
  .dumb-header.is-searching .dh-search-toggle.is-hidden {
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  /* Swap the search icon for an X close icon while searching.
     Sized 22x22 with stroke 2 to visually match the burger's X
     (two 22px spans, 2px thick, rotated 45deg). */
  .dumb-header.is-searching .dh-search-toggle .dh-search-icon { display: none !important; }
  .dumb-header.is-searching .dh-search-toggle .dh-search-close {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
  }

  /* Shrink logo on mobile */
  .dh-logo img {
    height: 30px !important;
    max-height: 30px !important;
  }
}
@media (max-width: 768px) {
  .dumb-header { --h-full: 71px; --h-compact: 69px; }
  .dh-logo img { height: 30px; }
  .dumb-header.is-compact .dh-logo img { height: 24px !important; }
  .dh-inner { padding: 0 12px; }
  .dh-search-mount .sqs-search-page-list,
  .dh-search-mount .search-results,
  .dh-search-mount ul { width: calc(100vw - 24px) !important; right: -48px !important; }
}

/* ===========================================================
   TABLET -> MOBILE HEADER  (site-wide, any orientation)
   ===========================================================
   The <=768px block above only catches phones, so tablets (iPads
   in portrait especially) sit in the desktop-nav "wrap zone",
   which reads awkwardly. Show the mobile burger layout on tablets
   instead. Gated by the `dh-tablet` class (set by JS below, keyed
   on the rotation-invariant min screen dimension + touch) rather
   than a width media query, so it tracks true tablets in either
   orientation and never mistakes a small desktop window for one.

   Unlike the phone block we do NOT shrink the header to 71px (the
   Clubhouse player reserves 100px above itself, and the drawer's
   top is 100px here) -- we keep the full 100px header and center
   the logo against it. `.dh-inner` collapses to its ~44px content
   height, so with it as the positioning context the absolutely-
   centered logo lands too high and clips; `position:static` on it
   makes the logo resolve against the 100px fixed header and sit
   dead-center. The drawer is forced display:block so it also
   works on tablet-landscape (>1024px, where the base rule hides
   it). */
html.dh-tablet .dh-nav { display: none !important; }
html.dh-tablet .dh-burger { display: flex !important; order: 1 !important; }
html.dh-tablet .dh-actions { order: 3 !important; }
/* Give dh-inner an explicit height (not height:100%, which collapses to ~44px
   content-height on real Safari/iPad even though the fixed header is a definite
   100px) so its align-items:center reliably vertically-centers the burger. The
   logo stays absolute-centered against the fixed header; keeping dh-inner
   position:static means it is NOT the logo's positioning context. */
html.dh-tablet .dh-inner { position: static !important; justify-content: space-between !important; padding: 0 12px !important; gap: 0 !important; height: var(--h-full) !important; align-items: center !important; }
html.dh-tablet .dh-logo-wrap { order: 2 !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; }
html.dh-tablet .dh-logo-wrap a { pointer-events: auto !important; }
html.dh-tablet .dh-actions > a[aria-label="Account"],
html.dh-tablet .dh-actions > a[aria-label="Cart"] { display: none !important; }
html.dh-tablet .dh-drawer { display: block !important; }
html.dh-tablet .dumb-header:has(.dh-burger.is-open) { background: #000 !important; }
html.dh-tablet .dumb-header.is-light:has(.dh-burger.is-open) { background: #fff !important; }

/* ---- WIDTH-BASED FALLBACK for the same tablet -> burger layout ----
   The html.dh-tablet class above is gated on TOUCH detection
   (navigator.maxTouchPoints), which is unreliable: it fails in desktop-mode
   tablet browsers, some Chrome/Android tablet configs, and any non-touch narrow
   window -- leaving the awkward two-row wrapped desktop nav (the exact state we
   want to kill). So mirror the tablet rules by WIDTH too, covering the whole
   wrap zone (769-1024px). Any device/window in this range gets the clean burger
   header regardless of touch. Values are identical to the dh-tablet block, so
   the two mechanisms never conflict where they overlap. */
@media (min-width: 769px) and (max-width: 1024px) {
  .dh-nav { display: none !important; }
  .dh-burger { display: flex !important; order: 1 !important; }
  .dh-actions { order: 3 !important; }
  .dh-inner { position: static !important; justify-content: space-between !important; padding: 0 12px !important; gap: 0 !important; height: var(--h-full) !important; align-items: center !important; }
  .dh-logo-wrap { order: 2 !important; position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; }
  .dh-logo-wrap a { pointer-events: auto !important; }
  .dh-actions > a[aria-label="Account"],
  .dh-actions > a[aria-label="Cart"] { display: none !important; }
  .dh-drawer { display: block !important; }
  .dumb-header:has(.dh-burger.is-open) { background: #000 !important; }
  .dumb-header.is-light:has(.dh-burger.is-open) { background: #fff !important; }
}

/* ===========================================================
   CLUBHOUSE PAGES: nudge the burger further out toward the edge
   ===========================================================
   On the Clubhouse player pages only, push the burger toward the screen edge so
   it lines up with the Minnit chat toolbar's profile icon (which sits closer to
   the edge than the header's default 12px inset). Paired with the
   `.mobile-view-cluster { right }` value in the Clubhouse player (browse icon).
   -6px moves it from ~12px to ~6px; make it more negative to push further out. */
html.dh-page-clubhouse-beta .dh-burger,
html.dh-page-app .dh-burger {
  margin-left: -6px !important;
}

/* ===========================================================
   CLUBHOUSE STANDALONE WEB APP: safe-area + solid-black header
   ===========================================================
   In the installed iOS web app (display-mode: standalone) with
   viewport-fit=cover, content draws under the status bar. The floating
   header sits at top:0 with a transparent background, so (a) its logo/burger
   tuck up under the clock (the "header shifts past the top" when the drawer
   opens and reveals it) and (b) the transparency lets the player show through
   the status-bar strip (reads as "not fully black"). Fix both: force the
   header solid black and pad its content down past the safe area. content-box
   so the padding ADDS to the header height (works at every header height,
   phone 71px / tablet 100px) rather than eating into it. Clubhouse pages only. */
@media (display-mode: standalone) {
  /* Watch view: force the floating header solid black so the player can't show
     through the status-bar strip (the "not fully black" area). Height unchanged,
     so it won't grow down over the video (which sits ~65px from the top). */
  html.dh-page-clubhouse-beta .dumb-header,
  html.dh-page-app .dumb-header {
    top: 0 !important;
    background: #000 !important;
  }
  /* Drawer open: the header shows the logo + close (X), which otherwise tuck up
     under the status bar ("shifts the header past the top"). Pad them below the
     safe area — safe to grow the header here because no video is visible while the
     full-screen menu is open. content-box so the padding adds to the height. */
  html.dh-page-clubhouse-beta .dumb-header:has(.dh-burger.is-open),
  html.dh-page-app .dumb-header:has(.dh-burger.is-open) {
    box-sizing: content-box !important;
    padding-top: env(safe-area-inset-top) !important;
  }
}

/* ===========================================================
   INSTALLED WEB APP: header reaches the real top of the screen
   ===========================================================
   Bug (installed app, most obvious on tablet): page content is visible in the
   strip above the header -- the homepage hero paragraph reads continuously
   from behind the clock, interrupted by the header bar, then resumes below it.
   Cause: without viewport-fit=cover iOS resolves `position: fixed` against the
   SAFE AREA rather than the screen, so `.dumb-header { top: 0 }` sits ~32pt
   down while ordinary document content still paints from the physical top.
   The header can't paint into that strip either (fixed content is clipped to
   the same safe area), so no amount of background/pseudo-element covers it --
   the viewport itself has to change. The static viewport-fit=cover meta up top
   is the other half of this; neither half works alone.

   With cover on, top:0 is now the true top of the screen -- so the header
   already covers the strip. What's left is keeping its CONTENTS clear of the
   status bar, and keeping everything measured against the header's height in
   step with its new, taller box. content-box so the padding ADDS to the height
   rather than eating into it (works at every header height: phone 71px,
   tablet/desktop 100px, compact 69/74px).

   Ungated on purpose: env(safe-area-inset-top) is 0 wherever there's no inset
   (desktop, Android, non-notched phones, and any browser that doesn't honour
   cover), so these rules are an exact no-op there rather than something that
   needs a display-mode gate to stay safe. It also means Safari on a notched
   iPhone -- which now gets cover too -- is padded correctly instead of tucking
   the logo under the notch in landscape. */
.dumb-header {
  box-sizing: content-box !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* On tablet the logo is absolutely centered (top: 50%) against the header,
   and percentages there resolve against the PADDING box -- so the safe-area
   padding above would only push it down by half the inset, leaving it sitting
   higher than the burger and search icons (which are flex children of the
   100px content row). Add back the other half so all three line up again. */
.dh-logo-wrap {
  top: calc(50% + env(safe-area-inset-top, 0px) / 2) !important;
}

/* The spacer reserves the header's space in flow, so it has to grow by the
   same inset or the top of every page slides up under the taller header.
   Deliberately padding rather than restating the height: the height is
   computed by five different breakpoint rules (100/71/69/74px, --h-wrap in the
   wrap zone), and content-box padding rides on top of whichever one wins
   instead of trying to out-specify them all.

   Pages that opt into `dumb-header-floats` collapse the spacer to 0 on purpose
   so their hero renders behind the nav and starts at the true top of the
   screen -- padding it would push the hero down and undo exactly what cover
   just bought us. :not() leaves those alone; only their compact-state rule
   (which does reserve space) is topped up. */
html:not(.dumb-header-floats) .dumb-header-spacer,
html.dumb-header-floats .dumb-header.is-compact ~ .dumb-header-spacer {
  box-sizing: content-box !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* The drawer hangs off the bottom edge of the header (top: 100/71/69px across
   the breakpoints) and sizes itself with 100dvh, which under cover now
   includes the status-bar strip. Pin both to the header's real height:
   --h-wrap is header.offsetHeight, published by the header client, and
   offsetHeight includes the safe-area padding. */
html.dh-standalone .dh-drawer,
html.dh-standalone .dumb-header.is-compact ~ .dh-drawer {
  top: var(--h-wrap, 100px) !important;
  height: calc(100vh - var(--h-wrap, 100px)) !important;
  height: calc(100dvh - var(--h-wrap, 100px)) !important;
}

/* Clubhouse pages: force the page background solid black so the iOS status-bar
   strip (which draws page content behind the translucent status bar in the
   installed app) is always black — even where the floating header is transparent,
   and regardless of how the app reports its display-mode (standalone/fullscreen/
   minimal-ui). Not gated on standalone: these pages are black-themed anyway, and
   on mobile the player covers the body, so this only ever shows through at the
   very top. The splash keeps its own wood background (it's a separate overlay). */
html.dh-page-clubhouse-beta,
html.dh-page-clubhouse-beta body,
html.dh-page-app,
html.dh-page-app body {
  background: #000 !important;
}

/* ===========================================================
   CLUBHOUSE PLAYER LANDSCAPE TAKEOVER
   ===========================================================
   The Clubhouse stream player goes into a fullscreen "takeover"
   mode in landscape orientation at <=1024px viewports, where it
   pins itself at z-index 9999 and fills the screen with player
   on the left + chat on the right (no vertical room for a header).
   The player's own CSS hides Squarespace's default header in this
   mode (`header, #header, .header, [data-nc-group="top"]`) but
   doesn't know about our custom `.dumb-header` class. We hide ours
   here so it doesn't float on top of the player.

   Scoped via :has() so this ONLY fires on pages that contain the
   player (`.stream-wrapper` is the player's root element). Regular
   pages still keep their header in landscape -- which is correct
   UX since hiding nav globally would orphan the user. */
@media (max-width: 1024px) and (orientation: landscape) {
  body:has(.stream-wrapper) .dumb-header,
  body:has(.stream-wrapper) .dumb-header-spacer {
    display: none !important;
  }
}

/* ===========================================================
   EVENT DETAIL MODAL
   ===========================================================
   Opened when an event in the Events mega menu is clicked.
   Mirrors the events widget's modal so the look is identical
   regardless of whether the user is on the /shows page or any
   other page. Self-contained -- doesn't depend on the events
   widget being loaded. */
#dh-evt-overlay {
  display: none;
  position: fixed; inset: 0;
  /* Sits above EVERY other overlay -- including the Clubhouse Player's
     own TV Guide modal (z-index 999999999, set high so it can render
     above the fullscreen video). When a live row inside the player's
     TV Guide opens this modal, it needs to stack on top of that, not
     behind. Any value > 999999999 works; using 1e9 + 1 for clarity. */
  z-index: 1000000000;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#dh-evt-overlay.is-open { display: flex; }
#dh-evt-modal {
  font-family: 'Poppins', sans-serif;
  background: #13100d;
  border: 1px solid rgba(var(--orange-rgb), 0.3);
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  max-height: min(90vh, 90dvh);
  overflow-y: auto;
  /* Pairs with the body lock in openHeaderEventModal -- prevents
     touch scroll from chaining to the page when the user reaches
     the top or bottom of the modal content. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.85);
  animation: dh-evt-pop 0.2s ease;
}
@keyframes dh-evt-pop {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
#dh-evt-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s;
}
#dh-evt-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
#dh-evt-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 18px 18px 0 0; display: block;
  background: rgba(255,255,255,0.04);
}
#dh-evt-img.is-hidden { display: none; }
#dh-evt-noimg {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
  border-radius: 18px 18px 0 0;
}
#dh-evt-noimg.is-hidden { display: none; }
#dh-evt-body { padding: 22px 24px 26px; }
#dh-evt-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 10px;
}
#dh-evt-badges:empty { display: none; }
#dh-evt-title {
  font-size: 22px; font-weight: 600; color: #fff;
  line-height: 1.3; margin-bottom: 3px;
}
#dh-evt-show {
  font-size: 12px; color: rgba(255,255,255,0.38);
  margin-bottom: 10px;
}
#dh-evt-when {
  font-size: 12px; color: rgba(255,255,255,0.45);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
}
#dh-evt-desc {
  font-size: 12px; line-height: 1.75;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 16px; margin-bottom: 20px;
}
#dh-evt-desc:empty { display: none; }
#dh-evt-desc p { margin-bottom: 8px; }
#dh-evt-desc ul { padding-left: 18px; margin-bottom: 8px; }
#dh-evt-desc li { margin-bottom: 4px; }
#dh-evt-desc a { color: var(--orange); text-decoration: none; }
#dh-evt-desc a:hover { text-decoration: underline; }
.dh-evt-badge {
  display: inline-flex; align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  text-decoration: none;
  transition: filter 0.15s;
}
.dh-evt-badge:hover { filter: brightness(1.25); }
.dh-evt-badge-twitch { background: rgba(145,70,255,0.2); color: #c490ff; border: 1px solid rgba(145,70,255,0.3); }
.dh-evt-badge-club   { background: var(--orange-soft);  color: var(--orange); border: 1px solid rgba(var(--orange-rgb), 0.35); }
.dh-evt-badge-art    { background: rgba(56,189,148,0.15); color: #4dd6a8; border: 1px solid rgba(56,189,148,0.25); }
.dh-evt-badge-weird  { background: rgba(56,130,246,0.15); color: #60a5fa; border: 1px solid rgba(56,130,246,0.3); }
.dh-evt-badge-lodge  { background: rgba(220,38,38,0.18); color: #ef4444; border: 1px solid rgba(220,38,38,0.4); }
.dh-evt-cal-lbl {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.28); margin-bottom: 10px;
}
.dh-evt-cal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dh-evt-cal-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.dh-evt-cal-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}

/* Share row -- shows above the calendar buttons. URL field is
   selectable text; button copies + flashes a "Copied!" state in
   the brand teal-green. The is-hidden modifier lets openHeaderEventModal
   suppress the row when the event lacks a stable id. */
.dh-evt-share-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.dh-evt-share-row.is-hidden { display: none; }
.dh-evt-share-url {
  flex: 1; font-size: 11px; color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 8px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif; user-select: all;
  text-align: left;
}
.dh-evt-copy-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dh-evt-copy-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.dh-evt-copy-btn.copied {
  border-color: rgba(56,189,148,0.4);
  color: #4dd6a8;
  background: rgba(56,189,148,0.08);
}
@media (max-width: 650px) {
  .dh-evt-cal-row { flex-direction: column; }
  .dh-evt-cal-btn { justify-content: center; }
  #dh-evt-body { padding: 18px 18px 22px; }
}

/* ===========================================================
   PROGRAM GUIDE MODAL (TV Guide)
   ===========================================================
   Opens when the TV Guide card in the Clubhouse mega menu is
   clicked. Mirrors the homepage's "What's Playing?" modal so
   the experience is identical regardless of where it's opened
   from. Prefix is dh-pg- so it doesn't collide with the small
   dh-tvg- "Now Playing" card in the mega menu. */
/* MOVED 2026-08-05 — the program guide was rebuilt to match the Clubhouse
   player's icon rails, and its stylesheet now ships from the worker with the
   markup it styles: Cloudflare/Dumb 247 Scheduler/dh-markup-client.txt (served
   as /dh-markup.js). Editing it there needs a wrangler deploy, not a paste of
   this file. The old dh-pg-* block that lived here was deleted; until this file
   is re-pasted the live page still carries it, which is harmless — the worker
   sheet is injected later in the document and wins. */

/* ===========================================================
   CUSTOM FOOTER -- mirrors header aesthetic.
   Centered nav list + bottom strip with copyright and search.
   =========================================================== */

/* Hide Squarespace's default footer. SQS templates wrap the native
   footer in different elements depending on theme -- we cover the
   common ones with broad selectors. The :not(.dumb-footer*) escape
   keeps our custom footer untouched. Scoped to skip the Squarespace
   editor (sqs-edit-mode-active) so any blocks accidentally left in the
   native footer stay visible/deletable while logged in, without ever
   showing up to visitors. */
body:not(.sqs-edit-mode-active) #footer-sections,
body:not(.sqs-edit-mode-active) .footer-sections,
body:not(.sqs-edit-mode-active) [data-controller="FooterSections"],
body:not(.sqs-edit-mode-active) .sqs-footer-section,
body:not(.sqs-edit-mode-active) > footer:not(.dumb-footer),
body:not(.sqs-edit-mode-active) .Footer:not(.dumb-footer),
body:not(.sqs-edit-mode-active) .site-footer:not(.dumb-footer) {
  display: none !important;
}

.dumb-footer {
  background: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  position: relative;
  z-index: 10;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  /* Squarespace's page wrapper sometimes applies a global border-radius
     that produces rounded bottom corners on the footer. Force flat. */
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.df-inner {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 56px 4vw 28px;
  box-sizing: border-box;
}

/* -- Centered nav --------------------------------------- */
.df-nav {
  text-align: center;
  margin-bottom: 40px;
}
.df-nav-logo {
  display: inline-block;
  margin: 0 0 28px;
  transition: opacity 0.18s ease;
}
.df-nav-logo:hover {
  opacity: 0.8;
}
.df-nav-logo img {
  height: 72px;
  width: auto;
  display: block;
}
/* Footer social row -- sits between logo and nav links */
.df-social {
  margin: 0 0 28px;
}

/* ===== Shared social icons row (.dh-social-icons) =====
   Used in: footer (.df-social), desktop About panel, mobile drawer
   About panel. Renders a centered row of inline-SVG icon links.
   !important on dimensions because some SQS page/product templates
   apply their own styles to anchor elements (width:100%, padding,
   etc.) that would otherwise stretch the icon buttons. */
.dh-social-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px;
  flex-wrap: wrap;
}
.dh-social-icons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 0 !important;
  color: #ffffff;
  text-decoration: none;
  border-radius: 50%;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  transition: color 0.18s ease, transform 0.18s ease;
}
.dh-social-icons a:hover {
  color: var(--orange);
  transform: translateY(-2px) scale(1.08);
}
.dh-social-icons svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
  display: block;
  transition: fill 0.18s ease;
}
.dh-social-icons a:hover svg {
  fill: var(--orange);
}
/* In the About dropdown panels the icons sit on the wood-panel tile.
   6 icons need to fit on one line, so we keep them no-wrap. */
.dh-about-social-panel .dh-social-icons {
  flex-wrap: nowrap !important;
  width: auto !important;
  /* Force above the background image. Without explicit stacking the
     absolutely-positioned thumb image (z-index: 0) would render on
     top of the static icons container, hiding them -- on mobile the
     wood image rendered dense enough to obscure them entirely. */
  position: relative;
  z-index: 2;
}
.dh-about-social-panel .dh-social-icons a {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}
.dh-about-social-panel .dh-social-icons svg {
  width: 28px !important;
  height: 28px !important;
  /* Drop shadow helps icons stand out against the busy wood-grain bg. */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
/* Matching shadow on the "FOLLOW US" eyebrow for visual consistency. */
.dh-about-social-panel .dh-social-eyebrow {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* About-menu footer: a standard divider, then a left-justified "Follow Us"
   social row. Distinct from .dh-about-social-panel (the centered wood-panel
   tile) — this matches the plain single-column text menu it sits under. */
.dh-about-follow {
  padding-top: 16px;
  border-top: 0.5px solid rgba(255,255,255,0.12);
}
.dh-about-follow-eyebrow {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
/* Override the shared row's centering — this one hugs the left edge, and the
   negative margin pulls the first icon's glyph flush with the text links. */
.dh-about-follow .dh-social-icons {
  justify-content: flex-start !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -6px;
}
.df-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
}
.df-nav a {
  display: inline-block;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3px;
  padding: 6px 12px;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}
.df-nav a:hover {
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.06);
}

/* -- Bottom strip --------------------------------------- */
.df-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0;
  font-size: 12px;
}
.df-copy {
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
  text-align: center;
}
/* Search styled to match the header search input -- same rounded
   rectangle (not pill), same rgba backgrounds, same Poppins 14px,
   same orange caret. Width bumped to 420px for footer prominence. */
.df-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 15px;
  padding: 0 6px 0 0;
  width: 420px;
  transition: border-color 0.18s ease;
  box-sizing: border-box;
}
.df-search:focus-within {
  border-color: rgba(255,255,255,0.35);
}
.df-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 16px;
  caret-color: var(--orange);
  -webkit-appearance: none;
}
.df-search input::placeholder {
  color: rgba(255,255,255,0.35);
  font-weight: 300;
}
.df-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}
.df-search button:hover {
  color: var(--orange);
  transform: scale(1.08);
}
.df-search button svg {
  width: 16px;
  height: 16px;
}

/* -- Mobile breakpoint ---------------------------------- */
@media (max-width: 768px) {
  .df-inner { padding: 40px 4vw 24px; }
  .df-nav ul { gap: 12px 22px; }
  .df-bottom {
    align-items: center;
    text-align: center;
  }
  .df-search {
    width: 100%;
  }
}

/* ---- Site_Header_Injection.html line 3576 ---- */
/* -- Desktop: single narrow column --------------------------- */
/* Every hybrid dropdown is one narrow column: grouped link lists stack
   vertically and any retained widget sits beneath the links.
   Falls back to 960px without :has().

   WIDTH IS FIXED, NOT CONTENT-FIT. These used to be `width: max-content`
   bounded to 340px, which sounds tidy but made each menu's width a
   function of its featured widget's title: a long title pushed the menu
   to the 340px cap, a short one collapsed it toward the 160px floor
   (measured: "Hi" -> 160px, a medium title -> 266px). So the menus
   disagreed with each other, and any one menu visibly jumped wider the
   moment its title finished loading (an empty title falls back to the
   short "Tune in" placeholder). 340px is the old cap -- i.e. what these
   menus already show whenever a title is long.

   At 240px a link's text budget is 164px (240 - 48px panel padding -
   28px link padding). Two labels exceed it and wrap to two lines:
   Archives' "The Dumb Industries Mystery Hour" (230px) and Shop's
   "Join Clubhouse" (100px label + an 83px "Auto-Discounts" meta tag).
   Fitting every link on one line needs ~310px. Re-measure before
   changing this number. */
.dh-dropdown:has(.dh-mega.is-hybrid) {
  /* 300px (was 240): a little more breathing room for the text menus, enough
     for the About "Follow Us" social row to sit on one line, and close to the
     ~310px "every link fits on one line" threshold noted above. */
  width: 300px;
  max-width: calc(100vw - 24px);
}
.dh-mega.is-hybrid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Compact Discord card — vertical, shrunk to sit neatly in a ~1:1 tile */
.dh-about-discord-wrap { width: 100%; }
.dh-about-discord-wrap .dh-about-discord-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 20px !important;
}
.dh-about-discord-tile .dh-discord-heading { font-size: 12px; margin-bottom: 8px; }
.dh-about-discord-tile .dh-discord-logo-wrap { margin-bottom: 8px; }
.dh-about-discord-tile .dh-discord-logo-wrap svg { width: 38px; height: 38px; }
.dh-about-discord-tile .dh-discord-count { font-size: 46px; letter-spacing: -1px; }
.dh-about-discord-tile .dh-discord-members-label { margin: 3px 0 8px; }
.dh-about-discord-tile .dh-discord-online { margin-bottom: 14px; }
.dh-about-discord-tile .dh-discord-cta { padding: 12px 22px; }
/* Retained widget: full width, beneath the links (order 2) */
.dh-mega-feature {
  order: 2;
  width: 100%;
  display: flex;
}
.dh-mega-feature > * { width: 100%; }

/* Single column of stacked link groups. No width:100% — that would
   zero out the panel's intrinsic width so fit-content collapses to the
   min; leaving width auto lets each menu size to its longest label. */
.dh-mega-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dh-link-group {}
.dh-link-group-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 6px;
  padding: 0 0 8px;
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.dh-mlink {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.dh-mlink:hover { color: var(--orange); background: rgba(var(--orange-rgb), 0.08); }
.dh-mlink-title {
  flex: 1 1 auto;
  min-width: 0;
  /* Wrap long labels in the narrow single column instead of truncating. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.dh-mlink-meta {
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.dh-mlink:hover .dh-mlink-meta { color: var(--orange); }
/* Recent/dynamic rows get a small orange dot marker */
.dh-mlink.is-recent::before {
  content: '';
  flex: 0 0 auto;
  width: 5px; height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.8;
}
/* Always-on LIVE signal (Dumb 24/7) — shows on desktop AND mobile
   (it's a dedicated element, not a .dh-*-meta, so it isn't hidden on
   mobile like the other metas). */
.dh-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ff4438;
}
.dh-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4438;
  box-shadow: 0 0 6px rgba(255,68,56,0.7);
  animation: dh-ch-pulse 2s ease-in-out infinite;
}

/* "More Rooms" per-room LIVE badge (pulsing dot + "LIVE"). Toggled by
   roomLiveDots(): each room lights during its weekly show window on the ET
   clock (see ROOM_SCHEDULE). Mirrors the top-of-menu .dh-live badge. [hidden]
   must beat the inline-flex default, hence the explicit rule. */
.dh-room-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 7px;
  vertical-align: middle;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ff4438;
}
.dh-room-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff4438;
  box-shadow: 0 0 6px rgba(255,68,56,0.7);
  animation: dh-ch-pulse 2s ease-in-out infinite;
}
.dh-room-live::after { content: 'LIVE'; }
.dh-room-live[hidden] { display: none; }

/* On "More Rooms" rows, keep the title tight so a "Free" meta sits right
   beside it instead of being pushed to the far edge, and let the LIVE badge
   own the right edge. Scoped to [data-room] so other .dh-mlink rows (e.g.
   Shop's "Auto-Discounts") keep their right-aligned meta. */
.dh-mlink[data-room] .dh-mlink-title { flex: 0 1 auto; }
.dh-mlink[data-room] .dh-mlink-meta { order: 1; }
.dh-mlink[data-room] .dh-room-live { order: 2; margin-left: auto; }

/* Clubhouse header: "The Dumb Clubhouse" + LIVE on one row, then a
   Now-Playing line beneath it (which carries the section divider). */
/* Clubhouse "Now Playing" block — top of the menu. Row: "NOW PLAYING"
   (left) + LIVE (right); current show beneath (left). On hover the whole
   block crossfades to a "Join" CTA. Scoped under .dh-mega-links so it
   beats `.dh-nav a { align-items:center }`. */
.dh-mega-links .dh-ch-nowplaying {
  position: relative;
  display: grid;
  align-items: stretch;
  text-align: left;
  text-decoration: none;
  padding: 0 0 10px;
  margin: 0 0 8px;
  border-radius: 0;   /* cancel the .dh-nav a pill radius */
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
/* No rounded hover-highlight box on this block (cancels .dh-nav a:hover). */
.dh-mega-links .dh-ch-nowplaying:hover { background: transparent; }
.dh-ch-np-inner,
.dh-ch-np-join { grid-area: 1 / 1; }
.dh-ch-np-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.dh-ch-np-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dh-ch-np-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-dim);
}
.dh-ch-np-title {
  font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 13px;
  line-height: 1.25; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dh-ch-np-title:empty::before { content: 'Tune in'; color: var(--ink-dim); }
/* Hover CTA — sits stacked on the same grid cell, revealed on hover. */
.dh-ch-np-join {
  align-self: center;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--orange);
  white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.dh-mega-links .dh-ch-nowplaying:hover .dh-ch-np-inner { opacity: 0; transform: translateY(-6px); }
.dh-mega-links .dh-ch-nowplaying:hover .dh-ch-np-join { opacity: 1; transform: translateY(0); }

/* Static-CTA variant -- the widget just states its CTA instead of
   crossfading to it from a title. Art's header uses this: it has no
   eyebrow/title to show, so there's nothing to cross-fade from. Also
   covers the drawer copy, which has no hover state at all.

   Colour is inverted from the crossfade variant: white at rest, orange
   on hover. (The crossfade variant only ever shows its CTA already
   hovered, so orange is its resting colour.) The opacity/transform
   transition is dropped -- this CTA never fades in, it just recolours. */
.dh-ch-nowplaying.is-cta .dh-ch-np-join,
.dh-drawer-nowplaying.is-cta .dh-ch-np-join {
  opacity: 1;
  transform: none;
  color: var(--ink);
  transition: color 0.18s ease;
}
.dh-mega-links .dh-ch-nowplaying.is-cta:hover .dh-ch-np-join,
.dh-drawer-nowplaying.is-cta:active .dh-ch-np-join {
  color: var(--orange);
}

/* Footer variant -- the same widget sitting at the BOTTOM of a menu, so
   its divider flips to the top edge and the spacing mirrors the header's. */
.dh-mega-links .dh-ch-nowplaying.is-foot {
  border-bottom: 0;
  border-top: 0.5px solid rgba(255,255,255,0.12);
  padding: 10px 0 0;
  margin: 8px 0 0;
}
/* align-self: stretch because .dh-drawer-links centres its children and
   sizes them to their content -- without it the widget would be only as
   wide as that panel's title, and its text would be boxed in.

   The divider is a centred pseudo-element rather than a border on that
   stretched box, so it can be short without narrowing the widget. Fixed
   width (not a % of the panel) keeps it identical in every panel, which
   is the whole point -- a content-width rule would differ per title. */
.dh-drawer .dh-drawer-nowplaying.is-foot {
  align-self: stretch;
  position: relative;
  margin: 8px 0 0;
}
.dh-drawer .dh-drawer-nowplaying.is-foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(200px, 50%);
  height: 0.5px;
  background: rgba(255,255,255,0.12);
}

/* "NEW" badge — shown on desktop AND mobile until the user opens the
   newest item behind that link (tracked in localStorage; see NEW_FEEDS). */
.dh-new {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: var(--orange);
  padding: 2px 6px; border-radius: 4px; line-height: 1.2;
}
.dh-new[hidden] { display: none; }

/* Member discount badge (e.g. "15% Off") — populated + revealed only for
   logged-in members by the member-tier check. */
.dh-discount-badge {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
  color: #35c26a;
}
.dh-discount-badge[hidden] { display: none; }

.dh-mlink.is-loading .dh-mlink-title { opacity: 0.4; }
.dh-mlink.is-locked .dh-mlink-title::after {
  content: ' 🔒';
  font-size: 11px;
  opacity: 0.6;
}

/* Retained widget sizing — full-width 1:1 square beneath the links */
.dh-mega-feature .dh-about-discord-tile,
.dh-mega-feature .dh-mega-tvguide { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* -- Mobile drawer: link lists ------------------------------- */
/* Inner-menu links mirror the main drawer nav (.dh-drawer-row):
   centered, uppercase, Barlow Condensed, no dividing lines. */
.dh-drawer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 8px;
}
.dh-drawer-link-group-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding: 16px 6px 4px;
}
/* Clubhouse Now-Playing line in the mobile drawer (centered) */
.dh-drawer-nowplaying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 2px 6px 14px;
}
.dh-drawer-nowplaying .dh-ch-np-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dh-drawer-nowplaying .dh-ch-np-title { font-size: 15px; text-align: center; white-space: normal; }
.dh-drawer-nowplaying .dh-ch-np-title:empty::before { content: 'Tune in'; color: var(--ink-dim); }
.dh-drawer-nowplaying:active .dh-ch-np-title { color: var(--orange); }
.dh-drawer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  gap: 8px;
  padding: clamp(4px, 1.8vh, 13px) 24px;
  text-decoration: none;
  color: rgba(255,255,255,0.92);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  /* Match the top-menu rows (.dh-drawer-row) exactly so tapping into a
     section doesn't jump to a bigger size. Was clamp(15px,3vh,19px). */
  font-size: clamp(14px, 2.4vh, 16px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease;
}
.dh-drawer-link:hover,
.dh-drawer-link:active { color: var(--orange); transform: scale(1.06); }
.dh-drawer-link-title { white-space: nowrap; }
/* Meta badges (dates/prices/"free gift") are hidden on mobile so every
   inner-menu row reads as a clean, uniform nav item like the main menu. */
.dh-drawer-link-meta { display: none; }
.dh-drawer-link.is-loading .dh-drawer-link-title { opacity: 0.4; }
.dh-drawer-link.is-locked .dh-drawer-link-title::after { content: ' 🔒'; font-size: 12px; opacity: 0.6; }

/* ---------------------------------------------------------------
   DRAWER TYPE SCALE

   ONE FACE: the drawer is Barlow Condensed throughout, widgets and
   all. The widgets were the last holdout -- they share the desktop
   widget's classes, and those are Poppins (which is right on desktop,
   where Poppins is the body face).

   The drawer had grown six small-caps label styles doing the same
   job at six different sizes/letter-spacings (panel title 13/2.5,
   group heading 12/2, eyebrow 10/1.5, LIVE 11/1, NEW 10/1,
   discount 11/0.5), which reads as font soup on a phone. They
   collapse here into two deliberate tiers:

     LABEL  11px / 2px   quiet structural text — panel title,
                         group heading, featured eyebrow
     BADGE  10px / 1px   inline pills — NEW, LIVE, % off

   Nav rows keep their own fluid clamp() size; they were already
   consistent. Every rule below is scoped to .dh-drawer so the
   desktop mega menu, which shares these classes, is untouched.
   --------------------------------------------------------------- */
.dh-drawer .dh-drawer-section-title,
.dh-drawer .dh-drawer-link-group-title,
.dh-drawer .dh-ch-np-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  /* !important to beat the base .dh-drawer-section-title colour,
     which is itself !important (it overrides a Squarespace rule). */
  color: rgba(255,255,255,0.55) !important;
}

/* ...except the panel title, which is sized like the nav rows beneath it
   rather than like the quiet labels above. It's the heading for that
   list, so it tracks the rows' fluid clamp() (and their tablet bump);
   staying grey is what keeps it reading as a heading and not as another
   tappable row. Must follow the rule above -- same specificity, later wins. */
.dh-drawer .dh-drawer-section-title,
.dh-drawer .dh-drawer-link-group-title {
  /* Track the nav rows (top-menu size) so every line of menu text in the
     sub-screens is one size. Colour stays grey (from the rule above) so the
     panel title / group headings still read as headings, not tappable rows.
     Group titles were 11px in the label tier; pulled up to match here. */
  font-size: clamp(14px, 2.4vh, 16px);
  letter-spacing: 1.5px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .dh-drawer .dh-drawer-section-title,
  .dh-drawer .dh-drawer-link-group-title { font-size: clamp(20px, 3vh, 28px); }
}

/* Tablet: the tappable inner-menu rows (.dh-drawer-link) must match the
   root menu and the section title above them -- one size for every line
   of menu text. This lives here, after the base .dh-drawer-link rule,
   because the twin override up in the MAIN SCREEN block loses to that
   base rule on source order (media queries add no specificity). The base
   rule also resets padding, so re-bump that too. Scoped with .dh-drawer
   for extra specificity, matching the overrides above. */
@media (min-width: 768px) and (max-width: 1024px) {
  .dh-drawer .dh-drawer-link {
    padding: clamp(10px, 2vh, 22px) 24px;
    font-size: clamp(20px, 3vh, 28px);
  }
}

/* One badge tier. Sizes only -- each badge keeps its own colour. */
.dh-drawer .dh-new,
.dh-drawer .dh-live,
.dh-drawer .dh-discount-badge {
  font-size: 10px;
  letter-spacing: 1px;
}

/* Spacing rhythm. The panel title used to sit 6px above the featured
   eyebrow, so two dim labels collided; the featured block now gets
   real breathing room above it and a consistent 16px before the nav. */
.dh-drawer .dh-drawer-nowplaying {
  gap: 4px;
  padding: 14px 16px 16px;
}
/* Long titles ("Movies Are Dumb | Matte Poster Print | The Guy With
   The Secret Kung Fu Design by Carmen Cerra") ran to three lines and
   pushed the actual nav links down the panel. Two lines, then ellipsis.

   Barlow Condensed (not the shared Poppins) to match the rest of the
   drawer; 16px because Condensed reads noticeably smaller than Poppins
   at the same size. Uppercased to match every other line in the drawer
   -- the 2-line clamp below is what keeps a long title (Shop's poster
   names run to ~90 characters) from turning into a block of caps.

   Weight 600 because that is the lightest Barlow Condensed the site
   actually loads: the @import at the top of this file pulls 600;700;800
   only. Asking for 400/500 here would silently render as 600 anyway. */
.dh-drawer .dh-drawer-nowplaying .dh-ch-np-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Group headings sat 16px below / 4px above their list — asymmetric
   against the 13px-padded rows either side. */
.dh-drawer .dh-drawer-link-group-title { padding: 18px 6px 6px; }

/* The "Enter Clubhouse" / "Enter Home" CTAs read as what they are: a nav
   row. Same face, size, tracking and case as the links beneath them --
   they were sentence-case Poppins, inherited from the desktop widget.
   Colour is left to the is-cta rule (white, orange on tap). */
.dh-drawer .dh-drawer-nowplaying.is-cta .dh-ch-np-join {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(14px, 2.4vh, 16px);   /* match the nav rows */
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .dh-drawer .dh-drawer-nowplaying.is-cta .dh-ch-np-join { font-size: clamp(20px, 3vh, 28px); }
}

/* Last stragglers: the cart pill in the drawer's icon row. (The drawer's
   hidden back button is Poppins too, but it's display:none by design.) */
.dh-drawer .dh-cart-count { font-family: 'Barlow Condensed', sans-serif; }

/* The retained widget tile sits BENEATH the link list on mobile (moved
   there in the markup), spanning the full drawer width apart from the
   side gutter. */
.dh-drawer-feature { margin: 16px 0 12px; padding: 0 16px; box-sizing: border-box; }
.dh-drawer-feature .dh-drawer-tile { margin: 0; }
/* Compact 1:1 Discord card — shrink the big text so it fits the square. */
.dh-drawer-discord-tile { aspect-ratio: 1 / 1; padding: 20px !important; }
.dh-drawer-discord-tile .dh-discord-heading { font-size: 12px; margin-bottom: 8px; }
.dh-drawer-discord-tile .dh-discord-logo-wrap { margin-bottom: 8px; }
.dh-drawer-discord-tile .dh-discord-logo-wrap svg { width: 38px; height: 38px; }
.dh-drawer-discord-tile .dh-discord-count { font-size: 48px; letter-spacing: -1px; }
.dh-drawer-discord-tile .dh-discord-members-label { margin: 3px 0 8px; }
.dh-drawer-discord-tile .dh-discord-online { margin-bottom: 14px; }
.dh-drawer-discord-tile .dh-discord-cta { padding: 12px 22px; }

/* ---- Site_Header_Injection.html line 4297 ---- */
.dh-announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 44px;
  box-sizing: border-box;
  background: var(--orange);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  border-radius: 0;
}
.dh-announce-link {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
}
.dh-announce-link:hover { text-decoration: underline; }
.dh-announce-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}
.dh-announce-close:hover { opacity: 0.7; }
@media (max-width: 600px) {
  .dh-announce {
    font-size: 12px;
    padding: 6px 36px 6px 12px;
  }
}