/* Shared base for joannahortonmcpherson.com and trueinfluencemethod.com. Palette: Branding Kit Scheme #5.
   Older note: palette and type from TIM brand standards (TIM Product Plan, Jul 2026): Navy #0F203D, Gold #B8924A, Light Gold #D4B478, Cream #F8F4EC; type per Branding Kit Mar 2025 (Playfair Display, Montserrat, Cormorant Garamond).
   True Influence Method site preview v2 — Meet-Matt-style layout on brand kit draft one.
   Layout: full-bleed photo heroes with overlaid uppercase titles, alternating photo/text story rows,
   praise cards, opt-in bands, press strip, rich footer. */
:root{
  --navy:#1F2A44; --navy-deep:#161F35; --gold:#C9A876; --gold-light:#E2CFA6; --linen:#F8F4EC; --espresso:#3A2A1E; --apricot:#E2CFA6; --stone:#5E656B; --sage:#A3B5A5; --blush:#E8D4C4; --slate:#5E656B;
  --bg:#F8F4EC; --fg:#1F2A44; --muted:#5E656B; --line:#DED5C7; --plate:#F0E8DC; --card:#FFFDF8;
  --display:"Cormorant Garamond", Garamond, Georgia, "Times New Roman", serif;
  --body:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script:"Allura", "Brush Script MT", cursive;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.7}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:1140px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.narrow{max-width:760px}

/* Matt-style headings: bold, uppercase, tracked sans; serif kept for quotes */
.h-xl{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.04em;line-height:1.05;font-size:clamp(38px,6.6vw,78px)}
.h-lg{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1.15;font-size:clamp(26px,3.6vw,40px)}
.h-md{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;font-size:clamp(18px,2vw,22px)}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--gold)}
.sub-caps{font-size:clamp(14px,1.6vw,18px);letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.lead{font-size:18px;line-height:1.7}
.muted{color:var(--muted)}
.serif-q{font-family:var(--display);font-style:italic;font-weight:400}

.preview-flag{background:var(--gold);color:var(--navy);font-size:12px;text-align:center;padding:6px 16px;letter-spacing:.04em}

/* header */
.site-head{background:var(--navy);color:var(--linen);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:14px}
.wordmark{font-weight:500;letter-spacing:.3em;font-size:11px;line-height:1.45;text-transform:uppercase;text-decoration:none;color:var(--linen)}
.wordmark i{display:block;width:22px;height:2px;background:var(--gold);margin-top:6px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.nav a{text-decoration:none;color:var(--linen);padding-block:4px;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--gold)}
.nav .nav-cta{border:1.5px solid var(--gold);padding:7px 12px;color:var(--gold);background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}

/* buttons */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:15px 24px;border:2px solid var(--navy);text-decoration:none;cursor:pointer;background:none;color:var(--fg);text-align:center}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-apricot{background:var(--apricot);border-color:var(--apricot);color:var(--navy)}
.btn-navy{background:var(--navy);color:var(--linen)}
.btn-ghost-light{border-color:var(--linen);color:var(--linen)}
.btn-block{display:block;width:100%}
.btn:focus-visible,.nav a:focus-visible,.nav .nav-cta:focus-visible,.chip:focus-visible,.q-opt:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* full-bleed photo hero with overlay */
.photo-hero{position:relative;min-height:clamp(440px,72vh,720px);display:flex;align-items:flex-end;color:var(--linen);overflow:hidden}
.photo-hero .ph-img{position:absolute;inset:0;background:var(--hero-img,linear-gradient(150deg,#D4B478 0%,#B8924A 30%,#3A2A1E 65%,#0F203D 100%))}
.photo-hero .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,32,61,.05) 30%,rgba(15,32,61,.88) 100%)}
.photo-hero .ph-label{position:absolute;top:18px;right:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px dashed rgba(245,240,230,.6);padding:6px 10px;color:var(--linen)}
.photo-hero .wrap{position:relative;width:100%;padding-block:clamp(40px,7vw,80px);display:grid;gap:16px}
.photo-hero p{max-width:60ch;color:#E6E1D6}

/* sections */
.sec{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:12px;margin-bottom:36px;justify-items:center;text-align:center}
.sec-head p{max-width:62ch;color:var(--muted)}
.dark{background:var(--navy);color:var(--linen)}
.dark .muted,.dark p{color:#C9CCD6}
.plate{background:var(--plate)}
.espresso{background:var(--espresso);color:var(--linen)}
.espresso p{color:#E8DCCB}

/* photo placeholder blocks */
.photo{background:linear-gradient(160deg,#D4B478 0%,#B8924A 40%,#3A2A1E 100%);aspect-ratio:4/5;max-width:100%;display:flex;align-items:flex-end;padding:16px;color:#F8F4EC;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.photo.wide{aspect-ratio:4/3}
.photo.cool{background:linear-gradient(160deg,#6E7076 0%,#0F203D 100%)}
.photo.warm{background:linear-gradient(160deg,#F8F4EC 0%,#B8924A 55%,#3A2A1E 100%)}

/* split + alternating story rows */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,72px);align-items:center}
.split .copy{display:grid;gap:18px;min-width:0}
.story{display:grid;gap:clamp(56px,8vw,96px)}
.story .split:nth-child(even) .photo{order:2}
@media (max-width:780px){.split{grid-template-columns:1fr}.story .split:nth-child(even) .photo{order:0}}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stat b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,54px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* signature divider */
.signature{font-family:var(--script);font-size:clamp(46px,7vw,72px);color:var(--gold);text-align:center;line-height:1;padding-block:8px}

/* praise */
.praise{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.pcard{background:var(--card);border:1px solid var(--line);padding:28px;display:grid;gap:16px;align-content:start}
.pcard q{font-weight:600;font-size:17px;line-height:1.5;quotes:"“" "”"}
.who{display:flex;gap:12px;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.who b{display:block;font-weight:600;font-size:14px}
.who span{font-size:12.5px;color:var(--muted)}

/* opt-in bands */
.optin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.optin .copy{display:grid;gap:14px;min-width:0}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.form input[type=text],.form input[type=email]{font:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--line);background:var(--card);color:var(--fg);width:100%}
.form .check{display:flex;gap:8px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:300;font-size:13px}
.form .done{font-weight:500;color:var(--gold)}
@media (max-width:780px){.optin{grid-template-columns:1fr}}
@media (max-width:420px){.form .two{grid-template-columns:1fr}}

/* press strip */
.press{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 44px;align-items:center}
.press span{font-family:var(--display);font-size:clamp(17px,2vw,22px);opacity:.85;white-space:nowrap}
.press span.sans{font-family:var(--body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(13px,1.5vw,16px)}

/* offer cards */
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.offer{background:var(--card);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;min-width:0}
.offer .photo{aspect-ratio:16/10}
.offer .body{padding:22px;display:grid;gap:10px;align-content:start}
.offer .kind{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.offer .price{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.offer p{font-size:14.5px;color:var(--muted)}
.offer .btn{justify-self:start;margin-top:6px}
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:center}
@media (max-width:780px){.band{grid-template-columns:1fr}}

/* quiz banner card */
.quiz-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 28px;border:2px solid var(--gold);padding:22px 26px;background:var(--card)}
.quiz-card b{font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* footer */
.site-foot{background:var(--navy);color:#C9CCD6;font-size:13.5px}
.site-foot .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding-block:56px 32px}
.site-foot b{color:var(--linen);font-weight:600;display:block;margin-bottom:8px;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.site-foot a{display:block;text-decoration:none;color:#C9CCD6;padding-block:2px}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{width:36px;height:36px;border:1px solid #33415E;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.04em}
.site-foot .rel{border-top:1px solid #26314A;padding-block:22px;font-family:var(--display);font-style:italic;color:var(--linen)}
.site-foot .legal{border-top:1px solid #26314A;padding-block:16px;font-size:12px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ebook covers */
.cover{aspect-ratio:2/3;max-width:100%;display:grid;grid-template-rows:auto 1fr auto;padding:16px 14px;gap:10px;position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:8px;border:1px solid currentColor;opacity:.25;pointer-events:none}
.cover .series{font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;opacity:.85}
.cover .t{font-family:var(--display);font-size:clamp(17px,2vw,21px);line-height:1.15;align-self:center}
.cover .by{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cover .rule{display:block;width:26px;height:2px;background:var(--gold);margin-top:10px}
.c-char{background:var(--linen);color:var(--navy)}
.c-conn{background:var(--espresso);color:var(--linen)}
.c-cont{background:var(--navy);color:var(--linen)}
.c-full{background:linear-gradient(165deg,#D4B478 0%,#B8924A 38%,#3A2A1E 72%,#0F203D 100%);color:var(--linen)}

/* quiz modal */
.qm{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(8,16,32,.62)}
.qm-box{background:var(--bg);color:var(--fg);width:min(640px,100%);max-height:calc(100% - 32px);overflow:auto;display:grid;grid-template-rows:auto 1fr;border-top:5px solid var(--gold)}
.qm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.qm-top .eyebrow{color:var(--muted)}
.qm-x{font:inherit;font-size:22px;line-height:1;background:none;border:none;color:var(--fg);cursor:pointer;padding:4px 8px}
.qm-body{padding:26px 22px 28px;display:grid;gap:18px}
.qm-progress{height:3px;background:var(--line)}
.qm-progress i{display:block;height:100%;background:var(--gold);transition:width .3s ease}
.q-opts{display:grid;gap:10px}
.q-opt{font:inherit;text-align:left;padding:14px 16px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;font-size:15px;line-height:1.45}
.q-opt:hover{border-color:var(--gold)}
.q-result{display:grid;gap:14px}
.q-phase{display:inline-block;border:1px solid var(--gold);justify-self:start;padding:6px 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.q-recs{display:grid;gap:10px}
.q-rec{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px;border:1px solid var(--line);background:var(--card);align-items:baseline}
.q-rec .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);grid-row:span 2}
.q-rec a{font-weight:600;text-decoration:none}
.q-rec span{font-size:13.5px;color:var(--muted)}
@media (max-width:480px){.q-rec{grid-template-columns:1fr}.q-rec .k{grid-row:auto}}
@media (prefers-reduced-motion:reduce){.qm-progress i{transition:none}}

/* keep outline buttons visible on dark surfaces and in dark mode */
.dark .btn:not(.btn-gold):not(.btn-apricot):not(.btn-ghost-light),.espresso .btn:not(.btn-gold):not(.btn-apricot){border-color:var(--gold);color:var(--linen)}
.tile-note{font-size:12.5px;color:var(--muted)}

/* real photos */
.photo.img{background:var(--img) var(--pos,center)/cover no-repeat,var(--plate);font-size:0;padding:0}
.dark .offer{color:var(--fg)}.dark .offer p{color:var(--muted)}
.photo-hero .ph-img::after{background:linear-gradient(180deg,rgba(15,32,61,.15) 0%,rgba(15,32,61,.35) 40%,rgba(15,32,61,.9) 100%)}

/* Brand type, per the Women of Influence Branding Kit (March 2025):
   Primary  Playfair Display   headers, taglines (wordmark in Playfair Display SC)
   Secondary Montserrat        body text, subheadings, navigation, buttons
   Accent   Cormorant Garamond quotes and emotional moments */
:root{--heading:"Playfair Display",Georgia,"Times New Roman",serif;--heading-sc:"Playfair Display SC","Playfair Display",Georgia,serif;
  --body:"Montserrat","Helvetica Neue",Arial,sans-serif;--display:"Cormorant Garamond",Garamond,Georgia,serif}
:root main :is(h1,h2,h3){font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.2}
:root .h-xl{font-family:var(--heading-sc);font-weight:400;text-transform:none;letter-spacing:.03em;line-height:1.05}
:root .h-lg{font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.2}
:root .h-md{font-family:var(--heading);font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3;font-size:clamp(19px,2.1vw,23px)}
.wordmark{font-family:var(--heading-sc);font-weight:400;letter-spacing:.14em;font-size:15px;line-height:1.25;text-transform:none}
.stat b{font-family:var(--heading)}
.cover .t{font-family:var(--heading)}
.serif-q,blockquote,.site-foot .rel{font-family:var(--display)}
.serif-q,blockquote{font-size:1.08em}
.lead{font-weight:300}
.photo-hero .eyebrow{color:var(--gold-light);text-shadow:0 1px 8px rgba(15,32,61,.6)}

/* ---- Companion-site components ---- */
.site-head .wrap{align-items:center}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--linen)}
.brand img{width:46px;height:auto;display:block}
.brand .bn{display:grid;gap:2px}
.brand .bn b{font-family:var(--heading-sc);font-weight:400;font-size:17px;letter-spacing:.08em;line-height:1.15}
.brand .bn small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.nav a.ext::after{content:" ↗";font-size:.9em;color:var(--gold)}
.nav-toggle{display:none;background:none;border:1.5px solid var(--gold);color:var(--gold);font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;cursor:pointer}
@media (max-width:900px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}
.foot-brands{display:flex;flex-wrap:wrap;gap:14px 36px;align-items:center;padding-top:40px}
.foot-brands a{display:flex !important;align-items:center;gap:10px;color:var(--linen) !important}
.foot-brands img{width:38px}
.foot-brands b{font-family:var(--heading-sc);font-weight:400;font-size:16px;letter-spacing:.06em;margin:0 !important;color:inherit !important;text-transform:none !important}
.cross{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);align-items:center}
.cross .copy{display:grid;gap:16px;min-width:0}
@media (max-width:780px){.cross{grid-template-columns:1fr}}
.cross .roundel{width:min(260px,70%);justify-self:center}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;opacity:.9}

/* ---- joannahortonmcpherson.com: cream ground (base), navy header and one navy method band ---- */
.dark .roundel{filter:drop-shadow(0 6px 24px rgba(0,0,0,.25))}
.dark .chip-row span{color:var(--gold-light)}
.quote-feature{display:grid;gap:18px;max-width:900px}
.quote-feature blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(26px,3.2vw,40px);line-height:1.25}
.cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:40px}
.voices figure{margin:0;border-top:2px solid var(--gold);padding-top:18px;display:grid;gap:12px;align-content:start}
.voices blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:21px;line-height:1.35}
.coverage{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.coverage li{border-bottom:1px solid var(--line)}
.coverage a{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 90px;gap:20px;padding:18px 0;text-decoration:none;align-items:baseline}
.coverage .src{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.coverage h3{font-family:var(--heading);font-weight:700;font-size:clamp(18px,1.9vw,22px);line-height:1.3}
.coverage a:hover h3{color:var(--gold)}
.coverage .date{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){.coverage a{grid-template-columns:1fr;gap:4px}.coverage .date{text-align:left}}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-block:8px 24px}
.tabs button{font:500 13px/1 var(--body);letter-spacing:.04em;padding:12px 16px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--linen);box-shadow:inset 0 -3px 0 var(--gold)}
.tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.creds{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold)}
.creds li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;margin-top:8px}
.pillar{padding:24px 22px;display:grid;gap:8px;align-content:start}
.pillar .n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.85}
.pillar h3{font-size:20px}
.pillar p{font-size:14.5px;line-height:1.55}
.tbl{overflow-x:auto;border-top:2px solid var(--gold)}
.tbl table{border-collapse:collapse;width:100%;min-width:760px;font-size:14px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--heading);font-weight:700;font-size:15px}
.tbl tbody th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;width:150px}
.tbl td.hl,.tbl th.hl{background:var(--plate)}
details.faq{border-bottom:1px solid var(--line);padding-block:14px}
details.faq summary{font-family:var(--heading);font-weight:700;font-size:18px;cursor:pointer;list-style-position:outside}
details.faq p{margin-top:10px;max-width:68ch}
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kit .photo{aspect-ratio:4/5}
.contact-card{background:var(--card);border:1px solid var(--line);padding:22px;display:grid;gap:6px;align-content:start}
.contact-card .val{font-family:var(--heading);font-weight:700;font-size:22px}
.two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.panel{background:var(--card);border:1px solid var(--line);padding:clamp(22px,3vw,34px);display:grid;gap:14px;align-content:start}
.panel .cover{max-width:180px}

/* header: keep one row on laptops, menu button below 1100px */
.nav{gap:6px 16px;font-size:11.5px}
@media (max-width:1100px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}
.split.premise{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
@media (max-width:780px){.split.premise{grid-template-columns:1fr}}

/* ---- Letters from Joanna: newsletter and paid-subscriber wall ---- */
.letter{max-width:680px;margin:0 auto;display:grid;gap:22px}
.letter .meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.letter h1{font-family:var(--heading);font-weight:700;font-size:clamp(32px,4.6vw,50px);line-height:1.12;text-transform:none;letter-spacing:0}
.letter .dek{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.4vw,26px);line-height:1.4;color:var(--muted)}
.letter .body{display:grid;gap:20px;font-size:18px;line-height:1.8}
.letter .body p:first-child::first-letter{font-family:var(--heading);float:left;font-size:3.6em;line-height:.85;padding:6px 10px 0 0;color:var(--gold)}
.locked{position:relative}
.locked .rest{display:grid;gap:20px;font-size:18px;line-height:1.8}
.locked.is-locked .rest{max-height:9.5em;overflow:hidden;filter:blur(5px);user-select:none;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0%,transparent 95%);mask-image:linear-gradient(#000 0%,transparent 95%)}
.paywall{background:var(--navy);color:var(--linen);padding:clamp(24px,4vw,40px);display:grid;gap:14px;justify-items:center;text-align:center;border-top:4px solid var(--gold);margin-top:-8px}
.paywall h2{font-family:var(--heading);font-weight:700;font-size:clamp(22px,2.6vw,28px);text-transform:none;letter-spacing:0}
.paywall p{color:#D9D4CA;max-width:46ch}
.paywall .row{justify-content:center}
.paywall .signin{background:none;border:0;color:var(--gold-light);font:500 13px var(--body);text-decoration:underline;cursor:pointer}
.locked:not(.is-locked) + .paywall{display:none}
.viewas{display:flex;gap:6px;align-items:center;justify-content:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.viewas button{font:500 12px var(--body);padding:6px 10px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.viewas button[aria-pressed="true"]{background:var(--navy);color:var(--linen);border-color:var(--navy)}
.archive{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold)}
.archive li{border-bottom:1px solid var(--line)}
.archive a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;padding:20px 0;text-decoration:none;align-items:baseline}
.archive h3{font-family:var(--heading);font-weight:700;font-size:clamp(19px,2vw,23px)}
.archive p{grid-column:1;color:var(--muted);font-size:15px}
.archive .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--gold);white-space:nowrap}
.archive a:hover h3{color:#9C7F45}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan{background:var(--card);border:1px solid var(--line);padding:24px;display:grid;gap:10px;align-content:start}
.plan.paid{background:var(--navy);color:var(--linen);border-color:var(--navy)}
.plan.paid p,.plan.paid li{color:#D9D4CA}
.plan ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:14.5px}
.plan .price{font-family:var(--heading);font-size:26px;font-weight:700}
.plan .price small{font-family:var(--body);font-size:13px;font-weight:400;opacity:.8}

/* ---- Wordmarks matched to the logo files ----
   Joanna: Playfair Display caps, JOANNA semibold over HORTON MCPHERSON regular, both widely tracked (JHM logo files).
   TIM: Marcellus caps in the roundel's gold, the closest web face to the roundel lettering. */
:root{--logo-gold:#F2A93B}
.wm-jhm{display:inline-grid;justify-items:center;gap:7px;line-height:1;font-family:"Playfair Display",Georgia,serif;text-transform:uppercase;color:var(--linen);text-decoration:none}
.wm-jhm .a{font-weight:600;font-size:21px;letter-spacing:.3em;margin-right:-.3em}
.wm-jhm .b{font-weight:400;font-size:10.5px;letter-spacing:.34em;margin-right:-.34em}
.wm-tim{font-family:"Marcellus","Cinzel",Georgia,serif;font-weight:400;text-transform:uppercase;letter-spacing:.16em;color:var(--logo-gold);font-size:15px;line-height:1.15}
.brand .bn small{font-family:var(--body)}
.foot-brands .wm-jhm .a{font-size:17px}.foot-brands .wm-jhm .b{font-size:9px}
.foot-brands .wm-tim{font-size:14px}
.foot-brands a.wm-jhm{display:inline-grid !important;gap:6px}
/* one-row header on wide screens; menu button below 1200px */
@media (min-width:1201px){
 .site-head .wrap{flex-wrap:nowrap}
 .nav{flex-wrap:nowrap;white-space:nowrap;letter-spacing:.08em;font-size:11px;gap:18px}
}
@media (max-width:1200px){
 .nav-toggle{display:inline-block}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}
.site-head .wm-jhm,.site-head .brand{flex:none}.wm-jhm span,.wm-tim{white-space:nowrap}
@media (min-width:1201px) and (max-width:1320px){
 .nav-toggle{display:inline-block}
 .site-head .wrap{flex-wrap:wrap}
 .nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px 12px}
 .site-head.open .nav{display:flex}
}

/* ---- front-door links: one line per destination ---- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.door{background:var(--bg);padding:24px 22px 26px;display:grid;gap:8px;align-content:start;text-decoration:none;min-width:0}
.door:hover{background:var(--card)}
.door .eyebrow{font-size:11px}
.door h3{font-family:var(--heading);font-weight:700;font-size:20px}
.door p{font-size:14.5px;color:var(--muted)}
.door .go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-top:4px}
.inline-x{border-top:1px solid var(--line);padding-top:18px;font-size:15px}
.inline-x a{font-weight:600;color:var(--navy)}
.site-foot .cols{display:none}
.doors{grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:960px){.doors{grid-template-columns:1fr}}
[hidden]{display:none!important}.qm[hidden]{display:none!important}

/* ==========================================================================
   LAYOUT SYSTEM (both sites)
   1. Rule of thirds: two-column sections divide the width into thirds.
      An image or form takes one third, the words take two thirds, and
      hero text sits inside the left two thirds of the photo.
   2. Alignment: cards in a row share the same internal rows (subgrid), so
      eyebrows, titles, descriptions, prices and buttons line up across the
      row no matter how long each card's text is. A missing line keeps its
      slot, so nothing shifts.
   ========================================================================== */

/* ---------- 0. Headings use the full width of their column ----------
   Balanced wrapping split headings into two short equal lines, which looked
   narrow on wide screens. Pretty wrapping fills the line and only avoids a
   lonely last word. */
h1,h2,h3{text-wrap:pretty}

/* ---------- 1. Rule of thirds (laptop, tablet and wide phone; stacks below 640px) ---------- */
@media (min-width:641px){
  .story .split:nth-child(even) .photo{order:2}
  /* image or cover first: image one third, words two thirds */
  .split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
  /* image last (or alternated to the right): words two thirds, image one third */
  .split:has(> .photo:last-child),
  .split:has(> .cover:last-child),
  .story .split:nth-child(even){grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important}
  /* main offer plus a side note: main two thirds, note one third */
  .split:has(> #subscribe){grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important}
  /* media kit: bio one third, approved photos two thirds */
  .split:has(> .kit){grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
  /* sign-up blocks: invitation one third, form two thirds */
  .optin{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* emblem one third, words two thirds */
  .cross{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  /* hero copy sits inside the left two thirds of the photo */
  .photo-hero .wrap > *{max-width:66.666%}
  .photo-hero .wrap .row{max-width:none}
}

/* ---------- 2. Aligned cards ---------- */
@supports (grid-template-rows:subgrid){

  /* Shop: workbooks (cover / flag / title / description / price+button / phase) */
  .shelf{align-items:start;row-gap:0!important}
  .shelf > .book{margin-bottom:36px}
  .shelf > .book{grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:stretch}
  .shelf > .book > .wbc,.shelf > .book > .gp-cover{margin-bottom:16px}
  .shelf > .book > .wbc,.shelf > .book > .gp-cover{grid-row:1}
  .shelf > .book > .info{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
  .shelf > .book > .info > .flag{margin-bottom:8px}
  .shelf > .book > .info > .sub{margin-top:8px}
  .shelf > .book > .info > .buy{margin-top:12px}
  .shelf > .book > .info > .ph{margin-top:8px}
  .shelf > .book > .info > .flag{grid-row:1;align-self:end}
  .shelf > .book > .info > h3{grid-row:2}
  .shelf > .book > .info > .sub{grid-row:3}
  .shelf > .book > .info > .buy{grid-row:4;align-self:start}
  .shelf > .book > .info > .ph{grid-row:5}

  /* Shop: merch (photo / name / description / price+button) */
  .mgrid > .prod{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .mgrid > .prod > .pimg{grid-row:1}
  .mgrid > .prod > .pb{grid-row:2 / span 3;display:grid;grid-template-rows:subgrid;row-gap:8px}
  .mgrid > .prod > .pb > h3{grid-row:1}
  .mgrid > .prod > .pb > p{grid-row:2}
  .mgrid > .prod > .pb > .buy{grid-row:3;align-self:end;margin-top:0}

  /* Programs and advising (photo / kind / title / price / description / button) */
  .offers > .offer{grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .offers > .offer > .photo{grid-row:1}
  .offers > .offer > .body{grid-row:2 / span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
  .offers > .offer > .body > h3{margin-top:10px}
  .offers > .offer > .body > .price{margin-top:10px}
  .offers > .offer > .body > p{margin-top:10px}
  .offers > .offer > .body > .kind{grid-row:1}
  .offers > .offer > .body > h3{grid-row:2}
  .offers > .offer > .body > .price{grid-row:3}
  .offers > .offer > .body > p{grid-row:4}
  .offers > .offer > .body > .btn{grid-row:5;align-self:end;margin-top:14px}

  /* Doors (eyebrow / title / description / link) */
  .doors > .door{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .doors > .door > .eyebrow{margin-bottom:8px}
  .doors > .door > p{margin-top:8px}
  .doors > .door > .go{margin-top:12px}
  .doors > .door > .eyebrow{grid-row:1}
  .doors > .door > h3{grid-row:2}
  .doors > .door > p{grid-row:3}
  .doors > .door > .go{grid-row:4;align-self:end}

  /* Pillars and book parts (label / title / description) */
  .pillars > .pillar{grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}

  /* Client quotes (quote / name) */
  .voices > figure{grid-row:span 2;grid-template-rows:subgrid;row-gap:12px}
  .voices > figure > figcaption{align-self:end}

  /* Plans and contact cards: action sits on one line across the row */
  .plans > .plan,.two-up > .contact-card,.two-up > .panel{align-content:stretch}
  .plans > .plan > .btn,.plans > .plan > .form,.two-up > .contact-card > .btn,.two-up > .panel > .btn{align-self:end}
}

/* Five phases (number / title / line), on wide screens where they sit in a row */
@media (min-width:861px){
  @supports (grid-template-rows:subgrid){
    .ptrack > .pc{grid-row:span 3;grid-template-rows:subgrid;row-gap:10px}
    .ptrack > .pc > div{grid-row:2 / span 2;display:grid;grid-template-rows:subgrid;row-gap:6px}
    .ptrack > .pc > div > p{margin-top:0}
  }
}

/* Client story cards: the "Watch" link sits on the same line in every card */
.vgrid{align-items:stretch}
.vgrid > .vstory:not(.hasimg){aspect-ratio:auto;min-height:clamp(200px,24vw,270px)}
.vstory.hasimg{height:100%}
.vstory.hasimg .vtext{flex:1}
.vstory .vtext .go{margin-top:auto}
.vgrid > .vstory:not(.hasimg){justify-content:flex-end}

/* Library rows: download buttons line up */
.lib{align-items:stretch}
.lib > .lib-item .meta{height:100%;grid-template-rows:auto auto 1fr}
.lib > .lib-item .meta .btn{align-self:end}
.vids{align-items:stretch}
.vids > .vid{grid-template-rows:auto 1fr}
.vids > .vid .meta{grid-template-rows:auto auto 1fr auto}

/* ---------- 3. Tablet and narrow laptop (641-1000px): grids divide evenly ---------- */
@media (min-width:641px) and (max-width:1000px){
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .offers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Four doors: four across on desktop, two by two on tablet (no lonely card) */
@media (min-width:1001px){.doors:has(> .door:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media (min-width:641px) and (max-width:1000px){.doors:has(> .door:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Distinct footers: each site leads with its own brand; the companion site is a small link */
.site-foot .foot-main{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:44px;padding-bottom:28px}
.site-foot .foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.site-foot .foot-links a{display:inline;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.site-foot .legal .companion{display:inline-flex;align-items:center;gap:8px}
.site-foot .legal a{display:inline}
.site-foot .legal .companion img{width:22px}
.foot-jhm{background:#EFE7DA;color:#3D4660}
.foot-jhm .wm-jhm{color:#1F2A44}
.foot-jhm .wm-jhm .a{font-size:24px}.foot-jhm .wm-jhm .b{font-size:11px}
.foot-jhm a{color:#1F2A44}
.foot-jhm .rel{border-top:1px solid #D8CDBB;color:#1F2A44}
.foot-jhm .legal{border-top:1px solid #D8CDBB;color:#5A6378}
.foot-jhm .legal .companion a{color:#8A6D35;font-weight:600}
.foot-tim .foot-emblem{display:inline-flex!important;align-items:center;gap:14px;text-decoration:none}
.foot-tim .foot-emblem img{width:58px}
.foot-tim .foot-emblem .wm-tim{font-size:17px}
.foot-tim .legal .companion a{color:var(--gold-light,#E9D9B8);font-weight:600}
@media (max-width:640px){.site-foot .foot-main{flex-direction:column;align-items:flex-start}}
.foot-jhm a.wm-jhm{display:inline-grid!important;justify-items:center;gap:7px}