/* Streaming Potato Network — shared site styles */
:root{
  --cream:#FCE9C6; --cream-deep:#F6DDA9; --tan:#EAC28E; --orange:#D9791E; --orange-deep:#B86110;
  --brown:#7A3B12; --brown-dark:#4A250D; --ink:#2C1608; --paper:#FFF8EA; --screen:#1E1007; --flame:#F2A24A;
  --pixel:'Press Start 2P', monospace;
  --body:'Inter', system-ui, sans-serif;
  --gutter:clamp(16px, 5vw, 64px);
  --max:1200px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); line-height:1.6; overflow-x:hidden; }
img{ max-width:100%; height:auto; }
a{ color:var(--brown-dark); text-decoration:none; }
a:hover{ color:var(--orange-deep); }
a:focus-visible, button:focus-visible{ outline:3px solid var(--orange-deep); outline-offset:3px; }
.px{ font-family:var(--pixel); line-height:1.6; font-weight:400; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; z-index:50; background:var(--paper); padding:10px 14px; border:3px solid var(--ink); }
.skip:focus{ left:8px; }

/* 3D background canvas */
#bg3d{ position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
.page{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
.wrap{ width:100%; max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }

/* header */
.site-header{ position:relative; z-index:5; background:#FFFFFF; border-bottom:4px solid var(--ink); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:14px; padding-bottom:14px; }
.brand img{ display:block; width:auto; height:48px; image-rendering:pixelated; }
.nav{ display:flex; gap:clamp(16px, 2.4vw, 30px); font-weight:700; font-size:15px; }
.nav a[aria-current="page"]{ color:var(--orange-deep); }
.menu-btn{ display:none; width:48px; height:48px; background:var(--paper); border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.menu-btn span{ display:block; width:20px; height:3px; background:var(--ink); }
@media (max-width: 860px){
  .brand img{ height:40px; }
  .menu-btn{ display:flex; }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:#FFFFFF; border-bottom:4px solid var(--ink); }
  .nav.open{ display:flex; }
  .nav a{ padding:14px var(--gutter); border-top:2px solid var(--cream-deep); }
}

/* buttons */
.btn{ display:inline-block; font-family:var(--pixel); font-size:12px; line-height:1.5; padding:15px 20px; color:var(--ink); background:var(--orange); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); transition:transform .08s ease, box-shadow .08s ease; }
.btn:hover{ color:var(--ink); background:#E88A2E; }
.btn:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn-light{ background:var(--paper); }
.btn-light:hover{ background:var(--cream-deep); }
.btn-tan{ background:var(--tan); }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }

/* boxes */
.box{ background:var(--paper); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--brown); }
.box-tight{ background:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--brown); }
.band{ background:var(--brown-dark); color:var(--cream); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.band h2, .band p{ color:var(--cream); }

/* sections */
.section{ padding:clamp(28px, 5vw, 56px) 0; }
.section-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:24px; padding:14px 20px; background:var(--paper); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--brown); }
.section-head h2, h2.px{ margin:0; font-size:clamp(15px, 2vw, 20px); color:var(--brown-dark); }
.section-head p{ margin:0; color:var(--brown); }
.kicker{ margin:0; font-family:var(--pixel); font-size:11px; color:var(--orange-deep); }
.prose p{ margin:0 0 14px; font-size:17px; line-height:1.7; }
.prose h2{ font-size:26px; font-weight:800; color:var(--brown-dark); margin:32px 0 12px; line-height:1.25; }
.prose h3{ font-size:19px; font-weight:800; color:var(--brown-dark); margin:22px 0 8px; }
.prose ul{ padding-left:22px; margin:0 0 16px; }
.prose li{ margin-bottom:8px; font-size:17px; }

/* retro TV */
.tv{ position:relative; background:var(--brown); border:6px solid var(--ink); box-shadow:8px 8px 0 var(--brown-dark); padding:clamp(12px, 2vw, 20px); }
.tv-screen{ position:relative; aspect-ratio:16/9; background:var(--screen); border:5px solid var(--ink); overflow:hidden;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:16px; }
.tv-screen .tag{ position:absolute; left:14px; top:12px; font-family:var(--pixel); font-size:10px; color:var(--tan); }
.tv-title{ margin:0; font-family:var(--pixel); font-size:clamp(12px, 2vw, 20px); line-height:1.7; color:var(--cream); }
.tv-sub{ margin:0; font-family:var(--pixel); font-size:clamp(8px, 1vw, 10px); color:var(--flame); }
.play-btn{ width:64px; height:64px; background:var(--orange); border:4px solid var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.play-btn svg{ width:24px; height:26px; }
.tv-hero{ position:relative; }
.tv-hero .antenna{ position:absolute; top:-58px; width:6px; height:64px; background:var(--ink); transform-origin:bottom; }
.tv-hero .antenna.l{ left:40%; transform:rotate(-28deg); }
.tv-hero .antenna.r{ left:55%; transform:rotate(28deg); }
.tv-hero .murphy{ position:absolute; right:-24px; bottom:-52px; width:clamp(120px, 30%, 200px); height:auto; }
@media (max-width: 860px){ .tv-hero .murphy{ right:0; bottom:-44px; width:clamp(110px, 34%, 160px); } }
.video-facade{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; background:transparent; }
.video-facade img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-facade .play-btn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.tv-screen iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* hero */
.hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px, 5vw, 64px); align-items:center; padding:clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); }
.hero h1{ margin:14px 0 18px; font-family:var(--pixel); font-size:clamp(19px, 2.6vw, 30px); line-height:1.5; color:var(--brown-dark); font-weight:400; }
.hero p.lead{ margin:0 0 26px; font-size:clamp(16px, 1.6vw, 19px); color:var(--brown-dark); max-width:34em; }
@media (max-width: 860px){ .hero{ grid-template-columns:1fr; } .tv-hero{ margin:48px 0 20px; } }

/* grids and cards */
.grid{ display:grid; gap:clamp(14px, 2vw, 24px); }
.g2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width: 960px){ .g4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .g3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .g3, .g2{ grid-template-columns:1fr; } }
@media (max-width: 380px){ .g4{ grid-template-columns:1fr; } }

.channel{ display:flex; flex-direction:column; gap:12px; padding:24px; }
.channel .num{ align-self:flex-start; font-family:var(--pixel); font-size:10px; padding:6px 10px; background:var(--orange); border:3px solid var(--ink); color:var(--ink); }
.channel .name{ font-family:var(--pixel); font-size:15px; color:var(--brown-dark); }
.channel .desc{ font-size:15px; color:var(--brown-dark); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips span{ padding:4px 10px; background:var(--cream-deep); font-size:13px; font-weight:700; color:var(--brown); }
.channel-soon{ display:flex; flex-direction:column; gap:8px; padding:20px 24px; border:3px dashed var(--brown); background:var(--cream-deep); color:var(--brown); font-family:var(--pixel); font-size:12px; }
.channel-soon small{ font-size:9px; }

.card{ display:flex; flex-direction:column; background:var(--paper); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--brown); color:var(--ink); }
.card:hover{ color:var(--ink); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--brown); }
.card .thumb{ aspect-ratio:16/10; background:var(--cream-deep); border-bottom:4px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; }
.card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.card .label{ font-family:var(--pixel); font-size:9px; color:var(--orange-deep); }
.card .title{ font-size:17px; font-weight:800; line-height:1.3; }
.card .meta{ font-size:13px; color:var(--brown); }
.card-planned{ display:flex; flex-direction:column; gap:6px; padding:16px; border:3px dashed var(--brown); color:var(--brown); }
.card-planned .label{ font-family:var(--pixel); font-size:9px; }
.card-planned .title{ font-size:15px; font-weight:700; }

/* big target glyphs (used when no still yet) */
.glyph{ font-family:var(--pixel); font-size:clamp(40px, 6vw, 64px); color:var(--orange); line-height:1; }
.swatch{ width:34%; aspect-ratio:1; border:4px solid var(--ink); }
.shape{ width:36%; aspect-ratio:1; }

/* ad slot */
.ad-slot{ margin:8px 0 32px; }
.ad-placeholder{ height:100px; border:2px dashed var(--orange-deep); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; color:var(--brown); font-size:13px; font-weight:600; background:var(--paper); }
.ad-placeholder.tall{ height:600px; }

/* parents block */
.parents{ padding:clamp(24px, 4vw, 44px); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px 56px; }
.parents h2{ margin:0 0 12px; font-size:26px; font-weight:800; color:var(--brown-dark); }
.parents p{ margin:0 0 14px; }
.point{ display:flex; gap:14px; align-items:flex-start; margin-bottom:12px; }
.point .n{ font-family:var(--pixel); font-size:12px; color:var(--orange-deep); padding-top:4px; }
.point p{ margin:0; }
@media (max-width: 760px){ .parents{ grid-template-columns:1fr; } }

/* footer */
.site-footer{ position:relative; z-index:1; background:var(--brown-dark); color:var(--cream); margin-top:clamp(32px, 5vw, 64px); }
.site-footer .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-top:32px; padding-bottom:32px; }
.site-footer .mark{ display:flex; align-items:center; gap:14px; }
.site-footer .mark img{ width:60px; height:60px; image-rendering:pixelated; background:var(--cream); border:3px solid var(--ink); }
.site-footer small{ display:block; color:var(--tan); font-size:13px; }
.site-footer nav{ display:flex; flex-wrap:wrap; gap:14px 24px; font-size:14px; font-weight:600; }
.site-footer a{ color:var(--cream); }
.site-footer a:hover{ color:var(--flame); }

/* breadcrumbs + page head */
.crumbs{ display:flex; flex-wrap:wrap; gap:6px 8px; font-size:14px; font-weight:600; color:var(--brown); margin:24px 0 14px; padding:6px 12px; background:var(--paper); border:2px solid var(--ink); width:fit-content; max-width:100%; }
.crumbs a{ color:var(--brown); }
.crumbs [aria-current]{ color:var(--ink); }
.page-head{ margin-bottom:28px; padding:clamp(20px,3vw,32px); background:var(--paper); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--brown); }
.page-head h1{ margin:8px 0 0; font-size:clamp(30px, 4.4vw, 44px); font-weight:800; line-height:1.15; color:var(--brown-dark); }
.page-head h1 .sub{ display:block; margin-top:8px; font-size:clamp(18px, 2.2vw, 24px); font-weight:700; color:var(--brown); }
.page-head .intro{ max-width:46em; margin:14px 0 0; font-size:18px; color:var(--brown-dark); }

/* episode layout */
.ep-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:start; padding-top:12px; }
.ep-main{ display:flex; flex-direction:column; gap:clamp(36px, 5vw, 52px); min-width:0; }
.ep-main h2.px{ margin-bottom:16px; }
.rail{ position:sticky; top:20px; display:flex; flex-direction:column; gap:22px; }
.rail .jump{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.rail .jump a{ font-weight:600; font-size:15px; }
.progress{ padding:20px; background:var(--orange); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); display:flex; flex-direction:column; gap:10px; font-weight:600; }
.progress .bar{ height:14px; background:var(--cream); border:3px solid var(--ink); }
.progress .bar span{ display:block; height:100%; background:var(--ink); }
@media (max-width: 1000px){ .ep-layout{ grid-template-columns:1fr; } .rail{ position:static; } }
.story p{ margin:0; font-size:18px; line-height:1.75; }
.cast-card .pic, .found-card .pic{ aspect-ratio:4/3; background:var(--cream-deep); border-bottom:4px solid var(--ink); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.cast-card .pic img, .found-card .pic img{ width:100%; height:100%; object-fit:cover; }
.cast-card .txt{ padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.cast-card .nm{ font-weight:800; font-size:17px; }
.found-card{ border:4px solid var(--ink); background:var(--paper); display:flex; flex-direction:column; }
.found-card .pic{ border-bottom-width:3px; }
.found-card .pic .corner{ position:absolute; right:8px; top:8px; font-family:var(--pixel); font-size:14px; color:var(--orange); }
.found-card .w{ padding:10px 14px; font-size:19px; font-weight:800; }
.found-card .w b{ color:var(--orange-deep); }
.placeholder-pic{ font-size:12px; color:var(--brown); padding:10px; text-align:center; }
.lyrics{ padding:clamp(20px, 3vw, 30px); display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:space-between; }
.lyrics p{ margin:0; font-size:19px; line-height:1.85; white-space:pre-line; }
.game-panel{ background:#2f6b3a; border:5px solid var(--ink); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 56px; padding:32px; min-height:320px; color:var(--cream); }
.game-panel .px{ color:var(--cream); font-size:18px; }
.game-panel p{ margin:0; max-width:300px; }
.game-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
.game-tab{ font-size:12px; padding:12px 16px; border:4px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; box-shadow:4px 4px 0 var(--ink); }
.game-tab[aria-selected="true"]{ background:var(--orange); color:var(--paper); }
.game-tab:focus-visible{ outline:3px solid var(--orange-deep); outline-offset:3px; }
.game-frame{ width:100%; aspect-ratio:3/2; border:5px solid var(--ink); display:block; background:#2f6b3a; }
@media (max-width: 700px){ .game-frame{ aspect-ratio:3/4; } }
.printable{ padding:clamp(20px, 3vw, 30px); display:flex; flex-wrap:wrap; gap:28px; align-items:center; }
.printable .sheet{ color:var(--ink); width:160px; aspect-ratio:8.5/11; background:#fff; border:3px solid var(--ink); padding:12px; display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.printable .sheet b{ font-size:11px; }
.printable .sheet span{ font-family:monospace; letter-spacing:6px; color:#D8C3A5; font-size:28px; line-height:1; }
.printable .sheet i{ flex:1; border:2px dashed #D8C3A5; }
.printable .copy{ flex:1 1 280px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.activity{ padding:20px; display:flex; flex-direction:column; gap:6px; background:var(--paper); border:3px solid var(--ink); }
.activity .t{ font-weight:800; font-size:17px; }
.parents-ep{ padding:clamp(22px, 3vw, 32px); }
.parents-ep h2{ margin:0 0 12px; font-size:26px; font-weight:800; color:var(--brown-dark); }
.parents-ep h3{ margin:18px 0 6px; font-size:17px; font-weight:800; }
.parents-ep p{ margin:0; font-size:16px; }
.draft-banner{ position:sticky; top:0; z-index:40; background:#C0392B; color:#fff; text-align:center; font-weight:700; padding:8px; font-size:14px; }

@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } .btn{ transition:none; } }
/* picture grids stay two-up on phones */
@media (max-width: 600px){ .g3.pics{ grid-template-columns:repeat(2, minmax(0,1fr)); } .found-card .w{ font-size:16px; } .cast-card .txt{ padding:10px 12px; } }

/* text panels that sit over the 3D background */
.hero-copy{ padding:clamp(22px, 3vw, 36px); background:var(--paper); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--brown); }
.hero-copy h1{ margin-top:12px; }
.hero-copy .lead{ margin-bottom:24px; }

.song-player{ display:block; width:100%; max-width:560px; margin:0 0 16px; border:4px solid var(--ink); background:var(--paper); }

.song-video{ position:relative; aspect-ratio:16/9; max-width:760px; border:5px solid var(--ink); box-shadow:6px 6px 0 var(--brown); background:#000; margin:0 0 18px; }
.song-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }