:root{--ink:#13181d;--clay:#8f4d3f;--sand:#d8a066;--cream:#faf7f3;--line:#e6ded7;--mut:#6f6861;--sub:#5f5b54;--bg:#fff;--surface:#fff;--hero-base:#fbf8f4;--text:#13181d;--qink:#2b2723;--band-bg:#13181d;--btn-bg:#13181d;--grain-op:0;color-scheme:light}
*{box-sizing:border-box}html,body{overflow-x:clip}img{max-width:100%}section,header,nav{max-width:100%}
body{margin:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;font-size:16px}
.mockbar{background:var(--sand);color:var(--ink);font-size:12.5px;font-weight:700;text-align:center;padding:8px 14px;letter-spacing:.06em}
.mockbar a{color:var(--ink)}
nav.site{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 6vw;border-bottom:1px solid var(--line);background:var(--surface)}
nav.site img{height:48px}
nav.site .links{display:flex;gap:22px;font-size:13.5px;font-weight:600;flex-wrap:wrap}
nav.site a{color:var(--text);text-decoration:none}

/* HERO: warm light stage, Kevin cutout right, message left */
.hero{position:relative;overflow:hidden;background:var(--hero-base);border-bottom:1px solid var(--line)}
.hero .in{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:20px;padding:0 6vw}
/* The cutout's drop-shadow filter opens a stacking context, which paints above plain in-flow text —
   so any h1 overflow ran UNDER Kevin rather than over him. Copy wins the paint order. */
.hero .copy{padding:84px 0 96px;position:relative;z-index:2}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--clay);margin:0 0 16px}
.hero h1{font-family:Lora,Georgia,serif;font-size:clamp(20px,2.9vw,40px);font-weight:700;margin:0;line-height:1.14;letter-spacing:.02em;white-space:nowrap}
.hero h1 .pipe{color:var(--clay);font-weight:400;padding:0 6px}
.mbr{display:none}
/* nowrap h1 makes min-content = the whole line, which blows out the hero grid track and pushes
   content past the viewport on mobile. min-width:0 lets the track shrink back to the container. */
.hero .in>*{min-width:0}
.mbr{display:none}
.hero .enc{margin:22px 0 0;max-width:480px;color:var(--sub);font-size:17px}
.hero .enc em{font-family:Lora,Georgia,serif;color:var(--text)}
.cta{display:inline-block;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 28px;border-radius:10px;margin:30px 12px 0 0;transition:transform .18s ease,box-shadow .18s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(19,24,29,.18)}
.cta.ghost{background:transparent;color:var(--text);border:1.5px solid var(--text)}
.cta.ghost.light{color:#fff;border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.04)}
.cta.ghost.light:hover{box-shadow:0 8px 22px rgba(255,255,255,.10)}
.hero .figure{align-self:end;display:flex;align-items:flex-end;justify-content:center}
.hero .figure img{width:min(340px,32vw);display:block;filter:drop-shadow(0 18px 34px rgba(19,24,29,.28))}

section{padding:70px 6vw}
.inner{max-width:1080px;margin:0 auto}.center{text-align:center}
h2{font-family:Lora,Georgia,serif;font-size:clamp(24px,3.3vw,36px);font-weight:700;margin:0 0 10px;letter-spacing:-.005em;overflow-wrap:break-word}
.rule{width:56px;height:3px;background:var(--clay);margin:16px auto 0}.rule.left{margin-left:0}

/* Vision: photo-backed pull quote */
.vision{position:relative;background:url('img/asset-1705.jpeg') center/cover no-repeat;padding:0}
.vision .scrim{background:linear-gradient(rgba(19,24,29,.80),rgba(19,24,29,.86));padding:88px 6vw}
.vision blockquote{max-width:720px;margin:0 auto;text-align:center;color:#fff;font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(20px,2.6vw,27px);line-height:1.55}
.vision cite{display:block;margin-top:18px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sand)}

.triad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:40px}
.tcard{border:1px solid var(--line);border-radius:14px;padding:30px 28px 26px;text-align:left;background:var(--surface)}
/* margin is written in full (not just margin-bottom): the kicker became a core paragraph so Kevin can
   edit it, and a <p> would otherwise inherit the UA's 1em top margin the old <div> never had. */
.tcard .k{font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);line-height:1.1;margin:0 0 10px;text-wrap:balance;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
/* `.center .wp-block-group{margin-block:0}` (0,2,0) outranks `.triad{margin-top:40px}` (0,1,0) and
   would silently flatten the grid's top margin — the same trap that cost .pathgrid/.mediagrid theirs.
   Restore at HIGHER specificity, never an equal-specificity tie decided by source order. */
.triad.wp-block-group.is-layout-flow{margin-top:40px}
.tcard.wp-block-group>*{margin-block-start:0}
/* WP's `.is-layout-flow > :last-child{margin-block-end:0}` (0,2,0) strips the card's closing
   paragraph of the 18px it had as a plain <div> child, shortening every card. Restore above it. */
.tcard.wp-block-group>p:last-child{margin-block-end:18px}
.tcard p{color:var(--sub);font-size:15px;margin:0 0 18px;line-height:1.55}
.tcard a{font-weight:700;font-size:13.5px;letter-spacing:.02em;color:var(--clay);text-decoration:none}

.band{background:var(--band-bg);color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;max-width:1080px;margin:0 auto}
.split .art{border-radius:14px;overflow:hidden;border-bottom:3px solid var(--clay);background:#000}
.split .art img{width:100%;display:block}
.band .eyebrow{color:var(--sand)}
.band h2{color:#fff}
.band ul{margin:16px 0 24px;padding-left:20px;color:#cfc9c2;font-size:15px}
.band li{margin:7px 0}
.band .revv{height:52px;width:auto;display:block;margin-bottom:14px;opacity:.95}
.cta.sand{background:var(--sand);color:var(--ink);margin:0}

.bookband{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bookband .split{gap:60px}
.bookshot{display:flex;justify-content:center}
.bookshot img{width:min(300px,60vw);border-radius:6px;box-shadow:0 30px 60px rgba(19,24,29,.30),0 6px 16px rgba(19,24,29,.18);transform:rotate(-2deg)}
.bookband ul{margin:16px 0 24px;padding-left:20px;color:var(--sub);font-size:15px}
.bookband li{margin:7px 0}
.btn2{display:inline-block;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:14px 26px;border-radius:10px}
.revlink{display:block;margin-top:20px;font-size:23px;font-weight:700;color:var(--clay);text-decoration:underline;text-underline-offset:4px}
.revlink:hover{opacity:.72}
.scripture{max-width:640px;margin:16px auto 0;text-align:center;font-style:italic;color:var(--sub);font-size:18px;line-height:1.5}
.scripture cite{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--clay);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.tslogan{max-width:680px;margin:20px auto 6px;text-align:center;font-weight:700;color:var(--clay);font-size:22px;line-height:1.4}
.tcat{margin:46px 0 0;text-align:center;font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.tnote{text-align:center;color:var(--mut);font-size:13.5px;margin:34px auto 0;max-width:600px}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:38px}
.q{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 26px 20px;text-align:left}
.q p{font-family:Lora,Georgia,serif;font-style:italic;font-size:15.5px;color:var(--qink);margin:0 0 14px}
.q b{font-size:13px}.q small{color:var(--mut)}

.final{position:relative;background:url('img/kevin-portrait.jpg') center 22%/cover no-repeat;padding:0;text-align:center}
.final .scrim{background:linear-gradient(rgba(19,24,29,.82),rgba(19,24,29,.88));padding:92px 6vw 70px;color:#fff}
.final h2{color:#fff}
.final p{color:#d8d3cc;margin:14px 0 0}
.final .sig{height:64px;margin:38px auto 0;display:block;opacity:.92}
.final a.small{display:block;margin-top:14px;color:#b8b1a8;font-size:13.5px}
footer{padding:34px 6vw;text-align:center;color:var(--mut);font-size:13px;border-top:1px solid var(--line)}

@media(max-width:860px){
  .hero .in{grid-template-columns:1fr}
  .hero .copy{padding:56px 0 8px;text-align:center}
  /* .herobtns is a wp:buttons FLEX container, so the text-align above cannot reach it — flex items
     only move with justify-content. Same bridge as .final .wp-block-buttons. (Kevin, Jul-27: the
     CTAs sat left on his phone while the emulator looked fine.) */
  .hero .herobtns{justify-content:center}
  .hero .enc{margin-left:auto;margin-right:auto}
  .hero .figure img{width:min(235px,58vw)}
  .split{grid-template-columns:1fr}
  .cta{margin:26px 6px 0}
}
@media(max-width:640px){
  
  .eyebrow{letter-spacing:.18em}
  .vision{background:var(--ink)}
  .vision .scrim{background:linear-gradient(rgba(19,24,29,.35),rgba(19,24,29,.35));padding:64px 22px}
  .vision blockquote{font-size:19px}
  .hero .copy{padding-left:4px;padding-right:4px}
  section{padding:58px 6vw}
  .final{background:var(--ink)}
  .final .scrim{background:none;padding:70px 22px 56px}
  .hero .copy{text-align:center!important}
  .hero h1{text-align:center;font-size:clamp(14px,4.2vw,28px);letter-spacing:0;line-height:1.22;white-space:nowrap}
  .hero h1 .pipe{padding:0 2px}
  /* ONE line on mobile — Andrew, 2026-07-29, restating his original Task-4 spec ("three words,
     pipe-separated, ONE line"). A previous pass followed the mockup's two-line treatment instead;
     the mockup loses to a direct instruction. Measured before restoring: the single line fits at
     every phone width in every fallback font — worst case Georgia at 320px still leaves 32px spare,
     and horizontal scroll is 0 throughout — so nothing here can push the h1 under Kevin's cutout.
     The spans stay in the markup and inert, so two lines remain one CSS flip away. */
  .hero h1 .p2{display:inline}
  .hero h1 .mbr{display:none}
  .band .revv{display:none}
  h2{font-size:clamp(22px,6vw,28px)}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---- wave-1 shared components ---- */
.hero-lite{position:relative;overflow:hidden;background:var(--hero-base);border-bottom:1px solid var(--line);text-align:center;padding:84px 6vw 74px}
.hero-lite h1{font-family:Lora,Georgia,serif;font-size:clamp(30px,4.4vw,50px);font-weight:700;margin:0;line-height:1.1;letter-spacing:-.01em}
.hero-lite p.sub{max-width:640px;margin:18px auto 0;color:var(--sub);font-size:16.5px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px;margin-top:40px}
.pcard{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;text-align:center;display:flex;flex-direction:column}
.pcard .ph{background:var(--cream);padding:22px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;min-height:0}
.pcard .ph img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.pcard .pb{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-family:Lora,Georgia,serif;font-size:16.5px;margin:0;line-height:1.3}
.pcard .price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.pcard .price s{color:var(--mut);font-weight:400;margin-left:6px}
.pcard .atc{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:0 22px;border-radius:999px;align-self:center}
.pathgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.path{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;text-align:center}
.path img{width:100%;height:230px;object-fit:contain;background:var(--cream);padding:14px;box-sizing:border-box}
.path .pb{padding:20px 24px 26px}
.path .k{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.path h3{font-family:Lora,Georgia,serif;font-size:21px;margin:8px 0 6px;color:var(--text)}
.path p{color:var(--sub);font-size:14px;margin:0 0 16px}
.heroimgband{background:var(--ink);text-align:center;padding:0}
.heroimgband img{width:100%;max-width:900px;display:block;margin:0 auto}
@media(max-width:760px){.pathgrid{grid-template-columns:1fr}}

/* ---- wave-2 components ---- */
.lightstage{position:relative;overflow:hidden;background:var(--hero-base);border-bottom:1px solid var(--line)}
.figsplit{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center;max-width:1120px;margin:0 auto}
.figsplit .pic{border-radius:14px;overflow:hidden;border-bottom:3px solid var(--clay);background:var(--cream)}
.figsplit .pic img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.ah1{font-family:Lora,Georgia,serif;font-size:clamp(30px,4.3vw,46px);font-weight:700;margin:0 0 4px;line-height:1.12}
.atag{font-family:Lora,Georgia,serif;font-style:italic;color:var(--clay);font-size:18px;margin:0 0 18px}
.figsplit p.body{color:var(--sub);font-size:15.5px;margin:0 0 14px}
.books{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.books span{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;color:var(--text);background:var(--cream)}
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:40px;text-align:left}
.mcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.mcard .mimg{aspect-ratio:16/10;background-color:var(--cream);background-position:center;background-size:cover;background-repeat:no-repeat}
.mcard .mb{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mcard .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.mcard h3{font-family:Lora,Georgia,serif;font-size:18px;margin:8px 0 8px;line-height:1.25}
.mcard p{color:var(--sub);font-size:14px;margin:0 0 16px}
.mcard a{margin-top:auto;font-weight:700;font-size:13px;color:var(--clay);text-decoration:none}
.videowrap{max-width:820px;margin:34px auto 0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 44px rgba(19,24,29,.14)}
.videowrap .fr{position:relative;padding-top:56.25%}
.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcap{text-align:center;color:var(--mut);font-size:13.5px;margin:14px auto 0;max-width:640px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
.duo .card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.duo .card .top{aspect-ratio:16/9;background-color:var(--cream);background-position:center;background-size:cover;background-repeat:no-repeat}
.duo .card .bd{padding:24px 26px 28px}
.duo .k{font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--clay)}
.duo h3{font-family:Lora,Georgia,serif;font-size:22px;margin:8px 0 8px}
.duo p{color:var(--sub);font-size:14.5px;margin:0 0 16px}
.evhero{position:relative;background-color:var(--ink);background-position:center;background-size:cover;background-repeat:no-repeat;padding:0}
.evhero .scrim{background:linear-gradient(rgba(19,24,29,.62),rgba(19,24,29,.82));padding:104px 6vw 96px;text-align:center;color:#fff}
.evhero h1{font-family:Lora,Georgia,serif;font-size:clamp(32px,5vw,54px);margin:0;line-height:1.08;color:#fff}
.evhero p{max-width:620px;margin:18px auto 0;color:#e6e1da;font-size:17px}
.evhero .eyebrow{color:var(--sand)}
.formcard{max-width:640px;margin:36px auto 0;border:1px solid var(--line);border-radius:16px;background:var(--cream);padding:34px 32px}
.formcard .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.formcard label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.formcard input,.formcard textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font:inherit;font-size:14px;background:var(--surface);color:var(--text)}
.formcard textarea{min-height:98px;margin-bottom:14px}
.formcard .send{display:inline-block;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 30px;border-radius:10px;border:0;cursor:pointer}
.formcard .send:hover{transform:translateY(-1px)}
/* Honeypot: off-screen rather than display:none — some bots skip hidden fields, and screen readers
   are told to ignore it via aria-hidden on the wrapper. */
.kd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Standalone CTA links became core paragraphs so Kevin can edit their words and URL. The paragraph is
   a transparent carrier: the anchor keeps its own class and its own margins (.cta has margin-top:30px),
   so the wrapper must contribute nothing of its own. */
.kd-formnote{max-width:640px;margin:24px auto -8px;padding:14px 18px;border-radius:12px;font-size:15px;text-align:center}
.kd-formnote.ok{background:#eaf3ec;border:1px solid #bcdcc6;color:#1f5133}
.kd-formnote.err{background:#f8f1e2;border:1px solid #e3d2ab;color:#7a5410}
[data-theme="dark"] .kd-formnote.ok{background:#1b2a20;border-color:#2f5540;color:#a8dcbb}
[data-theme="dark"] .kd-formnote.err{background:#2a2417;border-color:#584a2c;color:#e2c489}
@media(max-width:760px){.figsplit{grid-template-columns:1fr}.duo{grid-template-columns:1fr}.formcard .row{grid-template-columns:1fr}}

/* ---- wave-3 premium craft layer ---- */
:root{--ease:cubic-bezier(.32,.72,0,1)}
.pillbrow{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 15px;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:0 0 18px}
.bezel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:7px;box-shadow:0 24px 60px -30px rgba(19,24,29,.30),0 2px 6px rgba(19,24,29,.04);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.bezel:hover{transform:translateY(-4px);box-shadow:0 42px 82px -34px rgba(19,24,29,.40)}
.bezel>.core{background:var(--surface);border-radius:18px;box-shadow:inset 0 1px 1px rgba(255,255,255,.7);overflow:hidden;height:100%}
.cta .ic,.btn2 .ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.18);margin-left:11px;vertical-align:-6px;font-size:12px;transition:transform .5s var(--ease)}
.cta.sand .ic,.cta.ghost .ic,.btn2 .ic{background:rgba(19,24,29,.09)}
.cta:hover .ic,.btn2:hover .ic{transform:translate(2px,-1px)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:44px;text-align:left}
.post .core{display:flex;flex-direction:column;height:100%}
.post .thumb{aspect-ratio:16/10;background-color:var(--cream);background-position:center;background-size:cover;background-repeat:no-repeat}
.post .pb{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post .date{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.post h3{font-family:Lora,Georgia,serif;font-size:20px;margin:8px 0 8px;line-height:1.25}
.post p{color:var(--sub);font-size:14px;margin:0 0 16px}
.post a.rd{margin-top:auto;font-weight:700;font-size:13px;color:var(--clay);text-decoration:none}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:44px;text-align:left}
.qcard .core{padding:28px 28px 24px;display:flex;flex-direction:column;height:100%}
.qcard .mark{font-family:Lora,Georgia,serif;font-size:46px;line-height:.5;color:var(--sand);margin:6px 0 10px}
.qcard p{font-family:Lora,Georgia,serif;font-style:italic;font-size:15.5px;color:var(--qink);margin:0 0 16px}
.qcard .who{margin-top:auto;font-size:13px;font-weight:700}
.qcard .who small{display:block;color:var(--mut);font-weight:400;margin-top:2px}
.qbig{max-width:840px;margin:42px auto 0}
.qbig .core{padding:46px 48px}
.qbig p{font-family:Lora,Georgia,serif;font-style:italic;font-size:clamp(19px,2.4vw,25px);line-height:1.5;color:#20242a;margin:0 0 18px}
.qbig .who{font-size:13px;font-weight:700}.qbig .who small{color:var(--mut);font-weight:400}
.affgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px;margin-top:44px;text-align:center}
.aff .core{padding:30px 26px 28px;display:flex;flex-direction:column;align-items:center;height:100%}
.aff .logo{height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.aff .logo img{max-height:78px;max-width:160px;width:auto}
.aff h3{font-family:Lora,Georgia,serif;font-size:19px;margin:0 0 8px}
.aff p{color:var(--sub);font-size:14px;margin:0 0 18px}
.aff a{margin-top:auto;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);text-decoration:none}
.cform{max-width:600px;margin:42px auto 0}
.cform .core{padding:34px 34px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cform label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 6px}
.cform input,.cform textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;background:var(--cream);color:var(--ink)}
.cform textarea{min-height:110px;margin-bottom:14px}
.cform .send{display:inline-flex;align-items:center;background:var(--btn-bg);color:#fff;text-decoration:none;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;border-radius:10px}
@media(max-width:760px){.qbig .core{padding:30px 22px}.cform .row{grid-template-columns:1fr}}

/* ---- people-quote cards ---- */
.pquotes{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:42px;text-align:left}
.pq{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:26px 26px 24px;display:flex;flex-direction:column;flex:0 1 340px}
.pq .top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pq .top img{width:58px;height:58px;border-radius:999px;object-fit:cover;object-position:center top;border:2px solid var(--sand);flex:0 0 auto}
.pq .nm{font-size:14px;font-weight:800;line-height:1.25}
.pq .nm small{display:block;color:var(--mut);font-weight:400;font-size:12px;margin-top:3px}
.pq p{font-family:Lora,Georgia,serif;font-style:italic;font-size:15px;color:var(--qink);margin:0}
.pq.feat{flex:1 1 100%}
.pq.feat .top img{width:66px;height:66px}
.pq.feat p{font-size:16.5px}
@media(max-width:520px){.pq .top img{width:52px;height:52px}}

/* ---- warm atmosphere backgrounds (replaces muddy tan radial) ---- */
.hero-lite::before,.hero-lite::after,.hero::before,.hero::after,.lightstage::before,.lightstage::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.hero-lite::before,.hero::before,.lightstage::before{width:520px;height:520px;background:var(--clay);opacity:.10;top:-190px;right:-90px}
.hero-lite::after,.hero::after,.lightstage::after{width:440px;height:440px;background:var(--sand);opacity:.16;bottom:-170px;left:-80px}
.hero-lite>*{position:relative;z-index:1}.hero .in{position:relative;z-index:1}.lightstage .figsplit{position:relative;z-index:1}
.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:var(--clay);filter:blur(100px);opacity:.28;top:-230px;right:-150px;pointer-events:none;z-index:0}
.band>*{position:relative;z-index:1}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain-op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){
  .hero-lite::before,.hero::before,.lightstage::before{animation:orbA 24s ease-in-out infinite}
  .hero-lite::after,.hero::after,.lightstage::after{animation:orbB 28s ease-in-out infinite}
}
@keyframes orbA{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,22px)}}
@keyframes orbB{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,-20px)}}

/* ---- light / dark theme ---- */
:root[data-theme="dark"]{--bg:#161009;--surface:#211811;--hero-base:#1b130b;--text:#f3ece2;--qink:#e9e0d4;--band-bg:#100b06;--btn-bg:#8f4d3f;--clay:#d78b67;--cream:#241b12;--line:#3a2e22;--mut:#a2978b;--sub:#c3b8aa;--grain-op:.028;color-scheme:dark}
/* The mockup auto-switched to dark on a dark OS. Removed 2026-07-26 (Andrew): light is the
   default and dark is opt-in via the toggle. Keeping it would also have made the site dark for
   JS-disabled visitors while the toggle icon still said "switch to dark", and would have turned
   the block-editor canvas dark (add_editor_style ships this file into an iframe with no boot
   script). The :root[data-theme="dark"] palette above is what the toggle switches to. */
html{background:var(--bg);color-scheme:light dark}
.themetoggle{position:fixed;top:9px;right:12px;z-index:10001;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(19,24,29,.14);
  transition:transform .2s var(--ease,ease),background .3s,color .3s,border-color .3s}
.themetoggle:hover{transform:translateY(-2px)}
/* WP admin bar is fixed at top:0, z-index:99999 (32px desktop / 46px mobile) and would sit on
   top of the toggle, making it unclickable for Kevin and Andrew on every page while logged in. */
body.admin-bar .themetoggle{top:41px}

.themetoggle svg{width:19px;height:19px}
.themetoggle .ic-sun{display:none}
:root[data-theme="dark"] .themetoggle .ic-sun{display:block}
:root[data-theme="dark"] .themetoggle .ic-moon{display:none}

/* ---- grouped menu system ---- */
nav.site{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 6vw;border-bottom:1px solid var(--line);background:var(--surface);position:relative;z-index:100}
nav.site .brand{display:flex;align-items:center}
nav.site .brand img{height:46px;width:auto}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;flex:0 0 auto}
.navtoggle span{display:block;height:2px;width:20px;margin:0 auto;background:var(--text);transition:transform .25s var(--ease,ease),opacity .2s}
nav.site .links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
nav.site .links>a,.dropbtn{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;background:none;border:0;cursor:pointer;padding:11px 14px;min-height:42px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;line-height:1;letter-spacing:.01em}
nav.site .links>a:hover,.dropbtn:hover,.dropbtn:focus-visible{background:var(--cream)}
.drop{position:relative}
.drop .menu{position:absolute;top:calc(100% + 6px);left:0;min-width:216px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 44px -18px rgba(19,24,29,.30);z-index:120;flex-direction:column;gap:1px;display:none}
.drop.open>.menu{display:flex}@media(hover:hover) and (min-width:861px){.drop:hover>.menu,.drop:focus-within>.menu{display:flex}}
.drop .menu a{padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap}
.drop .menu a:hover{background:var(--cream);color:var(--clay)}
/* Blogs, nested inside Resources (Andrew, Aug 12): a labelled group, not a third-level
   flyout - full-size targets stay, only the eye sees the nesting. */
.drop .menu .mgroup{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0;padding:4px 0}
.drop .menu .mlabel{padding:6px 12px 2px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.drop .menu .mgroup a.msub{padding-left:22px}
.car{font-size:9px;color:var(--mut);transition:transform .2s var(--ease,ease)}
.drop:hover .car,.drop.open .car,.drop:focus-within .car{transform:rotate(180deg)}
.navcta{background:var(--clay)!important;color:#fff!important;padding:9px 20px!important;border-radius:999px;font-weight:700}
.navcta:hover{filter:brightness(1.08)}
@media(max-width:860px){
  /* fixed theme toggle owns the top-right corner: shift hamburger left of it, center toggle in the nav bar, keep mockbar text clear */
  nav.site{padding-right:66px}
  .themetoggle{top:14px}
  body.admin-bar .themetoggle{top:60px}
  .mockbar{padding:8px 60px}
  .navtoggle{display:inline-flex}
  nav.site .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 5vw 20px;box-shadow:0 22px 44px -20px rgba(19,24,29,.32);display:none}
  nav.site.open .links{display:flex}
  nav.site.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.site.open .navtoggle span:nth-child(2){opacity:0}
  nav.site.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav.site .links>a,.dropbtn{width:100%;justify-content:space-between;padding:12px 12px;font-size:15px}
  .drop{position:static}
  .drop .menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 14px;padding:2px 0 2px 10px;min-width:0;display:none}
  .drop.open .menu{display:flex}
  .drop .menu a{white-space:normal;font-size:14.5px}
  .navcta{text-align:center;justify-content:center;margin-top:6px}
}

/* a11y: visible focus ring everywhere */
a:focus-visible,button:focus-visible,.dropbtn:focus-visible,input:focus-visible,textarea:focus-visible,.cta:focus-visible,.btn2:focus-visible{outline:3px solid var(--sand);outline-offset:2px;border-radius:6px}
/* focus-visible ring marker */

/* ---- event + engagement layer ---- */
.evgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.evcard{display:flex;gap:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px;align-items:center;text-align:left;transition:transform .3s var(--ease,ease),box-shadow .3s var(--ease,ease)}
.evcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(19,24,29,.24)}
.evdate{flex:0 0 auto;text-align:center;background:var(--clay);color:#fff;border-radius:12px;padding:12px 14px;min-width:72px}
.evdate .mo{display:block;font-size:12px;font-weight:800;letter-spacing:.1em}
.evdate .dy{display:block;font-family:Lora,Georgia,serif;font-size:30px;font-weight:700;line-height:1.05}
.evbody h3{font-family:Lora,Georgia,serif;font-size:20px;margin:0 0 5px}
.evbody .when{font-size:13px;color:var(--clay);font-weight:700;margin:0}
.evbody .where{font-size:13.5px;color:var(--sub);margin:4px 0 12px}
.evbody a{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);text-decoration:none}
.pastgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin-top:36px;text-align:left}
.pastev{display:flex;gap:14px;align-items:baseline;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .25s}
.pastev:hover{border-color:var(--sand)}
.pastev .d{flex:0 0 auto;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);min-width:96px}
.pastev .n{font-weight:600;font-size:14px;color:var(--text)}
.pastev .l{display:block;font-size:12px;color:var(--sub);margin-top:2px;font-weight:400}
/* engaging card hover lifts */
.tcard,.pcard,.mcard{transition:transform .3s var(--ease,ease),box-shadow .3s var(--ease,ease)}
.tcard:hover,.pcard:hover,.mcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(19,24,29,.20)}
/* scroll-reveal (only when motion welcomed AND supported; forced-reduced-motion capture shows everything) */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  .fx-reveal{animation:fxUp linear both;animation-timeline:view();animation-range:entry 0% cover 20%}
  @keyframes fxUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}}
@media(max-width:760px){.evgrid{grid-template-columns:1fr}.pastgrid{grid-template-columns:1fr}.pastev{flex-wrap:wrap}.pastev .d{min-width:0}.evcard{padding:20px;gap:14px}.evbody h3,.evbody .when,.evbody .where,.pastev .n{overflow-wrap:anywhere}}

/* ---- events map + gallery layer ---- */
.evgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.evcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;text-align:left;transition:transform .3s var(--ease,ease),box-shadow .3s var(--ease,ease)}
.evcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(19,24,29,.24)}
.evcard .evimg{position:relative;aspect-ratio:16/9;overflow:hidden}
.evcard .evimg img{width:100%;height:100%;object-fit:cover;display:block}
.evcard .evdate{position:absolute;top:14px;left:14px;text-align:center;background:var(--clay);color:#fff;border-radius:12px;padding:8px 12px;min-width:60px;box-shadow:0 10px 22px -10px rgba(0,0,0,.55)}
.evbody{padding:20px 22px 22px}
.evbody h3{font-family:Lora,Georgia,serif;font-size:21px;margin:0 0 5px}
.evbody .when{font-size:13px;color:var(--clay);font-weight:700;margin:0}
.evbody .where{font-size:13.5px;color:var(--sub);margin:4px 0 15px}
.evlinks{display:flex;flex-wrap:wrap;gap:10px}
.evlinks a{font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:0 16px;min-height:42px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.evlinks .primary{background:var(--btn-bg);color:#fff}
.evlinks .primary:hover{filter:brightness(1.08)}
.evlinks .ghost{border:1px solid var(--line);color:var(--text)}
.evlinks .ghost:hover{border-color:var(--clay);color:var(--clay)}
.mapwrap{margin-top:30px}
.mapctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mapbtn{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:0 18px;min-height:42px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer}
.mapbtn:hover{border-color:var(--clay)}
.mapbtn.on{background:var(--clay);color:#fff;border-color:var(--clay)}
#evmap{height:440px;width:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;z-index:1;background:var(--cream)}
.leaflet-popup-content{font-family:inherit;font-size:13px;line-height:1.5}
.leaflet-popup-content b{font-family:Lora,Georgia,serif;font-size:15px}
.leaflet-popup-content a{color:#8f4d3f;font-weight:700;text-decoration:none;text-transform:uppercase;font-size:11px;letter-spacing:.05em}
.mapfallback{margin-top:14px;font-size:13px;color:var(--sub);display:none}
.mapfallback a{color:var(--clay)}
.pastgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:20px;margin-top:36px;text-align:left}
.pcardev{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:transform .3s var(--ease,ease),box-shadow .3s var(--ease,ease)}
.pcardev:hover{transform:translateY(-4px);box-shadow:0 20px 40px -22px rgba(19,24,29,.22)}
.pcardev .thumb{aspect-ratio:16/9;overflow:hidden;background:var(--cream)}
.pcardev .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcardev .pv{padding:15px 16px 17px;display:flex;flex-direction:column}
.pcardev .d{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.pcardev .n{font-family:Lora,Georgia,serif;font-size:16.5px;color:var(--text);margin:3px 0 2px;line-height:1.25}
.pcardev .l{font-size:12.5px;color:var(--sub)}
.pcardev .dir{margin-top:11px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);text-decoration:none}
.pcardev .dir:hover{text-decoration:underline}
.evsource{margin-top:28px;font-size:12.5px;color:var(--mut);text-align:center}
.evsource a{color:var(--clay)}
@media(max-width:760px){.evgrid{grid-template-columns:1fr}#evmap{height:360px}}

/* leaflet-tile warm */
#evmap img.leaflet-tile{filter:sepia(.28) saturate(.8) brightness(1.03) contrast(.96)}
#evmap .leaflet-control-attribution{font-size:9px;background:rgba(250,247,243,.82);color:#6f6861}
#evmap .leaflet-control-attribution a{color:#8f4d3f}

/* testimonies video grid */
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;text-align:left}
.vwrap{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.vwrap .fr{position:relative;padding-top:56.25%}
.vwrap .fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vwrap figcaption{padding:13px 16px 15px;font-size:13px;color:var(--sub);line-height:1.5}
@media(max-width:760px){.vidgrid{grid-template-columns:1fr}}

/* invite What-to-expect: keep long power-words inside the card */
.tcard .k{overflow-wrap:break-word;hyphens:auto}
.triad.expect .tcard .k{font-size:clamp(17px,1.9vw,21px);letter-spacing:.02em}

/* ---- interactive pan carousel (kcar) ---- */
.kcar{position:relative;margin-top:40px}
.kcar-track{display:flex;flex-wrap:nowrap;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 20px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}
.kcar-track::-webkit-scrollbar{display:none}
.kcar-track.drag{cursor:grabbing;scroll-behavior:auto}
.kcar-track>*{scroll-snap-align:start;flex:0 0 auto}
.kcar-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -12px rgba(19,24,29,.45);transition:background .2s,color .2s,border-color .2s}
.kcar-nav:hover{background:var(--clay);color:#fff;border-color:var(--clay)}
.kcar-nav.prev{left:-10px}.kcar-nav.next{right:-10px}
/* Kevin, Jul-27: "give the endorsements section an arrow indicator, for mobile!!!!" The buttons were
   always in the DOM and wired to kd-carousel.js; they were simply hidden here. On a phone they have
   to sit INSIDE the container (the -10px desktop offsets would hang off-screen). */
@media(max-width:760px){
  .kcar-nav{width:38px;height:38px;font-size:20px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px -6px rgba(19,24,29,.5)}
  .kcar-nav.prev{left:6px}.kcar-nav.next{right:6px}
}
[data-theme="dark"] .kcar-nav{background:var(--surface)}
@media(min-width:761px){.kcar-books .kcar-track{justify-content:center}.kcar-books .kcar-nav{display:none}}
/* endorsement cards, larger, in the carousel */
.kcar .pq{flex:0 0 clamp(300px,82vw,440px);padding:34px 32px 30px}
.kcar .pq.feat{flex:0 0 clamp(300px,82vw,440px)}
.kcar .pq p{font-size:17px;line-height:1.62}
.kcar .pq .top img{width:60px;height:60px}
/* book cover cards */
.bookcard{flex:0 0 clamp(178px,44vw,214px);display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:transform .3s var(--ease,ease)}
.bookcard:hover{transform:translateY(-6px)}
.bookcard:hover .cov{box-shadow:0 30px 52px -18px rgba(19,24,29,.5),0 6px 16px rgba(19,24,29,.22)}
.bookcard .cov{aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:var(--cream);box-shadow:0 22px 42px -20px rgba(19,24,29,.42),0 4px 12px rgba(19,24,29,.16);transition:box-shadow .3s var(--ease,ease)}
.bookcard .cov img{width:100%;height:100%;object-fit:cover;display:block}
.bookcard .cov.contain img{object-fit:contain;padding:14px;background:var(--cream)}
.bookcard .cov.txt{display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;background:linear-gradient(155deg,var(--clay),#6d3a2f)}
.bookcard .cov.txt span{font-family:Lora,Georgia,serif;font-size:23px;font-weight:700;color:#fff;line-height:1.2}
.bookcard .bt{font-family:Lora,Georgia,serif;font-size:15.5px;margin:13px 0 3px;line-height:1.25}
.bookcard .bbuy{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--clay)}

/* book cover contain override — never crop a title */
.bookcard .cov img{object-fit:contain !important;background:var(--cream)}

/* ---- cloned blog article ---- */
.arthero{height:clamp(220px,36vw,400px);overflow:hidden;border-bottom:3px solid var(--clay);background:var(--cream)}
.arthero img{width:100%;height:100%;object-fit:cover;display:block}
.artwrap{max-width:760px;margin:0 auto;padding:52px 6vw 6px;text-align:center}
.artwrap h1{font-family:Lora,Georgia,serif;font-size:clamp(28px,4.2vw,42px);font-weight:700;line-height:1.15;margin:12px 0 0}
.artmeta{color:var(--mut);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:14px}
/* Kevin, Jul-27: "for blogs, wider paragraphs, which increased font size." box-sizing:border-box
   means the 6vw padding ate the measure from the inside (720px - 12vw ≈ 548px at 1440), so the cap
   on the padding matters as much as the wider max-width. */
.artbody{max-width:860px;margin:24px auto 0;padding:0 min(6vw,28px) 6px;text-align:left}
.artbody p{font-size:18px;line-height:1.78;margin:0 0 22px;color:var(--text)}
.artback{display:inline-block;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);text-decoration:none}
.artback:hover{text-decoration:underline}

/* ---- nlm content (rendered study guide / faq) ---- */
.nlmbody{max-width:760px;margin:6px auto 0;text-align:left}
.nlmbody h2{font-family:Lora,Georgia,serif;font-size:clamp(22px,2.8vw,30px);margin:38px 0 6px;padding-top:8px;border-top:1px solid var(--line)}
.nlmbody h3{font-family:Lora,Georgia,serif;font-size:19px;color:var(--clay);margin:26px 0 6px}
.nlmbody p{font-size:16.5px;line-height:1.75;margin:0 0 16px}
.nlmbody ul,.nlmbody ol{font-size:16.5px;line-height:1.7;padding-left:22px;margin:0 0 18px}
.nlmbody li{margin:7px 0}
.nlmbody strong{color:var(--text)}
.nlmbody hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.nlmbody table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
/* Core's table block wraps the <table> in <figure class="wp-block-table"> carrying its own 1.2em top
   margin, and the figure forms a block-formatting context, so the table's 18px margins no longer
   collapse with their neighbours — they stack, pushing everything below down ~37px. Move the spacing
   onto the figure and zero it inside: identical geometry to the bare table it replaced. */
.nlmbody figure.wp-block-table{margin:18px 0}
.nlmbody figure.wp-block-table table{margin:0}
.nlmbody th,.nlmbody td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.nlmbody th{background:var(--cream);font-weight:800;letter-spacing:.02em}
.nlmbody blockquote{border-left:3px solid var(--sand);margin:18px 0;padding:4px 0 4px 18px;color:var(--sub);font-style:italic}

/* ---- nlm kit (blog listen & learn) ---- */
.nlmkit{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:22px}
.podcast{margin:0;width:min(560px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 18px 40px -24px rgba(19,24,29,.3)}
.podcast figcaption{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--clay);margin-bottom:11px}
.podcast audio{width:100%;display:block}
.nlmlinks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.nlmlinks .cta{margin:0}

/* === WordPress bridge (Gutenberg buttons render as .cta) === */
.wp-block-button__link{background:var(--btn-bg);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 28px;border-radius:10px;text-decoration:none;transition:transform .18s var(--ease,ease),box-shadow .18s ease}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(19,24,29,.18)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--text);border:1.5px solid var(--text)}
.wp-block-button.is-style-sand .wp-block-button__link{background:var(--sand);color:var(--ink)}
.wp-block-image{margin:0}
/* neutralise WP block default vertical gaps inside mockup sections (mockup governs its own spacing) */
.hero .wp-block-group,.hero .wp-block-columns,.band .wp-block-group,.bookband .wp-block-group,.center .wp-block-group{margin-block:0}
/* bridges for WP-specific class names used in the Home page content */
.clay-eyebrow{color:var(--clay)}
.sub-p{color:var(--sub)}
.center.cream-band{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more-link{margin-top:26px}
.more-link a{font-weight:700;color:var(--clay);text-decoration:none}
.vision .wp-block-quote{border:0;padding:0;margin:0}
.hero .herobtns{margin-top:30px;gap:14px 16px}
/* Aug-12, Andrew's eyes: at phone widths the two CTAs wrapped into touching, staggered
   rows. Below 640px they stack full-width with honest air between them. */
@media(max-width:640px){.hero .herobtns .wp-block-button{width:100%}
  .hero .herobtns .wp-block-button__link{width:100%;text-align:center}}
/* And the Vision quote block was pinned toward one edge of its full-width band
   (86px vs 634px measured) - now a centered column. */
.vision .kd-vq{max-width:680px;margin-left:auto;margin-right:auto}
.final .sig{margin-top:38px}
.final .sig img{height:64px;width:auto;margin:0 auto;display:block;opacity:.92}
.final .wp-block-buttons{justify-content:center;margin-top:30px}
/* ---- card grids rebuilt as core blocks (editable by Kevin) ---- */
/* Grid/card wrappers are now core groups, so WP's is-layout-flow injects margin-block-start on
   every child. Grid gap already handles that spacing — zero it or the cards drift out of line. */
/* Only the grid items need this. Do NOT extend it to .pb>* — that selector (0,2,0) ties with
   .path h3{margin:8px 0 6px} and wins on order, silently costing the heading its top margin.
   .path h3 / .path p already outrank WP's :root :where(.is-layout-flow)>* (0,1,0) unaided. */
.pathgrid>*{margin-block-start:0}
/* .pb is now a core group, so WP's :root :where(.is-layout-flow)>*:first-child{margin-block-start:0}
   (0,2,0) ties with .path h3{margin:8px 0 6px} and wins on order — costing the heading its 8px top
   margin and shortening every card. Needs a higher-specificity restore, not a tie. */
.path .pb>h3{margin-top:8px}
/* wp:image wraps the card art in a <figure>; the mockup styled the bare <img>. Keep the figure
   inert so .path img keeps doing the work. */
/* margin:0 only. Deliberately NOT line-height:0 / display:block on the img: the original markup had
   a bare inline <img>, whose baseline descender adds ~8px under the picture. That is a CSS artifact
   rather than a design choice, but removing it would shorten every card by 8px versus the approved
   design, so the gap is preserved. */
.path .pathimg{margin:0}
/* WP's block CSS sets .wp-block-image img{vertical-align:bottom}, which removes the descender
   gap the bare inline <img> had. Restore baseline so card height matches the approved design. */
.path .pathimg img{vertical-align:baseline}
/* the card link was <a class="atc"> directly in .pb; as an editable paragraph it gains a <p>
   wrapper, which .path p{margin:0 0 16px} would otherwise indent. */
.path .atcwrap{margin:0;font-size:16px}
/* media cards. The thumbnail was a <div> with a CSS background-image, which Kevin could never
   change; it is a real image block now, so the figure must fill the 16/10 frame the way the
   background did. */
.mediagrid>*{margin-block-start:0}
/* Quote cards became core groups so Kevin can edit the quotes. As `is-layout-flow` groups they hand
   every child a 1.2em top margin — including the bare <b>Name</b>/<small>role</small> attribution run,
   which as raw markup inside a plain <div> had none. Same bridge .tcard and .mediagrid already carry. */
.quotes.wp-block-group>*,.q.wp-block-group>*,.mcard.wp-block-group>*,.pcardev.wp-block-group>*{margin-block-start:0}
.q.wp-block-group>p{margin:0 0 14px}
/* absolutely positioned so the <img> is out of flow and cannot push the frame taller than
   .mcard .mimg{aspect-ratio:16/10}. In flow, an image whose intrinsic ratio is taller than 16/10
   wins and that card grows — and because grid rows equalise, every card in the row grows too. */
.mcard .mimg{margin:0;position:relative;overflow:hidden}
.mcard .mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* .k and the read-more link were a <div> and a bare <a>; as editable paragraphs they inherit
   .mcard p{margin:0 0 16px}, and the link must keep the margin-top:auto that pins it to the
   card bottom. Two classes each, so these outrank .mcard p (0,1,1). */
.mcard .k{margin:0}
/* the read-more link's <p> wrapper must not impose .mcard p's 14px/22.4 line box on what was a
   13px link — at 14px the label wraps in the narrowest card and, because grid rows equalise,
   every card in the row grows with it. */
.mcard .mlink{margin:auto 0 0;font-size:13px;line-height:1.6}
/* event cards. Safe as a blanket rule here — every specific rule (.evbody h3 at 0,1,1 and
   .evbody .when/.where at 0,2,0) outranks this 0,1,0 selector, unlike the .pb case where an
   equal-specificity reset silently beat .path h3. */
.evgrid>*{margin-block-start:0}
/* same first-child trap as .pgrid: the grid is now its container's first child, so WP's
   :root :where(.is-layout-flow)>:first-child{margin-block-start:0} (0,2,0) beats
   .evgrid{margin-top:40px} (0,1,0). Three classes to outrank it. */
.evgrid.wp-block-group.is-layout-flow{margin-top:40px}
.evbody>*{margin-block-start:0}
/* endorsement quotes: .kcar-track>* already sets scroll-snap/flex, this only kills WP's flow margin */
.kcar-track>*{margin-block-start:0}
/* product cards. Explicit per-element rules, not a blanket .pb>* reset: a blanket rule ties with
   .pcard h3{margin:0} at (0,2,0) and whichever comes last wins, which is how the .path headings lost
   their margin. .pcard h3 already outranks WP's flow rule unaided. */
.pgrid>*{margin-block-start:0}
/* .pgrid is now the first child of its container, so WP's
   :root :where(.is-layout-flow)>:first-child{margin-block-start:0} (0,2,0) beats .pgrid{margin-top:40px}
   (0,1,0) and the grid loses its 40px gap from the rule above it. Three classes to outrank it. */
.pgrid.wp-block-group.is-layout-flow{margin-top:40px}
/* Same 0-2-0 rule (.center .wp-block-group{margin-block:0}) also eats these two, which got the
   conversion but not the restore. The mockup gives .pathgrid 36px and .mediagrid 40px. */
.pathgrid.wp-block-group.is-layout-flow{margin-top:36px}
.mediagrid.wp-block-group.is-layout-flow{margin-top:40px}
/* display:contents, not margin:0 — .pcard .ph is a flex box and .pcard .ph img{max-height:100%}
   resolves against its flex parent. A <figure> wrapper becomes that parent, so max-height stops
   referring to .ph and the product shots render oversized. contents removes the figure's box and
   makes the <img> the flex child again, exactly as the original markup had it. */
.pcard .ph .phimg{display:contents}
.pcard .price{margin:0}
/* .atc had margin-top:auto as a flex item of .pb, pinning the button to the card bottom; as an
   editable paragraph the <p> is now the flex item, so it has to carry that. */
.pcard .atcwrap{margin:auto 0 0}
/* Wrapping .scrim in a core group makes it is-layout-flow, and WP's
   :root :where(.is-layout-flow)>*{margin-block-end:0} (specificity 0,1,0) beats h2{margin:0 0 10px}
   (0,0,1) — silently costing the heading its 10px bottom margin. Restore it explicitly. */
.final .scrim>h2{margin:0 0 10px}
/* The secondary link was <a class="small">; as an editable core paragraph the class lands on the <p>,
   so mirror the original .final a.small rule (and beat .final p{color:#d8d3cc}). */
.final p.small{display:block;margin-top:14px;color:#b8b1a8;font-size:13.5px}
.final p.small a{color:inherit;text-decoration:none}
.final p.small a:hover{text-decoration:underline}
/* The 66px reserved at line ~296 is load-bearing again: the theme toggle is fixed at top-right, so
   without it the hamburger slides under the toggle (measured overlap: -23px at a 512px viewport).
   An earlier rule here reclaimed that space back to 6vw while the theme had no toggle — restoring
   the toggle made that override a collision, so it is gone. Do not re-add it. */
/* Firestarters page bridges (mockup used inline styles; classes keep blocks editable) */
.fs-stage{background:url('img/life-3.jpg') center/cover no-repeat}
.vision.fs-stage .scrim{background:linear-gradient(rgba(19,24,29,.74),rgba(19,24,29,.9));text-align:center;padding:104px 6vw 96px}
.vision.fs-stage h1{font-family:Lora,Georgia,serif;color:#fff;font-size:clamp(34px,5vw,56px);margin:0;line-height:1.07;letter-spacing:normal}
.vision.fs-stage .eyebrow{color:var(--sand)}
.vision.fs-stage p.lead{max-width:620px;margin:18px auto 0;color:#e6e1da;font-size:17px}
.fs-intro{max-width:680px;margin:0 auto;font-family:Lora,Georgia,serif;font-size:19px;font-style:italic;color:var(--sub);line-height:1.65}
.center.pt0{padding-top:0}
.fs-note{color:var(--mut);font-size:13.5px;margin-top:18px}
.band .inner.inner-wide{max-width:1080px;margin:0 auto}
/* Shop page bridges */
.center.pt6{padding-top:6px}
.shop-note{color:var(--mut);font-size:12.5px;margin-top:14px}
/* Events page bridge */
.sub.mt14{margin-top:14px}
/* Donate page bridge (mockup set the hero image inline) */
.evhero.donate-hero{background-image:url('img/donate-hero.jpg')}
/* eCourse page bridge */
.vision.ec-stage{background:url('img/life-1.jpg') center/cover no-repeat}
/* Firestarters "Choose your path" — 3 panels (call decision) */
.pathgrid.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.pathgrid.cols3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pathgrid.cols3{grid-template-columns:1fr}}
/* eCourse "What's included" — even 3×2 grid (call: fix component formatting) */
.triad.wi6{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.triad.wi6{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.triad.wi6{grid-template-columns:1fr}}
/* Music page — responsive streaming embeds */
.musicrow{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start;margin-top:34px}
.music-embed{flex:1 1 360px;max-width:540px}
.music-embed iframe{width:100%;height:450px;border:0;border-radius:12px;overflow:hidden;background:var(--cream)}
.music-single{max-width:680px;margin:34px auto 0}
.music-single iframe{width:100%;height:450px;border:0;border-radius:12px;overflow:hidden;background:var(--cream)}
/* Home: endorsements block sits inside the Presence Therapy bookband — tighten the
   split→endorsements gap and the trailing cream gap before the final CTA (call-edit spacing) */
.bookband:has(.kcar){padding-bottom:40px}
.bookband:has(.kcar) .split{margin-bottom:4px}
.bookband:has(.kcar) .inner{margin-top:6px}
.bookband:has(.kcar) .kcar{margin-top:24px}
.bookband:has(.kcar) .inner .more-link{margin-top:20px}
@media(max-width:760px){.bookband:has(.kcar){padding-bottom:26px}}
/* ---- Blog: WP query-loop bridged to the mockup's OWN .mcard / .art* rules ---- */
/* Previously this was a second, parallel card design (.blogfeed) with its own sizes. The markup now
   emits the mockup vocabulary, so these only supply the WP-block-specific bits. */
/* post-template renders <ul class="mediagrid"><li>…</li></ul> — the <li> IS the mockup's .mcard. */
.mediagrid.wp-block-post-template{list-style:none;padding:0}
/* margin:0 is load-bearing — WP emits :root :where(.is-layout-flow)>*{margin-block-start:1.2rem}
   and post-template renders with is-layout-flow, which would push every card but the first down 19px */
.mediagrid>li{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.mediagrid .mimg{margin:0;aspect-ratio:16/10;background-color:var(--cream)}
.mediagrid .mimg img{width:100%;height:100%;object-fit:cover;display:block}
.mediagrid .mb{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.mediagrid .mb>*{margin:0}
.mediagrid .k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--clay)}
.mediagrid .wp-block-post-title{font-family:Lora,Georgia,serif;font-size:18px;line-height:1.25;margin:8px 0}
.mediagrid .wp-block-post-title a{color:var(--text);text-decoration:none}
.mediagrid .wp-block-post-title a:hover{color:var(--clay)}
.mediagrid .wp-block-post-excerpt{display:flex;flex-direction:column;flex:1;margin:0}
.mediagrid .wp-block-post-excerpt__excerpt{color:var(--sub);font-size:14px;margin:0 0 16px}
/* WP wraps the link in <p class="…__more-text">, so the <a> is not the flex item —
   bottom-align the wrapper (and kill its UA margins) or short cards leave the CTA floating */
.mediagrid .wp-block-post-excerpt__more-text{margin:auto 0 0}
.mediagrid .wp-block-post-excerpt__more-link{font-weight:700;font-size:13px;color:var(--clay);text-decoration:none}
.mediagrid .wp-block-post-excerpt__more-link:hover{text-decoration:underline}
.blogpager{margin-top:40px;gap:14px;font-size:13.5px;font-weight:700}
.blogpager a{color:var(--clay);text-decoration:none}
/* "Listen & Learn" band on the blog index (mockup blog.html) */
.nlmband{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* ---- Single post: mockup .arthero/.artwrap/.artmeta/.artbody supply the design; bridge WP blocks ---- */
.arthero.wp-block-post-featured-image{margin:0}
.artwrap .eyebrow{margin:0}
.artwrap .wp-block-post-title{margin:12px 0 0}
.artbody h2{font-size:clamp(22px,2.6vw,28px);margin:1.6em 0 .5em}
.artbody h3{font-family:Lora,Georgia,serif;font-size:21px;margin:1.4em 0 .4em}
.artbody img{border-radius:12px;height:auto;max-width:100%}
.artbody a{color:var(--clay)}
.artbody blockquote{margin:1.4em 0;padding-left:20px;border-left:3px solid var(--sand);font-family:Lora,Georgia,serif;font-style:italic;color:var(--sub)}
/* footer bridge (class survived from the retired kd-theme.css) */
.kd-footer a{color:#fff;text-decoration:none}
.kd-footer a:hover{opacity:.72}
.bookband:has(.kcar) .btn2{margin-bottom:2px}
.bookband:has(.kcar) [class*="elfsight-app"]{margin-top:8px}

/* ---- Block styles for the page editor -------------------------------------------------------
   Kevin is an Editor, so the Site Editor and its global style variations are closed to him. These
   toolbar styles are the only way he can restyle a block, so each registered style MUST have CSS —
   validate.mjs fails the build otherwise. Values reuse the design tokens, nothing new invented. */
.wp-block-separator.is-style-kd-rule{width:56px;height:3px;background:var(--clay);border:0;opacity:1;margin:16px auto 0}
.wp-block-group.is-style-kd-cream-band{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wp-block-group.is-style-kd-ink-band{background:var(--band-bg);color:#fff}
.wp-block-group.is-style-kd-ink-band :where(h1,h2,h3,h4){color:#fff}
.wp-block-group.is-style-kd-ink-band :where(p,li){color:#cfc9c2}
.wp-block-group.is-style-kd-ink-band a:not(.wp-element-button){color:var(--sand)}
.is-style-kd-kicker{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:clamp(19px,2.1vw,25px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--clay);line-height:1.1;text-wrap:balance}
.is-style-kd-eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--clay);margin:0 0 16px}
.is-style-kd-lead{font-size:17px;line-height:1.7;color:var(--sub);max-width:620px}
.wp-block-image.is-style-kd-rounded img{border-radius:14px;display:block}
.wp-block-image.is-style-kd-bookshot{display:flex;justify-content:center}
.wp-block-image.is-style-kd-bookshot img{width:min(300px,60vw);border-radius:6px;box-shadow:0 30px 60px rgba(19,24,29,.30),0 6px 16px rgba(19,24,29,.18);transform:rotate(-2deg)}
.wp-block-quote.is-style-kd-scripture{max-width:640px;margin-inline:auto;padding:0;border:0;text-align:center;font-style:italic;color:var(--sub);font-size:18px;line-height:1.5}
.wp-block-quote.is-style-kd-scripture cite{display:block;margin-top:8px;font-style:normal;font-weight:700;color:var(--clay);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

/* ---- WooCommerce store, styled to the design (templates/archive-product.html, single-product.html)
   /store/ went public the moment Coming Soon was switched off, so it can no longer render Woo's
   default look. These bridge Woo's own blocks onto the .pcard vocabulary the mockup shop page uses. */
.kdstore .wp-block-post-template,.kdstore .wc-block-product-template{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:26px;margin-top:40px;list-style:none;padding:0}
.kdstore li.product,.kdstore .wc-block-product{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;text-align:center;display:flex;flex-direction:column;padding:0}
.kdstore .wc-block-components-product-image,.kdstore .wp-block-woocommerce-product-image{margin:0;background:var(--cream);padding:22px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.kdstore .wc-block-components-product-image img,.kdstore .wp-block-woocommerce-product-image img{max-height:100%;width:auto;max-width:100%;object-fit:contain;margin:0}
.kdstore .wp-block-post-title{font-family:Lora,Georgia,serif;font-size:16.5px;line-height:1.3;margin:16px 18px 6px}
.kdstore .wp-block-post-title a{color:var(--text);text-decoration:none}
.kdstore .wp-block-post-title a:hover{color:var(--clay)}
.kdstore .wc-block-components-product-price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text);margin:0 18px 12px}
.kdstore .wp-block-button__link,.kdstore .wc-block-components-product-button a{margin:auto 18px 20px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--btn-bg);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:0 22px;border-radius:999px;text-decoration:none}
/* single product */
.prodsplit{margin-top:34px;align-items:flex-start}
.prodwrap .prodcrumbs{font-size:13px;color:var(--mut);text-align:left}
.prodwrap .prodtitle{font-family:Lora,Georgia,serif;font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:0 0 10px;text-align:left}
.prodwrap .price,.prodwrap .wc-block-components-product-price{font-size:22px;font-weight:700;color:var(--text);text-align:left}
.prodwrap .wp-block-woocommerce-product-image-gallery img{border-radius:14px}
.prodwrap .proddetails{margin-top:46px;text-align:left}
.prodwrap .wp-block-button__link,.prodwrap button[type="submit"]{background:var(--btn-bg);color:#fff;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:15px 28px;border-radius:10px;border:0;cursor:pointer}

/* store toolbar (templates/archive-product.html) — results count + sorting on one line */
.kdstorebar{align-items:center;margin-top:28px;font-size:13.5px;color:var(--mut)}
.kdstorebar .woocommerce-result-count{margin:0}
.kdstorebar select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);color:var(--text);font-size:13.5px}
.kdcrumbs{font-size:13px;color:var(--mut);margin-top:4px}
.kdcrumbs a{color:var(--clay);text-decoration:none}

/* ===== eCourse lesson pages ===== merged from sandbox/mockups/kd-lesson.css ===== */
/* Firestarters eCourse — lesson page components.
   Built only from kd-mock.css custom properties, so light/dark follow the site with no extra rules.
   "Reverent Clarity": Lora carries the teaching voice (title, Scripture); Helvetica carries every
   functional signal (labels, lesson names, actions); clay marks structure; sand warms only the play mark. */

/* ---- lesson header ---------------------------------------------------- */
.lhead{background:var(--cream);border-bottom:1px solid var(--line);padding:26px 6vw 24px}
.lhead .in{max-width:1240px;margin:0 auto}
.lhead .lmeta{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.lhead .lid{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.lhead .lsec{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.lhead h1{font-family:Lora,Georgia,serif;font-size:clamp(24px,3.2vw,38px);font-weight:700;
  line-height:1.18;margin:10px 0 0;letter-spacing:-.005em}
.lhead .lrule{width:48px;height:3px;background:var(--clay);margin:16px 0 0}

/* progress: tabular figures so the count never shifts width as it climbs */
.lprog{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12.5px;color:var(--mut);
  font-variant-numeric:tabular-nums}
.lprog .bar{flex:0 1 220px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.lprog .bar i{display:block;height:100%;background:var(--clay)}

/* ---- page shell: curriculum rail + body --------------------------------
   Padding on the outer element, max-width on the inner one — the house pattern (section + .inner).
   Putting both on one box makes `box-sizing:border-box` subtract the vw padding from INSIDE the
   max-width, so the page gets narrower as the window gets wider (measured 779px at 1440 vs 750px at
   1680 before this split). A course player also wants screen, not margin, so the gutter is 3vw
   rather than the marketing pages' 6vw. */
.lpage{padding:34px 3vw 10px}
/* 1692 = rail 216 + gap 36 + (video 854 + gap 26 + notes 560): past this the layout would only stretch
   the video beyond its native width, so it stops growing and centres instead. */
.lwrap{max-width:1692px;margin:0 auto;display:grid;
  grid-template-columns:216px minmax(0,1fr);gap:36px;align-items:start}
/* Collapsed by default on a lesson page: the rail is for navigating, the page is for reading, and the
   216px it occupies is exactly what squeezed the notes to 41 characters a line in variants A/B. */
/* 1508 = spine 44 + gap 24 + (video 854 + gap 26 + notes 560). Folding the rail hands 184px back to
   the grid, and without a matching cap the video's column outgrows the 854px the video itself is
   limited to — measured as a 97px pocket of dead space beside it at 1680. */
.kd-railshut .lwrap{grid-template-columns:44px minmax(0,1fr);gap:24px;max-width:1508px}
.kd-railshut .lwrap .lrail .sech,.kd-railshut .lwrap .lrail h2 span,
.kd-railshut .lwrap .lrail li a span:not(.n){display:none}
.kd-railshut .lwrap .lrail li a{justify-content:center;padding:7px 0}
.kd-railshut .lwrap .lrail ol{border-left:0}
.kd-railshut .lwrap .lrail .sec{margin-bottom:12px}

.railtoggle{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 14px;padding:7px 6px;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.railtoggle:hover{color:var(--text);border-color:var(--clay)}
.railtoggle b{font-size:13px;line-height:1}
.kd-railshut .railtoggle{justify-content:center;padding:7px 0}

.lrail{position:sticky;top:22px;font-size:14px}
.lrail h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.lrail .sec{margin-bottom:20px}
.lrail .sech{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clay);margin:0 0 8px}
.lrail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.lrail li a{display:flex;gap:10px;align-items:baseline;padding:7px 0 7px 14px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--sub);text-decoration:none;line-height:1.35}
.lrail li a:hover{color:var(--text)}
.lrail li a .n{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;min-width:22px}
.lrail li a[aria-current="page"]{color:var(--text);font-weight:700;border-left-color:var(--clay)}
.lrail li.done a .n::after{content:"\2713";margin-left:5px;color:var(--clay)}

/* ---- video ------------------------------------------------------------- */
/* Masters are 854x480. Capped at native so a wide screen never upscales 480p into mush. */
.lvid{position:relative;background:#000;border-radius:14px;overflow:hidden;
  border-bottom:3px solid var(--clay);aspect-ratio:16/9;max-width:854px;margin-inline:auto;width:100%}
.lvid img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62}
.lvid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer}
.lvid .play span{width:66px;height:66px;border-radius:50%;background:var(--sand);color:#13181d;
  display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:5px;
  box-shadow:0 10px 28px rgba(0,0,0,.42);transition:transform .18s ease}
.lvid .play:hover span{transform:scale(1.07)}
.lvid .rt{position:absolute;right:12px;bottom:12px;background:rgba(19,24,29,.82);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:6px;
  font-variant-numeric:tabular-nums}

/* ---- panels ------------------------------------------------------------ */
.lpanel{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:24px 26px;
  margin-top:20px}
/* Cap the measure, not the column: an 854px panel runs ~82 characters a line, well past the 45-75 that
   reads comfortably. The narrow side column in A/B is already inside the band and is left alone. */
.lpanel .lnotes,.lpanel .lprompts{max-width:68ch}
.lpanel > h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 4px}
.lpanel > .hint{font-size:13.5px;color:var(--mut);margin:0 0 16px}

/* notes: the outline. Numerals sit in their own optical column so text aligns down the page. */
.lnotes{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.62}
.lnotes li{margin:0 0 9px}
.lpoint{display:flex;gap:11px;align-items:baseline;margin-top:22px !important;font-weight:700;
  font-size:16.5px;color:var(--text)}
.lnotes > li:first-child.lpoint{margin-top:0 !important}
.lpoint .lnum{flex:none;min-width:20px;color:var(--clay);font-variant-numeric:tabular-nums;
  font-size:14px;letter-spacing:.04em}
.lpoint .ltext{flex:1}
.lteach{color:var(--sub);padding-left:31px}
.lscript{font-family:Lora,Georgia,serif;font-style:italic;color:var(--qink);font-size:14.5px;
  padding-left:31px;border-left:2px solid var(--line);margin-left:31px !important;line-height:1.55}
.lpanel .lscript{padding-left:14px}

/* fill-in-the-blank: filling these in while the video plays IS the note-taking experience.
   Kept as a worksheet rule rather than a boxed form field — that is what the printed manual does — but
   with a faint wash so it still reads as somewhere to type. Drawn from --cream, not the sand ember,
   which the design language reserves for the play mark alone. */
input.kb{font:inherit;font-weight:700;color:var(--clay);border:0;
  background:color-mix(in srgb,var(--cream) 62%,transparent);
  border-bottom:1.5px solid var(--clay);padding:1px 5px 1px;margin:0 2px;min-width:82px;
  border-radius:3px 3px 0 0;outline-offset:3px;transition:background .15s ease}
input.kb:hover{background:color-mix(in srgb,var(--cream) 92%,transparent)}
input.kb:focus{background:color-mix(in srgb,var(--sand) 22%,transparent)}
span.kb{display:inline-block;min-width:96px;border-bottom:1.5px solid var(--clay);margin:0 3px}

/* prompts */
.lprompts{margin:0;padding:0 0 0 20px;font-size:15px;line-height:1.6;color:var(--sub)}
.lprompts li{margin:0 0 12px}
.lprompts li.lpoint{list-style:none;margin-left:-20px;color:var(--text)}
.lprompts li.lscript{list-style:none;margin-left:-20px !important}

/* ---- tabs: progressive enhancement. With JS off every panel stays open and readable. ---- */
.ltabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:26px 0 0;flex-wrap:wrap}
.ltabs button{font:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mut);background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 16px;cursor:pointer;margin-bottom:-1px}
.ltabs button:hover{color:var(--text)}
.ltabs button[aria-selected="true"]{color:var(--clay);border-bottom-color:var(--clay)}
.js .ltabbed .lpanel{display:none;margin-top:0;border:0;border-radius:0;padding:24px 2px 0}
.js .ltabbed .lpanel.on{display:block}
.js .ltabbed .lpanel > h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ltabs{display:none}
.js .ltabs{display:flex}

/* ---- pager ------------------------------------------------------------- */
.lpager{display:flex;justify-content:space-between;gap:16px;margin:34px 0 0;
  border-top:1px solid var(--line);padding-top:22px}
.lpager a{display:block;max-width:46%;text-decoration:none;color:var(--text)}
.lpager a.next{text-align:right;margin-left:auto}
.lpager .lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);margin-bottom:5px}
.lpager .ttl{font-family:Lora,Georgia,serif;font-size:16px;font-weight:700;line-height:1.3}
.lpager a:hover .ttl{color:var(--clay)}

/* ---- variant A/B: video and notes side by side, both visible at once ----
   Sized in real units, not fr: a `1.32fr / .68fr` pair looks like a ratio but the notes column's own
   minimum wins the moment the row is tight, and the video silently collapses to whatever is left
   (measured 453px — half the master's native width).
   The notes get first call on the width, because DOWNSCALING the 854px master is free — it stays sharp
   — while a narrow measure is not: at a 300px column this outline ran 25 characters per line, against
   the 45-75 that reads comfortably. Even so ~40 is the ceiling here; see .lsticky for the way out. */
.lsplit{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,44%,560px);gap:26px;
  align-items:start}
.lsplit .lvid{margin-inline:0}
.lsplit .lnotecol{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:22px 22px 18px;max-height:min(74vh,720px);overflow:auto}
.lsplit .lnotecol > h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 4px}
.lsplit .lnotecol > .hint{font-size:13px;color:var(--mut);margin:0 0 16px}
.lsplit .lnotecol .lnotes{font-size:14.5px}

/* ---- follow-along: the outline tracks the video --------------------------
   Kevin, June 26: "you're following along 0.1 2.3 four and five while you're watching the video,
   filling in the blanks." Each point carries its own timecode, so clicking one seeks the video and the
   point being taught marks itself as the video plays. Points with no confident timecode stay plain
   text and are not clickable — a seek to the wrong place is worse than no seek at all. */
.lpoint[data-t]{cursor:pointer;border-radius:6px;margin-left:-8px;padding-left:8px;
  transition:background .15s ease}
.lpoint[data-t]:hover{background:color-mix(in srgb,var(--clay) 8%,transparent)}
.lpoint[data-t] .lnum::after{content:"\25B8";margin-left:5px;opacity:.5;font-size:11px}
.lpoint.at{background:color-mix(in srgb,var(--clay) 12%,transparent)}
.lpoint.at .lnum{color:var(--clay)}
.lpoint.at::before{content:"";position:absolute;left:0;width:3px;height:1.4em;background:var(--clay);
  border-radius:2px;margin-left:-8px}
.lpoint{position:relative}
.lnotecol .lnotes{scroll-behavior:smooth}

/* ---- the three quiet marks: watched / notes / activated ------------------
   Kevin's own measure of completion is behavioural — "no activation, no impartation, no implementation
   of anything, and that's not Firestarters" — so activation is the mark that counts, and his manual's
   own words rule out anything competitive: "God rewards risk (faith), not success or performance."
   Nothing here scolds, and there is no streak to break. */
.lmarks{display:flex;gap:16px;margin-top:16px;flex-wrap:wrap}
.lmark{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.lmark i{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line);display:block;
  flex:none;position:relative}
.lmark.on{color:var(--clay)}
.lmark.on i{border-color:var(--clay);background:var(--clay)}
.lmark.on i::after{content:"";position:absolute;left:4px;top:1.5px;width:3.5px;height:7px;
  border:solid var(--bg);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}

/* ---- variant D: the video stays pinned while the notes scroll under it ----
   Side by side, a comfortable measure and a native-width video cannot coexist on a laptop: 540px of
   notes + 854px of video + the rail + gutters needs ~1758px against the 1440 most people have. Pinning
   the video instead keeps it on screen the whole way down the outline - which is what Kevin actually
   asked for - while the notes get the full column. `top` clears the sticky lesson header. */
.lsticky{position:sticky;top:14px;z-index:2;background:var(--bg);padding-bottom:14px}
.lsticky .lvid{margin-inline:0}
.lstack{max-width:1000px}
@media(max-height:720px){.lsticky{position:static}}  /* pinning would eat a short viewport */

/* ---- variant C: keep the tab strip and panels on the video's own width ---
   Left full-width they run 248px wider than the video, which reads as a misalignment, and the outline
   stretches to ~84 characters a line. */
.lcol{max-width:854px}

/* ---- responsive -------------------------------------------------------- */
@media(max-width:1080px){
  .lwrap,.kd-railshut .lwrap{grid-template-columns:1fr;gap:26px}
  .lrail{position:static;border-bottom:1px solid var(--line);padding-bottom:18px}
  .lrail .secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
  /* below the split's breakpoint the rail is a normal block again, so undo the collapsed spine */
  .kd-railshut .lwrap .lrail .sech,.kd-railshut .lwrap .lrail h2 span,
  .kd-railshut .lwrap .lrail li a span:not(.n){display:inline}
  .kd-railshut .lwrap .lrail li a{justify-content:flex-start;padding:7px 0 7px 14px}
  .kd-railshut .lwrap .lrail ol{border-left:1px solid var(--line)}
  .railtoggle{display:none}
}
@media(max-width:900px){
  /* Too narrow for two columns, so fall back to variant D: the video pins and the notes run beneath it
     at full width. Kevin still sees both at once, which is the requirement. */
  .lsplit{grid-template-columns:1fr}
  .lsplit .lnotecol{max-height:none;overflow:visible;border:0;padding:0}
  .lsplit > .lvid{position:sticky;top:10px;z-index:2}
}
@media(max-width:640px){
  .lpage{padding:24px 5vw 10px}
  .lteach,.lscript{padding-left:0}
  .lscript{margin-left:0 !important;padding-left:12px}
  .ltabs button{padding:11px 11px;letter-spacing:.1em}
}

/* ---- course home: what a student lands on after buying ------------------
   Separate from the sales page, which has a different job and a different audience. */
.hwrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;
  gap:40px;align-items:start}
.hsec{margin-bottom:34px}
.hsec .sech{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);margin:0 0 12px}
.hlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hrow a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:15px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.hrow a:hover{background:var(--cream)}
.hrow .hn{font-size:12px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums;
  letter-spacing:.06em}
.hrow .ht{font-family:Lora,Georgia,serif;font-size:17px;font-weight:700;line-height:1.3}
.hrow .hrt{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.hrow.done .hn::after{content:"\2713";margin-left:6px;color:var(--clay)}
.hrow.done .ht{color:var(--sub)}

.haside{position:sticky;top:22px}
.hcard{border:1px solid var(--line);border-radius:14px;background:var(--surface);
  padding:22px 22px 20px;margin-bottom:18px}
.hcard h2{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 10px}
.hcard p{font-size:14px;color:var(--sub);margin:0 0 16px;line-height:1.55}
.hcheck{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--sub);line-height:1.45}
.hcheck li{position:relative;padding:0 0 9px 24px}
.hcheck li::before{content:"";position:absolute;left:0;top:3px;width:13px;height:13px;
  border:1.5px solid var(--line);border-radius:3px}
.hcheck li.q{color:var(--text)}
.hcheck li.q::before{border-color:var(--clay);background:var(--clay)}
.hcheck li.q::after{content:"";position:absolute;left:4.5px;top:5px;width:3px;height:6.5px;
  border:solid var(--surface);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}

@media(max-width:980px){
  .hwrap{grid-template-columns:1fr;gap:28px}
  .haside{position:static}
}

/* Kevin's introduction reads as prose, so it gets a book measure and the serif that carries his voice. */
.lintro{margin-top:0}
.lintro p{font-family:Lora,Georgia,serif;font-size:16.5px;line-height:1.7;color:var(--qink);
  max-width:64ch;margin:0 0 18px}
.lintro p:last-child{margin-bottom:0}

/* ---- Revival Quiz: an ungraded self-check, not an exam ------------------
   Built on <details>, so the answer is one click away and the whole thing stays readable with JS off.
   Nothing marks the correct option in the list itself. */
.lquiz{list-style:none;margin:0;padding:0;counter-reset:none;max-width:68ch}
.qitem{padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.lquiz > .qitem:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.qq{display:flex;gap:11px;align-items:baseline;font-size:16px;font-weight:700;margin:0 0 12px;
  color:var(--text)}
.qn{flex:none;min-width:20px;color:var(--clay);font-size:13px;font-variant-numeric:tabular-nums}
.qopts{list-style:none;margin:0 0 12px;padding:0 0 0 31px;font-size:15px;color:var(--sub)}
.qopts li{padding:5px 0 5px 22px;position:relative;line-height:1.5}
.qopts li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;
  border:1.5px solid var(--line);border-radius:50%}
.qa{margin-left:31px}
.qa summary{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--clay);cursor:pointer;padding:5px 0;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"\25B8 ";display:inline-block;transition:transform .15s ease}
.qa[open] summary::before{transform:rotate(90deg)}
.qa summary:hover{opacity:.72}
.qans{font-family:Lora,Georgia,serif;font-size:16px;font-weight:700;color:var(--text);
  margin:4px 0 0;padding:8px 12px;border-left:3px solid var(--clay);
  background:color-mix(in srgb,var(--cream) 70%,transparent)}
.qwhy{font-size:14px;color:var(--sub);margin:8px 0 0;padding-left:15px}

/* Summary: Kevin's recap, and the answer key to the outline's blanks. */
#p-sum p{font-size:15.5px;line-height:1.65;color:var(--qink);max-width:68ch;margin:0 0 14px}
#p-sum p:last-child{margin-bottom:0}

/* ── Aug-12 legibility floors (sitewide audit: 66 page-views measured) ─────────
   Kevin's audience is 60+; nothing readable sits under 14px, interactive things
   under 40px, and the mobile product zoom image never escapes its frame. */
.wp-block-pages-list__item, .wp-block-navigation-item,
footer .wp-block-navigation a { font-size: 15px !important; }
footer .has-text-align-center.wp-block-paragraph,
.has-text-align-center.wp-block-paragraph.small,
p.has-text-align-center[class*="small"] { font-size: 14px !important; }
.wp-block-navigation__submenu-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 12px; box-sizing: border-box; }
.vcap, .tnote { font-size: 15px !important; }
.evsource, .shop-note, .small, .fs-note { font-size: 14px !important; }
.kcar-nav { min-height: 44px; min-width: 44px; }
.kd-trust { font-size: 14.5px; }
.wc-block-grid__product { font-size: 14px; }
.woocommerce-product-gallery { overflow: hidden; }
.zoomImg { max-width: none; }

/* ── Aug-12 builder primitives: rows that collapse HONESTLY (Andrew's audit round 2) ──
   Any flex row of tcards half-wrapped into a zigzag at tablet; media cards sat one per
   row, alternating sides, at desktop. The rules live on the primitives, so every page
   Kevin composes with these blocks inherits the correct collapse. */
@media (max-width: 880px) {
  .is-layout-flex:has(> .tcard) { flex-direction: column; }
  .is-layout-flex > .tcard { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .pq.feat { margin-inline: auto; }
}
@media (min-width: 900px) {
  .wp-block-group:has(> .mcard) { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .wp-block-group:has(> .mcard) > .mcard { width: auto; max-width: none; }
}
@media (max-width: 899px) {
  .wp-block-group:has(> .mcard) > .mcard { width: 100%; max-width: 100%; margin-inline: auto; }
}

/* ── Aug-12 builder primitives, round 2: no orphaned cards (audit offcenter class) ──
   .triad/.pgrid auto-fit to 2 columns at tablet and strand an odd LAST card hugging the
   left; .pathgrid.cols3 does the same between 761-880. The orphan now takes the full
   row, centered at column width — every page built from these patterns inherits it. */
@media (max-width: 920px) {
  .triad > .tcard:last-child:nth-child(odd),
  .pgrid > .pcard:last-child:nth-child(odd),
  .pathgrid > .path:last-child:nth-child(odd),
  .quotes > .q:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: min(100%, calc(50% - 10px));
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .triad > .tcard:last-child:nth-child(odd),
  .pgrid > .pcard:last-child:nth-child(odd),
  .pathgrid > .path:last-child:nth-child(odd),
  .quotes > .q:last-child:nth-child(odd) { width: 100%; }
}