/* Encrypted Ambition episode pages. Shared by every /podcasts// page, so a design change ships once. Built on the site's own tokens (--font-heading, --font-body, --bg) and on blog.css's .blog-hero, so an episode looks like it belongs beside a blog post. */ /* .ea-dock is appended to , outside .ea, so it needs the tokens too */ .ea,.ea-dock{--ea-cyan:#00A9E0;--ea-cyan-soft:rgba(0,169,224,.14);--ea-ink:#f0f0f0;--ea-text:rgba(240,240,240,.84); --ea-dim:rgba(240,240,240,.58);--ea-line:rgba(255,255,255,.09);--ea-glass:rgba(255,255,255,.035); --ea-panel:rgba(17,27,51,.72);color:var(--ea-text);font-family:var(--font-body,'Inter',system-ui,sans-serif); font-size:1.0625rem;line-height:1.75;-webkit-font-smoothing:antialiased} .ea *{box-sizing:border-box} .ea a{color:var(--ea-cyan);text-underline-offset:3px} .ea a:hover{color:#5fd0f5} .ea :focus-visible{outline:2px solid var(--ea-cyan);outline-offset:3px;border-radius:6px} /* The site sets `#content h1..h6, #content p {padding:10px}`, `#content ul,ol {margin-left:20px; padding-left:20px}` and fixed px heading sizes, all at ID specificity. These put the episode page back on its own grid. (The forced-white colour rule is escaped with .ptg-embed on the article, which is the hatch the site provides for exactly this.) */ #content .ea h1,#content .ea h2,#content .ea h3,#content .ea p{padding:0} #content .ea ul,#content .ea ol{margin-left:0;padding-left:0;list-style:none} #content .ea .blog-hero__title{line-height:1.22;margin:0 0 18px} #content .ea h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25;font-weight:700} #content .ea h3{font-size:1.1rem;line-height:1.35;font-weight:600} #content .ea .ea-card h3{font-size:1rem;margin:0 0 14px} #content .ea p.ea-lead{font-size:1.2rem;line-height:1.7} #content .ea .ea-player__title{font-size:1rem;line-height:1.3;margin:0 0 8px;font-weight:600} #content .ea .ea-player__label{font-size:12px;line-height:1.4;margin:0 0 2px} #content .ea .ea-takeaways strong{font-size:1.05rem} #content .ea .ea-notice p,#content .ea .ea-card p{line-height:1.6} #content .ea li{list-style:none} #content .ea p.ea-ai,#content .ea p.ea-transcript__note{font-size:.88rem;line-height:1.6;color:var(--ea-dim)} #content .ea p.ea-ai{margin:20px 0 0} #content .ea a.ea-eyebrow,#content .ea a.ea-btn,#content .ea a.ea-tool,#content .ea a.ea-phone,#content .ea .ea-chapters a{text-decoration:none} .ea a.ea-eyebrow{color:var(--ea-ink)} .ea .ea-chapters a{color:var(--ea-text)} /* hero: blog.css does the heavy lifting; these are the episode-only parts */ .ea-hero .blog-hero__content{padding-bottom:72px} .ea-hero .blog-hero__overlay{opacity:.86} .ea-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--ea-ink);padding:7px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px; background:rgba(11,13,18,.45);backdrop-filter:blur(8px);margin:0 0 22px;text-decoration:none} .ea-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ea-cyan);box-shadow:0 0 0 4px var(--ea-cyan-soft)} .ea-eyebrow:hover{border-color:var(--ea-cyan);color:var(--ea-ink)} /* layout */ .ea-shell{max-width:1180px;margin:0 auto;padding:0 24px 96px;display:grid;grid-template-columns:minmax(0,1fr);gap:48px} @media(min-width:1080px){.ea-shell{grid-template-columns:minmax(0,1fr) 312px;gap:64px}} .ea-main{min-width:0} .ea-rail{display:flex;flex-direction:column;gap:20px} @media(min-width:1080px){.ea-rail{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 128px);overflow:auto;padding-right:4px}} /* player */ .ea-player{position:relative;margin:-44px 0 40px;z-index:3;padding:20px 22px;border-radius:18px;background:var(--ea-panel); border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(0,0,0,.45);backdrop-filter:blur(14px)} .ea-player audio{width:100%;display:block} .ea-player.is-enhanced audio{display:none} .ea-player__ui{display:none;align-items:center;gap:16px} .ea-player.is-enhanced .ea-player__ui{display:flex} .ea-play{flex:none;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:var(--ea-cyan);color:#04131b; display:grid;place-items:center;transition:transform .15s ease,box-shadow .2s ease;box-shadow:0 0 0 0 var(--ea-cyan-soft)} .ea-play:hover{transform:scale(1.05);box-shadow:0 0 0 8px var(--ea-cyan-soft)} .ea-play svg{width:22px;height:22px;fill:currentColor} .ea-play .ea-i-pause,.is-playing .ea-play .ea-i-play{display:none} .is-playing .ea-play .ea-i-pause{display:block} .ea-player__mid{flex:1;min-width:0} .ea-player__label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ea-dim);margin:0 0 2px} .ea-player__title{font-family:var(--font-heading,inherit);color:var(--ea-ink);font-weight:600;font-size:1rem;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 8px} .ea-player__time{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ea-dim)} .ea-seek{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;cursor:pointer; background:linear-gradient(90deg,var(--ea-cyan) var(--ea-p,0%),rgba(255,255,255,.16) var(--ea-p,0%))} .ea-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 6px rgba(0,0,0,.5)} .ea-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0} .ea-player__tools{display:flex;align-items:center;gap:6px;flex:none} .ea-tool{height:38px;min-width:44px;padding:0 10px;border-radius:10px;border:1px solid var(--ea-line);background:var(--ea-glass); color:var(--ea-ink);font:600 13px/1 var(--font-body,inherit);cursor:pointer;display:inline-grid;place-items:center;text-decoration:none; transition:border-color .15s,background .15s} .ea-tool:hover{border-color:var(--ea-cyan);background:var(--ea-cyan-soft);color:var(--ea-ink)} .ea-tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:640px){.ea-player{padding:16px}.ea-player__ui{flex-wrap:wrap}.ea-player__tools{width:100%;justify-content:space-between} .ea-tool{flex:1}.ea-play{width:52px;height:52px}} /* dock: appears once the episode is playing and the player has scrolled away. Centered and raised on phones so it never sits on the site's accessibility and chat buttons. */ .ea-dock{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);width:min(720px,calc(100vw - 176px));z-index:60; display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:999px;background:rgba(13,20,38,.94); border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 44px rgba(0,0,0,.55);backdrop-filter:blur(16px); transition:transform .35s cubic-bezier(.2,.8,.2,1);visibility:hidden} .ea-dock.is-on{transform:translate(-50%,0);visibility:visible} .ea-dock .ea-play{width:42px;height:42px}.ea-dock .ea-play svg{width:16px;height:16px} .ea-dock__title{font-family:var(--font-body,inherit);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ea-ink);font-size:14px;font-weight:600} .ea-dock__time{font-size:12px;color:var(--ea-dim);font-variant-numeric:tabular-nums;flex:none} .ea-dock .ea-seek{position:absolute;left:62px;right:22px;bottom:4px;height:3px;flex:none} .ea-dock .ea-seek::-webkit-slider-thumb{width:0;height:0}.ea-dock .ea-seek::-moz-range-thumb{width:0;height:0} /* Phones: the site already owns the bottom edge (a sticky call bar, with the chat and accessibility buttons stacked above it), so the dock goes to the TOP, left of the menu button. */ @media(max-width:720px){.ea-dock{top:12px;bottom:auto;left:12px;right:84px;width:auto;transform:translateY(-180%)} .ea-dock.is-on{transform:none}.ea-dock__time{display:none}} @media(prefers-reduced-motion:reduce){.ea-dock,.ea-play{transition:none}} /* notice */ .ea-notice{display:flex;gap:14px;margin:0 0 40px;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,190,80,.22); background:rgba(255,190,80,.055);font-size:.95rem;line-height:1.6;color:var(--ea-text)} .ea-notice svg{flex:none;width:20px;height:20px;margin-top:2px;stroke:#ffbe50;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ea-notice p{margin:0} /* sections */ .ea h2{font-family:var(--font-heading,inherit);color:var(--ea-ink);font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25; margin:56px 0 18px;letter-spacing:-.01em} .ea-kicker{display:block;font:600 12px/1 var(--font-body,inherit);letter-spacing:.16em;text-transform:uppercase;color:var(--ea-cyan);margin:0 0 10px} .ea-lead{font-size:1.2rem;line-height:1.7;color:var(--ea-ink)} .ea-main>p{margin:0 0 18px} .ea-ai{font-size:.86rem;color:var(--ea-dim);margin-top:18px} /* takeaways */ .ea-takeaways{list-style:none;margin:0;padding:0;counter-reset:ea;display:grid;gap:14px} .ea-takeaways li{counter-increment:ea;position:relative;padding:22px 24px 22px 84px;border-radius:16px;background:var(--ea-glass); border:1px solid var(--ea-line);transition:border-color .2s,background .2s} .ea-takeaways li:hover{border-color:rgba(0,169,224,.4);background:rgba(0,169,224,.045)} .ea-takeaways li::before{content:counter(ea,decimal-leading-zero);position:absolute;left:24px;top:20px; font:700 1.9rem/1 var(--font-heading,inherit);color:transparent;-webkit-text-stroke:1px var(--ea-cyan);letter-spacing:-.02em} .ea-takeaways strong{display:block;color:var(--ea-ink);font-weight:600;font-size:1.05rem;line-height:1.5;margin:0 0 12px} .ea-takeaways blockquote{margin:0;padding:2px 0 2px 16px;border-left:2px solid rgba(0,169,224,.55);color:var(--ea-dim); font-size:.95rem;line-height:1.65;font-style:italic} @media(max-width:640px){.ea-takeaways li{padding:58px 20px 20px}.ea-takeaways li::before{top:18px;left:20px}} /* rail cards */ .ea-card{padding:22px;border-radius:16px;background:var(--ea-glass);border:1px solid var(--ea-line)} .ea-card h3{font-family:var(--font-heading,inherit);color:var(--ea-ink);font-size:1rem;margin:0 0 14px;letter-spacing:0} .ea-card p{font-size:.95rem;line-height:1.6;margin:0 0 14px} .ea-card--cta{background:linear-gradient(160deg,rgba(0,169,224,.16),rgba(0,169,224,.03) 60%);border-color:rgba(0,169,224,.32)} .ea-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border-radius:12px; font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid var(--ea-line);background:rgba(255,255,255,.04); color:var(--ea-ink)!important;transition:border-color .15s,background .15s,transform .15s} .ea-btn+.ea-btn{margin-top:10px} .ea-btn:hover{border-color:var(--ea-cyan);background:var(--ea-cyan-soft);transform:translateY(-1px)} .ea-btn--main{background:var(--ea-cyan);border-color:var(--ea-cyan);color:#04131b!important} .ea-btn--main:hover{background:#2cc0f2} .ea-phone{display:block;text-align:center;margin-top:12px;font-weight:600;font-size:1.05rem;color:var(--ea-ink)!important;text-decoration:none} .ea-chapters{list-style:none;margin:0;padding:0;font-size:.93rem} .ea-chapters li{border-top:1px solid var(--ea-line)} .ea-chapters li:first-child{border-top:0} .ea-chapters a{display:block;padding:10px 0;color:var(--ea-text);text-decoration:none;line-height:1.4} .ea-chapters a:hover{color:var(--ea-cyan)} .ea-links{list-style:none;margin:0;padding:0;font-size:.95rem} .ea-links li{padding:7px 0} /* transcript */ .ea-transcript__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin:64px 0 8px} .ea-transcript__head h2{margin:0} .ea-follow{display:none;align-items:center;gap:10px;font-size:13px;color:var(--ea-dim);cursor:pointer;user-select:none} .ea-js .ea-follow{display:inline-flex} .ea-follow input{accent-color:var(--ea-cyan);width:16px;height:16px} .ea-transcript__note{font-size:.88rem;color:var(--ea-dim);margin:0 0 26px} .ea-transcript{position:relative} .ea-js .ea-transcript.is-collapsed{max-height:620px;overflow:hidden} .ea-js .ea-transcript.is-collapsed::after{content:"";position:absolute;inset:auto 0 0 0;height:220px;pointer-events:none; background:linear-gradient(to top,var(--bg,#0b0d12) 12%,transparent)} .ea-more{display:none;margin:-6px auto 0;position:relative;z-index:2} .ea-js .ea-more{display:flex;width:auto;padding:12px 26px} .ea-transcript h3{font-family:var(--font-heading,inherit);color:var(--ea-ink);font-size:1.1rem;margin:40px 0 14px;padding-top:18px; border-top:1px solid var(--ea-line);scroll-margin-top:120px} .ea-turn{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;padding:14px 16px;margin:0 -16px;border-radius:12px; border-left:2px solid transparent;transition:background .25s,border-color .25s;scroll-margin-top:140px} .ea-turn.is-active{background:rgba(0,169,224,.07);border-left-color:var(--ea-cyan)} .ea-ts{grid-row:1/span 9;align-self:start;margin-top:2px;padding:4px 0;border:0;background:none;color:var(--ea-dim);cursor:default; font:500 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:left} .ea-js .ea-ts{cursor:pointer} .ea-js .ea-ts:hover{color:var(--ea-cyan)} .ea-js .ea-ts::before{content:"";display:inline-block;margin-right:6px;border-style:solid;border-width:4px 0 4px 6px; border-color:transparent transparent transparent currentColor;opacity:0;transition:opacity .15s} .ea-js .ea-ts:hover::before,.ea-turn.is-active .ea-ts::before{opacity:1} .ea-turn.is-active .ea-ts{color:var(--ea-cyan)} .ea-who{grid-column:2;font-family:var(--font-heading,inherit);font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ea-ink)} .ea-turn p{grid-column:2;margin:0 0 10px;color:var(--ea-text)} .ea-turn p:last-child{margin-bottom:0} @media(max-width:640px){.ea-turn{grid-template-columns:1fr;gap:2px}.ea-ts{grid-row:auto}.ea-who,.ea-turn p{grid-column:1}.ea-shell{padding:0 18px 120px}} /* closing band */ .ea-close{margin:72px 0 0;padding:34px;border-radius:20px;text-align:center;border:1px solid var(--ea-line); background:radial-gradient(120% 140% at 50% 0%,rgba(0,169,224,.14),transparent 60%),var(--ea-glass)} .ea-close h2{margin:0 0 10px} .ea-close p{margin:0 auto 22px;max-width:560px} .ea-close__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .ea-close__row .ea-btn{width:auto;margin:0;padding:12px 22px} /* one orchestrated entrance, nothing scattered */ @media(prefers-reduced-motion:no-preference){ .ea-hero .blog-hero__content>*{opacity:0;transform:translateY(14px);animation:ea-rise .7s cubic-bezier(.2,.8,.2,1) forwards} .ea-hero .blog-hero__content>*:nth-child(2){animation-delay:.08s}.ea-hero .blog-hero__content>*:nth-child(3){animation-delay:.16s} .ea-player{opacity:0;animation:ea-rise .7s .26s cubic-bezier(.2,.8,.2,1) forwards} @keyframes ea-rise{to{opacity:1;transform:none}} }