:root { --ink:#1c2430; --mut:#5a6572; --line:#dfe5ea; --acc:#175e8c; --acc2:#0d3c5c; --bg:#fbfcfd; --card:#ffffff; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; font-size:17.5px; }
a { color: var(--acc); }
header.site { position:relative; background:var(--acc2); color:#fff; overflow:hidden; }
header.site .band { position:relative; max-width:880px; margin:0 auto; padding:34px 22px 26px; z-index:2; }
header.site canvas#binary { position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.5; }
header.site h1 { margin:0 0 2px; font-size:2.3rem; letter-spacing:-0.01em; }
header.site .role { margin:0; font-size:1.12rem; font-weight:600; color:#bcd7ea; }
nav.menu { position:relative; z-index:2; background:rgba(10,32,48,.55); }
nav.menu .in { max-width:880px; margin:0 auto; padding:0 14px; display:flex; flex-wrap:wrap; gap:2px; }
nav.menu a { color:#eaf3f9; text-decoration:none; font-weight:600; padding:13px 14px; display:block; }
nav.menu a:hover { background:rgba(255,255,255,.12); }
nav.menu a.here { background:#fff; color:var(--acc2); }
.bannerimg { display:block; width:100%; max-height:300px; object-fit:cover; }
main { max-width:880px; margin:0 auto; padding:30px 22px 56px; }
h2 { font-size:1.45rem; margin:26px 0 8px; }
h2:first-child { margin-top:0; }
.tag { font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin:0 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin:0 0 18px; }
.card p { margin:0 0 10px; } .card p:last-child { margin-bottom:0; }
.figs { font-weight:600; }
.links a { margin-right:16px; white-space:nowrap; font-weight:600; text-decoration:none; }
.links a:hover { text-decoration:underline; }
.portrait { float:right; width:190px; height:190px; object-fit:cover; border-radius:12px; margin:4px 0 14px 20px; border:3px solid #fff; box-shadow:0 2px 10px rgba(20,40,60,.25); }
.heropic { width:100%; border-radius:10px; display:block; margin:0 0 8px; }
figure { margin:0 0 22px; } figcaption { color:var(--mut); font-size:.95rem; margin-top:6px; }
.slot { border:2px dashed var(--line); border-radius:10px; padding:34px 20px; text-align:center; color:var(--mut); background:#fff; }
dl.backr { margin:0; } dl.backr dt { font-weight:700; margin-top:14px; } dl.backr dd { margin:2px 0 0 0; color:var(--ink); }
footer { max-width:880px; margin:0 auto; padding:0 22px 34px; color:var(--mut); font-size:.92rem; }
.big { font-size:1.08rem; }
.pron { font-size:1.05rem; }
@media (prefers-reduced-motion: reduce) { header.site canvas#binary { display:none; } }

.track { border-top:1px solid var(--line); padding:12px 0 14px; }
.track .t { font-weight:600; }
.track .c { color:var(--mut); }
.track .d { color:var(--mut); font-variant-numeric:tabular-nums; }
.track audio { width:100%; margin-top:6px; }