:root{
  --paper:#f3ede0;
  --paper-2:#ece4d3;
  --ink:#17140d;
  --ink-soft:#4a4535;
  --rule:#cbb98d;
  --rule-soft:#ddd0ac;
  --green:#1f5c3d;
  --green-deep:#123b27;
  --red:#9c2b1e;
  --red-soft:#c25a48;
  --gold:#b08420;
  --shadow:rgba(23,20,13,.14);
  --maxw:1080px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Public Sans",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}

/* grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* masthead */
.masthead{
  border-bottom:3px double var(--ink);
  background:
    repeating-linear-gradient(90deg,transparent,transparent 39px,var(--rule-soft) 39px,var(--rule-soft) 40px),
    var(--paper-2);
  padding:34px 0 40px;
  position:relative;
}
.mast-row{display:flex;align-items:center;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.ledger-mark{
  display:flex;font-family:var(--mono);font-weight:600;font-size:12px;
  border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;flex:none;
}
.ledger-mark span{padding:5px 11px;letter-spacing:.08em}
.ledger-mark span:first-child{background:var(--green);color:var(--paper);border-right:1.5px solid var(--ink)}
.ledger-mark span:last-child{background:var(--red);color:var(--paper)}
.kicker{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-soft);
  text-transform:uppercase;margin:0;
}
h1{
  font-family:var(--serif);font-weight:900;font-optical-sizing:auto;
  font-size:clamp(3.4rem,10vw,7rem);line-height:.9;letter-spacing:-.02em;
  margin:0 0 14px;
}
.subhead{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,3.4vw,1.9rem);
  line-height:1.28;max-width:30ch;margin:0 0 22px;color:var(--green-deep);
}
.byline{font-size:14.5px;color:var(--ink-soft);max-width:62ch;margin:0}
abbr{text-decoration:none;font-variant:small-caps;letter-spacing:.02em;font-weight:600}

/* nav */
.tabnav{
  position:sticky;top:0;z-index:50;
  background:var(--ink);border-bottom:2px solid var(--gold);
}
.tabnav .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.tabnav .wrap::-webkit-scrollbar{display:none}
.tabnav a{
  color:var(--paper);text-decoration:none;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.03em;padding:13px 17px;white-space:nowrap;
  border-right:1px solid rgba(243,237,224,.14);transition:background .18s,color .18s;
}
.tabnav a:hover{background:var(--green);color:#fff}

/* sections */
main{padding:20px 0 60px}
section{padding:64px 0;border-bottom:1px solid var(--rule-soft)}
section:last-child{border-bottom:none}
.sec-num{
  font-family:var(--mono);font-size:13px;color:var(--red);font-weight:600;
  letter-spacing:.2em;margin:0 0 6px;
}
h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5.4vw,3.2rem);
  line-height:1;letter-spacing:-.02em;margin:0 0 26px;
}
h3{
  font-family:var(--sans);font-weight:700;font-size:1.16rem;letter-spacing:-.01em;
  margin:0 0 4px;
}
.lede p,.sec-intro{font-size:1.14rem;line-height:1.6;max-width:66ch}
.lede em,.sec-intro em{font-style:italic;color:var(--green-deep)}
.sec-intro{margin:0 0 34px;color:var(--ink)}
.sec-intro strong{color:var(--green-deep)}
p{margin:0 0 16px}

/* stat band */
.statband{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
  border:1.5px solid var(--ink);background:var(--paper-2);
}
.stat{
  padding:22px 20px;border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:7px;position:relative;
}
.stat:last-child{border-right:none}
.stat.cost{background:rgba(156,43,30,.06)}
.stat-fig{
  font-family:var(--serif);font-weight:900;font-size:2.5rem;line-height:.95;
  color:var(--green-deep);letter-spacing:-.02em;
}
.stat.cost .stat-fig{color:var(--red)}
.stat-fig .unit{font-size:1.4rem;vertical-align:baseline}
.stat-lab{font-size:13.5px;line-height:1.35;color:var(--ink-soft)}
.stat-src{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);margin-top:auto;padding-top:6px;font-weight:600;
}

/* chart cards */
.chart-card{
  border:1.5px solid var(--ink);background:#f7f2e8;margin:30px 0;
  padding:24px 24px 20px;box-shadow:4px 4px 0 var(--shadow);
}
.chart-card.slim{margin:0}
.chart-sub{font-size:13.5px;color:var(--ink-soft);max-width:70ch;margin:0 0 18px}
.chart{width:100%;position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart-note{
  font-size:13px;color:var(--ink-soft);border-top:1px solid var(--rule-soft);
  padding-top:12px;margin:16px 0 0;font-style:italic;
}

/* chart svg element styling */
.axis-line{stroke:var(--ink);stroke-width:1.2}
.grid-line{stroke:var(--rule-soft);stroke-width:1}
.tick-txt{font-family:var(--mono);font-size:11px;fill:var(--ink-soft)}
.bar-lab{font-family:var(--mono);font-size:11px;fill:var(--ink-soft)}
.val-lab{font-family:var(--mono);font-size:11px;fill:var(--ink);font-weight:600}
.bar{transition:opacity .15s}
.bar:hover{opacity:.78}

/* callouts */
.callout{
  border-left:4px solid var(--green);background:rgba(31,92,61,.05);
  padding:20px 24px;margin:30px 0;
}
.callout.warn{border-left-color:var(--red);background:rgba(156,43,30,.055)}
.callout-h{font-family:var(--sans);font-weight:700;font-size:1.05rem;margin:0 0 8px;color:var(--green-deep)}
.callout.warn .callout-h{color:var(--red)}
.callout p:last-child{margin-bottom:0}
.src-line{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);margin-top:10px}
cite{font-style:italic}

/* two column */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0}
.minicard{border:1px solid var(--rule);padding:20px 22px;background:var(--paper-2)}
.mini-h{font-family:var(--sans);font-weight:700;font-size:1rem;margin:0 0 8px;color:var(--green-deep)}
.minicard p:last-child{margin-bottom:0}
.minicard p{font-size:15px;line-height:1.55}

/* flow list */
.flow{list-style:none;counter-reset:flow;padding:0;margin:0 0 34px}
.flow li{
  position:relative;padding:22px 0 22px 74px;border-bottom:1px dashed var(--rule);
}
.flow li:last-child{border-bottom:none}
.flow li::before{
  counter-increment:flow;content:counter(flow);
  position:absolute;left:0;top:22px;
  font-family:var(--serif);font-weight:900;font-size:2.6rem;line-height:.8;
  color:var(--rule);width:60px;text-align:center;
}
.flow-step{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper);background:var(--green);
  padding:3px 10px;margin-bottom:8px;font-weight:600;
}
.flow p{font-size:15.5px;margin:0 0 8px}
.flow p:last-child{margin-bottom:0}
.fig{font-family:var(--mono);color:var(--green-deep);font-weight:600;font-size:.96em}

/* state table */
.table-controls{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.table-controls button{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  border:1.3px solid var(--ink);background:var(--paper);color:var(--ink);
  padding:6px 13px;cursor:pointer;transition:all .15s;
}
.table-controls button.active,.table-controls button:hover{background:var(--ink);color:var(--paper)}
#state-table{overflow-x:auto}
.stbl{width:100%;border-collapse:collapse;font-size:14px}
.stbl th{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);padding:7px 10px;
  border-bottom:1.5px solid var(--ink);
}
.stbl th.num,.stbl td.num{text-align:right;font-family:var(--mono)}
.stbl td{padding:6px 10px;border-bottom:1px solid var(--rule-soft)}
.stbl tr:hover td{background:rgba(31,92,61,.045)}
.stbl .rank{color:var(--rule);font-family:var(--mono);width:34px}
.stbl .barcell{position:relative;width:34%}
.stbl .barfill{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  height:15px;background:var(--green);opacity:.24;
}
.stbl .stname{font-weight:600}

/* tenants */
.tstat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}
.tstat{border:1px solid var(--rule);padding:18px 18px;background:var(--paper-2)}
.tstat .tfig{font-family:var(--serif);font-weight:900;font-size:2.1rem;color:var(--green-deep);line-height:1;display:block;margin-bottom:6px}
.tstat .tlab{font-size:13px;color:var(--ink-soft);line-height:1.35}

/* sources */
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0 34px}
.src-item{border:1px solid var(--rule);padding:20px 22px;background:#f7f2e8}
.src-name{font-family:var(--sans);font-weight:700;font-size:1rem;margin:0 0 8px;color:var(--ink)}
.src-item p{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 12px}
.src-item a{font-family:var(--mono);font-size:12.5px;color:var(--green);text-decoration:none;border-bottom:1px solid var(--green);padding-bottom:1px}
.src-item a:hover{color:var(--red);border-color:var(--red)}
.method-notes{border:1.5px solid var(--ink);padding:24px 26px;background:var(--paper-2)}
.method-notes ul{margin:14px 0 0;padding-left:20px}
.method-notes li{font-size:15px;line-height:1.5;margin-bottom:10px}
.method-notes li:last-child{margin-bottom:0}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:34px 0}
.foot .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ai-btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--red);color:#fff;border:none;padding:9px 16px;cursor:pointer;font-weight:600;
  transition:background .18s;
}
.ai-btn:hover{background:var(--red-soft)}
.foot-note{font-size:13px;color:rgba(243,237,224,.7);margin:0;flex:1;min-width:220px}

/* ai popover */
.ai-popover{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:200;
  background:var(--green-deep);color:var(--paper);max-width:440px;width:calc(100% - 40px);
  padding:26px 28px;border:2px solid var(--gold);box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.ai-popover[hidden]{display:none}
.ai-pop-h{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0 0 10px}
.ai-popover p{font-size:14.5px;line-height:1.55;margin:0}
.ai-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--paper);font-size:26px;cursor:pointer;line-height:1}

/* reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:820px){
  .statband{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .stat{border-bottom:1px solid var(--rule)}
  .two-col{grid-template-columns:1fr}
  .src-grid{grid-template-columns:1fr}
  .tstat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  body{font-size:16px}
  .statband{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--rule)}
  .tstat-grid{grid-template-columns:1fr}
  .flow li{padding-left:0;padding-top:52px}
  .flow li::before{top:0;left:0;text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}