@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Righteous&display=swap');

/* ===== WatchParty USA — shared archive/article styles =====
   One place for the whole /archive cluster's look. Brand tokens
   mirror the broadcast (style.css). Edit here = every article updates. */

:root{
  --bg:#171310; --bg2:#16110d; --panel:rgba(30,24,18,.88);
  --cream:#fff8ea; --muted:#e9d2b0; --dim:#b9a888;
  --pink:#ff2d92; --pinkglow:#ff6ab8; --amber:#ffb35c; --cyan:#1fb9d8; --line:#3a2c1c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7; font-size:18px;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(255,70,140,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
}
a{color:var(--cyan)}
.wrap{max-width:760px; margin:0 auto; padding:0 22px}
.wrap.wide{max-width:820px}

/* top bar */
.topbar{border-bottom:1px solid var(--line); background:var(--bg2)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 22px}
.brand{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--amber); letter-spacing:1px; text-decoration:none}
.brand span{color:var(--pinkglow)}
.backlink{font-size:13px; color:var(--dim); text-decoration:none}
.backlink:hover{color:var(--cream)}

/* headings + text */
.crumb{font-size:13px; color:var(--dim); padding-top:26px}
.crumb a{color:var(--dim); text-decoration:none}
.crumb a:hover{color:var(--cream)}
h1{font-family:Righteous,sans-serif; font-weight:400; font-size:2.5rem; line-height:1.12; margin:.35em 0 .1em; color:var(--cream); text-wrap:balance}
.kicker{font-family:'Press Start 2P',monospace; font-size:11px; color:var(--pinkglow); letter-spacing:2px; text-transform:uppercase; margin-top:4px}
.lede{font-size:1.18rem; color:var(--muted); margin:.9em 0 0}
h2{font-family:Righteous,sans-serif; font-weight:400; font-size:1.7rem; color:var(--amber); margin:2.2em 0 .4em; border-left:4px solid var(--pink); padding-left:12px; text-wrap:balance}
h3{font-family:Righteous,sans-serif; font-weight:400; font-size:1.2rem; color:var(--cream); margin:1.6em 0 .3em}
p{margin:.8em 0}
em{color:var(--muted)}
main.wrap{padding-bottom:10px}

/* watch CTA */
.cta{display:block; text-align:center; margin:26px 0; padding:22px 20px;
  background:linear-gradient(180deg, rgba(255,45,146,.16), rgba(255,45,146,.04));
  border:2px solid var(--pink); border-radius:14px; text-decoration:none;
  box-shadow:0 0 24px rgba(255,45,146,.18); transition:transform .12s, box-shadow .2s;}
.cta:hover{transform:translateY(-2px); box-shadow:0 0 34px rgba(255,45,146,.34)}
.cta:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}
.cta .big{display:block; font-family:Righteous,sans-serif; font-size:1.5rem; color:#fff; text-shadow:0 0 6px var(--pinkglow),0 0 14px var(--pink)}
.cta .sub{display:block; font-size:.95rem; color:var(--muted); margin-top:6px}
.cta.slim{padding:16px}
.cta.slim .big{font-size:1.2rem}

/* panels + inline link groups */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:22px 0}
.panel h2{margin-top:0}
.links a,.related a{color:var(--cyan); font-weight:600}
.note{font-size:.85rem; color:var(--dim); font-style:italic}

/* fact list (GEO quick facts) */
.facts{list-style:none; padding:0; margin:.4em 0}
.facts li{border-bottom:1px solid var(--line); padding:9px 0; display:flex; gap:14px}
.facts li b{color:var(--amber); min-width:150px; font-weight:600}

/* data table */
.tbl-wrap{overflow-x:auto; margin:18px 0}
table{border-collapse:collapse; width:100%; font-size:.98rem}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{font-family:Righteous,sans-serif; font-weight:400; color:var(--amber)}
td{color:var(--muted)}
td b{color:var(--cream); font-weight:600}

/* FAQ */
details{border-bottom:1px solid var(--line); padding:14px 0}
details summary{cursor:pointer; font-family:Righteous,sans-serif; font-size:1.12rem; color:var(--cream); list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'▸'; color:var(--pink); margin-right:10px; display:inline-block; transition:transform .15s}
details[open] summary::before{transform:rotate(90deg)}
details p{color:var(--muted); margin:.7em 0 .2em; padding-left:24px}

/* index list (hub) */
ul.index{list-style:none; padding:0; margin:.4em 0}
ul.index li{border-bottom:1px solid var(--line); padding:12px 0}
ul.index a{color:var(--cyan); font-weight:600; font-size:1.12rem; text-decoration:none}
ul.index a:hover{text-decoration:underline}
ul.index .blurb{display:block; color:var(--dim); font-size:.95rem; font-weight:400; margin-top:2px}
.soon{color:var(--dim); font-size:.95rem; font-style:italic}

/* footer */
footer{border-top:1px solid var(--line); margin-top:40px; padding:34px 0 46px; text-align:center; background:var(--bg2)}
.neon{font-family:Righteous,sans-serif; font-size:1.3rem; text-decoration:none; color:#fff;
  text-shadow:0 0 1px #fff,0 0 6px var(--pinkglow),0 0 12px var(--pink); transition:filter .2s, transform .12s; display:inline-block}
.neon:hover{filter:brightness(1.25); transform:translateY(-1px)}
.foot-note{font-size:.8rem; color:var(--dim); margin-top:14px}

@media (max-width:560px){
  body{font-size:17px}
  h1{font-size:2rem}
  .cta .big{font-size:1.25rem}
  .facts li{flex-direction:column; gap:2px}
  .facts li b{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  html{scroll-behavior:auto}
}