:root{
  --ground:#faf7f0;      /* page */
  --panel:#fff;          /* cards, panels */
  --cream:#fdfbf6;       /* the buy column */
  --wash:#f2ece0;        /* date chips, quiet fills */
  --ink:#26231c;
  --ink-2:#3d3a33;       /* header nav */
  --ink-soft:#5a5648;
  --ink-faint:#8a8371;
  --ink-mute:#a09a86;
  --rule:#e6ddc9;
  --rule-soft:#f0ead9;
  --rule-strong:#d8cdb4;
  --accent:#b74a1e;
  --accent-dark:#8f3813;
  --teal:#2e5f66;
  --teal-wash:#eef2ee;
  --teal-rule:#cddad6;
  --gold:#e8b664;
  --brown:#7a4a20;
  --brown-wash:#f5ecdd;
  --brown-rule:#e2d3ba;
  --stripes:repeating-linear-gradient(45deg,#f0ead9,#f0ead9 10px,#f7f2e5 10px,#f7f2e5 20px);
  --display:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Work Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body)}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
h1,h2,h3{font-family:var(--display);font-weight:800;color:var(--ink);margin:0}
p{margin:0}
[hidden]{display:none!important}

/* Visible focus everywhere. The app relies on the browser default; these
   pages are entry points from search, so keyboard users land here cold. */
a:focus-visible,button:focus-visible{
  outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:12px;top:12px;background:var(--panel);color:var(--ink);
  padding:10px 16px;border-radius:8px}

/* The page is a column so a short page still puts the fan note and footer at
   the bottom of the window, the way the app's own layout does. */
.page{min-height:100vh;display:flex;flex-direction:column}
.main{flex:1;padding:32px 40px 56px}

/* ---------- header: a copy of the app's, rule for rule ---------- */
.hdr{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;padding:16px 40px;background:var(--ground);border-bottom:1px solid var(--rule)}
.hdr-logo{flex:none;display:block}
.hdr-logo img{width:92px;height:auto}
.hdr-search{flex:1 1 260px;max-width:380px;margin:0 0 0 64px;min-width:0;
  position:relative;display:flex;align-items:center}
.hdr-search-icon{position:absolute;left:13px;font-size:14px;color:var(--ink-mute);pointer-events:none}
.hdr-search input{width:100%;padding:10px 34px 10px 32px;border:1.5px solid var(--rule-strong);
  border-radius:999px;background:#fff;font-family:var(--body);font-size:13.5px;
  color:var(--ink);outline:none;margin:0;-webkit-appearance:none;appearance:none}
.hdr-search input:focus{border-color:var(--accent)}
.hdr-search input::-webkit-search-cancel-button,
.hdr-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.hdr-clear{position:absolute;right:12px;font-size:13px;color:var(--ink-faint);cursor:pointer;
  line-height:1;background:none;border:0;padding:0;font-family:var(--body)}
.hdr-nav{display:flex;gap:28px;align-items:center;font-family:var(--display);
  font-size:13.5px;font-weight:600}
.hdr-nav a{color:var(--ink-2)}
.hdr-nav a:hover{color:var(--accent)}
.hdr-nav a.hdr-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:9px 20px;background:var(--accent);color:#fdfbf6;border-radius:999px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.hdr-nav a.hdr-cta:hover{background:var(--accent-dark);color:#fdfbf6}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:var(--display);font-size:13.5px;font-weight:600;margin:0 0 22px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.crumbs li{color:var(--ink)}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--accent)}
.crumbs li:not(:last-child)::after{content:"/";color:#c9c2ae;margin:0 .3em}

/* ---------- list page head: the app's browse heading ---------- */
.kicker{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase}
.kicker a{color:inherit}
.page-title{margin:8px 0 0;font-size:34px;line-height:1.15}
.page-sub{margin:10px 0 0;font-size:15px;color:var(--ink-faint)}
.intro{margin-top:18px;max-width:720px}
.intro p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.intro p:last-child{margin-bottom:0}
.actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  font-family:var(--display);font-size:14px;font-weight:700;padding:13px 24px;border-radius:8px}
.btn-primary{background:var(--accent);color:#fdfbf6}
.btn-primary:hover{background:var(--accent-dark);color:#fdfbf6}
.btn-outline{border:1.5px solid var(--teal);color:var(--teal)}
.btn-outline:hover{background:var(--teal-wash);color:var(--teal)}

/* ---------- sections ---------- */
.sect{margin-top:44px;padding-top:28px;border-top:1px solid var(--rule)}
.sect-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin:0 0 18px}
.sect-head h2{font-size:24px;line-height:1.2}
.sect-kicker{margin:0 0 6px}
.sect-note{font-family:var(--mono);font-size:12px;color:var(--ink-mute)}
.sect-note a{font-family:var(--display);font-weight:700;font-size:12.5px}
.sect-more{font-family:var(--display);font-size:12.5px;font-weight:700;white-space:nowrap}

/* ---------- product cards: the app's card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px;
  margin:26px 0 0;padding:0;list-style:none}
.sect .grid{margin-top:0}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;height:100%}
.card-shot{position:relative;display:block;height:160px;background:var(--stripes)}
.card-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:12px}
.shot-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:#9a927c}
.badge{position:absolute;top:9px;font-family:var(--display);font-size:10px;font-weight:800;
  letter-spacing:.06em;padding:4px 9px;border-radius:999px;color:#fdfbf6}
.badge-studio{left:9px;background:var(--ink-soft)}
.badge-pick{left:9px;background:var(--brown)}
.badge-shows{right:9px;background:var(--teal);color:#f2e4c6}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card-cat{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--teal);text-transform:uppercase}
.card h3{margin-top:6px;font-size:15.5px;font-weight:700}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card-price{margin-top:3px;font-size:13px;color:var(--ink-faint)}
.show-badges{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.show-badge{font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.05em;
  padding:3px 8px;border-radius:999px;background:var(--teal-wash);color:var(--teal);
  border:1px solid var(--teal-rule)}
a.show-badge:hover{background:var(--teal);color:#f2e4c6}
.card-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.btn-dark,.btn-line{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-size:13px;padding:10px 0;border-radius:8px}
.btn-dark{font-weight:700;background:var(--ink);color:#faf7f0}
.btn-dark:hover{background:#000;color:#faf7f0}
.btn-line{font-weight:600;border:1.5px solid var(--rule-strong);color:var(--ink-soft)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- product hero band: media / details / buy ---------- */
.hero{background:var(--panel);border:1px solid var(--rule);border-radius:16px;overflow:hidden;
  display:grid;grid-template-columns:minmax(260px,.85fr) minmax(320px,1.4fr) minmax(270px,.8fr);
  align-items:stretch}
.hero-media{position:relative;min-height:340px;background:var(--stripes);
  border-right:1px solid var(--rule);overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:10px}
.hero-info{padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
.chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.chip-cat{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--teal);text-transform:uppercase;border:1.5px solid var(--teal);
  padding:5px 12px;border-radius:999px}
a.chip-cat:hover{background:var(--teal);color:#fdfbf6}
.chip-tag{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.05em;color:var(--brown);background:var(--brown-wash);
  border:1px solid var(--brown-rule);padding:5px 12px;border-radius:999px}
a.chip-tag:hover{background:var(--brown);color:#fdfbf6}
.hero h1{margin:16px 0 0;font-size:30px;line-height:1.14;letter-spacing:-.005em}
.hero-attrib{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.pick{margin-top:12px;display:flex;gap:11px;align-items:flex-start;padding:12px 14px;
  background:#fdf6ea;border:1px solid #ead9c4;border-radius:10px}
.pick-badge{flex:none;font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.08em;
  background:var(--brown);color:#fdfbf6;padding:4px 9px;border-radius:999px}
.pick-text{font-size:13.5px;line-height:1.55;color:#7a5a2a}
.buy{padding:28px 30px;background:var(--cream);border-left:1px solid var(--rule);
  display:flex;flex-direction:column;justify-content:center}
.buy-label{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;
  color:var(--ink-faint);text-transform:uppercase}
.buy-price{margin-top:6px;font-family:var(--display);font-size:19px;font-weight:700;color:var(--accent)}
.buy-actions{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.btn-amazon,.btn-cart{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-size:14.5px;padding:14px 10px;border-radius:8px}
.btn-amazon{font-weight:700;background:var(--accent);color:#fdfbf6}
.btn-amazon:hover{background:var(--accent-dark);color:#fdfbf6}
.btn-cart{font-weight:600;border:1.5px solid var(--teal);color:var(--teal)}
.btn-cart:hover{background:var(--teal-wash);color:var(--teal)}
.buy-note{margin-top:9px;font-size:12px;color:var(--ink-mute);text-align:center}

/* ---------- product info row: three panels ending on one line ---------- */
.info{margin-top:22px;display:grid;gap:22px;align-items:stretch;grid-template-columns:1fr 1.25fr 1fr}
.info-two{grid-template-columns:1fr 1.4fr}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:22px 24px;
  display:flex;flex-direction:column;min-width:0}
.panel h2{font-size:17px}
.panel-text{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ink-soft)}
.why{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.why h3{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}
.why ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.why li{display:flex;gap:12px;align-items:flex-start}
.why-icon{flex:none;width:34px;height:34px;border-radius:9px;background:#f7f2e5;
  border:1px solid var(--rule);color:var(--accent);display:flex;align-items:center;justify-content:center}
.why-icon svg{width:19px;height:19px}
.why-text{font-size:14.5px;line-height:1.45;color:var(--ink-soft);padding-top:6px}

.mentions{margin:6px 0 0;padding:0;list-style:none}
.mention{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--rule-soft);align-items:flex-start}
.avatar{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);
  color:#f2e4c6;display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-weight:800;font-size:12px;border:2px solid var(--gold);overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mention-body{flex:1;min-width:0}
.mention-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mention-show{font-family:var(--display);font-weight:800;font-size:15px;color:var(--ink)}
.mention-show:hover{color:var(--accent)}
.mention-ep{font-size:14px;color:var(--ink-soft)}
a.mention-ep:hover{color:var(--accent)}
.date-chip{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);background:var(--wash);
  padding:3px 9px;border-radius:5px}
.guest{font-size:13px;color:var(--ink-faint);font-style:italic}
.speaker,.said-chip{font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.05em;
  padding:3px 8px;border-radius:999px}
.speaker{color:var(--teal);background:var(--teal-wash);border:1px solid var(--teal-rule)}
.said-chip{color:var(--brown);background:var(--brown-wash);border:1px solid var(--brown-rule)}
.mention-quote{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-soft);
  border-left:3px solid var(--gold);padding-left:12px}
.watch{display:inline-block;margin-top:8px;font-family:var(--display);font-size:12.5px;font-weight:700}
.mention-none{margin-top:4px;font-size:13px;color:var(--ink-mute)}

.related{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.related a{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.related a:hover{border-color:var(--accent)}
.related-name{display:block;font-family:var(--display);font-weight:700;font-size:13.5px;
  color:var(--ink);line-height:1.3}
.related-attrib{display:block;margin-top:5px;font-size:12px;color:var(--ink-mute)}
.panel-more{margin-top:14px;font-family:var(--display);font-size:12.5px;font-weight:700}

/* ---------- link lists: the home page's numbered genre index ---------- */
.index{display:grid;grid-template-columns:1fr;gap:0 48px;margin:0;padding:0;list-style:none}
.index li{border-top:1px solid var(--rule-strong)}
.index li:last-child{border-bottom:1px solid var(--rule-strong)}
@media (min-width:760px){
  .index{grid-template-columns:1fr 1fr}
  .index li:nth-last-child(-n+2){border-bottom:1px solid var(--rule-strong)}
}
.index a{padding:18px 6px 20px 0;display:flex;align-items:flex-start;gap:20px;color:var(--ink)}
.index a:hover{background:#f5f0e4}
.index-num{flex:none;padding-top:7px;font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.index-main{min-width:0}
.index-name{display:block;font-family:var(--display);font-weight:800;font-size:22px;line-height:1.15;color:var(--ink)}
.index-count{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  color:var(--ink-mute);text-transform:uppercase}
.index-arrow{margin-left:auto;flex:none;padding-top:5px;font-size:16px;color:var(--accent)}
/* Long lists (every episode, every product) at the genre index's 22px would
   run for pages. Same row, smaller type. */
.index-compact a{padding:13px 6px 14px 0}
.index-compact .index-num{padding-top:3px}
.index-compact .index-name{font-size:16px;line-height:1.3;font-weight:700}
.index-compact .index-count{margin-top:4px}
.index-compact .index-arrow{padding-top:1px}

/* ---------- show pages: the "at a glance" header ---------- */
.show-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.show-id{display:flex;align-items:center;gap:14px}
.show-art{position:relative;flex:none;width:62px;height:62px;border-radius:50%;
  border:2.5px solid var(--gold);overflow:hidden;background:var(--accent);color:#f2e4c6;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:18px}
.show-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.show-host{margin-top:3px;font-size:14px;color:var(--ink-soft)}
.show-head .page-title{margin-top:16px}
.show-lead{margin-top:16px;max-width:700px;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.show-head .actions .btn{padding:12px 20px}
.show-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.show-panels .panel{padding:20px 22px}
.show-panels h2{font-size:15.5px}
.show-panels .panel-more{margin-top:auto;padding-top:12px}
.bars{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.bars a{display:grid;grid-template-columns:1fr auto;gap:5px 10px;color:var(--ink)}
.bars a:hover .bar-name{color:var(--accent)}
.bar-name{font-family:var(--display);font-size:13.5px;font-weight:700}
.bar-n{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}
.bar{grid-column:1 / -1;height:7px;border-radius:99px;background:var(--rule-soft);overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px}
.latest{margin:10px 0 0;padding:0;list-style:none}
.latest li{border-top:1px solid var(--rule-soft)}
.latest a{display:block;padding:11px 0;color:var(--ink)}
.latest a:hover .latest-title{color:var(--accent)}
.latest-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--display);font-size:13.5px;font-weight:700;line-height:1.35}
.latest-meta{display:flex;gap:8px;align-items:center;margin-top:6px}
.latest-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.about-list{columns:2 420px;column-gap:48px}
.about-list p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink-soft);break-inside:avoid}

/* ---------- the app's fan-project line, above the dark footer ---------- */
.fan-note{padding:18px 40px;border-top:1px solid var(--rule);text-align:center;
  font-size:12px;color:var(--ink-faint)}

/* ---------- the app's breakpoints ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(230px,1fr) minmax(300px,1.55fr)}
  .buy{grid-column:1 / -1;border-left:0;border-top:1px solid var(--rule)}
  .info,.info-two{grid-template-columns:1fr 1fr}
  .show-head{grid-template-columns:1fr;gap:32px}
}
@media (max-width:780px){
  /* Only the padding changes. The app's phone rule also asks for gap:12px and
     centring, but its inline styles override both, so on a phone the app's
     logo sits left with the desktop gap. This copies what the app renders. */
  .hdr{padding-left:20px;padding-right:20px}
  .hdr-nav{gap:16px;font-size:12.5px;flex-wrap:wrap;justify-content:center}
  .hdr-search{max-width:100%;order:3;flex-basis:100%;margin-left:0}
  .main{padding:22px 20px 40px}
  .page-title{font-size:25px;line-height:1.16}
  .hero{grid-template-columns:1fr}
  .hero-media{border-right:0;border-bottom:1px solid var(--rule);min-height:260px}
  .hero h1{font-size:23px;line-height:1.2}
  .info,.info-two{grid-template-columns:1fr}
  .show-panels{grid-template-columns:1fr}
  .show-lead{font-size:16px}
  .fan-note{padding-left:20px;padding-right:20px}
}
.ftr{background:var(--ink);color:#c9c2b3;padding:56px 0 40px;font-size:14.5px;
  font-family:var(--body);line-height:1.62;-webkit-font-smoothing:antialiased}
.ftr *,.ftr *::before,.ftr *::after{box-sizing:border-box}
.ftr .wrap{padding:0 40px}
.ftr a{color:#e8e2d5;text-decoration:none}
.ftr a:hover{color:#fff}
.ftr a:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}
.ftr h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;line-height:1.14;
  text-transform:uppercase;color:#8a8271;margin:0 0 15px}
.ftr-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr-base{border-top:1px solid #3b372e;margin-top:42px;padding-top:26px;
  color:#8a8271;font-size:13.5px;display:flex;gap:18px;flex-wrap:wrap;
  justify-content:space-between}
@media (max-width:780px){.ftr .wrap{padding:0 20px}}