@font-face{font-family:'Courier Prime';src:url(cp-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url(cp-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* blue on warm: warm paper-white typewriter type on near-black, shark blue for headings and accents */
:root{color-scheme:dark;--bg:#0e0d0b;--ink:#e6dfcf;--mute:#7c766b;--blue:#8fb6ec;--rule:#2c3442}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.7 'Courier Prime','Courier New',monospace;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
::selection{background:var(--blue);color:var(--bg)}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));background:var(--bg)}
.home{display:block}
.home img{width:36px;height:auto;display:block}
.top nav{display:flex;gap:20px}
.top nav a{text-decoration:none;color:var(--mute);text-underline-offset:4px;transition:color .2s}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--blue);text-decoration:underline}

main{max-width:600px;margin:0 auto;padding:12px max(22px,env(safe-area-inset-right,0px)) 90px max(22px,env(safe-area-inset-left,0px))}
h1{margin:0 0 18px;font:700 15px 'Courier Prime',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--blue)}
p{margin:0 0 1em;text-wrap:pretty}
.sig{margin-top:1.6em}
.sig img{display:block;width:min(110px,30vw);height:auto}

/* inquiry: a boxed 1996 order form */
.order{margin-top:34px;border:1.5px solid var(--ink)}
.order .hd{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1.5px solid var(--ink);font-weight:700;font-size:clamp(9.5px,2.7vw,12px);letter-spacing:.12em;white-space:nowrap}
.order .hd span:last-child{color:var(--mute);font-weight:400}
.order .g{display:grid;grid-template-columns:1fr 1fr}
.order .cell{display:block;margin:0;border-bottom:1px solid var(--ink);padding:7px 10px 9px;min-width:0}
.order .cell+.cell{border-left:1px solid var(--ink)}
.order .full{grid-column:1/-1;border-left:0!important}
.order small{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.order .opt{text-transform:none;letter-spacing:.04em}
input,textarea{width:100%;background:transparent;border:0;color:var(--ink);font:400 16px 'Courier Prime',monospace;padding:4px 0 2px;border-radius:0;outline:none}
textarea{resize:vertical;line-height:1.6;min-height:6.6em}
input::placeholder{color:#4a463f}
.order .cell:focus-within small{color:var(--blue)}
.order .err{display:block;font-style:normal;font-size:12px;color:#e0574c}
.order .err:empty{display:none}
.order .bad small{color:#e0574c}
.order .ft{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px}
.order .ft small{white-space:nowrap}
@media (max-width:480px){.order .g{grid-template-columns:1fr}.order .cell+.cell{border-left:0}}
button.send{background:transparent;color:var(--blue);border:1.5px solid var(--blue);font:700 13px 'Courier Prime',monospace;text-transform:uppercase;letter-spacing:.14em;padding:11px 26px;cursor:pointer;transition:background .2s,color .2s}
button.send:hover,button.send:focus-visible{background:var(--blue);color:var(--bg)}
.alt{margin-top:26px;color:var(--mute)}
.alt a{color:var(--blue);text-underline-offset:3px}
.sent{margin-top:34px;border-top:1px dashed var(--rule);padding-top:30px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.fail{margin-top:18px;color:#e0574c}
.fail a{color:var(--blue)}
button.send:disabled{opacity:.6;cursor:default}