/* ---- Dumb Homepage Widget.html line 10 ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --orange: #F75E1C;
    --dark: #0e0b08;
    --darker: #070503;
    --warm-mid: #1a1208;
    --amber: #c97a1a;
    --cream: #ffffff;
    --muted: #9a8a75;
    --border: rgba(247,94,28,0.2);
    --glow: 0 0 30px rgba(247,94,28,0.15);
    /* Card system — one place defines the shared card look, so every carousel
       card (events, videos, products, downloads, artwork) stays visually in sync. */
    --card-surface: #1a1208;
    --thumb-bg: #0e0b06;
    --card-radius: 16px;
    --border-hover: rgba(247,94,28,0.55);
    --card-hover-shadow: 0 16px 40px rgba(0,0,0,0.5);
    --orange-hover: #ff7235;
    --shimmer-base: #1e1408;
    --shimmer-hi: #2a1e0e;
    /* Gap BETWEEN carousel sections. 56px was tuned when each heading sat
       20px above its rail; with the header now tight to its carousel (10px,
       matching the Clubhouse player) 56px read as a hole between rows, so
       this drops to the player's 22px too. */
    --section-gap: 22px;
    --header-gap: 12px;
    --label-gap: 4px;
    /* Heading scale — one size per tier, shared with the Clubhouse player's
       browse view (.clubhouse-home-section). Every section heading and every
       card title reads from these, so the two views stay in step and the
       scale is tuned in one place instead of drifting across ~8 rules.
       The section clamp is the player's, verbatim and at every width: it caps
       at 38px, not the 60px this widget used to run, which is why the same
       row heading looked like a different design on the two pages. The 4.4vw
       term only wins above ~700px, so the 31px floor IS the phone size. */
    --h-section: clamp(31px, 4.4vw, 38px);
    --h-card: 17px;
    --h-card-weight: 800;
  }
  body {
    background: var(--darker);
    color: var(--cream);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -0.04em;
  }
  p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 0em;
    color: #ffffff;
  }
  .widget {
    margin: 0;
    padding: 0;
  }
  .widget-content {
    max-width: 2000px;
    margin: 0 auto;
    padding: 24px 4vw 0px;
  }
  #header,
  header#header,
  .Header,
  .site-header {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #0e0b08;
    margin-top: 0;
  }
  .hero-iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(1.35);
    transform-origin: top center;
    width: 177.78vh;
    height: 100%;
    min-width: 100%;
    border: 0;
    display: block;
    pointer-events: none;
  }
  .hero-click-blocker {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
  }
  .hero-gradient-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 65%;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.15) 70%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  .hero-gradient-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  .hero-gradient-left {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 50%;
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  .hero-content {
    position: absolute;
    bottom: 0; left: 0;
    padding: 0 4vw 3%;
    z-index: 3;
    opacity: 0;
    animation: fadeUp 0.7s ease 0.2s forwards;
    max-width: 55%;
  }
  .hero-text-block {
    display: inline-block;
  }
  h1.hero-title,
  .hero-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(48px, 7vw, 100px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.7); /* hard poster offset — no soft blur */
  }
  /* Saul Bass boil: each letter is its own inline-block so JS can jitter it
     on the compositor without reflowing the line. */
  .hero-title .ltr { display: inline-block; will-change: transform; }
  .hero-title {
    white-space: nowrap;
  }
  .hero-title .white { color: #fff; }
  .hero-title .orange { color: var(--orange); }
  .hero-body {
      font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(255,255,255,0.9);
  max-width: 800px;
  margin: 0 0 12px;
  line-height: 1.5;
}
  .hero-body strong { color: rgba(255,255,255,0.92); font-weight: 600; }
  /* Event eyebrow — a scannable kicker above the title that frames the slide as
     a scheduled event. Per-slide: empty by default (hidden), filled by the
     slide builder from cfg.eyebrow. */
  .hero-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 1.25vw, 15px);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    margin: 0 0 14px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  .hero-eyebrow:empty { display: none; }
  .hero-eyebrow .hl {
    color: #fff; background: var(--orange);
    padding: 3px 9px; border-radius: 4px;
    letter-spacing: 0.1em;
  }
  .hero-eyebrow .hl.live { display: inline-flex; align-items: center; gap: 7px; }
  .hero-eyebrow .live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: heroLivePulse 1.6s ease-out infinite;
  }
  @keyframes heroLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  @media (prefers-reduced-motion: reduce) { .hero-eyebrow .live-dot { animation: none; } }
  /* Squarespace's site-styles load-in animations tag headings/paragraphs with
     hidden "pre" classes (preScale/preFade) and only reveal the elements its
     observer saw at page load. The JS-cloned hero slides inherit that hidden
     state but are never revealed, so their title/body get stuck at opacity:0.
     Force the hero copy visible — the slide has its own fadeUp entrance. */
  .hero-title, .hero-body, .hero-eyebrow { opacity: 1 !important; transform: none !important; }
  .hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn {
    background: var(--orange);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 20px;
    padding: 18px 25px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(10px);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
  }
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(247,94,28,0.4), 0 4px 15px rgba(0,0,0,0.3);
    background: var(--orange-hover);
  }
  .btn-ghost {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(242,232,213,0.3);
    box-shadow: none;
    font-size: 13px;
    padding: 18px 25px;
  }
  .btn-ghost:hover {
    background: rgba(242,232,213,0.08);
    box-shadow: none;
    transform: translateY(-2px);
  }
  .section-header {
    display: flex; align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px !important; gap: 16px; flex-wrap: wrap;
  }
  .section-header > div { display: flex; flex-direction: column; }
  .section-label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px; letter-spacing: 3px;
    color: var(--orange); text-transform: uppercase;
    display: none;   /* eyebrows removed -- restore with `display: block` */
    margin-bottom: var(--label-gap);
  }
  .section-title {
    font-family: 'Poppins', sans-serif;
    font-size: var(--h-section);
    font-weight: 700; letter-spacing: -0.04em;
    line-height: 1em; color: var(--cream);
  }
  /* Removed: the "View Channel →" / "View All →" header links. The section
     heading is the label; the carousel is the way in. Matches the Clubhouse
     player's browse view, which drops them too. */
  .divider { height: 1px; background: var(--border); margin: var(--section-gap) 0; }
  .events-section { opacity: 0; animation: fadeUp 0.6s ease 0.4s forwards; }
  .di-status {
    text-align: center; padding: 36px 0;
    color: rgba(255,255,255,0.4); font-size: 13px;
  }
  .di-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--orange); border-radius: 50%;
    animation: di-spin 0.7s linear infinite;
    margin-right: 8px; vertical-align: middle;
  }
  @keyframes di-spin { to { transform: rotate(360deg); } }
  /* Shared card identity — surface, border, radius, and hover lift for every
     carousel card. The individual card rules below only add their own layout
     (flex direction, aspect ratio, sizing), never the shared look. */
  .di-event, .video-card, .blog-card, .product-card, .download-card, .artwork-card {
    background: var(--card-surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
  }
  .di-event:hover, .video-card:hover, .blog-card:hover, .product-card:hover,
  .download-card:hover, .artwork-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--border-hover);
  }
  .di-event {
    display: flex;
    flex-direction: column;
    user-select: none;
    flex: 0 0 280px;
    width: 280px;
    scroll-snap-align: start;
    container-type: inline-size;
  }
  .di-thumb-col {
    width: 100%;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    position: relative;
  }
  .di-thumb-col img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .di-no-thumb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  .di-no-thumb svg { opacity: 0.12; }
  .di-body {
    flex: 1;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }
  /* One metadata line, not two. The tile used to stack a full weekday date, a
     start–end time range and a "Where to watch:" label above the chips — six
     text elements on a 280px card, four of them small-caps micro-labels. Day +
     start time now share a line; the end time lives in the modal, where anyone
     asking "how long is it?" already is. */
  .di-tile-date {
    font-size: 10px;
    margin: 0;
    text-align: left;
  }
  /* Card kickers — the small line directly above a card title (event date,
     video date · show, post date · blog). One treatment for all three, copied
     from the Clubhouse player: Barlow Condensed, orange, uppercase, wide
     tracking. They used to be Poppins in muted white here (and Poppins orange
     on the event tiles), which read as a different card family from the
     player's. Barlow Condensed 700 is already loaded by the site header. */
  .di-tile-date,
  .video-metadata,
  .blog-metadata {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--orange);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.12em;
  }
  .di-title {
    font-size: var(--h-card); font-weight: var(--h-card-weight);
    color: #fff; line-height: 1.35; letter-spacing: -0.4px;
    margin: 0;
    text-align: left;
    /* Three lines now that the card isn't carrying two metadata lines and a
       label — most event names finish instead of trailing off in an ellipsis. */
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Chips sit at the bottom of the card whatever the title's length. The
     "Where to watch:" label above them is gone — a row of platform chips
     introduces itself (same call as the program guide). */
  .di-tags {
    display: flex; flex-wrap: wrap;
    gap: clamp(3px, 2cqw, 6px);
    width: 100%;
    align-items: center;
    min-width: 0;
    margin-top: auto;
  }
  .di-badge {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(10px, 4.5cqw, 13px); font-weight: 700;
    letter-spacing: clamp(0.3px, 0.3cqw, 0.8px); text-transform: uppercase;
    padding: 4px clamp(5px, 3cqw, 9px); border-radius: 4px;
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
    text-decoration: none;
    transition: filter 0.15s, opacity 0.15s;
    cursor: pointer;
  }
  .di-badge:hover { filter: brightness(1.25); opacity: 0.9; }
  .di-badge-twitch { background: rgba(145,70,255,0.2); color: #c490ff; border: 1px solid rgba(145,70,255,0.3); }
  .di-badge-club   { background: rgba(247,94,28,0.2);  color: var(--orange); border: 1px solid rgba(247,94,28,0.35); }
  .di-badge-art    { background: rgba(56,189,148,0.15); color: #4dd6a8; border: 1px solid rgba(56,189,148,0.25); }
  .di-badge-bonus  { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
  .di-badge-weird  { background: rgba(56,130,246,0.15); color: #60a5fa; border: 1px solid rgba(56,130,246,0.3); }
  .di-badge-lodge  { background: rgba(220,38,38,0.18); color: #ef4444; border: 1px solid rgba(220,38,38,0.4); }
  .di-badge-yt     { background: rgba(255,0,0,0.15); color: #ff6b6b; border: 1px solid rgba(255,0,0,0.25); }
  .di-empty { text-align: center; padding: 36px 0; color: rgba(255,255,255,0.3); font-size: 13px; }
  .purchased-section,
  .events-section,
  .videos-section,
  .blog-section,
  .products-section,
  .downloads-section,
  .artwork-section,
  .youtube-section {
    margin-bottom: var(--section-gap);
  }
  /* Member-only rails. Both start hidden and are revealed by their loader --
     Purchased Videos only once the member's linked library answers with
     something, Latest Posts only for a signed-in member. `hidden` has to win
     over the section's display, hence the explicit rule. */
  .purchased-section[hidden], .blog-section[hidden] { display: none !important; }
  body.di-modal-open #header,
  body.di-modal-open header {
    z-index: 0 !important;
  }
  #di-overlay {
    display: none; position: fixed; inset: 0; z-index: 999999999;
    background: rgba(0,0,0,0.78); backdrop-filter: blur(5px);
    align-items: center; justify-content: center; padding: 20px;
  }
  #di-overlay.open { display: flex; }
  @media (max-width: 600px) {
    #di-overlay, #yt-overlay, #dg-overlay { padding: 12px; }
  }
  #di-modal {
    background: #13100d;
    border: 1px solid rgba(247,94,28,0.3);
    border-radius: 20px;
    width: 100%; max-width: 500px;
    max-height: min(90vh, 90dvh); overflow-y: auto;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.85);
    animation: di-pop 0.2s ease;
  }
  @keyframes di-pop {
    from { opacity:0; transform: scale(0.95) translateY(12px); }
    to   { opacity:1; transform: scale(1)    translateY(0); }
  }
  #di-close {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9); cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; line-height: 1;
    backdrop-filter: blur(8px);
  }
  #di-close:hover { background: rgba(255,255,255,0.15); }
  #di-m-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);
  }
  #di-m-img.gone { display: none; }
  #di-m-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;
  }
  #di-m-noimg.gone { display: none; }
  #di-m-body { padding: 22px 24px 26px; text-align: left; }
  #di-m-badge { margin-bottom: 10px; }
  #di-m-title { font-size: 22px; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 3px; text-align: left; }
  #di-m-show  { font-size: 12px; color: rgba(255,255,255,0.38); margin-bottom: 10px; text-align: left; }
  #di-m-when  {
    font-size: 12px; color: rgba(255,255,255,0.45);
    display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
    text-align: left;
  }
  #di-m-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;
    text-align: left;
  }
  #di-m-desc p  { margin-bottom: 8px; text-align: left; }
  #di-m-desc ul { padding-left: 18px; margin-bottom: 8px; }
  #di-m-desc li { margin-bottom: 4px; }
  #di-m-desc a  { color: var(--orange); text-decoration: none; }
  #di-m-desc a:hover { text-decoration: underline; }
  .di-share-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
  }
  .di-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;
  }
  .di-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;
  }
  .di-copy-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff; }
  .di-copy-btn.copied { border-color: rgba(56,189,148,0.4); color: #4dd6a8; background: rgba(56,189,148,0.08); }
  .di-cal-lbl {
    font-size: 10px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: rgba(255,255,255,0.28);
    margin-bottom: 10px; text-align: left;
  }
  .di-cal-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
  .di-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;
    cursor: pointer; text-decoration: none;
    transition: background 0.15s, border-color 0.15s; white-space: nowrap;
  }
  .di-cal-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); color: #fff; }
  .carousel-wrap {
    position: relative;
    margin-left: -4vw;
    margin-right: -4vw;
  }
  .carousel-wrap.at-start .carousel {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 5%), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 5%), transparent 100%);
  }
  .carousel-wrap:not(.at-start):not(.at-end) .carousel {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black calc(100% - 5%), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 5%, black calc(100% - 5%), transparent 100%);
  }
  .carousel-wrap.at-end .carousel {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black);
    mask-image: linear-gradient(to right, transparent 0, black 5%, black);
  }
  .carousel-wrap.at-start.at-end .carousel {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .carousel {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 8px 4vw 12px;
    scroll-padding-left: 4vw;
  }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel > * { scroll-snap-align: start; flex: 0 0 calc((92vw - 60px) / 4); width: calc((92vw - 60px) / 4); }
  .carousel-cta-card {
    flex: 0 0 200px; width: 200px; scroll-snap-align: start;
    background: transparent; border: 1px solid var(--border); border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; text-decoration: none !important; color: var(--cream); cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    min-height: 200px; padding: 32px 24px;
  }
  .carousel-cta-card:hover { border-color: var(--orange); background: rgba(247,94,28,0.06); }
  .carousel-cta-icon {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8); background: var(--orange);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.2s ease;
  }
  .carousel-cta-card:hover .carousel-cta-icon { transform: scale(1.1); }
  .carousel-cta-label {
    font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em; color: var(--cream); text-align: center;
  }
  .carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(20,14,6,0.9); border: 1px solid var(--border);
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 10;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s; backdrop-filter: blur(8px);
  }
  .carousel-arrow:hover { background: var(--orange); border-color: var(--orange); }
  .carousel-arrow.prev  { left: 1%; }
  .carousel-arrow.next  { right: 1%; }
  .carousel-arrow.hidden { opacity: 0; pointer-events: none; }
  @media (max-width: 768px) {
    .carousel-arrow { display: none; }
    .carousel-wrap {
      margin-left: -4vw;
      margin-right: -4vw;
    }
    .carousel {
      padding: 8px 4vw 12px;
      gap: 16px;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 4vw;
    }
    .carousel > * {
      flex: 0 0 92vw;
      width: 92vw;
      scroll-snap-align: start;
    }
    .carousel {
      -webkit-mask-image: none;
      mask-image: none;
    }
    .carousel-wrap.at-start .carousel {
      -webkit-mask-image: linear-gradient(to right, black calc(100% - 4vw), transparent 100%);
      mask-image: linear-gradient(to right, black calc(100% - 4vw), transparent 100%);
    }
    .carousel-wrap.at-end .carousel {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4vw, black);
      mask-image: linear-gradient(to right, transparent 0%, black 4vw, black);
    }
    .carousel-wrap.at-start.at-end .carousel {
      -webkit-mask-image: none;
      mask-image: none;
    }
    .carousel-wrap:not(.at-start):not(.at-end) .carousel {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4vw, black calc(100% - 4vw), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0%, black 4vw, black calc(100% - 4vw), transparent 100%);
    }
    #di-events-carousel .di-event {
      flex-direction: column;
      flex: 0 0 92vw;
      width: 92vw;
      scroll-snap-align: start;
    }
    .di-thumb-col { width: 100%; height: auto; aspect-ratio: 16/9; }
    .di-no-thumb { min-height: 160px; }
    .di-body { padding: 14px 16px 16px; }
    .di-title { font-size: 17px; }
    .di-cal-row { flex-direction: column; }
    .di-cal-btn { justify-content: flex-start; }
    #di-m-body { padding: 18px 18px 22px; }
    .hero {
      height: 85vh;
    }
    .hero-content {
      padding: 0 4vw 12%;
      max-width: 100%;
    }
    .hero-text-block {
      display: block;
    }
    .hero-title {
      white-space: nowrap; /* JS auto-fit keeps each line on one row */
    }
    .hero-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
    }
    .hero-actions .btn {
      flex: 1 1 auto;
      min-width: 140px;
      text-align: center;
      justify-content: center;
      padding: 16px 18px;
      font-size: 11px;
    }
  }
  @media (max-width: 480px) {
    .widget-content { padding: 16px 4vw 0px; }
    .carousel-wrap {
      margin-left: -4vw;
      margin-right: -4vw;
    }
    .carousel {
      padding: 8px 4vw 12px;
    }
  }

  /* ── LANDSCAPE MOBILE: clean 2 cards (48vw each) ── */
  @media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
    .carousel > * {
      flex: 0 0 calc(48vw - 18px);
      width: calc(48vw - 18px);
      scroll-snap-align: start;
    }
    #di-events-carousel .di-event {
      flex: 0 0 calc(48vw - 18px);
      width: calc(48vw - 18px);
    }
    .hero { height: 100vh; min-height: unset; }
    .hero-content { padding: 0 4vw 6%; }
    .hero-title { white-space: nowrap; }
    .hero-body { font-size: 12px; }
    .hero-actions .btn { padding: 12px 16px; font-size: 11px; }
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .purchased-section { opacity: 0; animation: fadeUp 0.6s ease 0.35s forwards; }
  .videos-section    { opacity: 0; animation: fadeUp 0.6s ease 0.45s forwards; }
  .blog-section      { opacity: 0; animation: fadeUp 0.6s ease 0.475s forwards; }
  .products-section  { opacity: 0; animation: fadeUp 0.6s ease 0.5s  forwards; }
  .downloads-section { opacity: 0; animation: fadeUp 0.6s ease 0.55s forwards; }
  .artwork-section   { opacity: 0; animation: fadeUp 0.6s ease 0.565s forwards; }
  .youtube-section   { opacity: 0; animation: fadeUp 0.6s ease 0.575s forwards; }
  .artwork-card { position: relative; display: block; aspect-ratio: 1 / 1; }
  .artwork-card img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s;
  }
  .artwork-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0,0,0,0.7);
    opacity: 0; transition: opacity 0.25s ease;
    pointer-events: none;
  }
  .artwork-card:hover .artwork-overlay { opacity: 1; }
  .artwork-title {
    font-family: 'Poppins', sans-serif;
    font-size: var(--h-card); font-weight: var(--h-card-weight); letter-spacing: -0.4px;
    line-height: 1.35; color: #fff; margin: 0;
    text-align: center;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .artwork-skeleton-thumb {
    width: 100%; aspect-ratio: 1 / 1;
    background: linear-gradient(90deg, var(--shimmer-base) 25%, var(--shimmer-hi) 50%, var(--shimmer-base) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite linear;
  }
  .video-card { display: flex; flex-direction: column; }
  .video-thumb {
    width: 100%; aspect-ratio: 16/9; flex-shrink: 0;
    background: var(--thumb-bg); position: relative; overflow: hidden;
  }
  .video-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s ease;
  }
  /* Shared lazy-load fade-in: every card thumb starts at opacity:0 and the
     thumbImg() helper adds .loaded on load. One rule covers all card types. */
  .video-thumb img.loaded,
  .product-thumb-wrap img.loaded,
  .download-thumb-wrap img.loaded,
  .artwork-card img.loaded { opacity: 1; }
  .play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; z-index: 2;
    transition: transform 0.2s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  }
  .video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.15); }
  .play-btn svg { margin-left: 3px; }
  .video-meta {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }
  .video-metadata {
    font-size: 10px; margin: 0;
    text-align: left;
  }
  .video-title {
    font-size: var(--h-card); font-weight: var(--h-card-weight); letter-spacing: -0.4px; line-height: 1.35;
    margin: 0; color: #fff; text-decoration: none !important;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .video-excerpt {
    margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.48);
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Latest Posts. Same card as a video minus the play button — the thumb is
     the post's image, so it keeps the 16:9 the rest of the row uses. */
  .blog-card { display: flex; flex-direction: column; }
  .blog-thumb {
    width: 100%; aspect-ratio: 16/9; flex-shrink: 0;
    background: var(--thumb-bg); position: relative; overflow: hidden;
  }
  .blog-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s ease;
  }
  .blog-thumb img.loaded { opacity: 1; }
  .blog-meta {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 8px; text-align: left;
  }
  .blog-metadata {
    font-size: 10px; margin: 0;
    text-align: left;
  }
  .blog-title {
    font-size: var(--h-card); font-weight: var(--h-card-weight); letter-spacing: -0.4px; line-height: 1.35;
    margin: 0; color: #fff; text-decoration: none !important;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .blog-excerpt {
    margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.48);
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-card { display: flex; flex-direction: column; }
  .product-thumb-wrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1;
    flex-shrink: 0; overflow: hidden; background: var(--thumb-bg);
  }
  .product-thumb-wrap img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s;
  }
  .product-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
  .product-name {
    font-size: var(--h-card); font-weight: var(--h-card-weight); letter-spacing: -0.4px; line-height: 1.35;
    margin: 0; color: #fff; text-decoration: none !important;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-price { font-size: 13px; font-weight: 700; color: var(--orange); margin: 0; text-align: left; }
  .product-price-orig { font-size: 11px; color: rgba(255,255,255,0.45); text-decoration: line-through; margin-left: 6px; font-weight: 400; }
  .product-member-tag { font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.5); margin-left: 4px; text-transform: none; letter-spacing: 0; }
  .product-soldout {
    position: absolute; top: 10px; right: 10px;
    background: #c0392b; color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.5); z-index: 2;
  }
  .download-card { display: flex; flex-direction: column; }
  .download-thumb-wrap {
    position: relative; width: 100%; aspect-ratio: 2 / 3;
    flex-shrink: 0; overflow: hidden; background: var(--thumb-bg);
  }
  .download-thumb-wrap img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.3s;
  }
  .download-info { padding: 14px 16px 16px; text-align: left; }
  .download-title {
    font-size: var(--h-card); font-weight: var(--h-card-weight); letter-spacing: -0.4px;
    line-height: 1.35; color: #fff; text-decoration: none !important;
    text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0;
  }
  .clubhouse-gateway-section { opacity: 0; animation: fadeUp 0.6s ease 0.6s forwards; }
  .clubhouse-gateway {
    background:
      linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
      url('https://images.squarespace-cdn.com/content/5f257383d68fbe07dae9c644/dff25e3b-e09a-4d8d-89f3-b05979f92af3/drive-in+background+with+fade.jpg?format=1500w');
    background-size: cover; background-position: center;
    border: 1px solid var(--border); border-radius: 40px;
    padding: 120px 56px; min-height: 520px;
    position: relative; overflow: hidden; text-align: center;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .clubhouse-gateway::before, .clubhouse-gateway::after { display: none; }
  .clubhouse-gateway-content { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
  .clubhouse-gateway-eyebrow { font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--orange); text-transform: uppercase; margin-bottom: 10px !important; }
  .clubhouse-gateway-title { font-family: 'Poppins', sans-serif; font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.1em; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 10px !important; }
  .clubhouse-gateway-desc { font-size: 16px; color: #ddd; line-height: 1.6; margin-bottom: 20px !important; }
  .clubhouse-gateway-features { display: flex; justify-content: center; gap: 32px; margin-bottom: 20px !important; flex-wrap: wrap; }
  .gateway-feature { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #ddd; }
  .gateway-feature::before { content: '✓'; color: var(--orange); font-weight: 700; font-size: 16px; }
  .clubhouse-gateway-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .clubhouse-gateway-pricing { font-size: 13px; color: var(--muted); margin-top: 12px !important; }
  #yt-overlay {
    display: none; position: fixed; inset: 0; z-index: 999999999;
    background: rgba(0,0,0,0.88); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
  }
  #yt-overlay.open { display: flex; }
  #yt-modal {
    background: #0e0b08; border: 1px solid rgba(247,94,28,0.3); border-radius: 20px;
    width: 100%; max-width: 860px; max-height: min(90vh, 90dvh); position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.9); animation: di-pop 0.2s ease;
    display: flex; flex-direction: column; overflow: hidden;
  }
  #yt-player-wrap { width: 100%; aspect-ratio: 16 / 9; background: #000; position: relative; flex-shrink: 0; }
  /* Reels play vertically: narrow the modal and flip the player to 9:16. */
  #yt-modal.vertical { max-width: 420px; }
  #yt-modal.vertical #yt-player-wrap { aspect-ratio: 9 / 16; max-height: min(72vh, 72dvh); }
  #yt-player-wrap iframe, #yt-player-div { width: 100%; height: 100%; border: 0; display: block; }
  #yt-modal-footer { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  #yt-modal-title { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: -0.2px; line-height: 1.3; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #yt-watch-link {
    flex-shrink: 0; display: flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255,0,0,0.3);
    background: rgba(255,0,0,0.1); color: #ff6b6b;
    font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500;
    text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
  }
  #yt-watch-link:hover { background: rgba(255,0,0,0.2); border-color: rgba(255,0,0,0.5); color: #ff8a8a; }
  #yt-close {
    position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9); cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; line-height: 1;
    backdrop-filter: blur(8px);
  }
  #yt-close:hover { background: rgba(255,255,255,0.15); }
  @keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
  .skeleton-thumb {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(90deg, var(--shimmer-base) 25%, var(--shimmer-hi) 50%, var(--shimmer-base) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite linear;
  }
  .download-skeleton-thumb {
    width: 100%; aspect-ratio: 2 / 3;
    background: linear-gradient(90deg, var(--shimmer-base) 25%, var(--shimmer-hi) 50%, var(--shimmer-base) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite linear;
  }
  .skeleton-line {
    height: 12px; border-radius: 4px; margin-bottom: 8px;
    background: linear-gradient(90deg, var(--shimmer-base) 25%, var(--shimmer-hi) 50%, var(--shimmer-base) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite linear;
  }
  .skeleton-line.short { width: 40%; }
  .skeleton-line.med   { width: 60%; }
  .skeleton-line.long  { width: 90%; height: 16px; }
  .skeleton-card { pointer-events: none; }
  .hero-mobile-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0e0b08;
    z-index: 0;
  }
  .hero-mobile-bg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  /* The mobile "Swipe for more" hints are gone (2026-08-20, following the
     Clubhouse player's 2026-08-08 removal). They were opacity:0 for all but
     ~2s of a fade, yet permanently occupied 17px + 10px margin under EVERY
     carousel -- which was most of the gap between rows. The peek-nudge below
     already teaches the swipe, without holding space open forever. */
  @keyframes carouselPeek {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-52px); }
    65%  { transform: translateX(-52px); }
    100% { transform: translateX(0); }
  }
  .carousel.peek-nudge { animation: carouselPeek 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; scroll-snap-type: none; }
  @media (max-width: 768px) {
    :root { --section-gap: 16px; }
    .purchased-section,
    .events-section,
    .videos-section,
    .blog-section,
    .products-section,
    .downloads-section,
    .artwork-section,
    .youtube-section { margin-bottom: 16px; }
    .widget-content { text-align: center; }
    .carousel { text-align: left; }
    .hero {
      aspect-ratio: unset;
      min-height: 100svh;
    }
    .hero-content {
      padding: 0 4vw 8%;
      max-width: 100%;
    }
    .hero-title {
      white-space: nowrap; /* JS auto-fit keeps each line on one row */
    }
    .hero-body {
      font-size: 14px;
      max-width: 100%;
    }
    .hero-actions {
      flex-wrap: wrap;
    }
    .section-header { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px !important; }
    .section-header > div { text-align: left; width: 100%; }
    :root { --h-card: 16px; }
    .clubhouse-gateway { padding: 0 !important; margin: 0 !important; min-height: 0 !important; background-image: none !important; background: transparent !important; border-radius: 0; border: none; }
    .clubhouse-gateway-features { flex-direction: column; gap: 12px; }
    .purchased-section,
    .events-section,
    .videos-section,
    .blog-section,
    .products-section,
    .downloads-section,
    .artwork-section,
    .youtube-section,
    .clubhouse-gateway-section { margin-bottom: 16px !important; }
  }
  /* ── Keep Watching / Watchlist (#dw-continue) ────────────────────────────
     Those two rows are built by the SITE FOOTER INJECTION, not by this widget
     -- it prepends them into .widget-content on the homepage exactly as it
     does on /clubhouse. Its stylesheet is injected at runtime (so it lands
     after this one and wins ties), and it ships its own type scale and
     spacing. These rules point it at ours; !important is what beats its own
     #id rules. Mirrors the same block in the Clubhouse players. */
  /* This widget centres .widget-content on mobile and each of its own section
     headers re-lefts itself; the injected rows never did, so Keep Watching and
     Watchlist came up centred on phones while every heading around them was
     left-aligned. (The Clubhouse player doesn't hit this -- its mobile
     .widget-content is text-align:left to begin with.) */
  #dw-continue { text-align: left; }
  #dw-continue .dw-title { font-size: var(--h-section) !important; }
  #dw-continue .dw-cardtitle { font-size: var(--h-card); font-weight: var(--h-card-weight); }
  #dw-continue,
  #dw-continue.dw-bleed { margin: 0 0 var(--section-gap); }
  #dw-continue .dw-section { margin-bottom: var(--section-gap); }
  #dw-continue .dw-section:last-child { margin-bottom: 0; }
  #dw-continue .dw-header { margin-bottom: 10px; }
  @media (max-width: 768px) {
    /* The footer default is a 78vw card on a 16px inset; every rail on this
       page is 85vw on a 5vw/7.5vw inset. Match, or the member's own rows read
       as a different component from the ones under them. */
    #dw-continue.dw-bleed {
      --dw-cardw: 85vw !important; --dw-fl: 5vw !important; --dw-fr: 7.5vw !important;
    }
    #dw-continue.dw-bleed .dw-cwrap { margin: 0 -5vw !important; }
    #dw-continue .dw-header { margin-bottom: 6px; }
  }
  /* ── YouTube reels: vertical 9:16 cards, no caption/excerpt, more per row ── */
  /* Scoped to .reels-carousel so the other carousels keep their 16:9 cards.
     These rules sit after the shared .carousel rules (incl. the mobile media
     block above) so source order wins without an !important arms race. */
  /* Card gap is deliberately NOT set here -- the reels row inherits the
     shared .carousel gap (20px, 16px on mobile). It used to run 14px/12px,
     which made this the one rail whose cards sat closer together than the
     rest. Only the card SIZE is special here. */
  .reels-carousel > * {
    flex: 0 0 clamp(140px, 14vw, 168px);
    width: clamp(140px, 14vw, 168px);
  }
  .reels-card { border-radius: 14px; }
  .reels-card .video-thumb { aspect-ratio: 9 / 16; }
  .reels-card .video-meta { display: none; }   /* no captions or excerpts */
  @media (max-width: 768px) {
    .reels-carousel > * {
      flex: 0 0 40vw;
      width: 40vw;
    }
  }
  /* ── Program guide ───────────────────────────────────────────────────────
     Rebuilt 2026-08-05 to match the Clubhouse player's icon rails and the
     site-wide guide: blurred dark panel, hairline border, Barlow Condensed
     throughout, #F75E1C reserved for what is actually live. The old five-line
     centred masthead is one header row, and the date rides the listings
     divider. Third of three copies — keep in step with the players' tgp-* and
     the header injection's dh-pg-* (dh-markup-client.txt). */
  #dg-overlay {
    display: none; position: fixed; inset: 0; z-index: 999999999;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    align-items: center; justify-content: center; padding: 20px;
  }
  #dg-overlay.open { display: flex; }
  body.di-modal-open #header,
  body.di-modal-open header,
  body.di-modal-open .header-nav,
  body.di-modal-open #siteWrapper > header,
  body.di-modal-open .site-header {
    z-index: 0 !important;
  }
  #dg-modal {
    position: relative; width: 100%; max-width: 520px;
    max-height: min(88vh, 88dvh); overflow: hidden;
    display: flex; flex-direction: column;
    background: rgba(12,9,7,0.72);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.7);
    animation: dg-pop 0.2s ease; font-family: 'Barlow Condensed', sans-serif;
  }
  #dg-body { overflow-y: auto; flex: 1; min-height: 0; }
  #dg-body::-webkit-scrollbar { width: 8px; }
  #dg-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 8px; }
  @keyframes dg-pop { from{opacity:0;transform:scale(0.95) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
  @keyframes dg-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
  @keyframes dg-glow {
    0%   { box-shadow: 0 0 0 0 rgba(247,94,28,0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(247,94,28,0); }
    100% { box-shadow: 0 0 0 0 rgba(247,94,28,0); }
  }

  /* header: one row (logo · block · close) */
  .dg-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 12px 16px;
    background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(255,255,255,0.09);
  }
  .dg-head-logo { height: 40px; width: auto; display: block; flex: 0 0 auto; }
  .dg-head-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
  .dg-head-eyebrow {
    font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.45); line-height: 1;
  }
  /* Same size and weight as the hero title below it. */
  .dg-context {
    font-family: 'Barlow Condensed', sans-serif; font-size: 25px; font-weight: 600;
    letter-spacing: 0.2px; text-transform: uppercase; color: #fff; line-height: 1.1;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #dg-close {
    position: static; width: 34px; height: 34px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 10px;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: rgba(255,255,255,0.82); font-size: 0; line-height: 0; cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
  }
  #dg-close svg {
    width: 17px; height: 17px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  }
  #dg-close:hover { background: rgba(247,94,28,0.12); color: #F75E1C; }

  /* hero: what is on right now */
  .dg-row.is-now {
    position: relative; display: block; grid-template-columns: none;
    padding: 0 0 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .dg-row.is-now:hover { background: transparent; }
  .dg-row.is-now.has-thumb .dg-now-thumb-wrap,
  .dg-now-thumb-wrap {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    background: #000; overflow: hidden; border-radius: 0; margin: 0;
  }
  .dg-now-thumb { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
  .dg-now-thumb-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(12,9,7,0) 30%, rgba(12,9,7,0.75) 72%, rgba(12,9,7,1) 100%);
  }
  .dg-now-body {
    position: relative; flex: none; min-width: 0;
    padding: 14px 16px 0; display: flex; flex-direction: column; gap: 9px;
  }
  .dg-row.is-now.has-thumb .dg-now-body { margin-top: -58px; }
  .dg-now-header { display: flex; align-items: center; gap: 7px; margin-bottom: 0; }
  .dg-now-pulse {
    width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
    box-shadow: 0 0 0 0 rgba(247,94,28,0.6); animation: dg-glow 1.8s ease-out infinite; flex-shrink: 0;
  }
  .dg-now-label {
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: var(--orange); line-height: 1;
  }
  .dg-row.is-now .dg-row-title {
    font-family: 'Barlow Condensed', sans-serif; font-size: 25px; font-weight: 600;
    letter-spacing: 0.2px; line-height: 1.1; color: #fff;
    white-space: normal; display: block; overflow: visible; text-overflow: clip;
  }
  .dg-now-time-range {
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums; margin-top: -5px;
  }
  /* The guide knows the start time and the runtime, so it can just say how much
     is left instead of making you do the subtraction. */
  .dg-now-meta { display: flex; align-items: center; gap: 10px; }
  .dg-progress { flex: 1 1 auto; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.16); overflow: hidden; }
  .dg-progress span { display: block; height: 100%; background: var(--orange); border-radius: 3px; }
  .dg-now-left {
    flex: 0 0 auto; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 500;
    letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255,255,255,0.55);
    font-variant-numeric: tabular-nums;
  }
  /* Watch button and chips share ONE row, never wrapping; overflow scrolls. */
  .dg-now-actions {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin-top: 2px;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .dg-now-actions::-webkit-scrollbar { display: none; }
  .dg-now-actions > * { flex: 0 0 auto; }
  .dg-watch-btn {
    display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600;
    letter-spacing: 1.4px; text-transform: uppercase;
    padding: 8px 16px; border-radius: 999px; border: 0;
    background: var(--orange); color: #170800; cursor: pointer; transition: filter 0.15s ease;
  }
  .dg-watch-btn:hover { filter: brightness(1.12); color: #170800; }
  .dg-watch-btn svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }

  /* listings */
  .dg-list { padding: 0 0 16px; }
  .dg-day {
    position: sticky; top: 0; z-index: 2; padding: 9px 16px 7px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    background: rgba(12,9,7,0.92); backdrop-filter: blur(10px);
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .dg-day-date {
    flex: 0 0 auto; font-weight: 500; letter-spacing: 1.4px;
    color: rgba(255,255,255,0.32); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .dg-row {
    position: relative; display: grid; grid-template-columns: 62px 74px 1fr;
    align-items: center; gap: 12px; padding: 10px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06); border-radius: 0;
    transition: background 0.15s;
  }
  .dg-row:last-child { border-bottom: none; }
  .dg-row:hover { background: rgba(247,94,28,0.06); }
  .dg-row.is-clickable { cursor: pointer; }
  .dg-row-time {
    font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600;
    letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255,255,255,0.7);
    font-variant-numeric: tabular-nums; text-align: right; padding-right: 0;
  }
  .dg-row.is-next .dg-row-time, .dg-row.is-live .dg-row-time { color: #fff; }
  .dg-thumb {
    width: 74px; height: auto; aspect-ratio: 16 / 9; border-radius: 5px;
    overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0; position: relative;
  }
  .dg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dg-thumb-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.25); font-size: 15px;
  }
  .dg-row-info { min-width: 0; padding-top: 0; display: flex; flex-direction: column; gap: 3px; }
  .dg-row.is-live .dg-row-info { display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
  .dg-row-title {
    font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 500;
    line-height: 1.2; letter-spacing: 0; color: rgba(255,255,255,0.92); text-transform: none;
    white-space: normal; text-overflow: clip; transition: color .15s ease;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .dg-row:not(.is-now):hover .dg-row-title { color: var(--orange); }
  .dg-row-genre { display: none; }
  .dg-row-sub { display: flex; align-items: center; gap: 7px; }
  .dg-row-dur, .dg-up-next {
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 500;
    letter-spacing: 1.1px; text-transform: uppercase;
  }
  .dg-row-dur { color: rgba(255,255,255,0.38); font-variant-numeric: tabular-nums; }
  .dg-up-next { color: rgba(255,255,255,0.42); }
  .dg-row.is-live.is-clickable:focus-visible { outline: 2px solid rgba(247,94,28,0.7); outline-offset: -2px; }
  .dg-live-chip {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 1.3px; text-transform: uppercase; color: #fff;
    background: var(--orange); border: none; padding: 2px 8px; border-radius: 999px;
  }
  .dg-live-chip .dg-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; flex-shrink: 0; }
  .dg-live-chip.is-live-now .dg-live-dot { animation: dg-blink 1.2s ease-in-out infinite; }

  /* where-to-watch chips (the "Where to watch:" eyebrow is gone) */
  .dg-stream-tags { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .dg-stream-tag {
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 1.1px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
    border: 1px solid; text-decoration: none; transition: filter 0.15s;
  }
  .dg-stream-tag:hover { filter: brightness(1.3); }
  .dg-stream-tag.s-club    { background: rgba(247,94,28,0.16);  color: var(--orange); border-color: rgba(247,94,28,0.4); }
  .dg-stream-tag.s-twitch  { background: rgba(145,70,255,0.16); color: #c490ff; border-color: rgba(145,70,255,0.38); }
  .dg-stream-tag.s-weird   { background: rgba(56,130,246,0.14); color: #60a5fa; border-color: rgba(56,130,246,0.35); }
  .dg-stream-tag.s-art     { background: rgba(56,189,148,0.14); color: #4dd6a8; border-color: rgba(56,189,148,0.3); }
  .dg-stream-tag.s-lodge   { background: rgba(220,38,38,0.16);  color: #ef4444; border-color: rgba(220,38,38,0.4); }
  .dg-stream-tag.s-ondemand { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.18); }
  .dg-row a.dg-title-link { color: inherit; text-decoration: none; }
  .dg-row a.dg-title-link:hover { text-decoration: none; color: var(--orange); }

  /* Phones: drop the row thumbnail so the title gets its width back, and
     left-align the times. The hero poster is still there. */
  @media (max-width: 600px) {
    .dg-row { grid-template-columns: 62px 1fr; gap: 11px; padding: 11px 14px; }
    .dg-row .dg-thumb { display: none; }
    /* Titles carry the list on a phone — see the tgp-* copy in the players. */
    .dg-row-title { font-size: 18px; line-height: 1.2; }
    .dg-row-dur, .dg-up-next { font-size: 12px; }
    .dg-row-time { text-align: left; font-size: 15px; letter-spacing: 0.2px; }
    .dg-now-body { padding-left: 14px; padding-right: 14px; }
    .dg-day { padding-left: 14px; padding-right: 14px; }
    .dg-head { padding: 10px 8px 10px 12px; gap: 9px; }
    .dg-now-actions { gap: 7px; }
    .dg-stream-tags { gap: 5px; }
    .dg-watch-btn { font-size: 12px; padding: 7px 13px; letter-spacing: 1.1px; }
    .dg-watch-btn svg { width: 12px; height: 12px; }
    .dg-stream-tag { font-size: 10px; padding: 2px 7px; letter-spacing: 0.8px; }
  }

  .dg-loading, .dg-error, .dg-empty {
    padding: 30px 20px; text-align: center; font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; letter-spacing: 0.6px; color: rgba(255,255,255,0.4);
  }

  /* ── Hero slideshow (crossfade) ──
     Each .hero-slide is a self-contained hero (its own background + gradients +
     content). Slides are stacked and crossfaded by toggling .is-active. */
  .hero-slides { position: absolute; inset: 0; z-index: 0; }
  .hero-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; z-index: 1;
    pointer-events: none;
    transition: opacity 0.9s ease, visibility 0s linear 0.9s;
  }
  .hero-slide.is-active {
    opacity: 1; visibility: visible; z-index: 2;
    pointer-events: auto;
    /* Ramp the incoming slide to full opacity fast so the per-letter blink-in
       reads as hard cuts; the outgoing slide still dissolves out over 0.9s. */
    transition: opacity 0.4s ease, visibility 0s;
  }
  .hero-bg {
    position: absolute; inset: 0;
    overflow: hidden; background: #0e0b08; z-index: 0;
  }
  .hero-bg > img,
  .hero-bg > video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; pointer-events: none;
  }
  /* Art Draws Us Together slide: a drifting wall of real gallery artwork in
     place of the promo clip (ported from the Cinematic Clubhouse widget). Three
     rows, each strip duplicated so the -50% marquee loops seamlessly, tilted and
     overscaled so an edge is never visible. The tiles are nested a level deeper
     than the .hero-bg > img rule above, so they keep their own size. */
  .hero-mosaic {
    position: absolute; inset: -8%; z-index: 1;
    display: flex; flex-direction: column; gap: 0;
    transform: rotate(-2deg) scale(1.12);
    opacity: 0; transition: opacity 0.6s ease; pointer-events: none;
  }
  .hero-mosaic.is-in { opacity: 1; }
  /* Each row takes a third of the height and the tiles are sized off THAT, so
     the wall always fills the frame edge to edge — a fixed tile size left black
     bands above and below on a tall hero. */
  .hero-mo-row {
    flex: 1 1 0; min-height: 0; display: flex; gap: 0; width: max-content;
    animation: heroMoDrift 240s linear infinite;
  }
  .hero-mo-row.rev { animation-direction: reverse; }
  .hero-mo-row img {
    height: 100%; width: auto; aspect-ratio: 1 / 1;
    object-fit: cover; flex-shrink: 0; display: block; opacity: 0.85;
  }
  /* Nothing drifts on a slide nobody is looking at. */
  .hero-slide:not(.is-active) .hero-mo-row { animation-play-state: paused; }
  @keyframes heroMoDrift { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .hero-mo-row { animation: none; } }
  /* Optional foreground character (a transparent cutout, e.g. Kay) that sits on
     the right, over the background but under the copy (z-index 2 vs content's 3,
     so it can never cover the text). It rises up + fades in whenever its slide
     becomes active — a transition (not a keyframe) so it re-plays on every
     rotation, and eases out again as the slide crossfades away. */
  .hero-character {
    position: absolute; right: 0; bottom: 0;
    height: 99%; width: auto; max-width: 52%;
    object-fit: contain; object-position: bottom right;
    z-index: 2; pointer-events: none;
    opacity: 0; transform: translateY(8%);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
    will-change: transform, opacity;
  }
  .hero-slide.is-active .hero-character { opacity: 1; transform: translateY(0); }
  /* On a slide with a foreground character, hold the copy in a narrow left
     column so every line wraps before it reaches the illustration. */
  .hero-slide:has(.hero-character) .hero-content { max-width: 46%; }
  .hero-slide:has(.hero-character) .hero-body { max-width: 100%; }
  @media (prefers-reduced-motion: reduce) {
    /* Drop the movement but keep the fade — the .is-active rule still sets the
       resting transform instantly, so mobile centering is preserved. */
    .hero-character { transition: opacity 0.4s ease; }
  }
  @media (max-width: 768px) {
    /* Mobile: Kay front-and-center and large; the copy runs full width at the
       bottom, over her lower body (the bottom gradient keeps it legible). The
       centering translateX is folded into the rise transform for both states. */
    .hero-slide:has(.hero-character) .hero-character {
      left: 50%; right: auto; height: 82%; width: auto; max-width: none;
      transform: translateX(-50%) translateY(8%);
    }
    .hero-slide.is-active:has(.hero-character) .hero-character {
      transform: translateX(-50%) translateY(0);
    }
    /* Full-width copy over Kay, on its own dark gradient so it stays legible
       against her face (feathers up above the eyebrow via the top padding). */
    .hero-slide:has(.hero-character) .hero-content {
      max-width: 100%;
      padding-top: 64px;
      background: linear-gradient(to top,
        rgba(8,11,8,0.95) 0%, rgba(8,11,8,0.9) 34%, rgba(8,11,8,0.62) 62%,
        rgba(8,11,8,0.2) 85%, transparent 100%);
    }
    /* Keep the copy compact on phones so it doesn't crowd Kay (headline is
       shrunk in fitTitles(); this trims the supporting text to match). */
    .hero-slide:has(.hero-character) .hero-eyebrow { font-size: 11px; margin-bottom: 8px; }
    .hero-slide:has(.hero-character) .hero-body { font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
  }
  /* Dots */
  .hero-dots {
    position: absolute; left: 0; right: 0; bottom: 18px;
    z-index: 6; display: flex; gap: 9px;
    justify-content: center; align-items: center;
    pointer-events: none;
  }
  .hero-dots:empty { display: none; }
  .hero-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5);
    cursor: pointer; pointer-events: auto;
    transition: background 0.2s, transform 0.2s, width 0.2s, border-radius 0.2s;
  }
  .hero-dot:hover { background: rgba(255,255,255,0.65); }
  .hero-dot.is-active {
    background: var(--orange);
    border-color: var(--orange);
    width: 22px; border-radius: 5px;
  }
  @media (max-width: 768px) {
    .hero-dots { bottom: 12px; }
  }