/* Layout after doom2.net/av: fixed column, flat translucent panels, 8px padding,
   square corners, one accent, no gradients. */
:root {
  --bg:#101010; --panel:rgba(0,0,0,.55); --panel2:rgba(0,0,0,.35);
  --edge:#0c0c0c; --rule:#2a2a2a;
  --ink:#b9b9b9; --dim:#8c8c8c; --faint:#646464;
  --accent:#ff9100;  /* the '2' in the wordmark (user 2026-08-18; was #d03401 red) */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Helvetica,Arial,system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
p { margin:0 0 10px; }
p:last-child { margin-bottom:0; }
b { color:#d8d8d8; }

.main { width:1200px; max-width:100%; margin:0 auto; padding:0 8px; }

.titlebar { background:#000; padding:6px 8px; display:flex; align-items:baseline;
  gap:10px; }
.titlebar a { color:#fff; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.titlebar a b { color:var(--accent); font-weight:700; }
.titlebar a:hover { text-decoration:none; }
.titlebar span { color:var(--faint); font-size:12px; }

.navbar { background:#000; padding:0 8px 8px; display:flex; gap:18px;
  overflow-x:auto; }
.navbar a { color:var(--accent); font-size:17px; white-space:nowrap; }
.navbar a.on { color:#fff; }

.cols { display:flex; gap:80px; align-items:flex-start; margin-top:8px; }
.side { width:450px; flex:none; }
.mainc { width:660px; flex:none; }

.box { background:var(--panel); border:1px solid var(--edge); padding:8px;
  margin-bottom:8px; }
.phead { text-align:center; color:var(--faint); font-size:18px; padding:2px 0; }
.box hr { border:0; border-top:1px solid var(--rule); margin:4px 0 12px; }
.fine { color:var(--faint); font-size:12.5px; }
code { font-family:var(--mono); font-size:12px; color:#d8d8d8; }

.banner { padding:8px; line-height:0; }
.shots figure { margin:0 0 14px; }
.shots img { width:100%; height:auto; display:block; border:1px solid var(--edge);
  image-rendering:pixelated; }
.shots figcaption { color:var(--faint); font-size:12.5px; padding:5px 2px 0; }
.shots figcaption b { color:#d8d8d8; margin-right:6px; }
.banner img { width:100%; height:auto; display:block; }

/* intro + stats */
.intro .lede { color:var(--dim); }
.stats { display:flex; flex-wrap:wrap; border:1px solid var(--edge);
  background:var(--panel2); margin-top:10px; }
.stats div { flex:1 1 140px; padding:8px 10px; border-right:1px solid var(--edge); }
.stats div:last-child { border-right:0; }
.stats b { display:block; font-family:var(--mono); font-size:20px;
  color:var(--accent); }
.stats span { font-size:11px; color:var(--faint); text-transform:uppercase;
  letter-spacing:.08em; }
.stats .ph { font-size:13px; }
.ph { font-family:var(--mono); font-size:.9em; color:var(--accent);
  border:1px dashed rgba(208,52,1,.5); padding:0 5px; white-space:nowrap; }

/* news */
.entry { margin-bottom:18px; }
.entry:last-child { margin-bottom:0; }
.entry h3 { margin:0; font-size:16px; color:var(--accent); font-weight:700; }
.entry h4 { margin:2px 0 4px; font-size:14px; color:#d8d8d8; font-weight:700; }
.entry p { color:var(--dim); margin:0; }

/* role list in the margin */
.rolelist a { display:flex; align-items:baseline; gap:8px; padding:4px 6px;
  border-bottom:1px solid var(--edge); color:var(--ink); }
.rolelist a:hover { background:var(--panel2); text-decoration:none; }
.rolelist a.here { background:var(--panel2); }
.rolelist a.here .rn { color:var(--accent); }
.rolelist .rn { font-family:var(--mono); font-size:13px; color:#d8d8d8;
  flex:none; min-width:130px; }
.rolelist .rs { color:var(--faint); font-size:12px; flex:1; }
.rolelist .rl { color:var(--faint); font-family:var(--mono); font-size:11.5px;
  flex:none; }
.rolelist.cast .rs { color:var(--dim); }
.rolelist + .fine { margin-top:8px; }

/* all-roles cards */
.rcards { margin-top:4px; }
.rcard { display:flex; align-items:baseline; gap:10px; padding:6px;
  border-bottom:1px solid var(--edge); color:var(--ink); }
.rcard:hover { background:var(--panel2); text-decoration:none; }
.tag { font-family:var(--mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--faint); flex:none; min-width:74px; }
.rcard .rn { font-family:var(--mono); font-size:14px; color:#d8d8d8; flex:1;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.rcard .rl { color:var(--faint); font-family:var(--mono); font-size:11.5px;
  flex:none; }

/* role page */
.full { color:var(--faint); font-size:13px; margin:-4px 0 10px; }
.factsrow { display:flex; gap:14px; align-items:flex-start; margin:0 0 12px; }
.factsrow table.facts { flex:1; margin:0; }
.portraits { display:flex; flex-direction:column; gap:8px; flex:none; }
img.portrait { display:block; width:96px; height:96px;
  image-rendering:pixelated; border:1px solid var(--edge); }
img.portrait.cine { width:160px; height:160px; image-rendering:auto; }
p.grp { margin:10px 0 2px; font-size:.72rem; letter-spacing:.14em;
  color:var(--dim); }
table.facts, table.spec { width:100%; border-collapse:collapse; margin:0 0 12px; }
table.facts th, table.spec th { text-align:left; vertical-align:top;
  color:var(--faint); font-weight:400; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; padding:4px 10px 4px 0; white-space:nowrap; width:1%; }
table.facts td, table.spec td { vertical-align:top; padding:4px 0;
  color:var(--dim); border-bottom:1px solid var(--edge); }
table.spec td { padding:6px 0; }

/* pronunciation sheet */
table.pron { width:100%; border-collapse:collapse; margin:2px 0 12px; }
table.pron td { vertical-align:top; padding:4px 0; border-bottom:1px solid var(--edge); }
table.pron .pname { font-family:var(--mono); font-size:13px; color:#d8d8d8;
  white-space:nowrap; padding-right:14px; width:1%; }
table.pron .psay { color:var(--dim); white-space:nowrap; padding-right:14px;
  width:1%; }
table.pron .pnote { color:var(--faint); font-size:12.5px; }
p.note { border-left:2px solid var(--accent); padding:0 0 0 10px;
  color:var(--dim); }
p.note b { color:var(--accent); font-weight:700; }
.pn { display:flex; justify-content:space-between; gap:10px;
  border:1px solid var(--edge); background:var(--panel); padding:8px; }

/* audition lines */
ol.lines { list-style:none; margin:0; padding:0; }
ol.lines li { border:1px solid var(--edge); background:var(--panel2);
  padding:8px; margin-bottom:6px; }
.lnhead { display:flex; align-items:center; gap:10px; }
.play { flex:none; width:26px; height:22px; cursor:pointer; padding:0;
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  font-size:10px; line-height:1; }
.play:hover, .play.playing { background:var(--accent); color:#000; }
.prog { flex:1; height:2px; background:var(--rule); overflow:hidden; }
.prog i { display:block; height:100%; width:0; background:var(--accent); }
.budget { font-family:var(--mono); font-size:11.5px; color:var(--faint);
  flex:none; }
.lines .en { margin:8px 0 0; color:#d8d8d8; font-size:14.5px; }
.lines .jp { margin:4px 0 0; color:var(--faint); font-size:13px; }

/* steps + faq */
ol.steps { margin:0 0 10px; padding-left:20px; color:var(--dim); }
ol.steps li { margin-bottom:8px; }
dl.faq { margin:0; }
dl.faq dt { color:#d8d8d8; font-weight:700; margin-top:12px; }
dl.faq dt:first-child { margin-top:0; }
dl.faq dd { margin:2px 0 0; color:var(--dim); }

/* footer */
.footer { background:#000; padding:14px 10px 16px;
  margin-top:8px; display:flex; gap:32px; color:var(--faint); font-size:12.5px;
  line-height:1.55; }
.footer .fcol { flex:1; }
.footer .fcol:last-child { flex:1.7; }
.footer b { display:block; color:#d8d8d8; margin-bottom:3px; }

@media (max-width:1120px) {
  .cols { gap:24px; }
  .side, .mainc { width:auto; flex:1 1 0; }
}
@media (max-width:820px) {
  /* news leads on a phone; the role list follows it */
  .cols { display:flex; flex-direction:column; gap:0; }
  .side, .mainc { width:auto; }
  .mainc { order:1; }
  .side { order:2; }
  .footer { display:block; }
  .footer .fcol { margin-bottom:10px; }
  .rolelist .rn { min-width:110px; }
}