:root { --bg:#0a0e1a; --surface:#131929; --border:#2a3a5c;
  --gold:#d4a017; --cyan:#00b4d8; --red:#ff1a1a; --text:#e6edf3;
  --text2:#7a8ba8; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,sans-serif; line-height:1.6; }
a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--gold); }
header { background:var(--surface); border-bottom:2px solid var(--gold);
  padding:18px 6vw; display:flex; align-items:center; gap:18px; }
header h1 { font-size:22px; color:var(--gold); }
nav a { margin-left:22px; font-weight:600; }
main { max-width:1000px; margin:0 auto; padding:34px 5vw; }
.hero { text-align:center; padding:40px 0; }
.hero h2 { font-size:34px; color:var(--gold); }
.hero p { color:var(--text2); font-size:18px; margin-top:8px; }
/* full-bleed: break out of the centered <main> column to span the viewport */
.hero-banner { width:100vw; margin-left:calc(50% - 50vw);
  margin-top:-34px; margin-bottom:10px; display:block; }
.hero-banner img { width:100%; height:auto; display:block;
  border-bottom:2px solid var(--gold); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,
  minmax(280px,1fr)); gap:20px; margin-top:26px; }
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; transition:transform .15s; }
.card:hover { transform:translateY(-3px); border-color:var(--gold); }
.card img { width:100%; aspect-ratio:16/9; object-fit:cover;
  display:block; background:#000; }
.card .body { padding:14px; }
.card .mode { color:var(--red); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; }
.card h3 { font-size:16px; margin:4px 0; }
.embed { position:relative; padding-top:56.25%; margin:22px 0; }
.embed iframe { position:absolute; inset:0; width:100%; height:100%;
  border:0; border-radius:12px; }
.chapters { background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:16px 20px; margin:18px 0; }
.chapters li { list-style:none; padding:3px 0; }
.chapters .ts { color:var(--gold); font-family:monospace;
  margin-right:10px; }
.cta { background:var(--surface); border:1px solid var(--gold);
  border-radius:10px; padding:18px 22px; margin:22px 0;
  text-align:center; font-size:18px; }
.btn { display:inline-block; background:var(--gold); color:#000;
  font-weight:700; padding:10px 26px; border-radius:8px; margin-top:10px; }
footer { border-top:1px solid var(--border); color:var(--text2);
  text-align:center; padding:26px; font-size:13px; margin-top:40px; }
.casefile { margin-top:30px; line-height:1.6; }
.casefile h2, .casefile h3 { color:var(--gold); }
.gallery { margin-top:30px; }
.ggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px; }
.ggrid img { width:100%; height:150px; object-fit:cover; border-radius:8px;
  border:1px solid var(--border); transition:transform .12s,border-color .12s; }
.ggrid a:hover img { transform:scale(1.03); border-color:var(--gold); }
.bonuswrap { margin-top:26px; }
.bonus { background:var(--surface); border:1px solid var(--border);
  border-radius:10px; margin:14px 0; padding:6px 16px; }
.bonus > summary { cursor:pointer; color:var(--gold); font-weight:700;
  font-size:17px; padding:10px 0; list-style:none; }
.bonus > summary::-webkit-details-marker { display:none; }
.bonus > summary::before { content:"▸ "; color:var(--gold); }
.bonus[open] > summary::before { content:"▾ "; }
.bonus audio { width:100%; margin:10px 0; }
.prose { margin:18px 0; }
.prose h1,.prose h2,.prose h3 { color:var(--gold); margin:18px 0 8px; }
.prose p { margin:10px 0; }
.prose ul,.prose ol { margin:10px 0 10px 24px; }
.prose a { color:var(--cyan); }
.imgblock { margin:22px 0; text-align:center; }
.imgblock img { max-width:100%; border-radius:12px; border:1px solid var(--border); }
.imgblock .caption { color:var(--text2); font-size:13px; margin-top:6px; }