/* Kestrel Road — lamp-lit ledger. No external assets, no network requests. */
:root{
  --ground:#1E1811;
  --ground-2:#2A2118;
  --paper:#E9E0CB;
  --paper-2:#DACEB2;
  --paper-3:#CDBF9E;
  --ink:#2B2419;
  --ink-soft:#5C5140;
  --prussian:#1D3A52;
  --prussian-2:#2F5877;
  --iron:#8A7C64;
  --blood:#A8442B;
  --grass:#4F6B4A;
  --brass:#B08A3C;
  --rule:1px solid var(--iron);
  --pad:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(176,138,60,.10), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.16) 0 3px, transparent 3px 7px);
  color:var(--paper);
  font:16px/1.5 Georgia,"Iowan Old Style","Times New Roman",serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 48px}

/* ---------- type ---------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h1{font-size:26px;letter-spacing:.30em}
h2{font-size:13px;letter-spacing:.20em;color:var(--prussian)}
h3{font-size:12px;letter-spacing:.18em;color:var(--ink-soft)}
.num{font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.small{font-size:13px}
.dim{color:var(--ink-soft)}
.bad{color:var(--blood)}
.good{color:var(--grass)}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:10px;
  border-bottom:1px solid rgba(176,138,60,.35)}
.mast h1{color:var(--paper)}
.mast .sub{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}

/* ---------- the ribbon (signature) ---------- */
.ribbon{margin:14px 0 18px;border:1px solid rgba(176,138,60,.35);background:rgba(0,0,0,.28);padding:6px}
.ribbon canvas{display:block;width:100%;height:118px}

/* ---------- panels ---------- */
.cols{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
.panel{background:var(--paper);color:var(--ink);border:1px solid #0e0b07;
  box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.35);padding:var(--pad);margin-bottom:16px}
.panel > h2{padding-bottom:6px;margin-bottom:10px;border-bottom:var(--rule)}
.panel.tight{padding:10px 12px}

/* ---------- reading of the day ---------- */
.reading{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--iron);border:var(--rule);margin-bottom:12px}
.reading div{background:var(--paper-2);padding:8px 10px}
.reading b{display:block;font:11px/1.4 Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:400}
.reading span{font:15px/1.3 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}

/* ---------- journal ---------- */
.panel.long{display:flex;flex-direction:column}
.journal{flex:1 1 auto;min-height:230px;height:calc(100vh - 468px);max-height:none;
  overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;padding-right:6px}
.entry{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:5px 0;border-bottom:1px dotted rgba(138,124,100,.55)}
.entry .d{font:11px/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--prussian);text-transform:uppercase}
.entry.new{animation:ink .45s ease-out}
@keyframes ink{from{opacity:0;transform:translateY(-3px)}to{opacity:1}}

/* ---------- roster ---------- */
.person{display:grid;grid-template-columns:1fr 92px auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dotted rgba(138,124,100,.55)}
.person:last-child{border-bottom:0}
.person .nm{font-weight:700}
.person .rl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.bar{height:9px;background:var(--paper-3);border:1px solid var(--iron);position:relative}
.bar i{display:block;height:100%;background:var(--grass)}
.bar.low i{background:var(--blood)}
.dead{opacity:.45;text-decoration:line-through}

/* ---------- ledger rows ---------- */
.rows{width:100%;border-collapse:collapse}
.rows td{padding:3px 0;border-bottom:1px dotted rgba(138,124,100,.5)}
.rows td:last-child{text-align:right;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.rows tr:last-child td{border-bottom:0}

/* ---------- controls ---------- */
button{font:12px/1 Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);
  background:var(--prussian);border:1px solid #0b1a26;padding:11px 14px;cursor:pointer}
button:hover{background:var(--prussian-2)}
button:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
button[disabled]{opacity:.4;cursor:not-allowed}
button.ghost{background:transparent;color:var(--prussian);border:1px solid var(--iron)}
button.ghost:hover{background:var(--paper-2)}
button.wide{width:100%}
button.go{background:var(--blood);border-color:#57200f}
button.go:hover{background:#bd5033}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.btnrow.split button{flex:1 1 0}
.seg{display:flex;border:1px solid var(--iron)}
.seg button{flex:1;background:var(--paper-2);color:var(--ink);border:0;border-right:1px solid var(--iron);padding:9px 4px;font-size:11px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--prussian);color:var(--paper)}
label.field{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:10px 0 4px}
input[type=number],input[type=text],select{width:100%;font:14px ui-monospace,Menlo,Consolas,monospace;
  padding:8px;border:1px solid var(--iron);background:#F3EDDD;color:var(--ink)}

/* ---------- shop ---------- */
.shop{width:100%;border-collapse:collapse}
.shop th{text-align:left;font:11px/1.4 Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:400;border-bottom:var(--rule);padding-bottom:5px}
.shop td{padding:5px 4px;border-bottom:1px dotted rgba(138,124,100,.5);vertical-align:middle}
.shop td.n{text-align:right;font:13px ui-monospace,Menlo,Consolas,monospace}
.shop input{width:66px;padding:4px;text-align:right}
.shop button{padding:6px 9px;font-size:10px}

/* ---------- sound panel ---------- */
details.panel > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
details.panel > summary::-webkit-details-marker{display:none}
details.panel > summary h2{border:0;margin:0;padding:0}
details.panel > summary::after{content:'+';margin-left:auto;font:14px ui-monospace,Menlo,monospace;color:var(--prussian)}
details.panel[open] > summary::after{content:'\2013'}
details.panel[open] > summary{padding-bottom:6px;margin-bottom:8px;border-bottom:var(--rule)}
input[type=range]{width:100%;accent-color:var(--prussian);background:transparent}
input[type=range]:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

/* ---------- modal ---------- */
.veil{position:fixed;inset:0;background:rgba(12,9,6,.82);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:20}
.veil .panel{max-width:620px;width:100%;max-height:88vh;overflow:auto;margin:0}
.veil .lede{font-size:17px;margin:0 0 14px}

/* ---------- title / ending ---------- */
.title{max-width:760px;margin:6vh auto 0}
.title .rule{height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);margin:18px 0}
.trades{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px;margin-top:6px}
.trades.layers{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.trade.layer p{font-size:12px}
.trade{background:var(--paper);color:var(--ink);border:1px solid #0e0b07;padding:11px 12px;cursor:pointer;text-align:left}
.trade[aria-pressed="true"]{outline:3px solid var(--brass);outline-offset:-3px}
.trade b{display:block;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.trade .c{font:13px ui-monospace,Menlo,Consolas,monospace;color:var(--prussian)}
.trade p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.epitaph{font-size:15px;line-height:1.6}
.tally{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin-top:10px}
.tally .k{border-bottom:1px dotted rgba(138,124,100,.6)}
.tally .v{font:13px ui-monospace,Menlo,Consolas,monospace;text-align:right}

@media (max-width:900px){
  .cols{grid-template-columns:1fr}
  .journal{height:auto;max-height:46vh;min-height:180px}
  .reading{grid-template-columns:repeat(2,1fr)}
  h1{font-size:20px;letter-spacing:.2em}
  .ribbon canvas{height:96px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .journal{scroll-behavior:auto}}