:root{
  --m:40px;          /* margins for header, hero, media, filter bar */
  --g:96px;          /* margins for the story grid */
  --gap:64px;        
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--parchment); color:var(--ink); font:400 16px/1.5 var(--ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{display:block; max-width:100%; height:auto}
:where(.site) a{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; background:var(--white); color:var(--teal); padding:12px 16px; font:600 14px var(--ui); z-index:10}
.skip:focus{left:16px; top:48px}

/* ---------- shared type ---------- */
.eyebrow{font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0}
.eyebrow .sep{display:inline-block; margin:0 .7em; color:var(--rule)}
.mark{color:var(--gold)}
.site .pl-connection-to-self{color:var(--self)}
.site .pl-connection-to-others{color:var(--others)}
.site .pl-health-vitality{color:var(--vitality)}
.site .pl-foundations{color:var(--foundations)}
.h1{font:800 44px/1.14 var(--display); letter-spacing:-.012em; margin:0; color:var(--ink); text-wrap:balance}
.h2{font:700 30px/1.2 var(--display); letter-spacing:-.006em; margin:0; color:var(--ink); text-wrap:balance}
.h3{font:700 23px/1.25 var(--display); margin:0; color:var(--ink); text-wrap:balance}
.subtitle{font:italic 400 20px/1.5 var(--read); color:var(--ink-2); margin:12px 0 0; text-wrap:pretty}
.lede{font:400 18px/1.6 var(--read); color:var(--ink-2); margin:0; text-wrap:pretty}
.fine{font:400 13px/1.45 var(--ui); color:var(--ink-3); margin:10px 0 0}

.textlink{font:500 14px/1.3 var(--ui); color:var(--teal); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:5px; text-decoration-color:currentColor; display:inline-flex; align-items:center; min-height:44px}
.textlink:hover,.textlink:focus-visible{text-decoration-thickness:2px; color:var(--ink)}

/* ---------- buttons and forms ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px; border:0; border-radius:4px;
  background:var(--teal); color:var(--white); font:600 14px/1 var(--ui); letter-spacing:.01em; text-decoration:none; cursor:pointer;
  white-space:nowrap; transition:background-color .25s ease}
.site a.btn{color:var(--white)}
.btn:hover,.btn:focus-visible{background:var(--ink)}
.form{display:flex; gap:8px; margin:18px 0 0}
.input{flex:1 1 auto; min-width:0; height:48px; padding:0 16px; border:1px solid var(--rule); border-radius:4px; background:var(--white);
  color:var(--ink); font:400 16px/1 var(--ui)}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:var(--ink-3)}
.input:focus-visible{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal)}

/* ---------- layout ---------- */
.wrap{max-width:1440px; margin:0 auto; padding:0 var(--m)}
.wrap-g{max-width:1440px; margin:0 auto; padding:0 var(--g)}
.tint{background:var(--stone)}


.mast{border-bottom:1px solid var(--rule); background:var(--parchment)}
.mast-in{max-width:1440px; margin:0 auto; padding:0 var(--m); height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.wordmark{font:700 23px/1 var(--display); letter-spacing:-.015em; color:var(--ink); text-decoration:none; justify-self:start; padding:12px 0}
.site a.wordmark{color:var(--ink)}
.wordmark span{color:var(--ink-3)}
.wordmark:hover span,.wordmark:focus-visible span{color:var(--teal)}
.nav{display:flex; gap:36px}
.nav a{position:relative; font:600 11.5px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:18px 0}
.site .nav a{color:var(--ink)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:11px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s ease}
.site .nav a:hover,.site .nav a:focus-visible{color:var(--teal)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current]::after{transform:scaleX(1)}
.mast-end{justify-self:end; display:flex; align-items:center}
.quiet{font:500 13px/1 var(--ui); text-decoration:none; padding:16px 0}
.site a.quiet{color:var(--ink-2)}
.site a.quiet:hover,.site a.quiet:focus-visible{color:var(--teal); text-decoration:underline; text-underline-offset:4px}
.menu{display:none}

/* ---------- home hero band ---------- */
.hero{padding:56px 0 var(--m)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; align-items:end; margin:0 0 40px}
.signup-mini .lede{color:var(--ink); max-width:44ch}
.signup-mini .eyebrow{margin:0 0 10px}

/* contained media with overlapping caption card */
.media{position:relative; margin:0}
.media > img{width:100%; aspect-ratio:2.2/1; object-fit:cover; background:var(--deep-stone)}
.media--2x1 > img{aspect-ratio:2/1}
.caption{position:absolute; left:40px; bottom:40px; width:330px; background:var(--stone); padding:24px 24px 14px; margin:0}
.caption .eyebrow{margin:0 0 10px}
.caption-title{font:700 21px/1.3 var(--display); margin:0 0 2px; color:var(--ink); text-wrap:balance}
.caption-title a{text-decoration:none}
.site .caption-title a{color:var(--ink)}
.caption-title a:hover{text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:4px; text-decoration-thickness:1px}
.media--hang{margin-bottom:96px}
.media--hang .caption{bottom:-96px; width:360px; padding-bottom:16px}
.listen{display:flex; flex-wrap:wrap; gap:0 20px; margin:4px 0 0}

/* ---------- filter bar as pillar tabs ---------- */
.filter{display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 0; border-bottom:1px solid var(--rule)}
.tabs{display:flex; flex-wrap:wrap; gap:0 36px; margin:0; padding:0; list-style:none}
.tab{position:relative; display:inline-flex; align-items:center; min-height:44px; font:500 15px/1.2 var(--ui); text-decoration:none}
.tab::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s ease}
.tab:hover::after,.tab:focus-visible::after{transform:scaleX(1)}
.site .tab.tab-all{color:var(--ink)}
.tab-all::after{transform:scaleX(1)}
.filter .textlink{font-size:13px}

/* ---------- staggered 10-column story grid ---------- */
.sgrid{max-width:1440px; margin:0 auto; padding:var(--gap) var(--g); display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); column-gap:0; row-gap:var(--gap); align-items:start}
.sgrid--tight{padding-top:0}
.at-sl{grid-column:1 / 5}    /* small left  (4 cols) */
.at-lr{grid-column:6 / 11}   /* large right (5 cols) */
.at-ll{grid-column:1 / 6}    /* large left  (5 cols) */
.at-sr{grid-column:7 / 11}   /* small right (4 cols) */
.row1{grid-row:1} .row2{grid-row:2} .row12{grid-row:1 / span 2}
.drop-a{margin-top:198px} .drop-b{margin-top:93px} .drop-c{margin-top:140px}

.card{display:block; text-decoration:none; color:inherit}
.site a.card{color:inherit}
.card-img{overflow:hidden; background:var(--deep-stone)}
.card-img img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:opacity .3s ease, transform .8s ease}
.card:hover .card-img img,.card:focus-visible .card-img img{opacity:.88; transform:scale(1.015)}
.r-32 img{aspect-ratio:3/2} .r-54 img{aspect-ratio:5/4} .r-45 img{aspect-ratio:4/5} .r-169 img{aspect-ratio:16/9} .r-43 img{aspect-ratio:4/3}
.card-body{padding-top:22px}
.card-title{font:700 22px/1.3 var(--display); margin:9px 0 10px; color:var(--ink); text-wrap:balance}
.card:hover .card-title,.card:focus-visible .card-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; text-decoration-color:var(--teal)}
.card-dek{font:400 16px/1.55 var(--read); color:var(--ink-2); margin:0; max-width:54ch; text-wrap:pretty}
.card-meta{font:400 13px/1.4 var(--ui); color:var(--ink-3); margin:8px 0 0}

/* ---------- full-bleed split bands ---------- */
.split{display:grid; grid-template-columns:minmax(0,34fr) minmax(0,66fr); margin:0}
.split--wide{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
.split--half{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split--rev .split-text{order:2}
.split-text{background:var(--stone); padding:64px 72px; display:flex; flex-direction:column; justify-content:space-between; gap:48px}
.split-img{margin:0; min-height:100%; background:var(--deep-stone)}
.split-img img{width:100%; height:100%; object-fit:cover}
.split-top .h2{margin:10px 0 14px}
.split-bottom .card-title{font-size:21px}
.split-bottom .card-title a{text-decoration:none}
.site .split-bottom .card-title a{color:var(--ink)}
.split-bottom .card-title a:hover{text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:5px; text-decoration-thickness:1px}
.count{font:500 12px/1.4 var(--ui); color:var(--ink-3); margin:14px 0 0}

/* four pillar doors */
.doors{list-style:none; margin:28px 0 0; padding:0}
.door{border-top:1px solid var(--rule)}
.door:last-child{border-bottom:1px solid var(--rule)}
.door a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; padding:20px 0 22px; text-decoration:none}
.door-name{font:700 24px/1.2 var(--display); letter-spacing:-.005em}
.door-go{font:500 13px/1.2 var(--ui); color:var(--ink-3); align-self:center; white-space:nowrap}
.door-desc{grid-column:1 / -1; font:400 16px/1.55 var(--read); color:var(--ink-2); margin:0; text-wrap:pretty}
.door a:hover .door-name,.door a:focus-visible .door-name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.door a:hover .door-go,.door a:focus-visible .door-go{color:var(--teal)}


.shelf{background:var(--stone); padding:64px 0 72px}
.shelf-head{display:flex; justify-content:space-between; align-items:end; gap:8px 48px; flex-wrap:wrap; margin:0 0 36px}
.shelf-head .lede{margin-top:8px}
.shelf-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 32px; list-style:none; margin:0; padding:0}
.shelf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shelf .card-title{font-size:18px; margin:8px 0 6px}
.shelf .card-body{padding-top:16px}
.links-row{display:flex; flex-wrap:wrap; gap:0 22px; align-items:center}
.links-row .eyebrow{margin-right:6px}

.more{display:flex; justify-content:center; padding:56px 0 0}

/* ---------- article ---------- */
.crumbs{display:flex; flex-wrap:wrap; gap:0 10px; align-items:center; font:400 12px/1.4 var(--ui); color:var(--ink-3); padding:14px 0 8px; margin:0; list-style:none}
.crumbs a{display:inline-flex; align-items:center; min-height:36px; text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{text-decoration:underline; text-underline-offset:3px}
.crumbs li + li::before{content:"›"; margin-right:10px; color:var(--rule)}
.meta-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:36px 0 0}
.meta-row .textlink{font-size:13px}
.tgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; padding:14px 0 0}
.art-h1{font:800 46px/1.12 var(--display); letter-spacing:-.016em; margin:0 0 30px; text-wrap:balance}
.dateline{font:400 12px/1.4 var(--ui); color:var(--ink-3); margin:0 0 12px}
.byline{font:400 14px/1.65 var(--ui); color:var(--ink-2); margin:0}
.byline b{font-weight:500; color:var(--ink)}
.standfirst{font:500 23px/1.45 var(--read); color:var(--ink); margin:8px 0 0; text-wrap:pretty}
.tgrid .btn{margin-top:28px}

.read{max-width:calc(600px + 2 * var(--m)); margin:0 auto; padding:56px var(--m) 0}
.read p{font:400 20px/1.7 var(--read); margin:0 0 1.15em; color:var(--ink); text-wrap:pretty}
.read h2{font:700 29px/1.25 var(--display); letter-spacing:-.006em; margin:2.1em 0 .55em; color:var(--ink); text-wrap:balance}
.read > h2:first-child{margin-top:0}
.read a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
.read a:hover,.read a:focus-visible{text-decoration-thickness:2px}
.read--flush{padding-top:0}
.read .nue-note{font:400 16px/1.6 var(--ui); color:var(--ink-2); margin:2.4em 0 20px; padding:20px 0 0; border-top:1px solid var(--rule)}
.read .nue-note + h2{margin-top:1.6em}
.read .lead{font-weight:600}
.read .step{position:relative}
.step-l{position:absolute; left:-76px; top:.05em; width:48px; text-align:right; font:800 46px/1 var(--display); color:var(--gold)}

/* quote box: stone, no border, gold glyph */
.qbox{max-width:900px; margin:64px auto; background:var(--stone); padding:44px 72px 40px}
.qbox-glyph{display:block; font:400 76px/1 var(--read); color:var(--gold); height:34px; margin:0 0 6px}
.qbox blockquote{margin:0}
.qbox .q{font:400 28px/1.45 var(--read); color:var(--ink); margin:0; max-width:24em; text-wrap:balance}
.qbox .who{font:400 14px/1.4 var(--ui); color:var(--ink-3); margin:22px 0 0}

/* practice module */
.practice{max-width:900px; margin:72px auto; background:var(--stone); padding:48px 72px 40px}
.practice .h2{margin:10px 0 0}
.practice .lede{margin:12px 0 0; color:var(--ink-2)}
.steps{list-style:none; counter-reset:step; margin:26px 0 0; padding:0}
.steps li{counter-increment:step; display:grid; grid-template-columns:44px minmax(0,1fr); padding:14px 0; border-top:1px solid var(--rule);
  font:400 19px/1.6 var(--read); color:var(--ink); text-wrap:pretty}
.steps li::before{content:counter(step); font:500 18px/1.75 var(--display); color:var(--gold)}
.steps strong{font-weight:500}
.practice-text{font:400 19px/1.65 var(--read); margin:20px 0 0; color:var(--ink); text-wrap:pretty}
.handoff{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center; margin:28px 0 0; padding:28px 0 0; border-top:1px solid var(--rule)}
.nue-line{font:500 17px/1.5 var(--ui); color:var(--ink); margin:0}
.nue-line a{white-space:nowrap; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.nue-line a:hover,.nue-line a:focus-visible{text-decoration-thickness:2px}
.qr{display:grid; grid-template-columns:92px auto; gap:18px; align-items:center}
.qr img{width:92px; height:92px; background:var(--white); padding:4px}
.qr-cap{font:400 13px/1.4 var(--ui); color:var(--ink-2); margin:0; max-width:15ch}
.qr .textlink{font-size:13px; min-height:36px}

/* newsletter module (article, between episode row and related band) */
.nl{background:var(--stone); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; padding:56px 72px; margin:88px 0 0; align-items:center}
.nl .h2{margin:10px 0 0}
.nl .lede{color:var(--ink)}


.row{max-width:900px; margin:88px auto 0; display:grid; grid-template-columns:340px minmax(0,1fr); gap:48px; align-items:center}
.row-img img{width:100%; aspect-ratio:16/9; object-fit:cover}
.row-img--34 img{aspect-ratio:4/5}
.row .h3{margin:10px 0 8px}
.row .byline{margin:0 0 4px}
.row--34{grid-template-columns:220px minmax(0,1fr)}

.crisis{max-width:600px; margin:64px auto 0; padding:28px 0 0; border-top:1px solid var(--rule); font:italic 400 17px/1.65 var(--read); color:var(--ink-2)}
.crisis p{margin:0}
.crisis a{text-decoration:underline; text-underline-offset:3px}

/* ---------- footer ---------- */
.foot{margin:96px 0 0}
.foot--flush{margin-top:0; padding-top:64px}
.foot-box{background:var(--stone); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:24px 64px; align-items:center; padding:30px 40px}
.foot-box .pitch{font:400 20px/1.45 var(--read); color:var(--ink); margin:0; max-width:40ch; text-wrap:pretty}
.foot-box .pitch b{font:500 20px/1.2 var(--display); display:block; margin:0 0 4px}
.foot-box .form{margin:0}
.foot-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:48px 0 40px; border-bottom:1px solid var(--rule)}
.foot-cols .eyebrow{margin:0 0 14px}
.foot-cols ul{list-style:none; margin:0; padding:0}
.foot-cols li a{display:inline-flex; align-items:center; min-height:34px; font:400 14px/1.3 var(--ui); text-decoration:none}
.site .foot-cols li a:not([class*="pl-"]){color:var(--ink)}
.foot-cols li a:hover,.foot-cols li a:focus-visible{text-decoration:underline; text-underline-offset:4px}
.foot-id{font:italic 400 17px/1.5 var(--read); color:var(--ink-2); margin:10px 0 0; max-width:26ch; text-wrap:balance}
.foot-legal{display:flex; justify-content:space-between; gap:12px 40px; flex-wrap:wrap; padding:22px 0 40px; font:400 13px/1.55 var(--ui); color:var(--ink-3)}
.foot-legal p{margin:0; text-wrap:balance}

/* ---------- resources page ---------- */
.lib-band{padding:56px 0 56px}
.pillar{scroll-margin-top:24px}
.plist{max-width:1440px; margin:0 auto; padding:0 var(--g) var(--gap); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 64px; list-style:none}
.plist li{border-top:1px solid var(--rule)}
.plist a{display:grid; grid-template-columns:132px minmax(0,1fr); gap:20px; align-items:center; padding:18px 0; text-decoration:none}
.plist img{width:132px; aspect-ratio:3/2; object-fit:cover; transition:opacity .3s ease}
.plist .card-title{font-size:18px; margin:6px 0 0}
.plist a:hover img,.plist a:focus-visible img{opacity:.85}
.plist a:hover .card-title,.plist a:focus-visible .card-title{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--teal)}
.plist-head{max-width:1440px; margin:0 auto; padding:0 var(--g) 14px}

/* ---------- episode ---------- */
.chapters{list-style:none; margin:8px 0 0; padding:0}
.chapters li{display:grid; grid-template-columns:72px minmax(0,1fr); gap:4px 16px; padding:16px 0; border-top:1px solid var(--rule)}
.chapters time{font:500 14px/1.9 var(--ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.chapters b{font:500 19px/1.4 var(--display); color:var(--ink); display:block}
.chapters span{font:400 17px/1.55 var(--read); color:var(--ink-2); display:block; margin-top:2px}

/* ---------- tool ---------- */
.tool-hero{min-height:720px}
.tool-hero .split-text{justify-content:center; padding:72px 88px}
.tool-hero .h1{margin:12px 0 0}
.tool-hero .subtitle{max-width:40ch}
.chooser{margin:40px 0 0}
.chooser .q{font:500 21px/1.3 var(--display); margin:0 0 12px; color:var(--ink)}
.chooser ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:32px}
.chooser li{border-top:1px solid var(--rule)}
.chooser a{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; font:500 15px/1.3 var(--ui); text-decoration:none}
.chooser a span{font:400 12px/1 var(--ui); color:var(--ink-3); white-space:nowrap}
.chooser a:hover,.chooser a:focus-visible{text-decoration:underline; text-underline-offset:4px}
.upgrade{max-width:900px; margin:64px auto; background:var(--stone); padding:44px 72px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px 56px; align-items:center}
.upgrade .h2{font-size:28px; margin:10px 0 8px}
.upgrade .lede{color:var(--ink)}
.upgrade .form{margin:0}
.parts{display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; margin:8px 0 1.2em}
.parts h3{font:700 20px/1.3 var(--display); margin:0 0 6px}
.parts p{font-size:18px !important; line-height:1.6 !important; color:var(--ink-2); margin:0 !important}
.vocab{max-width:1440px; margin:0 auto; padding:80px var(--g) 0}
.vocab-head{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); margin:0 0 40px}
.vocab-head > div{grid-column:1 / 7}
.vocab-head .lede{margin-top:14px}
.fam{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); padding:44px 0 48px; border-top:1px solid var(--rule); scroll-margin-top:24px}
.fam-meta{grid-column:1 / 4; padding-right:24px}
.fam-name{font:700 28px/1.2 var(--display); margin:10px 0 12px; text-wrap:balance}
.fam-desc{font:400 17px/1.55 var(--read); color:var(--ink-2); margin:0; text-wrap:pretty}
.fam-body{grid-column:5 / 11}
.words{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 30px}
.words li{font:400 25px/1.5 var(--read); color:var(--ink)}
.subs{display:grid; grid-template-columns:1fr 1fr; gap:22px 48px; margin:32px 0 0; padding:26px 0 0; border-top:1px solid var(--rule)}
.subs h4{font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 4px}
.subs h4 span{font-weight:400; letter-spacing:0; text-transform:none; font-size:13px}
.subs p{font:400 18px/1.5 var(--read); color:var(--ink-2); margin:0}
.examples{margin:30px 0 0; padding:26px 0 0; border-top:1px solid var(--rule)}
.examples dl{margin:12px 0 0; display:grid; gap:18px}
.examples dt{font:700 18px/1.3 var(--display); color:var(--ink)}
.examples dd{margin:4px 0 0; font:400 17px/1.55 var(--read); color:var(--ink-2)}
.examples dd i{display:block; margin-top:4px; color:var(--ink)}
.skills{list-style:none; counter-reset:sk; margin:18px 0 0; padding:0}
.skills li{counter-increment:sk; display:grid; grid-template-columns:48px minmax(0,1fr); padding:18px 0; border-top:1px solid var(--rule)}
.skills li::before{content:counter(sk); font:700 24px/1.2 var(--display); color:var(--gold)}
.skills b{display:block; font:500 20px/1.3 var(--display); color:var(--ink)}
.skills span{display:block; font:400 18px/1.6 var(--read); color:var(--ink-2); margin-top:4px}
.needs{width:100%; border-collapse:collapse; margin:18px 0 0}
.needs th{font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 16px 10px 0}
.needs td{font:400 18px/1.5 var(--read); color:var(--ink-2); padding:14px 16px 14px 0; border-top:1px solid var(--rule); vertical-align:top}
.needs td:first-child{color:var(--ink); width:44%}
.statement{max-width:900px; margin:88px auto; text-align:center; padding:0 24px}
.statement .qbox-glyph{margin:0 auto 4px}
.statement p{font:400 32px/1.4 var(--read); color:var(--ink); margin:0; text-wrap:balance}

/* ---------- subscribe ---------- */
.sub-hero{padding:56px 0 var(--m)}
.sub-hero .h1{max-width:23em; font-size:44px}
.sub-hero .subtitle{margin-bottom:40px}
.media--sub > img{aspect-ratio:2.1/1}
.caption--form{width:460px; padding:28px 30px 24px}
.caption--form .h3{margin:8px 0 0}
.issue{padding:88px 0 0}
.issue-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:100px; align-items:start; padding:0 var(--g); max-width:1440px; margin:0 auto}
.issue-head .h2{font-size:40px; line-height:1.15; margin:10px 0 0}
.issue .sgrid{padding-top:72px; padding-bottom:0}
.part .h3{margin:10px 0 14px}
.part p:not(.eyebrow){font:400 18px/1.65 var(--read); margin:0 0 1em; color:var(--ink); text-wrap:pretty}
.part .card-img{margin:0 0 20px}
.part-quote{font:400 22px/1.5 var(--read) !important}

/* ---------- email mockup page (scoped; the email itself is inline-styled tables) ---------- */
.email-page{background:var(--stone); padding:40px 16px 96px; min-height:100vh}
.email-meta{max-width:600px; margin:0 auto 18px; font:400 13px/1.6 var(--ui); color:var(--ink-3)}
.email-meta b{font-weight:600; color:var(--ink-2); display:inline-block; min-width:62px; letter-spacing:.08em; text-transform:uppercase; font-size:11px}
.email-meta i{font:400 15px/1.5 var(--read); color:var(--ink-2); font-style:normal}
.email-meta-title{font:700 20px/1.2 var(--display) !important; color:var(--ink); margin:0 0 10px !important; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.email-meta-title span{font:400 13px/1.4 var(--ui); color:var(--ink-3)}
.email-meta p{margin:0}
.email, .email *{box-sizing:content-box}
.email img{max-width:100%}
@media (max-width:600px){ .email td.stack{display:block !important; width:auto !important; padding-right:0 !important} .email td.stack img{max-width:100% !important} }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--g:56px}
  .nav{gap:24px}
  .hero-grid,.tgrid,.nl,.issue-head{gap:56px}
  .split-text{padding:56px 48px}
  .tool-hero .split-text{padding:56px 56px}
}
@media (max-width:980px){
  :root{--m:24px; --g:24px; --gap:56px}
  .nav,.mast-end{display:none}
  .mast-in{grid-template-columns:1fr auto; height:64px}
  .menu{display:block; position:relative}
  .menu summary{list-style:none; cursor:pointer; font:600 12px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); padding:16px 0 16px 16px; min-height:44px}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{color:var(--teal)}
  .menu nav{position:absolute; right:0; top:52px; z-index:5; background:var(--stone); padding:8px 20px 12px; min-width:220px}
  .menu nav a{display:flex; align-items:center; min-height:44px; font:500 15px/1 var(--ui); text-decoration:none; border-bottom:1px solid var(--rule)}
  .site .menu nav a{color:var(--ink)}
  .menu nav a:last-child{border-bottom:0}
  .hero-grid,.tgrid,.nl,.issue-head{grid-template-columns:1fr; gap:28px}
  .sgrid{grid-template-columns:1fr; row-gap:56px}
  .sgrid > *{grid-column:1 !important; grid-row:auto !important; margin-top:0 !important}
  .split,.split--wide,.split--half{grid-template-columns:1fr}
  .split--rev .split-text{order:0}
  .split-img{order:-1}
  .split-img img{aspect-ratio:4/3; height:auto}
  .tool-hero .split-img{order:1}
  .tool-hero{min-height:0}
  .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plist{grid-template-columns:1fr}
  .fam-meta,.fam-body{grid-column:1 / -1; padding-right:0}
  .fam-meta{margin-bottom:22px}
  .vocab-head > div{grid-column:1 / -1}
  .foot-box{grid-template-columns:1fr; padding:28px 24px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:260px minmax(0,1fr); gap:32px; padding:0 var(--m)}
  .qbox,.practice,.upgrade{margin-left:var(--m); margin-right:var(--m)}
  .upgrade{grid-template-columns:1fr}
  .step-l{position:static; float:left; width:auto; font-size:40px; line-height:.9; margin:6px 14px 0 0}
}
@media (max-width:699px){
  .qr img,.qr .qr-cap{display:none}
  .qr{display:block}
  .handoff{grid-template-columns:1fr; gap:4px}
}
@media (max-width:640px){
  :root{--m:16px; --g:16px; --gap:48px}
  .h1,.sub-hero .h1{font-size:33px; line-height:1.15}
  .art-h1{font-size:33px; line-height:1.15; margin-bottom:20px}
  .h2{font-size:26px}
  .issue-head .h2{font-size:30px}
  .subtitle{font-size:18px}
  .hero{padding-top:32px}
  .sub-hero{padding-top:32px}
  .media > img,.media--2x1 > img,.media--sub > img{aspect-ratio:3/2}
  .media--hang > img{aspect-ratio:16/9}
  .parts{grid-template-columns:1fr; gap:18px}
  .caption,.media--hang .caption,.caption--form{position:static; width:auto; padding:22px 0 0; background:transparent}
  .media--hang{margin-bottom:0}
  .form{flex-direction:column}
  .btn{width:100%}
  .tgrid .btn{width:auto}
  .standfirst{font-size:20px}
  .read{padding-top:40px}
  .read p{font-size:19px}
  .read h2{font-size:25px}
  .qbox,.practice,.upgrade{padding:32px 22px; margin:48px var(--m)}
  .qbox .q{font-size:22px}
  .steps li{grid-template-columns:32px minmax(0,1fr); font-size:18px}
  .nl{padding:36px 22px; margin-top:64px}
  .row,.row--34{grid-template-columns:1fr; gap:18px; margin-top:64px}
  .split-text,.tool-hero .split-text{padding:40px 22px}
  .shelf{padding:48px 0 56px}
  .shelf-grid,.shelf-grid--3{grid-template-columns:1fr; gap:36px}
  .foot-cols{grid-template-columns:1fr 1fr; gap:28px}
  .foot-cols > div:first-child{grid-column:1 / -1}
  .plist a{grid-template-columns:104px minmax(0,1fr); gap:16px}
  .plist img{width:104px}
  .chooser ul{grid-template-columns:1fr}
  .words li{font-size:22px}
  .subs{grid-template-columns:1fr}
  .statement p{font-size:25px}
  .filter{flex-direction:column; align-items:flex-start; gap:4px}
  .tabs{gap:0 22px}
  .meta-row{flex-direction:column; align-items:flex-start; gap:0}
  .card-title{font-size:21px}
  .chapters li{grid-template-columns:56px minmax(0,1fr)}
}

/* ---- Slate episode band: lavender accent, since burnt orange fails AA on slate */
.shelf{background:var(--slate); color:#fff}
.shelf .h2,.shelf .card-title{color:#fff}
.shelf .lede{color:rgba(255,255,255,.76)}
.shelf .eyebrow{color:rgba(255,255,255,.62)}
.shelf .eyebrow .sep{color:rgba(255,255,255,.34)}
.shelf .mark{color:var(--lavender)}
.shelf .textlink{color:var(--teal-bright)}
.shelf .textlink:hover,.shelf .textlink:focus-visible{color:#fff}
.shelf .card-meta{color:rgba(255,255,255,.64)}
.shelf .shelf-head{border-color:rgba(255,255,255,.18)}

/* ---- Double-image spread: a tall image paired with a shorter one, bottoms offset, wider than the reading column */
.spread{max-width:1240px; margin:96px auto; padding:0 var(--m);
  display:grid; grid-template-columns:684fr 456fr; column-gap:40px; align-items:start}
.spread figure{margin:0; position:relative}
.spread img{width:100%; display:block; object-fit:cover; background:var(--deep-stone)}
.spread .tall img{aspect-ratio:684/815}
.spread .short img{aspect-ratio:456/615}
.spread .short{margin-top:100px}
.spread--rev{grid-template-columns:456fr 684fr}
.spread--rev .short{order:-1}
.spread figcaption{font:400 13px/1.5 var(--ui); color:var(--ink-3); margin-top:10px; max-width:34em}

@media (max-width:860px){
  .spread,.spread--rev{grid-template-columns:1fr; column-gap:0; row-gap:24px; margin:64px auto}
  .spread .short{margin-top:0}
  .spread--rev .short{order:0}
  .spread .tall img,.spread .short img{aspect-ratio:4/5}
}

/* check-in */
.btn--line,.site a.btn--line{background:transparent; color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal)}
.btn--line:hover,.btn--line:focus-visible,.site a.btn--line:hover,.site a.btn--line:focus-visible{background:var(--teal); color:#fff}
.ci-entry{margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--rule)}
.ci-entry .fine{margin:0 0 10px}
.doors-alt{font:400 16px/1.55 var(--read); color:var(--ink-2); margin:22px 0 0}
.ci-sec{padding:72px 0 88px}
.ci{max-width:680px; margin:0 auto}
.ci__h{font-size:52px; margin:12px 0 0}
.ci__start{margin:28px 0 0}
.ci__src{margin:18px 0 0}
.ci__src a{color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.ci__q{border:0; margin:0; padding:0; min-width:0}
.ci__prog{display:block; font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 12px}
.ci__qt{font:700 34px/1.18 var(--display); color:var(--ink); padding:0; margin:0 0 28px; text-wrap:balance; outline:none}
.ci__qt:focus-visible{outline:2px solid var(--teal); outline-offset:6px}
.ci__as{display:flex; flex-direction:column; gap:10px}
.ci__a{display:block; width:100%; min-height:58px; padding:15px 20px; text-align:left; font:400 19px/1.4 var(--read); color:var(--ink);
  background:var(--white); border:1px solid transparent; border-radius:4px; cursor:pointer; transition:border-color .2s ease}
.ci__a:hover{border-color:var(--ink-3)}
.ci__a:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.ci__a[aria-pressed="true"]{background:var(--teal); color:#fff}
.ci__back{margin:24px 0 0; min-height:44px; padding:0; background:none; border:0; font:500 14px/1.3 var(--ui); color:var(--teal); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px}
.ci__back:focus-visible{outline:2px solid var(--teal); outline-offset:4px}
.ci__train .eyebrow{margin:0 0 10px}
.ci__rt{font:800 44px/1.14 var(--display); letter-spacing:-.012em; margin:0 0 14px; color:var(--ink); text-wrap:balance}
.ci__rd{font:italic 400 20px/1.5 var(--read); color:var(--ink-2); margin:0 0 12px}
.ci__note{font:400 18px/1.5 var(--read); color:var(--ink-2); margin:0 0 12px}
.ci__try{font:400 19px/1.6 var(--read); color:var(--ink); margin:20px 0 0; padding:22px 24px; background:var(--white)}
.ci__try b{font:600 14px/1.2 var(--ui); letter-spacing:.02em}
.ci__rl{font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:30px 0 8px}
.ci__reads{list-style:none; margin:0; padding:0}
.ci__reads li{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 0; border-top:1px solid var(--rule)}
.ci__reads a{font:700 18px/1.35 var(--display); color:var(--ink); text-decoration:none}
.ci__reads a:hover,.ci__reads a:focus-visible{text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:4px}
.ci__reads span{font:400 13px/1.3 var(--ui); color:var(--ink-3)}
.ci__nue{margin:34px 0 0; padding:24px; background:var(--white); display:grid; grid-template-columns:1fr auto; gap:0 26px; align-items:center}
.ci__nue .ci__rl{margin:0 0 8px; grid-column:1}
.ci__nl{font:400 18px/1.55 var(--read); color:var(--ink); margin:0; grid-column:1}
.ci__nc{margin:12px 0 0; grid-column:1}
.ci__nc a{display:inline-flex; align-items:center; min-height:44px; font:500 15px/1.3 var(--ui); color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.ci__qr{grid-column:2; grid-row:1/4; margin:0; text-align:center; font:400 12px/1.3 var(--ui); color:var(--ink-3); max-width:110px}
.ci__qr img{display:block; margin:0 auto 8px}
.ci__strong{font:400 18px/1.5 var(--read); color:var(--ink-2); margin:26px 0 0}
.ci__form{margin:48px 0 0; padding:30px 28px; background:var(--white)}
.ci__form .lede{margin:0}
.ci__opt{display:flex; align-items:center; gap:10px; min-height:44px; margin:10px 0 0; font:400 15px/1.4 var(--ui); color:var(--ink); cursor:pointer}
.ci__opt input{width:20px; height:20px; accent-color:var(--teal); margin:0}
.ci__sent{font:500 15px/1.5 var(--ui); color:var(--ink); margin:14px 0 0; outline:none}
.ci__disc{margin:24px 0 18px}
.ci-sec .crisis{margin-top:72px}
.ci-mail{padding:56px 0 72px}
.ci-meta{display:grid; gap:6px; margin:14px 0 32px; font:400 15px/1.5 var(--ui); color:var(--ink-2)}
.ci-meta div{display:grid; grid-template-columns:90px 1fr}
.ci-meta dt{color:var(--ink-3)}
.ci-meta dd{margin:0}
.ci-mail__frame{padding:0 12px}
@media (max-width:700px){
  .ci-sec{padding:44px 0 56px}
  .ci__h{font-size:38px}
  .ci__qt{font-size:27px}
  .ci__rt{font-size:34px}
  .ci__nue{display:block}
  .ci__qr{display:none}
  .ci__form{padding:24px 18px}
  .ci__form .form{flex-direction:column}
  .ci__form .btn{width:100%}
}

/* ---- Slate bands: white text, lavender labels, bright teal links and buttons (pillar inks fail AA on slate) */
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade){background:var(--slate); color:#fff}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :where(h1,h2,h3,h4,p,li,span,a,b,strong,em,q,blockquote,figcaption,label,dt,dd,button){color:inherit}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(.lede,.subtitle,.card-dek,.door-desc,blockquote,.who){color:rgba(255,255,255,.8)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(.eyebrow,.count,.door-go,.fine,.card-meta,.byline){color:rgba(255,255,255,.68)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .eyebrow .sep{color:rgba(255,255,255,.34)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(.mark,.qbox-glyph,[class*="pl-"],.door-name){color:var(--lavender)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .textlink{color:var(--teal-bright)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .textlink:is(:hover,:focus-visible){color:#fff}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(a,button,input):focus-visible{outline-color:var(--teal-bright)}
.site .split-text .door{border-color:rgba(255,255,255,.18)}
.site .split-text .split-bottom .card-title a{color:#fff}
.site .split-text .crumbs{color:rgba(255,255,255,.68)}
.site .split-text .crumbs li + li::before{color:rgba(255,255,255,.34)}
.site .split-text .door a:hover .door-name{color:#fff}
.site :is(.nl,.foot-box,.upgrade) :is(.btn,a.btn){background:var(--teal-bright); color:var(--slate)}
.site :is(.nl,.foot-box,.upgrade) :is(.btn,a.btn):hover{background:#fff; color:var(--slate)}
.site :is(.nl,.foot-box,.upgrade) .input{border-color:transparent; color:var(--ink)}

/* ---- Resources: one even grid per pillar (2026-09-23) */
.lib-ci{font:400 17px/1.55 var(--read); color:var(--ink-2); margin:18px 0 0}
.doors-alt{font:400 16px/1.55 var(--read); margin:22px 0 0}
.rgrid{list-style:none; margin:56px auto 104px; padding:0 var(--m); max-width:1440px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 32px}
.rcard{display:block; text-decoration:none; color:inherit}
.rcard .card-img{aspect-ratio:3/2}
.rcard .card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.rcard:hover .card-img img{transform:scale(1.02)}
.rcard .card-body{padding-top:14px}
.rcard .eyebrow{margin:0 0 6px}
.rcard .card-title{font:700 20px/1.3 var(--display); color:var(--ink); margin:0; text-wrap:balance}
.rcard:hover .card-title,.rcard:focus-visible .card-title{text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:4px; text-decoration-thickness:1px}
.rcard:focus-visible{outline:2px solid var(--teal); outline-offset:6px}
.ttile{aspect-ratio:3/2; background:var(--stone); display:flex; flex-direction:column; justify-content:space-between; padding:22px 24px}
.ttile-p{font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase}
.ttile-t{font:800 24px/1.12 var(--display); letter-spacing:-.012em; color:var(--ink); text-wrap:balance}
.tt-connection-to-self .ttile-p{color:var(--self)}
.tt-connection-to-others .ttile-p{color:var(--others)}
.tt-health-vitality .ttile-p{color:var(--vitality)}
.tt-foundations .ttile-p{color:var(--foundations)}
@media (max-width:1000px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rgrid{grid-template-columns:1fr; gap:36px; margin:40px auto 72px}.ttile-t{font-size:22px}}

.rmore{max-width:1440px; margin:-56px auto 104px; padding:0 var(--m)}
.rmore summary{list-style:none; cursor:pointer}
.rmore summary::-webkit-details-marker{display:none}
.rmore[open] summary{display:none}
.rgrid--more{margin:0 0 0; padding:0}
@media (max-width:640px){.rmore{margin:-32px auto 72px}.rmore summary{width:100%}}
@media (max-width:640px){
  .rgrid{gap:0}
  .rgrid > li{border-top:1px solid var(--rule)}
  .rcard{display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; padding:14px 0}
  .rcard .card-img,.rcard .ttile{aspect-ratio:1/1; width:96px}
  .rcard .ttile{padding:10px}
  .rcard .ttile-t{display:none}
  .rcard .ttile-p{font-size:9px; letter-spacing:.08em}
  .rcard .card-body{padding-top:0}
  .rcard .card-title{font-size:17px}
}

/* ---- Slate band refinements: pillar tints, off-white buttons */
.site{--self-dk:#7AB3C2; --others-dk:#AE9ECA; --vitality-dk:#95AEA0; --foundations-dk:#AEAAA4; --gold-dk:#CCA083; --link-dk:#B3D4D7}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(.mark,.qbox-glyph){color:var(--gold-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .pl-connection-to-self{color:var(--self-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .pl-connection-to-others{color:var(--others-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .pl-health-vitality{color:var(--vitality-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .pl-foundations{color:var(--foundations-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) .textlink{color:var(--link-dk)}
.site :is(.split-text,.nl,.foot-box,.qbox,.upgrade,.shelf) :is(a,button,input):focus-visible{outline-color:var(--link-dk)}
.site .split-text .door a:is(:hover,:focus-visible) .door-name{color:#fff}
.site :is(.nl,.foot-box,.upgrade) :is(.btn,a.btn){background:var(--parchment); color:var(--slate)}
.site :is(.nl,.foot-box,.upgrade) :is(.btn,a.btn):is(:hover,:focus-visible){background:#fff; color:var(--slate); text-decoration:underline; text-underline-offset:3px}

/* check-in results lead with all six signals and the strongest one */
.ci__sh{font:800 44px/1.14 var(--display); letter-spacing:-.012em; color:var(--ink); margin:0; text-wrap:balance}
.ci__sh:focus{outline:none}
.ci__res .ci__strong{font:400 20px/1.5 var(--read); color:var(--ink-2); margin:12px 0 0}
.ci__res .ci__strong b{color:var(--ink); font-weight:600}
.ci__sum{list-style:none; margin:28px 0 56px; padding:0; border-top:1px solid var(--rule)}
.ci__sum li{display:grid; grid-template-columns:1fr auto 8.5em; gap:4px 18px; align-items:center; padding:13px 0; border-bottom:1px solid var(--rule)}
.ci__sn{font:500 17px/1.35 var(--ui); color:var(--ink)}
.ci__dots{display:inline-flex; gap:6px}
.ci__dots i{display:block; width:10px; height:10px; border-radius:50%; background:var(--rule)}
.ci__dots i.on{background:var(--ink)}
.ci__sl{font:400 14px/1.3 var(--ui); color:var(--ink-3)}
.ci__sum :is(.is-train,.is-strong) .ci__sn{font-weight:700}
.ci__sum .is-train .ci__sl{color:var(--gold); font-weight:600}
.ci__res .ci__rt{font-size:32px}
.ci__nuewrap:empty{display:none}
.ci__nuewrap .ci__nue{background:transparent; padding:28px 0 0; margin:40px 0 0; border-top:1px solid var(--rule)}
@media (max-width:700px){
  .ci__sh{font-size:34px}
  .ci__res .ci__rt{font-size:26px}
  .ci__sum li{grid-template-columns:1fr auto; gap:6px 14px}
  .ci__sn{grid-row:1 / span 2}
  .ci__sl{grid-column:2; text-align:right}
}

/* ---- Resources index: four pillars up top, then each pillar pins its name beside its titles */
.lib-map ul{list-style:none; margin:0; padding:40px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 32px}
.lib-map a{display:block; height:100%; padding:18px 0 4px; border-top:1px solid var(--ink); text-decoration:none; color:inherit}
.lm__name{display:block; font:700 22px/1.2 var(--display); letter-spacing:-.006em}
.lm__count{display:block; font:500 13px/1.4 var(--ui); color:var(--ink-3); margin:6px 0 10px}
.lm__desc{display:block; font:400 16px/1.5 var(--read); color:var(--ink-2); text-wrap:pretty}
.lib-map a:is(:hover,:focus-visible) .lm__name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.lib-map a:focus-visible{outline:2px solid var(--teal); outline-offset:6px}
.site .lib-ci{margin:36px 0 0; padding:0 0 8px}

.lx{max-width:1440px; margin:0 auto; padding:72px var(--m) 72px; display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:0 64px; scroll-margin-top:8px}
.lx + .lx{border-top:1px solid var(--rule)}
.lib-ci + .lx, .wrap + .lx{margin-top:40px; border-top:1px solid var(--rule)}
.lx__head{position:sticky; top:32px; align-self:start}
.lx__name{font:800 36px/1.1 var(--display); letter-spacing:-.012em; margin:0}
.lx__desc{font:400 18px/1.6 var(--read); color:var(--ink-2); margin:16px 0 0; max-width:38ch; text-wrap:pretty}
.lx__count{font:500 13px/1.4 var(--ui); color:var(--ink-3); margin:16px 0 0}

.lx__feat{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:0 32px; align-items:center; text-decoration:none; color:inherit; padding:0 0 36px}
.lx__fimg{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--stone)}
.lx__fimg img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease}
.lx__feat:hover .lx__fimg img{transform:scale(1.02)}
.lx__ftxt{display:block}
.lx__fmeta{display:block; font:600 11px/1.5 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.lx__fmeta .sep,.lx__meta .sep{margin:0 8px; color:var(--rule)}
.lx__ftitle{display:block; font:700 26px/1.2 var(--display); letter-spacing:-.006em; color:var(--ink); margin:10px 0 10px; text-wrap:balance}
.lx__fdek{display:block; font:400 17px/1.55 var(--read); color:var(--ink-2); text-wrap:pretty}
.lx__feat:is(:hover,:focus-visible) .lx__ftitle{text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:1px; text-underline-offset:5px}
.lx__feat:focus-visible{outline:2px solid var(--teal); outline-offset:6px}

.lx__list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.lx__list li{border-bottom:1px solid var(--rule)}
.lx__row{display:grid; grid-template-columns:80px minmax(0,1fr); gap:0 20px; align-items:center; padding:14px 0; text-decoration:none; color:inherit; min-height:44px}
.lx__thumb{display:block; width:80px; aspect-ratio:4/3; overflow:hidden; background:var(--stone)}
.lx__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.lx__tile{display:flex; align-items:center; justify-content:center; font:600 10px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase}
.lx__tile.tt-connection-to-self{background:#E2EEF2; color:var(--self)}
.lx__tile.tt-connection-to-others{background:#EDEAF3; color:var(--others)}
.lx__tile.tt-health-vitality{background:#E8EDEA; color:var(--vitality)}
.lx__tile.tt-foundations{background:#EDECEB; color:var(--foundations)}
.lx__txt{display:block}
.lx__title{display:block; font:600 19px/1.3 var(--display); color:var(--ink); text-wrap:pretty}
.lx__meta{display:block; font:400 13px/1.4 var(--ui); color:var(--ink-3); margin:4px 0 0}
.lx__row:is(:hover,:focus-visible) .lx__title{text-decoration:underline; text-decoration-color:var(--teal); text-decoration-thickness:1px; text-underline-offset:4px}
.lx__row:focus-visible{outline:2px solid var(--teal); outline-offset:4px}

@media (max-width:1100px){
  .lib-map ul{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 32px}
  .lx{grid-template-columns:1fr; gap:28px 0}
  .lx__head{position:static}
  .lx__desc{max-width:60ch}
}
@media (max-width:640px){
  .lib-map ul{gap:20px 20px; padding-top:28px}
  .lm__name{font-size:19px}
  .lm__desc{display:none}
  .lx{padding:48px var(--m) 48px}
  .lx__name{font-size:30px}
  .lx__feat{grid-template-columns:1fr; gap:16px 0; padding-bottom:28px}
  .lx__ftitle{font-size:23px}
  .lx__row{grid-template-columns:64px minmax(0,1fr); gap:0 16px}
  .lx__thumb{width:64px}
  .lx__title{font-size:17px}
}
/* type tiles: pillar hue stays in the ground; the 10px label takes ink-2 so it passes AA (pillar inks measured 3.57:1) */
.site .lx__tile{color:var(--ink-2)}

/* ---- Emotion family colors on the vocabulary tool, deepened to pass AA on their tints */
.fk-joy{--fam:#377045; --fam-tint:#ECF2ED; --fam-dk:#9EBCA5}
.fk-anger{--fam:#B0473A; --fam-tint:#F7EDEB; --fam-dk:#D8A39C}
.fk-sadness{--fam:#3F68A6; --fam-tint:#ECF0F6; --fam-dk:#9FB4D2}
.fk-fear{--fam:#7A58A0; --fam-tint:#F2EEF6; --fam-dk:#BCACD0}
.fk-surprise{--fam:#7B5E0B; --fam-tint:#F3F0E7; --fam-dk:#C4B486}
.fk-disgust{--fam:#5B6B48; --fam-tint:#EFF0ED; --fam-dk:#ADB5A4}
.fam .fam-name{color:var(--fam)}
.fam .words{gap:10px 10px}
.fam .words li{font:400 19px/1.25 var(--read); color:var(--fam); background:var(--fam-tint); padding:8px 15px 9px; border-radius:999px}
.fam .subs h4{color:var(--fam)}
.chooser .cn{display:inline-flex; align-items:center; gap:10px; font:inherit}
.chooser .cdot{display:block; width:10px; height:10px; border-radius:50%; background:var(--fam-dk); flex:none}
@media (max-width:640px){.fam .words li{font-size:17px; padding:7px 13px 8px}}

/* ---- Pillar color as place: 9% tints in hex (contrast_audit.py cannot read color-mix) */
.site{--self-g:#E9F2F5; --others-g:#F2EFF6; --vitality-g:#EEF2EF; --foundations-g:#F2F1F0}

/* 1. Resources index: each pillar section is its own pale zone, full bleed */
.site .lx{max-width:none; padding-left:max(var(--m), calc((100% - 1440px) / 2 + var(--m))); padding-right:max(var(--m), calc((100% - 1440px) / 2 + var(--m)))}
.site .lx + .lx, .site .wrap + .lx{border-top:0}
.site #connection-to-self.lx{background:var(--self-g)}
.site #connection-to-others.lx{background:var(--others-g)}
.site #health-vitality.lx{background:var(--vitality-g)}
.site #foundations.lx{background:var(--foundations-g)}
.site .lx .lx__tile{background:var(--white)}

/* 2. Practice boxes take their article's pillar; step numbers and REACH letters in pillar ink */
.site .practice.pz-connection-to-self{background:var(--self-g)}
.site .practice.pz-connection-to-others{background:var(--others-g)}
.site .practice.pz-health-vitality{background:var(--vitality-g)}
.site .practice.pz-foundations{background:var(--foundations-g)}
.pz-connection-to-self .steps li::before,.site .step-l.sl-connection-to-self{color:var(--self)}
.pz-connection-to-others .steps li::before,.site .step-l.sl-connection-to-others{color:var(--others)}
.pz-health-vitality .steps li::before,.site .step-l.sl-health-vitality{color:var(--vitality)}
.pz-foundations .steps li::before,.site .step-l.sl-foundations{color:var(--foundations)}

/* 3. Check-in: filled dots in each signal's pillar ink; the one to train sits on its pillar's ground */
.ci__sum .sp-connection-to-self .ci__dots i.on{background:var(--self)}
.ci__sum .sp-connection-to-others .ci__dots i.on{background:var(--others)}
.ci__sum .sp-health-vitality .ci__dots i.on{background:var(--vitality)}
.ci__sum .sp-foundations .ci__dots i.on{background:var(--foundations)}
.ci__train[class*="pz-"]{padding:32px 32px 30px}
.ci__train.pz-connection-to-self{background:var(--self-g)}
.ci__train.pz-connection-to-others{background:var(--others-g)}
.ci__train.pz-health-vitality{background:var(--vitality-g)}
.ci__train.pz-foundations{background:var(--foundations-g)}
@media (max-width:640px){.ci__train[class*="pz-"]{padding:24px 18px 22px}}

/* ---------- production additions ---------- */
.form{flex-wrap:wrap}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.form-msg{flex:1 0 100%; margin:4px 0 0; font:500 14px/1.45 var(--ui); color:var(--ink)}
.form-msg:empty{display:none}
.slate .form-msg, .tint--slate .form-msg{color:var(--white)}
.player{display:block; width:100%; margin:0 0 32px}
.tool-body img{max-width:100%; height:auto}
.page-body section{margin:0 0 56px}
.page-body h3{font:700 1.05rem/1.3 var(--display); color:var(--ink); margin:28px 0 6px}
.page-body img{max-width:72px; height:auto; display:block; margin:24px 0 8px}
.page-body .pg-about-cta a{display:inline-block; margin:0 18px 10px 0}

/* ---------- subscribe page ---------- */
.sub{padding:72px 0 80px}
.sub-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:88px; align-items:start}
.sub-main .eyebrow{margin:0 0 14px}
.sub-main .form{max-width:520px; margin-top:28px}
.sub-from{font:400 15px/1.5 var(--ui); color:var(--ink-3); margin:22px 0 0; max-width:44ch}
.sub-side{background:var(--white); padding:32px 36px; border-radius:4px}
.sub-side-h{font:700 13px/1.4 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 6px}
.sub-parts{margin:0}
.sub-parts div{display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:18px 0; border-top:1px solid var(--rule)}
.sub-parts div:first-child{border-top:0}
.sub-parts dt{font:700 17px/1.4 var(--display); color:var(--ink)}
.sub-parts dd{margin:0; font:400 17px/1.55 var(--read); color:var(--ink-2)}
@media (max-width:900px){
  .sub{padding:44px 0 56px}
  .sub-grid{grid-template-columns:1fr; gap:40px}
  .sub-side{padding:24px 22px}
  .sub-parts div{grid-template-columns:1fr; gap:4px}
}
.tool-feature.media--2x1 img{aspect-ratio:auto; height:clamp(180px, 26vw, 340px); width:100%; object-fit:cover}

/* ---------- share ---------- */
.share{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:48px 0 0; padding:20px 0 0; border-top:1px solid var(--rule)}
.share-lead{margin:0; font:400 17px/1.5 var(--read); color:var(--ink-2)}
.share-btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border:1px solid var(--teal); border-radius:4px;
  background:transparent; color:var(--teal); font:600 14px/1 var(--ui); cursor:pointer}
.share-btn:hover{background:var(--teal); color:var(--white)}
.share-btn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.share-msg{font:500 14px/1.4 var(--ui); color:var(--ink)}
.share[hidden]{display:none}
.read .share .share-lead, .share .share-lead{margin:0}
.read .share{margin:48px 0 0}

/* ---------- library header ---------- */
.lib-band .eyebrow.mark{margin:0 0 14px}
.lib-stats{display:flex; flex-wrap:wrap; gap:8px 28px; list-style:none; margin:22px 0 0; padding:0; font:400 15px/1.4 var(--ui); color:var(--ink-2)}
.lib-stats b{font-weight:700; color:var(--ink)}
.lib-stats li{position:relative}
.lib-stats li+li::before{content:""; position:absolute; left:-15px; top:50%; width:3px; height:3px; border-radius:50%; background:var(--ink-3)}
@media (max-width:600px){
  .lib-stats{gap:6px 14px; font-size:14px}
  .lib-stats li+li::before{left:-8px}
  .sgrid .card-img img{aspect-ratio:4/3; height:auto}
}