:root{--ground:#d8d3c6;--paper:#f5f0e1;--ink:#23352d;--rule:#57705f;--rust:#9a4632;--gold:#b8892b;
--serif:"Newsreader",Georgia,"Times New Roman",serif;--mono:"IBM Plex Mono","Courier New",monospace}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.5}
a{color:inherit}
.sheet{max-width:820px;margin:28px auto;background:var(--paper);border:1px solid #b9b3a3;box-shadow:0 1px 0 #fff inset,0 12px 40px rgba(0,0,0,.12);padding:0 0 40px}
header{text-align:center;padding:26px 40px 10px;border-bottom:1px solid var(--rule)}
nav{display:flex;justify-content:center;gap:22px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:14px 0 0}
nav a{text-decoration:none;border-bottom:1px dotted currentColor;padding-bottom:2px}
nav a.buy{color:var(--rust)}
.seal{width:210px;height:210px;margin:22px auto 8px;position:relative}
.seal img{position:absolute;inset:30px;width:150px;height:150px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);background:#0b0f1a}
.seal svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.seal svg.ring text{font:600 12.5px var(--mono);letter-spacing:.22em;fill:var(--ink)}
.seal svg.face{position:absolute;inset:30px;width:150px;height:150px;border-radius:50%}
.seal svg.face text{font:600 var(--facesize,28px) var(--mono);letter-spacing:.04em;fill:#f5f0e1}
.seal.graduated svg.ring text{fill:var(--gold)}.seal.graduated img{border-color:var(--gold);box-shadow:0 0 0 6px rgba(184,137,43,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
h1{font:600 30px/1.15 var(--serif);margin:6px 0 4px}
.sub{font:400 15px/1.4 var(--serif);font-style:italic;color:var(--rule);margin:0 0 12px}
.addr{font:500 11px/1.6 var(--mono);letter-spacing:.04em;display:inline-flex;gap:10px;align-items:center;margin-top:6px}
.addr button{border:0;border-bottom:1px dotted currentColor;background:transparent;padding:0;color:var(--rust);font:inherit;letter-spacing:inherit;text-transform:uppercase;cursor:pointer}
section{padding:26px 40px 8px}
h2{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rule);margin:0 0 16px;display:flex;align-items:center;gap:12px}
h2:after{content:"";flex:1;border-top:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 22px}
.stat b{display:block;font:500 22px/1.1 var(--mono);letter-spacing:-.01em}
.stat span{display:block;font:400 13px/1.4 var(--serif);font-style:italic;color:var(--rule);margin-top:4px}
.bar{height:10px;border:1px solid var(--ink);margin:18px 0 6px;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(35,53,45,.08) 6px 7px)}
.bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .8s}
.graduated .bar i{background:var(--gold)}
.fine{font:400 12px/1.5 var(--mono);color:var(--rule)}
p.statement{font-size:21px;line-height:1.45;margin:0 0 10px}
dl{margin:0}dt{font-weight:600;margin-top:14px}dd{margin:4px 0 0;color:#2f4238}
ul.road{list-style:none;padding:0;margin:0;font-family:var(--mono);font-size:13px}
ul.road li{padding:6px 0;border-bottom:1px dotted #b9b3a3}
ul.road li:before{content:"☐ ";color:var(--rule)}ul.road li.done:before{content:"☑ ";color:var(--ink)}
.cta{display:block;width:100%;margin:22px 0 0;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:13px;text-align:center;text-decoration:none;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.cta.rust{background:var(--rust);border-color:var(--rust)}
footer{padding:26px 40px 0;font:400 11px/1.6 var(--mono);color:var(--rule);text-align:center}
.bell{display:none;text-align:center;font:600 13px var(--mono);letter-spacing:.2em;color:var(--gold);padding:10px 0 0}
.graduated .bell{display:block}
/* hub */
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:10px 8px;border-bottom:1px dotted #b9b3a3;text-align:left;vertical-align:middle}
th{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rule)}
td img{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);vertical-align:middle;margin-right:10px;background:#0b0f1a}
td .m{font:500 12px var(--mono)}
.mini{height:6px;border:1px solid var(--ink);width:120px;display:inline-block;vertical-align:middle}.mini i{display:block;height:100%;background:var(--ink);width:0}
@media (max-width:640px){section,header,footer{padding-left:20px;padding-right:20px}h1{font-size:24px}.sheet{margin:0;border:0}}