/* Moved verbatim from templates/therapy/venue_detail.html (inline <style>) so it can be
   cached. Keep in sync with that template; cascade position = the
   <link> that replaced the <style> block. */
/* ── Brand tokens — mirror landing.html so the venue page is
      visually a sibling of the homepage. Never paste raw hex inside
      component rules; always reference these tokens. ─────────────── */
:root{
  /* Brand kit v2: Therapy Teal primary, Session Rust as rare accent. */
  --ts-paper:#ECE6D8;--ts-paper-hi:#F0EADC;--ts-paper-2:#E3DCC9;--ts-paper-deep:#D4CCB6;--ts-cream:#F0E8D5;
  --ts-ink:#14110E;--ts-ink-2:#221D18;--ts-ink-soft:#6B6258;--ts-ink-mute:#6B6258;
  --ts-noir:#0D0B09;--ts-noir-2:#1A1612;
  --ts-teal:#1F8C8C;--ts-teal-300:#6FAFAE;--ts-teal-500:#1F8C8C;--ts-teal-600:#1B7F7F;
  --ts-teal-700:#0F5F62;--ts-teal-deep:#0F5F62;--ts-teal-mute:#6FAFAE;
  --ts-rust:#C8693A;--ts-rust-300:#D78E63;--ts-rust-500:#C8693A;--ts-rust-700:#9A4A23;
  --ts-rust-deep:#9A4A23;--ts-rust-glow:#D78E63;
  --ts-mustard:#D4A24A;
  --slab:'Sora','Helvetica Neue',Helvetica,Arial,sans-serif;
  --display:'Sora',sans-serif;
  --serif:'Sora','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --hand:'Caveat','Bradley Hand',cursive;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ts-paper);color:var(--ts-ink);font-family:var(--body);font-weight:400;line-height:1.6;overflow-x:clip;position:relative;}
img{max-width:100%;display:block;}

/* Hide the three social icons in the cream header on the venue page —
   they aren't useful here (header is brand-only, socials live on each
   venue/artist page or in the brand menu). Applies at every viewport. */
body.tv-venue-detail .ts-head-soc-group,
body.tv-venue-detail .ts-head-socials,
body.tv-venue-detail .ts-head .ts-head-soc-group{visibility:hidden;pointer-events:none;}

/* Venue logo INSIDE the H1 — replaces the rust-italic venue name span
   when a logo URL is set. Sized to roughly match the cap-height of the
   "Thu, Fri & Sat Nights." line so the H1 reads as one unit. CSS-mask
   tints the PNG to the brand rust regardless of its native colour. */
.tv-hero-h-logo{
  display:inline-block;vertical-align:-12%;
  width:clamp(180px,22vw,320px);
  height:clamp(60px,8.5vw,116px);
  margin-right:8px;
  background-color:var(--ts-teal);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Standalone hero logo above the headline — kept for layouts that don't
   inject the logo into the H1, but on this page it's now superseded by
   .tv-hero-h-logo so we hide it to avoid duplication. */
.tv-hero-logo{display:none;}

/* Inline social icon next to the RSVP button — the venue's own
   Instagram lives here so the brand-menu socials can stay pointed at
   Therapy Sound. */
.tv-hero-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;
  border:1px solid rgba(14,14,16,0.18);
  color:var(--ts-ink);text-decoration:none;font-size:1.1rem;
  background:transparent;flex:0 0 auto;
  transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s;
}
.tv-hero-soc:hover{
  background:var(--ts-teal);color:#fff;border-color:var(--ts-teal);
  transform:translateY(-2px);
}

/* ── Film grain overlay — same as homepage so the venue page reads
      as the same printed-poster aesthetic. Sits behind everything via
      pointer-events:none. ───────────────────────────────────────── */
body::before{content:'';position:fixed;top:-12%;left:-12%;right:-12%;bottom:-12%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");background-size:280px 280px;opacity:0.18;mix-blend-mode:multiply;pointer-events:none;z-index:200;animation:tv-grain 0.85s steps(10) infinite;will-change:transform;}
@keyframes tv-grain{0%{transform:translate(0,0);}25%{transform:translate(2%,-1%);}50%{transform:translate(-1%,2%);}75%{transform:translate(1%,1%);}100%{transform:translate(0,0);}}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 100% 90% at 50% 50%,transparent 45%,rgba(14,14,16,0.06) 80%,rgba(14,14,16,0.22) 100%);pointer-events:none;z-index:201;mix-blend-mode:multiply;}

/* ─────────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR (Tier 2 #6) — slim rust strip pinned ABOVE the hero.
   Renders only when venue.announcement_text is set AND not expired. The
   close button stashes a flag in sessionStorage so the bar stays hidden
   for the rest of the tab session but reappears on a fresh visit.
   ───────────────────────────────────────────────────────────────── */
.tv-announce{
  background:var(--ts-teal);color:var(--ts-cream);
  font-family:var(--mono);font-size:0.78rem;font-weight:500;
  letter-spacing:0.04em;line-height:1.4;
  position:relative;z-index:5;
  border-bottom:1px solid var(--ts-teal-700);
}
.tv-announce-inner{
  max-width:1340px;margin:0 auto;
  padding:10px 56px 10px 32px;
  display:flex;align-items:center;gap:14px;
}
.tv-announce-dot{
  flex:0 0 8px;width:8px;height:8px;border-radius:50%;
  background:var(--ts-cream);
  box-shadow:0 0 0 4px rgba(240,232,213,0.22);
  animation:tv-announce-pulse 2.4s ease-in-out infinite;
}
@keyframes tv-announce-pulse{
  0%,100%{opacity:1;}50%{opacity:0.45;}
}
.tv-announce-msg{flex:1;word-break:break-word;}
.tv-announce-close{
  position:absolute;top:50%;right:18px;transform:translateY(-50%);
  background:transparent;border:none;cursor:pointer;
  color:var(--ts-cream);font-size:1.15rem;line-height:1;padding:4px 8px;
  border-radius:6px;transition:background 0.15s;
}
.tv-announce-close:hover,.tv-announce-close:focus{
  background:var(--ts-teal-700);outline:none;
}
@media(max-width:640px){
  .tv-announce-inner{padding:10px 48px 10px 20px;font-size:0.74rem;}
}

/* ─────────────────────────────────────────────────────────────────
   HERO — .tv-hero / .tv-flyer-wrap / .tv-hero-h
   ───────────────────────────────────────────────────────────────── */
.tv-hero{padding:32px 0 80px;position:relative;}
.tv-hero-inner{max-width:1340px;margin:0 auto;padding:0 32px;}

.tv-hero-eyebrow-strip{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  padding:14px 22px;margin:24px 0 48px;
  background:var(--ts-paper-hi);
  border:1px solid rgba(14,14,16,0.10);
  border-radius:999px;
  box-shadow:0 8px 22px -16px rgba(14,14,16,0.30);
}
.tv-hero-eyebrow-line{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ts-ink-soft);
}
.tv-hero-eyebrow-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--ts-teal);box-shadow:0 0 0 4px rgba(31,140,140,0.15);
}
.tv-hero-eyebrow-actions{display:flex;gap:10px;flex-wrap:wrap;}
.tv-eyepill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  font-family:var(--mono);font-size:0.62rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;
  transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.1s;
}
.tv-eyepill i{font-size:0.85rem;}
.tv-eyepill--rust{background:var(--ts-teal);color:#fff;border-color:var(--ts-teal);}
.tv-eyepill--rust:hover{background:var(--ts-teal-700);border-color:var(--ts-teal-700);transform:translateY(-1px);}
.tv-eyepill--ghost{background:transparent;color:var(--ts-ink);border-color:var(--ts-ink);}
.tv-eyepill--ghost:hover{background:var(--ts-ink);color:#fff;transform:translateY(-1px);}

/* Hero grid — 2-col on desktop, stacks on mobile. Poster left,
   headline right. Tablet pulls poster width down. */
.tv-hero-grid{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  gap:64px;align-items:center;
}

/* Angled cream poster card — rotated ~-2°, ink shadow. Wraps the
   poster image (or CSS fallback) and the "tickets — rsvp" caption. */
.tv-flyer-wrap{
  position:relative;perspective:1200px;z-index:2;
  max-width:460px;margin:0 auto;width:100%;
  display:block;text-decoration:none;
  transform:rotate(-1.8deg);
  box-shadow:0 36px 64px -22px rgba(14,14,16,0.45),0 8px 18px rgba(14,14,16,0.18);
  background:var(--ts-paper-hi);
  border:1px solid rgba(14,14,16,0.10);
  padding:16px 16px 44px;
  transition:transform 0.4s cubic-bezier(0.2,0.7,0.2,1),box-shadow 0.3s;
  cursor:pointer;
}
.tv-flyer-wrap:hover{transform:rotate(-1deg) translateY(-4px);box-shadow:0 44px 78px -22px rgba(14,14,16,0.55),0 12px 22px rgba(14,14,16,0.22);}
.tv-flyer-wrap:focus-visible{outline:2px solid var(--ts-teal);outline-offset:4px;}
.tv-flyer-img{
  display:block;width:100%;height:auto;
  object-fit:cover;background:var(--ts-ink);
  aspect-ratio:1080/1350;
}
.tv-flyer-caption{
  position:absolute;left:0;right:0;bottom:14px;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(0.78rem,1.4vw,0.95rem);
  letter-spacing:0.04em;color:var(--ts-ink);
  text-align:center;transform:rotate(-0.8deg);
  pointer-events:none;
}

/* CSS-art poster fallback (no admin-uploaded image yet). */
.tv-flyer-cssart{
  position:relative;background:var(--ts-paper-hi);
  aspect-ratio:1080/1350;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 28px;
  overflow:hidden;text-align:center;
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(14,14,16,0.08) 0.5px,transparent 1px);
  background-size:3.5px 3.5px;
}
.tv-flyer-cssart-sun{
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--ts-teal-300),var(--ts-teal) 65%,var(--ts-teal-700) 100%);
  box-shadow:0 14px 28px -10px rgba(31,140,140,0.45);
  margin-bottom:28px;
}
/* Cream poster — venue logo variant (rust-tinted CSS mask). Used when
   venue_logo_url is set; replaces the legacy "HG" slug-text fallback. */
.tv-flyer-cssart-logo{
  display:block;
  width:78%;height:38%;
  margin:18px auto 0;
  background-color:var(--ts-teal);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.tv-flyer-cssart-title{line-height:0.86;letter-spacing:-0.02em;color:var(--ts-ink);}
.tv-flyer-cssart-title .l1,.tv-flyer-cssart-title .l2{
  font-family:var(--slab);font-weight:900;font-size:clamp(2rem,5vw,3.2rem);
  text-transform:uppercase;display:block;
}
.tv-flyer-cssart-title .l2{color:var(--ts-teal);margin-top:-4px;}
.tv-flyer-cssart-dates{
  font-family:var(--mono);font-size:0.62rem;font-weight:500;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--ts-ink-soft);margin-top:18px;
}
.tv-flyer-cssart-sub{
  font-family:var(--serif);font-style:italic;font-size:0.95rem;
  color:var(--ts-ink-mute);margin-top:10px;
}

/* Hero copy ─────────────────────────────────────────────────── */
.tv-hero-copy{padding-left:8px;display:flex;flex-direction:column;align-items:flex-start;}
.tv-hero-eyebrow{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ts-teal);margin-bottom:22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
/* Rust dash before the eyebrow text is gone — the typographic divider
   now lives BETWEEN the logo and the heading line (see .tv-hero-h-rule
   below) and is ink, not rust, per Sam's 2026-05-12 ask. */
.tv-hero-eyebrow::before{display:none;}
.tv-hero-eyebrow-sep{opacity:0.5;}

.tv-hero-h{
  font-family:var(--slab);font-weight:900;
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  line-height:0.94;letter-spacing:-0.025em;
  color:var(--ts-ink);margin-bottom:22px;
  text-transform:none;
}
.tv-hero-rust-i{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--ts-teal);letter-spacing:-0.01em;
}
.tv-hero-ink{color:var(--ts-ink);display:block;margin-top:4px;}
/* Ink rule between the logo and the heading line — same 24×1 dash
   from the old eyebrow, recoloured to ink and re-anchored as a row
   inside the H1. `display: block` puts it on its own line; the small
   block margins give it breathing room without spreading the H1. */
.tv-hero-h-rule{
  display:block;width:36px;height:2px;
  background:var(--ts-ink);
  margin:14px 0 12px;
}

.tv-hero-desc{
  font-size:1rem;line-height:1.75;color:var(--ts-ink-soft);
  max-width:520px;margin-bottom:32px;
}

.tv-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px;}
.tv-hero-admin{display:flex;margin-bottom:12px;}
.tv-hero-admin-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--ts-ink);color:var(--ts-paper-hi);font-family:var(--ts-mono);font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;text-decoration:none;border:1px solid var(--ts-ink);transition:background 0.15s,transform 0.1s;}
.tv-hero-admin-pill:hover{background:var(--ts-teal);border-color:var(--ts-teal);transform:translateY(-1px);}
.tv-hero-admin-pill i{font-size:0.85rem;}
.tv-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:0.72rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:14px 24px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.1s,box-shadow 0.15s;
}
.tv-btn i{font-size:0.9rem;}
.tv-btn--rust{background:var(--ts-teal);color:#fff;border-color:var(--ts-teal);box-shadow:0 14px 28px -16px rgba(31,140,140,0.7);}
.tv-btn--rust:hover{background:var(--ts-teal-700);border-color:var(--ts-teal-700);transform:translateY(-1px);box-shadow:0 18px 34px -16px rgba(31,140,140,0.85);}
.tv-btn--ghost{background:transparent;color:var(--ts-ink);border-color:var(--ts-ink);}
.tv-btn--ghost:hover{background:var(--ts-ink);color:#fff;transform:translateY(-1px);}

/* Meta row — Archivo Narrow small caps, vertical rules between cells */
.tv-meta{
  display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid rgba(14,14,16,0.14);
  width:100%;max-width:520px;
}
.tv-meta-item{
  display:flex;flex-direction:column;gap:6px;flex:1 1 0;min-width:88px;
}
.tv-meta-key{
  font-family:var(--mono);font-size:0.58rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ts-ink-mute);
}
.tv-meta-val{
  font-family:var(--slab);font-weight:800;font-size:1.25rem;
  letter-spacing:0.02em;text-transform:uppercase;
  color:var(--ts-ink);line-height:1;
}
.tv-meta-rule{
  flex:0 0 auto;width:1px;background:rgba(14,14,16,0.14);
  align-self:stretch;margin:0 4px;
}

/* ─────────────────────────────────────────────────────────────────
   "The next session" — featured event card on the right + slab
   headline + lede on the left.
   ───────────────────────────────────────────────────────────────── */
.tv-next{
  background:var(--ts-ink);color:#fff;
  padding:80px 32px;margin:0 24px;border-radius:32px;
  position:relative;overflow:hidden;
}
.tv-next::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(255,255,255,0.04) 0.5px,transparent 1px);
  background-size:4px 4px;pointer-events:none;
}
.tv-next-inner{
  max-width:780px;margin:0 auto;
  display:flex;flex-direction:column;align-items:stretch;gap:36px;
  position:relative;z-index:1;
}
.tv-next-copy{display:flex;flex-direction:column;align-items:flex-start;}
.tv-next-right{align-self:center;width:100%;max-width:560px;}
/* Centre the RSVP CTA beneath the card on every viewport. */
.tv-next-cta{align-self:center;}
.tv-next-eyebrow{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ts-teal);margin-bottom:22px;
  display:flex;align-items:center;gap:12px;
}
.tv-next-eyebrow::before{content:'';width:36px;height:1px;background:var(--ts-teal);}
.tv-next-h{
  font-family:var(--slab);font-weight:800;
  font-size:clamp(2.4rem,5vw,4rem);line-height:0.96;
  letter-spacing:-0.02em;color:#fff;margin-bottom:24px;
}
.tv-next-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ts-teal-300);}
.tv-next-h em::after{content:'.';color:var(--ts-teal-300);}
.tv-next-lede{
  max-width:440px;color:rgba(245,238,221,0.7);
  font-size:0.95rem;line-height:1.85;margin-bottom:28px;
}
.tv-next-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:999px;
  background:var(--ts-teal);color:#fff;border:1px solid var(--ts-teal);
  text-decoration:none;font-family:var(--mono);font-weight:500;
  font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;
  transition:background 0.15s,border-color 0.15s,transform 0.1s,box-shadow 0.15s;
  box-shadow:0 14px 28px -16px rgba(31,140,140,0.7);
}
.tv-next-cta:hover{background:var(--ts-teal-700);border-color:var(--ts-teal-700);transform:translateY(-1px);}

/* Featured stack: Thursday hero card on the left, Friday + Saturday
   side cards stacked on the right.

   The featured card drives the row height (its natural content size —
   no stretch). The side stack is capped at exactly that height via
   a JS ResizeObserver (see `bootTvNextSyncHeight` at the bottom of
   this template) which writes `style.height` onto `.tv-next-side-stack`.
   Each side card then = (featured height − gap) / 2 because the
   stack is a 2-row grid with `minmax(0,1fr)` rows; inner flyer
   images crop on the sides via `object-fit: cover` +
   `object-position: center` so faces stay in frame. */
.tv-next-stack{
  display:flex;flex-direction:column;gap:14px;
  align-items:stretch;
}
.tv-next-side-stack{
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  min-width:0;min-height:0;
  /* JS sets style.height to match the featured card. Until JS runs
     (or as a no-JS fallback) the side stack just sizes to its own
     natural content height — same as PR #500's behaviour. */
}
/* Side cards (Fri + Sat) — flyer on TOP, text below. Flyer flexes
   to fill the remaining height so it stays the visual anchor; text
   block locks to the bottom with the arrow inline next to the name. */
.tv-next-side{
  display:flex;flex-direction:column;gap:10px;
  padding:12px;background:var(--ts-paper-hi);
  border:1px solid rgba(14,14,16,0.10);border-radius:18px;
  color:var(--ts-ink);text-decoration:none;overflow:hidden;
  transition:transform 0.15s,border-color 0.15s,box-shadow 0.15s;
  /* min-height:0 lets the flex column shrink past its content min so
     the parent grid row caps actually take effect. Without this, a
     tall flyer image would push the card to its natural intrinsic
     height regardless of the row constraint. */
  min-width:0;min-height:0;
}
.tv-next-side-art{flex:1 1 0;min-height:0;}
.tv-next-side-art img{object-fit:cover;object-position:center center;}
.tv-next-side:hover{
  transform:translateY(-2px);border-color:var(--ts-teal);
  box-shadow:0 14px 28px -18px rgba(31,140,140,0.35);
}
.tv-next-side-art{
  width:100%;flex:1 1 auto;min-height:80px;
  border-radius:10px;overflow:hidden;
  background:var(--ts-paper-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.2em;color:var(--ts-ink-mute);
}
.tv-next-side-art img{width:100%;height:100%;object-fit:cover;display:block;}
.tv-next-side-body{
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;
  align-items:end;min-width:0;flex:0 0 auto;
}
.tv-next-side-day{
  font-family:var(--mono);font-size:0.58rem;font-weight:600;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--ts-teal);
  grid-column:1 / -1;
}
.tv-next-side-name{
  font-family:var(--slab);font-weight:800;font-size:1.05rem;line-height:1;
  color:var(--ts-ink);text-transform:uppercase;letter-spacing:-0.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  grid-column:1;
}
.tv-next-side-time{
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ts-ink-mute);
  grid-column:1 / -1;
}
.tv-next-side-arrow{
  color:var(--ts-teal);font-size:1.05rem;
  grid-column:2;grid-row:2;align-self:end;
}
.tv-next-card--locked{cursor:pointer;}
.tv-next-card--locked .tv-next-card-art{
  background:repeating-linear-gradient(-45deg,var(--ts-paper-hi) 0 8px,var(--ts-paper-2) 8px 16px);
}
.tv-next-card--locked .tv-next-card-num i{margin-right:4px;}

/* (Old responsive overrides that switched to a 1-column stack on
   tablet/mobile were removed — the layout now stays "featured-left +
   2 side cards right" at every viewport per Sam's 2026-05-12 ask.) */

/* Featured card on the right — same .ts-up-card-ish shape so it
   visually rhymes with the homepage upcoming stack. Tappable →
   shared lightbox via .sched-ev-chip + data-event-* contract. */
.tv-next-card{
  position:relative;background:var(--ts-paper-hi);color:var(--ts-ink);
  border:1px solid rgba(14,14,16,0.12);overflow:hidden;
  border-radius:18px;cursor:pointer;text-decoration:none;display:block;
  box-shadow:0 24px 48px -18px rgba(0,0,0,0.55),0 6px 14px rgba(0,0,0,0.20);
  transition:transform 0.3s cubic-bezier(0.5,0.1,0.2,1),box-shadow 0.3s;
  transform:rotate(-2.4deg);
  width:100%;
}
.tv-next-card:hover{transform:rotate(0) translateY(-4px);box-shadow:0 32px 60px -18px rgba(0,0,0,0.7),0 10px 20px rgba(0,0,0,0.28);}
.tv-next-card-corner{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 18px 0;
  font-family:var(--mono);font-size:0.55rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
}
.tv-next-card-tag{color:var(--ts-teal);min-width:0;}
/* Stay on one line even when the tag eats most of the row — "01 / 03"
   was wrapping into "01 /" + "03" before, which read as two paragraph
   lines. Letter-spacing keeps mono rhythm; whitespace lock + no-shrink
   forces the column to honour the count's full width. */
.tv-next-card-num{
  color:var(--ts-ink-mute);
  white-space:nowrap;
  flex-shrink:0;
}
.tv-next-card-art{
  position:relative;background:var(--ts-ink);
  width:100%;aspect-ratio:1080/1350;overflow:hidden;
  display:flex;align-items:stretch;justify-content:stretch;
}
.tv-next-card-art img{display:block;width:100%;height:100%;object-fit:cover;}
.tv-next-card-art-empty{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:rgba(245,238,221,0.5);
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.22em;
  text-transform:uppercase;text-align:center;padding:24px;
}
.tv-next-card-foot{padding:14px 18px 4px;}
.tv-next-card-name{
  font-family:var(--slab);font-weight:800;font-size:1.1rem;
  line-height:1.05;letter-spacing:-0.005em;color:var(--ts-ink);
  margin-bottom:4px;
}
.tv-next-card-meta{
  font-family:var(--mono);font-size:0.58rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--ts-ink-mute);
}
.tv-next-card-bottombar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;
  border-top:1px solid rgba(14,14,16,0.08);
  font-family:var(--mono);font-size:0.55rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--ts-teal);
}

/* ─────────────────────────────────────────────────────────────────
   The Lineup — Thu/Fri/Sat date-tile grid (6 next dates).
   ───────────────────────────────────────────────────────────────── */
.tv-dates{padding:80px 32px;max-width:1340px;margin:0 auto;position:relative;}
.tv-dates-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;margin-bottom:36px;
}
.tv-dates-eyebrow{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ts-teal);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.tv-dates-eyebrow::before{content:'';width:24px;height:1px;background:var(--ts-teal);}
.tv-dates-h{
  font-family:var(--slab);font-weight:800;font-size:clamp(2rem,4vw,3.4rem);
  line-height:0.98;letter-spacing:-0.02em;color:var(--ts-ink);
}
.tv-dates-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ts-teal);}
.tv-dates-h em::after{content:'.';color:var(--ts-teal);}
.tv-dates-arrows{display:flex;gap:8px;}
.tv-dates-arrow{
  width:44px;height:44px;border-radius:50%;
  background:transparent;color:var(--ts-ink);
  border:1px solid var(--ts-ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;
  transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.1s;
}
.tv-dates-arrow:hover{background:var(--ts-teal);border-color:var(--ts-teal);color:#fff;}
.tv-dates-arrow.is-disabled{opacity:0.35;pointer-events:none;}

.tv-dates-rail-wrap{position:relative;}
.tv-dates-rail{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.tv-date-tile{
  position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;padding:22px 18px 18px;
  /* Translucent day cards — let the page behind show through. */
  background:rgba(245,238,221,0.34);color:var(--ts-ink);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(14,14,16,0.10);border-radius:16px;
  text-decoration:none;cursor:pointer;
  transition:transform 0.15s,border-color 0.15s,box-shadow 0.15s,background 0.15s;
}
.tv-date-tile:hover{
  transform:translateY(-3px);border-color:var(--ts-teal);
  box-shadow:0 18px 32px -18px rgba(31,140,140,0.45);
}
.tv-date-tile:focus-visible{outline:2px solid var(--ts-teal);outline-offset:2px;}
.tv-date-tile-day{
  font-family:var(--mono);font-size:0.58rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;color:var(--ts-ink-mute);
}
.tv-date-tile-num{
  font-family:var(--slab);font-weight:900;
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:0.9;
  letter-spacing:-0.02em;color:var(--ts-ink);
}
.tv-date-tile-month{
  font-family:var(--mono);font-size:0.6rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--ts-ink-soft);
}
.tv-date-tile-tag{
  font-family:var(--mono);font-size:0.52rem;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
  background:var(--ts-teal);color:#fff;
  align-self:flex-start;
}
.tv-date-tile.is-today{
  background:linear-gradient(135deg,rgba(245,238,221,0.40) 0%,rgba(31,140,140,0.14) 100%);
  border-color:rgba(31,140,140,0.35);
}
.tv-date-tile--locked{
  background:repeating-linear-gradient(
    -45deg,
    rgba(245,238,221,0.30) 0 6px,
    rgba(232,224,205,0.30)  6px 12px
  );
  border-style:dashed;border-color:rgba(14,14,16,0.22);
}
.tv-date-tile--locked .tv-date-tile-num{color:var(--ts-ink-soft);}
.tv-date-tile--locked .tv-date-tile-name{
  color:var(--ts-teal);font-weight:700;letter-spacing:0.14em;
  white-space:normal;line-height:1.2;
  display:flex;flex-direction:column;gap:2px;
}
.tv-date-tile--locked .tv-date-tile-name i{margin-bottom:2px;}
.tv-date-tile--locked .tv-date-tile-name small{
  display:block;font-size:0.78em;font-weight:500;letter-spacing:0.18em;
  color:var(--ts-ink-mute);text-transform:uppercase;
}
.tv-date-tile--locked:hover{border-color:var(--ts-teal);}
.tv-date-tile-name{
  font-family:var(--mono);font-size:0.58rem;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ts-ink-soft);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.tv-dates-empty{
  padding:36px 22px;border:1px dashed rgba(14,14,16,0.18);
  border-radius:16px;
  font-family:var(--mono);font-size:0.66rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-ink-mute);text-align:center;
}
/* Click-for-details hint under the section heading. */
.tv-dates-hint{
  margin-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:0.66rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ts-teal);
}
.tv-dates-hint i{font-size:0.8rem;}

/* ── Polaroid date tile ──────────────────────────────────────────
   <article class="tv-poly">
     <div class="tv-poly-photo">                  ← flyer fills frame
       <img>                                       background
       <span class="tv-poly-date">THU 14 MAY</span>  top-left corner
       <span class="tv-poly-name">Therapy Session</span>  top-right corner
     </div>
     <div class="tv-poly-caption">                ← cream strip at bottom
       <span class="tv-poly-djs">Floetic · Brando</span>  left
       <a class="tv-poly-rsvp">RSVP</a>           right
     </div>
   </article>
   No flip mechanic — the flyer is always visible. */
.tv-poly{
  position:relative;display:flex;flex-direction:column;
  background:var(--ts-paper-hi);
  border:1px solid rgba(14,14,16,0.10);border-radius:14px;
  overflow:hidden;text-decoration:none;color:var(--ts-ink);
  box-shadow:0 14px 30px -22px rgba(14,14,16,0.45);
  transition:transform 0.15s,box-shadow 0.15s,border-color 0.15s;
}
.tv-poly:hover{
  transform:translateY(-3px);
  border-color:var(--ts-teal);
  box-shadow:0 20px 36px -22px rgba(31,140,140,0.45);
}
.tv-poly.is-today{border-color:rgba(31,140,140,0.5);}
.tv-poly-photo{
  position:relative;aspect-ratio:4/5;background:var(--ts-ink-2);
  display:flex;align-items:center;justify-content:center;color:var(--ts-paper-hi);
  overflow:hidden;
}
.tv-poly-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.tv-poly-noimg{
  font-family:var(--mono);font-size:0.64rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--ts-paper-hi);
  opacity:0.55;
}
/* Corner overlay pills — translucent dark backdrop so they read on
   any flyer (light or dark). Date pill is two-row (weekday + day on
   top, month underneath); event-name pill wraps onto two rows when
   the name is long so the month never lands behind the title. */
.tv-poly-date,.tv-poly-name,.tv-poly-today,.tv-poly-lock{
  position:absolute;font-family:var(--mono);font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  background:rgba(14,14,16,0.78);color:var(--ts-paper-hi);
  padding:6px 10px;border-radius:6px;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);font-size:0.6rem;line-height:1.15;
}
.tv-poly-date{
  top:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;letter-spacing:0.18em;
}
.tv-poly-date-l1{font-weight:700;font-size:0.66rem;}
.tv-poly-date-l2{font-size:0.56rem;opacity:0.8;}
.tv-poly-name{
  bottom:10px;right:0;max-width:62%;
  /* Venue accent (rust default; teal / mustard / plum / forest /
     ocean per the accent_color picked in the venue self-edit form).
     color-mix keeps the ~92% alpha so the flyer barely peeks through
     the pill. Was previously hardcoded rgba(31,140,140,0.92) which
     ignored the per-venue accent. */
  background:color-mix(in srgb, var(--ts-teal) 92%, transparent);
  font-weight:700;letter-spacing:0.12em;white-space:nowrap;
  text-align:right;line-height:1.15;
  padding:6px 10px 6px 8px;
  border-radius:6px 0 0 6px;
  overflow:hidden;text-overflow:ellipsis;
}
.tv-poly-today{
  bottom:10px;left:10px;
  background:rgba(14,14,16,0.85);color:var(--ts-teal);
  white-space:nowrap;
}
.tv-poly-lock{
  top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,14,16,0.85);white-space:nowrap;
}
.tv-poly-lock i{font-size:0.78rem;color:var(--ts-teal);}
/* Caption strip — cream, single column. DJ names get full width
   because the RSVP trigger is now the entire polaroid. */
.tv-poly-caption{
  display:flex;align-items:center;padding:12px 14px;
  background:var(--ts-paper-hi);border-top:1px solid rgba(14,14,16,0.08);
}
.tv-poly-djs{
  font-family:var(--mono);font-size:0.66rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ts-ink);
  line-height:1.3;width:100%;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;word-break:break-word;
}
/* Members-only locked tile — adds a dim overlay over the photo so the
   flyer reads as "behind the wall". */
.tv-poly--locked .tv-poly-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,16,0.25) 0%,rgba(14,14,16,0.7) 100%);
}

/* ── Flip-tile (the 6 Thu/Fri/Sat cards) ─────────────────────────
   <button class="tv-date-tile tv-date-tile--flip">
     <span class="tv-date-tile-inner">                  ← 3D-flipping pane
       <span class="tv-date-tile-face tv-date-tile-face--front">...</span>
       <span class="tv-date-tile-face tv-date-tile-face--back">...</span>
     </span>
   </button>
   The button itself is the perspective container; .is-flipped toggles
   the 180° rotation. */
button.tv-date-tile{
  appearance:none;background:transparent;border:0;text-align:left;
  font:inherit;color:inherit;cursor:pointer;
}
.tv-date-tile--flip{
  perspective:1200px;padding:0;overflow:visible;
  /* 220 (was 180) so the back face has room for: flyer + name + up to
     4 artist chips + RSVP pill without the chips clipping the pill. */
  min-height:220px;display:block;position:relative;
}
.tv-date-tile-inner{
  position:relative;display:block;
  width:100%;min-height:220px;
  transition:transform 0.65s cubic-bezier(0.4,0,0.2,1);
  transform-style:preserve-3d;
}
.tv-date-tile--flip.is-flipped .tv-date-tile-inner{
  transform:rotateY(180deg);
}
.tv-date-tile-face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;
  padding:22px 18px 18px;border-radius:16px;
  border:1px solid rgba(14,14,16,0.10);
}
.tv-date-tile-face--front{
  background:var(--ts-paper-hi);color:var(--ts-ink);
  align-items:flex-start;gap:8px;
}
.tv-date-tile--flip.is-today .tv-date-tile-face--front{
  background:linear-gradient(135deg,var(--ts-paper-hi) 0%,rgba(31,140,140,0.10) 100%);
  border-color:rgba(31,140,140,0.35);
}
.tv-date-tile-face--back{
  background:var(--ts-teal);color:var(--ts-paper);
  transform:rotateY(180deg);
  gap:10px;align-items:stretch;
  border-color:var(--ts-teal-700);
}
/* Small mono date in the top-left corner of the back face (the front
   already carries the big date; this is just a visual continuity hint
   so users know which night they're looking at after the flip). Sits
   above the flyer in the flex stack but doesn't grow with it. */
.tv-date-tile-back-date{
  font-family:var(--mono);font-size:0.52rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  align-self:flex-start;
  padding:0;margin:0 0 -4px 0;
  flex:0 0 auto;
}
.tv-date-tile-back-flyer{
  width:100%;flex:1 1 auto;min-height:60px;
  background:rgba(14,14,16,0.18);border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tv-date-tile-back-flyer img{width:100%;height:100%;object-fit:cover;display:block;}
.tv-date-tile-back-noflyer{
  font-family:var(--mono);font-size:0.6rem;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(255,255,255,0.6);
}
.tv-date-tile-back-meta{display:flex;flex-direction:column;gap:2px;}
.tv-date-tile-back-name{
  font-family:var(--slab);font-weight:800;font-size:1rem;
  letter-spacing:-0.005em;text-transform:uppercase;line-height:1;
}
.tv-date-tile-back-djs{
  display:flex;flex-wrap:wrap;gap:4px;
}
.tv-date-tile-back-dj{
  font-family:var(--mono);font-size:0.55rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:3px 7px;border-radius:99px;
  background:rgba(255,255,255,0.18);color:var(--ts-paper);
}
/* RSVP button: full-width pill that replaces the old date subtitle,
   pre-loaded with date in the label. Click deep-links to the unified
   RSVP modal on the apex therapysound.ca homepage. */
.tv-date-tile-back-rsvp{
  margin-top:auto;align-self:stretch;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:99px;
  background:var(--ts-paper);color:var(--ts-teal-700);
  font-family:var(--mono);font-weight:700;font-size:0.66rem;
  letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;
  transition:background 0.15s,transform 0.15s;
}
.tv-date-tile-back-rsvp:hover{background:var(--ts-paper-hi);transform:translateY(-1px);}
/* Flip hint removed at Sam's request — the back-face is self-explanatory
   once flipped and the corner text was clipping into the RSVP pill when
   long artist names pushed the chip row tall. The remnant CSS below is
   kept dead-code-safe in case a stray markup reference re-introduces
   the class. */
.tv-date-tile-back-flip{
  display:none;
  position:absolute;bottom:6px;right:10px;
  font-family:var(--mono);font-size:0.48rem;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(255,255,255,0.42);
  pointer-events:none;
}

/* (Peel corner removed — flip animation kept; the section hint
   "Click a card for the flyer + RSVP" carries the affordance.) */

/* ─────────────────────────────────────────────────────────────────
   "Three rooms, one night" — resident lineup chips.
   ───────────────────────────────────────────────────────────────── */
.tv-lineup{
  background:var(--ts-paper-hi);padding:80px 32px;
  border-top:1px solid rgba(14,14,16,0.08);
  border-bottom:1px solid rgba(14,14,16,0.08);
  position:relative;
}
.tv-lineup::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(14,14,16,0.04) 0.5px,transparent 1px);
  background-size:4px 4px;pointer-events:none;
}
.tv-lineup-inner{max-width:1340px;margin:0 auto;position:relative;z-index:1;}
.tv-lineup-head{margin-bottom:36px;}
.tv-lineup-eyebrow{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ts-teal);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.tv-lineup-eyebrow::before{content:'';width:24px;height:1px;background:var(--ts-teal);}
.tv-lineup-h{
  font-family:var(--slab);font-weight:800;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:0.98;letter-spacing:-0.02em;
  color:var(--ts-ink);
}
.tv-lineup-h em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ts-teal);}
.tv-lineup-h em::after{content:'.';color:var(--ts-teal);}
/* Layout: 3 resident cards in a row, then the rust Therapy partner
   banner spanning the full row underneath. The partner card uses
   order:99 so even though it sits first in the iterating array, it
   visually drops to the bottom. */
.tv-lineup-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.tv-lineup-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:18px 18px 16px;
  background:var(--ts-paper);
  border:1px solid rgba(14,14,16,0.10);
  border-radius:20px;text-decoration:none;color:var(--ts-ink);
  transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;
  position:relative;overflow:hidden;min-width:0;
}
.tv-lineup-card:hover{
  transform:translateY(-3px);border-color:var(--ts-teal);
  box-shadow:0 18px 36px -20px rgba(31,140,140,0.32);
}
/* Static (no profile claimed yet) — keep the card visible but kill
   the link cursor + hover lift so it doesn't promise a 404. */
.tv-lineup-card--inert{cursor:default;}
.tv-lineup-card--inert:hover{transform:none;border-color:rgba(14,14,16,0.08);box-shadow:none;}
.tv-lineup-card-av{
  width:56px;height:56px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--slab);font-weight:900;font-size:1.2rem;
  color:#fff;letter-spacing:-0.02em;
  border:1px solid rgba(14,14,16,0.12);flex:0 0 auto;
}
.tv-lineup-card-av img{width:100%;height:100%;object-fit:cover;display:block;}
.tv-lineup-card-av--rust   {background:radial-gradient(circle at 30% 30%,var(--ts-teal-300),var(--ts-ink) 75%);}
.tv-lineup-card-av--teal   {background:radial-gradient(circle at 30% 30%,var(--ts-teal-mute),var(--ts-ink) 75%);}
.tv-lineup-card-av--mustard{background:radial-gradient(circle at 30% 30%,var(--ts-mustard),var(--ts-ink) 75%);}

.tv-lineup-card-meta{display:flex;flex-direction:column;gap:6px;min-width:0;width:100%;}
.tv-lineup-card-name{
  font-family:var(--slab);font-weight:800;font-size:1.35rem;
  line-height:1;letter-spacing:-0.005em;
  color:var(--ts-ink);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tv-lineup-card-night{
  font-family:var(--mono);font-size:0.6rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-ink-mute);
}
.tv-lineup-card-badge{
  position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:0.5rem;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:var(--ts-teal);color:#fff;
}
.tv-lineup-card-badge--rust   {background:var(--ts-teal);color:#fff;}
.tv-lineup-card-badge--teal   {background:var(--ts-teal);color:#fff;}
.tv-lineup-card-badge--mustard{background:var(--ts-mustard);color:var(--ts-ink);}

/* Partner card (Therapy Sound) — styled to echo the rewards
   "MORE WAYS TO earn." banner: solid rust, generous padding, big
   slab heading + Playfair italic accent, film-grain dotted overlay
   and a giant background-glyph for poster-stamp character. */
.tv-lineup-card--partner{
  background:var(--ts-teal);
  border-color:var(--ts-teal-700);
  color:var(--ts-paper);
  padding:28px 32px 30px;
  min-height:200px;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  overflow:hidden;position:relative;isolation:isolate;
  grid-column:1 / -1;  /* full row */
  order:99;            /* push past the other resident cards */
}
.tv-lineup-card--partner::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(255,255,255,0.10) 0.5px,transparent 1px);
  background-size:4px 4px;pointer-events:none;z-index:0;
}
.tv-lineup-card--partner::after{
  content:'';position:absolute;top:-20%;right:-10%;width:60%;height:120%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.08),transparent 70%);
  pointer-events:none;z-index:0;
}
.tv-lineup-card--partner > *{position:relative;z-index:1;}
.tv-lineup-card--partner:hover{
  background:var(--ts-teal-700);
  border-color:var(--ts-ink);
  box-shadow:0 18px 36px -20px rgba(14,14,16,0.5);
  transform:translateY(-3px);
}
.tv-lineup-card--partner .tv-lineup-card-headline{
  display:flex;flex-direction:column;gap:4px;
  margin:auto;
  text-align:center;
  position:relative;z-index:1;  /* sit above the wordmark watermark */
}
.tv-lineup-card--partner .tv-lineup-card-name{
  font-family:var(--slab);font-weight:900;
  font-size:clamp(2.4rem,4.6vw,3.6rem);
  line-height:0.92;letter-spacing:-0.025em;text-transform:uppercase;
  color:var(--ts-paper);
}
.tv-lineup-card--partner .tv-lineup-card-accent{
  font-family:var(--slab);font-weight:800;
  font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1;letter-spacing:-0.01em;color:var(--ts-paper);
}
.tv-lineup-card--partner .tv-lineup-card-accent em{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--ts-paper);padding-left:6px;
}
.tv-lineup-card--partner .tv-lineup-card-accent em::after{content:'';}
/* Pill badge moved to TOP-LEFT (was top-right, which read as a duplicate
   of the eyebrow). */
.tv-lineup-card--partner .tv-lineup-card-badge{
  position:absolute;top:18px;left:18px;right:auto;
  background:var(--ts-paper);color:var(--ts-teal-700);
  font-family:var(--mono);font-size:0.62rem;letter-spacing:0.22em;
  font-weight:700;padding:6px 14px;border-radius:999px;text-transform:uppercase;
  z-index:2;
}
/* "THERAPY" wordmark — bottom-left of the card as a soft watermark.
   Fully on-canvas (no negative offsets) so the whole word stays
   readable. Sized to about a third of the card width. */
/* THERAPY watermark — same simple style as the first giant T: solid
   slab letter in low-opacity cream, no dotted clipping, no outline. #}*/
.tv-lineup-card--partner .tv-lineup-card-wordmark{
  position:absolute;
  bottom:14px;left:0;
  margin:0;padding:0 0 0 6px;
  font-family:var(--slab);font-weight:900;
  font-size:clamp(3.6rem,8vw,6.4rem);
  line-height:0.78;letter-spacing:-0.025em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;z-index:0;
  color:rgba(255,255,255,0.32);
}
@media (max-width:960px){
  .tv-lineup-card--partner{grid-column:1 / -1;}
}

@media (max-width:960px){
  .tv-lineup-list{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  /* Mobile: 3-up row of regular residents, Therapy partner card
     becomes a full-width orange banner row UNDERNEATH. */
  .tv-lineup-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tv-lineup-card{padding:14px 12px 12px;}
  .tv-lineup-card-av{width:44px;height:44px;font-size:1rem;}
  .tv-lineup-card-name{font-size:1rem;}
  .tv-lineup-card-night{font-size:0.5rem;letter-spacing:0.18em;}
  .tv-lineup-card-badge{font-size:0.42rem;padding:2px 6px;top:8px;right:8px;}
  .tv-lineup-card--partner{
    grid-column:1 / -1;order:99;
    flex-direction:row;align-items:center;gap:14px;
    padding:14px 18px;
  }
  .tv-lineup-card--partner .tv-lineup-card-av{width:48px;height:48px;font-size:1.1rem;}
  .tv-lineup-card--partner .tv-lineup-card-meta{flex:1;width:auto;}
  .tv-lineup-card--partner .tv-lineup-card-name{font-size:1.15rem;}
}

.tv-lineup-empty{
  padding:48px 22px;border:1px dashed rgba(14,14,16,0.18);
  border-radius:16px;text-align:center;
  font-family:var(--mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ts-ink-mute);
}

/* ─── FIND US — address / hours / contact strip above the footer ─── */
.tv-findus{padding:24px 0 64px;}
.tv-findus-inner{max-width:1340px;margin:0 auto;padding:0 32px;}
.tv-findus-eyebrow{font-family:var(--mono);font-size:0.7rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--ts-teal);margin-bottom:14px;}
.tv-findus-h{font-family:var(--slab);font-weight:800;font-size:clamp(2rem,5vw,2.6rem);letter-spacing:-0.02em;line-height:1.05;color:var(--ts-ink);margin-bottom:28px;}
.tv-findus-h em{font-family:var(--serif);font-style:italic;color:var(--ts-teal);}
.tv-findus-map{margin-bottom:20px;}
.tv-findus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.tv-findus-card{background:var(--ts-paper-hi);border:1px solid rgba(14,14,16,0.12);border-radius:16px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;}
.tv-findus-card-label{font-family:var(--mono);font-size:0.62rem;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:var(--ts-ink-mute);}
.tv-findus-card-body{font-family:var(--body);font-size:0.94rem;line-height:1.55;color:var(--ts-ink);}
.tv-findus-card-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:0.62rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--ts-ink);text-decoration:none;border:1px solid var(--ts-ink);padding:9px 14px;border-radius:999px;background:transparent;transition:background 0.15s,color 0.15s;}
.tv-findus-card-cta:hover{background:var(--ts-ink);color:var(--ts-paper-hi);}
@media(max-width:640px){
  .tv-findus{padding:16px 0 48px;}
  .tv-findus-inner{padding:0 18px;}
}

/* ─────────────────────────────────────────────────────────────────
   Breakpoints — tablet (640–1024) and mobile (<640) tweaks per spec.
   Match the reference screenshots' stacking.
   ───────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .tv-hero-grid{grid-template-columns:0.9fr 1fr;gap:42px;}
  .tv-flyer-wrap{max-width:300px;transform:rotate(-1deg);padding:12px 12px 36px;}
  .tv-hero-h{font-size:clamp(2.2rem,5vw,3.6rem);}
  .tv-next-inner{gap:32px;}
  .tv-next-card{margin-left:0;max-width:none;}
  .tv-dates-rail{grid-template-columns:repeat(3,1fr);}
  .tv-dates-arrows{display:none;}
}

@media (max-width:640px){
  /* Hero stacks: heading first, then a BIG crooked flyer, then CTAs row. */
  .tv-hero{padding:24px 0 56px;}
  .tv-hero-inner{padding:0 18px;}
  .tv-hero-eyebrow-strip{
    flex-direction:column;align-items:flex-start;
    border-radius:18px;padding:14px 16px;margin:14px 0 28px;
  }
  .tv-hero-eyebrow-line{font-size:0.6rem;letter-spacing:0.16em;}

  .tv-hero-grid{
    grid-template-columns:1fr;gap:32px;
    grid-template-areas:'heading' 'flyer' 'copy';
  }
  .tv-hero-copy{order:-1;padding-left:0;align-items:flex-start;}
  .tv-flyer-wrap{
    max-width:88%;margin:0 auto;
    transform:rotate(-3deg);
    padding:14px 14px 40px;
  }
  .tv-hero-h{font-size:clamp(2.4rem,9vw,3.4rem);}
  .tv-hero-actions{
    width:100%;flex-direction:row;gap:10px;
  }
  .tv-btn{justify-content:center;flex:1 1 0;min-width:0;padding:14px 12px;font-size:0.78rem;}
  .tv-meta{flex-wrap:wrap;gap:14px;}
  .tv-meta-item{min-width:0;flex:1 1 40%;}
  .tv-meta-rule{display:none;}

  .tv-next{padding:56px 22px;margin:0 12px;border-radius:22px;}
  .tv-next-card{transform:rotate(-1.6deg);}

  /* Mobile-only: drop the corner arrow icon on the side cards to
     claw back ~24px of vertical room. The match-height grid + image
     cropping behaviour now lives in the base styles above and applies
     at every viewport. */
  .tv-next-side-arrow{display:none;}

  .tv-dates{padding:56px 18px;}
  .tv-dates-rail{grid-template-columns:repeat(2,1fr);}

  .tv-lineup{padding:56px 18px;}
  .tv-lineup-card{
    grid-template-columns:auto 1fr;gap:14px;padding:14px 16px;
    border-radius:18px;
  }
  .tv-lineup-card-cta{
    grid-column:1 / -1;justify-self:flex-end;
    border-top:1px solid rgba(14,14,16,0.08);
    padding-top:10px;width:100%;
    justify-content:flex-end;
  }
  .tv-lineup-card-badge{
    position:static;align-self:center;justify-self:end;
    grid-column:2;
  }
  .tv-lineup-card-av{width:52px;height:52px;font-size:1.2rem;}
  .tv-lineup-card-name{font-size:1.2rem;}
}