/* 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:4/3}
.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%}
.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}
  .ledger-body .shot{aspect-ratio:16/9}
  .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}
.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 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}
}

/* ============================ 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}
}