/* app/colophon.css — what the thing is made of. Loads AFTER app/pages.css,
   which carries the palette and the shared page chrome. Zero JavaScript.
   Dark by default (the instrument's own register); a light-preference reader
   gets a parchment inversion of the SAME system, so the page is legible in a
   bright room without becoming a different site.

   The two palette blocks below deliberately restate every token, including the
   ones app/pages.css already set: equal specificity, later file wins, so this
   file is the whole truth for a light reader. Keep the link order. */

/* the two palette tokens this page does not share with how.html */
:root{--panel:rgba(18,15,38,.62);--star:rgba(236,233,255,.55)}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f5ef;--panel:#fffdf7;--line:#d9d3c4;--line2:#c3bba6;
    --ink:#1d1a2e;--dim:#5c5570;--pink:#b2237c;--cyan:#0d6f8c;--mint:#136b4c;
    --amber:#8a5a06;--purple:#5b34a6;--star:rgba(29,26,46,.16);
  }
}
:root[data-theme="dark"]{
  --bg:#0c0a1a;--panel:rgba(18,15,38,.62);--line:#2c2750;--line2:#3b3568;
  --ink:#ece9ff;--dim:#9b93c6;--pink:#ff6ec7;--cyan:#45e0ff;--mint:#4dffb0;
  --amber:#ffd86b;--purple:#a06bff;--star:rgba(236,233,255,.55);
}
body{line-height:1.55;
  /* the star field, drawn in CSS: eight seeded-looking gradient layers, no JS,
     no images, no requests. It does not twinkle — a colophon should sit still. */
  background-image:
    radial-gradient(1.4px 1.4px at 18% 12%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 73% 7%, var(--star), transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 34%, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 46%, var(--star), transparent 60%),
    radial-gradient(1.3px 1.3px at 8% 62%, var(--star), transparent 60%),
    radial-gradient(1.1px 1.1px at 57% 78%, var(--star), transparent 60%),
    radial-gradient(1.5px 1.5px at 31% 91%, var(--star), transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 88%, var(--star), transparent 60%);
  background-attachment:fixed;
}
header{padding-bottom:2.4rem}
h1{margin:.6rem 0 .2rem}
.kicker{font-family:Orbitron,sans-serif;font-size:.72rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--amber);margin:0}
.tag{max-width:54ch;margin:.4rem 0 0}
h2{font-family:Orbitron,sans-serif;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:3.4rem 0 .2rem;scroll-margin-top:1rem}
h2 .n{color:var(--pink);margin-right:.55rem}
h3{font-family:Orbitron,sans-serif;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin:1.6rem 0 .2rem}
p{margin:.7rem 0;max-width:64ch}
p b{color:var(--amber);font-weight:400}
p em{color:var(--cyan);font-style:normal}
blockquote{margin:1.2rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--pink);
  color:var(--ink);max-width:62ch}
blockquote p{margin:.35rem 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:1rem 1.2rem;margin:1.4rem 0}
.card h3{margin-top:0}
.law{border-color:var(--line2)}
.law b{color:var(--mint);font-weight:400}
dl{margin:.8rem 0;max-width:66ch}
dt{font-family:Orbitron,sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);margin:1.1rem 0 .1rem}
dd{margin:0 0 .1rem;color:var(--ink)}
dd .lic{color:var(--dim)}
.tier{display:inline-block;font:14px VT323,monospace;letter-spacing:.06em;
  border:1px solid var(--line2);border-radius:999px;padding:0 .5rem;color:var(--dim);
  margin-left:.35rem;vertical-align:1px}
.tier.t1{color:var(--mint);border-color:var(--mint)}
.tier.t2{color:var(--amber);border-color:var(--amber)}
.tier.t3{color:var(--pink);border-color:var(--pink)}
ul{max-width:64ch;padding-left:1.1rem}
li{margin:.3rem 0}
code{font:17px VT323,monospace;color:var(--mint);letter-spacing:.03em}
.h-card{margin:1.2rem 0}
.h-card .p-name{color:var(--ink)}
footer{margin-top:4.5rem}