/* Hemwane — the wick. Dark ground, one orange flame, a candle down the scroll. */
:root{--ground:#0C1226;--pane:#111A33;--seam:#1B2747;--ink:#F4E6C6;--dim:#8B95B3;--flame:#FF8C1A;--glow:#FFB35C;--ember:#5A3A12;--wax:#E9D5A8;--wax2:#C9B283;--soot:#070B18;
  --disp:"Big Shoulders Display",Impact,sans-serif;--body:"Public Sans",system-ui,sans-serif;--mono:"Azeret Mono",ui-monospace,monospace;--sec:1.5px;--waxw:56px;--waxx:44px}
*{box-sizing:border-box}html{color-scheme:dark;background:var(--ground)}
body{margin:0;padding:0 18px 140px;background:var(--ground);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;max-width:1180px;margin-inline:auto}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}code{font-family:var(--mono)}
[hidden]{display:none!important}

/* ---- the sconce: a floating pill, never docked ---- */
.sconce{position:fixed;left:12px;right:12px;bottom:132px;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:18px;
  background:rgba(17,26,51,.94);border:1px solid var(--seam);box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,140,26,.12);backdrop-filter:blur(12px)}
.sconce-flame{width:12px;height:18px;flex:none;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#FFF3C4 0,var(--flame) 55%,transparent 72%);box-shadow:0 0 14px rgba(255,140,26,.7);animation:lick 1.3s ease-in-out infinite alternate}
.sconce-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sconce-tag{font:700 12px/1 var(--disp);letter-spacing:.14em;color:var(--glow);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sconce-tag em{font:500 11px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--dim)}
.sconce-gm{font:600 11px/1 var(--body);letter-spacing:0;text-transform:none;color:var(--flame);border-bottom:1px dotted rgba(255,140,26,.5)}
.sconce-addr{font:600 11px/1.35 var(--mono);color:var(--ink);overflow-wrap:anywhere;word-break:break-all;user-select:all}
.sconce-copy{flex:none;padding:9px 12px;border-radius:12px;background:var(--flame);color:#170C02;font:700 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase}
.sconce-copy[disabled]{background:var(--seam);color:var(--dim);cursor:not-allowed}.sconce-copy.lit{background:var(--glow)}

/* ---- the figure ---- */
.wordmark{display:flex;align-items:center;gap:8px;padding:16px 0 4px;font:700 13px/1.3 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.wordmark img{width:20px;height:20px;border-radius:50%}.wordmark span{color:var(--flame);letter-spacing:.1em}
.tally{margin:8px 0 0;font:900 clamp(92px,26vw,180px)/.88 var(--disp);letter-spacing:-.01em;color:var(--ink);text-shadow:0 0 40px rgba(255,140,26,.18);overflow-wrap:anywhere}
.tally.warm{color:var(--glow)}
.tally-cap{margin:10px 0 26px;font:500 14px/1.5 var(--body);color:var(--dim);max-width:44ch}.tally-cap b{color:var(--ink);font-family:var(--mono);font-weight:600}

/* ---- the taper ---- */
.taper{position:relative;margin:0 0 30px}
.taper-top{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 10px;border-bottom:1px solid var(--seam);font:700 15px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.taper-clock{font:600 22px/1 var(--mono);letter-spacing:0;color:var(--ink);text-transform:none}.taper-clock.low{color:var(--flame)}
.wax{position:relative;height:calc(840 * var(--sec));margin:18px 0 12px}
.wax::before{content:"";position:absolute;left:var(--waxx);top:0;bottom:0;width:var(--waxw);border-radius:6px 6px 10px 10px;background:linear-gradient(90deg,var(--wax2),var(--wax) 40%,var(--wax) 60%,var(--wax2));box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.wickline{position:absolute;left:calc(var(--waxx) + var(--waxw) / 2 - 1px);top:0;bottom:0;width:2px;background:var(--ember);opacity:.35}
.burnt{position:absolute;left:calc(var(--waxx) - 6px);top:0;width:calc(var(--waxw) + 12px);height:0%;background:linear-gradient(180deg,rgba(12,18,38,1),rgba(12,18,38,.94));border-bottom:2px solid var(--ember);border-radius:0 0 6px 6px}
.burnt::after{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:repeating-linear-gradient(180deg,var(--ember) 0 6px,transparent 6px 12px);opacity:.6}
.flame{position:absolute;left:calc(var(--waxx) + var(--waxw) / 2 - 11px);top:0;width:22px;height:34px;margin-top:-30px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#FFF8DC 0,#FFD27A 30%,var(--flame) 58%,transparent 74%);box-shadow:0 0 28px 6px rgba(255,140,26,.55),0 0 70px 20px rgba(255,140,26,.18);animation:lick .9s ease-in-out infinite alternate;z-index:3}
@keyframes lick{from{transform:scaleY(1) translateY(0)}to{transform:scaleY(1.12) translateY(-2px)}}
.ticks{position:absolute;left:0;top:0;bottom:0;width:var(--waxx)}
.tick{position:absolute;left:0;right:6px;height:0;border-top:1px solid var(--seam);font:400 10px/1 var(--mono);color:var(--dim)}
.tick span{position:absolute;left:0;top:-13px}
.pins{position:absolute;left:calc(var(--waxx) + var(--waxw) + 12px);right:0;top:0;bottom:0}
.pin{position:absolute;left:0;right:0;height:0;display:flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);white-space:nowrap;color:var(--dim)}
.pin::before{content:"";flex:none;width:14px;height:0;border-top:2px dotted var(--seam)}
.pin-amt{color:var(--ink)}.pin-who{overflow:hidden;text-overflow:ellipsis;font-weight:400}.pin-sec{margin-left:auto;font-weight:400;font-size:11px}
.pin.standing .pin-amt{color:var(--flame)}.pin.standing::before{border-color:var(--flame)}
.pin.hem .pin-amt{color:var(--glow);text-shadow:0 0 12px rgba(255,140,26,.6)}.pin.hem::before{border:0;height:2px;background:var(--flame)}.pin.hem .pin-who::after{content:" · the hem";color:var(--glow)}
.pin.beneath{opacity:.45}.pin.beneath .pin-amt{text-decoration:line-through}.pin.beneath .pin-who::after{content:" · gone"}
.pin.home .pin-who::after{content:" · home";color:var(--ink)}
.pin.mine .pin-who{color:var(--glow)}
.hemline{position:absolute;left:0;right:0;top:0;height:0;border-top:2px solid var(--flame);z-index:2;box-shadow:0 0 18px rgba(255,140,26,.45)}
.hemline span{position:absolute;right:0;top:-24px;font:700 12px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--flame);background:var(--ground);padding:4px 6px}
.taper-foot{padding:12px 0 0;border-top:1px solid var(--seam);font:500 13px/1.5 var(--body);color:var(--dim)}

/* ---- the stub ---- */
.stub{background:var(--pane);border:1px solid var(--seam);border-radius:22px;padding:18px;margin:0 0 30px}
.stub-head{font:700 24px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.stub-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;align-items:baseline;font:400 12px/1.2 var(--body);color:var(--dim);margin-bottom:12px}
.stub-row b{font:600 17px/1 var(--mono);color:var(--ink)}.stub-k{letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.stub-field{display:flex;align-items:center;gap:8px;border:1px solid var(--seam);background:var(--ground);border-radius:14px;padding:4px 12px 4px 4px}
.stub-field input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:600 24px/1.4 var(--mono);padding:8px 10px;outline:0}
.stub-field span{font:700 11px/1 var(--disp);letter-spacing:.14em;color:var(--dim)}
.stub-quick{display:flex;gap:6px;margin:10px 0}.stub-quick button{flex:1;padding:8px 4px;border:1px solid var(--seam);border-radius:10px;font:500 11px/1 var(--body);color:var(--dim)}.stub-quick button.on{border-color:var(--flame);color:var(--flame)}
.stub-go{width:100%;padding:16px;border-radius:16px;background:var(--flame);color:#170C02;font:900 20px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 28px rgba(255,140,26,.3)}
.stub-go[disabled]{background:var(--seam);color:var(--dim);box-shadow:none;cursor:not-allowed}
.stub-fine{margin:12px 0 0;font:400 12px/1.5 var(--body);color:var(--dim)}.stub-fine b{color:var(--ink);font-family:var(--mono)}
.stub-conn{margin-top:12px;width:100%;padding:11px;border:1px solid var(--seam);border-radius:12px;font:600 13px/1 var(--body);color:var(--ink)}.stub-conn.on{border-color:var(--flame);color:var(--glow);font-family:var(--mono)}

/* ---- the room ---- */
.wickside{margin:0 0 30px}
.ws-head{font:700 13px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:0 0 8px;border-bottom:1px solid var(--seam);margin:18px 0 0}
.ws-list{display:flex;flex-direction:column}
.ws-row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--seam);font:400 12px/1.3 var(--body);color:var(--dim)}
.ws-row .ws-amt{font:600 14px/1 var(--mono);color:var(--ink)}.ws-row .ws-tag{font:700 10px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ws-row .ws-tag.hem,.ws-row .ws-tag.standing{color:var(--flame)}.ws-row .ws-tag.beneath{color:var(--ember)}.ws-row .ws-tag.home{color:var(--ink)}
.ws-row .ws-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}.ws-row .ws-when{text-align:right;font-family:var(--mono);font-size:11px}
.ws-row .ws-sub{grid-column:1/-1;font-size:11px}
.ws-quiet{padding:14px 0;color:var(--dim);font-size:13px}
.ws-stat{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ws-stat div{background:var(--pane);border:1px solid var(--seam);border-radius:12px;padding:10px}.ws-stat i{display:block;font:400 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-style:normal}.ws-stat b{display:block;margin-top:5px;font:600 16px/1 var(--mono);color:var(--ink)}
.ws-take{padding:8px 12px;border-radius:10px;background:var(--flame);color:#170C02;font:700 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase}

/* ---- the riddles ---- */
.riddles{margin:0 0 30px}
.riddle{padding:16px 0;border-top:1px solid var(--seam)}
.riddle h3{margin:0 0 6px;font:700 26px/1 var(--disp);letter-spacing:.02em;color:var(--glow)}.riddle p{margin:0;color:var(--dim);max-width:60ch}
.riddle-fine{margin:10px 0 0;font:400 11px/1.6 var(--mono);color:var(--dim);border-top:1px solid var(--seam);padding-top:12px}

/* ---- the tallow (footer) ---- */
.tallow{display:flex;flex-direction:column;gap:8px;padding:18px 0 8px;border-top:1px solid var(--seam);font:400 12px/1.5 var(--body);color:var(--dim)}
.tallow-name{font:700 13px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.tallow-links{display:flex;gap:14px;flex-wrap:wrap}.tallow-links a{color:var(--glow);border-bottom:1px dotted rgba(255,179,92,.4)}
.tallow-ca{font-size:11px;overflow-wrap:anywhere;word-break:break-all;user-select:all}

/* ---- the snuffbox (sheet) + notes ---- */
.snuffbox{position:fixed;inset:0;background:rgba(7,11,24,.7);display:flex;align-items:flex-end;justify-content:center;z-index:60}
.snuffbox-pane{width:100%;max-width:480px;background:var(--pane);border:1px solid var(--seam);border-radius:22px 22px 0 0;padding:16px 18px 30px}
.snuffbox-head{display:flex;justify-content:space-between;align-items:center;font:700 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}.snuffbox-shut{font-size:24px;color:var(--dim)}
.snuffbox-body button{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid var(--seam);border-radius:12px;margin-bottom:8px;background:var(--ground)}.snuffbox-body img{width:22px;height:22px;border-radius:6px}
.ember-note{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--ink);color:#170C02;padding:10px 14px;border-radius:12px;font:600 13px/1.2 var(--body);z-index:70;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:92vw}

/* ---- wider: a wider measure, a taller candle ---- */
@media (min-width:720px){
  :root{--sec:1.6px;--waxw:72px;--waxx:56px}
  body{padding:0 28px 120px}
  .sconce{left:50%;right:auto;transform:translateX(-50%);width:min(720px,92vw);bottom:40px}
  .tally{font-size:clamp(150px,20vw,220px)}
  .pin{font-size:13px}.stub{padding:22px}.ws-stat{grid-template-columns:repeat(3,1fr)}
}
/* ---- desktop: the candle and its stub in the primary column, the room on a sticky rail beside it ---- */
@media (min-width:1000px){
  :root{--sec:1.7px;--waxw:84px;--waxx:64px}
  body{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:44px;align-content:start;padding:0 32px 100px}
  .wordmark{grid-area:mark}.tally{grid-area:tally}.tally-cap{grid-area:cap}.taper{grid-area:taper}.stub{grid-area:stub}.wickside{grid-area:room}.riddles{grid-area:riddles}.tallow{grid-area:tallow}
  body{grid-template-areas:"mark mark" "tally room" "cap room" "taper room" "stub room" "riddles room" "tallow tallow"}
  .tally{font-size:clamp(170px,15vw,230px)}
  .wickside{position:sticky;top:20px;align-self:start;margin-top:8px;max-height:calc(100vh - 40px);overflow:auto;padding-right:4px}
  .riddles{columns:2;column-gap:36px}.riddle{break-inside:avoid}.riddle-fine{column-span:all}
  .tallow{flex-direction:row;align-items:center;flex-wrap:wrap;gap:18px}.tallow-ca{margin-left:auto}
}