/* Self-hosted faces (SIL OFL 1.1, from @fontsource). Same faces as the app's Trifold theme. */
@font-face{font-family:'IM Fell English SC';src:url(/assets/fonts/im-fell-english-sc-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(/assets/fonts/im-fell-english-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(/assets/fonts/im-fell-english-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url(/assets/fonts/crimson-pro-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url(/assets/fonts/crimson-pro-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url(/assets/fonts/crimson-pro-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Crimson Pro';src:url(/assets/fonts/crimson-pro-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Almendra SC';src:url(/assets/fonts/almendra-sc-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Marcellus';src:url(/assets/fonts/marcellus-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* WyrmWright website. Layout: the website is the Trifold board. Oak table under one lamp, a lacquered cover as the top bar,
   cream paper cards with brass corner guards laid on the table. Tokens are the app's Trifold values. */
:root{
  --board:#3a2718; --rail:#1c0d0b; --rail-edge:#3a1c17;
  --tile:#eee1c3; --tile-hover:#f7edd6; --tile-edge:#dccaa3;
  --tile-line:#c4a97c; --tile-line-strong:#8a6a42;
  --ink:#2c1d12; --ink-muted:#5c4630; --ink-faint:#75604a;
  --panel-ink:#eee1c3; --panel-ink-muted:#c9b08a; --panel-ink-faint:#9f8a68;
  --live:#8f2519; --live-soft:#e6c9b1;
  --chosen:#c9a24a; --on-chosen:#3a2a0c; --brass-hi:#f0d78a; --brass-lo:#8e6c22;
  --felt:#24493a; --felt-hi:#2c5a47; --felt-lo:#1a382c; --felt-ink:#efe3c6;
  --ledger-rule:#aab8c066; --margin-rule:#c9584a8c; --cover-gilt:#c9a45c;
  --brass: linear-gradient(160deg,#f0d78a 0%,#c9a24a 30%,#8e6c22 55%,#d9b95c 80%,#a5822f 100%);
  --paper: radial-gradient(ellipse 900px 700px at 120px -100px, var(--tile-hover) 0%, var(--tile) 45%, var(--tile-edge) 100%);
  --card-shadow: 3.8px 9.6px 27px -6px rgba(0,0,0,.65), .7px 1.9px 4px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.55) inset, 0 -1px 0 rgba(120,80,40,.28) inset;
  --f-display:'IM Fell English SC','IM Fell English',Georgia,serif;
  --f-display-ital:'IM Fell English',Georgia,serif;
  --f-body:'Crimson Pro',Georgia,serif;
  --f-num:'Almendra SC','Almendra',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Menlo,monospace;
  --f-word:'Marcellus','IM Fell English SC',Georgia,serif;
  color-scheme: light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;z-index:40;background:var(--tile);color:var(--ink);padding:8px 14px;border-radius:2px}
.skip:focus{left:16px}
.card table{color:var(--ink)}
html,body{background:var(--board)}
body{margin:0;color:var(--panel-ink);font-family:var(--f-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--rail)}
.oak{position:fixed;inset:0;z-index:0;pointer-events:none}
.oak svg{position:absolute;inset:0;width:100%;height:100%}
.lamp{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 1100px 800px at 30% -60px,rgba(255,196,110,.26) 0%,rgba(255,196,110,0) 60%),radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.seams{position:fixed;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 258px,#120b06 258px 260.5px,rgba(255,220,170,.10) 260.5px 261.3px,transparent 261.3px 262px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- The cover (site header) ---------- */
.cover{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:radial-gradient(ellipse at 20% 0%,#3a1a14 0%,var(--rail) 60%,#0e0605 100%);box-shadow:0 10px 26px -6px rgba(0,0,0,.95)}
.cover::before{content:"";position:absolute;inset:6px;border:1px solid var(--cover-gilt);opacity:.8;pointer-events:none}
.cover::after{content:"";position:absolute;inset:10px;border:1px solid var(--cover-gilt);opacity:.4;pointer-events:none}
.cover .wrap{display:flex;align-items:center;gap:20px;padding-block:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cover-gilt)}
.brand svg{width:40px;height:40px;flex-shrink:0}
.brand span{font-family:var(--f-word);font-size:20px;letter-spacing:.14em}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:32px;padding:0 14px;text-decoration:none;color:var(--panel-ink-muted);font-size:16px;border-radius:2px}
.nav a:hover{background:var(--rail-edge);color:var(--panel-ink)}
.nav a[aria-current="page"]{background:var(--brass);color:var(--on-chosen);font-weight:700;text-shadow:0 1px 0 rgba(255,240,200,.45);box-shadow:inset 0 1px 0 rgba(255,245,210,.6),inset 0 -1px 0 rgba(60,40,0,.5),0 1px 2px rgba(0,0,0,.6);position:relative;padding:0 16px}
.nav a[aria-current="page"]::before,.nav a[aria-current="page"]::after{content:"";position:absolute;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#8a6a20 70%)}
.nav a[aria-current="page"]::before{left:4px}.nav a[aria-current="page"]::after{right:4px}

/* ---------- Cards ---------- */
.card{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--tile-line-strong);border-radius:2px;box-shadow:var(--card-shadow);min-width:0}
.card .grain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.16;mix-blend-mode:multiply}
.guard{position:absolute;width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));pointer-events:none}
.guard.tl{top:-1px;left:-1px}.guard.tr{top:-1px;right:-1px;transform:rotate(90deg)}
.guard.br{bottom:-1px;right:-1px;transform:rotate(180deg)}.guard.bl{bottom:-1px;left:-1px;transform:rotate(270deg)}
.card-head{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 18px 0 20px;position:relative}
.card-head h2,.card-head h3{margin:0;font-family:var(--f-display);font-weight:400;font-size:19px;line-height:1;color:var(--ink);letter-spacing:.02em}
.card-head .ic{width:16px;height:16px;color:var(--ink-muted);flex-shrink:0}
.card-head .meta{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-faint)}
.rule{display:block;height:2px;margin:0 20px;background:var(--brass);box-shadow:0 1px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,240,200,.35)}
.card-body{padding:14px 20px 20px;position:relative}
.card p{margin:0 0 10px;max-width:62ch}
.card p:last-child{margin-bottom:0}
.muted{color:var(--ink-muted)}
.eyebrow{font-family:var(--f-display);font-size:13px;letter-spacing:.08em;color:var(--ink-faint)}
.eyebrow.live{color:var(--live)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;font-family:var(--f-body);font-size:15px;font-weight:600;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid var(--tile-line);background:var(--tile-hover);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.btn:hover{border-color:var(--tile-line-strong)}
.btn.brass{background:var(--brass);color:var(--on-chosen);border-color:var(--tile-line-strong);text-shadow:0 1px 0 rgba(255,240,200,.45);box-shadow:inset 0 1px 0 rgba(255,245,210,.6),inset 0 -1px 0 rgba(60,40,0,.5),0 1px 2px rgba(0,0,0,.5)}
.btn.lg{height:44px;padding:0 22px;font-size:16.5px}
.btn[aria-disabled="true"]{opacity:.55;cursor:default}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-family:var(--f-mono);font-size:11.5px;border:1px solid var(--tile-line);border-radius:2px;color:var(--ink-muted);background:rgba(255,250,235,.4);white-space:nowrap}
.chip.live{color:var(--live);border-color:var(--live);background:var(--live-soft)}
.chip.ok{color:var(--felt);border-color:var(--felt)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Page sections */
main{position:relative;z-index:1;padding-block:36px 64px;display:block}
.view{display:flex;flex-direction:column;gap:36px}
.tablelabel{font-family:var(--f-display);font-size:15px;letter-spacing:.1em;color:var(--panel-ink-muted);display:flex;align-items:center;gap:12px;margin:0}
.tablelabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cover-gilt),transparent);opacity:.6}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.note{font-family:var(--f-mono);font-size:12px;color:var(--panel-ink-faint);border:1px dashed rgba(201,164,92,.45);padding:10px 14px;border-radius:2px;background:rgba(14,6,5,.35)}
.note b{color:var(--cover-gilt);font-weight:500}

/* ---------- Home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.cover-card{position:relative;padding:44px 40px 40px;background:radial-gradient(ellipse at 30% 10%,#3a1a14 0%,var(--rail) 55%,#0e0605 100%);color:var(--panel-ink);box-shadow:10px 14px 30px -6px rgba(0,0,0,.95);border-radius:2px}
.cover-card::before{content:"";position:absolute;inset:10px;border:1px solid var(--cover-gilt);opacity:.85;pointer-events:none}
.cover-card::after{content:"";position:absolute;inset:14px;border:1px solid var(--cover-gilt);opacity:.45;pointer-events:none}
.cover-card .flour{position:absolute;width:18px;height:18px;color:var(--cover-gilt)}
.cover-card h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.6vw,52px);line-height:1.05;margin:14px 0 16px;color:var(--panel-ink);text-wrap:balance}
.cover-card p{color:var(--panel-ink-muted);font-size:18.5px;max-width:46ch;margin:0 0 24px}
.cover-card .divider{display:flex;align-items:center;gap:8px;width:140px}
.cover-card .divider span{flex:1;height:1px;background:var(--cover-gilt)}
.cover-card .divider i{width:5px;height:5px;transform:rotate(45deg);background:var(--cover-gilt)}
.cover-card .eyebrow{color:var(--cover-gilt)}
.cover-card .btn:not(.brass){background:transparent;color:var(--panel-ink);border-color:var(--cover-gilt)}
.cover-card .fine{margin-top:18px;font-family:var(--f-mono);font-size:12px;color:var(--panel-ink-faint)}

.spread{position:relative;min-height:440px}
.spread>.card{position:absolute}
.s-init{left:0;top:10px;width:64%;transform:rotate(-1.4deg)}
.s-dice{right:0;top:0;width:44%;transform:rotate(1.8deg);z-index:2}
.s-timer{right:4%;bottom:0;width:50%;transform:rotate(-.6deg);z-index:3}
.ledger{margin:0 10px 10px;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--ledger-rule) 31px 32px),linear-gradient(90deg,transparent 0 34px,var(--margin-rule) 34px 35px,transparent 35px);border-top:1px solid var(--tile-line)}
.ledger div{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;font-size:15.5px;font-variant-numeric:tabular-nums}
.ledger .n{width:20px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-faint);text-align:right}
.ledger .who{font-weight:600;flex:1}
.ledger .ac{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-faint)}
.ledger .acting{background:var(--live-soft)}
.ledger .acting .n{color:var(--live);font-weight:700}
.felt{margin:12px 14px 14px;height:132px;border-radius:2px;border:1px solid #0d2219;background:radial-gradient(ellipse at 40% 30%,var(--felt-hi) 0%,var(--felt) 50%,var(--felt-lo) 100%);display:grid;place-items:center;color:var(--felt-ink);box-shadow:inset 0 2px 10px rgba(0,0,0,.5)}
.felt b{font-family:var(--f-num);font-size:72px;line-height:1;font-weight:700}
.felt small{display:block;text-align:center;font-family:var(--f-mono);font-size:11px;opacity:.75;margin-top:-4px}
.dicechips{display:flex;gap:4px;padding:12px 14px 0;flex-wrap:wrap}
.dicechips .chip{height:24px}
.dicechips .on{background:var(--tile-edge);border-color:var(--tile-line-strong);color:var(--ink)}
.timer{display:flex;align-items:center;gap:16px;padding:12px 20px 18px}
.timer b{font-family:var(--f-num);font-size:40px;color:var(--live);line-height:1;font-variant-numeric:tabular-nums}
.timer .seal{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#c4432f,var(--live) 55%,#4e120b);box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,200,180,.4);flex-shrink:0}

.feat .card-body{padding-top:12px}
.feat p{font-size:16.5px}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:0}
.principles>div{padding:18px 20px;border-left:1px solid var(--tile-line)}
.principles>div:first-child{border-left:0}
.principles h3{font-family:var(--f-display);font-weight:400;font-size:19px;margin:0 0 6px}
.principles p{font-size:16px;margin:0;color:var(--ink-muted)}

.diagram{overflow-x:auto}
.diagram svg{display:block;min-width:640px;width:100%;max-width:900px;height:auto;margin:0 auto}

.footer{position:relative;z-index:1;background:linear-gradient(180deg,rgba(14,6,5,.0),rgba(14,6,5,.85) 30%);padding-block:48px 40px;color:var(--panel-ink-faint);font-size:14.5px}
.footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:24px;margin-bottom:28px}
.footer h4{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.08em;color:var(--cover-gilt);margin:0 0 8px}
.footer a{display:block;text-decoration:none;color:var(--panel-ink-muted);padding:2px 0}
.footer a:hover{color:var(--panel-ink)}
.footer .legal{border-top:1px solid var(--rail-edge);padding-top:18px;font-size:13px;line-height:1.55;max-width:90ch}

/* ---------- Guides ---------- */
.guides{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start}
.grail{position:sticky;top:96px;background:radial-gradient(ellipse at 30% 10%,#3a1a14 0%,var(--rail) 55%,#0e0605 100%);padding:22px 18px 22px 14px;border-radius:2px;box-shadow:10px 0 26px -6px rgba(0,0,0,.95)}
.grail::before{content:"";position:absolute;inset:8px;border:1px solid var(--cover-gilt);opacity:.7;pointer-events:none}
.grail label{display:block;font-family:var(--f-mono);font-size:11px;color:var(--panel-ink-faint);margin:0 6px 6px}
.grail input{width:100%;height:32px;background:rgba(0,0,0,.35);border:1px solid var(--rail-edge);color:var(--panel-ink);font-family:var(--f-body);font-size:15px;padding:0 10px;border-radius:2px;margin-bottom:14px}
.grail h4{font-family:var(--f-display);font-weight:400;font-size:13.5px;letter-spacing:.1em;color:var(--cover-gilt);margin:14px 6px 4px}
.grail a{display:block;padding:5px 8px;font-size:15.5px;text-decoration:none;color:var(--panel-ink-muted);border-radius:2px}
.grail a:hover{background:var(--rail-edge);color:var(--panel-ink)}
.grail a.on{background:var(--brass);color:var(--on-chosen);font-weight:700}
.article{padding-bottom:8px}
.article .card-body{padding:22px 34px 30px}
.article h1{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3.6vw,40px);margin:6px 0 6px;line-height:1.1;text-wrap:balance}
.article .lead{font-style:italic;color:var(--ink-muted);font-size:18px;margin-bottom:18px}
.article h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:26px 0 8px}
.article ol{padding-left:22px;margin:0 0 12px;max-width:62ch}
.article li{margin-bottom:6px}
.article kbd,.article code{font-family:var(--f-mono);font-size:13px;background:rgba(196,169,124,.25);border:1px solid var(--tile-line);padding:1px 5px;border-radius:2px}
.callout{border-left:3px solid var(--chosen);background:rgba(201,162,74,.12);padding:10px 14px;margin:14px 0;max-width:62ch;font-size:16px}
.figure{margin:16px 0;border:1px solid var(--tile-line);background:repeating-linear-gradient(45deg,rgba(196,169,124,.12) 0 8px,transparent 8px 16px);height:180px;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--ink-faint);max-width:620px}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--tile-line);margin-top:24px;padding-top:14px;font-size:15px}
.pager a{text-decoration:none;color:var(--ink-muted)}
.pager a b{display:block;color:var(--ink);font-weight:600}
.crumbs{font-family:var(--f-mono);font-size:12px;color:var(--ink-faint)}
.gindex .card-body{display:flex;flex-direction:column;gap:6px}
.gindex a{text-decoration:none;color:var(--ink);font-size:16px;display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(196,169,124,.5)}
.gindex a:last-child{border-bottom:0}
.gindex a span{font-family:var(--f-mono);font-size:11px;color:var(--ink-faint);white-space:nowrap}

/* ---------- Players / downloads ---------- */
.pagehead{display:flex;flex-direction:column;gap:10px;max-width:760px}
.pagehead h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4.4vw,48px);line-height:1.05;margin:0;color:var(--panel-ink);text-wrap:balance}
.pagehead p{margin:0;color:var(--panel-ink-muted);font-size:19px;max-width:60ch}
.pagehead .eyebrow{color:var(--cover-gilt)}
.dl .card-body{display:flex;flex-direction:column;gap:14px;height:100%}
.dl{display:flex;flex-direction:column}
.dl .card-body{flex:1}
.dl .plat{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.dl .plat .btn{justify-content:space-between;width:100%}
.dl .plat .btn small{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--ink-faint)}
.dl ul{margin:0;padding-left:18px;font-size:16px;color:var(--ink-muted)}
.free{font-family:var(--f-num);font-size:30px;color:var(--ink);line-height:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0;counter-reset:s}
.steps>div{padding:16px 20px;border-left:1px solid var(--tile-line);counter-increment:s}
.steps>div:first-child{border-left:0}
.steps>div::before{content:counter(s);font-family:var(--f-num);font-size:30px;color:var(--chosen);display:block;line-height:1;margin-bottom:6px;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.steps h3{margin:0 0 4px;font-family:var(--f-display);font-weight:400;font-size:18px}
.steps p{font-size:15.5px;color:var(--ink-muted);margin:0}
table.req{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.req th,table.req td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--tile-line);vertical-align:top}
table.req th{font-family:var(--f-display);font-weight:400;font-size:15px;color:var(--ink-muted)}
.scroll{overflow-x:auto}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.license .card-body{padding:22px 28px 26px}
.amount{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.amount b{font-family:var(--f-num);font-size:64px;line-height:1;color:var(--ink)}
.amount span{font-size:16px;color:var(--ink-muted)}
.ph{font-family:var(--f-mono);font-size:11px;color:var(--live);border:1px dashed var(--live);padding:1px 6px;border-radius:2px;vertical-align:middle}
.ticks{list-style:none;margin:16px 0 20px;padding:0;display:grid;gap:8px;font-size:16.5px}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"";width:7px;height:7px;transform:rotate(45deg) translateY(-2px);background:var(--chosen);flex-shrink:0;box-shadow:0 0 0 1px var(--brass-lo)}
.ledger-table{width:100%;border-collapse:collapse;font-size:15.5px}
.ledger-table th,.ledger-table td{padding:8px 10px;border-bottom:1px solid var(--tile-line);text-align:left}
.ledger-table td+td,.ledger-table th+th{text-align:center;width:110px}
.ledger-table thead th{font-family:var(--f-display);font-weight:400;color:var(--ink-muted);font-size:15px}
.yes{color:var(--felt);font-weight:700}.no{color:var(--ink-faint)}
.faq details{border-bottom:1px solid var(--tile-line);padding:10px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--ink-faint)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:8px 0 2px;color:var(--ink-muted);font-size:16px}
.keybox{font-family:var(--f-mono);font-size:13px;background:rgba(44,29,18,.06);border:1px solid var(--tile-line);padding:10px 12px;color:var(--ink-muted);word-break:break-all}

@media (max-width:900px){
  .hero,.price-grid,.guides{grid-template-columns:minmax(0,1fr)}
  .grail{position:relative;top:0}
  .spread{min-height:420px}
}
@media (max-width:560px){
  .cover .wrap{gap:10px}
  .nav{margin-left:0;width:100%}
  .nav a{padding:0 10px;font-size:15px}
  .cover-card{padding:36px 24px 28px}
  .spread{min-height:0;display:flex;flex-direction:column;gap:18px}
  .spread>.card{position:relative;width:100%;left:auto;right:auto;top:auto;bottom:auto}
  .article .card-body{padding:18px 20px 24px}
  .principles>div,.steps>div{border-left:0;border-top:1px solid var(--tile-line)}
  .principles>div:first-child,.steps>div:first-child{border-top:0}
}
@media (prefers-reduced-motion:no-preference){
  .spread>.card{transition:transform .35s ease}
  .spread>.card:hover{transform:rotate(0) translateY(-4px)}
}

/* Pages that aren't in the mockup */
.prose{max-width:68ch}
.prose h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:24px 0 8px}
.prose ul{padding-left:20px;margin:0 0 12px}
.prose li{margin-bottom:4px}
.soon{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(196,169,124,.5);color:var(--ink-faint);font-size:16px}
.soon:last-child{border-bottom:0}
.soon span{font-family:var(--f-mono);font-size:11px;white-space:nowrap}
.btn[data-checkout]:not([href]){opacity:.6;cursor:default}
.lost{min-height:50vh;display:grid;place-items:center}
.lost .card{max-width:520px;width:100%}
.lost .num{font-family:var(--f-num);font-size:84px;line-height:1;color:var(--live)}

/* ---------- Guide pages (built by tools/build-guides.mjs) ---------- */
.grail nav a{display:block}
.gtoggle{display:none}
.guide-body{padding:22px 34px 30px;font-size:18px}
.guide-body h1{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4vw,44px);line-height:1.08;margin:6px 0 10px;text-wrap:balance}
.guide-body .lede{font-size:20.5px;line-height:1.45;color:var(--ink-muted);margin:0 0 22px;max-width:40em}
.guide-body h2{font-family:var(--f-display);font-weight:400;font-size:27px;line-height:1.2;margin:40px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--chosen);scroll-margin-top:110px}
.guide-body h3{font-weight:600;font-size:20px;line-height:1.3;margin:26px 0 8px}
.guide-body p,.guide-body ul,.guide-body ol{margin:0 0 14px;max-width:42em}
.guide-body li{margin-bottom:5px}
.guide-body li>ul,.guide-body li>ol{margin:6px 0 4px}
.guide-body a{color:var(--live);text-underline-offset:2px}
.guide-body a:hover{color:#6d1b12}
.guide-body code,.guide-body kbd{font-family:var(--f-mono);font-size:.8em}
.guide-body kbd{display:inline-block;padding:3px 6px 2px;border:1px solid var(--tile-line-strong);border-bottom-width:2px;border-radius:3px;background:var(--tile-hover);color:var(--ink);vertical-align:.08em}
.guide-body code{background:rgba(138,106,66,.12);padding:2px 5px;border-radius:3px}
.guide-body .ui{font-weight:600;color:var(--ink);white-space:nowrap}
.guide-body .glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border:1px solid var(--tile-line);border-radius:2px;margin:6px 0 28px;background:var(--tile-hover)}
.guide-body .glance div{padding:10px 14px;border-right:1px solid var(--tile-line)}
.guide-body .glance div:last-child{border-right:0}
.guide-body .glance dt{font-family:var(--f-display);font-size:13px;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:3px}
.guide-body .glance dd{margin:0;font-size:16.5px;line-height:1.35}
.guide-body figure.shot{margin:18px 0 30px}
.guide-body figure.shot a{display:block}
.guide-body figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--tile-line-strong);border-radius:2px;box-shadow:3px 5px 12px -4px rgba(0,0,0,.45);background:var(--board)}
.guide-body figure.shot.narrow img{width:auto;max-width:100%;margin:0 auto}
.guide-body figcaption{font-size:15.5px;line-height:1.4;color:var(--ink-muted);margin-top:8px;font-style:italic}
.guide-body aside.note,.guide-body aside.tip,.guide-body aside.warn{margin:18px 0 22px;padding:12px 18px 12px 16px;border-left:3px solid var(--chosen);background:rgba(201,162,74,.13);max-width:42em}
.guide-body aside.warn{border-left-color:var(--live);background:rgba(143,37,25,.08)}
.guide-body aside.tip{border-left-color:var(--felt);background:rgba(36,73,58,.09)}
.guide-body aside>b:first-child{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.1em;display:block;margin-bottom:3px;color:var(--ink-muted)}
.guide-body aside p:last-child{margin-bottom:0}
.guide-body ol.steps{counter-reset:step;list-style:none;padding-left:0}
.guide-body ol.steps>li{counter-increment:step;position:relative;padding-left:42px;margin-bottom:10px}
.guide-body ol.steps>li::before{content:counter(step);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:50%;background:var(--brass);color:var(--on-chosen);font:700 16px/28px var(--f-body);text-align:center;box-shadow:inset 0 1px 0 rgba(255,245,210,.6),0 1px 2px rgba(0,0,0,.3)}
.guide-body .scroll-x{overflow-x:auto;margin:8px 0 24px}
.guide-body table.ref{width:100%;border-collapse:collapse;font-size:16.5px;color:var(--ink)}
.guide-body table.ref th,.guide-body table.ref td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--tile-line)}
.guide-body table.ref th{font-family:var(--f-display);font-weight:400;font-size:14px;letter-spacing:.08em;color:var(--ink-faint);border-bottom:2px solid var(--tile-line-strong)}
.guide-body table.ref td:first-child{white-space:nowrap;font-weight:600}
.guide-body .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:10px 0 30px}
.guide-body .cards a{display:block;padding:12px 14px;background:var(--tile-hover);border:1px solid var(--tile-line);border-radius:2px;color:var(--ink);text-decoration:none}
.guide-body .cards a:hover{border-color:var(--brass-lo);box-shadow:inset 0 0 0 1px var(--chosen)}
.guide-body .cards b{display:block;font-family:var(--f-display);font-weight:400;font-size:18.5px;margin-bottom:3px}
.guide-body .cards span{display:block;font-size:15.5px;line-height:1.4;color:var(--ink-muted)}
.guide-body .pager{margin-top:44px}
.guide-body .pager a{max-width:48%;color:var(--ink-muted)}
.guide-body .pager a b{color:var(--live)}
.guide-foot{margin:0;text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--panel-ink-faint)}
@media (max-width:900px){
  .gtoggle{display:block;width:100%;height:36px;background:transparent;color:var(--panel-ink);border:1px solid var(--rail-edge);border-radius:2px;font:600 15px var(--f-body);text-align:left;padding:0 12px;cursor:pointer}
  .grail nav{display:none}
  .grail.open nav{display:block}
  .guide-body{padding:18px 18px 24px;font-size:17.5px}
  .guide-body table.ref td:first-child{white-space:normal}
  .guide-body .glance div{border-right:0;border-bottom:1px solid var(--tile-line)}
}