:root{
  --paper:#F3EEE4; --card:#FFFDF8; --ink:#1E1A16; --ink-2:#5E554C; --ink-3:#8D8377; --rule:#CDBFAA; --nut:#8C3A22;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 17px/1.55 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--ink)}
.wrap{max-width:760px;margin:0 auto;padding:28px 20px 64px}
.top{display:flex;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.wordmark{font:italic 800 23px/1 "Archivo",system-ui,sans-serif;letter-spacing:-.02em}
.wordmark b{color:var(--nut)}
.hero{padding:56px 0 34px}
.hero h1{font:800 clamp(34px,6vw,56px)/1.02 "Archivo",system-ui,sans-serif;letter-spacing:-.03em;max-width:14ch}
.lead{margin:20px 0 28px;max-width:52ch;color:var(--ink-2)}
.cta{display:inline-block;padding:14px 20px;background:var(--ink);color:var(--card);text-decoration:none;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px;border:1px solid var(--ink)}
.cta:hover{background:var(--nut);border-color:var(--nut)}
.ticket{position:relative;display:grid;grid-template-columns:96px 1fr;max-width:420px;background:var(--card);border:1px solid var(--ink);margin:6px 0 48px}
.ticket::before,.ticket::after{content:"";position:absolute;left:88px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1px solid var(--ink)}
.ticket::before{top:-9px;clip-path:inset(50% 0 0 0)}
.ticket::after{bottom:-9px;clip-path:inset(0 0 50% 0)}
.stub{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1.5px dashed var(--ink);padding:14px 4px}
.val{font:900 30px/1 "Archivo",system-ui,sans-serif;letter-spacing:-.02em}
.unit{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.body{padding:14px 14px 15px}
.desc{font-size:15px;margin-bottom:10px}
.coderow{display:flex;gap:8px}
.code{flex:1;font:600 15px/1 ui-monospace,"IBM Plex Mono",Menlo,monospace;letter-spacing:.06em;padding:10px;border:1px dashed var(--ink-2);background:var(--paper)}
.copy{padding:10px 14px;background:var(--ink);color:var(--card);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--ink)}
.how div{padding:18px 16px 20px 0}
.n{font:600 13px ui-monospace,"IBM Plex Mono",Menlo,monospace;color:var(--nut)}
.how p{margin-top:6px;font-size:15px;color:var(--ink-2)}
.foot{margin-top:44px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-3)}
.foot p+p{margin-top:4px}
.doc h1{font:800 38px/1.1 "Archivo",system-ui,sans-serif;letter-spacing:-.02em;margin:40px 0 6px}
.doc .meta{color:var(--ink-3);font-size:14px;margin-bottom:24px}
.doc h2{font:800 20px/1.2 "Archivo",system-ui,sans-serif;margin:30px 0 8px}
.doc p,.doc li{margin-bottom:8px;max-width:66ch}
.doc ul{padding-left:20px}
.doc code{font:14px ui-monospace,Menlo,monospace;background:var(--card);padding:1px 4px;border:1px solid var(--rule)}