/* FinanceHomebase — design tokens
   ink:   #0F1B2D  paper: #F2F4F3  mint: #16A394  amber: #E8A33D  line: #D8DDD9
   display: 'Space Grotesk'  body: 'Inter'  figures: 'IBM Plex Mono'
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#0F1B2D; --paper:#F2F4F3; --paper-2:#E7EBE9; --mint:#16A394; --mint-dark:#0E7A69;
  --amber:#E8A33D; --line:#D8DDD9; --grey:#5B6670;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.01em; }
.mono, .figure, input, .ledger-row output { font-family:'IBM Plex Mono',monospace; font-variant-numeric: tabular-nums; }
a{color:var(--mint-dark);}
a:focus-visible, button:focus-visible, input:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
header.site{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:10;}
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px;}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk'; font-weight:700; font-size:1.25rem; color:var(--ink); text-decoration:none;}
.brand .mark{ width:28px; height:28px; border-radius:6px; background:var(--ink); color:var(--mint); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono'; font-size:14px;}
nav.main a{ color:var(--ink); text-decoration:none; margin-left:22px; font-size:0.95rem; font-weight:500;}
nav.main a:hover{ color:var(--mint-dark); }

.hero{ padding:64px 0 40px; border-bottom:1px solid var(--line);}
.hero .eyebrow{ font-family:'IBM Plex Mono'; color:var(--mint-dark); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em;}
.hero h1{ font-size:2.6rem; margin:10px 0 14px; max-width:16ch;}
.hero p.lead{ max-width:56ch; color:var(--grey); font-size:1.08rem;}

.ledger{
  background:var(--ink); color:var(--paper); border-radius:14px; padding:28px;
  margin-top:36px; box-shadow:0 12px 30px rgba(15,27,45,0.18);
}
.ledger h2{ color:var(--paper); font-size:1.15rem; margin:0 0 4px;}
.ledger .sub{ color:#9FB3AE; font-size:0.9rem; margin-bottom:20px;}
.ledger-row{ display:grid; grid-template-columns: 1fr 140px; gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.08);}
.ledger-row label{ font-size:0.95rem; color:#D7E4E1;}
.ledger-row input{ width:100%; padding:8px 10px; background:#16233A; border:1px solid #2A3B52; color:var(--paper); border-radius:6px; font-size:0.95rem;}
.ledger-result{ display:flex; justify-content:space-between; align-items:baseline; padding-top:18px; margin-top:8px;}
.ledger-result .label{ color:#9FB3AE; font-size:0.9rem;}
.ledger-result output{ font-size:2rem; color:var(--mint); font-weight:600;}
.ledger-note{ font-size:0.8rem; color:#8496A6; margin-top:14px;}

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:44px 0;}
.card{ border:1px solid var(--line); border-radius:10px; padding:20px; background:#fff;}
.card .tag{ font-family:'IBM Plex Mono'; font-size:0.72rem; color:var(--mint-dark); text-transform:uppercase; letter-spacing:0.06em;}
.card h3{ margin:8px 0 6px; font-size:1.05rem;}
.card p{ color:var(--grey); font-size:0.92rem; margin:0;}
.card a.readmore{ display:inline-block; margin-top:10px; font-size:0.88rem; font-weight:600;}

.ad-slot{ border:1px dashed #B7C0BC; border-radius:8px; padding:22px; text-align:center; color:#8A938E; font-size:0.82rem; margin:36px 0; background:#EDF1EF;}
.ad-slot span{ display:block; font-family:'IBM Plex Mono'; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px;}

section.section{ padding:36px 0;}
section.section h2{ font-size:1.6rem; margin-bottom:6px;}
section.section p.section-sub{ color:var(--grey); margin-top:0;}

article.post{ max-width:70ch; margin:0 auto; padding:48px 24px;}
article.post .eyebrow{ font-family:'IBM Plex Mono'; color:var(--mint-dark); font-size:0.82rem; text-transform:uppercase;}
article.post h1{ font-size:2.1rem; margin:8px 0 20px;}
article.post p{ font-size:1.05rem; color:#2B3946;}
article.post h2{ font-size:1.3rem; margin-top:34px;}
.disclaimer{ background:var(--paper-2); border-left:3px solid var(--amber); padding:14px 18px; font-size:0.9rem; color:var(--grey); border-radius:0 6px 6px 0; margin:24px 0;}

footer.site{ border-top:1px solid var(--line); margin-top:60px; padding:36px 0; color:var(--grey); font-size:0.88rem;}
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer.site a{ color:var(--grey); margin-right:16px; text-decoration:none;}
footer.site a:hover{ color:var(--mint-dark);}

@media (max-width:820px){
  .grid{ grid-template-columns:1fr; }
  .ledger-row{ grid-template-columns:1fr; }
  .hero h1{ font-size:2rem; }
}