/* Jonathan Bricker — design system
   Fraunces (display) · Spectral (reading) · IBM Plex Sans (UI)
   Ported from the approved concept. */
/* ============================ TOKENS ============================ */
:root{
  --paper:#FBF8F3; --paper-2:#F3EEE5; --paper-3:#E9E1D3;
  --ink:#1C1A17; --ink-2:#5C5548; --ink-3:#837A6A;
  --rule:#DCD3C3; --rule-soft:#EAE3D6;
  --ivy:#24473B; --ivy-2:#3B6B58; --ivy-wash:#E4EBE4;
  --slate:#4C5B68; --slate-wash:#E5E8EB;
  --shadow:rgba(28,26,23,.10);
  --display:"Fraunces","Iowan Old Style",Georgia,serif;
  --read:"Spectral",Georgia,"Times New Roman",serif;
  --ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131210; --paper-2:#1B1917; --paper-3:#252220;
    --ink:#F3EEE5; --ink-2:#ABA294; --ink-3:#8A8173;
    --rule:#332E28; --rule-soft:#262220;
    --ivy:#8FBFA8; --ivy-2:#B2D6C2; --ivy-wash:#1C2622;
    --slate:#9AB0C0; --slate-wash:#1B2126;
    --shadow:rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#131210; --paper-2:#1B1917; --paper-3:#252220;
  --ink:#F3EEE5; --ink-2:#ABA294; --ink-3:#8A8173;
  --rule:#332E28; --rule-soft:#262220;
  --ivy:#8FBFA8; --ivy-2:#B2D6C2; --ivy-wash:#1C2622;
  --slate:#9AB0C0; --slate-wash:#1B2126;
  --shadow:rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui)}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--display);font-weight:500;letter-spacing:-.012em;line-height:1.1}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ivy);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================ STAGE ============================ */
.stage{background:var(--paper-2);transition:padding .2s}

.stage.is-mobile{padding:34px 16px 56px}
.stage.is-mobile .site{max-width:404px;border:11px solid var(--ink);border-radius:40px;box-shadow:0 22px 60px var(--shadow)}

/* ============================ PRIMITIVES ============================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 56px}
.eyebrow{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ivy)}
.lede{font-family:var(--read);font-size:19px;line-height:1.62;color:var(--ink-2)}

.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-size:14.5px;font-weight:500;
  padding:13px 22px;border-radius:2px;text-decoration:none;border:1px solid var(--ivy);transition:.16s;cursor:pointer;
}
.btn-solid{background:var(--ivy);color:var(--paper)}
.btn-solid:hover{background:var(--ivy-2);border-color:var(--ivy-2)}
.btn-ghost{background:transparent;color:var(--ivy)}
.btn-ghost:hover{background:var(--ivy-wash)}
.arrow{transition:transform .16s}
.btn:hover .arrow{transform:translateX(3px)}
.txtlink{font-family:var(--ui);font-size:14.5px;font-weight:500;color:var(--ivy);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.txtlink:hover{color:var(--ivy-2)}
.shot{position:relative;overflow:hidden;background:var(--paper-3);border:1px solid var(--rule)}
.shot img{width:100%;height:100%;object-fit:cover}

/* ============================ MASTHEAD ============================ */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:20}
.mast-in{display:flex;align-items:center;gap:30px;padding-top:22px;padding-bottom:22px}
.wordmark{text-decoration:none;flex:0 0 auto}
.wordmark .nm{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.02em;display:block}
.wordmark .rl{font-family:var(--ui);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:4px;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav a{font-family:var(--ui);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 0;position:relative;white-space:nowrap}
.nav a:hover,.nav a.on{color:var(--ivy)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ivy)}
.hasmenu{position:relative}
.hasmenu>a::after{content:"▾";font-size:9px;margin-left:5px;color:var(--ink-3)}
.menu{
  position:absolute;top:calc(100% + 10px);left:-18px;min-width:238px;z-index:40;background:var(--paper);
  border:1px solid var(--rule);box-shadow:0 14px 34px var(--shadow);padding:8px;display:none;
}
.hasmenu:hover .menu,.hasmenu:focus-within .menu{display:block}
.menu a{display:block;padding:9px 12px;font-size:13.5px;font-weight:400}
.menu a:hover{background:var(--ivy-wash);color:var(--ivy)}
.menu .sep{height:1px;background:var(--rule-soft);margin:7px 12px}
.menu .tel{font-family:var(--ui);font-size:12px;color:var(--ink-3);padding:4px 12px 8px}
.navcta{border:1px solid var(--ivy)!important;color:var(--ivy)!important;padding:9px 16px!important}
.navcta:hover{background:var(--ivy-wash)}
.burger{display:none;margin-left:auto;appearance:none;background:transparent;border:1px solid var(--rule);border-radius:2px;width:42px;height:38px;cursor:pointer;color:var(--ink);font-size:15px}

/* ============================ HERO ============================ */
.hero{
  border-bottom:1px solid var(--rule);
  background:radial-gradient(80% 70% at 88% 18%,var(--ivy-wash) 0%,transparent 62%),var(--paper);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center;padding-top:76px;padding-bottom:76px}
.hero h1{font-size:clamp(40px,4.7cqw,63px);line-height:1.03;margin:20px 0 0}
.hero .lede{margin-top:24px;max-width:33em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-practice{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--ui);font-size:14px;
  color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.hero-fig{margin:0;position:relative;justify-self:end;width:100%;max-width:440px}
.hero-fig .shot{aspect-ratio:4/5}
.hero-fig .shot img{object-position:62% 34%}
.hero-tag{
  position:absolute;left:-24px;bottom:26px;background:var(--paper);border:1px solid var(--rule);
  border-left:3px solid var(--ivy);padding:13px 18px;box-shadow:0 14px 34px var(--shadow);max-width:250px;
}
.hero-tag .t{font-family:var(--display);font-size:16px;line-height:1.2}
.hero-tag .s{font-family:var(--ui);font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.45}

/* ============================ THESIS ============================ */
.thesis{
  padding:96px 0;border-bottom:1px solid var(--rule);position:relative;overflow:hidden;
  isolation:isolate;background:#171009;
}
.thesis-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.thesis-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;display:block}
.thesis-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(20,14,8,.93) 0%,rgba(20,14,8,.86) 38%,rgba(20,14,8,.58) 72%,rgba(20,14,8,.34) 100%);
}
.thesis-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;position:relative;z-index:1}
.thesis .eyebrow{color:#E8C489}
.thesis h2{font-size:clamp(29px,3cqw,40px);line-height:1.12;margin-top:16px;color:#FDFBF7}
.thesis .lede{font-size:18px;color:rgba(253,251,247,.84)}
.thesis .lede+.lede{margin-top:18px}

/* ============================ LEDGER ============================ */
.familiar{padding:78px 0;border-bottom:1px solid var(--rule)}
.familiar-head{max-width:52ch;margin-bottom:40px}
.familiar-head h2{font-size:clamp(29px,3cqw,40px);margin-top:16px}
.familiar-head p{margin-top:16px}
.ledgers{border-top:1px solid var(--rule)}
.ledger{padding:32px 0;border-bottom:1px solid var(--rule)}
.ledger-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:22px}
.ledger-top h3{font-size:23px;letter-spacing:-.01em}
.ledger-cue{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);padding:4px 11px;border:1px solid var(--rule);border-radius:999px}
.ledger-body{display:grid;grid-template-columns:274px 1fr;gap:42px;align-items:start}
.ledger-body .shot{aspect-ratio:3/2}
.trade{display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
.trade .bar{background:var(--rule)}
.side{padding:0 34px 0 0}
.side.cost{padding:0 0 0 34px}
.side-label{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-bottom:11px}
.side.gain .side-label{color:var(--ivy)}
.side.cost .side-label{color:var(--slate)}
.side-label .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.side p{font-family:var(--read);font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ============================ ABOUT ============================ */
.about{padding:78px 0;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.about-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:start}
.about-fig{margin:0}
.about-fig .shot{aspect-ratio:1/1}
.about-fig .shot img{object-position:56% 62%}
.about-credit{font-family:var(--ui);font-size:11.5px;color:var(--ink-3);margin-top:10px}
.about h2{font-size:clamp(28px,2.8cqw,38px);margin-top:14px}
.about .lede{margin-top:20px}
.creds{list-style:none;margin:26px 0 0;padding:0}
.creds li{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--rule);font-family:var(--ui);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.creds li:last-child{border-bottom:1px solid var(--rule)}
.creds .k{flex:0 0 150px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.pending{margin-top:16px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3);font-style:italic}

/* ============================ AFFILIATIONS MARQUEE ============================ */
.affil{padding:28px 0 30px;border-bottom:1px solid var(--rule);background:var(--paper);overflow:hidden}
.affil-k{
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin-bottom:20px;
}
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-track{display:flex;width:max-content;animation:affil-slide 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes affil-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .affil-dupe{display:none}
}
.affil-list{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.affil-list li{
  display:flex;align-items:center;gap:11px;padding:0 30px;white-space:nowrap;
  font-family:var(--display);font-size:16.5px;font-weight:500;letter-spacing:-.008em;
  color:var(--ink-2);opacity:.9;position:relative;
}
.affil-list li::after{
  content:"";position:absolute;right:-3px;width:5px;height:5px;transform:rotate(45deg);
  background:var(--rule);
}
.affil-list svg{width:23px;height:23px;flex:0 0 auto;color:var(--ivy);opacity:.85}

/* ============================ NUMBERS ============================ */
.proof{padding:74px 0;border-bottom:1px solid var(--rule);background:var(--paper)}
.proof-head{max-width:52ch;margin-bottom:38px}
.proof-head h2{font-size:clamp(28px,2.9cqw,39px);margin-top:14px}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule)}
.stats li{padding:26px 28px 26px 0;border-bottom:1px solid var(--rule)}
.stats li:not(:last-child){border-right:1px solid var(--rule)}
.stats li:not(:first-child){padding-left:28px}
.stats .n{
  display:block;font-family:var(--display);font-weight:500;color:var(--ivy);
  font-size:clamp(30px,3.4cqw,44px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stats .l{display:block;font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:13px}
.proof-note{margin-top:16px;font-family:var(--ui);font-size:12.5px;color:var(--ink-3);font-style:italic}

/* ============================ BOOK ============================ */
.book{padding:82px 0;background:var(--ivy);color:#F3EEE5;border-bottom:1px solid var(--rule)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .book{background:var(--ivy-wash);color:var(--ink)}}
:root[data-theme="dark"] .book{background:var(--ivy-wash);color:var(--ink)}
.book-grid{display:grid;grid-template-columns:.58fr 1.42fr;gap:56px;align-items:center}
.book .eyebrow{color:inherit;opacity:.74}
.book h2{font-size:clamp(29px,3.1cqw,42px);margin-top:16px;line-height:1.1}
.book .b-lede{font-family:var(--read);font-size:18px;line-height:1.62;margin-top:20px;opacity:.88;max-width:40em}
.book .btn-ghost{color:inherit;border-color:currentColor;margin-top:26px}
.book .btn-ghost:hover{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .book .btn-ghost:hover{background:var(--ivy-wash)}
.learn{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.learn li{display:flex;gap:13px;align-items:flex-start;font-family:var(--ui);font-size:14px;line-height:1.45;opacity:.92}
.learn svg{width:21px;height:21px;flex:0 0 auto;margin-top:1px;opacity:.8}
.cover{display:flex;flex-direction:column;gap:12px;align-items:center}
.cover-face{
  width:100%;aspect-ratio:5/7;background:#FBF8F3;color:#24473B;border-left:6px solid #17332A;
  box-shadow:0 26px 54px rgba(8,20,16,.45);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:15px;padding:11% 12%;text-align:center;
}
.c-rule{display:block;width:40px;height:1px;background:currentColor;opacity:.45}
.c-kicker{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
.c-title{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.02;font-size:clamp(23px,3cqw,38px);color:#17332A}
.c-sub{font-family:var(--read);font-style:italic;font-size:12px;line-height:1.5;opacity:.78}
.c-mark{width:50px;height:auto;opacity:.6}
.cover-tag{font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.62}

/* ============================ WORKSHEET ============================ */
.sheet{padding:78px 0;border-bottom:1px solid var(--rule)}
.sheet-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.sheet h2{font-size:clamp(28px,2.9cqw,39px);margin-top:16px}
.sheet .lede{margin-top:18px;max-width:38em}
.signup{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.signup input{flex:1 1 240px;min-width:0;font-family:var(--ui);font-size:15px;padding:13px 15px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:2px}
.signup input::placeholder{color:var(--ink-3)}
.signup2{margin-top:26px;display:flex;flex-direction:column;gap:12px;max-width:470px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.signup2 input{
  font-family:var(--ui);font-size:15px;padding:13px 15px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:2px;min-width:0;width:100%;
}
.signup2 input::placeholder{color:var(--ink-3)}
.signup2 .btn{justify-content:center}
.privacy{margin-top:13px;font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:470px}
/* standalone by default; only an overlay when it sits on a .sheet-visual photo */
.sheet-card{
  position:static;width:auto;background:var(--paper);border:1px solid var(--rule);
  padding:26px 28px;box-shadow:0 18px 44px var(--shadow);
}
.sheet-card h4{font-family:var(--display);font-size:17px;margin-bottom:3px}
.sheet-card .sc-sub{font-family:var(--ui);font-size:11px;color:var(--ink-3);margin-bottom:16px}
.sheet-field{padding:11px 0;border-top:1px solid var(--rule)}
.sheet-field:last-child{border-bottom:1px solid var(--rule)}
.sheet-field .q{font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sheet-field .lines{margin-top:8px;height:1px;background:var(--rule);box-shadow:0 7px 0 var(--rule)}

/* ============================ MEDIA ============================ */
.media{padding:78px 0;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
a.talk{display:block;text-decoration:none;position:relative;margin-top:16px}
a.talk .shot{aspect-ratio:16/9;display:grid;place-items:center}
a.talk .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,16,.08),rgba(12,14,16,.40));transition:.18s}
a.talk:hover .shot::after{background:linear-gradient(180deg,rgba(12,14,16,.02),rgba(12,14,16,.28))}
.play{
  position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:#1C1A17;font-size:15px;padding-left:3px;
  box-shadow:0 6px 24px rgba(0,0,0,.34);transition:transform .18s;
}
a.talk:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.media h3{font-size:25px;margin-top:16px}
.talk-meta{font-family:var(--ui);font-size:13.5px;color:var(--ink-3);margin-top:9px}
.media .btn{margin-top:22px}
.posts{list-style:none;margin:22px 0 0;padding:0}
.posts li{border-top:1px solid var(--rule)}
.posts li:last-child{border-bottom:1px solid var(--rule)}
.posts a{display:flex;gap:18px;align-items:baseline;padding:16px 0;text-decoration:none;transition:.14s}
.posts a:hover{padding-left:8px}
.posts a:hover .pt{color:var(--ivy)}
.posts .pn{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--ink-3);flex:0 0 auto;letter-spacing:.08em;padding-top:4px}
.posts .pt{font-family:var(--display);font-size:17.5px;line-height:1.28;letter-spacing:-.008em}

/* ============================ PRACTICE ============================ */
.practice{padding:72px 0;border-bottom:1px solid var(--rule)}
.practice-in{
  border:1px solid var(--rule);border-left:3px solid var(--slate);background:var(--slate-wash);
  padding:38px 42px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
}
.practice .pic{width:46px;height:46px;color:var(--slate);flex:0 0 auto}
.practice h3{font-size:25px}
.practice p{font-family:var(--read);font-size:16.5px;line-height:1.6;color:var(--ink-2);margin-top:11px;max-width:46em}
.practice .btn{border-color:var(--slate);color:var(--slate);white-space:nowrap}
.practice .btn:hover{background:var(--paper)}

/* ============================ FOOTER ============================ */
.foot{padding:62px 0 38px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:44px}
.foot h5{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot a{font-family:var(--ui);font-size:14px;text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--ivy)}
.foot .fm{font-family:var(--display);font-size:20px}
.foot .fs{font-family:var(--read);font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:14px;max-width:30em}
.foot-base{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--ui);font-size:12.5px;color:var(--ink-3)}

/* ============================ ARTICLE ============================ */
.art-head{padding:66px 0 42px;border-bottom:1px solid var(--rule)}
.art-in{max-width:760px;margin:0 auto}
.crumb{font-family:var(--ui);font-size:12px;color:var(--ink-3);margin-bottom:20px}
.crumb a{color:var(--ivy);text-decoration:none}
.art-head h1{font-size:clamp(34px,4.1cqw,53px);line-height:1.06;margin-top:14px}
.standfirst{font-family:var(--read);font-size:20.5px;line-height:1.58;color:var(--ink-2);margin-top:22px;font-style:italic}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--ui);font-size:13px;color:var(--ink-3)}
.byline .who{color:var(--ink);font-weight:500}
.byline .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.art-lead{margin:0;padding:38px 0 0}
.art-lead .shot{aspect-ratio:3/2}
.art-lead figcaption{margin-top:12px}
.art-body{padding:34px 0 20px}
.art-body .art-in>p{font-family:var(--read);font-size:18.5px;line-height:1.74;color:var(--ink);margin-bottom:26px}
.art-body .art-in>p.first::first-letter{float:left;font-family:var(--display);font-size:64px;line-height:.84;padding:6px 12px 0 0;color:var(--ivy);font-weight:500}
.art-body h2{font-size:27px;margin:44px 0 18px;letter-spacing:-.01em}
.art-body h2+p{margin-top:0}
.pullquote{margin:48px 0;padding:40px 44px 38px;background:#24473B;color:#FBF8F3;position:relative;overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pullquote{background:var(--ivy-wash);color:var(--ink)}}
:root[data-theme="dark"] .pullquote{background:var(--ivy-wash);color:var(--ink)}
.pullquote::before{
  content:"\201C";position:absolute;left:18px;top:-6px;font-family:var(--display);font-size:104px;
  line-height:1;opacity:.2;pointer-events:none;
}
.pullquote p{font-family:var(--display);font-size:27px;line-height:1.27;font-weight:400;letter-spacing:-.015em;color:inherit;margin:0;position:relative}
.pullquote cite{
  display:block;font-family:var(--ui);font-size:11px;font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;opacity:.68;margin-top:18px;
}
figure{margin:44px 0}
.art-fig .shot{aspect-ratio:5/3}
figcaption{font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:12px;max-width:52em}
.triptych .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tri-item .shot{aspect-ratio:3/4}
.tri-k{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;margin-top:15px;color:var(--ink-3)}
.tri-k.gain{color:var(--ivy)}
.tri-k.cost{color:var(--slate)}
.tri-d{font-family:var(--read);font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:7px}
.art-ledger{margin:46px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);padding:26px 0 24px}
.art-ledger .al-k{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.inline-cta{margin:50px 0;padding:30px 32px;background:var(--paper-2);border:1px solid var(--rule)}
.inline-cta h4{font-family:var(--display);font-size:22px;margin-bottom:10px}
.inline-cta p{font-family:var(--read);font-size:16px;line-height:1.6;color:var(--ink-2);margin-bottom:20px}
.bio{margin:54px 0 0;padding:26px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:88px 1fr;gap:24px;align-items:start}
.bio .shot{width:88px;height:88px;border-radius:50%}
.bio .shot img{object-position:50% 26%}
/* the article template marks this up as .plate.bio-plate rather than .shot, so it
   never picked up the circular treatment the practice rail avatar has */
.bio .bio-plate{width:88px;height:88px}
.bio .bio-plate img{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);
}
.bio h4{font-family:var(--display);font-size:19px}
.bio .role{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);margin-top:4px}
.bio p{font-family:var(--read);font-size:15.5px;line-height:1.62;color:var(--ink-2);margin-top:12px}
.related{padding:58px 0 78px;background:var(--paper-2);border-top:1px solid var(--rule)}
.related h3{font-size:24px;margin-bottom:8px}
.related .rsub{font-family:var(--ui);font-size:13.5px;color:var(--ink-3)}

[hidden]{display:none!important}

/* ============================ CONTAINER RESPONSE ============================ */
@media (max-width:1000px){
  .wrap{padding:0 40px}
  .hero-grid,.thesis-grid,.about-grid,.book-grid,.sheet-grid,.media-grid{gap:40px}
  .ledger-body{grid-template-columns:220px 1fr;gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:820px){
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;
    z-index:60;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:8px 40px 18px;
  }
  .nav.open a{padding:13px 0;border-bottom:1px solid var(--rule-soft)}
  .nav.open .navcta{margin-top:14px;text-align:center;justify-content:center}
  .nav.open .hasmenu>a::after{content:""}
  .menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 6px 16px;min-width:0;background:transparent}
  .menu a{font-size:13px;color:var(--ink-2);border-bottom:0!important;padding:8px 0}
  .menu .sep{display:none}
  .burger{display:block}
  .mast-in{padding-top:18px;padding-bottom:18px}

  .hero-grid{grid-template-columns:1fr;gap:34px;padding-top:48px;padding-bottom:52px}
  .hero h1{font-size:clamp(34px,8cqw,46px)}
  .hero .lede{font-size:17.5px}
  .hero-fig{max-width:none;order:-1}
  .hero-fig .shot{aspect-ratio:16/11}
  .hero-tag{left:auto;right:16px;bottom:-16px;max-width:230px}

  .familiar,.about,.book,.sheet,.media,.practice,.proof{padding:54px 0}
  .thesis{padding:62px 0}
  .thesis-bg img{object-position:58% 50%}
  .thesis-bg::after{background:linear-gradient(180deg,rgba(20,14,8,.90) 0%,rgba(20,14,8,.84) 55%,rgba(20,14,8,.62) 100%)}
  .stats{grid-template-columns:1fr 1fr}
  .stats li:nth-child(2n){border-right:0}
  .stats li:nth-child(2n+1){padding-left:0}
  .stats li:nth-child(2n){padding-left:28px}
  .affil-list li{font-size:15px;padding:0 22px}
  .affil-list svg{width:21px;height:21px}
  .thesis-grid,.about-grid,.book-grid,.sheet-grid,.media-grid{grid-template-columns:1fr}
  .about-fig .shot{aspect-ratio:3/2}
  .cover{max-width:250px;margin:0 auto}
  .learn{grid-template-columns:1fr}

  .ledger-body{grid-template-columns:1fr;gap:24px}
  /* his handoff asks that the habit-bargain scene keep its full 3:2 on phones,
     so both the phone and the laptop stay in frame */
  .ledger-body .shot{aspect-ratio:3/2}
  .trade{grid-template-columns:1fr}
  .trade .bar{height:1px;width:100%;margin:20px 0}
  .side,.side.cost{padding:0}

  .practice-in{grid-template-columns:1fr;padding:28px 24px;gap:20px}
  .practice .btn{justify-self:start}

  .art-head{padding:42px 0 32px}
  .art-lead{padding:28px 0 0}
  .art-lead .shot{aspect-ratio:16/10}
  .art-body{padding:26px 0 10px}
  .art-body .art-in>p{font-size:17.5px}
  .standfirst{font-size:18px}
  .pullquote{padding:30px 26px 28px}
  .pullquote p{font-size:22px}
  .pullquote::before{font-size:78px;left:10px}
  .triptych .tri{gap:12px}
  .tri-d{font-size:13.5px}
  .inline-cta{padding:24px 20px}
  .bio{grid-template-columns:1fr;gap:16px}
  .foot{padding:50px 0 32px}
}
@media (max-width:560px){
  .wrap{padding:0 22px}
  .nav.open{padding:8px 22px 18px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .ledger-top{gap:10px}
  .ledger-top h3{font-size:20px}
  .creds li{flex-direction:column;gap:6px}
  .creds .k{flex:0 0 auto}
  .art-body .art-in>p.first::first-letter{font-size:52px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-tag{right:8px}
  .stats{grid-template-columns:1fr}
  .stats li{border-right:0!important;padding:22px 0!important}
  .triptych .tri{grid-template-columns:1fr;gap:24px}
  .tri-item .shot{aspect-ratio:16/10}
  .f2{grid-template-columns:1fr}
  .affil-list li{font-size:14px;padding:0 17px;gap:9px}
  .affil-list svg{width:19px;height:19px}
  .marquee-track{animation-duration:30s}
}


/* ============================ INTERIOR PAGES ============================ */
.pagehead{padding:70px 0 54px;background:var(--paper-2);border-bottom:1px solid var(--rule)}
.pagehead h1{font-size:clamp(34px,4.2vw,54px);line-height:1.05;margin-top:16px}
.pagehead .lede{margin-top:20px;max-width:40em}
.prose{padding:64px 0}
.prose .col{max-width:760px}
.prose p{font-family:var(--read);font-size:18px;line-height:1.75;color:var(--ink);margin-bottom:24px}
.prose h2{font-size:27px;margin:44px 0 18px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:34px 0 14px}
.prose ul{margin:0 0 26px;padding-left:20px}
.prose li{font-family:var(--read);font-size:17.5px;line-height:1.7;color:var(--ink);margin-bottom:10px}
.prose .standout{
  font-family:var(--display);font-size:22px;line-height:1.35;color:var(--ivy);
  border-left:3px solid var(--ivy);padding-left:24px;margin:34px 0;
}
.prose figure{margin:40px 0}
.prose figure img{display:block;width:100%;border:1px solid var(--rule)}

.linkgroup{padding:48px 0;border-bottom:1px solid var(--rule)}
.linkgroup:last-of-type{border-bottom:0}
.linkgroup h2{font-size:24px;margin-bottom:6px}
.linkgroup .sub{font-family:var(--ui);font-size:13px;color:var(--ink-3);margin-bottom:22px}
.links{list-style:none;margin:0;padding:0}
.links li{border-top:1px solid var(--rule)}
.links li:last-child{border-bottom:1px solid var(--rule)}
.links a{display:flex;gap:16px;align-items:baseline;padding:16px 0;text-decoration:none;transition:.14s}
.links a:hover{padding-left:8px}
.links a:hover .lt{color:var(--ivy)}
.links .lt{font-family:var(--display);font-size:18px;line-height:1.3;letter-spacing:-.008em}
.links .ls{font-family:var(--ui);font-size:12.5px;color:var(--ink-3);margin-left:auto;white-space:nowrap;padding-left:20px}

.notice{
  border:1px solid var(--rule);border-left:3px solid var(--slate);background:var(--slate-wash);
  padding:26px 30px;margin:34px 0;
}
.notice h3{font-size:19px;margin-bottom:10px}
.notice p{font-family:var(--read);font-size:16px;line-height:1.65;color:var(--ink-2);margin-bottom:0}

.contactgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.cbox{border:1px solid var(--rule);background:var(--paper-2);padding:28px 30px}
.cbox h3{font-size:19px;margin-bottom:14px}
.cfield{display:block;margin-bottom:16px}
.cfield span{display:block;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.cfield input,.cfield textarea{
  width:100%;font-family:var(--ui);font-size:15px;padding:12px 14px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);border-radius:2px;
}
.cfield textarea{min-height:140px;resize:vertical}
.consent{display:flex;gap:10px;align-items:flex-start;font-family:var(--ui);font-size:13px;
  line-height:1.5;color:var(--ink-2);margin-bottom:18px}
.deets{list-style:none;margin:0;padding:0}
.deets li{padding:14px 0;border-top:1px solid var(--rule);font-family:var(--ui);font-size:14.5px}
.deets li:last-child{border-bottom:1px solid var(--rule)}
.deets .k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}

.todo{background:#FFF4D6;border:1px solid #E3C77A;color:#5A4410;padding:14px 18px;
  font-family:var(--ui);font-size:13px;line-height:1.6;margin:22px 0}
.todo strong{color:#3E2F08}
:root[data-theme="dark"] .todo{background:#2A2312;border-color:#5C4A1E;color:#E8D9AE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .todo{
  background:#2A2312;border-color:#5C4A1E;color:#E8D9AE}}

@media (max-width:820px){
  .pagehead{padding:48px 0 38px}
  .prose{padding:44px 0}
  .contactgrid{grid-template-columns:1fr;gap:36px}
  .links .ls{display:none}
}


/* ============================ FORMS ============================ */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
input.is-invalid,textarea.is-invalid{border-color:#B4472F;outline:none}
.fielderr{display:block;font-family:var(--ui);font-size:12px;color:#B4472F;margin-top:6px}
:root[data-theme="dark"] .fielderr,
:root[data-theme="dark"] input.is-invalid,
:root[data-theme="dark"] textarea.is-invalid{color:#E9967A;border-color:#E9967A}
.formmsg{font-family:var(--ui);font-size:13.5px;line-height:1.6;margin-top:12px}
.formmsg:empty{display:none}
.formmsg.is-ok{color:var(--ivy)}
.formmsg.is-err{color:#B4472F}
.formmsg.is-warn{
  color:#5A4410;background:#FFF4D6;border:1px solid #E3C77A;padding:11px 14px;
}
:root[data-theme="dark"] .formmsg.is-err{color:#E9967A}
:root[data-theme="dark"] .formmsg.is-warn{background:#2A2312;border-color:#5C4A1E;color:#E8D9AE}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .formmsg.is-warn{background:#2A2312;border-color:#5C4A1E;color:#E8D9AE}
  :root:not([data-theme="light"]) .formmsg.is-err{color:#E9967A}
}
button[disabled]{opacity:.6;cursor:default}

/* ==================== INTERIOR ARCHITECTURE v2 ==================== */

/* ---------- page hero: image band, cream type ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;background:#171009;border-bottom:1px solid var(--rule)}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(98deg,rgba(20,14,8,.93) 0%,rgba(20,14,8,.84) 44%,rgba(20,14,8,.50) 76%,rgba(20,14,8,.32) 100%)}
.phero-in{position:relative;z-index:1;padding:104px 0 96px;max-width:44em}
.phero .eyebrow{color:#E8C489}
.phero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.03;margin-top:18px;color:#FDFBF7}
.phero .lede{font-family:var(--read);font-size:19.5px;line-height:1.64;color:rgba(253,251,247,.85);margin-top:22px;max-width:34em}
/* the practical promise he asked to sit under the book subtitle, above the publication
   details (round 5) */
.bookpromise{
  font-family:var(--read);font-size:16.5px;line-height:1.6;
  color:rgba(253,251,247,.82);margin-top:16px;max-width:34em;
}

/* the credential line he asked to sit under the Private Practice opener (round 5),
   deliberately quieter than the lede above it */
.phero .credline{
  font-family:var(--read);font-size:15px;line-height:1.6;
  color:rgba(253,251,247,.66);margin-top:16px;max-width:36em;
}
.phero-meta{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(253,251,247,.22);font-family:var(--ui);font-size:13px;color:rgba(253,251,247,.72)}
.phero-meta b{color:#F0D3A6;font-weight:500}

/* ---------- split hero: type left, portrait right ---------- */
.shero{padding:78px 0;border-bottom:1px solid var(--rule);background:var(--paper)}
.shero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.shero h1{font-size:clamp(36px,4.3vw,58px);line-height:1.04;margin-top:18px}
.shero .lede{margin-top:22px;max-width:34em}
.shero-img{width:100%;aspect-ratio:4/5;position:relative;overflow:hidden;border:1px solid var(--rule)}
.shero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- full-width statement ---------- */
.statement{padding:74px 0;background:#24473B;border-bottom:1px solid var(--rule)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statement{background:var(--ivy-wash)}}
:root[data-theme="dark"] .statement{background:var(--ivy-wash)}
.statement p{
  font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.2;
  font-size:clamp(28px,3.6vw,48px);color:#FDFBF7;max-width:20ch;
}
:root[data-theme="dark"] .statement p{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statement p{color:var(--ink)}}
.statement .sub{font-family:var(--read);font-size:18px;line-height:1.6;margin-top:22px;
  max-width:42em;color:rgba(253,251,247,.8)}
:root[data-theme="dark"] .statement .sub{color:var(--ink-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statement .sub{color:var(--ink-2)}}

/* ---------- numbered sequence ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.steps>li{list-style:none;padding:34px 34px 34px 0;border-bottom:1px solid var(--rule)}
.steps>li+li{border-left:1px solid var(--rule);padding-left:34px}
.step-n{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivy);display:block;margin-bottom:14px}
.steps h3{font-size:23px;letter-spacing:-.01em;margin-bottom:10px}
.steps p{font-family:var(--read);font-size:16px;line-height:1.62;color:var(--ink-2)}

/* ---------- fact strip ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.facts li{padding:24px 26px 24px 0;border-bottom:1px solid var(--rule)}
.facts li+li{border-left:1px solid var(--rule);padding-left:26px}
.facts .fk{display:block;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.facts .fv{display:block;font-family:var(--display);font-size:20px;line-height:1.25;letter-spacing:-.01em}

/* ---------- card grid ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--rule);background:var(--paper);transition:.16s}
.card:hover{border-color:var(--ivy);transform:translateY(-2px)}
.card-img{aspect-ratio:3/2;overflow:hidden;background:var(--paper-3);border-bottom:1px solid var(--rule)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}
.card-in{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .ck{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivy);margin-bottom:11px}
.card h3{font-size:20px;line-height:1.28;letter-spacing:-.008em;margin-bottom:9px}
.card p{font-family:var(--read);font-size:15px;line-height:1.6;color:var(--ink-2)}
.card .cgo{margin-top:auto;padding-top:16px;font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ivy)}

/* ---------- featured item ---------- */
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
  border:1px solid var(--rule);background:var(--paper-2);padding:0;overflow:hidden}
.feature-img{aspect-ratio:4/3;overflow:hidden;order:2}
.feature-img img{width:100%;height:100%;object-fit:cover;display:block}
.feature-in{padding:44px 10px 44px 44px;order:1}
.feature h3{font-size:clamp(24px,2.5vw,33px);line-height:1.12;margin:14px 0 14px}
.feature p{font-family:var(--read);font-size:17px;line-height:1.65;color:var(--ink-2);margin-bottom:22px}

/* ---------- prose refinements ---------- */
.prose .col>p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-size:60px;line-height:.86;
  padding:6px 12px 0 0;color:var(--ivy);font-weight:500;
}
.prose .col.nodrop>p:first-of-type::first-letter{float:none;font-size:inherit;padding:0;color:inherit;font-weight:inherit}
.prose h2{padding-top:10px;border-top:1px solid var(--rule)}
.prose h2:first-child{border-top:0;padding-top:0}
.pquote{margin:44px 0;padding:0 0 0 30px;border-left:3px solid var(--ivy)}
.pquote p{font-family:var(--display);font-size:25px;line-height:1.3;letter-spacing:-.012em;
  color:var(--ink);margin:0}

/* ---------- side-by-side prose + sticky aside ---------- */
.withaside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px;align-items:start}
.aside{position:sticky;top:28px;border:1px solid var(--rule);background:var(--paper-2);padding:26px 26px 28px}
.aside h4{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.aside ul{list-style:none;margin:0;padding:0}
.aside li{padding:11px 0;border-top:1px solid var(--rule);font-family:var(--ui);font-size:14px;line-height:1.45}
.aside li:first-child{border-top:0}
.aside a{color:var(--ivy);text-decoration:none}
.aside a:hover{text-decoration:underline}
.aside .btn{margin-top:20px;width:100%;justify-content:center}

/* ---------- designed empty state ---------- */
.empty{padding:80px 0;border-bottom:1px solid var(--rule)}
.empty-in{max-width:640px}
.empty svg{width:56px;height:56px;color:var(--ivy);opacity:.55;margin-bottom:24px}
.empty h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:16px}
.empty p{font-family:var(--read);font-size:17.5px;line-height:1.7;color:var(--ink-2);margin-bottom:18px}

/* ---------- next steps ---------- */
.nsteps{list-style:none;margin:0;padding:0;counter-reset:ns}
.nsteps li{counter-increment:ns;display:grid;grid-template-columns:34px 1fr;gap:16px;
  padding:16px 0;border-top:1px solid var(--rule);font-family:var(--read);font-size:16px;
  line-height:1.6;color:var(--ink-2)}
.nsteps li::before{content:counter(ns);font-family:var(--ui);font-size:12px;font-weight:600;
  color:var(--ivy);border:1px solid var(--ivy);border-radius:50%;width:26px;height:26px;
  display:grid;place-items:center;margin-top:2px}

@media (max-width:900px){
  .steps,.facts{grid-template-columns:1fr 1fr}
  .steps>li+li,.facts li+li{border-left:0;padding-left:0}
  .steps>li:nth-child(2n),.facts li:nth-child(2n){border-left:1px solid var(--rule);padding-left:28px}
  .cards{grid-template-columns:1fr 1fr}
  .withaside{grid-template-columns:1fr;gap:36px}
  .aside{position:static}
}
@media (max-width:820px){
  .phero-in{padding:58px 0 54px}
  .shero{padding:48px 0}
  .shero-grid{grid-template-columns:1fr;gap:34px}
  .shero-img{aspect-ratio:3/2;order:-1}
  .statement{padding:52px 0}
  .feature{grid-template-columns:1fr}
  .feature-img{order:-1;aspect-ratio:16/9}
  .feature-in{padding:30px 26px 34px}
  .prose .col>p:first-of-type::first-letter{font-size:50px}
}
@media (max-width:560px){
  .steps,.facts,.cards{grid-template-columns:1fr}
  .steps>li,.facts li{border-left:0!important;padding-left:0!important}
  .phero-meta{gap:8px 18px}
}

/* ==================== LAYOUT v4 — left-aligned, two-column ==================== */

/* the measure starts at the left edge again — never centred */
.prose .col{max-width:none;margin-inline:0}
.withaside .col{max-width:none;margin-inline:0}

/* text left, rail right — the full container width is used */
.proselayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.proselayout .col{max-width:none}
.proselayout .col p{line-height:1.8}
.proselayout .col > h2{
  position:relative;padding-top:26px;margin-top:52px;border-top:1px solid var(--rule);
}
.proselayout .col > h2::before{
  content:"";position:absolute;top:-1px;left:0;width:46px;height:3px;background:var(--ivy);
}
.proselayout .col > h2:first-child{margin-top:0}
.proselayout .col > h3{margin-top:38px}

/* the rail */
.rail{position:sticky;top:28px;display:flex;flex-direction:column;gap:20px}
.railcard{border:1px solid var(--rule);background:var(--paper-2);padding:24px 24px 26px}
.railcard h4{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:15px;
}
.railcard ol,.railcard ul{list-style:none;margin:0;padding:0}
.railcard li{padding:11px 0;border-top:1px solid var(--rule);font-family:var(--ui);
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.railcard li:first-child{border-top:0}
.railcard li b{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:3px}
.railcard a{color:var(--ivy);text-decoration:none}
.railcard a:hover{text-decoration:underline}
.railcard .btn{margin-top:18px;width:100%;justify-content:center}
.railcard .rq{
  font-family:var(--display);font-size:18px;line-height:1.35;color:var(--ink);
  letter-spacing:-.01em;
}
.railcard .rq + .rc{font-family:var(--ui);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:12px;display:block}

/* section heads keep the full-width treatment */
.sechead{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:end;
  padding-bottom:28px;margin-bottom:40px;border-bottom:1px solid var(--rule);
}
.sechead h2{font-size:clamp(28px,3vw,42px);line-height:1.08;margin-top:14px;letter-spacing:-.018em}
.sechead p{font-family:var(--read);font-size:17px;line-height:1.65;color:var(--ink-2);margin:0;padding-bottom:6px}
.sechead.solo{grid-template-columns:1fr;gap:0}
.sechead.solo h2{max-width:22ch}

/* link lists fill the width, two up */
.links.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--rule)}
.links.grid2 li{border-top:0;border-bottom:1px solid var(--rule)}
.links a{align-items:center;gap:20px}
.links .ls{
  margin-left:auto;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);border-radius:999px;
  padding:4px 11px;white-space:nowrap;transition:.14s;
}
.links a:hover .ls{border-color:var(--ivy);color:var(--ivy)}
.links .lt{flex:1 1 auto}
.linkgroup{padding:0;border-bottom:0;margin-bottom:52px}
.linkgroup:last-of-type{margin-bottom:0}
.linkgroup h2{
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ivy);margin-bottom:18px;
}

@media (max-width:1040px){
  .proselayout{grid-template-columns:minmax(0,1fr) 260px;gap:48px}
}
@media (max-width:900px){
  .proselayout{grid-template-columns:1fr;gap:40px}
  .rail{position:static;flex-direction:row;flex-wrap:wrap}
  .railcard{flex:1 1 260px}
  .sechead{grid-template-columns:1fr;gap:18px;align-items:start}
  .sechead p{padding-bottom:0}
  .links.grid2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .links a{flex-wrap:wrap;gap:8px}
  .links .ls{margin-left:0}
  .rail{flex-direction:column}
}

/* ==================== EDITORIAL EXTRAS ==================== */

/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:150;background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--ivy);transition:width .08s linear}
@media (prefers-reduced-motion:reduce){.progress span{transition:none}}

/* ---------- series rail under the byline ---------- */
.serieskey{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.serieskey a,.serieskey span{
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;
  color:var(--ink-3);transition:.14s;
}
.serieskey a:hover{border-color:var(--ivy);color:var(--ivy)}
.serieskey .here{background:var(--ivy);border-color:var(--ivy);color:var(--paper)}
:root[data-theme="dark"] .serieskey .here{color:#12160f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .serieskey .here{color:#12160f}}

/* ---------- prev / next ---------- */
.pagernav{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);margin-top:8px}
.pagernav a{
  display:flex;flex-direction:column;gap:9px;padding:26px 30px 28px 0;text-decoration:none;
  border-bottom:1px solid var(--rule);transition:.14s;
}
.pagernav a+a{border-left:1px solid var(--rule);padding-left:30px;padding-right:0;text-align:right;align-items:flex-end}
.pagernav a:hover .pt{color:var(--ivy)}
.pagernav .pk{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.pagernav .pt{font-family:var(--display);font-size:19px;line-height:1.28;letter-spacing:-.008em;color:var(--ink)}
.pagernav .spacer{border-bottom:1px solid var(--rule)}

/* ---------- credibility band ---------- */
.band{padding:52px 0;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.band ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0;padding:0}
.band li{padding:0 28px 0 0}
.band li+li{border-left:1px solid var(--rule);padding-left:28px}
.band .bn{display:block;font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1;
  letter-spacing:-.02em;color:var(--ivy)}
.band .bl{display:block;font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:11px}

@media (max-width:820px){
  .pagernav{grid-template-columns:1fr}
  .pagernav a+a{border-left:0;padding-left:0;text-align:left;align-items:flex-start}
  .band ul{grid-template-columns:1fr 1fr;gap:24px 0}
  .band li:nth-child(2n+1){border-left:0;padding-left:0}
  .band li:nth-child(2n){border-left:1px solid var(--rule);padding-left:28px}
}
@media (max-width:560px){
  .band ul{grid-template-columns:1fr}
  .band li{border-left:0!important;padding-left:0!important}
}

/* ==================== CONTROLS ON DARK HEROES ==================== */

.btn-cream{background:#FBF8F3;color:#1C1A17;border-color:#FBF8F3}
.btn-cream:hover{background:#fff;border-color:#fff}
.btn-clear{background:transparent;color:#FDFBF7;border-color:rgba(253,251,247,.55)}
.btn-clear:hover{background:rgba(253,251,247,.12);border-color:#FDFBF7}
.herolink{
  color:#F0D3A6;text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(240,211,166,.5);padding-bottom:2px;
}
.herolink:hover{color:#fff;border-color:#fff}

/* ==================== RAIL PRACTITIONER CARD ==================== */

.railwho{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
  padding-bottom:16px;margin-bottom:4px}
.railwho img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 28%;
  border:1px solid var(--rule)}
.railwho b{display:block;font-family:var(--display);font-size:15px;font-weight:500;
  color:var(--ink);letter-spacing:-.005em;margin-bottom:5px}
.railwho span{display:block;font-family:var(--ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* ==================== PRESS ==================== */

.press{padding:78px 0}
.pressblock{padding-top:40px}
.pressblock + .pressblock{padding-top:52px}
.pressblock-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--rule);
}
.pressblock-h .pn{
  font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--ivy);
}
.pressblock-h h3{font-size:20px;letter-spacing:-.012em;line-height:1.2}
.pressblock-h .pc{
  margin-left:auto;font-family:var(--ui);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

.logogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0}
.logocard{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--rule);background:var(--paper);transition:.16s;
}
.logocard:hover{border-color:var(--ivy);transform:translateY(-2px);box-shadow:0 12px 28px var(--shadow)}
.logo{
  display:block;aspect-ratio:5/2;background:#fff;border-bottom:1px solid var(--rule);overflow:hidden;
}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.lc-in{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.lc-t{
  font-family:var(--display);font-size:17px;line-height:1.3;letter-spacing:-.008em;
  color:var(--ink);transition:.16s;
}
.logocard:hover .lc-t{color:var(--ivy)}
.lc-o{
  margin-top:auto;padding-top:14px;font-family:var(--ui);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.logocard:hover .lc-o{color:var(--ivy)}

@media (max-width:900px){
  .logogrid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:560px){
  .logogrid{grid-template-columns:1fr}
  .pressblock-h .pc{margin-left:0;width:100%}
}

/* ==================== WORKSHEET PREVIEW ==================== */
.sheet-visual{position:relative;padding-bottom:36px;padding-left:36px}
.sheet-visual .shot{aspect-ratio:1/1}

.sheet-card{
  position:relative;width:auto;padding:0;overflow:hidden;
  background:#FFFDF9;border:1px solid var(--rule);box-shadow:0 20px 46px var(--shadow);
}
:root[data-theme="dark"] .sheet-card{background:var(--paper-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet-card{background:var(--paper-2)}}
.sheet-visual .sheet-card{position:absolute;left:0;bottom:0;width:66%}
.sheet-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--ivy)}

.sc-head{padding:22px 24px 16px;border-bottom:1px solid var(--rule)}
.sc-tag{
  display:inline-block;font-family:var(--ui);font-size:9px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivy);border:1px solid var(--ivy);border-radius:999px;
  padding:3px 9px;margin-bottom:11px;
}
.sheet-card h4{font-family:var(--display);font-size:17px;line-height:1.15;letter-spacing:-.012em;margin:0}
.sheet-card .sc-sub{font-family:var(--ui);font-size:11px;color:var(--ink-3);margin-top:5px}

.sc-body{padding:4px 24px 8px}
.sheet-field{padding:13px 0;border-top:1px solid var(--rule-soft)}
.sheet-field:first-child{border-top:0}
.sheet-field .q{
  display:block;font-family:var(--ui);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);
}
.sheet-field .q b{color:var(--ivy);font-weight:600;margin-right:7px}
.sheet-field .lines{height:1px;background:var(--rule);margin-top:15px;box-shadow:none}
/* The course block (round 4) carries a supporting paragraph under its lede. Body copy
   everywhere else on the site is the reading serif, so it matches rather than dropping
   into the interface sans. */
.sheet-grid > div > p:not(.lede):not(.privacy){
  font-family:var(--read);font-size:16.5px;line-height:1.72;color:var(--ink-2);margin-top:14px;
}
/* The card now lists the five weekly lessons (round 4), so each row carries when it
   arrives, pushed to the right of the lesson title. */
.sheet-field:has(.sf-when) .q{display:flex;align-items:baseline;gap:8px}
.sf-when{margin-left:auto;color:var(--ink-3);font-weight:500;letter-spacing:.08em;white-space:nowrap}

/* the button that opens the working worksheet — inside the sheet */
.sc-cta{padding:4px 24px 20px}
.sc-cta a{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--ui);font-size:13px;font-weight:500;padding:11px 14px;
  border:1px solid var(--ivy);color:var(--ivy);text-decoration:none;border-radius:2px;transition:.16s;
}
.sc-cta a:hover{background:var(--ivy);color:#FBF8F3}
:root[data-theme="dark"] .sc-cta a:hover{color:#12160f}

.sc-foot{
  padding:11px 24px 14px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

@media (max-width:820px){
  /* Stack the card onto the photo instead of hanging it off the bottom edge.
     Both share one grid cell, so the row takes the height of the taller of the
     two — if the card ever outgrows the photo, the photo stretches to meet it
     rather than the card spilling out below. */
  .sheet-visual{padding-left:0;padding-bottom:0;display:grid}
  .sheet-visual .shot{grid-area:1/1;aspect-ratio:3/4}
  .sheet-visual .sheet-card{
    grid-area:1/1;position:relative;align-self:end;width:auto;margin:16px;
  }
}

/* ==================== VIDEO EMBED ==================== */
.sechead.stack{grid-template-columns:1fr;gap:16px;align-items:start}
.sechead.stack p{max-width:60ch;padding-bottom:0}

.ytembed{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;
  border:1px solid var(--rule);cursor:pointer;
}
.ytembed img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.ytembed:hover img{opacity:.92}
.ytembed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.ytembed.is-playing .yt-bar,.ytembed.is-playing .ytplay,
.ytembed.is-playing .yt-watch,.ytembed.is-playing img{opacity:0;pointer-events:none}

.yt-bar{
  position:absolute;top:0;left:0;right:0;z-index:2;padding:13px 16px 34px;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 55%,transparent 100%);
  transition:opacity .25s;
}
.yt-bar .t{
  font-family:var(--ui);font-size:15px;font-weight:500;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.yt-bar .c{font-family:var(--ui);font-size:12px;color:rgba(255,255,255,.72);margin-top:4px}

.ytplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:68px;height:48px;border:0;border-radius:13px;background:#f00;cursor:pointer;padding:0;
  display:grid;place-items:center;transition:transform .18s,background .18s;
}
.ytembed:hover .ytplay{background:#ff0a0a;transform:translate(-50%,-50%) scale(1.06)}
.ytplay svg{width:24px;height:24px;fill:#fff;display:block}

.yt-watch{
  position:absolute;right:14px;bottom:12px;z-index:3;display:flex;align-items:center;gap:7px;
  font-family:var(--ui);font-size:13px;color:#fff;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.6);
  transition:opacity .25s;
}
.yt-watch .ytg{width:22px;height:16px;background:#f00;border-radius:4px;display:grid;place-items:center}
.yt-watch .ytg svg{width:9px;height:9px;fill:#fff;display:block}
.yt-watch:hover{text-decoration:underline}

.ytfail{
  position:absolute;inset:auto 0 0 0;z-index:5;background:var(--paper);border-top:1px solid var(--rule);
  padding:12px 16px;font-family:var(--ui);font-size:12.5px;color:var(--ink-2);
}
.ytfail a{color:var(--ivy)}
.ytcap{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:14px;
  font-family:var(--ui);font-size:13px;color:var(--ink-3);
}
.ytcap a{color:var(--ivy);text-decoration:none;font-weight:500}
.ytcap a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.ytembed img,.ytplay{transition:none}}
@media (max-width:560px){
  .yt-bar{padding:10px 12px 26px}
  .yt-bar .t{font-size:13px}
  .ytplay{width:56px;height:40px}
}

/* ==================== WORKSHEET TOOL ==================== */
.ws-wrap{padding:60px 0 80px}
.ws-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.ws-sheet{
  position:relative;background:#FFFDF9;border:1px solid var(--rule);
  box-shadow:0 26px 60px var(--shadow);overflow:hidden;
}
:root[data-theme="dark"] .ws-sheet{background:var(--paper-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ws-sheet{background:var(--paper-2)}}
.ws-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--ivy)}
.ws-head{padding:38px 42px 26px;border-bottom:1px solid var(--rule)}
.ws-head h2{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.018em}
.ws-head p{font-family:var(--read);font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:12px;max-width:52ch}
.ws-field{padding:30px 42px;border-top:1px solid var(--rule-soft)}
.ws-field:first-of-type{border-top:0}
.ws-q{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start;margin-bottom:16px}
.ws-n{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--ivy);color:var(--ivy);
  display:grid;place-items:center;font-family:var(--ui);font-size:12px;font-weight:600;margin-top:2px;
}
.ws-q label{display:block;font-family:var(--display);font-size:19px;line-height:1.25;letter-spacing:-.01em;cursor:pointer}
.ws-q .hint{display:block;font-family:var(--ui);font-size:13px;line-height:1.55;color:var(--ink-3);margin-top:7px}
.ws-field textarea{
  width:100%;min-height:132px;resize:vertical;display:block;
  font-family:var(--read);font-size:16.5px;line-height:33px;color:var(--ink);
  border:0;border-radius:0;padding:0;background:
    repeating-linear-gradient(to bottom,transparent 0 32px,var(--rule) 32px 33px);
}
.ws-field textarea:focus{outline:none;background:
  repeating-linear-gradient(to bottom,transparent 0 32px,var(--ivy) 32px 33px)}
.ws-print{display:none}
.ws-foot{padding:20px 42px 24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ws-foot .btn{padding:11px 18px;font-size:13.5px}
#ws-status{font-family:var(--ui);font-size:12.5px;color:var(--ivy);margin-left:auto}
#ws-status.is-quiet{color:var(--ink-3)}
.ws-mark{
  padding:14px 42px 18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.ws-link{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--ui);font-size:13.5px;color:var(--ivy);text-decoration:underline;text-underline-offset:3px;
}
.ws-link:hover{color:var(--ivy-2)}
@media (max-width:900px){
  .ws-grid{grid-template-columns:1fr;gap:40px}
  .ws-head,.ws-field,.ws-foot,.ws-mark{padding-left:24px;padding-right:24px}
}
@media print{
  @page{margin:16mm}
  .masthead,.foot,.ws-aside,.ws-foot,.ws-intro,.ws-after,.progress,.reviewbar{display:none!important}
  body{background:#fff;color:#000}
  .ws-wrap{padding:0}
  .ws-grid{display:block}
  .ws-sheet{border:0;box-shadow:none;background:#fff}
  .ws-sheet::before{display:none}
  .ws-head{padding:0 0 14px;border-bottom:1px solid #999}
  .ws-field{padding:16px 0;border-top:1px solid #ddd;break-inside:avoid}
  .ws-field textarea{display:none}
  .ws-print{
    display:block;white-space:pre-wrap;font-family:Georgia,serif;font-size:12pt;line-height:22px;
    min-height:66px;background:repeating-linear-gradient(to bottom,transparent 0 21px,#ccc 21px 22px);
  }
  .ws-mark{padding:10px 0 0;border-top:1px solid #999;color:#444}
  a[href]::after{content:""}
}

/* ==================== AFFILIATION MARKS ==================== */
.affil-list li{
  display:flex;align-items:center;gap:11px;padding:0 30px;white-space:nowrap;
  font-family:var(--display);font-size:16.5px;font-weight:500;letter-spacing:-.008em;
  color:var(--ink-2);opacity:.92;position:relative;
}
.affil-list li::after{
  content:"";position:absolute;right:-3px;width:5px;height:5px;transform:rotate(45deg);
  background:var(--rule);
}
.affil-list li.has-mark{padding-top:2px;padding-bottom:2px}
.affil-list li img{
  height:28px;width:auto;max-width:170px;object-fit:contain;display:block;opacity:.92;
}
/* solid cap-height wordmarks carry no caption line, so they read heavier than the
   rest of the strip at the same pixel height — knock them back optically */
.affil-list li img.m-solid{height:23px}
:root[data-theme="dark"] .affil-list li img{filter:grayscale(1) brightness(0) invert(.82)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .affil-list li img{filter:grayscale(1) brightness(0) invert(.82)}
}
@media (max-width:820px){
  .affil-list li{font-size:15px;padding:0 22px}
  .affil-list li img{height:23px;max-width:140px}
  .affil-list li img.m-solid{height:19px}
}
@media (max-width:560px){
  .affil-list li{font-size:14px;padding:0 17px;gap:9px}
  .affil-list li img{height:20px;max-width:120px}
  .affil-list li img.m-solid{height:17px}
}

/* ============================ BOOK SUBTITLE (round 4) ============================ */
/* He asked for the title and subtitle set as two lines rather than the subtitle
   doing duty as the heading. */
.b-sub{
  font-family:var(--display);font-style:italic;font-size:clamp(17px,1.8cqw,21px);
  line-height:1.3;opacity:.86;margin-top:8px;
}
.b-sub + .b-lede{margin-top:18px}

/* ============================ FIGURE SPACING (round 3) ============================ */
/* A figure that ends a column was adding its own 40px bottom margin on top of the
   section's 64px padding, leaving a 104px hole before the next section. The section
   padding alone is enough separation. */
.prose .col > figure:last-child,
.prose .col > .scene:last-child{margin-bottom:0}

/* ============================ SOLO PROSE LAYOUT (round 3) ============================ */
/* Removing the duplicated "At a glance" card left two About sections with an empty
   300px gutter, which reads as a fault rather than a choice. These run as one column
   and let the measure and the marathon photograph breathe. */
.proselayout.solo{grid-template-columns:minmax(0,1fr);gap:0}
.proselayout.solo > .rail{display:none}
.proselayout.solo > .col{max-width:860px}

/* ============================ THERAPY ROUTE IN THE HERO (round 3) ============================ */
/* He asked for the therapy link to be more visible. A plain grey button read as
   disabled, so this is a route card instead: the slate left rule and wash are the
   clinical language already used by .practice-in, which keeps the therapy path
   visually distinct from the ivy book and worksheet buttons without competing. */
.practice-route{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  margin-top:30px;padding:16px 20px;text-decoration:none;
  background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--slate);
  transition:background .16s,border-color .16s,transform .16s;
}
.practice-route:hover{
  background:var(--slate-wash);border-color:var(--rule);border-left-color:var(--slate);
  transform:translateY(-1px);
}
.pr-mark{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--paper);border:1px solid var(--rule);color:var(--slate);
}
.pr-mark svg{width:19px;height:19px}
.pr-text{display:block;min-width:0}
.pr-k{
  display:block;font-family:var(--ui);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:4px;
}
.pr-t{
  display:block;font-family:var(--display);font-size:17px;font-weight:500;
  letter-spacing:-.01em;line-height:1.25;color:var(--ink);
}
.pr-go{
  font-family:var(--ui);font-size:17px;color:var(--slate);
  transition:transform .16s;flex:0 0 auto;
}
.practice-route:hover .pr-go{transform:translateX(4px)}
.practice-route:focus-visible{outline:2px solid var(--slate);outline-offset:3px}
@media (max-width:560px){
  .practice-route{grid-template-columns:auto 1fr;gap:13px;padding:14px 16px}
  .pr-go{display:none}
  .pr-t{font-size:16px}
}

/* ============================ PRACTICE CTA CONTRAST (round 2) ============================ */
/* .practice .btn tints the outline button slate, and that selector is more specific than
   .btn-solid — so the solid button added in round 2 rendered slate text on the ivy fill
   and was close to unreadable. Restate the solid treatment at matching specificity. */
.practice .btn-solid{
  background:var(--ivy);border-color:var(--ivy);color:var(--paper);
}
.practice .btn-solid:hover{
  background:var(--ivy-2);border-color:var(--ivy-2);color:var(--paper);
}
:root[data-theme="dark"] .practice .btn-solid,
:root[data-theme="dark"] .practice .btn-solid:hover{color:#12160f}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .practice .btn-solid,
  :root:not([data-theme="light"]) .practice .btn-solid:hover{color:#12160f}
}

/* ============================ AFTER-SUBMIT NOTE (round 2) ============================ */
/* He asked for a line setting expectations after someone sends the form. The specific
   response time is his to state, so this says what happens without promising a number
   on his behalf. */
.afterform{
  font-family:var(--ui);font-size:13px;line-height:1.6;color:var(--ink-3);
  margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
}

/* ============================ CREDIBILITY BAND (round 2) ============================ */
/* The numbers and the TEDx talk were two full sections, 1,284px of homepage between
   them. He asked for one short credibility section, so they share a band and the
   video is capped rather than running the full measure. */
.cred{padding:58px 0;border-bottom:1px solid var(--rule);background:var(--paper)}
/* the figures sit centred against the video rather than hanging from its top edge */
.cred-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.cred-video{min-width:0}
.cred-video .ytcap{margin-top:12px}
.cred-stats{
  grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);
}
.cred-stats li{padding:20px 18px;text-align:center}
.cred-stats li:nth-child(2n){border-right:0}
/* with five figures the last one would be orphaned in a two-up grid, so it runs full width */
.cred-stats li:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
.cred-stats .l{margin-left:auto;margin-right:auto;max-width:22ch}
.cred-stats .n{font-size:clamp(26px,2.6cqw,34px)}
.cred-stats .l{font-size:12.5px;margin-top:9px}
@media (max-width:900px){
  .cred-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:560px){
  .cred-stats{grid-template-columns:1fr}
  .cred-stats li{border-right:0!important;padding:18px 0!important}
}

/* Round 2 asked the homepage to be 30-40% shorter overall. The content he wanted kept
   is all still here; these trim the vertical air between the bands instead. */
.hero-grid{padding-top:62px;padding-bottom:62px}
.thesis{padding:68px 0}
.familiar{padding:58px 0}
.familiar .sechead{padding-bottom:20px;margin-bottom:26px}
.familiar .ledger{padding:22px 0}
.familiar .ledger:last-child{border-bottom:0}
.book{padding:64px 0}
.sheet{padding:60px 0}
.practice{padding:56px 0}

/* ============================ CLIENT SCENE PHOTOGRAPHY ============================ */
/* His photo handoff asks for no forced object-fit crops on the scene images and for
   their native 3:2 to survive on phones, so these size by width and keep their ratio. */
.scene{margin:34px 0}
.scene img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.scene figcaption{
  font-family:var(--ui);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  margin-top:10px;
}
/* ==================== ABOUT ====================
   Two earlier attempts both failed the same way. Setting the text in two columns only
   works when both columns fill: his paragraphs are short, so every row left a void on
   one side and nothing lined up with anything. The page looked unresolved.

   This version does not divide the text at all. One measure, centred, every section
   starting on the same axis. The width comes from the things that should be wide: the
   hero, the book band, the marathon photograph and the sauna block. Narrow, wide,
   narrow, wide is the rhythm, instead of half-empty rows. */

/* the About hero portrait is square, so its frame is square too. It is already cropped
   to the subject, so it sits centred rather than being pushed up. */
.hero-fig.sq .shot{aspect-ratio:1/1}
.hero-fig.sq .shot img{object-position:50% 50%}
/* the headline needs the room, so the portrait takes the narrower column */
.shero-port{grid-template-columns:1.3fr .7fr;gap:56px}

/* Text runs on the left edge with a rail beside it, so the right-hand side carries a
   card rather than sitting empty. */
.aboutband{padding:64px 0;background:var(--paper)}
.aboutband.alt{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.aboutband.tight{padding-bottom:40px}
.aboutband.notop{padding-top:0}

/* the "Start here" card stacks its two buttons */
.railcard .btn + .btn{margin-top:10px}

/* A prose column is a prose column wherever it sits. These sections are .aboutband
   rather than .prose, so without this their paragraphs lose the reading face and the
   space between them and run together. Same values .prose sets. */
.proselayout .col > p{
  font-family:var(--read);font-size:18px;line-height:1.8;color:var(--ink);margin-bottom:24px;
}
.proselayout .col > p:last-child{margin-bottom:0}
.proselayout .col > p.opening{font-size:20.5px;line-height:1.7}

/* THE SENTENCE. His second paragraph is the thesis of the book and of the career, so
   it is lifted out of the introduction and set as the one large moment on the page.
   The paragraph it came from keeps its other half, above and below. */
.saying{padding:30px 0 56px;background:var(--paper)}
.saying .eyebrow{display:block;margin-bottom:20px}
.say{
  font-family:var(--display);font-weight:400;letter-spacing:-.022em;
  font-size:clamp(26px,3.3vw,43px);line-height:1.16;color:var(--ivy);max-width:22em;
  padding-left:30px;border-left:4px solid var(--ivy);
}
/* the line that hands the page over to the book band, closing the statement block */
.say-after{
  font-family:var(--read);font-size:17.5px;line-height:1.75;color:var(--ink-2);
  margin-top:28px;padding-left:34px;max-width:46em;
}
/* the leadout sits inside a prose column now, so it has to outrank .proselayout .col > p */
.proselayout .col > p.leadout{
  font-family:var(--display);font-size:clamp(20px,2vw,25px);line-height:1.34;
  letter-spacing:-.012em;color:var(--ivy);margin-top:30px;margin-bottom:0;
}
@media (max-width:820px){
  .saying{padding:18px 0 40px}
  .say{padding-left:20px;border-left-width:3px}
  .say-after{padding-left:20px;margin-top:22px}
}
.aboutcol > p{
  font-family:var(--read);font-size:18px;line-height:1.8;color:var(--ink);margin-bottom:24px;
}
.aboutcol > p:last-child{margin-bottom:0}
/* the opening paragraph carries the page, so it is set a size larger */
.aboutcol > p.opening{font-size:21px;line-height:1.68}

/* every section is marked the same way: a short ivy tick on a hairline, the label,
   then the title. Repeating one mark is what makes the sections feel like a set. */
/* The mark sits outside the measure so its rule runs the full container width. That
   rule reaching the right edge is what stops a left-aligned column looking unfinished. */
.secmark{position:relative;padding-top:26px;margin-bottom:30px;border-top:1px solid var(--rule)}
.secmark::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:3px;background:var(--ivy)}
.secmark h2{font-size:clamp(27px,2.9vw,37px);letter-spacing:-.018em;margin-top:11px}
.secmark h3{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.014em;margin-top:10px}
/* running and sauna are subsections of the personal life section, marked more quietly */
.secmark.sub{padding-top:20px;margin-bottom:24px}
.secmark.sub::before{width:28px;height:2px}
/* the running mark sits inside the prose column, so it needs room above it */
.proselayout .col > .secmark.sub{margin-top:40px}
.proselayout .col > .secmark.sub h3{margin-top:9px}

/* the line that hands the page over to the two passions.
   Qualified with .aboutcol > p because the measure's own paragraph rule is a class
   plus an element and would otherwise outrank a bare class here. */
.aboutcol > p.leadout{
  font-family:var(--display);font-size:clamp(20px,2vw,25px);line-height:1.34;
  letter-spacing:-.012em;color:var(--ivy);margin-top:30px;margin-bottom:0;
}

/* the marathon photograph runs at the full container width, well wider than the
   measure above it, which is where the page gets its breadth */
.aboutfig{padding:0 0 72px;background:var(--paper)}
.aboutfig .scene{margin:0}

.saunaband{padding:0 0 78px;background:var(--paper)}
/* the sauna photograph keeps its own 6:5 rather than being cropped to the 4:3 that
   the feature block uses elsewhere */
.saunaband .feature-img{aspect-ratio:auto;order:1}
.saunaband .feature-img img{width:100%;height:auto;display:block}
.saunaband .feature-in{order:2;padding:40px 46px 40px 12px}
.saunaband .secmark{margin-bottom:22px}

@media (max-width:820px){
  .aboutband{padding:48px 0}
  .aboutband.notop{padding-top:0}
  .aboutcol > p.opening{font-size:19.5px}
  .aboutfig{padding-bottom:48px}
  .saunaband{padding-bottom:52px}
  .saunaband .feature-img{order:-1}
  .saunaband .feature-in{padding:30px 26px 34px}
  /* .shero-port is declared after the phone breakpoint above and has the same
     specificity, so without this it keeps its two columns on a phone and the
     headline is squeezed into a 230px strip */
  .shero-port{grid-template-columns:1fr;gap:34px}
  .shero-port .hero-fig{order:-1;max-width:none;justify-self:stretch}
  /* the square portrait becomes a 3:2 band on a phone, so it is anchored near the top
     to keep the whole head in frame */
  .shero-port .hero-fig.sq .shot{aspect-ratio:3/2}
  .shero-port .hero-fig.sq .shot img{object-position:50% 8%}
  .shero-port .hero-tag{left:auto;right:16px;bottom:-16px}
}

/* ============================ FORM DISCLAIMER ============================ */
/* His wording, verbatim. Sits above the consent box so it is read before sending. */
.formnote{
  font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--ink-2);
  background:var(--paper-2);border-left:3px solid var(--slate);
  padding:12px 14px;margin:4px 0 16px;
}

/* ============================ AFFILIATIONS v2 ============================ */
/* Round 1: logos removed at the client's request, and affiliations separated from
   research funding so the two are not read as the same kind of relationship. */
.affil-groups{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px 78px;
  padding-top:4px;
}
.affil-group{text-align:center}
.affil-group .affil-k{margin-bottom:12px}
.affil-names{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:8px 26px;
}
.affil-names li{
  font-family:var(--display);font-size:16.5px;font-weight:500;letter-spacing:-.008em;
  color:var(--ink-2);position:relative;white-space:nowrap;
}
.affil-names li+li::before{
  content:"";position:absolute;left:-14px;top:50%;width:4px;height:4px;
  transform:translateY(-50%) rotate(45deg);background:var(--rule);
}
@media (max-width:820px){
  .affil-groups{gap:20px 44px}
  .affil-names li{font-size:15px}
}
@media (max-width:560px){
  .affil-groups{flex-direction:column;gap:20px}
  .affil-names li{font-size:14.5px}
}

/* ============================ CONCEPT COVER ============================ */
/* The CSS-drawn placeholder plate is replaced by the client's concept artwork.
   It stays explicitly labelled — Penguin Random House are producing the real one. */
.cover-img{
  width:100%;height:auto;display:block;
  box-shadow:0 26px 54px rgba(8,20,16,.45);
}

/* ============================ MOBILE PORTRAIT FRAMING ============================ */
/* Both photographs of Jonathan are tall: the lake portrait is 4:5 and the Great
   Wall one is square. The landscape mobile crops (16/11 and 3/2) were taking so
   much off the top and bottom that his head was being cut. Squaring them up on
   phones costs a little vertical space and keeps him whole. */
@media (max-width:820px){
  /* 4:5 source in a square frame — a shallow crop; bias it down onto his face,
     which sits low in the composition */
  .hero-fig .shot{aspect-ratio:1/1}
  .hero-fig .shot img{object-position:46% 66%}

  /* square sources in square frames — nothing is cropped at all */
  .about-fig .shot{aspect-ratio:1/1}
  .about-fig .shot img{object-position:50% 50%}
  .shero-img{aspect-ratio:1/1}
}



/* ==================== SECTION REFINEMENTS (round 6) ==================== */

/* ---- a section head whose right column carries a full paragraph ----
   .sechead aligns its two columns to the baseline, which is right when the right
   column is a single line. With a six-line paragraph beside it the heading dropped
   to the bottom and left the top-left corner empty. This variant anchors the
   heading to the top instead, with the same 46px ivy mark the prose headings use. */
.sechead.toplead{align-items:start}
.sechead.toplead>div{position:relative;padding-top:24px}
.sechead.toplead>div::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:3px;background:var(--ivy);
}
.sechead.toplead p{font-size:17.5px;line-height:1.74;padding-bottom:0}
@media (max-width:900px){
  .sechead.toplead>div{padding-top:20px}
}

/* ---- fact row ----
   The grid was declared at four columns while every use of it holds three, so the
   row stopped three quarters of the way across and left a gap at the right edge.
   Three columns fill the measure. Each column now carries the ivy mark, which
   turns a bare list into a deliberate row. */
.facts{grid-template-columns:repeat(3,1fr)}
.facts.four{grid-template-columns:repeat(4,1fr)}
.facts li{padding:26px 30px 28px 0;position:relative}
.facts li+li{padding-left:30px}
.facts li::before{
  content:"";position:absolute;top:-1px;left:0;width:40px;height:3px;background:var(--ivy);
}
.facts li+li::before{left:30px}
.facts .fk{margin-bottom:11px}
.facts .fv{font-size:21px;line-height:1.32;color:var(--ink)}

/* ---- the opening statement on About ----
   It had been a short paragraph beside a bordered box holding two buttons, which
   read as an advertisement at the top of his biography and left the band
   unbalanced. The statement now runs at lead size across the measure, with his own
   standing facts beneath it. */
.openstate{position:relative;padding-top:26px;max-width:74ch}
.openstate::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:3px;background:var(--ivy);
}
.openstate p{
  font-family:var(--read);font-size:21px;line-height:1.68;color:var(--ink);margin:0;
}
.standing{margin-top:40px}

/* the base rule above is declared after the original breakpoints, so source order
   beat them and the row stayed three columns on a phone. The column counts are
   restated here, below it, where they win. */
@media (max-width:900px){
  .facts{grid-template-columns:1fr 1fr}
  .facts li,.facts li+li{padding-right:0;padding-left:0;border-left:0}
  .facts li:nth-child(2n){border-left:1px solid var(--rule);padding-left:28px}
  .facts li:nth-child(2n)::before{left:28px}
  .facts li:nth-child(2n+1)::before{left:0}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts li,.facts li+li{border-left:0;padding:22px 0 24px}
  .facts li::before,.facts li+li::before,
  .facts li:nth-child(2n)::before{left:0}
  .openstate p{font-size:19.5px}
  .openstate{padding-top:22px}
  .standing{margin-top:30px}
}