/* ============ The Investor's Ledger — shared theme ============ */
:root{
  --paper:#F2F5EE;        /* pale ledger green-white */
  --rule:#C9D6C4;         /* ruled-line green */
  --ink:#173428;          /* deep bottle-green ink */
  --ink-soft:#3E5A4C;
  --red:#B3261E;          /* red ink = money leaving */
  --red-soft:#F5E3E1;
  --credit:#1F6B4A;       /* credit-entry green */
  --credit-soft:#E3EFE7;
  --gold:#8A6D1F;
  --card:#FAFBF7;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',sans-serif;
  --slab:'Zilla Slab',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  font-size:16.5px;
  overflow-x:hidden;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(60,110,80,0.07) 31px, rgba(60,110,80,0.07) 32px);
}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}

/* ---------- site nav ---------- */
nav.sitenav{
  border-bottom:1.5px solid var(--ink);
  background:var(--card);
}
nav.sitenav .inner{
  max-width:880px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;
}
nav.sitenav .brand{
  font-family:var(--slab);font-weight:700;font-size:18px;
  color:var(--ink);text-decoration:none;letter-spacing:-0.01em;
}
nav.sitenav .brand:hover{color:var(--credit)}
nav.sitenav .links{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
nav.sitenav .links a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:2px 0;
  border-bottom:2px solid transparent;
}
nav.sitenav .links a:hover,nav.sitenav .links a:focus-visible{color:var(--credit);border-bottom-color:var(--credit)}
nav.sitenav .links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
nav.sitenav .links a:focus-visible{outline:2px solid var(--credit);outline-offset:2px}

/* ---------- header ---------- */
header.page-head{padding:54px 0 40px;border-bottom:3px double var(--ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px}
header.page-head h1{font-family:var(--slab);font-weight:700;font-size:clamp(30px,5.5vw,50px);line-height:1.1;letter-spacing:-0.01em}
header.page-head h1 .red{color:var(--red)}
header.page-head h1 .green{color:var(--credit)}
.lede{margin-top:18px;max-width:620px;font-size:18px;color:var(--ink-soft)}
.lede strong{color:var(--ink)}

/* ---------- section chrome ---------- */
section{padding:48px 0 8px;scroll-margin-top:16px}
.sec-label{
  display:flex;align-items:baseline;gap:14px;margin-bottom:24px;
  border-bottom:1.5px solid var(--ink);padding-bottom:10px;
}
.sec-label h2{font-family:var(--slab);font-weight:600;font-size:clamp(22px,3.5vw,30px)}
.sec-label .folio{font-family:var(--mono);font-size:12px;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;margin-left:auto;white-space:nowrap}
@media(max-width:560px){.sec-label .folio{display:none}}

/* ---------- point cards ---------- */
.points{display:grid;gap:14px}
.pt{
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--credit);
  border-radius:6px;padding:18px 20px;
}
.pt h3{font-family:var(--slab);font-weight:600;font-size:19px;margin-bottom:6px}
.pt p{color:var(--ink-soft);font-size:15.5px}
.pt p strong{color:var(--ink)}
.pt .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--credit);display:block;margin-bottom:6px}
.pt.debit{border-left-color:var(--red)}
.pt.debit .tag{color:var(--red)}

/* ---------- hub cards (home / tools index) ---------- */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
a.hub-card{
  display:block;background:var(--card);border:1.5px solid var(--ink);border-radius:8px;
  padding:20px 22px;text-decoration:none;color:var(--ink);
  box-shadow:4px 4px 0 rgba(23,52,40,.12);
  transition:transform .12s ease, box-shadow .12s ease;
}
a.hub-card:hover,a.hub-card:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(23,52,40,.18)}
a.hub-card:focus-visible{outline:2px solid var(--credit);outline-offset:3px}
a.hub-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--credit);display:block;margin-bottom:8px}
a.hub-card.debit .tag{color:var(--red)}
a.hub-card h3{font-family:var(--slab);font-weight:600;font-size:20px;margin-bottom:6px}
a.hub-card p{color:var(--ink-soft);font-size:14.5px}
a.hub-card .go{display:block;margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--credit)}

/* ---------- calculator layout ---------- */
.calc-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:22px;margin-top:34px;align-items:start}
@media(max-width:760px){.calc-grid{grid-template-columns:1fr}}
form.calc-inputs{
  background:var(--card);border:1.5px solid var(--ink);border-radius:8px;
  padding:20px 22px;box-shadow:4px 4px 0 rgba(23,52,40,.12);
}
form.calc-inputs .form-title{
  font-family:var(--slab);font-weight:600;font-size:18px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;
}
.field input[type="number"],.field select{
  width:100%;padding:10px 12px;font-family:var(--mono);font-size:16px;
  border:1.5px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink);
}
.field input[type="number"]:focus,.field select:focus{outline:2px solid var(--credit);outline-offset:1px;border-color:var(--credit)}
.field input[type="range"]{width:100%;accent-color:var(--credit);margin-top:4px}
.field .range-val{font-family:var(--mono);font-size:14px;color:var(--credit);font-weight:600}
.field .hint{font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-family:var(--sans);text-transform:none;letter-spacing:0}
.field-check{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.field-check input{width:18px;height:18px;accent-color:var(--credit)}
.field-check label{font-size:14.5px;color:var(--ink-soft)}

/* ---------- results ---------- */
.results{display:grid;gap:14px}
.result-card{
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--credit);
  border-radius:6px;padding:16px 20px;
}
.result-card.debit{border-left-color:var(--red)}
.result-card.gold{border-left-color:var(--gold)}
.result-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.result-card .value{font-family:var(--mono);font-size:clamp(24px,4vw,32px);font-weight:600;color:var(--credit)}
.result-card.debit .value{color:var(--red)}
.result-card.gold .value{color:var(--gold)}
.result-card .sub{font-size:13.5px;color:var(--ink-soft);margin-top:4px}
.result-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.result-row{grid-template-columns:1fr}}

/* stacked deposit-vs-growth bar */
.split-bar{display:flex;height:26px;border-radius:5px;overflow:hidden;border:1px solid var(--rule);margin:10px 0 6px}
.split-bar .invested{background:var(--ink-soft)}
.split-bar .gains{background:var(--credit)}
.split-bar .lost{background:var(--red)}
.split-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
.split-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.split-legend .li-invested::before{background:var(--ink-soft)}
.split-legend .li-gains::before{background:var(--credit)}
.split-legend .li-lost::before{background:var(--red)}

/* ---------- ledger table ---------- */
.ledger{
  background:var(--card);border:1.5px solid var(--ink);border-radius:8px;
  overflow:hidden;margin:8px 0 26px;
  box-shadow:4px 4px 0 rgba(23,52,40,.12);
}
.ledger-head{
  background:var(--ink);color:#FFFFFF;padding:14px 20px;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;
}
.ledger-head span:last-child{font-weight:400;color:#D8E4DC;font-size:13.5px}
.ledger table{width:100%;border-collapse:collapse;font-size:15px}
.ledger th{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);padding:12px 20px 8px;border-bottom:1px solid var(--rule);font-weight:500;
}
.ledger td{padding:10px 20px;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger tr:last-child td{border-bottom:none}
.ledger .amt{font-family:var(--mono);font-weight:600;white-space:nowrap;text-align:right}
.ledger .amt.red{color:var(--red)}
.ledger .amt.green{color:var(--credit)}
.ledger .item{font-weight:600}
.ledger .note{color:var(--ink-soft);font-size:14px;display:block;margin-top:2px;font-weight:400}
.ledger-scroll{overflow-x:auto}

/* ---------- callout ---------- */
.compound{
  border:1.5px dashed var(--red);background:var(--red-soft);border-radius:8px;
  padding:24px 24px 20px;margin:6px 0 26px;
}
.compound.credit{border-color:var(--credit);background:var(--credit-soft)}
.compound .head{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.compound.credit .head{color:var(--credit)}
.compound .rows{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.compound .rows{grid-template-columns:1fr}}
.compound .cell b{font-family:var(--mono);font-size:clamp(22px,4vw,30px);display:block;font-weight:600}
.compound .cell span{font-size:13.5px;color:var(--ink-soft)}
.compound .verdict{
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(179,38,30,.35);
  font-family:var(--slab);font-size:18px;font-weight:600;color:var(--red);
}
.compound.credit .verdict{border-top-color:rgba(31,107,74,.35);color:var(--credit)}

/* ---------- rules of thumb grid ---------- */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rule{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.rule b{font-family:var(--mono);font-size:15px;display:block;margin-bottom:6px;color:var(--gold)}
.rule p{font-size:14.5px;color:var(--ink-soft)}

/* ---------- glossary ---------- */
.glossary-search{margin:26px 0 8px}
.glossary-search input{
  width:100%;padding:12px 16px;font-family:var(--mono);font-size:16px;
  border:1.5px solid var(--ink);border-radius:8px;background:var(--card);color:var(--ink);
  box-shadow:4px 4px 0 rgba(23,52,40,.12);
}
.glossary-search input:focus{outline:2px solid var(--credit);outline-offset:1px}
.term{
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--gold);
  border-radius:6px;padding:14px 18px;margin-bottom:12px;
}
.term dt{font-family:var(--slab);font-weight:600;font-size:17px}
.term dt .abbr{font-family:var(--mono);font-size:12px;color:var(--ink-soft);font-weight:400;margin-left:8px}
.term dd{color:var(--ink-soft);font-size:14.5px;margin-top:4px}
.term dd strong{color:var(--ink)}
.no-results{display:none;color:var(--ink-soft);font-style:italic;padding:20px 0}

/* ---------- checklist ---------- */
.check-progress{
  background:var(--card);border:1.5px solid var(--ink);border-radius:8px;padding:18px 22px;
  margin-top:30px;box-shadow:4px 4px 0 rgba(23,52,40,.12);
}
.check-progress .bar{height:14px;background:var(--rule);border-radius:7px;overflow:hidden;margin-top:8px}
.check-progress .bar .fill{height:100%;background:var(--credit);width:0%;transition:width .3s ease}
.check-progress .stat{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
.check-item{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--credit);
  border-radius:6px;padding:16px 18px;margin-bottom:10px;cursor:pointer;
}
.check-item input{width:20px;height:20px;accent-color:var(--credit);margin-top:3px;flex-shrink:0;cursor:pointer}
.check-item .body h3{font-family:var(--slab);font-weight:600;font-size:17px}
.check-item .body p{color:var(--ink-soft);font-size:14px;margin-top:2px}
.check-item.done{opacity:.55}
.check-item.done .body h3{text-decoration:line-through}

/* ---------- misc ---------- */
.backlink{font-family:var(--mono);font-size:13px;margin-top:20px;display:inline-block;color:var(--credit);text-decoration:none}
.backlink:hover{text-decoration:underline}
.note-box{
  background:var(--card);border:1px dashed var(--rule);border-radius:6px;
  padding:14px 18px;font-size:14px;color:var(--ink-soft);margin:20px 0;
}
footer.site-foot{
  margin-top:64px;border-top:3px double var(--ink);padding:26px 0 60px;
  font-size:13.5px;color:var(--ink-soft);
}
footer.site-foot p+p{margin-top:8px}
footer.site-foot a{color:var(--credit)}