/* ConTech Exec episode pages. Tokens and patterns copied from the live contech-exec.com homepage (Oct 28 2026). */
:root{color-scheme:light;--paper:#fbfbfa;--tint:#f2f4f6;--ink:#0f1c2b;--muted:#5e6b78;--rule:#e2e6ea;--blue:#1f4f7a;--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;--sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--ease:180ms ease}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--sans);padding-inline:24px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.wrap{max-width:1040px;margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.005em}
h2{font-size:clamp(34px,4.4vw,48px);line-height:1.05}
.eyebrow{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.link{border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color var(--ease),color var(--ease)}
.link:hover{border-color:var(--blue);color:var(--blue)}
/* header (same as homepage) */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px;border-bottom:1px solid var(--rule);flex-wrap:wrap;margin-inline:-24px;padding-inline:24px}
.mark{display:flex;flex-direction:column;gap:7px}
.mark b{font:500 26px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase}
.mark small{display:flex;align-items:center;gap:7px;font:500 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mark svg{width:16px;height:16px;color:var(--blue)}
.top nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.top nav a{font:500 14px/1 var(--sans);color:var(--muted);transition:color var(--ease)}
.top nav a:hover{color:var(--ink)}
.top nav a.on{color:var(--ink);border-bottom:1px solid var(--blue);padding-bottom:3px}
.top nav a.cta{color:var(--paper);background:var(--ink);padding:12px 20px;border-radius:2px}
.top nav a.cta:hover{background:var(--blue)}
/* page head */
.phead{padding-block:clamp(48px,7vw,88px) clamp(32px,5vw,56px)}
.phead h1{font-size:clamp(42px,6.4vw,80px);line-height:1;margin:22px 0 20px;max-width:16em}
.phead .lede{margin:0;color:var(--muted);max-width:34em;font-size:18px}
.crumb{color:var(--blue)}.crumb:hover{color:var(--ink)}
.meta{color:var(--muted);font-size:15px;margin:0}
.meta b{font-weight:500;color:var(--ink)}
/* media */
.media{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,4vw,48px);align-items:start;padding-bottom:clamp(48px,7vw,80px)}
.vid{aspect-ratio:16/9;background:var(--ink);border-radius:2px;overflow:hidden;position:relative}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
audio{width:100%;margin-top:18px;height:40px}
.side{border-top:1px solid var(--ink);padding-top:20px}
.listen{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.listen a{font:500 14px/1 var(--sans);align-self:flex-start}
.btn2{font:500 14px/1 var(--sans);padding:15px 22px;background:var(--ink);color:var(--paper);border-radius:2px;transition:background var(--ease);display:inline-block;text-align:center}
.btn2:hover{background:var(--blue)}
/* guest */
.gprof{display:flex;gap:16px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.gprof h3{font:500 26px/1.1 var(--serif);margin:8px 0 0}
.gprof p{color:var(--muted);margin:4px 0 0;font-size:15px;line-height:1.4}
.head-ph{flex:none;width:72px;height:88px;background:linear-gradient(160deg,#e4eef2,#fff);border:1px solid var(--rule);display:grid;place-items:center;border-radius:2px}
.head-ph span{font:500 28px/1 var(--serif);color:var(--blue)}
.elinks{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:14px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.tags span{font:500 12px/1 var(--sans);color:var(--blue);border:1px solid var(--rule);padding:6px 9px;border-radius:999px}
/* sections (homepage .grid pattern) */
section{border-top:1px solid var(--rule);padding-block:clamp(48px,7vw,88px)}
.grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,6vw,80px)}
.grid h2{margin-top:14px}
.grid>div:first-child p{color:var(--muted);margin:16px 0 0;max-width:19em;font-size:15px}
.notes{max-width:40em}
.notes p{margin:0 0 16px}.notes ul{margin:0 0 16px;padding-left:20px}.notes li{margin-bottom:6px}
.notes a{border-bottom:1px solid var(--rule)}.notes a:hover{color:var(--blue);border-color:var(--blue)}
/* chapters (homepage .layers pattern) */
.chap{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.chap li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--rule)}
.chap time{font:500 13px/1 var(--sans);letter-spacing:.06em;color:var(--blue);font-variant-numeric:tabular-nums}
.chap a,.chap span{font:500 21px/1.2 var(--serif);transition:color var(--ease)}
.chap a:hover{color:var(--blue)}
/* transcript */
details{border-top:1px solid var(--ink)}
summary{cursor:pointer;list-style:none;padding-block:16px;font:500 14px/1 var(--sans);display:flex;justify-content:space-between;border-bottom:1px solid var(--rule)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px/14px var(--sans);color:var(--blue)}
details[open] summary::after{content:"–"}
summary:hover{color:var(--blue)}
.tx{padding-top:20px;max-width:40em;font-size:16px}
.tx p{margin:0 0 14px}.tx b{font-weight:600;color:var(--blue)}
/* episodes list (homepage .eps/.ep) */
.eps{border-top:1px solid var(--ink)}
.ep{display:grid;grid-template-columns:110px minmax(0,1fr) 70px;gap:20px;align-items:baseline;padding-block:20px;border-bottom:1px solid var(--rule)}
.ep time,.ep span{font:500 13px/1.4 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.ep span{text-align:right}
.ep h3{font-size:clamp(22px,2.6vw,28px);line-height:1.15;transition:color var(--ease)}
.ep:hover h3{color:var(--blue)}
.ep p{margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.more{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:26px;font-size:15px;color:var(--muted)}
.more a{color:var(--ink)}
/* invite band (homepage .invite) */
.invite{background:var(--tint);margin-inline:-24px;padding:clamp(56px,8vw,96px) 24px;text-align:center;border-top:0}
.invite h2{max-width:13em;margin:18px auto 0}
.invite p{color:var(--muted);max-width:30em;margin:18px auto 0}
.invite .mail{display:inline-block;margin-top:28px;font:500 24px/1.2 var(--serif);border-bottom:1px solid var(--blue);padding-bottom:4px}
footer{padding-block:30px 44px;display:flex;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;font-size:13px;color:var(--muted);align-items:center}
footer span{display:flex;align-items:center;gap:9px}
footer svg{width:18px;height:18px;color:var(--blue);flex:none}
@media (max-width:860px){
 .top{gap:10px 14px;padding-block:12px;flex-wrap:nowrap}
 .mark{gap:4px;flex:none}.mark b{font-size:17px;letter-spacing:.08em;white-space:nowrap}.mark small{display:none}
 .top nav{gap:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;padding-right:8px;mask-image:linear-gradient(90deg,#000 85%,transparent)}
 .top nav::-webkit-scrollbar{display:none}
 .top nav a{font-size:13px;white-space:nowrap}.top nav a.cta{display:none}
 .media,.grid{grid-template-columns:1fr}
}
@media (max-width:560px){.ep{grid-template-columns:1fr auto;gap:4px 14px}.ep time{grid-column:1/-1}.chap li{grid-template-columns:60px minmax(0,1fr)}}