:root { --sage:#7d9478; --ink:#1f1f1f; --cream:#f2ead8; --yellow:#f2b52b; --silver:#d6d6d6; --paper:#faf6ec; --muted:#5c5342; }
* { box-sizing: border-box; }
body { margin:0; background:var(--sage); color:var(--ink); font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; }
a { color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:28px 20px 60px; }
.playerbar { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.pb-btn { width:34px; height:26px; background:var(--silver); border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; flex:none; }
.pb-btn::after { content:''; border-left:10px solid var(--ink); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.pb-track { flex:1; height:18px; background:var(--ink); position:relative; }
.pb-fill { position:absolute; left:3px; top:3px; bottom:3px; width:46%; background:var(--yellow); }
.pb-knob { position:absolute; left:46%; top:-7px; width:16px; height:32px; background:var(--silver); border:3px solid var(--ink); }
.rec { display:flex; align-items:center; gap:8px; background:var(--silver); border:3px solid var(--ink); padding:2px 10px; font-weight:700; font-size:14px; flex:none; }
.rec::before { content:''; width:11px; height:11px; border-radius:50%; background:#d0342c; }
header.site { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
.chip { display:inline-block; background:var(--cream); border:4px solid var(--ink); padding:8px 22px; font-size:26px; font-weight:700; text-decoration:none; }
.handle { font-weight:600; color:var(--cream); text-decoration:none; font-size:16px; }
.tagline { color:var(--cream); font-size:17px; font-weight:600; margin:14px 0 34px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.ep { background:var(--paper); border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); text-decoration:none; display:block; transition:transform .06s; }
.ep:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--ink); }
.ep img { width:100%; display:block; border-bottom:3px solid var(--ink); }
.ep .t { padding:14px 16px 4px; font-weight:700; font-size:16px; line-height:1.35; }
.ep .m { padding:0 16px 16px; font-size:13.5px; color:var(--muted); font-weight:600; }
.pill { display:inline-block; background:var(--yellow); border:3px solid var(--ink); padding:5px 14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0 10px 10px 0; color:var(--ink); text-decoration:none; }
.pill.lite { background:var(--cream); }
article.recap { background:var(--paper); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:34px 38px; margin-top:24px; font-size:16.5px; line-height:1.65; overflow-x:auto; }
article.recap h1 { font-size:27px; line-height:1.25; margin:0 0 10px; }
article.recap h2 { font-size:19px; margin:30px 0 10px; display:inline-block; background:var(--yellow); border:3px solid var(--ink); padding:4px 12px; }
article.recap table { border-collapse:collapse; width:100%; font-size:15px; }
article.recap th, article.recap td { border:2px solid var(--ink); padding:7px 10px; text-align:left; }
article.recap blockquote { margin:0; padding:2px 16px; border-left:6px solid var(--yellow); }
.hero { border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); display:block; width:100%; }
.eq { display:flex; align-items:flex-end; gap:5px; height:44px; margin:44px 0 10px; border-bottom:3px solid var(--ink); padding-bottom:0; max-width:100%; overflow:hidden; }
.eq span { width:9px; background:#a8b5a4; }
.eq span.y { background:var(--yellow); }
.brandmark { display:flex; align-items:center; gap:14px; text-decoration:none; }
.avatar { width:54px; height:54px; border:3px solid var(--ink); display:block; background:var(--cream); }
.banner { width:100%; height:auto; display:block; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); margin:0 0 34px; }
.stats { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 32px; }
.reacts { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; align-items:center; }
.stat { background:var(--cream); border:3px solid var(--ink); padding:7px 14px; font-size:14.5px; font-weight:600; }
.stat b { font-size:16.5px; }
.headright { display:flex; align-items:center; gap:16px; }
.watchwrap { position:relative; }
.watchbtn { background:var(--yellow); border:3px solid var(--ink); padding:8px 14px; font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:4px 4px 0 var(--ink); }
.watchbtn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.popover { position:absolute; right:0; top:calc(100% + 12px); width:min(430px, 86vw); background:var(--paper); border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:18px; z-index:10; }
.pop-head { font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; }
.pop-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pop-chips .pill { margin:0; }
.pop-foot { margin-top:14px; font-size:13px; color:var(--muted); font-weight:600; }
.origin { color:var(--cream); font-size:15px; font-weight:600; margin:-22px 0 34px; }
.origin a { color:var(--cream); }
.origin-credit { opacity:.85; font-weight:500; display:block; margin-top:3px; font-size:13.5px; }
footer.site { color:var(--cream); font-size:14.5px; font-weight:600; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-end; }
footer.site a { color:var(--cream); }
@media (max-width:640px){
  article.recap { padding:22px 18px; }
  .popover { position:fixed; left:12px; right:12px; top:86px; width:auto; max-height:72vh; overflow-y:auto; }
}