/* Site chrome: the shared header and navigation, the home page, and the content
   pages. Everything here is additive to system.css, which is generated from
   design/v9-combined.html and must not be hand-edited. */

/* ============================================================ SITE HEADER
   One header on every page, including the course page, so navigation is never
   missing. It sits on the off-black ground so it runs into a dark hero without
   a seam, and holds its own against a light page below. */
.sitehead-band{background:var(--ink); color:var(--stock); position:relative; z-index:40}
.sitehead{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,48px); padding-block:calc(var(--u)*2.5);
}
.sitehead .mark{font-size:clamp(26px,2.6vw,38px); color:var(--stock)}
.sitehead .nav{margin-left:auto}
.sitehead .nav ul{list-style:none; display:flex; gap:clamp(16px,2.2vw,34px); align-items:center; margin:0; padding:0}
.sitehead .nav a{
  color:var(--on-dark); text-decoration:none; font-size:15.5px; line-height:1;
  padding-block:calc(var(--u)*1); display:inline-block;
  border-bottom:2px solid transparent; transition:color .18s var(--out), border-color .18s var(--out);
}
.sitehead .nav a:hover{color:var(--stock); border-bottom-color:var(--ion)}
.sitehead .nav .current-menu-item > a,
.sitehead .nav .current_page_item > a{color:var(--stock); border-bottom-color:var(--ion)}
.sitehead .btn{white-space:nowrap}

/* The menu collapses to a disclosure rather than a hamburger overlay: fewer
   moving parts, and it degrades to a plain visible list without JavaScript. */
.navtoggle{display:none}
@media (max-width:900px){
  .sitehead{flex-wrap:wrap; gap:calc(var(--u)*2)}
  .sitehead .btn{order:2; margin-left:auto}
  .navtoggle{
    display:inline-flex; order:3; align-items:center; gap:8px; cursor:pointer;
    background:transparent; border:2px solid rgba(242,240,236,.4); color:var(--stock);
    font-family:'Archivo',sans-serif; font-size:12.5px; font-weight:500;
    font-variation-settings:'wdth' 88; letter-spacing:.15em; text-transform:uppercase;
    padding:12px 18px; min-height:46px;
  }
  .sitehead .nav{order:4; flex-basis:100%; margin-left:0}
  .js .sitehead .nav[hidden]{display:none}
  .sitehead .nav ul{flex-direction:column; align-items:flex-start; gap:0; padding-bottom:calc(var(--u)*2)}
  .sitehead .nav a{display:block; width:100%; padding-block:calc(var(--u)*1.75); border-bottom:1px solid var(--on-dark-rule)}
  .sitehead .nav a:hover{border-bottom-color:var(--on-dark-rule)}
}

/* ================================================================= FOOTER FIX
   The standing bar reserves space with --bar. Putting that on body exposed the
   off-white body ground below the off-black footer, which read as a white slab.
   The footer absorbs it instead, so the dark ground runs to the bottom. */
body{padding-bottom:0}
footer{padding-bottom:calc(var(--u)*7 + var(--bar))}

/* ================================================================== HOME */
.home-hero{background:var(--ink); color:var(--stock); padding-block:clamp(56px,8vw,120px) clamp(56px,7vw,104px); position:relative; overflow:hidden}
.home-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.1;
  background-image:radial-gradient(var(--stock) 1px, transparent 1.1px); background-size:8px 8px;
  mask-image:linear-gradient(to bottom, transparent, #000 65%, #000);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 65%, #000);
}
.home-hero .wrap{position:relative; z-index:2}
.home-hero h1{font-size:clamp(38px,6.4vw,92px); line-height:.98; letter-spacing:-.04em; max-width:20ch; text-wrap:balance}
.home-hero .lede{color:var(--on-dark); font-size:clamp(17px,1.45vw,22px); line-height:1.5; max-width:62ch; margin-top:clamp(20px,2.6vw,32px)}

/* The open cohort, stated as a row of facts rather than a card. */
.cohort{border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft)}
.cohort .inner{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center; padding-block:clamp(40px,5vw,72px)}
@media (max-width:880px){ .cohort .inner{grid-template-columns:1fr; gap:calc(var(--u)*4)} }
.cohort h2{font-size:clamp(28px,3.4vw,48px); letter-spacing:-.03em; margin-bottom:calc(var(--u)*2)}
.cohort p{color:var(--ink-soft); max-width:52ch}
.cohort dl{display:flex; flex-wrap:wrap; gap:calc(var(--u)*2) clamp(24px,3.4vw,56px)}
.cohort dt{color:var(--ink-soft); margin-bottom:calc(var(--u)*.75)}
.cohort dd{font-weight:600; font-size:clamp(19px,1.7vw,26px); letter-spacing:-.025em; font-variant-numeric:tabular-nums}

/* How it is taught. Three statements, no icons, no boxes. */
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px); text-align:left}
@media (max-width:820px){ .pillars{grid-template-columns:1fr; gap:clamp(26px,3.2vw,40px)} }
.pillars > div{padding-top:calc(var(--u)*2.5); border-top:2px solid var(--ink)}
.pillars h3{font-size:clamp(20px,1.8vw,26px); letter-spacing:-.025em; margin-bottom:calc(var(--u)*1.5)}
.pillars p{color:var(--ink-soft); font-size:16px; line-height:1.5; margin-inline:0}

/* ============================================================ CONTENT PAGES */
.prose{font-size:17.5px; line-height:1.65}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(26px,2.8vw,40px); letter-spacing:-.03em; margin-top:1.6em}
.prose h3{font-size:clamp(20px,1.9vw,26px); letter-spacing:-.025em; margin-top:1.4em}
.prose ul, .prose ol{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}

.notes{list-style:none; display:grid; gap:0; max-width:74ch}
.notes li{border-bottom:1px solid var(--rule-soft)}
.notes li:first-child{border-top:1px solid var(--rule-soft)}
.notes a{display:block; padding-block:calc(var(--u)*3); text-decoration:none}
.notes h3{font-size:clamp(20px,1.9vw,26px); letter-spacing:-.025em; margin-bottom:calc(var(--u)*1)}
.notes p{color:var(--ink-soft); font-size:16px; margin-inline:0}
.notes a:hover h3{text-decoration:underline; text-underline-offset:4px}

/* The trainer role line: the two companies, at a size you can actually read.
   The label voice was far too small for a line carrying two brand names. */
.trainer .role{
  font-size:17px; line-height:1.5; letter-spacing:0; text-transform:none;
  font-variation-settings:'wdth' 100; color:var(--ink-soft);
}
.trainer .role .fp{font-size:1.05em}

/* ============================================================== PAGE HERO
   Content pages open with the same off-black band the header sits in, so the
   header and the title read as one masthead rather than two stacked bars. */
.pagehero{background:var(--ink); color:var(--stock); padding-block:clamp(40px,5.4vw,84px) clamp(44px,5.8vw,92px)}
.pagehero .spec{color:var(--grey); display:block; margin-bottom:calc(var(--u)*2.5)}
.pagehero h1{font-size:clamp(34px,5.4vw,76px); line-height:.98; letter-spacing:-.038em; max-width:20ch}
.pagehero .standfirst{color:var(--on-dark); font-size:clamp(17px,1.4vw,21px); line-height:1.5; max-width:62ch; margin-top:clamp(18px,2.2vw,28px)}

/* ================================================================== PROSE
   A measured column with real vertical rhythm. The generic template had none,
   which is why the content pages read as unstyled. */
.pagebody{padding-block:clamp(48px,6.4vw,104px)}
.prose{max-width:68ch; font-size:18px; line-height:1.65; color:var(--ink)}
.prose > * + *{margin-top:1.1em}
.prose > h2{font-size:clamp(25px,2.6vw,36px); line-height:1.15; letter-spacing:-.03em; margin-top:2em; padding-top:calc(var(--u)*3); border-top:1px solid var(--rule-soft)}
.prose > h3{font-size:clamp(20px,1.9vw,25px); line-height:1.2; letter-spacing:-.025em; margin-top:1.7em}
.prose p{color:var(--ink-soft)}
.prose > p:first-of-type{font-size:1.12em; line-height:1.55; color:var(--ink)}
.prose ul, .prose ol{padding-left:1.3em; color:var(--ink-soft)}
.prose li + li{margin-top:.45em}
.prose strong{font-weight:600; color:var(--ink)}
.prose a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--ion); text-decoration-thickness:2px}
.prose blockquote{border-left:0; padding-left:0; margin-block:1.6em}
.prose blockquote p{font-size:1.25em; line-height:1.3; letter-spacing:-.02em; color:var(--ink); font-weight:500}

/* A closing band so a content page ends on an action rather than stopping. */
.pagecta{background:var(--stock-2); padding-block:clamp(44px,5.4vw,80px)}
.pagecta h2{font-size:clamp(24px,2.8vw,38px); letter-spacing:-.03em; max-width:24ch}
.pagecta p{color:var(--ink-soft); max-width:54ch; margin-top:calc(var(--u)*2)}

/* ============================================================= FIELD NOTES */
.notes{list-style:none; display:grid; gap:0; max-width:72ch}
.notes li{border-bottom:1px solid var(--rule-soft)}
.notes li:first-child{border-top:1px solid var(--rule-soft)}
.notes a{display:block; padding-block:calc(var(--u)*3.5); text-decoration:none}
.notes .when{color:var(--grey); font-size:15px; display:block; margin-bottom:calc(var(--u)*1.25)}
.notes h2{font-size:clamp(21px,2.1vw,28px); letter-spacing:-.028em; line-height:1.15; margin-bottom:calc(var(--u)*1.25)}
.notes p{color:var(--ink-soft); font-size:16.5px; margin-inline:0}
.notes a:hover h2{text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--ion)}
.emptynote{color:var(--ink-soft); max-width:56ch}

.notemeta{color:var(--grey); font-size:15px; margin-top:calc(var(--u)*2)}
.pagination{display:flex; gap:calc(var(--u)*2); margin-top:clamp(32px,4vw,56px)}
.pagination .page-numbers{padding:10px 16px; text-decoration:none; border:1px solid var(--rule)}
.pagination .current{background:var(--ink); color:var(--stock); border-color:var(--ink)}

/* ============================================================== HOME, BLACK
   The home page runs off-black end to end, so it reads as one surface from the
   header to the footer with no light interruption. */
.home-dark{background:var(--ink); color:var(--stock)}
.home-dark h2, .home-dark h3{color:var(--stock)}
.home-dark .head .spec{color:var(--grey)}
.home-dark .pillars > div{border-top-color:rgba(242,240,236,.35)}
.home-dark .pillars p{color:var(--on-dark)}
.home-dark .trainer .role{color:var(--grey)}
.home-dark .trainer p{color:var(--on-dark)}
.home-dark .sec + .sec{border-top:0}
/* .lede carries margin-inline:auto from the system layer, which centres the
   block and leaves a gap down its left edge on a left-aligned hero. */
.home-hero .lede{margin-inline:0; max-width:64ch}

/* ============================================================ FOOTER, FIXED
   Three columns: the mark, the company links, and the social row. The nav
   markup WordPress prints carries its own list indent, so it is reset here and
   the links sit flush left like any other menu. */
.footgrid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){ .footgrid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .footgrid{grid-template-columns:1fr} }
.footgrid ul, .footgrid ul.menu{list-style:none; margin:0; padding:0; display:grid; gap:calc(var(--u)*1.5)}
.footgrid li{margin:0; padding:0; list-style:none; text-indent:0}
.footgrid li::marker{content:none}
footer .mark{font-size:clamp(34px,3.4vw,52px)}
.footbrand p{margin-top:calc(var(--u)*3)}

/* ================================================================ SUBSCRIBE */
.subscribe{background:var(--ink); color:var(--stock); padding-block:clamp(48px,6vw,88px); border-top:1px solid var(--on-dark-rule)}
.subscribe--light{background:var(--stock-2); color:var(--ink); border-top:0}
.sub-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center}
@media (max-width:820px){ .sub-grid{grid-template-columns:1fr; gap:calc(var(--u)*4)} }
.subscribe h2{font-size:clamp(24px,2.6vw,36px); letter-spacing:-.03em; margin-bottom:calc(var(--u)*2)}
.subscribe > .wrap p{color:var(--on-dark); max-width:46ch; margin-inline:0}
.subscribe--light > .wrap p{color:var(--ink-soft)}
.subrow{display:flex; gap:calc(var(--u)*2); align-items:flex-end; flex-wrap:wrap}
.subrow .field{flex:1 1 260px}
.subscribe .field label{color:var(--grey)}
.subscribe--light .field label{color:var(--ink-soft)}
.subscribe input[type=email]{
  font-family:'Archivo',sans-serif; font-size:17px; color:var(--ink); background:var(--stock);
  border:0; border-radius:0; padding:14px 16px; min-height:54px; width:100%;
  -webkit-appearance:none; appearance:none;
}
.subscribe--light input[type=email]{background:var(--stock); box-shadow:inset 0 0 0 1px var(--rule)}
.subscribe input[type=email]:focus{outline:3px solid var(--ion); outline-offset:3px}
.subscribe .btn{min-height:54px}
.substate{margin-top:calc(var(--u)*2); color:var(--stock); font-size:16px}
.subscribe--light .substate{color:var(--ink)}

/* ============================================================== DARK PROSE */
.pagebody.dark{background:var(--ink); color:var(--stock)}
.prose--dark{color:var(--stock)}
.prose--dark p{color:var(--on-dark)}
.prose--dark > p:first-of-type{color:var(--stock)}
.prose--dark > h2{color:var(--stock); border-top-color:var(--on-dark-rule)}
.prose--dark > h3{color:var(--stock)}
.prose--dark ul, .prose--dark ol{color:var(--on-dark)}
.prose--dark a{color:var(--stock); text-decoration-color:var(--ion)}
.prose--dark strong{color:var(--stock)}
.pillars--dark > div{border-top-color:rgba(242,240,236,.35)}
.pillars--dark h3{color:var(--stock)}
.pillars--dark p{color:var(--on-dark)}

/* ================================================================= CONTACT */
.contact-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(32px,4.6vw,80px); align-items:start}
@media (max-width:880px){ .contact-grid{grid-template-columns:1fr; gap:calc(var(--u)*5)} }
.contactform{display:grid; grid-template-columns:1fr; gap:clamp(18px,2.2vw,26px)}
.contactform .field input, .contactform .field select, .contactform textarea{
  font-family:'Archivo',sans-serif; font-size:17px; color:var(--ink);
  background:var(--stock); border:0; border-radius:0; box-shadow:inset 0 0 0 1px var(--rule);
  padding:14px 16px; min-height:54px; width:100%;
  -webkit-appearance:none; appearance:none;
}
.contactform textarea{min-height:150px; line-height:1.5; resize:vertical}
.contactform .field label{color:var(--ink-soft)}
.contactform :focus-visible{outline:3px solid var(--ion); outline-offset:2px}
.formstate--light{color:var(--ink); background:var(--stock-2); padding:14px 16px}

/* ============================================================ ABOUT: STANCE
   Mission and vision set as two statements at display size, which is the only
   way those two words earn their place. Not a card, not an icon. */
.stance{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,4.6vw,88px); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid var(--on-dark-rule)}
@media (max-width:820px){ .stance{grid-template-columns:1fr; gap:calc(var(--u)*5)} }
.stance .spec{color:var(--grey); display:block; margin-bottom:calc(var(--u)*2.5)}
.stance-t{font-size:clamp(22px,2.6vw,34px); line-height:1.2; letter-spacing:-.028em; color:var(--stock); font-weight:500; margin-inline:0; max-width:26ch}

.principles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(24px,3vw,48px); margin-top:clamp(40px,5vw,72px)}
@media (max-width:980px){ .principles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .principles{grid-template-columns:1fr} }
.principles > div{padding-top:calc(var(--u)*2.5); border-top:2px solid rgba(242,240,236,.35)}
.principles h3{font-size:clamp(18px,1.6vw,22px); letter-spacing:-.022em; margin-bottom:calc(var(--u)*1.5); color:var(--stock)}
.principles p{color:var(--on-dark); font-size:15.5px; line-height:1.5; margin-inline:0}

/* ============================================================== LEADERSHIP
   A list, so adding a second or a sixth person needs no template change. */
.people-grid{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.6vw,56px); margin:0; padding:0}
@media (max-width:980px){ .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .people-grid{grid-template-columns:1fr} }
.people-grid > li{margin:0; padding:0; max-width:38ch}
.person-photo{margin-bottom:calc(var(--u)*3)}
.person-photo img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; filter:saturate(.5) contrast(1.02)}
.people-grid h3{font-size:clamp(22px,2.1vw,28px); letter-spacing:-.025em; color:var(--stock); margin-bottom:calc(var(--u)*.75)}
.person-role{color:var(--grey); font-size:16px; margin-bottom:calc(var(--u)*2); margin-inline:0}
.person-bio{color:var(--on-dark); font-size:16px; line-height:1.55; margin-inline:0}
.person-more{color:var(--stock); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--ion); font-size:15.5px; display:inline-block; margin-top:calc(var(--u)*2)}
.people-note{color:var(--grey); font-size:15.5px; margin-top:clamp(32px,4vw,56px); max-width:60ch; margin-inline:0; padding-top:calc(var(--u)*3); border-top:1px solid var(--on-dark-rule)}

/* ================================================================= FOUNDER
   The photograph was shot on a dark ground, so it opens the page against the
   same ground and needs no frame. */
.founder-hero{background:var(--ink); color:var(--stock); padding-block:clamp(40px,5.4vw,80px) clamp(48px,6vw,96px)}
.founder-grid{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(32px,4.6vw,80px); align-items:center}
@media (max-width:860px){ .founder-grid{grid-template-columns:1fr; gap:calc(var(--u)*4)} }
.founder-photo{max-width:420px}
.founder-photo img{width:100%; height:auto; filter:saturate(.5) contrast(1.02)}
.founder-intro .spec{color:var(--grey); display:block; margin-bottom:calc(var(--u)*2.5)}
.founder-intro h1{font-size:clamp(40px,6vw,88px); line-height:.94; letter-spacing:-.042em}
.founder-role{color:var(--stock); font-size:clamp(17px,1.5vw,21px); margin-top:calc(var(--u)*2)}
.founder-lede{color:var(--on-dark); font-size:clamp(16.5px,1.3vw,19px); line-height:1.55; max-width:52ch; margin-top:calc(var(--u)*3)}

.founder-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:clamp(32px,5vw,88px); align-items:start}
@media (max-width:880px){ .founder-body{grid-template-columns:1fr; gap:calc(var(--u)*5)} }
.founder-side h2{font-size:12.5px; font-weight:500; font-variation-settings:'wdth' 88; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:calc(var(--u)*2)}
.founder-side h2 + ul{margin-bottom:calc(var(--u)*5)}
.sidelist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-soft)}
.sidelist li{padding-block:calc(var(--u)*1.75); border-bottom:1px solid var(--rule-soft); font-size:16px; color:var(--ink-soft)}

/* The legal menu prints bare <li> with no wrapping list, which the browser
   still gives markers. Kill them and lay the links out inline. */
.footrow nav{display:flex; gap:calc(var(--u)*3); flex-wrap:wrap; list-style:none; margin:0; padding:0}
.footrow nav li{list-style:none; margin:0; padding:0; display:inline-block}
.footrow nav li::marker{content:none}
.footrow nav a{text-decoration:none}
.footrow nav a:hover{text-decoration:underline; text-underline-offset:4px}

/* ============================================================ MOTION LAYER
   Restrained on purpose: one masked reveal for the lines that carry the
   argument, one staggered rise for grouped items. Nothing loops, nothing
   moves on hover, and everything is off under reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal] .rv{display:inline-block; overflow:hidden; vertical-align:bottom}
  .js [data-reveal] .rv > i{display:inline-block; font-style:inherit; transform:translateY(105%); will-change:transform}
  .js [data-reveal] .rv.on > i{transform:translateY(0); transition:transform .72s cubic-bezier(.19,1,.22,1)}
  .js .stag{opacity:0; transform:translateY(16px)}
  .js .stag.on{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
  .js .rise{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
  .js .rise.on{opacity:1; transform:none}
  /* the accent rule draws itself rather than appearing */
  .js .stance-rule{transform:scaleX(0); transform-origin:0 50%}
  .js .stance-rule.on{transform:scaleX(1); transition:transform .9s cubic-bezier(.19,1,.22,1)}
}

/* Mission and vision get the weight they were missing. */
.stance-t{font-size:clamp(26px,3.2vw,44px); line-height:1.14; max-width:22ch}
.stance-rule{display:block; width:56px; height:3px; background:var(--ion); margin-bottom:calc(var(--u)*3)}

/* ==================================================== FOUNDER, ON OFF-BLACK */
.founder-body-dark{background:var(--ink); color:var(--stock)}
.founder-body-dark .prose{color:var(--stock)}
.founder-body-dark .prose p{color:var(--on-dark)}
.founder-body-dark .prose > p:first-of-type{
  color:var(--stock); font-size:clamp(21px,2.2vw,30px); line-height:1.32; letter-spacing:-.022em; font-weight:500;
}
.founder-body-dark .founder-side h2{color:var(--grey)}
.founder-body-dark .sidelist{border-top-color:var(--on-dark-rule)}
.founder-body-dark .sidelist li{border-bottom-color:var(--on-dark-rule); color:var(--on-dark)}

/* One pulled line, which is where the page gets its weight. */
.pullstate{background:var(--ink); color:var(--stock); padding-block:clamp(48px,6.4vw,104px); border-top:1px solid var(--on-dark-rule)}
.pullstate p{
  font-size:clamp(26px,4.2vw,58px); line-height:1.1; letter-spacing:-.035em; font-weight:500;
  max-width:22ch; margin-inline:0; color:var(--stock);
}
.pullstate .who{color:var(--grey); font-size:16px; margin-top:calc(var(--u)*3); letter-spacing:0}
.pagecta--dark{background:var(--ink); color:var(--stock); border-top:1px solid var(--on-dark-rule)}
.pagecta--dark h2{color:var(--stock)}
.pagecta--dark p{color:var(--on-dark)}

/* The founder column was set to a reading measure meant for long-form and read
   as a narrow strip against a full-width dark page. Wider column, wider pull. */
.founder-body{grid-template-columns:minmax(0,1fr) minmax(0,.42fr); gap:clamp(32px,5.4vw,96px)}
.founder-body-dark .prose{max-width:none}
.founder-body-dark .prose p{max-width:62ch}
.founder-body-dark .prose > p:first-of-type{max-width:26ch}
.pullstate p{max-width:26ch}
@media (max-width:880px){ .founder-body{grid-template-columns:1fr} }