/* Opus Arcade — document pages (about, privacy, terms, contact, 404).
   Same painted world as arcade.css, laid out as a reading column rather than a
   cabinet room. Standalone: these pages load only this file, so the tokens are
   repeated here instead of imported. */

:root{
  --ink:#141220; --ink-2:#0B0913; --panel:#1D1A2B;
  --edge:rgba(255,255,255,.085); --edge-2:rgba(255,255,255,.16);
  --marquee:#F6EFE2; --text-2:#A9A1BE; --text-3:#6F6885; --token:#FFB020;
  --display:"Avenir Next Condensed","HelveticaNeue-CondensedBold","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --body:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--marquee);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--token);text-underline-offset:2px}
a:hover{color:#FFC23D}
:focus-visible{outline:2px solid var(--token);outline-offset:2px;border-radius:3px}

.rail{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;
  height:58px;padding:0 22px;background:rgba(20,18,32,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--edge);
}
.brand{display:flex;align-items:baseline;gap:8px;font-family:var(--display);
  text-transform:uppercase;text-decoration:none;color:var(--marquee)}
.brand b{font-size:21px;font-weight:700;letter-spacing:.03em}
.brand span{font-size:21px;font-weight:700;letter-spacing:.03em;color:var(--token);
  text-shadow:0 0 18px rgba(255,176,32,.45)}

main{max-width:44rem;margin:0 auto;padding:56px 22px 88px}
h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:34px;font-weight:700;line-height:1.1;margin:0 0 6px}
.sub{color:var(--text-3);font-size:13px;margin:0 0 40px}
h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;font-weight:600;color:var(--token);margin:40px 0 10px}
p,li{color:var(--text-2)}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:20px}
li{margin:0 0 8px}
strong{color:var(--marquee);font-weight:600}
code{background:var(--panel);border:1px solid var(--edge-2);border-radius:4px;
  padding:1px 6px;font-size:.9em}

.lede{font-size:18px;color:var(--marquee)}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:20px 22px;margin:0 0 16px}
.card p:last-child{margin-bottom:0}

footer{border-top:1px solid var(--edge);padding:26px 22px;text-align:center}
footer nav{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:12px}
footer a{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;font-weight:600;color:var(--text-3);text-decoration:none}
footer a:hover{color:var(--token)}
footer .c{color:var(--text-3);font-size:12px}

/* 404 */
.big{text-align:center;padding:80px 22px}
.big .code{font-family:var(--display);font-size:88px;font-weight:700;
  letter-spacing:.04em;color:var(--token);line-height:1;margin:0 0 10px;
  text-shadow:0 0 40px rgba(255,176,32,.35)}
.big h1{margin-bottom:14px}
.btn{display:inline-block;margin-top:10px;background:var(--token);color:#1A1206;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;font-weight:700;padding:11px 22px;border-radius:6px;text-decoration:none}
.btn:hover{background:#FFC23D;color:#1A1206}