/* ==========================================================
   TOKENS
   Ledger-paper palette: a pale green-grey sheet, green-black ink,
   accounting green for the primary action, red ink for losses.
========================================================== */
:root{
  --paper:#F3F5F0;
  --paper-2:#FAFBF8;
  --ink:#1B2320;
  --ink-2:#47524B;
  --rule:#C7CFC4;
  --green:#1E5B45;
  --green-hover:#154334;
  --on-green:#FFFFFF;
  --red:#A52E1C;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --radius:4px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#101512;
  --paper-2:#171E19;
  --ink:#E9EEE7;
  --ink-2:#A9B5AD;
  --rule:#2D372F;
  --green:#7FD2A8;
  --green-hover:#9BE0BD;
  --on-green:#0C1A12;
  --red:#FF9381;
  color-scheme:dark;
}

/* ==========================================================
   BASE
========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;font-optical-sizing:auto;color:var(--ink);margin:0}
p{margin:0 0 1em}
ul,ol,dl,dd{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--radius);z-index:100;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.muted{color:var(--ink-2)}
.tlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--green)}
.tlink:hover{text-decoration-thickness:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:var(--radius);font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent;text-align:center}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-primary:hover{background:var(--green-hover)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--paper-2)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:.9375rem}
/* ==========================================================
   HEADER
========================================================== */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:8px;min-height:64px}
.brand{font:600 1.35rem/1 var(--serif);letter-spacing:-.01em;text-decoration:none;margin-right:auto;padding-block:14px}
.nav{display:none}
.nav ul{list-style:none}
.nav a:not(.btn){text-decoration:none;padding:10px 4px;display:inline-block}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--green);text-decoration-thickness:2px}
.nav.open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:8px clamp(20px,4vw,40px) 20px}
.nav.open li{border-bottom:1px solid var(--rule)}
.nav.open a:not(.btn){display:block;padding:14px 0;font-weight:500}
.nav.open .btn{margin-top:16px;width:100%}
.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer}
.icon-btn:hover{background:var(--paper-2)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:block}
@media (min-width:820px){
  .nav,.nav.open{display:flex;position:static;align-items:center;gap:28px;padding:0;border:0;background:none;margin-right:12px}
  .nav ul{display:flex;gap:22px}
  .nav.open li{border:0}
  .nav.open a:not(.btn){display:inline-block;padding:10px 4px;font-weight:400}
  .nav.open .btn{margin:0;width:auto}
  .menu-btn{display:none}
}
.ledger{list-style:none;border-top:2px solid var(--ink)}
.ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.ledger li:last-child{border-bottom:3px double var(--ink)}
.ledger .what{font-size:1rem;line-height:1.4}
.basis{display:block;font-size:.8125rem;color:var(--ink-2);margin-top:3px}
.basis::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.5em;background:var(--green)}
.basis.modeled::before{background:transparent;border:1.5px dashed var(--ink-2)}
.fig{font:600 1.65rem/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}
.fig.neg{color:var(--red)}
.fig.modeled{text-decoration:underline dashed;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--ink-2)}
.case-meta{font-size:.9375rem;color:var(--ink-2);margin-bottom:18px}
.conclusion{font:500 clamp(1.12rem,2vw,1.3rem)/1.5 var(--serif);max-width:38em;margin-bottom:24px;padding-left:16px;border-left:3px solid var(--green)}
.conclusion strong{display:block;font:600 .9375rem/1.4 var(--sans);color:var(--ink-2);margin-bottom:2px}
.case-links{display:flex;flex-wrap:wrap;gap:0 24px;margin:12px 0 0;font-weight:500}
.case-links a{display:inline-block;padding-block:8px}
/* Footer */
.site-footer{border-top:1px solid var(--rule);padding-block:32px 44px;font-size:.9375rem;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
.foot p{margin:0}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}
.foot a{color:var(--ink)}

/* ==========================================================
   SUBPAGES (About and case-study pages)
========================================================== */
.page{padding-block:clamp(28px,5vw,56px) clamp(52px,8vw,96px)}
.article{max-width:760px}
.crumbs{font-size:.9375rem;color:var(--ink-2);margin:0 0 22px}
.crumbs a{color:var(--ink-2)}
.page h1{font-size:clamp(1.9rem,4.8vw,3rem);line-height:1.1;letter-spacing:-.018em;margin-bottom:.45em;max-width:20em}
.page .case-meta{margin-bottom:10px}
.byline{font-size:.9375rem;color:var(--ink-2);margin:0 0 28px}
.page-img{margin:0 0 32px}
.page-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--rule);border-radius:var(--radius)}
.page h2{font-size:clamp(1.3rem,2.3vw,1.7rem);line-height:1.2;letter-spacing:-.01em;margin:48px 0 14px;padding-top:28px;border-top:1px solid var(--rule)}
.page h2.first{margin-top:36px}
.page p{max-width:62ch}
.page ul.bul{margin:0 0 1em;padding-left:1.2em;max-width:62ch}
.page ul.bul li{margin-bottom:.6em}
.page .conclusion{margin-top:8px}
.note{font-size:.9375rem;color:var(--ink-2)}
.doc-links{list-style:none;display:grid;gap:4px;margin:6px 0 0}
.doc-links a{display:inline-block;padding-block:6px}
.cta-box{margin-top:52px;padding:clamp(20px,3vw,28px);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2)}
.cta-box h2{margin:0 0 10px;padding:0;border:0;font-size:1.35rem}
.cta-box p{margin-bottom:18px}
.cta-box .links{margin:16px 0 0;font-size:.9375rem}
.related{list-style:none;display:grid;gap:4px;margin:0}
.related a{display:inline-block;padding-block:6px}
.about-top{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:8px}
@media (min-width:720px){.about-top{grid-template-columns:200px minmax(0,1fr);gap:36px}}
.about-top img{width:200px;height:200px;max-width:100%;object-fit:cover;object-position:center top;border:1px solid var(--rule);border-radius:var(--radius)}
.about-top p{margin:0 0 .6em}
.role{font:500 clamp(1.1rem,2vw,1.3rem)/1.4 var(--serif);max-width:30em}

/* ==========================================================
   INTRO VIDEO (poster first; YouTube loads only on click)
========================================================== */
.intro{margin:28px 0 0}
.intro-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.intro-poster{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);color:var(--ink);text-decoration:none}
.intro-poster img{width:100%;height:100%;object-fit:cover;object-position:center top;border-right:1px solid var(--rule)}
.intro-copy{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(12px,3vw,28px) clamp(12px,3vw,28px) clamp(12px,3vw,28px) clamp(14px,3.2vw,32px)}
.intro-kicker{font:500 .8125rem/1.2 var(--sans);color:var(--ink-2)}
.intro-line{font:600 clamp(1rem,2.5vw,1.6rem)/1.2 var(--serif);letter-spacing:-.01em}
.intro-line .loss{color:var(--red)}
.intro-go{display:inline-flex;align-items:center;gap:10px;margin-top:4px;font:600 .9375rem/1 var(--sans)}
.intro-icon{width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--on-green);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.intro-icon svg{width:15px;height:15px;fill:currentColor;margin-left:2px}
.intro-poster:hover .intro-icon{background:var(--green-hover)}
.intro-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.intro-note{margin:12px 0 0;font-size:.9375rem;color:var(--ink-2)}
.intro-note strong{color:var(--ink)}
@media (max-width:480px){.intro-poster{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}.intro-go span:last-child{display:none}.intro-copy{gap:6px}}
.intro-plain .intro-poster{grid-template-columns:minmax(0,1fr)}
.intro-plain .intro-copy{padding:clamp(18px,5vw,48px);border-left:4px solid var(--green)}
.intro-plain .intro-line{font-size:clamp(1.2rem,3.4vw,2rem);max-width:18em}
@media (max-width:480px){.intro-plain .intro-go span:last-child{display:inline}}