/* Idle Stories — legal pages. Matches idlestories.com: ink-black night, warm bone serif prose,
   Space Mono instrument labels, spectrum accents, ambient grain + a slow scanline. */
:root {
  --ink:#0A0910; --ink-deep:#060509; --surface:#131019; --surface-2:#1A1622;
  --bone:#E9E4DB; --read:#D8D2C8; --ash:#9C95A8; --ash-dim:#5F596C;
  --line:rgba(233,228,219,0.10); --line-soft:rgba(233,228,219,0.06);
  --mag:#C84B8C; --cyan:#5FB8C9;
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ink); color: var(--bone);
  font-family: var(--serif); font-size: 18px; line-height: 1.66; font-weight: 300;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* Ambient grain + one slow scanline drifting down — the "signal" under everything, as on the site. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: 0.5;
}
body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(200,75,140,0.05), transparent);
  animation: drift 11s linear infinite;
}
@keyframes drift { from { transform: translateY(-160px); } to { transform: translateY(110vh); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body::after { animation: none; opacity: 0; } }

.wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px 96px; position: relative; z-index: 2; }

h1 { font-family: var(--mono); font-weight: 700; font-size: clamp(22px, 4.6vw, 30px); line-height: 1.2;
  letter-spacing: .01em; color: var(--bone); margin: 0 0 6px; }
h2 { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .02em;
  color: var(--bone); margin: 38px 0 8px; }
.brand { font-family: var(--mono); font-weight: 700; letter-spacing: .24em; color: var(--bone); font-size: 22px; }
.sub { font-family: var(--mono); color: var(--ash); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; margin: 0 0 22px; }
.eff { font-family: var(--mono); color: var(--ash-dim); font-size: 12px; letter-spacing: .06em; margin: 0 0 26px; }

p { margin: 0 0 14px; color: var(--read); }
a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(95,184,201,0.28); }
a:hover { color: var(--bone); border-bottom-color: var(--bone); }
strong { color: var(--bone); font-weight: 400; }
ul { padding-left: 20px; } li { margin: 7px 0; color: var(--read); }
code { font-family: var(--mono); color: var(--ash); font-size: 13px; }
hr { border: none; border-top: 1px solid var(--line); margin: 44px 0; }

.card { display: block; padding: 18px 20px; margin: 14px 0; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); }
.card:hover { border-color: rgba(200,75,140,0.4); }
.card h3 { font-family: var(--mono); margin: 0 0 4px; color: var(--bone); font-size: 16px; letter-spacing: .02em; }
.card p { margin: 0; color: var(--ash); font-size: 14px; }

footer { font-family: var(--mono); color: var(--ash-dim); font-size: 12px; letter-spacing: .04em;
  margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
footer a { border-bottom: none; color: var(--ash); }
footer a:hover { color: var(--bone); }