/* ============================================================
   VERNA · The Ledger — shared design system
   Path A (council-approved). Tokens · one scale · 8px grid.
   Motion: transform/opacity only, reduced-motion gated.
   ============================================================ */
:root{
  --canvas:#F4F2ED; --raise:#FBFAF6; --ink:#16181C; --ink-2:#3A3D42; --graphite:#6B6B66; --faint:#A6A299;
  --line:rgba(22,24,28,.13); --line-2:rgba(22,24,28,.07);
  --accent:#1C3A2E; --accent-2:#2C5C49; --accent-tint:rgba(28,58,46,.06); --warn:#8A2F23;
  --sans:"Switzer",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --t1:13px; --t2:16px; --t3:21px; --t4:34px; --t5:55px; --t6:89px; --u:8px; --max:1296px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:var(--t2);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden;height:100vh}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,4vw,56px)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:300;letter-spacing:-.02em;line-height:1.02}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.accent{color:var(--accent)}

/* reveal + masked line */
.rv{opacity:0;transform:translateY(14px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;transform:translateY(112%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.mask.in>span,.reveal .mask>span{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}.mask>span{transform:none}}

/* progress + custom cursor */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:60;transition:width .1s linear}
#cur{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:70;transform:translate(-50%,-50%);transition:width .3s cubic-bezier(.16,1,.3,1),height .3s,background .3s,opacity .3s,border-color .3s;opacity:0}
#cur.on{opacity:1}
#cur.hot{width:56px;height:56px;background:var(--accent-tint);border-color:var(--accent-2)}
@media(hover:none){#cur{display:none}}

/* intro */
#intro{position:fixed;inset:0;z-index:90;background:var(--canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*3);transition:transform 1s cubic-bezier(.76,0,.24,1)}
#intro.done{transform:translateY(-101%)}
#intro .mk{width:42px;height:42px;opacity:0;animation:imk .8s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes imk{from{opacity:0;transform:translateY(8px) rotate(-8deg)}to{opacity:1;transform:none}}
#intro .wm{font-size:22px;letter-spacing:.4em;font-weight:500;padding-left:.4em;opacity:0;animation:imk .8s cubic-bezier(.16,1,.3,1) .25s forwards}
#intro .ct{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--graphite);position:absolute;bottom:40px;left:50%;transform:translateX(-50%)}
#intro .ln{position:absolute;bottom:34px;left:0;height:1px;background:var(--accent);width:0}

/* nav */
nav{position:sticky;top:0;z-index:40;background:rgba(244,242,237,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:.18em;font-weight:500}
.brand svg{width:22px;height:22px}
.nlinks{display:flex;gap:36px}
.nlinks a{font-size:13.5px;color:var(--ink-2);position:relative}
.nlinks a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nlinks a:hover:after,.nlinks a.on:after{transform:scaleX(1);transform-origin:left}
.nlinks a.on{color:var(--accent)}
.portal{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--canvas);background:var(--accent);padding:10px 18px;border-radius:2px;transition:opacity .35s}
.portal:hover{opacity:.86}
@media(max-width:760px){.nlinks{display:none}}

/* page hero (sub-pages) */
.phero{position:relative;padding:calc(var(--u)*14) 0 calc(var(--u)*11);overflow:hidden;border-bottom:1px solid var(--line-2)}
.phero .grid-bg{position:absolute;inset:-10%;z-index:0;opacity:.5;pointer-events:none;background-image:radial-gradient(circle,var(--line) 1px,transparent 1.5px);background-size:32px 32px;-webkit-mask-image:radial-gradient(120% 90% at 82% 6%,#000,transparent 70%);mask-image:radial-gradient(120% 90% at 82% 6%,#000,transparent 70%)}
.phero .wrap{position:relative;z-index:1}
.phero .eyebrow{margin-bottom:calc(var(--u)*4);display:inline-block}
.phero h1{font-size:clamp(40px,7vw,116px);max-width:16ch}
.phero h1 em{font-style:italic}
.phero .sub{margin-top:calc(var(--u)*4);max-width:56ch;font-size:clamp(16px,1.4vw,var(--t3));color:var(--ink-2);line-height:1.55}
.metarow{margin-top:calc(var(--u)*5);display:flex;flex-wrap:wrap;gap:0}
.metarow .m{padding:0 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.metarow .m:first-child{padding-left:0;border-left:0}
.metarow .m .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.metarow .m .v{font-size:14px;color:var(--ink)}
@media(max-width:620px){.metarow .m{padding:0 14px}}
.phero .mono-mk{position:absolute;right:-4%;top:-14%;width:min(58vw,720px);z-index:0;opacity:.05;pointer-events:none}
.phero .row{margin-top:calc(var(--u)*6);display:flex;align-items:center;gap:calc(var(--u)*3);flex-wrap:wrap}
.phero.tall{padding:calc(var(--u)*16) 0 calc(var(--u)*13)}

/* buttons */
.btn{position:relative;display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:14px 24px;border-radius:2px;will-change:transform}
.btn-ink{background:var(--accent);color:var(--canvas)}
.btn-line{border:1px solid var(--line);color:var(--ink);transition:background .4s}
.btn-line:hover{background:rgba(22,24,28,.04)}
.scrollcue{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* section frame */
section{padding:calc(var(--u)*13) 0;border-top:1px solid var(--line-2);position:relative}
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:calc(var(--u)*7)}
.shead .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}
.shead h2{font-size:clamp(24px,3vw,var(--t4));max-width:22ch}
.callout{font-size:var(--t3);line-height:1.65;color:var(--ink-2);max-width:74ch;border-left:2px solid var(--accent);padding-left:calc(var(--u)*3)}
.callout b{color:var(--ink);font-weight:500}
.callout.warn{border-color:var(--warn)}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.kpis .k{padding:calc(var(--u)*4) calc(var(--u)*3) calc(var(--u)*5);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis .k .v{font-size:var(--t5);font-weight:300;line-height:.92;letter-spacing:-.03em}
.kpis .k .v.acc{color:var(--accent)}.kpis .k .v.warn{color:var(--warn)}
.kpis .k .lbl{margin-top:calc(var(--u)*2);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.kpis .k .d{margin-top:6px;font-size:13px;color:var(--ink-2);line-height:1.45}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}}
.kpis.k3{grid-template-columns:repeat(3,1fr)}
.kpis.k2{grid-template-columns:repeat(2,1fr)}

/* candor */
.candor .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:calc(var(--u)*4)}
.candor h2{font-size:clamp(30px,5vw,var(--t5));max-width:16ch}
.candor h2 em{font-style:italic}
.candor .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:calc(var(--u)*8);align-items:end;margin-top:calc(var(--u)*5)}
.candor .sub{color:var(--ink-2);font-size:var(--t3);line-height:1.7;max-width:52ch}
.candor .stat{border-top:1px solid var(--ink);padding-top:calc(var(--u)*2)}
.candor .stat .n{font-size:var(--t5);font-weight:300;letter-spacing:-.03em}
.candor .stat .t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);margin-top:6px}
@media(max-width:760px){.candor .grid{grid-template-columns:1fr;gap:calc(var(--u)*5)}}

/* matrix */
.mtx-wrap{overflow-x:auto}
table.mtx{width:100%;border-collapse:collapse;min-width:760px}
table.mtx thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);font-weight:400;text-align:center;padding:0 0 calc(var(--u)*3);border-bottom:1px solid var(--ink);vertical-align:bottom}
table.mtx thead th.l{text-align:left}table.mtx thead th.r{text-align:right}
table.mtx th.sortable{cursor:pointer;transition:color .3s}
table.mtx th.sortable:hover{color:var(--ink)}
table.mtx th.sortable .ar{opacity:.5}
.mrow{border-bottom:1px solid var(--line-2);cursor:pointer;transition:background .35s}
.mrow:hover{background:rgba(22,24,28,.025)}
.mrow.lead{background:var(--accent-tint)}
.mrow td{padding:calc(var(--u)*3) 8px;vertical-align:middle;text-align:center}
.mrow td.proj{text-align:left;min-width:230px}
.mrow td.proj .nm{font-size:var(--t3);font-weight:400;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.mrow.lead td.proj .nm:after{content:"LEAD";font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:2px 5px}
.mrow td.proj .lane{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:transparent;border:1px solid var(--line)}
.dot.f{background:var(--ink);border-color:var(--ink)}
.dot.h{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);border-color:var(--ink)}
.mrow.lead .dot.f{background:var(--accent);border-color:var(--accent)}
.mrow.lead .dot.h{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%);border-color:var(--accent)}
.mrow td.score{text-align:right;font-family:var(--mono);font-size:var(--t3);font-weight:500;font-feature-settings:"tnum" 1}
.mrow.lead td.score{color:var(--accent)}
.mrow td.score .nd{color:var(--faint);font-size:13px}
.mrow td.stage{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.mrow td .exp{display:inline-block;width:14px;color:var(--faint);font-family:var(--mono);transition:transform .35s}
.mrow.open td .exp{transform:rotate(90deg)}
.detail td{padding:0;border-bottom:1px solid var(--line-2)}
.detail .inner{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.16,1,.3,1)}
.detail.open .inner{max-height:240px}
.detail .pad{padding:0 8px calc(var(--u)*4) 8px;display:grid;grid-template-columns:auto 1fr;gap:6px calc(var(--u)*4);font-size:14px;color:var(--ink-2);line-height:1.6}
.detail .pad .dk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);padding-top:3px}
.mtx-key{margin-top:calc(var(--u)*3);display:flex;gap:calc(var(--u)*3);flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.mtx-key span{display:inline-flex;align-items:center;gap:7px}

/* bars / gap */
.split{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*9)}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:calc(var(--u)*8)}}
.subh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:calc(var(--u)*4)}
.bar{display:grid;grid-template-columns:118px 1fr 52px;align-items:center;gap:18px;padding:calc(var(--u)*2) 0;border-top:1px solid var(--line-2)}
.bar:first-of-type{border-top:0}
.bar .nm{font-size:14px;color:var(--ink-2)}
.bar .tk{height:2px;background:var(--line);position:relative}
.bar .fl{position:absolute;left:0;top:-1px;height:4px;background:var(--ink);width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.bar.lead .fl{background:var(--accent)}
.bar.in .fl{width:var(--w)}
.bar .vl{font-family:var(--mono);font-size:16px;text-align:right;font-feature-settings:"tnum" 1}
.gap{display:flex;flex-direction:column;gap:calc(var(--u)*4)}
.gapunit .gl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.gapunit .gl .gt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.gapunit .gl .gn{font-size:var(--t4);font-weight:300;letter-spacing:-.02em}
.gapunit .gl .gn.red{color:var(--warn)}
.gapunit .track{height:8px;background:var(--line-2);position:relative;overflow:hidden}
.gapunit .fill{position:absolute;left:0;top:0;height:8px;width:0;transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.gapunit.in .fill{width:var(--w)}
.gapunit .fill.ink{background:var(--ink)}.gapunit .fill.acc{background:var(--accent)}
.gap .cap{font-size:13.5px;color:var(--ink-2);line-height:1.6;border-left:2px solid var(--accent);padding-left:14px}

/* lanes / generic card grid */
.cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.cells.c2{grid-template-columns:repeat(2,1fr)}
.cell-a{padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*6);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s;display:block}
.cell-a:hover{background:var(--raise)}
.cell-a .no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.cell-a h3{font-size:var(--t4);margin:calc(var(--u)*3) 0 calc(var(--u)*2)}
.cell-a p{font-size:14px;color:var(--ink-2);line-height:1.6;min-height:84px}
.cell-a .go{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;transition:gap .35s}
.cell-a:hover .go{gap:14px;color:var(--accent)}
@media(max-width:760px){.cells,.cells.c2{grid-template-columns:1fr}}

/* pipeline (mergers) */
.pipe{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pipe .st{padding:calc(var(--u)*3) calc(var(--u)*2) calc(var(--u)*4);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-top:2px solid var(--accent)}
.pipe .st .n{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.pipe .st .c{font-size:var(--t4);font-weight:300;margin-top:8px}
.pipe .st .s{font-size:11.5px;color:var(--ink-2);margin-top:4px;line-height:1.4}
@media(max-width:900px){.pipe{grid-template-columns:repeat(2,1fr)}}
.check{list-style:none}
.check li{padding:11px 0 11px 26px;position:relative;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--ink-2);line-height:1.5}
.check li:first-child{border-top:0}
.check li:before{content:"";position:absolute;left:0;top:16px;width:11px;height:11px;border:1px solid var(--accent)}

/* chips + data table */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:calc(var(--u)*2)}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:6px 11px}
table.data{width:100%;border-collapse:collapse;min-width:680px}
table.data th{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);font-weight:400;text-align:left;padding:0 16px calc(var(--u)*2) 0;border-bottom:1px solid var(--ink)}
table.data th.r{text-align:right}
table.data td{padding:calc(var(--u)*2) 16px calc(var(--u)*2) 0;border-bottom:1px solid var(--line-2);font-size:14px;vertical-align:top}
table.data td.r{text-align:right;font-family:var(--mono);font-feature-settings:"tnum" 1}
table.data td b{font-weight:500}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap}
.tag.go{color:var(--accent);background:var(--accent-tint)}
.tag.warnt{color:var(--warn);background:rgba(138,47,35,.08)}
.tag.mut{color:var(--graphite);background:rgba(22,24,28,.05)}

/* project (greenfield) */
.proj-card{border-top:1px solid var(--line);padding:calc(var(--u)*5) 0;display:grid;grid-template-columns:minmax(220px,1fr) 2fr auto;gap:calc(var(--u)*5);align-items:start}
.proj-card .head h3{font-size:var(--t4)}
.proj-card .head .url{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:6px;display:inline-block}
.proj-card .head .score{font-family:var(--mono);font-size:13px;color:var(--graphite);margin-top:10px}
.proj-card .body p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.proj-card .body .stack{margin-top:calc(var(--u)*2)}
.proj-card .side{text-align:right;min-width:130px}
.proj-card .side .st{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.proj-card .side .rev{font-size:var(--t4);font-weight:300;margin-top:8px}
.proj-card .side .rev.z{color:var(--warn)}
@media(max-width:760px){.proj-card{grid-template-columns:1fr;gap:calc(var(--u)*3)}.proj-card .side{text-align:left}}

/* footer */
footer{border-top:1px solid var(--ink);padding:calc(var(--u)*6) 0 calc(var(--u)*10)}
.ticker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink);display:flex;flex-wrap:wrap;gap:0 14px;align-items:center}
.ticker .sep{color:var(--faint)}.ticker .blink{color:var(--accent)}
.frow{margin-top:calc(var(--u)*5);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.frow .pv{font-size:12px;color:var(--graphite);max-width:62ch;line-height:1.6}
.frow .lock{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);text-align:right;line-height:1.8}
.preview{position:fixed;z-index:50;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--canvas);background:var(--accent);padding:7px 16px;border-radius:2px}