/* Gnarlfell — an inked ledger of twenty heights. Charcoal ground, parchment ink, one amber knot.
   Words in Cabin Sketch (the woodcut's hand), every figure in Source Sans 3 (a poster face mangles the digit 1). */
:root{
  --ground:#1B1C1F; --leaf:#222327; --leaf2:#2A2B30; --rule:#3B3D43; --rule2:#4A4D55;
  --dim:#8E8A80; --ink:#D8D4CB; --ink2:#EFEBE0;
  --amber:#F4A32C; --amber2:#FFC466; --amber-ink:#2A1B05; --ember:rgba(244,163,44,.17); --ember2:rgba(244,163,44,.34);
  --stump-h:74px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.45 'Source Sans 3',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:calc(var(--stump-h) + 24px);min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
code{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.num{font-variant-numeric:tabular-nums}
.hand{font-family:'Cabin Sketch',cursive;font-weight:700;letter-spacing:.3px}

#book{max-width:1180px;margin:0 auto;padding:0 14px}

/* ---- the spine: title, nav, the fell's line ---- */
#spine{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand leaf" "fell fell";gap:8px 14px;align-items:center;padding:14px 0 10px;border-bottom:2px solid var(--rule)}
.brand{grid-area:brand;display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand img{width:40px;height:40px;border-radius:8px;flex:none;box-shadow:0 0 0 1px var(--rule)}
.brand b{font:700 30px/1 'Cabin Sketch',cursive;letter-spacing:.5px;color:var(--ink2);white-space:nowrap}
.leaf{grid-area:leaf;display:flex;gap:14px;align-items:center;font-size:14px;font-family:'Cabin Sketch',cursive;font-weight:700;letter-spacing:.4px}
.leaf a{text-decoration:none;color:var(--dim);padding:4px 0;border-bottom:2px solid transparent}
.leaf a.here{color:var(--ink2);border-color:var(--amber)}
.leaf a.ghost{display:none}.leaf a.ghost.on{display:inline}
.leaf .socials{display:flex;gap:10px;margin-left:4px}
.leaf .socials a{font-family:'Source Sans 3',sans-serif;font-weight:600;font-size:13px;letter-spacing:0;color:var(--dim)}
.fellline{grid-area:fell;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:14px;color:var(--dim)}
.fellno{font:700 20px/1 'Cabin Sketch',cursive;color:var(--ink2)}
.clock{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.clock.ticking{color:var(--amber)}
.knotword{margin-left:auto;font-family:'Cabin Sketch',cursive;font-weight:700;color:var(--dim)}

/* ---- pages: ledger view = the trunk + the tally ---- */
#pages{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-top:14px}
.tagline{margin:0 0 4px;font:700 22px/1.2 'Cabin Sketch',cursive;color:var(--ink2)}
.tagline em{font-style:normal;color:var(--amber)}
.sub{margin:0 0 12px;color:var(--dim);font-size:14px;max-width:62ch}

#trunk{min-width:0}
.colhead{display:grid;grid-template-columns:48px minmax(0,1fr) 58px 84px;gap:8px;padding:6px 8px;font:700 12px/1 'Cabin Sketch',cursive;letter-spacing:.6px;color:var(--dim);text-transform:lowercase;border-bottom:1px dashed var(--rule2)}
.colhead span:nth-child(3),.colhead span:nth-child(4){text-align:right}
#rungs{list-style:none;margin:0;padding:0;border-left:3px solid var(--rule);position:relative}
.endcap{font:700 12px/1 'Cabin Sketch',cursive;color:var(--dim);letter-spacing:.8px;padding:6px 10px}
.endcap.crown{border-bottom:1px solid var(--rule)}
.endcap.root{border-top:1px solid var(--rule)}
.rung{display:grid;grid-template-columns:48px minmax(0,1fr) 58px 84px;gap:8px;align-items:center;padding:0 8px;min-height:38px;border-bottom:1px solid var(--rule);position:relative;cursor:pointer;transition:background .15s}
.rung:hover{background:var(--leaf)}
.rung.picked{background:var(--leaf2)}
.rung.mine{border-left:3px solid var(--amber);margin-left:-3px}
.rung.knot{background:var(--ember)}
.rung.knot .ht{color:var(--amber2)}
.ht{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;color:var(--ink2)}
.lay{position:relative;height:26px;display:flex;align-items:center;min-width:0}
.lay .fill{position:absolute;left:-4px;top:2px;bottom:2px;width:0;background:var(--ember);border-radius:0 4px 4px 0;transition:width .6s ease}
.lay .stk{position:relative;font-weight:600;font-variant-numeric:tabular-nums;padding-left:4px}
.lay .stk.nil{color:var(--rule2);font-weight:400}
.axes{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.pays{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.pays.carry,.pays.nil{color:var(--rule2);font-weight:400;font-size:13px}
.pays.hot{color:var(--amber)}
.axemark{position:absolute;right:8px;top:-9px;font:700 11px/1 'Cabin Sketch',cursive;color:var(--amber-ink);background:var(--amber);padding:3px 6px;border-radius:3px;letter-spacing:.4px}

/* the inline entry: a row opens like a ledger line being written */
.entry{display:none;grid-column:1/-1;padding:10px 4px 14px;border-top:1px dashed var(--rule2);cursor:default}
.rung.picked .entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:center}
.entry .ask{grid-column:1/-1;font:700 15px/1.2 'Cabin Sketch',cursive;color:var(--ink2)}
.entry .ask em{font-style:normal;color:var(--amber)}
.stakebox{display:flex;align-items:center;gap:8px;background:var(--ground);border:1px solid var(--rule2);border-radius:6px;padding:4px 6px 4px 10px;min-width:0}
.stakebox input{flex:1;min-width:88px;width:100%;background:none;border:0;color:var(--ink2);font:700 20px/1 'Source Sans 3',sans-serif;font-variant-numeric:tabular-nums;outline:none}
.stakebox .unit{font-size:12px;color:var(--dim);white-space:nowrap}
.stakebox .steps{display:flex;gap:4px}
.stakebox .steps button{background:var(--leaf2);border:1px solid var(--rule2);border-radius:4px;color:var(--ink);font-size:12px;font-weight:600;padding:5px 7px}
.swingbtn{background:var(--amber);color:var(--amber-ink);border:0;border-radius:6px;padding:11px 18px;font:700 16px/1 'Cabin Sketch',cursive;letter-spacing:.4px;white-space:nowrap}
.swingbtn:disabled{background:var(--rule2);color:var(--ground);cursor:not-allowed}
.entry .fine{grid-column:1/-1;font-size:13px;color:var(--dim);line-height:1.4}
.entry .fine b{color:var(--ink)}
.entry .fine.warn{color:var(--amber)}

/* ---- the tally: the second column ---- */
#tally{display:grid;gap:14px;align-content:start;min-width:0}
.plate{background:var(--leaf);border:1px solid var(--rule);border-radius:8px;padding:12px 14px}
.plate h3{margin:0 0 8px;font:700 15px/1 'Cabin Sketch',cursive;letter-spacing:.5px;color:var(--dim)}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fig .k{font-size:11px;letter-spacing:.5px;color:var(--dim);text-transform:lowercase}
.fig .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink2);line-height:1.15}
.fig .v.amber{color:var(--amber)}
.fig .v small{font-size:12px;font-weight:600;color:var(--dim);margin-left:2px}
.primer{display:grid;gap:5px;font-size:14px}
.primer div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted var(--rule2);padding:3px 0}
.primer div span:last-child{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);text-align:right}
.primer a{color:var(--amber)}
.tape{display:grid;gap:0}
.tape .ln{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dotted var(--rule);font-size:13px}
.tape .ln:last-child{border-bottom:0}
.tape .who{font-variant-numeric:tabular-nums;font-weight:600}
.tape .who a{text-decoration:none;color:var(--ink2)}
.tape .what{color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tape .what b{color:var(--ink);font-weight:600}
.tape .what .kn{color:var(--amber);font-weight:700}
.tape .when{color:var(--rule2);font-variant-numeric:tabular-nums}
.quiet{color:var(--dim);font-size:14px;padding:4px 0}
.fells-mini{display:grid;gap:4px;font-size:13px}
.fells-mini .fm{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:4px 0;border-bottom:1px dotted var(--rule)}
.fells-mini .fm:last-child{border-bottom:0}
.fells-mini .fm .kn{color:var(--amber);font-weight:700;font-variant-numeric:tabular-nums}
.fells-mini .fm .pd{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink2)}
.mine-plate{border-color:var(--amber);background:linear-gradient(180deg,var(--ember),transparent 70%)}
.mine-plate .v{color:var(--amber)}

/* ---- other views ---- */
.sheetful{grid-column:1/-1;max-width:760px}
.sheetful h1{margin:0 0 6px;font:700 30px/1.1 'Cabin Sketch',cursive;color:var(--ink2)}
.sheetful h1 em{font-style:normal;color:var(--amber)}
.sheetful h2{margin:22px 0 6px;font:700 19px/1.1 'Cabin Sketch',cursive;color:var(--amber)}
.sheetful p{margin:0 0 10px;color:var(--ink);max-width:66ch}
.sheetful p.dim{color:var(--dim)}
.grain{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.grain th{text-align:left;font:700 12px/1 'Cabin Sketch',cursive;letter-spacing:.6px;color:var(--dim);padding:6px 8px;border-bottom:1px dashed var(--rule2)}
.grain td{padding:8px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;vertical-align:top}
.grain th.r,.grain td.r{text-align:right}
.grain td.kn{color:var(--amber);font-weight:700}
.grain td a{text-decoration:none;color:var(--ink2)}
.grain .fate-knot{color:var(--amber);font-weight:700}
.grain .fate-refund{color:var(--ink2);font-weight:600}
.grain .fate-pot{color:var(--dim)}
.grain .fate-open{color:var(--dim);font-style:italic}
.gatherbtn{background:var(--amber);color:var(--amber-ink);border:0;border-radius:5px;padding:6px 10px;font:700 13px/1 'Cabin Sketch',cursive;white-space:nowrap}
.gatherbtn:disabled{background:var(--rule2);color:var(--ground)}
.tablewrap{overflow-x:auto;max-width:100%}
.nothing{color:var(--dim);padding:24px 0;font-family:'Cabin Sketch',cursive;font-weight:700;font-size:18px}

/* ---- colophon ---- */
#colophon{margin-top:28px;padding:14px 0 10px;border-top:2px solid var(--rule);display:grid;gap:8px;font-size:13px;color:var(--dim)}
.cl-row{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.cl-k{font:700 12px/1 'Cabin Sketch',cursive;letter-spacing:.6px;color:var(--dim);min-width:44px}
.cl-copy{background:none;border:1px solid var(--rule2);border-radius:4px;color:var(--ink);font-size:12px;padding:2px 8px}
.cl-line{font-family:'Cabin Sketch',cursive;font-weight:700;color:var(--rule2)}
#colophon a{color:var(--dim)}

/* ---- the stump: the buy control, fixed at every width ---- */
#stump{position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--stump-h);display:flex;align-items:center;gap:10px;padding:0 14px calc(env(safe-area-inset-bottom,0px) / 2);background:var(--leaf);border-top:3px solid var(--amber);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.stump-tick{font:700 20px/1 'Cabin Sketch',cursive;letter-spacing:.5px;color:var(--ink2);white-space:nowrap}
.stump-buy{flex:1;text-align:center;text-decoration:none;font:700 16px/1 'Cabin Sketch',cursive;letter-spacing:.4px;padding:13px 10px;border-radius:7px;background:var(--amber);color:var(--amber-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stump-buy[aria-disabled="true"]{background:var(--leaf2);color:var(--dim);border:1px dashed var(--rule2);pointer-events:none}
.stump-axe{background:none;border:1px solid var(--rule2);border-radius:7px;color:var(--ink);font-weight:600;font-size:14px;padding:11px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.stump-axe.on{border-color:var(--amber);color:var(--amber)}

/* ---- wallet chooser + notices ---- */
#pick{position:fixed;inset:0;z-index:40;background:rgba(10,10,12,.7);display:none;align-items:center;justify-content:center;padding:20px}
#pick.show{display:flex}
.pick-box{background:var(--leaf);border:1px solid var(--rule2);border-radius:10px;width:min(360px,100%);padding:12px}
.pick-head{display:flex;justify-content:space-between;align-items:center;font:700 16px/1 'Cabin Sketch',cursive;margin-bottom:8px}
.pick-head button{background:none;border:0;font-size:22px;color:var(--dim)}
#pickList{display:grid;gap:6px}
#pickList button{display:flex;align-items:center;gap:10px;background:var(--ground);border:1px solid var(--rule);border-radius:7px;padding:10px;text-align:left}
#pickList img{width:24px;height:24px;border-radius:5px}
.chit{position:fixed;left:50%;bottom:calc(var(--stump-h) + 14px);transform:translateX(-50%);z-index:50;background:var(--ink2);color:var(--ground);font-weight:600;font-size:14px;padding:9px 14px;border-radius:6px;max-width:calc(100% - 28px);box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* ---- widths ---- */
@media (max-width:560px){
  .rung.picked .entry{grid-template-columns:minmax(0,1fr)}
  .swingbtn{width:100%;padding:13px 18px}
  .stakebox .steps button{padding:5px 6px}
  .brand b{font-size:26px}
  .leaf{gap:10px;font-size:13px}
  .leaf .socials{display:none}
  .stump-tick{font-size:17px}
  .stump-axe{padding:11px 10px;font-size:13px}
  .figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig .v{font-size:19px}
}
@media (min-width:720px){
  #book{padding:0 22px}
  .brand b{font-size:34px}
  .tagline{font-size:26px}
  .rung{min-height:42px}
  .ht{font-size:20px}
  .colhead,.rung{grid-template-columns:56px minmax(0,1fr) 72px 110px}
  .fig .v{font-size:24px}
}
@media (min-width:1000px){
  #spine{grid-template-columns:auto 1fr auto;grid-template-areas:"brand fell leaf";align-items:center}
  .fellline{justify-content:center;font-size:15px}
  .knotword{margin-left:0}
  #pages{grid-template-columns:minmax(0,1fr) 370px;gap:32px;padding-top:22px}
  #tally{position:sticky;top:12px}
  .tagline{font-size:30px}
  .rung{min-height:46px}
  .ht{font-size:22px}
  .colhead,.rung{grid-template-columns:64px minmax(0,1fr) 84px 130px}
  .pays{font-size:17px}
  .lay{height:30px}
  .fig .v{font-size:28px}
  #stump{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100% - 40px));border-radius:14px 14px 0 0;border:1px solid var(--rule2);border-top:3px solid var(--amber);padding:0 18px}
  .stump-tick{font-size:22px}
  .sheetful h1{font-size:36px}
}