/* Unholy Desires · members site  (v1.0) */

:root {
  --ink: #09070a;
  --ink-2: #120d10;
  --panel: #161015;
  --velvet: #6e0f1d;
  --crimson: #b8142f;
  --neon: #ff3358;
  --gold: #d2ac80;          /* champagne gold from the UD logo */
  --gold-light: #ecd2ac;
  --gold-dark: #8b6843;
  --cream: #f1e8dc;
  --muted: #a6978c;
  --line: rgba(210, 172, 128, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --wrap: 1180px;
  /* membership masks (from the club's mask system in What We Bury) */
  --m-gold: #e0b95c;
  --m-emerald: #2fb07f;
  --m-ruby: #e0234a;
  --m-black: #2a2326;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
em { font-style: italic; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.08; }
h2 { font-size: clamp(30px, 4.6vw, 46px); }
h2 em { color: var(--gold); }

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold);
}

/* ---------- top bar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 28px;
  padding: 18px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(9,7,10,.85), rgba(9,7,10,0));
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 44px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 13px; font-weight: 500; letter-spacing: .3em; }
.brand-by { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); }

.mainnav { display: flex; gap: 26px; margin-left: auto; }
.mainnav a { text-decoration: none; font-size: 15px; font-weight: 400; color: #e3d8cb; }
.mainnav a:hover { color: var(--gold-light); }

.member-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line);
  text-decoration: none; font-size: 14px;
  background: rgba(9,7,10,.4);
}
.mainnav a[aria-current="page"] { color: var(--gold-light); }
.nav-map { padding-left: 18px; border-left: 1px solid var(--line); color: var(--gold) !important; }

/* ---------- masks ---------- */
.mask-icon { width: 34px; height: 17px; fill: var(--m-ruby); filter: drop-shadow(0 0 6px currentColor); color: var(--m-ruby); }
.mask-icon[data-mask="gold"]    { fill: var(--m-gold);    color: rgba(224,185,92,.6); }
.mask-icon[data-mask="emerald"] { fill: var(--m-emerald); color: rgba(47,176,127,.6); }
.mask-icon[data-mask="ruby"]    { fill: var(--m-ruby);    color: rgba(224,35,74,.6); }
.mask-icon[data-mask="black"]   { fill: #0b0809; stroke: var(--gold); stroke-width: 1.2; color: transparent; }
.mask-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 4px; }
.mask-dots i, .preview-bar i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
.m-gold    { background: var(--m-gold);    color: rgba(224,185,92,.6); }
.m-emerald { background: var(--m-emerald); color: rgba(47,176,127,.6); }
.m-ruby    { background: var(--m-ruby);    color: rgba(224,35,74,.6); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.hero picture, .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-img { object-fit: cover; object-position: 62% 30%; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,7,10,.92) 0%, rgba(9,7,10,.7) 30%, rgba(9,7,10,.1) 60%, rgba(9,7,10,0) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(9,7,10,0) 35%);
}
.hero-copy {
  position: relative;
  width: min(560px, 100%);
  padding: 120px clamp(16px, 5vw, 64px) clamp(48px, 8vh, 90px);
}
.kicker {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px;
  font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.kicker-line { width: 36px; height: 1px; background: var(--gold); }
.hero h1 {
  font-size: clamp(56px, 9vw, 110px);
  line-height: .95;
  color: var(--gold-light);
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.hero h1 em { color: var(--cream); }
.hook {
  margin: 22px 0 8px;
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35;
}
.hook-sub { margin: 0 0 26px; color: var(--muted); font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.btn {
  display: inline-block; padding: 13px 24px; text-decoration: none;
  font-weight: 500; font-size: 15px; letter-spacing: .03em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-gold { color: #1d140a; background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.btn-gold:hover { background: var(--gold-light); }
.btn-ghost { border: 1px solid rgba(241,232,220,.45); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.tags { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* ---------- sections ---------- */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.see-all { flex: none; font-size: 14px; text-decoration: none; color: var(--gold); }
.see-all:hover { color: var(--gold-light); }

/* featured */
.featured h2 { margin-bottom: 28px; }
.feature-card {
  position: relative;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 0;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.feature-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.feature-card:hover .feature-thumb img { transform: scale(1.03); }
.feature-thumb-blank {
  display: block;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 10px, transparent 10px 18px),
    radial-gradient(ellipse at 50% 40%, #6e0f1d, #1a0609 75%);
}
.play-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  padding-left: 5px; font-size: 22px;
  color: #1d140a; background: rgba(236, 210, 172, .92);
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
.feature-body { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 30px clamp(20px, 3vw, 40px); }
.label { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.tier-tag { color: var(--gold); }
.feature-title { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.feature-title em { color: var(--gold); }
.feature-desc { color: #cfc2b5; font-size: 15px; }
.feature-cta { margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* locked state (toggled by site.js when the member's tier is too low) */
.lock {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(9,7,10,.78);
  backdrop-filter: blur(6px);
  text-align: center;
}
.is-locked .lock { display: flex; }
.lock-light {
  width: 46px; height: 6px; border-radius: 3px; margin-bottom: 8px;
  background: var(--m-ruby); box-shadow: 0 0 14px var(--m-ruby), 0 0 30px rgba(224,35,74,.5);
}
.lock-sub { max-width: 320px; }

/* ---------- rooms strip ---------- */
.room-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.room-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 30px 20px 20px;
  text-decoration: none;
  background: linear-gradient(180deg, #1a1216, #100b0e);
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.room-card:hover { border-color: var(--gold); transform: translateY(-3px); }
/* the light above every door: green = your mask gets in, red = it doesn't */
.room-light {
  position: absolute; top: 12px; left: 20px;
  width: 34px; height: 5px; border-radius: 3px;
  background: var(--m-emerald); box-shadow: 0 0 10px var(--m-emerald), 0 0 22px rgba(47,176,127,.45);
}
.room-card.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.room-card.is-locked { opacity: .72; }
.room-name { font-family: var(--serif); font-size: 25px; line-height: 1.1; }
.room-what { font-size: 14px; color: #cfc2b5; flex: 1; }
.room-masks { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.room-ruby { border-color: rgba(224,35,74,.35); }
.lock-text { font-family: var(--serif); font-size: 28px; color: var(--gold-light); }
.lock-sub { font-size: 13px; color: var(--muted); }

/* writing desk */
.desk-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.desk h2 { margin-bottom: 28px; }
.status { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 24px; margin: 0 0 28px; }
.status dt { font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.status dd { margin: 2px 0 0; font-family: var(--serif); font-size: 20px; color: var(--cream); }
.note { margin: 0; padding-left: 18px; border-left: 2px solid var(--gold-dark); }
.note p { margin: 0 0 4px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; }
.note cite { font-style: normal; font-size: 13px; color: var(--gold); }

.poll { padding: 26px; background: var(--panel); border: 1px solid var(--line); }
.poll-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--neon); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }
.poll-q { margin: 0 0 18px; font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.poll-options { display: grid; gap: 8px; }
.poll-options button {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between;
  padding: 11px 14px;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--cream); text-align: left;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer;
}
.poll-options button:hover { border-color: var(--gold); }
.poll-options button .bar { position: absolute; inset: 0 auto 0 0; background: rgba(210,172,128,.16); z-index: 0; transition: width .8s ease; }
.poll-options button span { position: relative; z-index: 1; }
.poll-options button.voted { border-color: var(--gold); }
.poll-foot { margin: 14px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* episodes */
.ep-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ep-thumb {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 16 / 9; margin-bottom: 14px; text-decoration: none;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(110, 15, 29, .55), transparent 65%),
    linear-gradient(135deg, #1b1218, #0c080b);
  border: 1px solid var(--line);
}
.ep-num { font-family: var(--serif); font-size: 64px; color: rgba(236, 210, 172, .35); }
.ep-new, .ep-soon {
  position: absolute; top: 10px; left: 10px; padding: 2px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.ep-new { color: #fff; background: var(--crimson); }
.ep-soon { color: var(--gold); border: 1px solid var(--gold-dark); }
.ep-meta { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.early { color: var(--gold); }
.ep-card h3 { font-size: 26px; margin-bottom: 6px; }
.ep-desc { margin: 0 0 10px; font-size: 14.5px; color: #cfc2b5; }
.ep-watch { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.is-soon { opacity: .7; }

/* cast */
.cast-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cast-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 16px 20px;
  text-decoration: none;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.cast-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.portrait {
  display: grid; place-items: center;
  aspect-ratio: 3 / 4; margin-bottom: 12px;
  font-family: var(--serif); font-size: 54px; color: rgba(236, 210, 172, .5);
  background: radial-gradient(ellipse at 50% 30%, #2a1c22, #0e0a0d);
  border: 1px solid rgba(210,172,128,.12);
}
.portrait { overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: saturate(.9) contrast(1.05); transition: transform .5s ease; }
.cast-card:hover .portrait img { transform: scale(1.04); }
.polaroid img { object-position: 50% 25%; }
.cast-lead .portrait { background: radial-gradient(ellipse at 50% 30%, #4a1823, #120709); color: var(--gold-light); }
.cast-role { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cast-name { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.cast-line { font-size: 13.5px; color: var(--muted); }

/* books */
.books-intro { margin: -12px 0 30px; max-width: 560px; color: #cfc2b5; }
.book-row { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: clamp(18px, 4vw, 48px); }
.book { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.book img {
  width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; margin-bottom: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,.6);
  transition: transform .3s ease, box-shadow .3s ease;
}
.book:hover img { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(0,0,0,.7), 0 0 30px rgba(210,172,128,.15); }
.book-num { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.book-title { font-family: var(--serif); font-size: 24px; }
.book-cta { font-size: 13px; color: var(--muted); }
.book:hover .book-cta { color: var(--gold-light); }
.books-note { margin: 22px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.next-series {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 44px; padding: 26px clamp(18px, 3vw, 34px);
  background: var(--panel); border: 1px solid var(--line);
}
.next-copy h3 { font-size: 32px; margin-bottom: 4px; }
.next-copy p:last-child { margin: 0; color: var(--muted); }
.next-books { display: flex; gap: 14px; }
.next-books img { width: 92px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 10px 24px rgba(0,0,0,.6); transition: transform .3s ease; }
.next-books a:hover img { transform: translateY(-4px); }

/* coming soon */
.soon h2 { margin-bottom: 28px; }
.soon-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.soon-card { padding: 22px; border: 1px dashed var(--line); }
.soon-date { display: inline-block; margin-bottom: 10px; font-family: var(--serif); font-size: 30px; color: var(--gold-light); }
.soon-tier { display: block; font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.soon-card h3 { font-size: 24px; margin-bottom: 6px; }
.soon-card p { margin: 0; font-size: 14.5px; color: #cfc2b5; }
.soon-unholy { border-color: rgba(255, 51, 88, .45); }
.soon-unholy .soon-tier { color: var(--neon); }

/* FAQ */
.faq { max-width: 820px; }
.faq h2 { margin-bottom: 26px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 30px 18px 0; position: relative;
  font-family: var(--serif); font-size: 22px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; color: var(--gold); font-family: var(--sans); font-size: 22px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: #cfc2b5; }
.faq details a { color: var(--gold); }

/* ---------- club map page ---------- */
.map-page { max-width: var(--wrap); margin: 0 auto; padding: 130px clamp(16px, 4vw, 40px) 0; }
.map-intro { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.map-intro h1 { font-size: clamp(34px, 5vw, 54px); margin-bottom: 14px; }
.map-intro h1 em { color: var(--gold); }
.map-lede { margin: 0 0 8px; color: #cfc2b5; }
.map-you { margin: 0; font-size: 14px; color: var(--muted); }
.map-you strong { color: var(--gold-light); font-weight: 500; }

.mask-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 70px; }
.mask-col {
  position: relative;
  padding: 30px 26px 24px;
  background: var(--panel); border: 1px solid var(--line);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.mask-col.is-current { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 34px rgba(210,172,128,.18); }
.mask-col.is-current::after {
  content: "Your mask"; position: absolute; top: 14px; right: 16px;
  font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
}
.mask-col-ruby { border-color: rgba(224,35,74,.45); }
.mask-col .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: #fff; background: var(--crimson); white-space: nowrap;
}
.mask-icon.big { width: 72px; height: 36px; margin-bottom: 14px; }
.mask-col h2 { font-size: 32px; }
.mask-tier { margin: 2px 0 10px; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.mask-sum { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--gold-light); }
.mask-col ul { list-style: none; margin: 0; padding: 0; }
.mask-col li { padding: 8px 0; border-top: 1px solid rgba(210,172,128,.12); font-size: 14px; color: #cfc2b5; }
.mask-col li b {
  display: block; font-weight: 500; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.mask-col li.inherit { font-style: italic; color: var(--muted); }

.plan-title { text-align: center; font-size: 34px; margin-bottom: 22px; }
.plan {
  display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "private  private  private  booths"
    "alcoves  stage    stage    bar"
    "alcoves  floor    floor    bar"
    "staff    backroom feed     next"
    ".        door     door     .";
  padding: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(210,172,128,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(210,172,128,.035) 0 1px, transparent 1px 28px),
    #0d090b;
  border: 1px solid var(--line);
}
.room {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 130px; padding: 30px 18px 16px;
  text-decoration: none;
  background: linear-gradient(180deg, #1b1317, #110c0f);
  border: 1px solid rgba(210,172,128,.18);
  transition: border-color .2s ease, background .2s ease;
}
.room:hover { border-color: var(--gold); }
.room .room-light { top: 12px; left: 18px; }
.room.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.room.is-locked { opacity: .62; }
.room .room-name { font-size: 24px; }
.room .room-what { font-size: 13.5px; }
.room-stage { background: radial-gradient(ellipse at 50% 40%, rgba(110,15,29,.45), transparent 70%), #150e12; }
.room-stage .room-name { font-size: 30px; }
.room-floor { background: radial-gradient(ellipse at 50% 50%, rgba(210,172,128,.08), transparent 70%), #130d10; }
.room-next { border-style: dashed; }
.room-door {
  align-items: center; text-align: center; min-height: 90px; padding-top: 18px;
  border-color: var(--gold-dark);
  background: linear-gradient(180deg, #2a0d14, #170709);
}
.plan-note { margin: 20px 0 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--muted); }

/* ---------- the stage ---------- */
.stage-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.stage-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 28px; }
.stage-head h1 { font-size: clamp(36px, 5vw, 56px); }
.stage-head h1 em { color: var(--gold); }
.stage-lede { margin: 10px 0 0; color: #cfc2b5; max-width: 560px; }
.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.season-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px 16px; min-width: 150px;
  font: inherit; color: var(--cream); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
}
.season-tab:hover { border-color: var(--gold-dark); }
.season-tab.active { border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.st-num { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.st-title { font-family: var(--serif); font-size: 20px; }
.st-soon { font-size: 11px; color: var(--muted); }

.now-playing { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.player { width: min(420px, calc(80vh * 9 / 16)); }
.player-frame, .player-empty {
  position: relative; aspect-ratio: 9 / 16; width: 100%; overflow: hidden;
  background: #050304; border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 60px rgba(110,15,29,.25);
}
.player-frame iframe, .player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.player-poster { width: 100%; height: 100%; object-fit: cover; }
.player-blank {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 120px; color: rgba(236,210,172,.15);
  background: radial-gradient(ellipse at 60% 30%, rgba(110,15,29,.5), transparent 65%), #0c080b;
}
.player-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  padding-left: 7px; font-size: 30px; color: #1d140a;
  background: rgba(236, 210, 172, .94);
  box-shadow: 0 0 0 10px rgba(236,210,172,.15), 0 10px 40px rgba(0,0,0,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.player-play:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 0 0 14px rgba(236,210,172,.2), 0 10px 40px rgba(0,0,0,.6); }
.player-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px; text-align: center;
  background: rgba(9,7,10,.72); backdrop-filter: blur(4px);
}
.po-kicker { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.po-title { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); }
.po-sub { max-width: 440px; font-size: 14.5px; color: #cfc2b5; }
.player-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; text-align: center; }
.pe-title { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); }
.pe-sub { margin: 0 0 12px; color: var(--muted); }

.ep-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.ep-title { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 12px; }
.ep-badge { display: inline-block; padding: 3px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.b-early { color: #1d140a; background: var(--gold); }
.b-public { color: var(--cream); border: 1px solid var(--line); }
.b-soon { color: var(--gold); border: 1px solid var(--gold-dark); }
.ep-synopsis { margin: 14px 0 20px; font-size: 15.5px; color: #d9cdc0; }

.read-it {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px; margin-bottom: 18px;
  text-decoration: none;
  background: linear-gradient(90deg, rgba(210,172,128,.1), rgba(210,172,128,.02));
  border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.read-it:hover { border-color: var(--gold); }
.read-it img { width: 44px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.read-it > span { display: flex; flex-direction: column; }
.ri-kicker { font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.ri-title { font-family: var(--serif); font-size: 18px; }
.ri-cta { font-size: 12.5px; color: var(--muted); }

.extras { margin-bottom: 18px; }
.extras-head { margin: 0 0 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.extra {
  position: relative; display: flex; flex-direction: column;
  padding: 12px 14px 12px 64px; margin-bottom: 6px;
  text-decoration: none; background: var(--panel); border: 1px solid rgba(210,172,128,.14);
}
.extra:hover { border-color: var(--gold-dark); }
.extra .room-light { top: 50%; left: 16px; transform: translateY(-50%); width: 30px; }
.extra.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.extra-room { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.extra-title { font-family: var(--serif); font-size: 18px; }
.extra-lock { display: none; font-size: 12px; color: var(--muted); }
.extra.is-locked { opacity: .75; }
.extra.is-locked .extra-lock { display: block; }

.reactions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.react {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font: inherit; font-size: 14px; color: var(--cream); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 20px;
}
.react:hover { border-color: var(--gold-dark); }
.react.on { border-color: var(--gold); background: rgba(210,172,128,.12); }
.react-n { font-size: 12px; color: var(--muted); }
.to-bar { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; }

.ep-list-wrap { margin-top: clamp(50px, 7vw, 80px); }
.ep-order { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.ep-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; font: inherit; color: var(--cream); text-align: left; cursor: pointer;
  background: none; border: 0;
}
.ep-tile-thumb {
  position: relative; display: block; aspect-ratio: 9 / 16; margin-bottom: 8px; overflow: hidden;
  background: radial-gradient(ellipse at 70% 30%, rgba(110,15,29,.55), transparent 65%), linear-gradient(135deg, #1b1218, #0c080b);
  border: 1px solid var(--line);
  transition: border-color .2s ease;
}
.ep-tile-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.ep-tile:hover .ep-tile-thumb { border-color: var(--gold); }
.ep-tile.playing .ep-tile-thumb { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ep-tile-num {
  position: absolute; left: 12px; bottom: 6px;
  font-family: var(--serif); font-size: 44px; line-height: 1; color: rgba(236,210,172,.75);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.ep-tile-now {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #1d140a; background: var(--gold);
}
.ep-tile-meta { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tag-early { color: var(--gold); }
.ep-tile-title { font-family: var(--serif); font-size: 22px; }
.st-soon .ep-tile-thumb { opacity: .55; }
.ep-none { color: var(--muted); }

.season-book {
  display: flex; gap: clamp(20px, 4vw, 44px); align-items: center;
  margin-top: clamp(56px, 8vw, 90px); padding: clamp(22px, 4vw, 40px);
  background: linear-gradient(90deg, rgba(110,15,29,.22), rgba(22,16,21,.9));
  border: 1px solid var(--line);
}
.season-book img { width: 140px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; flex: none; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
.season-book h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 10px; }
.season-book p:not(.eyebrow) { margin: 0 0 18px; color: #cfc2b5; max-width: 560px; }

/* ---------- the back room ---------- */
.br-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.br-head { max-width: 760px; margin-bottom: 36px; }
.br-head h1 { font-size: clamp(36px, 5vw, 56px); margin-bottom: 12px; }
.br-head h1 em { color: var(--gold); }
.br-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.br-meta { margin: 0; font-size: 13px; color: var(--muted); }

/* the walnut table */
.table {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  margin-bottom: 26px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255, 196, 120, .10), transparent 70%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2b1a12, #1a0f0a);
  border: 1px solid #3a261a;
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), 0 20px 40px rgba(0,0,0,.5);
}
.table-label {
  margin: 0 0 22px; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(236,210,172,.7);
}
.folders { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 18px; }
.folders-minor { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.folder {
  position: relative; display: block; padding: 0; margin-top: 18px;
  font: inherit; text-align: left; color: #2a1d12; cursor: pointer;
  background: none; border: 0;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s ease;
}
.folder:hover, .folder:focus-visible { transform: rotate(0deg) translateY(-6px); outline: none; }
.folder:focus-visible .folder-body { box-shadow: 0 0 0 2px var(--gold-light), 0 16px 30px rgba(0,0,0,.6); }
.folder-tab {
  position: absolute; top: -18px; left: 0;
  padding: 3px 12px 2px;
  font-family: "Special Elite", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  background: #c9ad84; border-radius: 4px 4px 0 0;
}
.folder-body {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  min-height: 210px; padding: 16px 14px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 40%),
    #c9ad84;
  border-radius: 0 4px 4px 4px;
  box-shadow: 0 12px 24px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.08);
}
.folder-minor .folder-body { min-height: 120px; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%), #a99070; }
.folder-minor .folder-tab { background: #a99070; }
.folder-sage .folder-body, .folder-sage .folder-tab { background-color: #d8b5a2; }

.polaroid {
  position: relative; display: block; width: 74%; aspect-ratio: 4 / 4.6; margin: 0 0 10px;
  padding: 6px 6px 18px; background: #f4efe6;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transform: rotate(-3deg);
}
.polaroid::before { /* paperclip */
  content: ""; position: absolute; top: -9px; right: 18px;
  width: 10px; height: 26px; border: 2px solid #8d8d8d; border-radius: 6px;
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; }
.polaroid-initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--serif); font-size: 52px; color: rgba(236,210,172,.55);
  background: radial-gradient(ellipse at 50% 35%, #3a2229, #120a0d);
}
.folder-stamp {
  position: absolute; right: 8px; top: 46%;
  padding: 1px 6px;
  font-family: "Special Elite", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8e1023; border: 2px solid #8e1023; border-radius: 3px;
  transform: rotate(8deg); opacity: .8;
}
.folder-minor .folder-stamp { top: 12px; }
.folder-name { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; color: #1e140c; }
.folder-line { font-size: 12.5px; line-height: 1.35; color: #4a3826; }

/* open dossier */
.dossier {
  width: min(760px, calc(100% - 24px)); max-height: calc(100% - 40px);
  padding: 0; border: 0; color: #22180f;
  background: #e9dfcd;
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
}
.dossier::backdrop { background: rgba(5,3,4,.82); backdrop-filter: blur(3px); }
.dossier-inner { padding: clamp(22px, 4vw, 40px); }
.dossier-close {
  position: absolute; top: 10px; right: 12px;
  width: 38px; height: 38px; font-size: 26px; line-height: 1; cursor: pointer;
  color: #22180f; background: transparent; border: 0;
}
.dossier-head { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; }
.polaroid.big { width: 130px; flex: none; margin: 0; }
.dossier-tab { margin: 0 0 4px; font-family: "Special Elite", monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b5640; }
.dossier h2 { font-size: clamp(34px, 5vw, 48px); color: #1a110a; }
.dossier-alias { margin: 4px 0 8px; font-family: var(--serif); font-style: italic; font-size: 19px; color: #5a4632; }
.folder-stamp.in-dossier { position: static; display: inline-block; transform: rotate(-4deg); }
.dossier-summary { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #33261a; }
.dossier-h {
  margin: 24px 0 10px; padding-bottom: 6px;
  font-family: "Special Elite", monospace; font-size: 13px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: #6b5640; border-bottom: 1px dashed rgba(34,24,15,.3);
}
.particulars { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 22px; margin: 0; }
.particulars dt { font-family: "Special Elite", monospace; font-size: 11px; text-transform: uppercase; color: #7d6750; }
.particulars dd { margin: 0; font-size: 15px; color: #22180f; }
.known { margin: 0; padding-left: 20px; }
.known li { margin-bottom: 4px; font-size: 15px; color: #33261a; }
.scars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.redacted {
  position: relative; display: block; width: 100%; padding: 10px 12px;
  font: inherit; font-size: 15px; text-align: left; line-height: 1.5; color: #22180f; cursor: pointer;
  background: rgba(255,255,255,.35); border: 0;
}
.redacted-cover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-start; padding: 0 12px;
  background: #15100c;
  transition: opacity .35s ease;
}
.redacted-cover span { font-family: "Special Elite", monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #8c7b66; }
.redacted:hover .redacted-cover span { color: var(--gold-light); }
.redacted.revealed .redacted-cover { opacity: 0; pointer-events: none; }
.confession {
  margin: 0 0 10px; padding: 12px 16px;
  background: rgba(142,16,35,.06); border-left: 3px solid #8e1023;
}
.confession p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.35; color: #1e140c; }
.confession cite { display: block; margin-top: 4px; font-style: normal; font-family: "Special Elite", monospace; font-size: 11px; color: #7d6750; }
.dossier .extras { margin: 0; }
.dossier .extra { background: #f3ecdf; border-color: rgba(34,24,15,.15); }
.dossier .extra-title { color: #1e140c; }
.dossier .extra-room { color: #8a6a3c; }
.dossier .extra-lock { color: #6b5640; }

.br-book { margin-top: 30px; }

/* ---------- the alcoves ---------- */
.al-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.al-head { max-width: 780px; margin-bottom: 30px; }
.al-head h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; }
.al-head h1 em { color: var(--gold); }
.al-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.al-meta { margin: 0; font-size: 13px; color: var(--muted); }
.al-meta a { color: var(--gold); }

.al-drawn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 26px clamp(20px, 3vw, 34px); margin-bottom: 30px;
  background: linear-gradient(90deg, rgba(224,35,74,.12), rgba(22,16,21,.9));
  border: 1px solid rgba(224,35,74,.4);
}
.al-drawn[hidden] { display: none; }
.al-drawn h2 { font-size: clamp(26px, 3.4vw, 36px); }
.al-drawn p { margin: 0 0 12px; color: #cfc2b5; max-width: 620px; }

.al-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.chip {
  padding: 7px 14px; font: inherit; font-size: 13.5px; color: var(--cream); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 20px;
}
.chip:hover { border-color: var(--gold-dark); }
.chip.active { border-color: var(--gold); color: var(--gold-light); background: rgba(210,172,128,.1); }

.alcove-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.alcove {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0; font: inherit; color: var(--cream); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.alcove.is-soon { cursor: default; }
.alcove-arch {
  position: relative; display: block; aspect-ratio: 3 / 4; margin-bottom: 12px; overflow: hidden;
  border-radius: 200px 200px 4px 4px / 160px 160px 4px 4px;
  background: radial-gradient(ellipse at 50% 30%, #3a1520, #0c0608);
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 0 40px rgba(0,0,0,.8), 0 18px 34px rgba(0,0,0,.5);
}
.alcove-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.alcove-initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 80px; color: rgba(236,210,172,.3);
}
/* velvet curtains: parted when open, drawn when locked or not open yet */
.curtain {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 55%, rgba(255,255,255,.05) 70%, rgba(0,0,0,.4)),
    repeating-linear-gradient(90deg, #5e0b1a 0 10px, #7d1325 10px 16px, #4a0814 16px 24px);
  box-shadow: inset 0 -30px 40px rgba(0,0,0,.5);
  transition: transform .9s cubic-bezier(.5, 0, .2, 1);
}
.curtain-l { left: 0; transform: translateX(-72%) skewX(-3deg); transform-origin: top left; }
.curtain-r { right: 0; transform: translateX(72%) skewX(3deg); transform-origin: top right; }
.alcove:hover .curtain-l, .alcove:focus-visible .curtain-l { transform: translateX(-86%) skewX(-5deg); }
.alcove:hover .curtain-r, .alcove:focus-visible .curtain-r { transform: translateX(86%) skewX(5deg); }
.alcove.is-locked .curtain-l, .alcove.is-soon .curtain-l { transform: translateX(0); }
.alcove.is-locked .curtain-r, .alcove.is-soon .curtain-r { transform: translateX(0); }
.alcove.is-locked:hover .curtain-l { transform: translateX(-6%); }
.alcove.is-locked:hover .curtain-r { transform: translateX(6%); }
.alcove-arch .room-light { top: auto; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; }
.alcove.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.alcove.is-soon .room-light { background: #5a4a3c; box-shadow: none; }
.alcove-tag {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  padding: 6px 14px; white-space: nowrap;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: #1d140a; background: rgba(236,210,172,.92);
  opacity: 0; transition: opacity .3s ease;
}
.alcove:hover .alcove-tag, .alcove.is-soon .alcove-tag { opacity: 1; }
.alcove.is-soon .alcove-tag { color: var(--gold-light); background: rgba(9,7,10,.75); border: 1px solid var(--gold-dark); }
.alcove.is-locked .alcove-tag { display: none; }
.alcove-kind { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.alcove-title { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.alcove-blurb { font-size: 14px; color: #cfc2b5; }
.alcove-ch { font-size: 12px; color: var(--muted); }
.alcove.is-locked .alcove-blurb { filter: blur(3px); user-select: none; }

.al-vote {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: clamp(50px, 7vw, 80px); padding: clamp(22px, 3vw, 34px);
  background: var(--panel); border: 1px dashed var(--line);
}
.al-vote h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 6px; }
.al-vote p:not(.eyebrow) { margin: 0; color: #cfc2b5; }

.al-viewer {
  width: min(900px, calc(100% - 24px)); max-height: calc(100% - 40px);
  padding: 0; color: var(--cream);
  background: linear-gradient(180deg, #1c1015, #0e0809);
  border: 1px solid var(--gold-dark);
  box-shadow: 0 30px 80px rgba(0,0,0,.85), 0 0 60px rgba(110,15,29,.35);
}
.al-viewer::backdrop { background: rgba(5,3,4,.85); backdrop-filter: blur(3px); }
.alv-inner { padding: clamp(20px, 3.4vw, 36px); }
.alv-inner > .eyebrow { padding-right: 44px; }
.al-viewer h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.alv-blurb { margin: 0 0 18px; color: #d9cdc0; }
.alv-close {
  position: absolute; top: 10px; right: 12px; width: 38px; height: 38px;
  font-size: 26px; line-height: 1; color: var(--cream); background: transparent; border: 0; cursor: pointer;
}
.alv-reader {
  max-height: 60vh; overflow-y: auto; padding: clamp(18px, 3vw, 30px);
  background: #f1e8dc; color: #22180f;
  font-family: var(--serif); font-size: 20px; line-height: 1.6;
}
.alv-reader p { margin: 0 0 1em; }
.alv-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 14px; align-items: start; }
.alv-links .read-it { margin: 0; }
.alv-links .extras { margin: 0; }

/* ---------- the staff corridor ---------- */
.sc-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.sc-head { max-width: 780px; margin-bottom: 30px; }
.sc-head h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; }
.sc-head h1 em { color: var(--gold); }
.sc-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.sc-meta { margin: 0; font-size: 13px; color: var(--muted); }
.sc-wing { margin-top: clamp(40px, 6vw, 64px); }

/* the walnut corridor wall, doors along it */
.corridor {
  display: flex; align-items: flex-start; gap: 0;
  padding: 34px clamp(16px, 3vw, 30px) 26px;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dark) transparent;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 20%, transparent 80%, rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px, rgba(255,255,255,.015) 7px 9px),
    linear-gradient(180deg, #2c1a11, #1d110b);
  border: 1px solid #3a261a;
  box-shadow: inset 0 0 50px rgba(0,0,0,.65);
}
.sconce {
  flex: none; position: relative; width: 44px; height: 120px; margin-top: 50px;
}
.sconce::before { /* brass bracket */
  content: ""; position: absolute; left: 50%; top: 40px; width: 6px; height: 30px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark)); border-radius: 3px;
}
.sconce::after { /* candle-ish bulb, flickers */
  content: ""; position: absolute; left: 50%; top: 18px; width: 12px; height: 22px; transform: translateX(-50%);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 60%, #fff3c9, #ffc46b 45%, rgba(255,150,60,0) 75%);
  box-shadow: 0 0 22px 8px rgba(255, 180, 90, .35);
  animation: sconce 5s infinite;
}
.sconce:nth-of-type(2n)::after { animation-delay: -2.1s; }
@keyframes sconce {
  0%, 100% { opacity: 1; } 46% { opacity: .82; } 48% { opacity: 1; } 71% { opacity: .9; } 72% { opacity: .7; } 74% { opacity: 1; }
}
.door {
  flex: none; position: relative;
  display: flex; flex-direction: column; gap: 4px;
  width: 196px; padding: 18px 0 0;
  font: inherit; color: var(--cream); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.door.is-soon { cursor: default; }
.door-light.room-light { top: 0; left: 50%; transform: translateX(-50%); }
.door.is-locked .door-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.door.is-soon .door-light { background: #5a4a3c; box-shadow: none; }
.door-leaf {
  position: relative; display: block; aspect-ratio: 1 / 1.9; margin-bottom: 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.04) 45%, rgba(0,0,0,.3)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 11px),
    #4a2c1b;
  border: 6px solid #24150d;
  box-shadow: 0 16px 28px rgba(0,0,0,.6), inset 0 0 0 1px rgba(210,172,128,.15);
  transition: transform .5s ease, box-shadow .3s ease;
  transform-origin: left center;
}
.door:hover .door-leaf, .door:focus-visible .door-leaf { transform: perspective(700px) rotateY(-14deg); box-shadow: 18px 16px 28px rgba(0,0,0,.6), inset 0 0 0 1px var(--gold-dark); }
.door.is-locked:hover .door-leaf, .door.is-soon:hover .door-leaf { transform: none; }
.door.is-highlight .door-leaf { box-shadow: 0 0 0 2px var(--gold), 0 0 30px rgba(210,172,128,.35); }
.door-panel {
  position: absolute; left: 14%; right: 14%; height: 30%;
  border: 2px solid rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 1px 1px 0 rgba(255,255,255,.05);
}
.door-panel:nth-of-type(2) { top: 22%; }
.door-panel:nth-of-type(3) { top: 58%; }
.door-number {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%) rotate(var(--r, 0deg)); z-index: 1;
  padding: 2px 10px;
  font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: .06em; color: #2a1a06;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.door-knob {
  position: absolute; right: 12%; top: 52%; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c9, var(--gold) 50%, var(--gold-dark));
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.door-plate {
  position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold-light); background: rgba(0,0,0,.45); border: 1px solid var(--gold-dark);
}
.door-when { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.door.is-soon .door-when { color: var(--muted); }
.door-title { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.door-blurb { font-size: 13.5px; color: #cfc2b5; }
.door-orig { font-size: 11.5px; color: var(--muted); }
.door.is-locked .door-blurb { filter: blur(3px); user-select: none; }

.cut-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cut-card {
  position: relative; display: flex; gap: 18px; align-items: flex-start;
  padding: 26px 20px 20px; font: inherit; color: var(--cream); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
}
.cut-card:hover { border-color: var(--gold); }
.cut-card.is-soon { cursor: default; opacity: .7; }
.cut-card .room-light { top: 12px; left: 20px; }
.cut-card.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.cut-ep {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin-top: 6px;
  font-family: var(--serif); font-size: 13px; text-align: center; line-height: 1.1; color: var(--gold-light);
  border: 1px solid var(--gold-dark); border-radius: 50%;
}
.cut-body { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.cut-title { font-family: var(--serif); font-size: 24px; }
.cut-blurb { font-size: 14px; color: #cfc2b5; }
.cut-meta { font-size: 12px; color: var(--muted); }
.reader-by { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: #8a6a3c; }
.muted { color: var(--muted); }

/* ---------- the private rooms ---------- */
.pr-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.pr-head { max-width: 780px; margin-bottom: 30px; }
.pr-head h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; }
.pr-head h1 em { color: var(--m-emerald); }
.pr-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.pr-meta { margin: 0; font-size: 13px; color: var(--muted); }
.pr-gate { margin-bottom: 30px; }
.pr-teaser .table-label { margin-bottom: 14px; }

.pr-check {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: center;
  padding: clamp(24px, 4vw, 44px);
  background: linear-gradient(135deg, rgba(110,15,29,.3), rgba(16,10,13,.95) 60%);
  border: 1px solid rgba(224,35,74,.35);
}
.pr-check[hidden] { display: none; }
.pr-check h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 12px; }
.pr-check h2 em { color: var(--gold); }
.pr-check-copy > p:not(.eyebrow) { margin: 0 0 16px; color: #d9cdc0; }
.pr-promises { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.pr-promises li { padding-left: 22px; position: relative; font-size: 14.5px; color: #cfc2b5; }
.pr-promises li::before { content: "✓"; position: absolute; left: 0; color: var(--m-emerald); }
.pr-promises b { color: var(--cream); font-weight: 500; }
.pr-small { margin: 12px 0 0; font-size: 13.5px; color: #f0a3b2; }
.pr-small a { color: var(--gold); }
.pr-scanner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scan-frame {
  position: relative; width: min(220px, 60vw); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 50% / 42%;
  border: 2px solid var(--gold-dark);
  background: radial-gradient(ellipse at 50% 40%, #241519, #0a0607);
  box-shadow: 0 0 0 8px rgba(210,172,128,.06), 0 0 40px rgba(224,35,74,.2);
}
.scan-face { /* simple silhouette */
  position: absolute; left: 50%; top: 22%; width: 46%; aspect-ratio: 3 / 3.8; transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%; border: 2px dashed rgba(236,210,172,.35);
}
.scan-line {
  position: absolute; left: 6%; right: 6%; top: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--m-emerald), transparent);
  box-shadow: 0 0 12px var(--m-emerald); opacity: 0;
}
.pr-scanner.scanning .scan-line { opacity: 1; animation: scan 1.2s ease-in-out infinite alternate; }
@keyframes scan { from { top: 10%; } to { top: 86%; } }
.pr-scanner.passed .scan-frame { border-color: var(--m-emerald); box-shadow: 0 0 0 8px rgba(47,176,127,.12), 0 0 40px rgba(47,176,127,.35); }
.pr-scanner.passed .scan-line { display: none; }
.scan-label { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.pr-scanner.passed .scan-label { color: var(--m-emerald); }

.pr-rules {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px;
}
.pr-rules a { color: var(--gold); }
.pr-rules p { margin: 0; padding: 14px 16px; font-size: 14px; color: #cfc2b5; background: var(--panel); border-left: 2px solid var(--m-ruby); }
.pr-rules b { color: var(--cream); font-weight: 500; }

.back-wall {
  background:
    linear-gradient(180deg, rgba(0,0,0,.4), transparent 20%, transparent 80%, rgba(0,0,0,.55)),
    radial-gradient(ellipse at 50% 0%, rgba(224,35,74,.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.2) 0 2px, transparent 2px 7px, rgba(255,255,255,.015) 7px 9px),
    linear-gradient(180deg, #2a140f, #170a08);
}
.pr-door .door-leaf { background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.04) 45%, rgba(0,0,0,.3)), repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 11px), #3a1a14; }

.pr-viewer { border-color: rgba(224,35,74,.5); }
.pr-notes { padding: 18px 20px; margin-bottom: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.pr-notes-head { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.pr-notes ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pr-notes li { padding: 4px 11px; font-size: 13px; border: 1px solid var(--line); border-radius: 20px; color: #e3d8cb; }
.pr-notes-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-notes-actions .btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 500; cursor: pointer; border: 0; }
.pr-notes-actions .btn-ghost { border: 1px solid rgba(241,232,220,.45); background: transparent; color: var(--cream); }
.dot-green, .dot-yellow { width: 10px; height: 10px; border-radius: 50%; }
.dot-green { background: var(--m-emerald); box-shadow: 0 0 8px var(--m-emerald); }
.dot-yellow { background: #f2c94c; box-shadow: 0 0 8px #f2c94c; }
.pr-blank { color: rgba(224,35,74,.25); }

/* ---------- the bar ---------- */
.bar-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.bar-head { max-width: 780px; margin-bottom: 26px; }
.bar-head h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; }
.bar-head h1 em { color: var(--gold); }
.bar-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.bar-meta { margin: 0; font-size: 13px; color: var(--muted); }
/* the mahogany bar top with a brass rail */
.bar-counter {
  height: 26px; margin: 0 0 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(90deg, #3b1209, #6a2412 30%, #4a170b 60%, #6a2412 85%, #3b1209);
  border-bottom: 4px solid var(--gold-dark);
  box-shadow: 0 6px 0 -2px rgba(210,172,128,.35), 0 14px 26px rgba(0,0,0,.5);
  border-radius: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bar-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.bar-menu { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 4px; }
.thread-group { margin: 18px 0 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.thread-group:first-of-type { margin-top: 4px; }
.thread {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 12px 14px 12px 54px; margin-bottom: 6px;
  font: inherit; color: var(--cream); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid rgba(210,172,128,.14);
}
.thread:hover { border-color: var(--gold-dark); }
.thread.active { border-color: var(--gold); background: rgba(210,172,128,.08); }
.thread .room-light { top: 50%; left: 14px; transform: translateY(-50%); width: 26px; }
.thread.is-locked { opacity: .6; cursor: default; }
.thread.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.thread-kind { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.thread-title { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.thread-n { font-size: 11.5px; color: var(--muted); }

.bar-thread { padding: clamp(18px, 3vw, 30px); background: var(--panel); border: 1px solid var(--line); min-height: 400px; }
.bt-head h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 6px; }
.bt-meta { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.bt-meta a { color: var(--gold); }
.composer textarea, .stool-form input, .stool-form select, .stool-form textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--cream);
  background: rgba(0,0,0,.35); border: 1px solid var(--line);
}
.composer textarea:focus, .stool-form input:focus, .stool-form select:focus, .stool-form textarea:focus { outline: none; border-color: var(--gold); }
.composer-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 22px; }
.composer-row .btn { margin-left: auto; border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.spoiler-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: #cfc2b5; cursor: pointer; }
.composer-as { font-size: 12.5px; color: var(--muted); }
.composer-as b { color: var(--cream); font-weight: 500; }
.comments { list-style: none; margin: 0; padding: 0; }
.comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(210,172,128,.12); }
.c-mask { flex: none; width: 34px; height: 34px; border-radius: 50%; margin-top: 2px; opacity: .9; }
.c-body { flex: 1; min-width: 0; }
.c-head { margin: 0 0 4px; font-size: 14px; }
.c-head b { font-weight: 500; }
.c-meta { font-size: 12px; color: var(--muted); }
.c-sample { margin-left: 6px; padding: 1px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }
.c-text { margin: 0; font-size: 15px; color: #e3d8cb; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-spoiler { position: relative; display: block; width: 100%; padding: 6px 0; font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.c-spoiler .c-text { display: block; filter: blur(6px); transition: filter .3s ease; }
.c-cover { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 3px 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light); background: rgba(9,7,10,.85); border: 1px solid var(--gold-dark); }
.c-spoiler.revealed .c-text { filter: none; }
.c-spoiler.revealed .c-cover { display: none; }
.c-heart { margin-top: 6px; padding: 2px 10px; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.c-heart.on { color: #ff6f8a; border-color: rgba(224,35,74,.6); }
.bt-empty { color: var(--muted); font-style: italic; }

.stool {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 50px); align-items: start;
  margin-top: clamp(56px, 8vw, 90px); padding: clamp(22px, 4vw, 40px);
  background: linear-gradient(135deg, rgba(110,15,29,.18), rgba(16,10,13,.95) 60%); border: 1px solid var(--line);
}
.stool h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 8px; }
.stool-lede { margin: 0 0 20px; color: #cfc2b5; }
.stool-form form { display: grid; gap: 14px; }
.stool-form label, .stool-form legend { display: grid; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.stool-form fieldset { border: 0; padding: 0; margin: 0; }
.stool-form legend { margin-bottom: 8px; }
.trope-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stool-form .toggle { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--cream); }
.stool-form .toggle input { width: auto; margin-top: 3px; }
.stool-form .toggle span { display: block; font-size: 12.5px; color: var(--muted); }
.stool-form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.stool-saved { font-size: 13px; color: var(--m-emerald); }
.stool-preview { position: sticky; top: 20px; }

.member-card {
  position: relative; padding: 22px 20px 20px 74px; min-height: 120px;
  background: #120c0f; border: 1px solid var(--line);
}
.member-card.big { padding: 26px 24px 24px 84px; }
.mc-mask { position: absolute; left: 18px; top: 22px; width: 42px; height: 42px; border-radius: 50%; }
.mc-name { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.mc-sub { margin: 2px 0 8px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mc-pet { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold-light); }
.mc-tropes { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.mc-about { margin: 0; font-size: 14px; color: #d9cdc0; }

.regulars { margin-top: clamp(50px, 7vw, 80px); }
.regulars .al-filters { margin: 0; }
.regulars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

/* ---------- the booths ---------- */
.bo-page { max-width: var(--wrap); margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 0; }
.bo-head { max-width: 780px; margin-bottom: 28px; }
.bo-head h1 { font-size: clamp(34px, 4.8vw, 54px); margin-bottom: 12px; }
.bo-head h1 em { color: var(--m-ruby); }
.bo-lede { margin: 0 0 10px; color: #d9cdc0; font-size: 16px; }
.bo-meta { margin: 0; font-size: 13px; color: var(--muted); }

.booths { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.booths[hidden] { display: none; }
.booth-list { display: grid; gap: 10px; align-content: start; }
.booth {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px; font: inherit; color: var(--cream); text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid rgba(210,172,128,.14);
  transition: border-color .2s ease, transform .2s ease;
}
.booth:nth-child(odd) { transform: rotate(-.6deg); }
.booth:nth-child(even) { transform: rotate(.6deg); }
.booth:hover { border-color: var(--gold-dark); }
.booth.active { border-color: var(--m-ruby); box-shadow: 0 0 24px rgba(224,35,74,.18); transform: none; }
/* a curved velvet banquette seen from above */
.booth-seat {
  flex: none; position: relative; display: grid; place-items: center; width: 58px; height: 58px;
  border-radius: 50% 50% 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px 11px),
    radial-gradient(ellipse at 50% 35%, #a3172f, #4d0812 75%);
  box-shadow: inset 0 -8px 12px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.5);
}
.booth-n { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--gold-light); }
.booth-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.booth-name { font-family: var(--serif); font-size: 20px; line-height: 1.1; }
.booth-blurb { font-size: 12.5px; color: #bfb1a5; }
.booth-count { font-size: 11px; color: var(--muted); }

.booth-chat {
  display: flex; flex-direction: column; min-height: 560px; max-height: 76vh;
  background: linear-gradient(180deg, rgba(110,15,29,.14), rgba(16,10,13,.96) 30%);
  border: 1px solid rgba(224,35,74,.35);
}
.bc-head { padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.bc-head h2 { font-size: 30px; }
.bc-blurb { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.bc-log { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 14px 22px; }
.msg { display: flex; gap: 10px; padding: 8px 0; }
.msg-mask { flex: none; width: 30px; height: 30px; border-radius: 50%; margin-top: 2px; }
.m-house { background: #0b0809; border: 2px solid var(--gold); }
.msg-body { min-width: 0; }
.msg-head { margin: 0 0 2px; font-size: 13.5px; }
.msg-head b { font-weight: 500; }
.msg-time { font-size: 11.5px; color: var(--muted); }
.msg-badge { padding: 1px 7px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #1d140a; background: var(--gold); }
.msg-text { margin: 0; padding: 8px 12px; font-size: 15px; color: #e8ddd0; background: rgba(255,255,255,.04); border-radius: 2px 12px 12px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-eve .msg-text { background: rgba(210,172,128,.12); border: 1px solid rgba(210,172,128,.3); }
.msg-mine .msg-text { background: rgba(224,35,74,.12); }
.bc-empty { padding: 30px 0; color: var(--muted); font-style: italic; }
.bc-compose { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.bc-compose textarea {
  flex: 1; resize: none; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--cream);
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 20px;
}
.bc-compose textarea:focus { outline: none; border-color: var(--m-ruby); }
.bc-compose .btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; border-radius: 20px; }
.bc-compose .btn:disabled, .bc-compose textarea:disabled { opacity: .5; cursor: not-allowed; }
.bc-rules { margin: 0; padding: 0 18px 12px; font-size: 11.5px; color: var(--muted); }

/* footer */
.footer {
  margin-top: clamp(64px, 9vw, 110px);
  padding: 50px 16px 90px;
  border-top: 1px solid var(--line);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(110, 15, 29, .12));
}
.footer-motto {
  margin: 0 auto 30px; max-width: 640px;
  font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.25; color: var(--gold-light);
}
.footer-badge { width: 110px; height: auto; margin: 0 auto 26px; }
.footer-cols { display: flex; justify-content: center; gap: clamp(40px, 8vw, 100px); margin-bottom: 30px; text-align: left; }
.footer-cols div { display: flex; flex-direction: column; gap: 8px; }
.footer-head { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.footer-cols a { text-decoration: none; font-size: 14px; color: #cfc2b5; }
.footer-cols a:hover { color: var(--gold-light); }
.footer-fine { margin: 6px 0 0; font-size: 12px; color: #6f625a; }

/* preview tier switcher */
.preview-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 14px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  background: rgba(18, 13, 16, .95); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
.preview-bar[hidden] { display: none; }
.preview-bar button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font: inherit; font-size: 12px; color: var(--cream);
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.preview-bar button.active { border-color: var(--gold); color: var(--gold-light); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  /* nav drops to a scrollable strip under the top bar */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .member-chip { margin-left: auto; }
  .mainnav {
    order: 3; width: 100%; margin: 0;
    gap: 22px; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 4px;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { flex: none; font-size: 14px; }
  .hero-copy { padding-top: 150px; }
}
@media (max-width: 1000px) {
  .now-playing { grid-template-columns: 1fr; }
  .bar-grid, .stool, .booths { grid-template-columns: 1fr; }
  .booth-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .booth-chat { min-height: 480px; max-height: 80vh; }
  .bar-menu, .stool-preview { position: static; max-height: none; }
  .thread-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 8px; }
  .thread-group { grid-column: 1 / -1; }
  .folders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .folders-minor { grid-template-columns: 1fr; }
  .alcove-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alv-links { grid-template-columns: 1fr; }
  .room-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mask-guide { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .mask-col-ruby { margin-top: 8px; }
  .plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "door     door"
      "floor    floor"
      "stage    stage"
      "bar      backroom"
      "feed     alcoves"
      "staff    alcoves"
      "private  private"
      "booths   next";
  }
  .cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { padding: 14px 16px; }
  .brand-mark { width: 36px; }
  .brand-name { font-size: 11px; letter-spacing: .24em; }
  .member-label { display: none; }
  .hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .hero picture, .hero-img { position: relative; height: auto; }
  .hero picture { display: block; aspect-ratio: 4 / 3.6; }
  .hero-img { height: 100%; object-position: 68% 30%; }
  .hero-shade { background: linear-gradient(0deg, var(--ink) 0%, rgba(9,7,10,.2) 45%, rgba(9,7,10,.55) 100%); height: calc(100vw * 3.6 / 4 + 2px); }
  .hero-copy { padding: 0 16px 10px; margin-top: -60px; }
  .feature-card { grid-template-columns: 1fr; }
  .ep-row, .soon-row, .room-row { grid-template-columns: 1fr; }
  .map-page, .stage-page, .br-page, .al-page, .sc-page, .pr-page, .bar-page, .bo-page { padding-top: 32px; }
  .bc-head, .bc-log { padding-left: 14px; padding-right: 14px; }
  .composer-row .btn { margin-left: 0; width: 100%; }
  .pr-check { grid-template-columns: 1fr; }
  .pr-scanner { order: -1; }
  .scan-frame { width: 130px; }
  .preview-bar { max-width: calc(100vw - 16px); overflow-x: auto; }
  .pr-rules { grid-template-columns: 1fr; }
  .door { width: 160px; }
  .sconce { width: 28px; }
  .cut-list { grid-template-columns: 1fr; }
  .alcove-row { gap: 22px 14px; }
  .alcove-title { font-size: 21px; }
  .alcove-blurb { font-size: 13px; }
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; }
  .folders-minor { grid-template-columns: 1fr; }
  .folder-name { font-size: 22px; }
  .dossier-head { flex-direction: column; align-items: flex-start; }
  .polaroid.big { width: 110px; }
  .season-tab { min-width: 0; flex: 1; padding: 8px 10px; }
  .st-title { font-size: 16px; }
  .player-play { width: 72px; height: 72px; font-size: 24px; }
  .season-book { flex-direction: column; align-items: flex-start; }
  .season-book img { width: 110px; }
  .plan {
    grid-template-columns: 1fr;
    grid-template-areas: "door" "floor" "stage" "bar" "backroom" "feed" "alcoves" "staff" "private" "booths" "next";
  }
  .room { min-height: 0; }
  .topbar { background: rgba(9,7,10,.94); position: sticky; top: 0; }
  .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .book-title { font-size: 18px; }
  .book-cta { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the Stage: vertical playlist + extended cuts (v1.14) ---------- */
.player-cut {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 3px 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #1d140a; background: var(--gold);
}
.player-overlay .po-link, .cut-link {
  padding: 4px 0; font: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.end-card { gap: 10px; background: rgba(9,7,10,.86); }
.end-card .po-kicker, .end-card .po-title, .end-card .po-sub { margin: 0; }
.end-card .po-title { font-size: clamp(24px, 3vw, 32px); }
.end-next-k { margin-top: 18px !important; }
.end-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.end-replay { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--muted) !important; white-space: nowrap; }

.ext-cut {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px 14px 64px; margin: 0 0 18px; text-decoration: none;
  background: linear-gradient(90deg, rgba(210,172,128,.18), rgba(210,172,128,.04));
  border: 1px solid var(--gold-dark);
  transition: border-color .2s ease, background .2s ease;
}
.ext-cut:hover { border-color: var(--gold); background: linear-gradient(90deg, rgba(210,172,128,.26), rgba(210,172,128,.06)); }
.ext-cut .room-light { top: 50%; left: 16px; transform: translateY(-50%); width: 30px; }
.ext-cut.is-locked .room-light { background: var(--m-ruby); box-shadow: 0 0 10px var(--m-ruby), 0 0 22px rgba(224,35,74,.45); }
.ext-k { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ext-t { font-family: var(--serif); font-size: 21px; color: var(--cream); }
.ext-b { font-size: 13.5px; color: #cfc2b5; }
.ext-cut .extra-lock { display: none; font-size: 12px; color: var(--muted); }
.ext-cut.is-locked .extra-lock { display: block; }
.cut-back { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }

.ep-tile-num { font-size: 36px; left: 10px; }
.ep-tile-ext {
  position: absolute; top: 8px; right: 8px; padding: 2px 7px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); background: rgba(9,7,10,.8); border: 1px solid var(--gold-dark);
}
.ep-tile-title { font-size: 19px; }

@media (max-width: 1000px) {
  .player { width: min(100%, calc(82vh * 9 / 16)); margin-inline: auto; }
}
.ep-ext { margin: -4px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---------- privacy + terms (v1.15) ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 120px clamp(16px, 4vw, 40px) 40px; }
.legal h1 { font-size: clamp(38px, 5vw, 56px); margin-bottom: 6px; }
.legal-date { margin: 0 0 26px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.legal-lede { font-size: 17px; color: #e3d7ca; }
.legal h2 { margin: 38px 0 10px; font-size: 28px; color: var(--gold-light); }
.legal h3 { margin: 22px 0 6px; font-family: var(--sans, inherit); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: #d9cdc0; }
.legal ul { padding-left: 20px; }
.legal a, .footer-fine a { color: var(--gold); }