/* Ink, brass, editorial type. Native scroll; motion only on a visible screen entry. */
:root{color-scheme:dark;--bg:#100f12;--ink:#f2ede3;--muted:#b5ada1;--gold:#e8c783;--line:#39332b;--panel:#19171a}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--ink);font-family:Verdana,Arial,sans-serif}
body{margin:0;min-height:100svh}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;min-height:48px}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.masthead{max-width:960px;margin:auto;padding:24px clamp(20px,5vw,48px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.masthead a{font-size:23px;font-weight:bold;letter-spacing:-1px;text-decoration:none}
.masthead a span{color:var(--gold)}
.edition,.eyebrow{font:11px/1.6 'Courier New',monospace;letter-spacing:1.6px;color:var(--gold)}
#app{max-width:960px;margin:auto}
.screen{display:none;padding:36px clamp(24px,6vw,48px) 44px;max-width:640px;margin:auto;min-height:65svh}
.screen.active{display:flex;flex-direction:column;align-items:stretch;gap:16px;animation:arrive 180ms ease-out}
@keyframes arrive{from{opacity:.6;transform:translateY(5px)}to{opacity:1;transform:none}}
h1,h2,p{margin:0}
h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;overflow-wrap:anywhere}
h1{font-size:clamp(42px,7vw,70px);line-height:1.02;letter-spacing:-2px;margin:8px 0}
h1 em{color:var(--gold);font-weight:400}
h2{font-size:clamp(28px,4vw,38px);line-height:1.18}
p{font-size:14px;line-height:1.65}
.intro{max-width:400px;font-size:16px;color:var(--muted)}
.muted,.fineprint{font-size:12px;line-height:1.65;color:var(--muted)}
.sample{border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px;margin:8px 0 4px;max-width:420px;background:var(--panel);transform:rotate(-1deg)}
.sample h2{font-size:29px;margin:14px 0 10px}
.sample p{font-family:Georgia,serif;font-size:18px}
.sample-stamp{display:inline-block;border:1px solid var(--gold);color:var(--gold);font:11px 'Courier New',monospace;letter-spacing:2px;padding:7px 10px;margin-top:20px}
.quota-pill{color:var(--gold);font-size:13px}
.code-row{display:flex;flex-direction:column;gap:8px;margin:8px 0;width:100%}
.code-row .name-input{padding:14px 16px;font-family:'Courier New',monospace;letter-spacing:1px;font-size:18px}
.cta,.ghost,.opt,.history-entry,.name-input{width:100%;border-radius:8px;border:1px solid var(--line);padding:16px 20px}
.cta{background:var(--gold);color:#17130d;border-color:var(--gold);font-weight:bold}
.cta:active,.ghost:active{transform:translateY(1px)}
.ghost,.history-entry{background:var(--panel);color:var(--ink)}
.text-button{background:none;color:var(--muted);border:0;padding:12px 0;font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:4px}
#card-title{margin-bottom:8px}
button:disabled{opacity:.45;cursor:not-allowed}
.quiz-top{display:flex;gap:14px;align-items:center}
.quiz-top .text-button{margin-left:auto}
.quiz-back{width:48px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:22px;flex-shrink:0}
#quiz-progress{font:13px 'Courier New',monospace;color:var(--gold);white-space:nowrap}
progress{width:100%;height:4px;border:0;appearance:none;background:var(--line)}
progress::-webkit-progress-bar{background:var(--line)}
progress::-webkit-progress-value{background:var(--gold)}
progress::-moz-progress-bar{background:var(--gold)}
.q-text{margin:14px 0 2px}
.opts{display:grid;gap:10px}
.opt{background:var(--panel);color:var(--ink);text-align:left;font-size:14px;line-height:1.5;min-height:62px}
.opt[aria-pressed=true]{border-color:var(--gold);background:#30281d;box-shadow:inset 3px 0 var(--gold)}
#btn-skip[aria-pressed=true]{color:var(--gold);text-decoration-thickness:3px}
label{font-size:13px;color:var(--muted)}
.name-input{background:var(--panel);color:var(--ink);font-size:18px}
.card-holder{width:100%;max-width:380px;align-self:center;border:1px solid var(--line);overflow:hidden;border-radius:8px}
#card-canvas{display:block;width:100%;height:auto}
@keyframes thunk{0%{transform:scale(1.06) rotate(1.6deg);opacity:.4}55%{transform:scale(.985) rotate(-.5deg);opacity:1}100%{transform:none;opacity:1}}
#card-canvas.thunk{animation:thunk 240ms cubic-bezier(.2,.9,.3,1.2)}
.q-text::after{content:'▌';color:var(--gold);animation:caret 830ms steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(max-height:900px){
 .card-holder{max-width:280px}
 #screen-card{padding-top:24px;gap:12px}
 #screen-card .card-actions{margin-top:2px}
}
.card-actions{display:grid;gap:10px}
details{font-size:13px;line-height:1.7;color:var(--muted)}
summary{padding:12px 0;cursor:pointer;min-height:48px}
#history-list{display:grid;gap:12px}
.history-entry{text-align:left;line-height:1.5}
.notice{border-left:3px solid var(--gold);padding:16px;background:var(--panel)}
footer{max-width:960px;padding:24px clamp(20px,5vw,48px) max(24px,env(safe-area-inset-bottom));margin:auto;border-top:1px solid var(--line);font:11px/1.9 'Courier New',monospace;color:var(--muted)}
.toast{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;background:var(--ink);color:var(--bg);font-size:13px;line-height:1.5;border-radius:8px;opacity:0;pointer-events:none;z-index:10}
.toast.show{opacity:1}
@media(min-width:800px){#screen-home{max-width:none;display:none;grid-template-columns:1.2fr 1fr;column-gap:48px}#screen-home.active{display:grid}#screen-home>*{grid-column:1}.sample{grid-column:2!important;grid-row:2/9;align-self:center;transform:rotate(3deg);padding:32px}.sample h2{font-size:38px}.fineprint{grid-column:1/-1!important}}
@media(max-width:360px){.edition{font-size:9px;letter-spacing:.6px}.masthead{padding:18px 20px}.screen{padding-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sample{transform:none!important}.q-text::after{content:none}}