/* ===== Tokens ===== */
:root, [data-theme="light"] {
  --bg: #f4f1ea;
  --surface: #fbf9f4;
  --surface-2: #fffefb;
  --surface-offset: #ece7dc;
  --border: #d8d2c4;
  --divider: #e3ddd0;
  --text: #211d15;
  --text-muted: #6d685c;
  --text-faint: #a39d8f;
  --accent: #c0392b;        /* studio red */
  --accent-hover: #9c2b20;
  --accent-soft: #f3dad6;
  --gold: #b07d11;
  --shadow-sm: 0 1px 2px rgba(40,30,10,.07);
  --shadow-md: 0 6px 20px rgba(40,30,10,.10);
  --shadow-lg: 0 18px 48px rgba(40,30,10,.16);

  --ind-Film: #c0392b;
  --ind-TV: #2f6fb0;
  --ind-Music: #8e44ad;
  --ind-WWE: #b8860b;
  --ind-Sports: #1f8a4c;
  --ind-Literature: #b05a1a;
  --ind-FilmTV: #6d685c;
  --ind-Other: #6d685c;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.94rem);
  --text-base: clamp(1rem, 0.97rem + 0.2vw, 1.06rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --font-display: 'Clash Display', 'Georgia', serif;
  --font-body: 'Satoshi', system-ui, sans-serif;
  --maxw: 1200px;
  --t: 180ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --bg: #131210;
  --surface: #1b1916;
  --surface-2: #221f1b;
  --surface-offset: #26221d;
  --border: #38332b;
  --divider: #2a2620;
  --text: #ece7dc;
  --text-muted: #9b9384;
  --text-faint: #6a6457;
  --accent: #e2574a;
  --accent-hover: #ef6c5f;
  --accent-soft: #3a201c;
  --gold: #e0a92e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55);

  --ind-Film: #e2574a;
  --ind-TV: #5b9bd8;
  --ind-Music: #b07fd6;
  --ind-WWE: #e0a92e;
  --ind-Sports: #4cb87a;
  --ind-Literature: #d98a4c;
  --ind-FilmTV: #9b9384;
  --ind-Other: #9b9384;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%);
}
img,svg { display:block; max-width:100%; }
button { cursor:pointer; background:none; border:none; color:inherit; font:inherit; }
input,select,button { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family: var(--font-display); font-weight: 600; line-height:1.08; text-wrap: balance; letter-spacing:-0.01em; }

.wrap { width:min(var(--maxw), 92vw); margin-inline:auto; }
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.muted { color: var(--text-muted); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:.6rem 1rem; z-index:200; border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

/* ===== Topbar ===== */
.topbar {
  position: sticky; top:0; z-index:100;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--divider);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand { display:flex; align-items:center; gap:.7rem; }
.logo { color: var(--accent); flex:none; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text strong { font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:.01em; }
.brand-text em { font-style:normal; font-size:.72rem; color:var(--text-muted); letter-spacing:.04em; text-transform:uppercase; }
.topbar-actions { display:flex; align-items:center; gap:1rem; }
.ghost-link { font-size:var(--text-sm); color:var(--text-muted); font-weight:500; padding:.4rem .2rem; border-bottom:1.5px solid transparent; }
.ghost-link:hover { color:var(--accent); border-color:var(--accent); }
.cta-link { font-size:var(--text-sm); font-weight:600; color:#fff; background:var(--accent); padding:.42rem .85rem; border-radius:8px; white-space:nowrap; transition:background .15s ease, transform .15s ease; }
.cta-link:hover { background:var(--accent-hover); transform:translateY(-1px); }
.cta-link span { font-weight:700; }
.icon-btn { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-full); border:1px solid var(--border); color:var(--text-muted); transition:var(--t); }
.icon-btn:hover { color:var(--text); border-color:var(--text-muted); }

/* ===== Hero ===== */
.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem,3vw,2.5rem); max-width: 100%; }
.eyebrow { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.22em; color:var(--accent); font-weight:700; margin-bottom:1rem; }
.hero h1 { font-size:var(--text-2xl); max-width:16ch; margin-bottom:1.1rem; }
.lede { font-size:var(--text-lg); color:var(--text-muted); max-width:52ch; }
.stat-row { display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,3rem); margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--divider); }
.stat { display:flex; flex-direction:column; }
.stat .n { font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,3.5vw,2.6rem); color:var(--text); line-height:1; }
.stat .l { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-top:.4rem; }

/* ===== Section heads ===== */
.section-head { margin-bottom:1.8rem; }
.section-head h2 { font-size:var(--text-xl); margin-bottom:.4rem; }
.section-head p { font-size:var(--text-sm); max-width:60ch; }

/* ===== Notable grid ===== */
.notable-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(255px,1fr)); gap:1rem; }
.guest-card {
  display:flex; flex-direction:column; gap:.6rem; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.1rem 1.2rem; transition:var(--t); position:relative; overflow:hidden;
}
.guest-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--card-accent,var(--accent)); }
.guest-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--card-accent,var(--accent)); }
.guest-card .gc-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.guest-card .gc-name { font-family:var(--font-display); font-weight:600; font-size:1.08rem; }
.guest-card .gc-count { font-size:var(--text-xs); font-weight:700; color:var(--card-accent,var(--accent)); background:color-mix(in oklab,var(--card-accent,var(--accent)) 14%, transparent); padding:.2rem .55rem; border-radius:var(--radius-full); white-space:nowrap; }
.guest-card .gc-bio { font-size:var(--text-xs); color:var(--text-muted); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.guest-card .gc-foot { display:flex; align-items:center; gap:.5rem; margin-top:auto; padding-top:.3rem; }
.notable-star { color:var(--gold); font-size:.8rem; }

.more-frequent { margin-top:1.5rem; }
.more-frequent summary { cursor:pointer; font-size:var(--text-sm); font-weight:600; color:var(--accent); list-style:none; display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 0; }
.more-frequent summary::-webkit-details-marker { display:none; }
.more-frequent summary::before { content:"+"; font-weight:700; }
.more-frequent[open] summary::before { content:"–"; }
.chip-cloud { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.fchip { font-size:var(--text-sm); padding:.4rem .8rem; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--surface); transition:var(--t); }
.fchip b { color:var(--accent); margin-left:.3rem; font-size:.78rem; }
.fchip:hover { border-color:var(--accent); color:var(--accent); }

/* ===== Controls ===== */
.controls-section { padding-bottom:1rem; }
.controls { display:flex; flex-direction:column; gap:1rem; }
.search-wrap { display:flex; align-items:center; gap:.7rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:.05rem .9rem; transition:var(--t); }
.search-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-wrap svg { color:var(--text-faint); flex:none; }
.search-wrap input { flex:1; border:none; background:none; padding:.85rem 0; font-size:var(--text-base); outline:none; }
.clear-search { font-size:1.4rem; color:var(--text-muted); line-height:1; padding:.2rem .4rem; }
.clear-search:hover { color:var(--accent); }

.filter-row { display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }
.industry-filters { display:flex; flex-wrap:wrap; gap:.45rem; }
.ind-chip {
  font-size:var(--text-sm); font-weight:600; padding:.5rem .9rem; border-radius:var(--radius-full);
  border:1.5px solid var(--border); color:var(--text-muted); transition:var(--t); display:inline-flex; align-items:center; gap:.45rem;
}
.ind-chip .dot { width:9px; height:9px; border-radius:50%; background:var(--chip-color,var(--text-faint)); }
.ind-chip:hover { color:var(--text); border-color:var(--text-muted); }
.ind-chip[aria-pressed="true"] { color:#fff; background:var(--chip-color,var(--accent)); border-color:var(--chip-color,var(--accent)); }
.ind-chip[aria-pressed="true"] .dot { background:rgba(255,255,255,.85); }

.select-wrap { position:relative; }
.select-wrap select {
  appearance:none; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-full);
  padding:.5rem 2.2rem .5rem 1rem; font-size:var(--text-sm); font-weight:600; color:var(--text); cursor:pointer; transition:var(--t);
}
.select-wrap::after { content:"▾"; position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; font-size:.7rem; }
.select-wrap select:hover { border-color:var(--text-muted); }

.active-bar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.active-pill { font-size:var(--text-xs); font-weight:600; background:var(--accent-soft); color:var(--accent); padding:.35rem .7rem; border-radius:var(--radius-full); display:inline-flex; gap:.4rem; align-items:center; }
.active-pill button { color:inherit; font-weight:700; }
.clear-all { font-size:var(--text-xs); font-weight:700; color:var(--text-muted); text-decoration:underline; }
.clear-all:hover { color:var(--accent); }

.result-meta { margin-top:1.2rem; font-size:var(--text-sm); color:var(--text-muted); font-weight:500; }
.result-meta b { color:var(--text); }

/* ===== Table ===== */
.table-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.guest-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.guest-table thead th {
  text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--text-muted); padding:.9rem 1rem; border-bottom:1px solid var(--border); white-space:nowrap;
  position:sticky; top:0; background:var(--surface-offset); z-index:2;
}
.guest-table th.sortable { cursor:pointer; user-select:none; }
.guest-table th.sortable:hover { color:var(--accent); }
.sort-ind { display:inline-block; width:1em; color:var(--accent); }
.guest-table tbody tr { border-bottom:1px solid var(--divider); transition:background var(--t); }
.guest-table tbody tr:last-child { border-bottom:none; }
.guest-table tbody tr:hover { background:var(--surface-2); }
.guest-table td { padding:.85rem 1rem; vertical-align:middle; }
.td-guest { font-weight:600; min-width:160px; }
.td-guest .co { display:block; font-size:var(--text-xs); color:var(--text-faint); font-weight:500; }
.td-guest .gname { cursor:pointer; }
.td-guest .gname:hover { color:var(--accent); text-decoration:underline; }
.td-topic { color:var(--text-muted); min-width:200px; }
.td-topic .tt { color:var(--text); font-weight:500; }
mark { background:color-mix(in oklab, var(--gold) 35%, transparent); color:inherit; border-radius:3px; padding:0 .1em; }
.td-date { white-space:nowrap; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ind-tag { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--text-xs); font-weight:700; padding:.3rem .65rem; border-radius:var(--radius-full); white-space:nowrap;
  color:var(--tag-color); background:color-mix(in oklab, var(--tag-color) 15%, transparent); }
.ind-tag .dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.ep-link { display:inline-flex; align-items:center; gap:.35rem; font-weight:700; font-size:var(--text-xs); color:var(--accent); white-space:nowrap; padding:.4rem .7rem; border:1.5px solid var(--accent); border-radius:var(--radius-full); transition:var(--t); }
.ep-link:hover { background:var(--accent); color:#fff; }
.th-link { width:1%; }

.empty-state { text-align:center; padding:4rem 1rem; }
.empty-state p { color:var(--text-muted); margin-bottom:1.2rem; }
.btn { background:var(--accent); color:#fff; font-weight:700; font-size:var(--text-sm); padding:.7rem 1.4rem; border-radius:var(--radius-full); transition:var(--t); }
.btn:hover { background:var(--accent-hover); }
.load-more-wrap { text-align:center; margin-top:1.8rem; }

/* ===== Footer ===== */
.footer { border-top:1px solid var(--divider); margin-top:3.5rem; padding-block:2.5rem; }
.footer-inner p { font-size:var(--text-sm); color:var(--text-muted); max-width:80ch; margin-bottom:.5rem; }

/* ===== Responsive: cards on mobile ===== */
@media (max-width: 720px) {
  .guest-table thead { display:none; }
  .guest-table, .guest-table tbody, .guest-table tr, .guest-table td { display:block; width:100%; }
  .guest-table tbody tr { padding:1rem; position:relative; }
  .guest-table td { padding:.2rem 0; border:none; }
  .td-guest { font-size:var(--text-base); }
  .td-date { font-size:var(--text-xs); margin-top:.3rem; }
  .td-link { margin-top:.7rem; }
  .table-scroll { border-radius:var(--radius-md); }
  .ghost-link { display:none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important; } }
