:root{
  --hunter:#002415; --forest:#246F2F; --neon:#86BC46; --neon-hi:#86BC46; --neon-up:#97CB58; --down:#E5484D;
  --paper:#FFFFFF; --bone:#F4F5F3; --rule:#E3E5E1; --ink:#0B0F0D; --mute:#626B67;
  /* one family, one voice: Geist at a tight weight scale. display = 600, body = 400, accents = 300 */
  --display:'Geist',system-ui,-apple-system,sans-serif; --text:'Geist',system-ui,-apple-system,sans-serif; --accent:var(--display);
  --gut:clamp(20px,5vw,80px); --r:12px; --pill:999px;
  /* two vertical rhythms: content sections and the dark bands */
  --sec:clamp(56px,7vw,96px); --band:clamp(44px,5vw,68px);
  /* the type scale, largest to smallest: hero h1, page h1, section h2, list title, body, ui, small, fine, label */
  --t-hero:clamp(38px,6.6vw,92px); --t-page:clamp(30px,4.6vw,58px); --t-sec:clamp(30px,3.2vw,44px); --t-list:clamp(22px,2.1vw,28px);
  --t-body:16.5px; --t-ui:15px; --t-small:14px; --t-fine:13px; --t-label:12px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-width:thin;scrollbar-color:#B9BFBA transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background-color:#B9BFBA;border-radius:var(--pill);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:#8F9792}
/* cross-document crossfade between pages, where the browser supports it */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .26s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
*{box-sizing:border-box}
/* clip, not hidden: clip does not create a scroll container, so the sticky top bar still works */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--t-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--forest);outline-offset:3px}
.top :focus-visible,.ticker :focus-visible,.band :focus-visible,.contact :focus-visible,footer :focus-visible{outline-color:var(--neon)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0}
h2,h3{text-wrap:balance}
h1{text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.quote,.tagline,.band p{text-wrap:balance}
::selection{background:var(--hunter);color:#fff}
.contact ::selection{background:var(--neon);color:var(--hunter)}
input,textarea{caret-color:var(--neon)}
::placeholder{color:#8DA294;opacity:1}

/* the one tracked-caps label, used where a value needs a tag: event dates, the pillar names, the book status */
.soon,.lbl,.pillar b,.item .when,.hero .shot b,.jacket .vol,.jacket .byline,.tile em{
  font-family:var(--display);font-weight:500;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.soon,.lbl{color:var(--forest);margin:0 0 16px}

/* ---------- top bar : the only place green lives ---------- */
.top{background:var(--hunter);color:#fff;position:sticky;top:0;z-index:40;transition:box-shadow .3s var(--ease-out)}
.scrolled .top{box-shadow:0 12px 32px -16px rgba(0,36,21,.6)}
.top .wrap{display:flex;align-items:center;gap:40px;min-height:72px}
.mark{display:flex;flex-direction:column;line-height:1;flex:none;white-space:nowrap}
.mark .word{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.02em}
/* 10-26: the green V sits larger than the rest of the name, everywhere the name appears */
.mark .word em,.loader .l-mark em,.jacket .imprint em{font-style:normal;color:var(--neon-hi);font-size:1.4em;line-height:0;letter-spacing:-.02em}
.mark .sub{font-size:var(--t-fine);letter-spacing:.01em;color:#8FA698;margin-top:5px;font-weight:400}
.menu{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
/* no underlines: the current page is simply white, the rest sit back */
.menu a{position:relative;font-size:var(--t-ui);font-weight:500;letter-spacing:-.005em;color:rgba(255,255,255,.62);
  padding:8px 13px;border-radius:var(--pill);transition:color .18s ease,background-color .18s ease}
.menu a.here{color:#fff;background:rgba(255,255,255,.08)}
@media(hover:hover) and (pointer:fine){
  .menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
}
/* Contact Us is the header call to action: outlined pill, fills on hover. still one of the five items */
.cta-top{margin-left:10px;flex:none;font-size:var(--t-ui);font-weight:500;letter-spacing:-.005em;color:#fff;padding:8px 18px;border-radius:var(--pill);
  box-shadow:inset 0 0 0 1px var(--neon);transition:color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .12s var(--ease-out)}
.cta-top.here{background:var(--neon);color:var(--hunter)}
@media(hover:hover) and (pointer:fine){
  .cta-top:hover{background:var(--neon);color:var(--hunter)}
}
/* keyboard users get a way past the bar */
.skip{position:absolute;left:var(--gut);top:12px;transform:translateY(-72px);z-index:60;padding:10px 16px;border-radius:var(--pill);background:var(--neon);color:var(--hunter);font-weight:500;font-size:var(--t-small);transition:transform .15s var(--ease-out)}
.skip:focus{transform:none}
.skip:focus-visible{outline-color:#fff}
@media(max-width:1100px){
  .top .wrap{gap:20px}
  .menu{gap:2px}
  .menu a{padding-inline:10px}
  .cta-top{margin-left:4px}
}

/* ---------- hero ----------
   copy on the left, the portrait column on the right (the chart line holds that column until the photo lands) */
.hero{position:relative;overflow:hidden;background:var(--bone);border-bottom:1px solid var(--rule)}
.hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end;
  padding-block:clamp(80px,11vw,150px) clamp(64px,8vw,110px)}
.hero .copy{min-width:0}
.hero .shot{margin:0;position:relative;align-self:stretch}
.hero .shot img{position:absolute;inset:auto 0 calc(-1*clamp(64px,8vw,110px)) 0;height:calc(100% + clamp(64px,8vw,110px) + clamp(80px,11vw,150px));width:100%;object-fit:cover;object-position:top;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
.hero .shot b{position:absolute;right:0;bottom:-28px;color:#8A938E}
h1{font-size:var(--t-hero);line-height:.98;letter-spacing:-.04em;margin:0 0 28px}
.hero h1{margin-left:-.065em}
/* the accent phrase: same face, lighter weight, green. no italics, no underline */
h1 i{font-style:normal;font-weight:300;color:var(--forest);letter-spacing:-.035em;position:relative;display:inline-block}
.quote{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:#3E4844;max-width:44ch;margin:0 0 36px;font-weight:400}
.quote cite{display:block;font-style:normal;font-size:var(--t-small);font-weight:500;letter-spacing:-.005em;color:var(--forest);margin-top:12px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:var(--t-ui);font-weight:500;letter-spacing:-.005em;
  padding:13px 22px;border-radius:var(--pill);background:var(--hunter);color:#fff;isolation:isolate;
  transition:color .18s ease,box-shadow .18s ease,transform .12s var(--ease-out),background-color .18s ease}
/* the fill slides in from the left on hover; the label stays put */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease-out)}
/* press: a slight scale-down, 120ms (Emil Kowalski's press-feedback range) */
.btn:active,.send:active,.cta-top:active{transform:scale(.97)}
.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #C9CDC8}
.btn.alt::before{background:var(--hunter)}
@media(hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1)}
  .btn.alt:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--hunter)}
}
/* the credibility line: three even columns so the facts line up on a desktop screen (they wrapped 2 + 1) */
.cred{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;max-width:640px;
  font-size:var(--t-small);line-height:1.45;color:#3E4844;letter-spacing:-.005em}
.cred li{padding-top:12px;border-top:1px solid #C9CDC8;text-wrap:balance}
/* candlestick chart: confined to the right column, strongest at the right edge, never under the copy.
   up candles solid neon, down candles red. each candle rises from its base in sequence once the page is revealed */
.chart{position:absolute;left:auto;right:0;bottom:0;width:48%;height:64%;pointer-events:none;z-index:2;opacity:.85;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40%);mask-image:linear-gradient(to right,transparent,#000 40%)}
.chart .c line{stroke:var(--neon);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.chart .c rect{fill:var(--neon);stroke:var(--neon);stroke-width:1;vector-effect:non-scaling-stroke;rx:1.5}
.chart .c.dn line{stroke:var(--down)}
.chart .c.dn rect{fill:var(--down);stroke:var(--down)}
.chart .px{stroke:var(--neon);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 5;opacity:0;transition:opacity .6s ease}
.chart .px.on{opacity:.7}
.js .chart .c{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.ready .chart .c{animation:cup .9s var(--ease-out) calc(var(--i) * 60ms + .15s) both}
@keyframes cup{from{opacity:0;transform:translateY(16px) scaleY(.15)}to{opacity:1;transform:none}}
/* the index label: top-right of the chart column, the same 12px rule as every other label */
.idx{position:absolute;right:var(--gut);top:clamp(64px,8vw,110px);z-index:3;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:flex-end;
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:#626B67;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .6s ease}
.idx.on{opacity:1}
.idx b{font-weight:500;color:var(--ink)}
.idx .v{font-weight:500;color:var(--forest)}
.idx.dn .v{color:var(--down)}
.idx .d{color:#8A938F}
.idx small{flex-basis:100%;text-align:right;font-size:11px;letter-spacing:.04em;text-transform:none;color:#8A938F}
.phead .idx{top:clamp(40px,5vw,64px)}
/* a slow ambient wash behind the hero and page heads, so the canvas breathes under the candles */
.hero::before,.phead::before{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 36% 50% at 78% 70%,rgba(134,188,70,.16),transparent 70%);
  animation:wash 14s var(--ease-in-out) infinite alternate}
@keyframes wash{from{transform:translate(-4%,3%) scale(1)}to{transform:translate(4%,-4%) scale(1.12)}}
/* cursor spotlight: moved by transform only, from the origin, so it can never widen the document */
.glow{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(134,188,70,.11),transparent 62%);will-change:transform;transition:opacity .5s ease}
.glow.on{opacity:1}
.glow.hot{opacity:1;background:radial-gradient(circle,rgba(134,188,70,.18),transparent 60%)}

/* ---------- loading screen : a centred seal, first page of a visit only ----------
   rings draw (0-1.1s), milled edge + legend fade up, the V stamps in (1.1s), wordmark and
   tagline follow, a stamp pulse at 2.6s, then the panel lifts. Hidden without JS, skipped under
   reduced motion, and any click or key skips it (site.js). */
.loader{display:none}
.js .loader{display:flex;position:fixed;inset:0;z-index:100;color:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-inline:var(--gut);cursor:pointer;
  background:radial-gradient(ellipse 60% 50% at 50% 46%,#0B3A22 0%,var(--hunter) 62%,#001A0F 100%);
  transition:transform .8s var(--ease-in-out);will-change:transform}
.seen .loader,.js.ready .loader.gone{display:none}
.loader.out{transform:translateY(-100%)}
.loader.out .seal,.loader.out .l-mark,.loader.out .l-sub{opacity:0;transform:translateY(-14px) scale(.98);transition:opacity .35s ease,transform .5s var(--ease-out)}
.seal{width:clamp(230px,40vmin,360px);height:auto;overflow:visible;animation:s-stamp .5s var(--ease-out) 2.6s both}
.seal .s-ring{fill:none;stroke:var(--neon);stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:150px 150px}
.seal .s-outer{stroke-width:1.6;animation:s-draw 1.1s var(--ease-in-out) .15s forwards}
.seal .s-inner{stroke-width:1;stroke:rgba(134,188,70,.7);animation:s-draw 1s var(--ease-in-out) .4s forwards}
.seal .s-mill{fill:none;stroke:rgba(134,188,70,.32);stroke-width:5;stroke-dasharray:1 3.2;opacity:0;animation:l-fade .6s ease .9s forwards}
.seal .s-legend{transform-origin:150px 150px;opacity:0;animation:l-fade .6s ease 1s forwards,s-spin 40s linear 1s infinite}
.seal .s-legend text{font-family:var(--display);font-weight:500;font-size:13.5px;letter-spacing:.2em;fill:#CFE3C2}
.seal .s-core{transform-origin:150px 150px;opacity:0;animation:s-core .6s var(--ease-out) 1.1s forwards}
.seal .s-v{font-family:var(--display);font-weight:600;font-size:96px;letter-spacing:-.02em;fill:var(--neon-hi)}
.seal .s-rule{stroke:rgba(134,188,70,.55);stroke-width:1}
.seal .s-name{font-family:var(--display);font-weight:500;font-size:9.5px;letter-spacing:.32em;fill:#9FB3A6}
.loader .l-mark{margin-top:clamp(26px,4vh,40px);font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);letter-spacing:.02em;opacity:0;transform:translateY(8px);animation:l-rise .6s var(--ease-out) 1.5s forwards}
.loader .l-sub{font-size:clamp(14px,1.2vw,16px);font-weight:300;color:#9FB3A6;margin-top:10px;opacity:0;transform:translateY(8px);animation:l-rise .6s var(--ease-out) 1.75s forwards}
@keyframes s-draw{to{stroke-dashoffset:0}}
@keyframes s-spin{to{transform:rotate(360deg)}}
@keyframes s-core{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
@keyframes s-stamp{0%{transform:scale(1)}35%{transform:scale(.965)}100%{transform:scale(1)}}
@keyframes l-rise{to{opacity:1;transform:none}}
@keyframes l-fade{to{opacity:1}}

/* ---------- entrances ----------
   the main headings rise one word at a time; sections fade up once; the key phrase settles into green */
.js .ws .w{display:inline-block;clip-path:inset(-.15em -.08em -.32em -.08em)}
.js .ws .w>span{display:inline-block;transform:translateY(108%);opacity:0;transition:transform .8s var(--ease-out),opacity .5s ease}
.js .ws.in .w>span{transform:none;opacity:1}
.js .rv{opacity:0;transform:translateY(14px);transition:transform .7s var(--ease-out),opacity .5s ease}
.js .rv.in{opacity:1;transform:none}
.js .rv.jacket{transform:perspective(900px) rotateY(-14deg) translateX(-14px)}
.js .rv.jacket.in{transform:perspective(900px) rotateY(0) translateX(0)}
.book .wrap{perspective:1100px}
.js .rv.jacket.in .face{animation:float 6s ease-in-out 1.2s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hl{color:inherit;font-weight:inherit;transition:color .6s ease .25s}
.band .hl{font-weight:600}
.band .in .hl{color:var(--neon-hi)}
.book .hl,.js .book .in .hl{color:inherit}
/* hover only where there is something to click: linked rows and linked items */
a.row h2,.row .go,a.item div{transition:color .2s ease}
@media(hover:hover) and (pointer:fine){
  a.row:hover h2{color:var(--forest)}
  a.item:hover div{color:var(--forest)}
  .track a:hover span{color:#fff}
  a.row:hover .go::after,.row .go:hover::after{transform:translateX(5px)}
  .send:hover,.band .send:hover{background:var(--neon-up)}
  .fnav a:hover,.credit a:hover{color:var(--neon)}
}

/* ---------- social ticker : every page, directly under the hero ----------
   Reads as a tape: a short uppercase key, the value beside it, one hairline
   between entries, a steady roll. Nothing else on the bar. */
.ticker{position:relative;background:#001008;overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(134,188,70,.14)}
.track{display:inline-flex;align-items:stretch;animation:roll 64s linear infinite}
.ticker:hover .track,.ticker:focus-within .track{animation-play-state:paused}
.track a{display:inline-flex;align-items:baseline;gap:12px;padding:13px 36px;border-left:1px solid rgba(134,188,70,.16);
  font-size:var(--t-fine);font-variant-numeric:tabular-nums;text-decoration:none;transition:color .18s}
.track a:first-child{border-left:0}
.track b{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(134,188,70,.78)}
.track span{font-weight:400;letter-spacing:0;color:#B9C6BE}
.track .mkt span{font-variant-numeric:tabular-nums}
.track .mkt.up span{color:var(--neon)}
.track .mkt.dn span{color:#F08A8E}
.track .mkt i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6F8A79;margin-left:4px}
.track .hot b{color:var(--neon)}
.track .hot span{color:#fff;font-weight:500}
.track .hot span::before{content:"\25B2";font-size:9px;margin-right:8px;color:var(--neon);position:relative;top:-1px}
.track .hot span::before{animation:live 1.8s ease-in-out infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- daily tip signup : literacy page, under the dates. light panel, same form grammar as contact ---------- */
.signup{background:var(--bone);border-bottom:1px solid var(--rule)}
.signup .wrap{padding-block:var(--sec);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.signup h2{font-size:var(--t-sec);margin:0 0 12px;margin-left:-.04em}
.signup p{color:var(--mute);margin:0;max-width:32em}
.signup form{display:grid;gap:16px}
.signup .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.signup label{color:var(--mute)}
.signup input{background:var(--paper);border:1px solid #C9CDC8;color:var(--ink)}
.signup input:focus{border-color:var(--forest);background:var(--paper);box-shadow:0 0 0 3px rgba(36,111,47,.14)}
.signup .go-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.signup .form-status{color:var(--mute)}
.signup .form-status.ok{color:var(--forest)}
.signup .form-status.err{color:#B3261E}
.signup .fine{font-size:var(--t-fine);color:#8A938F;margin:0}

/* ---------- index rows : a ledger. title, line, link, across the full width, no boxes ---------- */
.buckets .wrap{padding-block:66px var(--sec)}
.row{display:grid;grid-template-columns:1fr;gap:10px;padding-block:28px;border-top:1px solid var(--rule);position:relative}
.js .row{border-top-color:transparent}
.js .row::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .1s}
.js .row.in::before{transform:scaleX(1)}
.js .row:first-of-type::before{display:none}
.row>div{min-width:0}
.row:first-of-type{border-top:none}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row h2{font-size:var(--t-list);margin:0 0 8px}
.row p{margin:0;color:var(--mute);max-width:32em}
.row .go{font-size:var(--t-small);font-weight:500;letter-spacing:-.005em;color:var(--forest);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
/* the arrow moves, not the row */
.row .go::after{content:"\2192";display:inline-block;font-weight:400;transition:transform .2s var(--ease-out)}
.row.static{cursor:default}
.row .gos{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.item .reg{margin-left:auto;align-self:center;font-size:var(--t-small);font-weight:500;color:var(--forest);white-space:nowrap}
.item .reg::after{content:" \2192"}
@media(min-width:861px){
  .row{grid-template-columns:minmax(0,4fr) minmax(0,6fr) 150px;column-gap:clamp(18px,3vw,48px);align-items:baseline;padding-block:30px}
  .row>div{display:contents}
  .row h2{margin:0}
  .row .go{justify-self:end}
  .row .gos{justify-self:end;align-items:flex-end}
}

/* ---------- the four pillars : his own framework, from the tip graphic ---------- */
.pillars{border-bottom:1px solid var(--rule)}
.pillars .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px);padding-block:var(--band)}
.pillar b{display:block;color:var(--forest);margin-bottom:8px;position:relative;padding-top:12px}
.pillar b::before{content:"";position:absolute;left:0;top:0;width:28px;height:1.5px;background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .25s}
.js .pillar.in b::before,html:not(.js) .pillar b::before{transform:scaleX(1)}
.pillar span{display:block;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.tagline{grid-column:1/-1;margin:clamp(14px,2vw,22px) 0 0;color:var(--mute);font-size:clamp(16px,1.4vw,19px);letter-spacing:-.01em}

/* ---------- the founder : the person behind the three doors, facts only ---------- */
.founder{border-bottom:1px solid var(--rule)}
.founder .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start;padding-block:var(--sec)}
.founder h2{font-size:var(--t-sec);margin:0 0 10px;margin-left:-.04em}
.founder .role{color:var(--mute);font-size:var(--t-body)}
.founder .who .cta{margin-top:26px}
.founder .bio p{margin:0 0 16px;color:#2E3733;font-size:clamp(17px,1.45vw,19px);line-height:1.55;max-width:32em}
.founder .bio p:last-child{margin-bottom:0}

/* ---------- the book ---------- */
.book{border-bottom:1px solid var(--rule);background:var(--bone)}
.book .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:var(--sec)}
/* a jacket in production, not a missing asset */
.jacket{margin:0;width:clamp(150px,18vw,250px);aspect-ratio:5/7;position:relative;border-radius:4px 10px 10px 4px;
  background:linear-gradient(90deg,#00190E 0%,#00190E 5%,var(--hunter) 5.5%,#00301C 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 18px 36px -14px rgba(0,36,21,.45);transition:transform .6s var(--ease-out)}
.jacket .face{position:absolute;inset:0;padding:clamp(16px,1.6vw,22px);padding-left:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:10px}
.jacket .imprint{font-family:var(--display);font-weight:600;font-size:clamp(12px,1.1vw,14px);letter-spacing:.02em;color:#fff;line-height:1.3}
.jacket .hair{width:28px;height:1.5px;background:var(--neon)}
.jacket .vol{font-size:11px;color:#9FB3A6}
.jacket .byline{font-size:11px;color:#C8D4CB}
.book h2{font-size:var(--t-sec);margin:0 0 22px;margin-left:-.04em;max-width:16ch}
.book p{margin:0 0 16px;color:var(--mute);max-width:32em}
.book .soon{font-size:var(--t-label);color:var(--forest);margin:0 0 14px}
.book .pledge{color:var(--ink)}
.book .status{font-size:var(--t-small);color:#6C7772}
.book .cta{margin-top:26px}

/* ---------- events and social strip ---------- */
.strip{border-bottom:1px solid var(--rule)}
.strip .wrap{padding-block:var(--sec);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px)}
.strip h2{font-size:var(--t-list);margin:0 0 10px}
.strip .col>p{color:var(--mute);margin:0 0 14px;max-width:32em;min-height:calc(2 * 1.6em)}
/* the two columns share one row grid, so their first rules sit on one line whatever the intros do */
@supports(grid-template-rows:subgrid){
  @media(min-width:981px){
    .strip .wrap{grid-template-rows:repeat(3,auto);row-gap:0}
    .strip .col{display:grid;grid-row:span 3;grid-template-rows:subgrid}
    .strip .col>p{min-height:0}
  }
}
.feed{display:flex;flex-direction:column}
.item{display:flex;gap:18px;min-width:0;padding-block:16px;border-top:1px solid var(--rule);align-items:baseline}
.item:last-child{border-bottom:1px solid var(--rule)}
.item.static{cursor:default}
.item .when{color:var(--forest);white-space:nowrap;min-width:84px;font-variant-numeric:tabular-nums}
.item div{font-size:var(--t-body);font-weight:500;letter-spacing:-.005em;min-width:0;text-wrap:pretty}
.item small{display:block;color:var(--mute);font-size:var(--t-small);font-weight:400;margin-top:2px}

/* ---------- call-to-action band ---------- */
.band{background:var(--hunter);color:#fff}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;padding-block:var(--band)}
.band h2{font-size:var(--t-sec);margin:0 0 10px;margin-left:-.04em}
.band p{color:#A9BDB0;margin:0;max-width:46ch}
.band .send{background:var(--neon);color:var(--hunter);white-space:nowrap}

footer{background:#001008;color:#7E9487;border-top:1px solid rgba(134,188,70,.16)}
footer .wrap{padding-block:26px 24px;font-size:var(--t-fine);letter-spacing:-.005em}
.frow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px 36px}
.frow .credit{justify-self:end;text-align:right}
.fnav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.credit a{color:#A9BDB0}
.legal{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(134,188,70,.12);color:#8DA294;font-size:var(--t-fine)}
.legal p{margin:0;max-width:72ch}
.legal p+p{margin-top:8px}
.legal b{font-weight:600;color:#A9BDB0}

/* ---------- contact page form ---------- */
.contact{background:var(--hunter);color:#fff}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,72px);padding-block:var(--sec)}
.contact h2{font-size:var(--t-sec);margin:0 0 14px;margin-left:-.04em}
.contact p{color:#A9BDB0;margin:0;max-width:40ch}
.office{margin-top:22px!important;font-size:var(--t-small);color:#8DA294!important}
form{display:grid;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;margin-bottom:8px;font-size:var(--t-fine);font-weight:500;letter-spacing:-.005em;color:#8DA294}
input,select,textarea{width:100%;padding:14px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.4);color:#fff;
  font-family:var(--text);font-size:var(--t-body);border-radius:var(--r)}
select option{background:var(--hunter);color:#fff}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--neon) 50%),linear-gradient(135deg,var(--neon) 50%,transparent 50%);background-position:right 20px center,right 15px center;background-size:5px 5px;background-repeat:no-repeat}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--neon);background-color:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(134,188,70,.16)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile:empty{display:none}
.send[disabled]{opacity:.6;cursor:wait}
.form-status{margin:0;font-size:var(--t-small);color:#A9BDB0;min-height:1.4em}
.form-status.ok{color:var(--neon-hi)}
.form-status.err{color:#F2C4C4}
.form-status:empty{display:none}
.form-status:not(:empty){animation:st-in .2s var(--ease-out)}
@keyframes st-in{from{opacity:0;transform:translateY(4px)}}
.send{background:var(--neon);color:var(--hunter);border:none;padding:15px 24px;border-radius:var(--pill);font-family:var(--display);font-weight:500;
  font-size:var(--t-ui);letter-spacing:-.005em;cursor:pointer;transition:background-color .18s ease,transform .12s var(--ease-out)}
form .send{justify-self:start;padding:15px 32px}

/* ---------- interior page head ---------- */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--bone)}
.phead .wrap{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,60px);position:relative;z-index:3;max-width:min(100%,1260px)}
/* sized so the longest page head ("The book, the podcast,") holds its own line */
.phead h1{font-size:var(--t-page);margin-left:-.04em}
.phead .quote{margin-bottom:0}
.phead .chart{height:70%;width:40%;opacity:.5}

/* ---------- instagram list, media page ---------- */
.ig{background:var(--paper);border-bottom:1px solid var(--rule)}
.ig .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,72px);align-items:start;padding-block:var(--sec)}
.ig .feed .when{min-width:96px}
.ig .feed div{font-size:var(--t-body)}
.ig h2{font-size:var(--t-sec);margin:0 0 16px;margin-left:-.04em}
.ig p{color:var(--mute);margin:0 0 26px;max-width:32em}
.handle{font-family:var(--display);font-weight:500;font-size:var(--t-ui);letter-spacing:-.005em;color:var(--forest);margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{aspect-ratio:1;background:var(--bone);border-radius:var(--r);display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:14px 16px}
.tile b{font-family:var(--display);font-size:var(--t-fine);font-weight:500;line-height:1.35;letter-spacing:-.005em}
.tile:nth-child(1),.tile:nth-child(5){background:var(--hunter);color:#fff}
.tile:nth-child(1) b,.tile:nth-child(5) b{color:var(--neon-hi)}
.tile em{font-style:normal;font-size:11px;color:var(--mute)}
.tile:nth-child(1) em,.tile:nth-child(5) em{color:#8DA294}

/* ---------- events block on interior pages ---------- */
.events{border-bottom:1px solid var(--rule)}
.events .wrap{padding-block:var(--sec);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px)}
.events h2{font-size:var(--t-list);margin:0 0 10px}
.events p{color:var(--mute);margin:0;max-width:32em}

@media(max-width:980px){
  .strip .wrap{grid-template-columns:1fr;gap:clamp(28px,5vw,44px)}
  .strip .col>p{min-height:0}
}
@media(max-width:860px){
  html{scroll-padding-top:100px}
  .ig .wrap,.contact .wrap,.events .wrap,.signup .wrap{grid-template-columns:1fr}
  .signup .two{grid-template-columns:1fr}
  /* the chart becomes a clean band under the copy instead of a column beside it */
  .hero .wrap{grid-template-columns:1fr;padding-block:48px 184px;max-width:100%}
  .hero .shot{display:none}
  .hero .chart{left:0;width:100%;height:120px;opacity:.7;-webkit-mask-image:none;mask-image:none}
  .phead .chart,.phead .idx{display:none}
  .hero .idx{top:auto;bottom:132px;right:var(--gut);left:var(--gut);justify-content:flex-start}
  .hero .idx small{text-align:left}
  .book .wrap{grid-template-columns:1fr;gap:28px}
  .founder .wrap{grid-template-columns:1fr;gap:20px}
  .jacket{width:156px}
  .jacket .face{padding-left:18px;padding-right:12px}
  .pillars .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* a compact bar: wordmark and Contact Us on the first row, the section links scroll on the second */
  .top .wrap{flex-wrap:wrap;gap:0;padding-block:10px 4px;min-height:0}
  .mark .sub{display:none}
  .cta-top{order:2;margin-left:auto;padding:6px 13px;font-size:var(--t-small)}
  .menu a{padding:6px 10px}
  .menu{order:3;margin-left:0;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;margin-top:4px;
    width:calc(100% + 2*var(--gut));margin-inline:calc(-1*var(--gut));padding-inline:calc(var(--gut) - 13px) calc(var(--gut) + 12px);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap}
  .grid{grid-template-columns:repeat(2,1fr)}
  .band .wrap{flex-direction:column;align-items:flex-start}
  .bignum{display:none}
}
@media(max-width:560px){
  h1{font-size:clamp(34px,10vw,44px)}
  .phead h1 br{content:""}
  .phead h1 br::after{content:" "}
  .two{grid-template-columns:1fr}
  .item{flex-direction:column;gap:4px}
  .item .when{min-width:0}
  .item .reg{margin-left:0;align-self:flex-start}
  .btn,.send,form .send{width:100%;justify-content:center;text-align:center}
  .cred{grid-template-columns:1fr;gap:0;margin-top:30px}
  .cred li{padding-block:10px}
  .frow{grid-template-columns:1fr;gap:14px}
  .frow .credit{justify-self:start;text-align:left}
  .fnav{justify-content:flex-start;gap:10px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .chart .c,.ready .chart .c{animation:none;opacity:1}
  .hero::before,.phead::before,.track .hot span::before,.js .rv.jacket.in .face{animation:none}
  .js .row::before,.pillar b::before{transform:none;transition:none}
  .track{animation:none}
  .ticker{overflow-x:auto;scrollbar-width:none}
  .js .loader{display:none}
  /* keep the fades, drop the movement */
  .js .ws .w>span,.js .rv,.js .rv.jacket{transform:none;transition:opacity .3s ease}
  .hl,.btn::before{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .form-status:not(:empty){animation:none}
  .btn:active,.send:active,.cta-top:active{transform:none}
}

/* ---------- stock photography (hero + page heads) ----------
   one photo per page on the right, under the ambient wash and the live candles, fading into the bone canvas
   from the left and toward the bottom so the candles sit on clean ground */
.bgshot{position:absolute;top:0;right:0;width:52%;height:100%;object-fit:cover;z-index:0;pointer-events:none;opacity:.92;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 34%,#000 50%,transparent 94%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 38%),linear-gradient(to bottom,transparent 0,#000 34%,#000 50%,transparent 94%);
  mask-composite:intersect}
.phead .bgshot{width:46%}
.hero.has-photo .idx{text-shadow:0 0 10px var(--bone),0 0 4px var(--bone)}
.phead.has-photo .idx{display:none!important}
.phead.has-photo .chart{opacity:.85}
@media(max-width:860px){
  .bgshot,.phead .bgshot{position:relative;display:block;width:100%;height:clamp(170px,46vw,260px);opacity:1;
    -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .hero.has-photo .wrap{padding-top:8px;padding-bottom:204px}
  .phead.has-photo .wrap{padding-top:8px}
}

/* candles only on home + Financial Literacy; a frosted pane behind them so they read over the photo.
   the chart's own left-fade mask feathers the pane's edge too */
.chart{-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);background:rgba(244,245,243,.42)}
.phead.has-photo .chart{opacity:1}
.chart{-webkit-mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,transparent,#000 28%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 40%),linear-gradient(to bottom,transparent,#000 28%);mask-composite:intersect}
@media(max-width:860px){
  .hero .chart{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
}

/* LF is LeVar's handwritten monogram from his Instagram posts (img/lf.png), masked so it takes the text colour */
.lf{display:inline-block;width:1.6em;height:1.25em;vertical-align:-.3em;background:currentColor;
  -webkit-mask:url(img/lf.png) center/contain no-repeat;mask:url(img/lf.png) center/contain no-repeat}
.disclaimer{border-bottom:1px solid var(--rule)}
.disclaimer .wrap{padding-block:var(--sec)}
.disclaimer .wrap>div{max-width:72ch}
.disclaimer h2{font-size:var(--t-list);margin:0 0 16px}
.disclaimer p{color:var(--mute);margin:0 0 14px;font-size:var(--t-small)}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer a{color:var(--forest);font-weight:500}
.buckets+.disclaimer .wrap,.disclaimer+.disclaimer .wrap{padding-top:0}
.buckets+.disclaimer,.disclaimer:has(+.disclaimer){border-bottom:0}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.notfound .wrap{padding-block:var(--sec)}
.notfound p{color:var(--mute);margin:0 0 22px;max-width:40ch}