/* ============================================================================
   Wrench Talk styles - listing page (pages/wrench-talk.php) AND episode page
   (pages/wrench-talk-episode-01.php). Generated from the two design files in
   _X/ref_pages/ (wrench-talk.html, wrench-talk-episode-01.html). Every rule is
   scoped to .wrench-talk-page (the <main> wrapper in both pages) so nothing leaks
   into the shared header/footer and main.css cannot restyle the page. The design
   tokens (:root in the source) live on .wrench-talk-page for the same reason.
   The design's own nav, drawer and footer rules were dropped - the shared
   includes + main.css provide those. Embedded base64 images were extracted to
   assets/img/wrench-talk/. Fonts come from the Google Fonts link in includes/head.php.
   --nav-h (sticky offset for the Key Topics rail and in-page jumps) is measured
   from the shared header by assets/js/wrench-talk.js.
   ============================================================================ */
.wrench-talk-page{--navy-1:#061629; --navy-2:#0A2036; --navy:#061629; --teal:#4CE2CC; --teal-2:#22ABAD; --teal-3:#1F9A9C; --cyan:#38CFC0; --teal-300:#4CE2CC; --teal-400:#22ABAD; --teal-500:#1F9A9C; --teal-600:#15767A; --teal-700:#0A5E68; --bg:#FFFFFF; --line:#E7EEEC; --ink:#000000; --muted:#595552; --on-dark:rgba(255,255,255,.74); --font:"Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; --display:"Saira", ui-sans-serif, system-ui, sans-serif; --action:"Manrope", ui-sans-serif, sans-serif; --font-cta:var(--action); --ease:cubic-bezier(.22,1,.36,1); --shadow-cta:0 6px 18px rgba(34,171,173,.4); --shadow-card:0 1px 2px rgba(6,22,41,.04),0 18px 40px -26px rgba(6,22,41,.22); --art-ep3:url("../img/wrench-talk/episode-1.png"); --nav-h:72px;}
.wrench-talk-page *{box-sizing:border-box; margin:0; padding:0;}
.wrench-talk-page{background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased; }
.wrench-talk-page a{color:inherit; text-decoration:none;}
.wrench-talk-page img,.wrench-talk-page svg{display:block; max-width:100%;}
.wrench-talk-page [hidden]{display:none !important;}
.wrench-talk-page #episodes,.wrench-talk-page #featured{scroll-margin-top:calc(var(--nav-h) + 16px);}
.wrench-talk-page ::selection{background:rgba(76,226,204,.4); color:#fff;}
.wrench-talk-page .btn{display:inline-flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; padding:11px 22px; border-radius:8px; border:1px solid var(--line); cursor:pointer; white-space:nowrap; font-family:var(--font);}
.wrench-talk-page .btn .arrow{transition:transform .2s var(--ease);}
.wrench-talk-page .btn:hover .arrow{transform:translateX(3px);}
.wrench-talk-page .btn-solid{font-family:var(--font-cta); font-weight:700; background:var(--teal-2); border-color:var(--teal-2); color:#fff; box-shadow:var(--shadow-cta); transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);}
.wrench-talk-page .btn-solid:hover{background:var(--teal-3); box-shadow:0 10px 28px rgba(34,171,173,.55); transform:translateY(-2px);}
.wrench-talk-page .btn-solid:focus-visible{outline:2px solid var(--teal-300); outline-offset:3px;}
.wrench-talk-page .btn-ghost{position:relative; overflow:hidden; height:48px; padding:0 24px; border-radius:12px; border:2px solid var(--teal-500); font:700 13px/1.2 var(--action); letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); background:transparent; transition:color .2s, border-color .2s, box-shadow .2s;}
.wrench-talk-page .btn-ghost:hover{color:var(--teal-800); border-color:var(--teal-600); box-shadow:inset 0 0 10px rgba(34,171,173,.28), 0 0 9px 3px rgba(34,171,173,.14);}
.wrench-talk-page .btn-ghost:active{background:rgba(34,171,173,.12);}
.wrench-talk-page .btn-ghost::before{content:""; position:absolute; left:-4em; top:0; width:4em; height:100%; transition:left .4s ease-in-out; background:linear-gradient(to right, transparent 1%, rgba(34,171,173,.16) 40%, rgba(34,171,173,.16) 60%, transparent 100%);}
.wrench-talk-page .btn-ghost:hover::before{left:100%;}
.wrench-talk-page .btn-ghost:focus-visible{outline:2px solid var(--teal-600); outline-offset:3px;}
.wrench-talk-page .eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font); font-size:.8125rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); font-weight:600; margin:0 0 14px;}
.wrench-talk-page .eyebrow .bar{width:30px; height:2px; border-radius:2px; background:var(--teal); flex-shrink:0;}
.wrench-talk-page .eyebrow.on-dark{color:#fff;}
.wrench-talk-page .title-band{position:relative; background:var(--navy); color:#fff; padding:72px 24px 78px; overflow:hidden;}
.wrench-talk-page .title-accent{position:absolute; inset:0; background-image:url("../img/wrench-talk/hero-bg.jpg"); background-size:cover; background-position:center;}
.wrench-talk-page .title-accent::before{content:""; position:absolute; inset:0; background:rgba(6,22,41,.8);}
.wrench-talk-page .title-band-inner{position:relative; z-index:1; max-width:1200px; margin:0 auto; padding-inline:24px; text-align:left;}
.wrench-talk-page .title-band h1{margin:0; font-family:var(--display); font-size:clamp(2.1rem,5.2vw,3.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.05;}
.wrench-talk-page .title-band h1 .glow{color:var(--teal); text-shadow:0 0 22px rgba(76,226,204,.65), 0 0 70px rgba(76,226,204,.35);}
.wrench-talk-page .title-sub{margin:12px 0 0; max-width:620px; font-size:clamp(1rem,1.6vw,1.18rem); font-weight:600; line-height:1.5; color:#fff;}
.wrench-talk-page .section{padding:64px 24px;}
.wrench-talk-page .wrap{max-width:1200px; margin:0 auto; padding-inline:24px;}
.wrench-talk-page .spotlight{background:var(--navy); border-radius:20px; padding:44px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; color:#fff; overflow:hidden; position:relative;}
.wrench-talk-page .spotlight-copy h2{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; margin:0 0 16px; font-weight:600; color:#fff;}
.wrench-talk-page .spotlight-copy p:not(.eyebrow){color:var(--on-dark); line-height:1.68; margin:0; font-size:.98rem;}
.wrench-talk-page .spotlight-copy p b{color:#fff; font-weight:600;}
.wrench-talk-page .spotlight-tags{display:flex; gap:10px; flex-wrap:wrap;}
.wrench-talk-page .tag-outline{border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:6px 14px; font-size:.78rem; color:var(--on-dark);}
.wrench-talk-page .spotlight-side{display:flex; flex-direction:column; align-items:flex-start; gap:22px;}
.wrench-talk-page .spotlight-media{width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--art-ep3) center/cover no-repeat; box-shadow:0 22px 50px -26px rgba(0,0,0,.8);}
.wrench-talk-page .spotlight-qs{grid-column:1 / -1; margin-top:6px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);}
.wrench-talk-page .qs-head{font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); margin:0 0 16px;}
.wrench-talk-page .qs-list{margin:0; padding:0 0 0 1.15em; display:grid; grid-template-columns:1fr 1fr; gap:12px 40px;}
.wrench-talk-page .qs-list li{color:var(--on-dark); font-size:.94rem; line-height:1.55; padding-left:6px;}
.wrench-talk-page .qs-list li::marker{color:var(--teal); font-weight:700;}
.wrench-talk-page .section-head{margin-bottom:26px;}
.wrench-talk-page .section-head h2{margin:0; font-size:32px; line-height:1.2; font-weight:600;}
.wrench-talk-page .section-head p:not(.eyebrow){margin:8px 0 0; color:var(--muted); font-size:.95rem; max-width:640px;}
.wrench-talk-page .ep-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
.wrench-talk-page .ep-card{display:flex; flex-direction:column; position:relative; background:#F7F9FB; border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:var(--shadow-card);}
.wrench-talk-page .ep-card h3{margin:0 0 18px; font-size:18px; line-height:1.3; font-weight:700; color:var(--ink);}
.wrench-talk-page .ep-art{border-radius:12px; overflow:hidden; margin:0 0 20px; aspect-ratio:16/9; background:var(--navy-1);}
.wrench-talk-page .ep-art img{width:100%; height:100%; object-fit:cover;}
.wrench-talk-page .ep-art--ep3{background:var(--art-ep3) center/cover no-repeat;}
.wrench-talk-page .ep-card p:not(.eyebrow){margin:0 0 16px; font-size:.95rem; line-height:1.7; color:#3C4652;}
.wrench-talk-page .ep-card p b{color:var(--ink); font-weight:600;}
.wrench-talk-page .ep-card p i{font-style:italic;}
.wrench-talk-page .ep-body ul,.wrench-talk-page .ep-body ol{margin:0 0 16px; padding-left:1.3em; display:grid; gap:9px;}
.wrench-talk-page .ep-body li{font-size:.93rem; line-height:1.6; color:#3C4652; padding-left:4px;}
.wrench-talk-page .ep-body li::marker{color:var(--teal-600); font-weight:700;}
.wrench-talk-page .ep-qs-head{margin:2px 0 12px; font-size:.95rem; font-weight:700; color:var(--ink);}
.wrench-talk-page .ep-foot{margin-top:auto; padding-top:10px;}
.wrench-talk-page .more-t{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
.wrench-talk-page .more-link{display:none;}
@media (max-width:767px){
.wrench-talk-page .more-link{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:4px 0; font-size:.9rem; font-weight:600; color:var(--teal-700); text-decoration:underline; text-underline-offset:3px; cursor:pointer; -webkit-user-select:none; user-select:none;}
.wrench-talk-page .more-chev{transition:transform .22s var(--ease);}
.wrench-talk-page .more-t:checked ~ .more-link .more-chev,.wrench-talk-page .more-t:checked ~ .spotlight-copy .more-link .more-chev{transform:rotate(180deg);}
.wrench-talk-page .more-t:checked ~ .more-link .more-open,.wrench-talk-page .more-t:checked ~ .spotlight-copy .more-link .more-open{display:none;}
.wrench-talk-page .more-t:not(:checked) ~ .more-link .more-close,.wrench-talk-page .more-t:not(:checked) ~ .spotlight-copy .more-link .more-close{display:none;}
.wrench-talk-page .more-t:focus-visible ~ .more-link,.wrench-talk-page .more-t:focus-visible ~ .spotlight-copy .more-link{outline:2px solid var(--teal-600); outline-offset:3px;}
.wrench-talk-page .ep-body{position:relative; font-size:.95rem; line-height:1.7; max-height:10.2em; overflow:hidden;}
.wrench-talk-page .ep-body::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3.4em; background:linear-gradient(to bottom, rgba(247,249,251,0) 0%, #F7F9FB 86%); pointer-events:none;}
.wrench-talk-page .more-t:checked ~ .ep-body{max-height:none;}
.wrench-talk-page .more-t:checked ~ .ep-body::after{display:none;}
.wrench-talk-page .spotlight-copy p:not(.eyebrow){position:relative; max-height:10.08em; overflow:hidden;}
.wrench-talk-page .spotlight-copy p:not(.eyebrow)::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3.4em; background:linear-gradient(to bottom, rgba(6,22,41,0) 0%, var(--navy) 86%); pointer-events:none;}
.wrench-talk-page .more-t:checked ~ .spotlight-copy p:not(.eyebrow){max-height:none;}
.wrench-talk-page .more-t:checked ~ .spotlight-copy p:not(.eyebrow)::after{display:none;}
.wrench-talk-page .spotlight .more-link{color:var(--teal-300);}
.wrench-talk-page .spotlight .more-t:focus-visible ~ .spotlight-copy .more-link{outline-color:var(--teal-300);}
.wrench-talk-page .spotlight-qs{display:none;}
.wrench-talk-page .more-t:checked ~ .spotlight-qs{display:block;}
}
@media (max-width:980px){
.wrench-talk-page .spotlight{grid-template-columns:1fr; gap:28px; padding:32px;}
.wrench-talk-page .spotlight-side{order:-1;}
.wrench-talk-page .qs-list{grid-template-columns:1fr;}
}
@media (max-width:860px){
.wrench-talk-page .ep-grid{grid-template-columns:1fr;}
.wrench-talk-page .ep-foot{margin-top:0;}
}
@media (max-width:767px){
.wrench-talk-page .section{padding:48px 16px;}
.wrench-talk-page .wrap{padding-inline:8px;}
.wrench-talk-page .title-band{padding:52px 20px 58px;}
.wrench-talk-page .title-band-inner{padding-inline:0;}
.wrench-talk-page .spotlight{padding:24px; border-radius:16px;}
.wrench-talk-page .ep-card{padding:22px; border-radius:16px;}
.wrench-talk-page .btn{min-height:48px; width:100%; justify-content:center;}
}
@media (max-width:600px){
.wrench-talk-page .title-sub{font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){
.wrench-talk-page *{animation:none !important;}
.wrench-talk-page .btn:hover{transform:none;}
.wrench-talk-page .btn:hover .arrow{transform:none;}
.wrench-talk-page .btn-ghost::before{transition:none;}
.wrench-talk-page .more-chev{transition:none;}
}
.wrench-talk-page{--navy-1:#061629; --navy-2:#0A2036; --navy:#061629; --teal:#4CE2CC; --teal-2:#22ABAD; --teal-3:#1F9A9C; --cyan:#38CFC0; --teal-300:#4CE2CC; --teal-400:#22ABAD; --teal-500:#1F9A9C; --teal-600:#15767A; --teal-700:#0A5E68; --bg:#FFFFFF; --line:#E7EEEC; --ink:#000000; --muted:#595552; --on-dark:rgba(255,255,255,.74); --font:"Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; --display:"Saira", ui-sans-serif, system-ui, sans-serif; --action:"Manrope", ui-sans-serif, sans-serif; --font-cta:var(--action); --ease:cubic-bezier(.22,1,.36,1); --shadow-cta:0 6px 18px rgba(34,171,173,.4); --shadow-card:0 1px 2px rgba(6,22,41,.04),0 18px 40px -26px rgba(6,22,41,.22); --nav-h:72px;}
.wrench-talk-page #topics,.wrench-talk-page #practitioners{scroll-margin-top:calc(var(--nav-h) + 16px);}
.wrench-talk-page .ep-wrap{max-width:1200px; margin:0 auto; padding-inline:24px;}
.wrench-talk-page .ep-split{display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); column-gap:32px; row-gap:48px; align-items:start; padding:44px 0 76px;}
.wrench-talk-page .ep-main{grid-column:1; grid-row:1; display:flex; flex-direction:column;}
.wrench-talk-page .kt{grid-column:2; grid-row:1 / span 2;}
.wrench-talk-page .prac-sec{grid-column:1; grid-row:2;}
.wrench-talk-page .vid{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--navy-1); box-shadow:0 18px 44px -28px rgba(6,22,41,.55);}
.wrench-talk-page .vid img{width:100%; height:100%; object-fit:cover;}
.wrench-talk-page .vid-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:var(--teal-2); color:#fff; display:grid; place-items:center; box-shadow:0 12px 32px rgba(6,22,41,.5); transition:background .22s var(--ease), transform .22s var(--ease);}
.wrench-talk-page .vid-play svg{margin-left:4px;}
.wrench-talk-page .vid:hover .vid-play{background:var(--teal-3); transform:translate(-50%,-50%) scale(1.07);}
.wrench-talk-page .vid:focus-visible{outline:2px solid var(--teal-600); outline-offset:4px;}
.wrench-talk-page .vid{order:-1;}
.wrench-talk-page .ep-title{margin-top:30px;}
.wrench-talk-page .ep-title h1{margin:12px 0 0; font-family:var(--display); font-size:clamp(1.85rem,3.2vw,2.5rem); line-height:1.18; font-weight:700; letter-spacing:-.02em; color:var(--ink);}
.wrench-talk-page .ep-lead{margin-top:20px; font-size:1.02rem; line-height:1.72; color:#3C4652;}
.wrench-talk-page .ep-lead b{color:var(--ink); font-weight:600;}
.wrench-talk-page .prac-sec{margin-top:0;}
.wrench-talk-page .prac-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:20px;}
.wrench-talk-page .prac{display:flex; flex-direction:column; background:#F7F9FB; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow-card);}
.wrench-talk-page .prac-top{display:flex; align-items:center; gap:14px;}
.wrench-talk-page .prac-top img{width:72px; height:72px; flex:none; border-radius:10px; object-fit:cover; border:1px solid var(--line);}
.wrench-talk-page .prac-top h3{font-size:18px; line-height:1.25; font-weight:700; color:var(--ink);}
.wrench-talk-page .prac ul{margin:16px 0 0; padding-left:1.15em; display:grid; gap:8px;}
.wrench-talk-page .prac li{font-size:13.5px; line-height:1.55; color:#3C4652; padding-left:3px;}
.wrench-talk-page .prac li::marker{color:var(--teal-600);}
.wrench-talk-page .prac-foot{margin-top:auto; padding-top:20px;}
.wrench-talk-page .kt{position:sticky; top:calc(var(--nav-h) + 20px); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-card);}
.wrench-talk-page .kt-head{background:var(--teal-2); color:#fff; padding:15px 18px; text-align:center; font-size:16px; font-weight:600;}
.wrench-talk-page .kt details{border-top:1px solid var(--line);}
.wrench-talk-page .kt summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; min-height:52px; font-size:14.5px; font-weight:600; color:var(--ink); transition:background .18s var(--ease), color .18s var(--ease);}
.wrench-talk-page .kt summary::-webkit-details-marker{display:none;}
.wrench-talk-page .kt summary::marker{content:"";}
.wrench-talk-page .kt summary:hover{background:#F3F9F9; color:var(--teal-700);}
.wrench-talk-page .kt summary:focus-visible{outline:2px solid var(--teal-600); outline-offset:-2px;}
.wrench-talk-page .kt .chev{flex:none; color:var(--teal-600); transition:transform .22s var(--ease);}
.wrench-talk-page .kt details[open] > summary{background:#F3F9F9; color:var(--teal-700);}
.wrench-talk-page .kt details[open] .chev{transform:rotate(90deg);}
.wrench-talk-page .kt-body{padding:0 18px 17px; font-size:13.5px; line-height:1.7; color:#3C4652;}
@media (max-width:1024px){
.wrench-talk-page .ep-split{grid-template-columns:1fr; row-gap:44px;}
.wrench-talk-page .ep-main,.wrench-talk-page .kt,.wrench-talk-page .prac-sec{grid-column:auto; grid-row:auto;}
.wrench-talk-page .vid{order:0; margin-top:22px;}
.wrench-talk-page .ep-title{margin-top:0;}
.wrench-talk-page .kt{position:static;}
}
@media (max-width:767px){
.wrench-talk-page .ep-wrap{padding-inline:18px;}
.wrench-talk-page .ep-split{padding:28px 0 56px; gap:36px;}
.wrench-talk-page .vid-play{width:60px; height:60px;}
.wrench-talk-page .prac-grid{grid-template-columns:1fr;}
.wrench-talk-page .prac{padding:18px; border-radius:14px;}
.wrench-talk-page .prac-foot .btn{min-height:48px; width:100%; justify-content:center;}
.wrench-talk-page .kt{border-radius:14px;}
}
@media (prefers-reduced-motion:reduce){
.wrench-talk-page .vid:hover .vid-play{transform:translate(-50%,-50%);}
.wrench-talk-page .kt .chev{transition:none;}
}

/* ---- Guards against main.css leaking into the page ----------------------------
   main.css sets an 18px/1.6 body, black headings and its own .btn-ghost glow; the
   design was drawn on the browser defaults (16px, normal leading) and white text
   inside the navy band, so those are pinned here. */
.wrench-talk-page{ font-size:16px; line-height:normal; }
.wrench-talk-page .title-band h1{ color:#fff; }
.wrench-talk-page .eyebrow{ opacity:1; transform:none; animation:none; }
.wrench-talk-page .section{ padding-block:64px; }
.wrench-talk-page .btn{ text-decoration:none; }
.wrench-talk-page .btn:not(.btn-ghost){ line-height:normal; }   /* .btn-ghost sets 1.2 via its font shorthand */
.wrench-talk-page .btn-ghost:not(:hover){ box-shadow:none; }