/* Rob Lancit base styles. Taken from the book cover: near-black ground, ivory type, the cover's
 * gold as the only accent, the cover's two short gold rules as the only ornament (no glows, no
 * corner brackets, no photo borders). Headlines: Sofia Sans Extra Condensed 800, matched to
 * the cover title. Body: Source Serif 4.
 * COLOR SCHEMES (Mike, 2026-10-14): every color is a custom property. <html data-theme="x">
 * swaps the set; no attribute = "cover". Three dark (cover, midnight, oxblood), three light
 * (ivory, paper, linen). Every pair used for text passes WCAG AA (checked 2026-10-14).
 * The header, mega-menu and footer are generated by ~/ecosystem-site-engine between the
 * ENGINE-CHROME markers; tools/theme-chrome.mjs rewrites that block's fixed colors to these
 * variables after each engine run. Rules that must beat the chrome block start with `body`. */
/* Measures are in em, not ch: ch is the width of "0" in whichever font is showing, so a ch
 * width changed the moment the web font replaced the fallback (the home CLS). Values = the old ch
 * count times the web font's own "0" width (0.505 to 0.52em serif, 0.416em display).
 * FONTS, self-hosted (Part Two perf pass, 2026-10-14). Same files Google served (latin subset,
 * SIL Open Font License), now from this origin: no render-blocking third-party stylesheet.
 * Each face has a metric-matched local fallback (Arial Bold / Georgia, size-adjust measured with
 * fontTools against the site's own headings and body text, then tuned in the browser for the
 * serif's optical sizes at 16 to 19px), so the swap no longer moves layout. */
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/sofia-sans-xc-latin.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/source-serif-4-latin.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-serif-4-italic-latin.woff2) format("woff2")}
@font-face{font-family:"RL Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial");font-weight:600 800;size-adjust:59.99%;ascent-override:150.02%;descent-override:50.01%;line-gap-override:0%}
@font-face{font-family:"RL Text Fallback";font-style:normal;src:local("Georgia");size-adjust:103%;ascent-override:100.6%;descent-override:32.5%;line-gap-override:0%}
@font-face{font-family:"RL Text Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:93.5%;ascent-override:110.8%;descent-override:35.8%;line-gap-override:0%}
:root{--bg:#0B0B0E;--bg2:#111115;--bg3:#17171C;--ink:#F5F2EA;--soft:#CFCBC0;--muted:#A29E93;--line:#2A2A30;--line2:#3A3A42;
  --gold:#CFA948;--gold-hi:#DDBB62;--gold-lo:#8F7330;--on-gold:#0B0B0E;--field:#0E0E12;--hdr:rgba(11,11,14,.94);--foot:#060608;--foot-muted:#A9A59A;
  --ground:linear-gradient(180deg,#141317 0%,#0B0B0E 70%);--shade:rgba(0,0,0,.6);--logo:none;--meta:rgba(245,242,234,.58);
  --disp:"Sofia Sans Extra Condensed","RL Display Fallback","Arial Narrow",Impact,sans-serif;--text:"Source Serif 4","RL Text Fallback",Georgia,"Times New Roman",serif;color-scheme:dark}
:root[data-theme="midnight"]{--bg:#0B1019;--bg2:#0F1521;--bg3:#141B29;--ink:#F1F2F4;--soft:#C9CDD4;--muted:#9AA1AC;--line:#232B3A;--line2:#34405A;
  --gold:#D4B062;--gold-hi:#E2C27A;--gold-lo:#8C7438;--on-gold:#0B1019;--field:#0A0E16;--hdr:rgba(11,16,25,.94);--foot:#070B12;--foot-muted:#A3A9B3;
  --ground:linear-gradient(180deg,#121a28 0%,#0B1019 70%);--meta:rgba(241,242,244,.58)}
:root[data-theme="oxblood"]{--bg:#160C0D;--bg2:#1C1012;--bg3:#241517;--ink:#F6EEE6;--soft:#D6C9BF;--muted:#AE9F95;--line:#3A2326;--line2:#4C2E32;
  --gold:#DDB16A;--gold-hi:#E9C383;--gold-lo:#91703A;--on-gold:#160C0D;--field:#120A0B;--hdr:rgba(22,12,13,.94);--foot:#0F0809;--foot-muted:#B1A39A;
  --ground:linear-gradient(180deg,#22131500 0%,#160C0D 70%),#1f1214;--meta:rgba(246,238,230,.6)}
:root[data-theme="ivory"]{--bg:#F5F2EA;--bg2:#ECE7DB;--bg3:#FBF9F4;--ink:#141417;--soft:#3A3832;--muted:#5E5A50;--line:#D9D3C4;--line2:#C4BCA9;
  --gold:#7A5B12;--gold-hi:#5E450B;--gold-lo:#B8973F;--on-gold:#FFFFFF;--field:#FFFFFF;--hdr:rgba(245,242,234,.95);--foot:#ECE7DB;--foot-muted:#5E5A50;
  --ground:linear-gradient(180deg,#EDE8DC 0%,#F5F2EA 70%);--shade:rgba(40,30,10,.18);--logo:brightness(0);--meta:#5E5A50;color-scheme:light}
:root[data-theme="paper"]{--bg:#FFFFFF;--bg2:#F3F2EF;--bg3:#FAFAF8;--ink:#111114;--soft:#34343A;--muted:#5C5C63;--line:#E2E1DD;--line2:#CBCAC4;
  --gold:#8A6614;--gold-hi:#6A4E0E;--gold-lo:#C5A24A;--on-gold:#FFFFFF;--field:#FFFFFF;--hdr:rgba(255,255,255,.95);--foot:#F3F2EF;--foot-muted:#5C5C63;
  --ground:linear-gradient(180deg,#F3F2EF 0%,#FFFFFF 70%);--shade:rgba(20,20,30,.14);--logo:brightness(0);--meta:#5C5C63;color-scheme:light}
:root[data-theme="linen"]{--bg:#E9E1D0;--bg2:#DFD5C1;--bg3:#F2ECE0;--ink:#1A1712;--soft:#3B352A;--muted:#584F40;--line:#CFC3AA;--line2:#B9AB8E;
  --gold:#6B4E10;--gold-hi:#523B0A;--gold-lo:#A98A3C;--on-gold:#FFFFFF;--field:#F7F2E8;--hdr:rgba(233,225,208,.95);--foot:#DFD5C1;--foot-muted:#584F40;
  --ground:linear-gradient(180deg,#DFD5C1 0%,#E9E1D0 70%);--shade:rgba(50,35,10,.18);--logo:brightness(0);--meta:#584F40;color-scheme:light}

*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 19px/1.7 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:.94;margin:0 0 .45em;letter-spacing:.005em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(3.2rem,7.2vw,6.4rem);line-height:.88}h2{font-size:clamp(2.3rem,4.4vw,3.8rem)}h3{font-size:1.7rem;letter-spacing:.01em;line-height:1}
p{margin:0 0 1.15em}em{font-style:italic}strong,b{font-weight:600;color:var(--ink)}
.gold{color:var(--gold)}
.container{max-width:1180px;margin:0 auto;padding:0 28px}.narrow{max-width:780px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);padding:10px 14px;color:var(--on-gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body p.kicker{font:700 1.02rem/1 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.dek{font-size:1.14rem;color:var(--soft);max-width:30.9em}
.fine{font-size:.86rem;line-height:1.55;color:var(--muted);margin:16px 0 0}.fine a{color:var(--soft)}
.after{margin:28px 0 0;font-size:.95rem;color:var(--muted)}
/* the cover's ornament: two short gold rules */
.rules{position:relative;padding:18px 0}.rules::before,.rules::after{content:"";position:absolute;left:0;height:2px;background:var(--gold)}
.rules::before{top:0;width:180px}.rules::after{bottom:0;width:90px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1.2rem/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;padding:15px 26px 14px;border-radius:2px;border:1px solid var(--line2);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
body .btn--primary{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
body .btn--primary:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--on-gold);transform:translateY(-1px)}
.btn.ghost{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}
.btn--xl{font-size:1.36rem;padding:19px 32px 17px}.btn--full{width:100%}
.btn-price{font-weight:600;opacity:.85}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0}
.textlink{font:700 1.02rem/1.3 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 45%,transparent);text-underline-offset:5px}
.textlink:hover{color:var(--ink);text-decoration-color:var(--ink)}
.textlink em{font-style:normal}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:20px 0 0;color:var(--muted)}

/* hero */
body .hero{background:var(--bg);color:var(--ink);padding:0;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
body .hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding-top:68px;padding-bottom:76px;min-height:min(720px,calc(100vh - 70px))}
body .hero--plain .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:92px;padding-bottom:84px}
body .hero--panel .hero-grid{min-height:600px}
.hero--plain .hero-copy{max-width:940px}
.hero--plain h1{font-size:clamp(3rem,6.4vw,5.4rem)}
.hero h1{margin-bottom:.3em}
.h1-lines span{display:block}
.hero--photo h1{font-size:clamp(3rem,5.4vw,5rem)}
.hero .sub{font-size:1.2rem;line-height:1.62;color:var(--soft);max-width:26.3em;margin:0}
.hero-subtitle{position:relative;display:inline-block;font:800 1.5rem/1.15 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:16px 0;margin:0 0 22px}
.hero-subtitle::before,.hero-subtitle::after{content:"";position:absolute;left:0;height:2px;background:var(--gold)}
.hero-subtitle::before{top:0;width:180px}.hero-subtitle::after{bottom:0;width:90px}
.hero-quote{margin:0 0 22px;font:italic 400 1.28rem/1.45 var(--text);color:var(--ink);max-width:20.4em}
.hero-quote cite{display:block;margin-top:8px;font:700 .9rem/1.3 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.hero-meta{font:700 .98rem/1.35 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin:24px 0 0}
.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.hero-art--book{min-height:100%}
.hero-art--photo figure{margin:0;position:relative;width:100%;max-width:540px}
.hero-art--photo figure img{width:100%;aspect-ratio:7/8;object-fit:cover;object-position:50% 20%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%);mask-composite:intersect}
.hero-art--withbook{padding-bottom:30px}
/* speaking: a tighter crop of the same sitting, so it is not the home hero twice */
.hero-art--tight figure{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 90%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%);mask-composite:intersect}
.hero-art--tight figure img{-webkit-mask-image:none;mask-image:none;transform:scale(1.38);transform-origin:64% 20%}
.hero-book{position:absolute;left:-6%;bottom:-6px;width:42%;max-width:230px;display:block;transition:transform .25s ease}
.hero-book:hover{transform:translateY(-4px) rotate(-1deg)}
.hero--flip .hero-art{order:-1}

/* the book: one pre-rendered image of the real cover standing up */
.bookshot{position:relative;width:min(470px,100%);margin:0 auto}
.bookshot img{width:100%;height:auto}
.bookshot--lg{width:min(500px,100%)}
.bookshot--lg img{width:100%;height:auto;max-height:70vh;object-fit:contain;object-position:50% 50%;margin:0 auto}
.bookshot--md{width:min(380px,100%)}.bookshot--sm{width:220px}
.bookshot--inset{width:100%}
.hero-art--book .hero-inset{position:absolute;left:0;bottom:4%;width:min(260px,46%);margin:0}
.hero-inset img{width:100%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.hero-inset figcaption{font:700 .82rem/1.2 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-top:4px;text-align:center}
:root[data-theme="ivory"] .bookshot img,:root[data-theme="paper"] .bookshot img,:root[data-theme="linen"] .bookshot img{filter:drop-shadow(0 18px 28px var(--shade))}

/* text-hero panels */
.hpanel{width:100%;max-width:480px;position:relative;padding:26px 0}
.hpanel::before,.hpanel::after{content:"";position:absolute;left:0;height:2px;background:var(--gold)}
.hpanel::before{top:0;width:180px}.hpanel::after{bottom:0;width:90px}
.hpanel-label{font:700 .98rem/1 var(--disp);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 18px}
.hpanel--index ul{list-style:none;margin:0;padding:0}
.hpanel--index li+li{border-top:1px solid var(--line)}
.hpanel--index a{display:block;padding:15px 0;text-decoration:none;color:var(--ink)}
.hpanel--index a span{display:block;font:700 .82rem/1.2 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-bottom:6px}
.hpanel--index a b{display:block;font:800 1.65rem/1 var(--disp);text-transform:uppercase;color:var(--ink);font-weight:800}
.hpanel--index a:hover b{color:var(--gold-hi)}
.hpanel--facts dl{margin:0}.hpanel--facts dl div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.hpanel--facts dt{font:700 .86rem/1.4 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}.hpanel--facts dd{margin:0;font-size:1rem;line-height:1.45;color:var(--ink)}
.hpanel-thumbs{display:flex;gap:12px;align-items:flex-end;margin-top:18px}.hpanel-thumbs img{height:96px;width:auto;border-radius:2px}.hpanel-thumbs p{margin:0;font-size:.86rem;color:var(--muted)}
.hpanel-big{font:italic 400 1.9rem/1.2 var(--text);color:var(--ink);margin:0 0 12px}
.hpanel--signup p{color:var(--soft)}
.hpanel--dedication blockquote{margin:0;font:italic 400 clamp(1.7rem,2.6vw,2.3rem)/1.3 var(--text);color:var(--ink)}
.hpanel-credit{font:700 .9rem/1.3 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin:16px 0 0}
.hpanel-ded-foot{display:flex;gap:12px;margin-top:22px}.hpanel-ded-foot img{height:96px;width:auto;border-radius:2px;object-fit:cover}

/* bands */
.band{padding:100px 0;position:relative}.band.wash{background:var(--bg2)}.band--tight{padding:56px 0}
.band--tight p:last-child{margin-bottom:0}
.prose p{color:var(--soft)}.prose p:first-of-type{color:var(--ink)}.prose h2{margin-bottom:.6em}
.skip-buy{font-size:.95rem}
.inline-quote{margin:30px 0;padding:22px 0 22px 26px;border-left:2px solid var(--gold);font:italic 400 1.22rem/1.55 var(--text);color:var(--ink)}
.inline-quote cite{display:block;margin-top:10px;font:700 .88rem/1.3 var(--disp);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.band.pull{padding:92px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.band.pull.wash{background:var(--bg2)}
.pull figure{margin:0}
.pull blockquote{margin:0 auto;max-width:7.07em;font:800 clamp(3rem,8.4vw,7.4rem)/.88 var(--disp);text-transform:uppercase;color:var(--ink)}
.pull blockquote span{display:block}
.pull blockquote:has(span:nth-child(2):last-child){max-width:9.98em;font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:.98}
.pull figcaption{margin-top:30px;font:700 .98rem/1.4 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--meta)}
.pull figcaption::before{content:"";display:block;width:64px;height:2px;background:var(--gold);margin:0 auto 18px}
.pull figcaption a{color:var(--soft)}
.pull--small blockquote,.pull.pull--small blockquote:has(span){max-width:10.82em;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1}

.strip{padding:40px 0;border-bottom:1px solid var(--line);text-align:center}
.strip-line{font:800 clamp(1.9rem,3.6vw,2.8rem)/1 var(--disp);text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.strip-credit{font:700 .86rem/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--meta);margin:0}
.strip-quote{margin:22px auto 8px;font:italic 400 1.25rem/1.5 var(--text);color:var(--soft);max-width:22.5em}

/* proof strip */
.band.proof{background:var(--bg2);border-bottom:1px solid var(--line)}
.proof-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.proof-grid li{border-left:1px solid var(--line)}.proof-grid li:first-child{border-left:0}
.proof-grid a,.proof-grid div{display:flex;flex-direction:column;padding:6px 26px;text-decoration:none;color:inherit;height:100%}
.proof-grid li:first-child a,.proof-grid li:first-child div{padding-left:0}
.proof-big{font:800 clamp(3rem,5vw,4.4rem)/.9 var(--disp);color:var(--gold);margin-bottom:10px}
.proof-label{font:800 1.2rem/1.05 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.proof-note{font-size:.92rem;line-height:1.5;color:var(--soft)}
.proof-grid a:hover .proof-label{color:var(--gold-hi)}

/* heard on */
.heard{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.heard li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.heard a{display:flex;flex-direction:column;gap:8px;padding:26px 24px;text-decoration:none;color:var(--ink);height:100%;transition:background .18s ease}
.heard a:hover{background:var(--bg3)}
.heard-show{font:800 1.9rem/.95 var(--disp);text-transform:uppercase}
.heard-by{font:700 .88rem/1.2 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.feature-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.feature--flip .feature-media{order:2}
.feature-media figure{margin:0}
.feature-media img{width:100%;border-radius:2px}
.feature-sub{position:relative;font:800 1.35rem/1.15 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:14px 0;margin:-4px 0 22px;display:inline-block}
.feature-sub::before,.feature-sub::after{content:"";position:absolute;left:0;height:2px;background:var(--gold)}.feature-sub::before{top:0;width:140px}.feature-sub::after{bottom:0;width:70px}
.feature-copy p{color:var(--soft);font-size:1.1rem}

.cards{display:grid;gap:22px;margin-top:40px}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--line);border-top:2px solid var(--gold-lo);border-radius:2px;padding:30px 28px 28px;color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
a.card:hover{border-color:var(--line2);border-top-color:var(--gold);transform:translateY(-3px);text-decoration:none;color:inherit}
.card-tag{font:700 .9rem/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.card h3{margin-bottom:.5em}.card p{margin:0;color:var(--soft);font-size:1rem;line-height:1.62}
.card-go{margin-top:auto;padding-top:22px;font:700 1.02rem/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.profile-role{font:700 1rem/1.2 var(--disp)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)!important;margin:-4px 0 14px!important}
.profile-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px!important;font-size:.95rem!important}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:40px 0 0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.facts div{padding:22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts dt{font:700 .9rem/1.2 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}.facts dd{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.5}

.faq{margin-top:30px;border-top:1px solid var(--line)}.qa{padding:26px 0;border-bottom:1px solid var(--line)}.qa h3{font-size:1.55rem;margin-bottom:.4em}.qa p{margin:0;color:var(--soft)}

.linklist{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--line)}
.linklist a{display:block;padding:24px 44px 24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative;transition:padding .18s ease}
.linklist a::after{content:"\2192";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.3rem;transition:right .18s ease}
.linklist a:hover{padding-left:10px}.linklist a:hover::after{right:0}
.ll-meta{display:block;font:700 .88rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.linklist strong{display:block;font:800 1.75rem/1 var(--disp);text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.linklist a>span:last-child{color:var(--soft);font-size:1rem}

/* lists */
.ground{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.ground li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.1rem;line-height:1.5}
.ground li::before{content:"";position:absolute;left:0;top:31px;width:16px;height:2px;background:var(--gold)}
.ground-closer{margin:26px 0 0;font:italic 400 1.15rem/1.55 var(--text);color:var(--soft)}
.foryou{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
.foryou>div{background:var(--bg3);border:1px solid var(--line);border-top:2px solid var(--gold);padding:30px}
.foryou>div.foryou-no{border-top-color:var(--line2)}
.foryou h3{font-size:1.4rem;letter-spacing:.1em;color:var(--gold)}.foryou-no h3{color:var(--muted)}
.foryou ul{margin:0;padding:0;list-style:none}.foryou li{padding:10px 0;border-top:1px solid var(--line);color:var(--soft)}
.points{list-style:none;counter-reset:pt;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.points li{counter-increment:pt;position:relative;padding:22px 0 22px 64px;border-bottom:1px solid var(--line);color:var(--ink);font-size:1.08rem;line-height:1.55}
.points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:18px;font:800 1.8rem/1 var(--disp);color:var(--gold)}

/* buy box and stores */
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.buy-copy p{color:var(--soft)}
.buy-box{background:var(--bg3);border:1px solid var(--line2);border-top:3px solid var(--gold);padding:30px;border-radius:2px}
.buy-label{font:700 1rem/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.signed-box{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:30px 0 0}
.buy-row .textlink{flex-basis:100%;margin-top:4px}
.buy-sample{margin:18px 0 0;font-size:.98rem}
.stores{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.store{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:16px 20px 14px;border:1px solid var(--line2);border-radius:2px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,background .18s ease}
.store:hover{border-color:var(--gold);background:var(--bg2);color:var(--ink)}
.store-name{font:800 1.5rem/1 var(--disp);text-transform:uppercase}
.store-meta{grid-row:2;font-size:.9rem;color:var(--muted);line-height:1.4;margin-top:5px}
.store-go{grid-row:1/3;grid-column:2;font:700 1rem/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);white-space:nowrap}
.editions{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.edition{background:var(--bg3);border:1px solid var(--line);border-top:2px solid var(--gold);padding:32px 28px;border-radius:2px;display:flex;flex-direction:column}
.edition--off{border-top-color:var(--line2)}
.edition-format{font:700 1rem/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.edition-price{font:800 3.2rem/1 var(--disp);margin:0 0 10px;color:var(--ink)}
.edition-meta{color:var(--muted);font-size:.95rem;line-height:1.55;margin:0 0 22px}

/* his own words */
.voices-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:center}
.voices-photo{margin:0}.voices-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 25%);mask-image:linear-gradient(to top,transparent 0,#000 25%)}
.voices blockquote{margin:0 0 22px;font:italic 400 clamp(1.3rem,2vw,1.6rem)/1.45 var(--text);color:var(--ink)}
.voices-credit{font:700 .9rem/1.4 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
.voices-credit a{color:var(--soft)}

/* forms */
.form-card{background:var(--bg3);border:1px solid var(--line2);border-top:3px solid var(--gold);padding:44px;border-radius:2px}
.form-wide{max-width:980px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:26px}
.field{display:flex;flex-direction:column;min-width:0}.field--full{grid-column:1/-1}
.field label{font:700 .98rem/1.2 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:8px}
.opt{color:var(--muted);letter-spacing:.1em;font-size:.82rem;margin-left:6px}
.rl-form input[type=text],.rl-form input[type=email],.rl-form input[type=tel],.rl-form input[type=url],.rl-form select,.rl-form textarea{width:100%;font:400 1.02rem/1.4 var(--text);color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:2px;padding:14px 15px;transition:border-color .15s ease}
.rl-form textarea{resize:vertical;min-height:130px}
.rl-form input:focus,.rl-form select:focus,.rl-form textarea:focus{outline:none;border-color:var(--gold)}
.rl-form ::placeholder{color:var(--muted);opacity:.8}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;font-size:.95rem;color:var(--soft);line-height:1.5;cursor:pointer}
.consent input{margin-top:5px;width:18px;height:18px;accent-color:var(--gold);flex:none}
.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.form-status{margin:0;font-size:.98rem;color:var(--soft);min-height:1.4em}
.form-status.ok{color:var(--gold-hi)}.form-status.err{color:#e0675a}
.rl-form.is-sent .fields,.rl-form.is-sent .consent,.rl-form.is-sent .btn,.rl-form.is-sent .inline-row{display:none}
.inline-row{display:flex;gap:10px;margin-top:14px}.inline-row input{flex:1;min-width:0}

.band.signup{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.signup-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.signup-grid h2{font-size:clamp(2rem,3.6vw,3.1rem)}.signup-grid p{color:var(--soft);margin:0}

.band.cta,.band.bookcta{background:var(--bg);border-top:1px solid var(--line)}
.bookcta-grid{display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:center;max-width:980px}
.bookcta-grid p{color:var(--soft);max-width:26.7em}
.bookcta-more{margin:16px 0 0;font-size:.95rem}
.band.speakcta{background:var(--bg2);border-top:1px solid var(--line);padding:0;overflow:hidden}
.speakcta-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:center}
.speakcta-photo{margin:0;align-self:end}.speakcta-photo img{width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 30%);mask-image:linear-gradient(to top,transparent 0,#000 30%);margin-top:56px}
.speakcta-grid>div{padding:72px 0}.speakcta-grid p{color:var(--soft);max-width:26.7em}
.speakcta .hero-ctas{margin-top:26px}
.empty{border:1px dashed var(--line2);padding:36px;border-radius:2px;margin-top:26px}.empty p{color:var(--soft);margin:0}
.bio{padding:26px 0;border-bottom:1px solid var(--line)}.bio:first-of-type{border-top:1px solid var(--line);margin-top:26px}.bio h3{font-size:1.15rem;letter-spacing:.2em;color:var(--gold)}.bio p{margin:0;color:var(--soft)}
.draft-note{background:var(--bg3);border-bottom:1px solid var(--gold-lo);padding:18px 0}.draft-note p{margin:0;font-size:.95rem;color:var(--soft)}.draft-note b{color:var(--gold-hi)}
.sources ol{margin:24px 0 0;padding-left:22px;color:var(--soft)}.sources li{margin-bottom:10px}.sources span{color:var(--muted);font-size:.92rem}

/* library pages */
.byline-note{font-size:.9rem!important;color:var(--muted)!important;border-top:1px solid var(--line);padding-top:18px;margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-block;font:700 .92rem/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px 7px;border:1px solid var(--line2);border-radius:2px;color:var(--soft);text-decoration:none}
a.chip:hover{border-color:var(--gold);color:var(--gold-hi)}
.after .btn{margin-top:6px}
.yt{position:relative;display:block;width:100%;padding:0;border:0;border-radius:2px;background:#000;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .2s ease}.yt:hover img{opacity:.9}
.yt-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--gold)}
.yt-play::after{content:"";position:absolute;left:34px;top:26px;border-left:24px solid var(--on-gold);border-top:16px solid transparent;border-bottom:16px solid transparent}
.yt-label{position:absolute;left:18px;bottom:14px;font:700 .95rem/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:#F5F2EA;text-shadow:0 1px 8px #000}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-band{padding-top:0}

/* store chooser */
.buysheet{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);background:var(--bg3);color:var(--ink);border:1px solid var(--line2);border-top:3px solid var(--gold);border-radius:2px;padding:34px 30px 28px}
.buysheet::backdrop{background:rgba(0,0,0,.66)}
.buysheet h2{font-size:2.4rem}
.buysheet-x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--soft);font-size:2rem;line-height:1;cursor:pointer;padding:6px 10px}
.buysheet-rows{margin-top:16px}
.buysheet[data-show="paperback"] .buysheet-rows[data-fmt="ebook"],.buysheet[data-show="ebook"] .buysheet-rows[data-fmt="paperback"]{display:none}
body.sheet-open{overflow:hidden}

/* the phone bar */
.buybar{display:none}
@media(max-width:980px){
  .buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--hdr);border-top:1px solid var(--line);transform:translateY(0);transition:transform .25s ease}
  .buybar .btn{padding:12px 16px 11px;font-size:1.02rem;white-space:nowrap;flex:none}
  .buybar-title{font:800 .95rem/1.05 var(--disp);overflow:hidden;text-transform:uppercase;color:var(--ink);min-width:0}
  body.buy-in-view .buybar,body.hero-in-view .buybar,body.sheet-open .buybar{transform:translateY(110%)}
  body:has(.buybar) .site-footer{padding-bottom:84px}
}

/* the color changer */
.themer{position:fixed;right:18px;bottom:18px;z-index:70}
.themer-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:var(--bg3);cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 6px 18px var(--shade)}
.themer-btn:hover{border-color:var(--gold)}
@media(max-width:980px){.themer{right:12px;bottom:12px;transition:opacity .2s,visibility .2s}.themer-btn{width:40px;height:40px}.themer-dot{width:16px;height:16px}body:not(.past-hero) .themer{opacity:0;visibility:hidden}body.buy-in-view .themer,body.sheet-open .themer{opacity:0;visibility:hidden}body:has(.buybar) .themer{bottom:84px}}
.themer-dot{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--ink) 0 50%,var(--gold) 50% 100%);box-shadow:0 0 0 1px var(--line2)}
.themer-panel{position:absolute;right:0;bottom:58px;width:268px;background:var(--bg3);border:1px solid var(--line2);border-top:3px solid var(--gold);border-radius:2px;padding:16px 16px 12px;box-shadow:0 18px 40px var(--shade)}
.themer-panel[hidden]{display:none}
.themer-label{font:800 1.1rem/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 10px}
.themer-mode{font:700 .78rem/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px}
.themer-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.themer-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:2px;padding:6px 2px;cursor:pointer;color:var(--soft);font:700 .8rem/1.1 var(--disp);letter-spacing:.08em;text-transform:uppercase}
.themer-opt:hover{border-color:var(--line2)}
.themer-opt[aria-pressed="true"]{border-color:var(--gold);color:var(--ink)}
.themer-sw{position:relative;width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--line2);overflow:hidden}
.themer-sw span{position:absolute;right:0;bottom:0;width:50%;height:50%}
@media(max-width:980px){.themer{bottom:84px;right:12px}.themer-btn{width:38px;height:38px}.themer-dot{width:16px;height:16px}}

/* the thread between sections */
body .connector::after{box-shadow:0 0 0 5px var(--bg)}

/* chrome, recolored per scheme */
body .site-header{background:var(--hdr);backdrop-filter:none;border-bottom:1px solid var(--line)}
body .site-logo img,body .footer-brand img{height:26px;filter:var(--logo)}
body .primary-nav .nav-link{font:700 1.14rem/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
body .primary-nav .nav-link:hover{background:transparent;color:var(--gold-hi)}
body .mega-menu-inner{background:var(--bg3);border-color:var(--line2);border-top-color:var(--gold);border-radius:2px;box-shadow:0 30px 70px var(--shade)}
body .mm-feature,body .mm-feature--photo{background:var(--bg2);border-radius:2px}
body .mm-feature h4{font:800 1.4rem/1 var(--disp);text-transform:uppercase}
body .mm-tt{font:700 1.14rem/1.1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
body .mm-ds{font-size:.84rem;line-height:1.4}
body .mm-ico{background:var(--bg2);border-radius:2px}
body .mm-row{border-radius:2px}body .mm-row:hover{background:var(--bg2)}
body .header-cta .btn{font-size:1.08rem;padding:12px 20px 11px}
body .menu-toggle{background:transparent;border-radius:2px}
body .mobile-nav{background:var(--bg2)}
body .mobile-nav-section a{font-weight:400}
body .site-footer{background:var(--foot);color:var(--foot-muted);border-top:1px solid var(--line)}
body .footer-brand img{height:30px}
body .footer-col h4{font:800 1.1rem/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
body .footer-col a:hover{color:var(--gold-hi)}
body .footer-tag{font:700 .98rem/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.site-header a,.site-footer a,.mobile-nav a{text-decoration:none}

@media(min-width:1700px){
  .container{max-width:1440px}
  h1{font-size:7.6rem}.hero--plain h1{font-size:6.2rem}
  .bookshot--lg{width:600px}.bookshot--lg img{max-height:min(720px,70vh)}
  .hero-art--photo figure{max-width:640px}
  body .hero--panel .hero-grid{min-height:680px}
}
@media(max-height:820px) and (min-width:981px){body .hero .hero-grid{padding-top:44px;padding-bottom:52px}}
@media(max-width:980px){
  body .hero .hero-grid,body .hero--panel .hero-grid{grid-template-columns:1fr;gap:30px;padding-top:40px;padding-bottom:56px;min-height:0}
  .hero--book .hero-art,.hero--photo .hero-art{order:-1}
  .bookshot--lg{width:min(320px,72vw)}.bookshot--lg img{max-height:52vh}
  .hero-art--book .hero-inset{width:min(150px,36vw);bottom:0}
  .hero-art--photo figure{max-width:440px}
  .hero-art--photo figure img{aspect-ratio:5/4;max-height:36vh;object-position:50% 18%}
  .hero--photo .hero-copy .kicker{margin-bottom:14px}
  .hero .sub{font-size:1.02rem;line-height:1.55}
  .hero-art--photo figure{max-width:none}
  .hero-book{display:none}
  .hero .textlink[data-buy]{display:inline-block;position:relative;padding-left:60px;min-height:58px;padding-top:6px}
  .hero .textlink[data-buy]::before{content:"";position:absolute;left:0;top:0;width:46px;height:58px;background:url(/assets/img/book-420.webp) 50% 50%/contain no-repeat}
  .hero--flip .hero-art{order:-1}
  .hpanel{max-width:none}
  .feature-grid,.buy-grid,.signup-grid,.voices-grid,.speakcta-grid{grid-template-columns:1fr;gap:38px}.feature--flip .feature-media{order:0}
  .feature-media .bookshot--md{width:min(280px,62vw)}
  .voices-photo{max-width:320px}
  .speakcta-photo{display:none}.speakcta-grid>div{padding:64px 0}
  .cols-3,.editions,.foryou{grid-template-columns:1fr}.cols-2{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr 1fr;row-gap:28px}.proof-grid li:nth-child(3){border-left:0}.proof-grid li:nth-child(3) a,.proof-grid li:nth-child(3) div{padding-left:0}
  .heard{grid-template-columns:1fr 1fr}
  .bookcta-grid{grid-template-columns:1fr;gap:30px}.bookcta-grid .bookshot{margin:0;width:180px}
  .band{padding:72px 0}.band.pull{padding:68px 0}
}
@media(max-width:620px){
  body{font-size:17.5px}.container{padding:0 20px}
  h1{font-size:clamp(2.8rem,13.5vw,3.8rem)}.hero--plain h1{font-size:clamp(2.6rem,12.5vw,3.4rem)}
  .hero .sub{font-size:1.08rem}.btn--xl{font-size:1.2rem;padding:17px 22px 15px}
  .hero-ctas .btn,.buy-row .btn{flex:1 1 100%}
  .hero--photo h1{font-size:clamp(2.4rem,10.6vw,3rem)}
  .hero-art--photo figure img{max-height:none;aspect-ratio:16/10}
  body .hero .hero-grid{gap:20px;padding-top:24px}
  .hero .sub{margin-bottom:18px}
  .bookshot--lg{width:min(290px,72vw)}.bookshot--lg img{max-height:50vh}
  .fields{grid-template-columns:1fr}.form-card{padding:28px 22px}.facts{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}.proof-grid li{border-left:0;border-top:1px solid var(--line);padding-top:18px}.proof-grid li:first-child{border-top:0;padding-top:0}.proof-grid a,.proof-grid div{padding:0}
  .heard{grid-template-columns:1fr}
  .inline-row{flex-direction:column}.buy-box{padding:22px}
  .hpanel--facts dl div{grid-template-columns:100px 1fr}
  body .site-logo img{height:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ENGINE-CHROME:START — generated by ecosystem-site-engine; do not hand-edit */
/* ecosystem-site-engine chrome — generated, do not hand-edit.
 * Floating-card mega-menu + boxed-social footer. Themed per brand via build.mjs.
 * Injected between ENGINE-CHROME markers in the site's stylesheet. */

/* ---- header shell (sticky bar + logo + cta + hamburger) ---- */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.header-inner{max-width:1180px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:16px}
.site-logo{flex:none;display:inline-flex;align-items:center}
.site-logo img{height:42px;width:auto;display:block}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:var(--bg);cursor:pointer;flex:none}
.menu-toggle span{display:block;width:19px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}

/* ---- mega-menu ---- */
.primary-nav{display:flex;gap:4px;margin-left:10px}
.primary-nav .nav-item{position:relative}
.primary-nav .nav-link{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;white-space:nowrap;
  color:var(--ink);font-weight:600;font-size:.95rem;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease}
.primary-nav .nav-link:hover{background:var(--bg3);color:var(--gold-hi);text-decoration:none}
.primary-nav .nav-link>svg{width:17px;height:17px;flex:none}
.primary-nav .nav-link>svg.nav-caret{width:12px;height:12px;opacity:.5;transition:transform .15s ease}
.nav-item:hover .nav-caret{transform:rotate(180deg)}

/* Placement rule (see modules/megamenu): a mega-menu ALWAYS drops centered under
 * its trigger, NEVER below the fold, and lands about half way down the hero.
 * left:0 was the old anchor and it is what put every engine-built site 200px+
 * off centre. Centre here; js/megamenu-placement.js writes --mm-shift to clamp
 * the panel inside the viewport and --mm-maxh to keep it above the fold.
 * The shift rides on margin-left, never on transform, so the open/close
 * animation cannot be clobbered by the clamp. */
.mega-menu{position:absolute;top:100%;left:50%;right:auto;margin-left:var(--mm-shift,0px);padding-top:12px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.mega-menu--r{left:50%;right:auto}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-menu-inner{display:flex;gap:10px;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:4px 4px 16px 16px;
  box-shadow:0 24px 60px rgba(15,23,43,.20);padding:16px;min-width:580px;
  max-height:var(--mm-maxh,none);overflow-y:auto;overscroll-behavior:contain}
.mm-feature{flex:0 0 220px;position:relative;display:block;background:linear-gradient(160deg,var(--bg3),var(--bg));
  border:1px solid var(--line);border-radius:12px;padding:18px;overflow:hidden;text-decoration:none}
.mm-feature:hover{border-color:var(--gold);text-decoration:none}
.mm-feature .mm-fx{position:absolute;right:-14px;top:-12px;opacity:.9}
.mm-flabel{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi)}
.mm-feature h4{margin:8px 0 4px;font-size:1.05rem;color:var(--ink);position:relative}
.mm-feature p{margin:0;font-size:.86rem;color:var(--soft);position:relative}
.mm-fcta{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.85rem;font-weight:700;color:var(--gold-hi)}
.mm-fcta svg{width:15px;height:15px}
.mm-list{flex:1;min-width:280px;padding:6px 6px 6px 4px}
/* Two-column link list. A menu past ~6 rows stacks so tall that it swallows the
 * hero and, on a short laptop, reaches the fold: split it into columns instead
 * of dropping links. See modules/megamenu (rule HERO_HALF). */
.mm-cols{display:flex;gap:6px}
.mm-cols>div{flex:1;min-width:250px}
.mm-glabel{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}
.mm-row{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:10px;text-decoration:none;transition:background .15s ease}
.mm-row:hover{background:var(--bg3);text-decoration:none}
.mm-ico{flex:none;width:30px;height:30px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center}
.mm-ico svg{width:18px;height:18px}
.mm-tt{display:block;font-weight:600;color:var(--ink);font-size:.95rem}
.mm-ds{display:block;color:var(--muted);font-size:.82rem}
/* photo mega-menu (client sites): real photos in the feature card + row thumbnails, no line-art */
.mm-feature--photo{padding:0;background:var(--bg);border-radius:12px}
.mm-feature--photo .mm-fphoto{display:block;width:100%;height:132px;object-fit:cover;border-radius:11px 11px 0 0}
.mm-feature--photo .mm-flabel{display:block;padding:14px 16px 0}
.mm-feature--photo h4{padding:0 16px}
.mm-feature--photo p{padding:0 16px}
.mm-feature--photo .mm-fcta{padding:0 16px 16px}
.mm-ico--photo{overflow:hidden;background:var(--bg3)}
.mm-ico--photo img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.mobile-cta{padding:12px 0 2px}

/* ---- footer: dark institutional, branded ---- */
.site-footer{background:var(--ink);color:var(--foot-muted);position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
.site-footer>.container{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:34px 28px;padding-top:64px;padding-bottom:46px}
.footer-brand{grid-column:1}
.footer-brand img{height:44px;width:auto;display:block;margin:0 0 20px}
.footer-brand>p{color:var(--foot-muted);font-size:.92rem;line-height:1.65;margin:0;max-width:38ch}
.footer-col h4{color:var(--ink);font-family:"Inter",sans-serif;font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:0 0 16px}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 11px}
.footer-col a{color:var(--foot-muted);font-size:.93rem;text-decoration:none;transition:color .15s ease}
.footer-col a:hover{color:var(--ink);text-decoration:none}
.footer-social{display:flex;gap:10px;align-items:center;margin:18px 0 0;flex-wrap:wrap}
.footer-social:empty{display:none}
.footer-social a.social-link{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;color:var(--foot-muted);transition:border-color .2s ease,color .2s ease}
.footer-social a.social-link:hover{border-color:var(--gold);color:var(--ink)}
.footer-social a.social-link svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;padding-bottom:26px}
.footer-bottom p{margin:0;font-size:.84rem;color:var(--foot-muted)}
.footer-bottom a{color:var(--ink);text-decoration:none}
.footer-trustbar{border-top:1px solid var(--line)}
.footer-trustbar .container{display:flex;justify-content:center;padding-top:20px;padding-bottom:26px}
.footer-credits{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;text-align:center;font-size:.78rem;color:var(--foot-muted)}
.footer-cred{color:var(--foot-muted);text-decoration:none;transition:color .15s ease}
.footer-cred:hover{color:var(--ink);text-decoration:none}
.footer-cred strong{color:var(--ink);font-weight:600}
.cred-sep{opacity:.4}
.footer-tag{margin:0;font-size:.84rem;color:var(--foot-muted)}
@media(max-width:560px){.footer-credits{font-size:.74rem;gap:6px 12px}}
/* footer contact column (clean address/phone/email/hours, no wrapping link labels) */
.footer-contact a,.footer-contact .fc-hours,.footer-contact .fc-addr{display:block;color:var(--foot-muted);font-size:.9rem;line-height:1.5;margin-bottom:9px;text-decoration:none}
.footer-contact a:hover{color:var(--ink)}
.footer-contact .fc-addr{color:var(--ink);margin-bottom:11px}
.footer-contact .fc-hours{font-size:.82rem;margin-top:2px}
.footer-contact .fc-links{margin-top:4px;font-size:.85rem}
.footer-contact .fc-links a{display:inline;color:var(--gold);margin:0}
.footer-contact .fc-dot{margin:0 8px;opacity:.45;color:var(--foot-muted)}
@media(max-width:860px){
  .site-footer>.container{grid-template-columns:1fr 1fr;gap:30px 20px;padding-top:48px}
  .footer-brand{grid-column:1 / -1}
  .footer-bottom .container{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---- mobile nav (generated header toggles .open) ---- */
.mobile-nav{display:none}
.mobile-nav.open{display:flex;flex-direction:column;gap:4px}
.mobile-nav-section{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--line)}
.mobile-nav-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px}
.mobile-nav-section a{padding:9px 6px;color:var(--ink);font-weight:600}
.mobile-cta{padding:14px 0 4px}

@media(max-width:860px){
  .primary-nav{display:none}
  .menu-toggle{display:flex}
  .header-cta .btn--primary{display:none}      /* the mobile nav carries its own CTA */
  .header-inner{padding:11px 18px;gap:10px}
  .mobile-nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.10);padding:10px 18px 18px;max-height:80vh;overflow:auto;z-index:55}
}

/* ---- layout guardrails (engine-enforced, prevent recurring bugs) ----
 * Hero grids MUST top-align. Vertically centering a short text column against a
 * tall visual/instrument panel pushes the headline + primary CTA below the fold.
 * This block is injected last, so it overrides any align-items:center a site
 * sets on its hero. Keeps the primary CTA above the fold on every build. */
.hero .container,.baro-hero .container{align-items:start}
/* Hero must NOT inherit the global section{padding:76px 0}. That top padding renders
 * LARGER in real browsers than in headless screenshots, creating a recurring dead gap
 * under the nav that looks fine in tooling but wrong to the user. Zero the section
 * padding on the hero and set an explicit, intentional top gap (~32px) on its container.
 * Locked 2026-06-20 (Best Diehl Electric). Always verify hero spacing in a REAL browser. */
.hero{padding:0}
.hero .container{padding-top:32px}
/* Heroes are ALWAYS light/warm — NEVER dark. Hard ecosystem rule, same footing as
 * "no em-dashes". No dark/navy-overlay hero, no dark full-bleed hero with light text.
 * A photo hero uses a LIGHT scrim only (warm-ivory wash), never a dark overlay.
 * This guardrail forces the hero's own text colour to dark ink so a hero can never
 * silently render light-on-dark; set per-element light colours deliberately only on
 * legitimately light grounds. Locked 2026-06-25 (Flaig Law Firm). */
.hero{color:var(--ink);background:var(--bg3)}

/* ---- persistent mobile CTA bar ----
 * On mobile the header CTA is hidden, so every page gets one unmissable fixed
 * action at the bottom (primary CTA + optional call). Generated by buildFooter
 * from primaryCta/phone. Requires the site to define .btn/.btn--primary. */
.mobile-cta-bar{display:none}
@media (max-width:760px){
  .mobile-cta-bar{display:flex;gap:10px;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--hdr);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(15,23,43,.10)}
  .mobile-cta-bar .btn{flex:1;padding:14px 16px}
  .mobile-cta-bar .mcb-call{flex:0 0 auto;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--gold);border-radius:14px;color:var(--gold-hi)}
  .mobile-cta-bar .mcb-call svg{width:22px;height:22px}
  body{padding-bottom:76px}
}

/* ---- section connector (engine standard, added 2026-07-01 Jenn Births) ----
 * "Just a horizontal box after another horizontal box isn't acceptable." A slim accent
 * thread + diamond node that STRADDLES the seam between two full-width sections, so a
 * page reads as one flowing story instead of disconnected stacked bands. The gradient
 * fades at both ends so it blends into any section background, light or dark.
 * USAGE: emit <div class="connector"></div> between two sections. Add class .on-dark
 * when the section BELOW the seam is dark so the node's ring matches that ground. */
.connector{position:relative;height:0;z-index:4;pointer-events:none;overflow:visible}
.connector::before{content:"";position:absolute;left:50%;top:-38px;transform:translateX(-50%);
  width:1.5px;height:76px;background:linear-gradient(to bottom,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.connector::after{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%) rotate(45deg);
  width:9px;height:9px;background:var(--gold);box-shadow:0 0 0 4px var(--bg3)}
.connector.on-dark::after{box-shadow:0 0 0 4px var(--ink)}
/* ENGINE-CHROME:END */

/* Speaking form inside the home hero (2026-10-14) */
.hero-form{margin-top:26px;background:var(--bg3);border:1px solid var(--line2);border-top:3px solid var(--gold);padding:22px 22px 18px;border-radius:2px;max-width:560px}
.hero-form-title{font:700 1.5rem/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.hero-form .fields{gap:12px 14px}
.hero-form .field label{font-size:.82rem;margin-bottom:5px}
.hero-form .consent{margin-top:12px;font-size:.9rem}
.hero-form .form-actions{margin-top:14px}
.hero-form .form-actions .btn{width:100%}
.hero-form .fine{display:none}
.hero-form .hero-links{margin-top:14px}
@media (max-width:980px){.hero-form{max-width:none;padding:18px 16px 14px}}
/* a hero that carries the speaking form: the form has to be on screen on a laptop, so the copy tightens and the photo rides at the top */
@media (min-width:981px){
  body .hero--withform .hero-grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:start;gap:48px;padding-top:34px;padding-bottom:56px;min-height:0}
  .hero--withform .hero-copy .kicker{margin-bottom:12px}
  .hero--withform h1{font-size:clamp(2.7rem,3.9vw,3.75rem);line-height:.96;margin-bottom:.32em}
  .hero--withform .sub{font-size:1.06rem;line-height:1.55;max-width:31.9em}
  .hero--withform .hero-form{margin-top:20px;padding:18px 20px 14px;max-width:620px}
  .hero--withform .hero-form-title{font-size:1.35rem;margin-bottom:10px}
  .hero--withform .hero-form .fields{gap:10px 14px}
  .hero--withform .hero-form .hero-links{margin-top:10px}
  .hero--withform .hero-art{align-items:flex-start;padding-top:6px}
}
@media (min-width:1700px){.hero--withform h1{font-size:4.4rem}}

/* Book prominence in the home hero (2026-10-14) */
.hero-art--withbook .hero-book{width:50%;max-width:300px;left:-9%}
.hero-book-tag{display:block;margin-top:10px;text-align:center;font:700 .86rem/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media (max-width:980px){
  .hero-art--withbook{position:relative}
  .hero-art--withbook .hero-book{display:block;left:auto;right:5%;bottom:-18px;width:30%;max-width:150px}
  .hero-art--withbook .hero-book-tag{font-size:.66rem;letter-spacing:.1em;margin-top:6px;background:var(--bg);padding:4px 0}
}

/* ── The free sample: a long read (/books/take-my-advice-im-not-using-it/sample/) ── */
.reader-col{max-width:calc(33.5em + 56px)}
.band.reader{padding:96px 0 72px}
.ch-head{margin:0 0 44px;padding-bottom:30px;position:relative}
.ch-head::after{content:"";position:absolute;left:0;bottom:0;width:90px;height:2px;background:var(--gold)}
.ch-num{display:flex;align-items:flex-end;gap:16px;margin:0 0 14px;font-family:var(--disp);text-transform:uppercase;color:var(--gold)}
.ch-label{font-weight:700;font-size:1.05rem;letter-spacing:.28em;padding-bottom:.55em}
.ch-big{font-weight:800;font-size:clamp(4.6rem,9vw,7rem);line-height:.8}
.ch-head h2{font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:.92;margin:0}
.reader-text{font-size:1.16rem;line-height:1.78;color:var(--soft);hyphens:manual;overflow-wrap:break-word}
.reader-text>p{margin:0 0 1.2em}
.reader-text>p:first-child{color:var(--ink)}
.reader-text>p:first-child::first-letter{float:left;font:800 5.1em/.78 var(--disp);color:var(--gold);margin:.06em .12em 0 0}
.reader-text strong{color:var(--ink);font-weight:600}
.reader-text ul{margin:0 0 1.3em;padding:0;list-style:none}
.reader-text li{position:relative;padding-left:28px;margin:0 0 .55em}
.reader-text li::before{content:"";position:absolute;left:2px;top:.78em;width:12px;height:2px;background:var(--gold)}
.callout{margin:52px 0 0;padding:34px 34px 14px;background:var(--bg2);border-top:2px solid var(--gold);color:var(--ink)}
.callout+.callout{margin-top:22px}
.callout p{color:var(--soft)}.callout>p:nth-child(2){color:var(--ink);font-size:1.12em;line-height:1.55}
body .callout-label{font:800 1.5rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.callout--lesson{background:transparent;border:1px solid var(--line2);border-top:2px solid var(--gold)}
.ch-end{margin:46px 0 0;text-align:center;font:700 .9rem/1 var(--disp);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.ch-end::before,.ch-end::after{content:"";display:inline-block;vertical-align:middle;width:36px;height:1px;background:var(--gold-lo);margin:0 14px}
.band.readbuy{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.readbuy-in{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
.bookshot--xs{width:120px;margin:0}
.readbuy .kicker{margin-bottom:10px}.readbuy-line{font-size:1.2rem;color:var(--ink);margin:0}
.readbuy .buy-row{margin-top:18px}.readbuy-next{margin:18px 0 0}
.band.sampleend{background:var(--ground);border-top:1px solid var(--line)}
.sampleend-grid{display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:center;max-width:1040px}
.sampleend h2{font-size:clamp(3rem,6vw,5rem)}
.sampleend-body{font-size:1.2rem;color:var(--soft);max-width:26.3em}
.sampleend .buy-row{margin-top:26px}.sampleend .cta-row{margin-top:14px}
.toc{list-style:none;margin:10px 0 0;padding:0;counter-reset:toc}
.toc>li{counter-increment:toc;position:relative;padding:16px 0 16px 58px;border-bottom:1px solid var(--line)}
.toc>li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:13px;font:800 1.7rem/1 var(--disp);color:var(--gold-lo)}
.toc>li:first-child::before{content:"In"}
.toc>li.toc-more::before{content:"…"}
.toc-title{font:700 1.5rem/1.1 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.toc-read::before{color:var(--gold)!important}
.toc-tag{display:inline-block;margin-left:12px;vertical-align:3px;font:700 .78rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--on-gold);background:var(--gold);padding:5px 8px 4px;text-decoration:none;border-radius:2px}
.toc-tag:hover{color:var(--on-gold);background:var(--gold-hi)}
.toc ul{list-style:none;margin:8px 0 0;padding:0;color:var(--soft);font-size:.98rem}
.toc ul li{display:inline}.toc ul li+li::before{content:" · ";color:var(--gold-lo)}
.toc-more .toc-title{color:var(--muted);font-size:1.2rem}
.samplepdf .signup-grid>div>p+p{margin-top:16px}
.sample-ready{margin:16px 0 0}.rl-form.is-sent .sample-ready .btn{display:inline-flex}
.textlink--sample{display:inline-flex;align-items:center;gap:10px}
.textlink--sample::before{content:"";width:22px;height:2px;background:var(--gold);flex:none}
@media (max-width:980px){
  .sampleend-grid{grid-template-columns:1fr;gap:34px}.sampleend-grid .bookshot{width:min(240px,60vw);margin:0}
}
@media (max-width:640px){
  .band.reader{padding:64px 0 52px}
  .reader-text{font-size:1.08rem;line-height:1.74}
  .callout{padding:26px 22px 8px;margin-left:-6px;margin-right:-6px}
  .readbuy-in{grid-template-columns:1fr;gap:18px}.readbuy .bookshot--xs{width:86px}
  .toc>li{padding-left:46px}.toc-title{font-size:1.3rem}.toc-tag{margin:8px 0 0;display:table}
}

/* Backlight (Mike, 2026-10-14: "some light behind it a little so the book looks like a
 * rectangle", then "faint"). Dark schemes only: a soft warm glow behind the render and a hairline
 * halo on its edges so the black cover separates from the black ground. The render is untouched. */
.bookshot{isolation:isolate}
.bookshot::before{content:"";position:absolute;z-index:-1;left:4%;right:4%;top:2%;bottom:12%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,232,200,.15),rgba(207,169,72,.06) 58%,transparent 100%);filter:blur(22px)}
.bookshot img{filter:drop-shadow(0 0 .6px rgba(245,236,214,.38)) drop-shadow(0 0 9px rgba(245,232,200,.12))}
:root[data-theme="ivory"] .bookshot::before,:root[data-theme="paper"] .bookshot::before,:root[data-theme="linen"] .bookshot::before{display:none}
.toc>li:first-child{counter-increment:none}
.hero-subtitle{text-wrap:balance}
/* Book page: chapter hooks, the sample as a third action, a tighter phone hero (2026-10-14) */
.hooks{list-style:none;margin:8px 0 40px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hooks li{font:800 1.7rem/1.02 var(--disp);text-transform:uppercase;color:var(--ink);padding:20px 22px;border:1px solid var(--line2);border-top:2px solid var(--gold);background:var(--bg)}
.toc-label{font:700 .95rem/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.toc-title a{color:inherit;text-decoration:none}.toc-title a:hover{color:var(--gold-hi)}
.btn--sample{flex-basis:100%;max-width:520px;border-color:var(--gold);color:var(--gold-hi)}
.btn--sample:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:var(--gold-hi);color:var(--ink)}
@media(max-width:620px){
  .hooks{grid-template-columns:1fr;gap:8px}.hooks li{font-size:1.4rem;padding:14px 16px}
  .hero--book .bookshot--lg{width:48vw}.hero--book .bookshot--lg img{max-height:none}
  .hero--book .hero-copy{display:flex;flex-direction:column}
  .hero--book .hero-copy>*{order:5}
  .hero--book .hero-copy>.kicker{order:1}.hero--book .hero-copy>h1{order:2}.hero--book .hero-copy>.hero-subtitle{order:3;align-self:flex-start}
  .hero--book .hero-copy>.buy-row,.hero--book .hero-copy>.hero-ctas{order:4;margin-top:6px}
  .hero--book .hero-copy>.buy-formats{order:4;margin:12px 0 0}.hero--book .hero-copy>.hero-links{order:4;margin:14px 0 22px}
  .hero--book .hero-copy>.hero-quote{order:6;margin-top:6px}.hero--book .hero-copy>.sub{order:7}.hero--book .hero-copy>.hero-meta{order:8}
  body .hero--book .hero-grid{gap:14px}
}

/* ── Heroes, judge round 4 (2026-10-14) ── */
.sub-short,.k-short{display:none}
.consent input{appearance:none;-webkit-appearance:none;margin-top:4px;width:18px;height:18px;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:2px;background:transparent;display:grid;place-content:center;cursor:pointer}
.consent input:checked{background:var(--gold);border-color:var(--gold)}
.consent input:checked::after{content:"";width:5px;height:9px;border:solid var(--bg);border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
.consent input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hpanel-thumbs img{height:120px;width:100px;object-fit:cover}
.hero-art--office figure img{object-position:60% 30%}
@media(min-width:981px){
  /* the hero owns the first screen: the next section starts at the fold, not 40px above it */
  body .hero--panel .hero-grid,body .hero--photo:not(.hero--withform) .hero-grid{min-height:min(calc(100svh - 72px),880px);align-content:center}
  /* panels start on the eyebrow line instead of floating mid-column */
  body .hero--panel .hero-grid{align-items:start}
  .hero--panel .hero-art{align-items:flex-start;padding-top:4px}
  .hero--panel h1{font-size:clamp(3rem,5.2vw,4.75rem)}
  /* home: the form fits the first screen */
  .hero--withform .hero-form .fields{grid-template-columns:repeat(6,minmax(0,1fr))}
  .hero--withform .hero-form .field{grid-column:span 3}
  .hero--withform .hero-form .field:nth-child(n+3){grid-column:span 2}
  .hero--withform .hero-form input[type=text],.hero--withform .hero-form input[type=email],.hero--withform .hero-form select{padding-top:10px;padding-bottom:10px}
  /* book page: one button grid, edges agree */
  .hero--book .buy-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:540px}
  .hero--book .buy-row .btn{justify-content:center;text-align:center}
  .hero--book .buy-row .btn--sample{grid-column:1/-1;max-width:none}
  .hero--book .hero-copy>.hero-links{margin-top:14px}
}
@media(max-width:980px){
  .hero-art--office figure img{object-position:58% 28%}
  /* the quote or the answer sits under the headline, above the buttons */
  body .hero--artfirst .hero-grid{gap:0}
  .hero--artfirst .hero-copy{display:contents}
  .hero--artfirst .hero-copy>.kicker{order:1}.hero--artfirst .hero-copy>h1{order:2}.hero--artfirst .hero-copy>.sub{order:3}
  .hero--artfirst .hero-art{order:4;margin:4px 0 24px}
  .hero--artfirst .hero-copy>.hero-ctas{order:5}.hero--artfirst .hero-copy>.hero-links{order:6}
}
@media(max-width:620px){
  .sub-long,.k-long{display:none}.sub-short,.k-short{display:inline}
  .hero .kicker{letter-spacing:.18em}
  /* the gold link stands alone: no soft thumbnail beside it */
  .hero .textlink[data-buy]{padding-left:0;min-height:0;padding-top:0}
  .hero .textlink[data-buy]::before{display:none}
  .hero-links{gap:10px 22px}.hero-links>span[aria-hidden]{display:none}
}
.hero-form .form-status:empty{display:none}
.hero-art--office figure img{transform:scale(1.5);transform-origin:63% 58%}
.hero-meta{letter-spacing:.14em}
@media(max-width:980px){.hero-art--office figure img{transform:scale(1.7);transform-origin:61% 52%}}
/* judge round 4b: one eyebrow line across pages, no orphans, book page fits */
.hero .sub,.hero-quote,.hpanel dd,.hpanel-big,.prose p{text-wrap:pretty}
.hero h1,.hpanel--index a b,.hpanel--dedication blockquote{text-wrap:balance}
@media(min-width:981px){
  body .hero--panel .hero-grid,body .hero--photo:not(.hero--withform) .hero-grid{align-content:start;padding-top:clamp(64px,10vh,104px)}
  .hero--book .hero-subtitle{margin-bottom:16px}.hero--book .hero-quote{margin-bottom:16px}
  .hero--book .buy-row{margin-top:20px}
}
@media(max-width:980px){.hero--withform .hero-art--withbook{margin-bottom:14px}}
.hpanel-book{display:block;width:150px;margin-top:26px}
@media(min-width:981px){body .hero--short .hero-grid{align-content:center;align-items:center;padding-top:44px}}
@media(max-width:980px){.hpanel-book{display:none}}
.hpanel-book .bookshot{width:100%}
/* judge 4b: one solid gold button per hero, gold labels everywhere, no broken format list on phones */
.hpanel--signup .btn--primary{background:transparent;color:var(--gold-hi);border:1px solid var(--gold)}
.hpanel--signup .hpanel-label{color:var(--gold)}
@media(max-width:620px){.hero-meta{display:none}}
/* home: the library photograph (Mike 2026-10-14) */
.hero-art--library figure{max-width:600px}
.hero-art--library figure img{aspect-ratio:1/1;object-position:60% 50%}
@media(max-width:980px){.hero-art--library figure img{aspect-ratio:1/1;max-height:none;object-position:60% 50%}}
@media(min-width:981px){.hero--withform .hero-art--library{align-self:center;padding-top:0}.hero-art--library figure{max-width:none}}
@media(min-width:981px){.hero--withform .hero-art--library{align-self:start;padding-top:8px}.hero-art--library figure img{aspect-ratio:5/6;object-position:64% 50%}}
.hero-art--library figure img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 96%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 96%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 94%,transparent 100%)}
/* two home heroes, picked in the themer (Mike 2026-10-14): Library is the default */
html:not([data-hero="book"]) .hero-variant--book,html[data-hero="book"] .hero-variant--library{display:none}
.themer-label--hero{margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.themer-row--hero{grid-template-columns:1fr 1fr}
.themer-hero{flex-direction:row;justify-content:center;padding:10px 4px;border-color:var(--line2);font-size:.9rem}
/* library hero: the table copy now stands clear of the mug at the right edge, so the photo is shown whole (no side crop) */
.hero-art--library figure img{object-position:100% 50%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 98.5%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 94%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 98.5%,transparent 100%),linear-gradient(to top,transparent 0,#000 8%,#000 94%,transparent 100%)}
@media(min-width:981px){.hero-art--library figure img{aspect-ratio:5/6;object-position:100% 50%}}
/* judge 4c: the daylight speaking photo sits down into the dark page */
.hero-art--office figure img{filter:brightness(.85) saturate(.78) contrast(1.05)}
.hero-art--office figure{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 88%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 88%,transparent 100%),linear-gradient(to top,transparent 0,#000 20%,#000 92%,transparent 100%)}
/* Article icons (Mike 2026-10-14): one small drawn mark per piece, gold line on a quiet tile */
.art-icon{display:block;width:100%;height:100%}
.ll-icon{position:absolute;left:0;top:24px;width:52px;height:52px;padding:9px;color:var(--gold);background:var(--bg3);border:1px solid var(--line2);border-radius:2px;transition:border-color .18s ease,color .18s ease}
.linklist li.has-icon a{padding-left:74px;min-height:100px}
.linklist li.has-icon a:hover{padding-left:74px}
.linklist li.has-icon a:hover .ll-icon{border-color:var(--gold);color:var(--gold-hi)}
.hero-icon{display:block;width:64px;height:64px;padding:11px;margin:0 0 22px;color:var(--gold);background:var(--bg3);border:1px solid var(--line2);border-top:2px solid var(--gold);border-radius:2px}
@media(max-width:620px){.ll-icon{width:44px;height:44px;padding:8px;top:22px}.linklist li.has-icon a{padding-left:60px}.linklist li.has-icon a:hover{padding-left:60px}.hero-icon{width:52px;height:52px;padding:9px;margin-bottom:16px}}
.ll-icon{width:60px;height:60px;padding:9px;top:22px}.linklist li.has-icon a{padding-left:84px}.linklist li.has-icon a:hover{padding-left:84px}
.hero-icon{width:76px;height:76px;padding:12px}
@media(max-width:620px){.ll-icon{width:48px;height:48px;padding:7px}.linklist li.has-icon a,.linklist li.has-icon a:hover{padding-left:64px}.hero-icon{width:60px;height:60px;padding:9px}}
/* QA 2026-10-14: the right-hand mega menu is anchored to its item's right edge, so the hidden panel
 * no longer widens the page (46px horizontal scroll at 1024). Logo link gets a 44px tap height.
 * The buy grid's single phone column may shrink below its content's min width (36px overflow at 320). */
.mega-menu.mega-menu--r{left:auto;right:0;transform:translateY(6px)}
.nav-item:hover .mega-menu.mega-menu--r,.nav-item:focus-within .mega-menu.mega-menu--r{transform:translateY(0)}
.site-logo{min-height:44px}
@media(max-width:980px){.buy-grid{grid-template-columns:minmax(0,1fr)}.buy-grid>*{min-width:0}}
/* QA 2026-10-14: store rows at 320 (13px overflow): the action drops under the name on narrow phones. */
.store{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:420px){.store{grid-template-columns:minmax(0,1fr)}.store-go{grid-row:3;grid-column:1;margin-top:10px}}
/* Part Two (2026-10-14): two distinct book choices, BUY THE BOOK and READ A SAMPLE, with the
 * publisher's list prices on one quiet line under them. */
.buy-row--choice .btn{min-width:200px}
.btn--read{border-color:var(--gold);color:var(--gold-hi)}
.btn--read:hover{background:color-mix(in srgb,var(--gold) 14%,transparent);border-color:var(--gold-hi);color:var(--ink)}
.buy-formats{margin:14px 0 0;font:700 .92rem/1.4 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.buy-formats span{display:block;margin-top:4px;font:400 .86rem/1.45 var(--text);letter-spacing:0;text-transform:none;color:var(--muted)}
.feature-copy q{font-style:italic;color:var(--ink)}
@media (max-width:980px){.buy-row--choice .btn{min-width:0}}

/* HERO IMAGE PASS (2026-10-14, Mike: "all robs hero images need improvement"; judge round 1 in
 * research/JUDGE-HERO-IMAGES-1.md). Photos are graded, vignetted and cropped at native pixels by
 * tools/hero-images.py, so the CSS only feathers: a long fade on the left (into the text column) and
 * the bottom, a short one on top, almost none on the right where the baked vignette is already dark.
 * Nothing is scaled up with CSS. */
.hero .hero-art--photo figure,.hero .hero-art--tight figure{overflow:visible;-webkit-mask-image:none;mask-image:none}
.hero .hero-art--photo figure img,.hero .hero-art--tight figure img{transform:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 97%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero .hero-art--photo.hero-art--library figure img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 12%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero .hero-art--photo:not(.hero-art--library) figure img{object-position:50% 30%}
.hero .hero-art--stage figure img{aspect-ratio:4/5;object-position:50% 40%}
@media(min-width:981px){.hero--withform .hero-art--library{align-self:start;padding-top:8px}}
@media(max-width:980px){
  .hero .hero-art--photo:not(.hero-art--library) figure{max-width:310px;margin:0 auto}
  .hero .hero-art--photo:not(.hero-art--library) figure img{aspect-ratio:4/5;max-height:none;object-position:50% 20%}
}
/* panel portraits (podcast, stratus): the same grade and feather as the big heroes */
.hpanel-portrait{margin:0 0 16px;width:320px;max-width:100%}
.hpanel-portrait img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:cover;object-position:45% 18%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 78%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 8%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:980px){.hpanel-portrait{width:220px}.hero:has(.hero-phoneart) .hpanel-portrait{display:none}}
/* phone first screen: a cover or portrait under the eyebrow where the right column drops below */
.hero-phoneart{display:none}
@media(max-width:980px){
  .hero-phoneart{display:block;width:140px;margin:4px 0 18px}
  .hero-phoneart img{display:block;width:140px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:45% 22%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 80%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-phoneart .bookshot{width:120px}
}
/* why page: the book reads as the book, not an icon */
.hpanel-book{width:190px}
/* media: two equal 160px tiles, the 3D cover render and the portrait, caption below */
.hpanel-thumbs{display:grid;grid-template-columns:160px 160px;gap:16px;align-items:end}
.hpanel-tile{display:block;width:160px;height:200px;overflow:hidden}
.hpanel-tile img{width:160px;height:200px;object-fit:cover;object-position:50% 20%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 0%,#000 86%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 0%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hpanel-tile--book{overflow:visible;display:flex;align-items:flex-end;justify-content:center}
.hpanel-tile--book .bookshot{width:150px}
.hpanel-tile--book .bookshot img{width:100%;height:auto;object-fit:contain;-webkit-mask-image:none;mask-image:none}
.hpanel-thumbs p{grid-column:1/-1;margin:2px 0 0}
/* judge round 2: podcast portrait 4:5 at 300 wide; stratus image above the CTAs on phones */
.hpanel-portrait--tall{width:300px}.hpanel-portrait--tall img{aspect-ratio:4/5;object-position:45% 12%}
@media(max-width:980px){.hero-phoneart--wide,.hero-phoneart--wide img{width:240px}.hero-phoneart--wide img{aspect-ratio:6/5;object-position:40% 20%}}
/* podcast phone portrait: the same 4:5 crop as its desktop panel */
@media(max-width:980px){.hero-phoneart img{width:150px;object-position:50% 12%}}
/* Newsletter header (2026-10-15): Rob's real LinkedIn banner, framed into the dark system. */
.nl-banner{margin:0 0 2rem}
.nl-banner a{display:block;border:1px solid rgba(207,169,72,.45);border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:border-color .2s,transform .2s}
.nl-banner a:hover,.nl-banner a:focus-visible{border-color:var(--gold);transform:translateY(-2px)}
.nl-banner img{display:block;width:100%;height:auto}
.nl-banner figcaption{margin-top:.6rem;font-size:.8rem;color:var(--muted);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.nl-banner a{transition:none}.nl-banner a:hover{transform:none}}
/* ---- Megamenu, Rob (2026-10-15, Mike: "make megamenu better") ----
 * Desktop: bigger real-photo card, rows get a gold rule on hover/focus, visible keyboard focus.
 * Phone: the menu is a full-height sheet (the page no longer shows under it), gold group labels,
 * a book card with Buy and Sample on top (injected by site.js), and the speaking CTA pinned last. */
.mm-feature--photo .mm-fphoto{height:150px;object-position:50% 30%}
.mm-feature h4{font-family:var(--disp);font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
.mm-row{position:relative;border-radius:2px!important}
.mm-row::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .18s ease}
.mm-row:hover::before,.mm-row:focus-visible::before{transform:scaleY(1)}
.mm-row:hover .mm-tt,.mm-row:focus-visible .mm-tt{color:var(--gold-hi)}
.mm-row:focus-visible,.mm-feature:focus-visible,.nav-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mm-glabel{color:var(--gold)!important}
@media(max-width:860px){
  .mobile-nav{position:fixed;top:var(--hdr-h,67px);bottom:0;max-height:none;padding:6px 18px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain;background:var(--bg)}
  .mobile-nav-label{color:var(--gold);font-family:var(--disp);font-size:.9rem;letter-spacing:.14em}
  .mobile-nav-section a{font-family:var(--disp);font-weight:700;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;padding:10px 6px}
  .mobile-nav-section a:active{color:var(--gold-hi)}
  .mn-book{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;margin:8px 0 6px;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--bg2)}
  .mn-book img{width:72px;height:auto;display:block}
  .mn-book b{display:block;font-family:var(--disp);font-size:1.15rem;line-height:1.05;text-transform:uppercase;color:var(--ink)}
  .mn-book small{display:block;margin:4px 0 10px;color:var(--muted);font-size:.8rem}
  .mn-book .mn-actions{display:flex;gap:8px;flex-wrap:wrap}
  .mn-book .mn-actions a{padding:9px 12px!important;font-family:var(--disp)!important;font-size:.95rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;border:1px solid var(--gold);border-radius:2px;color:var(--gold-hi)}
  .mn-book .mn-actions a:first-child{background:var(--gold);color:var(--on-gold)}
  body.menu-open{overflow:hidden}
}

/* Writing menu: the newsletter title panel (logo cropped out, Mike 2026-10-15) gets a wider card so its title reads. */
.mm-feature--photo:has(.mm-fphoto--title){flex-basis:300px}.mm-feature--photo .mm-fphoto--title{height:auto;aspect-ratio:728/495;object-fit:cover;object-position:50% 50%}

/* Directed search (topics hero, Mike 2026-10-15) */
.hpanel--search .rl-search{margin:0}
.rl-search-row{position:relative;margin:4px 0 22px}
.rl-search-ico{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--gold);pointer-events:none}
.rl-search-row input{width:100%;box-sizing:border-box;padding:17px 18px 17px 48px;background:var(--field);border:1px solid var(--line2);border-radius:2px;color:var(--ink);font:400 1.12rem/1.3 var(--text)}
.rl-search-row input::placeholder{color:var(--muted)}
.rl-search-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(207,169,72,.22)}
.rl-chips-label{font:700 .78rem/1.2 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin:0 0 10px}
.rl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.rl-chip{appearance:none;background:transparent;border:1px solid var(--line2);color:var(--ink);font:700 .86rem/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer}
.rl-chip:hover,.rl-chip:focus-visible,.rl-chip[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);outline:none}
.rl-asks{list-style:none;margin:0;padding:0}.rl-asks li+li{border-top:1px solid var(--line)}
.rl-asks a{display:block;padding:11px 0;color:var(--soft);text-decoration:none;font:400 1rem/1.4 var(--text)}
.rl-asks a:hover,.rl-asks a:focus-visible{color:var(--gold)}
.rl-results-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:8px}
.rl-results-head .kicker{margin:0}.rl-clear{background:none;border:0;cursor:pointer;font:700 .82rem/1 var(--disp);letter-spacing:.18em;text-transform:uppercase}
.rl-group{margin-top:26px}.rl-group h3{font:800 1.5rem/1 var(--disp);text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.rl-group ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.rl-group li{border-top:1px solid var(--line)}
.rl-group a{display:block;padding:14px 0;text-decoration:none;color:var(--ink)}
.rl-group a span{display:block;font:700 .78rem/1.2 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--meta);margin-bottom:6px}
.rl-group a b{display:block;font:800 1.3rem/1.05 var(--disp);text-transform:uppercase}
.rl-group a em{display:block;font-style:normal;color:var(--soft);font-size:.95rem;line-height:1.45;margin-top:6px}
.rl-group a:hover b,.rl-group a:focus-visible b{color:var(--gold)}
@media(max-width:760px){.rl-group ul{grid-template-columns:1fr}.rl-search-row input{font-size:1rem}}
/* The newsletter's own title panel as the hero's right column */
.hpanel--masthead .hpanel-mast{display:block;border:1px solid var(--line2);box-shadow:0 24px 50px var(--shade)}
.hpanel--masthead .hpanel-mast img{display:block;width:100%;height:auto}
.hpanel--masthead .hpanel-mast:hover{border-color:var(--gold)}
.hpanel--masthead .hpanel-credit{margin-top:14px}
.rl-searchband .hpanel{max-width:none;padding:0}.rl-searchband .rl-chips{margin-bottom:0}
.hero--withform .hero-form .field.field--full{grid-column:1/-1}.hero--withform .hero-form textarea{min-height:96px}

/* JUDGE-HEROES-3 fix 5 (2026-10-15): the consent box was the only unstyled control on the site. */
.consent input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:3px 0 0;width:18px;height:18px;border:1px solid color-mix(in srgb,var(--ink) 38%,transparent);border-radius:2px;background:transparent;display:grid;place-content:center;cursor:pointer;transition:background .15s,border-color .15s}
.consent input[type=checkbox]::after{content:"";width:10px;height:6px;border:2px solid var(--bg);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);opacity:0}
.consent input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.consent input[type=checkbox]:checked::after{opacity:1}
.consent input[type=checkbox]:hover{border-color:var(--gold)}
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* JUDGE-HERO-IMAGES-3 fix 3: a contact shadow so the home book sits on the table instead of floating. */
.hero-book::after{content:"";position:absolute;left:8%;right:8%;bottom:-4px;height:12px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(6px);z-index:-1}
.hero-book{z-index:1;isolation:isolate}
/* JUDGE-HEROES-4 round 5 (2026-10-15).
   G1: panel photos fill the panel, never a thumbnail parked at the left; phone full width.
   G2: documentary photos and the magazine cover keep their edges: no feather, a hairline and a shadow.
   G4: text-only heroes (why, events) start on the same line as their panel. */
.hpanel-portrait{width:100%;max-width:none;margin:0 0 18px}
.hpanel-portrait img{width:100%}
.hpanel-portrait--tall{width:100%}
.hpanel-portrait--doc img{-webkit-mask-image:none;mask-image:none;aspect-ratio:auto;object-fit:cover;border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 28px rgba(0,0,0,.45)}
.hpanel-portrait--tall.hpanel-portrait--doc img{aspect-ratio:auto;height:auto}
.h1-lines span{text-wrap:balance}
.hpanel-portrait figcaption{margin-top:10px;font:700 .72rem/1.4 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--meta)}
body.page-podcast .hpanel-portrait--tall img{aspect-ratio:1/1;object-position:50% 18%}
.hpanel-book{width:240px}
.hpanel-book .bookshot img{filter:drop-shadow(0 22px 30px rgba(0,0,0,.6))}
@media(min-width:981px){
  body .hero--short .hero-grid{align-content:start;align-items:start;padding-top:clamp(64px,10vh,104px)}
  body.page-writing .hpanel-portrait--tall{max-width:330px}
}
@media(max-width:980px){
  .hpanel-portrait,.hpanel-portrait--tall{width:100%;max-width:none}
  .hero-phoneart{width:100%;margin:6px 0 18px}
  .hero-phoneart img{width:100%;aspect-ratio:16/10;object-position:50% 20%}
  .hero-phoneart .bookshot{width:132px;margin:0 auto}
  /* fix 3: 16:10 photos on phones so the first action reaches the first screen */
  .hero .hero-art--photo:not(.hero-art--library) figure{max-width:none}
  .hero .hero-art--photo:not(.hero-art--library) figure img{aspect-ratio:16/10;object-position:50% 22%}
  .hero-art--library figure img{aspect-ratio:16/10;object-position:62% 14%}
  body.page-events .hpanel-portrait{display:none}
}
/* fix 5: phone headlines at 46px so podcast, writing and stratus read in three lines */
@media(max-width:620px){body.page-podcast .hero h1,body.page-writing .hero h1,body.page-stratus .hero h1{font-size:46px}}
/* 2026-10-15: podcast and writing H1s ran to four lines (JUDGE-HEROES-3). Wider copy column and a
   capped H1 on these two pages only, desktop only, so each reads in three lines with the gold phrase whole. */
@media(min-width:981px){
  body.page-podcast .hero--panel .hero-grid,body.page-writing .hero--panel .hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  body.page-podcast .hero--panel h1{font-size:clamp(3rem,4.6vw,4.1rem)}
}
@media(min-width:981px){body.page-writing .hero--panel h1{font-size:clamp(3rem,4.9vw,4.4rem)}body.page-writing .hero--panel h1 .gold{display:block}}
/* ===== Round 6 (JUDGE-HEROES-5), 2026-10-15 ===== */
/* G6: proof strip fills the empty lower-left of panel heroes. Desktop only; phones keep the short stack. */
.hero-proof{display:none}
@media(min-width:981px){
  .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line);max-width:620px}
  .hero-proof li{padding:0 18px 0 0;border-right:1px solid var(--line);margin-right:18px}
  .hero-proof li:last-child{border-right:0;margin-right:0}
  .hero-proof b{display:block;font:800 2.35rem/1 var(--disp);color:var(--gold);letter-spacing:.01em;margin-bottom:8px}
  .hero-proof span{display:block;font:700 .74rem/1.35 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
  body.page-writing .hero--panel h1{font-size:clamp(3rem,4.5vw,4rem)}
}
/* G7: the phone book is shown whole, never cropped or faded. */
.hero-phoneart .bookshot img{aspect-ratio:auto!important;width:100%!important;height:auto!important;object-fit:contain!important;-webkit-mask-image:none!important;mask-image:none!important}
/* Documentary crops: keep the plaque and backdrop words whole; captions legible. */
body.page-events .hpanel-portrait--doc img{aspect-ratio:1.12/1;object-fit:cover;object-position:68% 40%}
body.page-stratus .hpanel-portrait--doc img{aspect-ratio:1/1;object-fit:cover;object-position:12% 70%}
.hpanel-portrait figcaption{font-size:.8rem;color:rgba(242,238,229,.72)}
/* Why: the book centered under the quote, a little larger. */
@media(min-width:981px){body.page-about-why-i-wrote-it .hpanel-book{width:280px;margin:30px auto 0}}
/* Contact desktop: crop the dark left margin of the source and run the photo to the form's height. */
@media(min-width:981px){
  body.page-contact .hero--withform .hero-art{align-self:stretch;display:flex}
  body.page-contact .hero--withform .hero-art figure{display:flex;width:100%;max-width:none;height:100%}
  body.page-contact .hero--withform .hero-art figure img{height:100%;min-height:560px;aspect-ratio:auto;object-fit:cover;object-position:68% 26%}
}
/* About: the gray studio backdrop dies inside the frame instead of reading as a gray box; tighter top. */
body.page-about .hero .hero-art--photo figure{position:relative}
body.page-about .hero .hero-art--photo figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 58% at 54% 46%,transparent 52%,color-mix(in srgb,var(--bg) 62%,transparent) 82%,color-mix(in srgb,var(--bg) 88%,transparent) 100%)}
body.page-about .hero .hero-art--photo figure img{filter:brightness(.95) contrast(1.05)}
@media(min-width:981px){body.page-about .hero .hero-grid{padding-top:48px!important}}
@media(max-width:980px){body.page-about .hero .hero-art--photo figure img{object-position:50% 10%}}
/* Speaking desktop: crop the dark stage floor so the panelists fill the frame. */
@media(min-width:981px){body.page-speaking .hero .hero-art--stage figure img{aspect-ratio:4/4.2;object-position:50% 35%}}
/* Podcast phone: keep the gold line on one line. */
@media(max-width:620px){body.page-podcast .hero h1 .gold{font-size:40px;white-space:nowrap}}
/* Book: no widow in the hero paragraph. */
.hero--book .sub p,.hero--book .sub{text-wrap:pretty}
@media(min-width:981px){.hero--book .hero-copy .sub{max-width:29em}}
@media(min-width:981px){body.page-about .hero .hero-art--photo figure{max-width:600px}}
/* ---- Round 7 (JUDGE-HEROES-6), 2026-10-15. Layout, crop, type only; photos are accepted as they are. ---- */
/* Podcast phone: the gold line wraps on its own again; at 37px it still fits one line inside the 20px gutter. */
@media(max-width:620px){body.page-podcast .hero h1 .gold{font-size:37px;white-space:normal}}
/* Proof strip labels and panel captions: 11px at 70 percent, readable. */
@media(min-width:981px){.hero-proof span{font-size:11px;line-height:1.45;opacity:.72;color:var(--ink)}}
.hpanel-portrait figcaption{font:700 11px/1.45 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.7}
/* Home desktop: larger H1, photo runs the height of the form (the contact pattern). */
@media(min-width:981px){
  body.page-home .hero--withform h1{font-size:clamp(3.4rem,4.7vw,4.35rem)}
  body.page-home .hero--withform .hero-art--library{align-self:stretch;display:flex;padding-top:6px}
  body.page-home .hero--withform .hero-art--library figure{display:flex;width:100%;height:100%}
  body.page-home .hero--withform .hero-art--library figure img{height:100%;min-height:560px;aspect-ratio:auto;object-fit:cover;object-position:62% 40%}
}
/* Stratus: keep the whole plaque, "500" included. */
body.page-stratus .hpanel-portrait--doc img{aspect-ratio:4/5;object-position:50% 50%}
/* Events desktop: 4:3 so the email form sits inside the first screen. */
@media(min-width:981px){body.page-events .hpanel-portrait--doc img{aspect-ratio:4/3;object-position:60% 35%}}
/* About: phone crop keeps hair and chin; desktop vignette dies inside the head; no empty band under the buttons. */
@media(max-width:980px){body.page-about .hero .hero-art--photo figure img{aspect-ratio:4/3;object-position:50% 0%}}
@media(min-width:981px){
  body.page-about .hero .hero-art--photo figure::after{background:radial-gradient(ellipse 40% 52% at 55% 42%,transparent 50%,color-mix(in srgb,var(--bg) 70%,transparent) 76%,var(--bg) 96%)}
  body.page-about .hero .hero-art--photo figure img{filter:brightness(.85) contrast(1.06)}
  body.page-about .hero .hero-grid{min-height:0!important;padding-bottom:40px!important;align-items:center}
}
/* Contact phone: off the dark left band of the source. */
@media(max-width:980px){body.page-contact .hero .hero-art--photo figure img{object-position:68% 22%;transform:scale(1.16);transform-origin:92% 30%}body.page-contact .hero .hero-art--photo figure{overflow:hidden}}
/* Why: no closing rule under the book. Writing: two items in the hero list so nothing is cut at 900. */
@media(min-width:981px){body.page-about-why-i-wrote-it .hpanel::after{display:none}body.page-writing .hpanel--index li:nth-child(n+3){display:none}}
/* Round 8 (JUDGE-HEROES-7). */
/* Speaking: hero to content height so the proof band follows the copy (about pattern); square crop off the stage floor. */
@media(min-width:981px){
  body.page-speaking .hero .hero-grid{min-height:0!important;padding-bottom:40px!important;align-items:center}
  body.page-speaking .hero .hero-art--stage figure img{aspect-ratio:1/1;object-position:50% 30%}
}
body.page-speaking .hero .sub{text-wrap:pretty}
/* About: tighter halo and a darker plate on both viewports. */
body.page-about .hero .hero-art--photo figure img{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 55% 42%,#000 55%,transparent 90%);mask-image:radial-gradient(ellipse 60% 70% at 55% 42%,#000 55%,transparent 90%);-webkit-mask-composite:source-over;mask-composite:add;filter:brightness(.85) contrast(1.06)}
/* Book: one rule above the subtitle, no price footnote in the desktop hero; a bigger book on phones. */
@media(min-width:981px){
  body.page-books-take-my-advice-im-not-using-it .hero-subtitle::after{display:none}
  body.page-books-take-my-advice-im-not-using-it .hero .buy-formats span{display:none}
}
@media(max-width:980px){body.page-books-take-my-advice-im-not-using-it .hero--book .bookshot--lg{width:220px}}
/* Two-cell strips span the full width instead of leaving an empty third. */
@media(min-width:981px){.hero-proof{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
/* Podcast phone: the eyebrow sits with its headline, under the photo. */
@media(max-width:980px){
  body.page-podcast .hero-copy{display:flex;flex-direction:column}
  body.page-podcast .hero-copy>.hero-phoneart{order:-1;margin-bottom:18px}
}
/* Why: no closing gold rule under the quote on any viewport. */
body.page-about-why-i-wrote-it .hpanel::after{display:none}
@media(max-width:980px){body.page-about-why-i-wrote-it .hpanel{padding-bottom:0}}
/* Contact phone: feather the right edge like the other phone photos. */
@media(max-width:980px){body.page-contact .hero .hero-art--photo figure{-webkit-mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%)}}
/* Crops: balance both edges of the shared awards wall. */
@media(min-width:981px){
  body.page-events .hpanel-portrait--doc img{object-position:55% 35%}
  body.page-media .hpanel-portrait--doc img{object-position:45% 30%}
}
/* Round 9 (JUDGE-HEROES-8). */
/* About: the gray studio halo sat between the head and the old vignette's start. Pull the dark plate
   in to the hair line on both viewports; the face and collar stay in the clear center. */
body.page-about .hero .hero-art--photo figure{position:relative}
body.page-about .hero .hero-art--photo figure::after{background:radial-gradient(ellipse 31% 45% at 47% 42%,transparent 50%,color-mix(in srgb,var(--bg) 66%,transparent) 68%,var(--bg) 90%)!important}
body.page-about .hero .hero-art--photo figure img{filter:brightness(.85) contrast(1.08)}
/* Why phone: a book that reads as a book, a shorter quote, both CTAs in the first screen. */
@media(max-width:980px){
  body.page-about-why-i-wrote-it .hero-phoneart .bookshot{width:170px}
  body.page-about-why-i-wrote-it .hero .hero-grid{padding-top:16px}
  body.page-about-why-i-wrote-it .hero h1{font-size:40px}
  body.page-about-why-i-wrote-it .hero .hpanel{padding-top:14px}
  body.page-about-why-i-wrote-it .hero .hero-ctas,body.page-about-why-i-wrote-it .hero .cta-row{margin-top:20px}
  body.page-about-why-i-wrote-it .hpanel--dedication blockquote{font-size:28px;line-height:1.28}
}
/* Contact phone: feather every edge, like the other phone photos. */
@media(max-width:980px){body.page-contact .hero .hero-art--photo figure{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 85%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 85%,transparent 100%);mask-composite:intersect}}
/* ==== FULL-BLEED HERO PHOTO (Mike 2026-10-15, replacing every all-sides feather and oval vignette).
   Desktop: the photo is the right side of the hero, from under the header to the hero's bottom
   border and off the right edge of the screen. One soft edge only: the inner (left) side, where the
   photo emerges from the page behind the text column, plus a gentle fade into the next section. Every
   other edge is the screen or the section edge, so it is crisp. Phone: full width, edge to edge, one
   fade at the bottom into the page, headline below. Masks fade to the page's own background, so all
   six schemes work; the warm ambient light uses --gold at low opacity. ==== */
@media(min-width:981px){
  body .hero .hero-art--photo{position:absolute!important;top:0;bottom:0;right:0;left:calc(50% + 70px);margin:0!important;z-index:0;max-width:none!important;min-height:0!important;padding:0!important;align-self:auto!important}
  body .hero .hero-art--photo::before{content:"";position:absolute;z-index:-1;left:-22%;top:8%;bottom:8%;width:60%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 9%,transparent),transparent)}
  body .hero .hero-art--photo figure{position:absolute!important;inset:0!important;width:auto!important;max-width:none!important;height:auto!important;margin:0!important;display:block!important;overflow:hidden;-webkit-mask-image:none!important;mask-image:none!important}
  body .hero .hero-art--photo figure::after{display:none!important}
  body .hero .hero-art--photo figure img{position:absolute!important;inset:0;width:100%!important;height:100%!important;min-height:0!important;max-width:none!important;aspect-ratio:auto!important;object-fit:cover!important;transform:none!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to top,transparent 0,#000 10%)!important;-webkit-mask-composite:source-in!important;
    mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to top,transparent 0,#000 10%)!important;mask-composite:intersect!important}
  body .hero:has(.hero-art--photo) .hero-copy{position:relative;z-index:1}
  /* Home library photo: crop from the left so the face sits clear of the soft edge and the half-cut book at the photo's right edge falls outside the frame. */
  body .hero .hero-art--library figure img{object-position:0% 30%!important}
  /* The small book on the home photo: inside the photo, just past the soft edge, on the table. */
  body .hero .hero-art--photo .hero-book{left:30%!important;right:auto!important;bottom:34px!important;z-index:2}
  /* Podcast keeps its panel; its portrait loses the all-sides feather and fades only at the foot. */
  figure.hpanel-portrait:not(.hpanel-portrait--doc) img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 14%)!important;mask-image:linear-gradient(to top,transparent 0,#000 14%)!important}
}
@media(max-width:980px){
  body .hero .hero-art--photo figure,body .hero .hero-phoneart{width:100vw!important;max-width:100vw!important;flex:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;-webkit-mask-image:none!important;mask-image:none!important;overflow:hidden}
  body .hero .hero-art--photo figure::after{display:none!important}
  body .hero .hero-art--photo figure img,body .hero .hero-phoneart>img{width:100%!important;max-width:none!important;transform:none!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)!important;-webkit-mask-composite:source-over!important;mask-composite:add!important}
}
/* Round 10 (JUDGE-HEROES-9), 2026-10-15.
   Phone: no strip of page color between the header and a full-bleed hero photo. */
@media(max-width:980px){
  body .hero--photo .hero-grid,body .hero--panel:has(.hero-phoneart) .hero-grid{padding-top:0!important}
  body .hero--panel .hero-phoneart{margin-top:0!important}
}
/* Light schemes: a dark photo faded linearly into a light page passes through gray. An eased,
   wider inner fade and a softer foot keep the seam clean on ivory, paper and linen. */
@media(min-width:981px){
  :root[data-theme="ivory"] body .hero .hero-art--photo figure img,:root[data-theme="paper"] body .hero .hero-art--photo figure img,:root[data-theme="linen"] body .hero .hero-art--photo figure img{
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.08) 10%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.75) 34%,#000 44%),linear-gradient(to top,transparent 0,rgba(0,0,0,.4) 5%,#000 14%)!important;-webkit-mask-composite:source-in!important;
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.08) 10%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.75) 34%,#000 44%),linear-gradient(to top,transparent 0,rgba(0,0,0,.4) 5%,#000 14%)!important;mask-composite:intersect!important}
  /* object-position alone cannot move this photo sideways (it crops top and bottom here), so it runs 3% wider than its box and the right-edge sliver of a fourth person falls outside the frame. */
  body.page-speaking .hero .hero-art--photo figure img{object-position:42% 30%!important;width:103%!important;right:auto!important}
  body.page-contact .hero .hero-art--photo figure img{object-position:74% 26%!important}
}
@media(max-width:980px){
  :root[data-theme="ivory"] body .hero .hero-art--photo figure img,:root[data-theme="paper"] body .hero .hero-art--photo figure img,:root[data-theme="linen"] body .hero .hero-art--photo figure img,
  :root[data-theme="ivory"] body .hero .hero-phoneart>img,:root[data-theme="paper"] body .hero .hero-phoneart>img,:root[data-theme="linen"] body .hero .hero-phoneart>img{
    -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.18) 90%,transparent 100%)!important;mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.18) 90%,transparent 100%)!important}
}
/* Round 11 (JUDGE-HEROES-10), 2026-10-15.
   Home, light schemes only: a dark library photo faded into a light page always passes through gray,
   however the curve is eased. So on ivory, paper and linen the home photo stops fading and takes a
   crisp edge with a thin gold rule: a deliberate dark plate set into the page, with no smoke at the
   seam and no haze at the foot. The dark default keeps the soft edge, where the fade has no gray. */
@media(min-width:981px){
  :root[data-theme="ivory"] body.page-home .hero .hero-art--photo figure img,:root[data-theme="paper"] body.page-home .hero .hero-art--photo figure img,:root[data-theme="linen"] body.page-home .hero .hero-art--photo figure img{-webkit-mask-image:none!important;mask-image:none!important}
  :root[data-theme="ivory"] body.page-home .hero .hero-art--photo::before,:root[data-theme="paper"] body.page-home .hero .hero-art--photo::before,:root[data-theme="linen"] body.page-home .hero .hero-art--photo::before{display:none}
  :root[data-theme="ivory"] body.page-home .hero .hero-art--photo::after,:root[data-theme="paper"] body.page-home .hero .hero-art--photo::after,:root[data-theme="linen"] body.page-home .hero .hero-art--photo::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);z-index:1}
}
/* Speaking phone: the photo runs 6% wider, centered, so the white sleeve of a fourth person at the right
   edge falls outside the frame while the woman on the right stays whole. */
@media(max-width:980px){
  body.page-speaking .hero .hero-art--photo figure img{width:106%!important;max-width:none!important;margin-left:-3%!important}
}
/* ── 2026-10-15: career rail (About), long-read layout (library pages), sample chapter rail ── */
.tl{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:44px;position:relative}
.tl-item{position:relative;padding:34px 22px 0 0;min-width:0}
.tl-item::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,var(--gold-lo),var(--gold))}
.tl-item:nth-child(5n)::before{right:22px}
.tl-dot{position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--gold)}
.tl-item--now .tl-dot{background:var(--gold);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 22%,transparent)}
.tl-year{font:800 1.55rem/1 var(--disp);color:var(--gold);margin:0 0 10px;letter-spacing:.01em}
.tl-role{font:700 1.02rem/1.15 var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);margin:0 0 8px}
.tl-line{font-size:.95rem;line-height:1.5;color:var(--soft);margin:0}
@media(max-width:980px){
  .tl{grid-template-columns:1fr;row-gap:0;margin-top:26px;padding-left:28px}
  .tl-item::before{display:none}
  .tl::before{content:"";position:absolute;left:7px;right:auto;top:6px;bottom:30px;width:2px;height:auto;background:linear-gradient(180deg,var(--gold-lo),var(--gold) 60%,var(--gold-hi))}
  .tl-item{padding:0 0 26px 0;min-width:0}
  .tl-dot{left:-28px;top:4px}
  .tl-year{font-size:1.35rem;margin-bottom:6px}
}
.lr{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;max-width:1080px}
.lr-main{order:1;max-width:680px}
.lr-aside{order:2;position:sticky;top:96px;background:var(--bg3);border:1px solid var(--line2,var(--line));border-top:3px solid var(--gold);border-radius:4px;padding:22px 22px 18px}
.lr-time{font:700 .78rem/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.lr-aside .kicker{margin-bottom:12px}
.lr-points{margin:0;padding:0;list-style:none;counter-reset:lr}
.lr-points li{counter-increment:lr;position:relative;padding:0 0 12px 34px;margin:0 0 12px;border-bottom:1px solid var(--line);font-size:.96rem;line-height:1.45;color:var(--ink)}
.lr-points li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.lr-points li::before{content:counter(lr,decimal-leading-zero);position:absolute;left:0;top:1px;font:800 .95rem/1 var(--disp);color:var(--gold)}
@media(max-width:980px){.lr{grid-template-columns:1fr;gap:28px}.lr-aside{order:0;position:static}}
.chaprail{display:none}
@media(min-width:1380px){
  .chaprail{display:block;position:fixed;left:24px;top:50%;transform:translateY(-50%);width:200px;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .chaprail.is-on{opacity:1;pointer-events:auto}
  .chaprail-k{font:700 .74rem/1 var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
  .chaprail ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line2,var(--line))}
  .chaprail a{display:block;padding:9px 0 9px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted)}
  .chaprail a:hover{color:var(--ink)}
  .chaprail a.is-current{border-left-color:var(--gold);color:var(--ink)}
  .chaprail-n{display:block;font:700 .72rem/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
  .chaprail-t{display:block;font-size:.88rem;line-height:1.3}
  .chaprail-m{display:block;font-size:.74rem;color:var(--muted);margin-top:3px}
}
@media(prefers-reduced-motion:reduce){.chaprail{transition:none}}
.tl-item:last-child::before{display:none}

/* HOME HERO C, "Next event" (Mike 2026-10-15). Shown only when the edge sets html[data-hero="events"]. */
html:not([data-hero="events"]) .hero-variant--events,html[data-hero="events"] .hero-variant--library{display:none}
.hero .hero-art--panelphoto{position:relative;flex-direction:column;align-items:stretch;justify-content:flex-start}
.hero .hero-art--photo.hero-art--panelphoto figure{max-width:none;margin:0}
.hero .hero-art--photo.hero-art--panelphoto figure img{aspect-ratio:5/4;max-height:none;object-fit:cover;object-position:62% 62%;width:100%;height:auto}
.hero-events{margin-top:-64px;margin-left:18px;margin-right:18px;position:relative;background:var(--field,#0E0E12);border:1px solid rgba(207,169,72,.45);border-radius:10px;padding:16px 18px 14px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.hero-events-label{font:600 11px/1.2 var(--sans,Arial),sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#CFA948);margin:0 0 8px}
.hero-events-list{list-style:none;margin:0;padding:0}
.hero-events-list li+li{border-top:1px solid rgba(255,255,255,.1)}
.hero-events-list a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:8px 0;text-decoration:none;color:inherit}
.he-date{grid-row:span 2;font:400 17px/1.05 "Bebas Neue",Arial,sans-serif;letter-spacing:.04em;color:var(--gold,#CFA948);min-width:92px;padding-top:2px}
.he-name{font-weight:600;line-height:1.25}
.he-where{font-size:.86em;opacity:.72}
.hero-events-list a:hover .he-name{text-decoration:underline}
.hero-events-none{display:none}
.hero-events.is-empty .hero-events-list{display:none}
.hero-events.is-empty .hero-events-none{display:block}
.hero-events.is-empty .hero-events-label::after{content:" · Book him for yours"}
.hero-events-more{display:inline-block;margin-top:6px;font-size:.9em}
@media(max-width:980px){.hero-events{margin:-28px 8px 0}.he-date{min-width:84px;font-size:16px}}
@media(min-width:981px){.hero .hero-art--panelphoto{align-self:start;padding-top:8px}.hero .hero-art--photo.hero-art--panelphoto figure img{aspect-ratio:1/1}.hero-art--panelphoto .hero-events{position:absolute;left:28px;right:28px;bottom:0;margin:0}}