/* A typographic cover built around Romain's original photograph. */
.podcast-art { --cover-paper:#e5dfd3; --cover-ink:#24332d; --cover-line:#a15b40; position:relative; container-type:inline-size; isolation:isolate; overflow:hidden; aspect-ratio:16/10; border-radius:14px; background:var(--cover-paper); color:var(--cover-ink); }
.podcast-art--sage { --cover-paper:#d9e1d8; --cover-ink:#293b32; --cover-line:#627467; }
.podcast-art--paper { --cover-paper:#efe7de; --cover-ink:#4e3432; --cover-line:#a9756a; }
.podcast-art::before { content:""; position:absolute; inset:12px; z-index:0; border:1px solid color-mix(in srgb,var(--cover-ink) 16%,transparent); border-radius:7px; pointer-events:none; }
.podcast-art__masthead { position:absolute; z-index:3; inset:7.5% 6% auto; display:flex; justify-content:space-between; align-items:start; gap:16px; }
.podcast-art__masthead > span:first-child { font:500 clamp(11px,3.6cqw,24px)/1.05 var(--sans); letter-spacing:-.045em; }
.podcast-art__masthead > span:last-child { padding-top:2px; font:400 clamp(8px,2.15cqw,14px)/1.5 var(--mono); color:var(--cover-ink); }
.podcast-art__topic { position:absolute; inset:29% auto auto 6%; z-index:3; width:54%; }
.podcast-art__topic strong { display:block; font:500 clamp(24px,7.5cqw,62px)/1.04 var(--sans); letter-spacing:-.055em; }
.podcast-art__topic em { display:inline-block; margin-top:.12em; font:400 1.04em/1.1 "IBM Plex Serif",Georgia,serif; letter-spacing:-.055em; color:var(--cover-line); }
.podcast-art__portrait { position:absolute; z-index:2; right:-2%; bottom:-8%; width:49%; height:94%; object-fit:contain; object-position:right bottom; filter:saturate(.78); transform-origin:80% 100%; transition:transform .65s var(--ease-out); }
.podcast-art__orbit { position:absolute; width:58%; height:112%; right:-7%; top:13%; border:1px solid var(--cover-line); opacity:.48; border-radius:50% 50% 0 0; transform:rotate(-13deg); }
.podcast-art__orbit::after { content:""; position:absolute; inset:9px; border:1px solid var(--cover-line); border-radius:inherit; opacity:.45; }
.podcast-art__symbol { position:absolute; z-index:0; width:46%; height:66%; right:-2%; top:12%; color:var(--cover-ink); opacity:.12; }
.podcast-art__symbol svg { width:100%; height:100%; }
.podcast-art__signature { position:absolute; z-index:3; inset:auto 6% 7%; display:flex; align-items:end; justify-content:space-between; }
.podcast-art__signature > span:first-child { font:400 clamp(8px,2.2cqw,14px)/1.45 var(--mono); letter-spacing:-.02em; }
.podcast-art__arrow { display:grid; place-items:center; width:10cqw; height:10cqw; min-width:32px; min-height:32px; max-width:62px; max-height:62px; border-radius:50%; background:var(--cover-ink); color:var(--cover-paper); font:400 clamp(20px,5cqw,34px)/1 var(--sans); transition:transform .4s var(--ease-out); }
a:hover .podcast-art__portrait, summary:hover .podcast-art__portrait { transform:scale(1.035); }
a:hover .podcast-art__arrow, summary:hover .podcast-art__arrow { transform:rotate(8deg); }
.podcast-art--large { aspect-ratio:16/10; border-radius:18px; }
@media (prefers-reduced-motion:reduce) { .podcast-art__portrait,.podcast-art__arrow { transition:none; } a:hover .podcast-art__portrait,summary:hover .podcast-art__portrait,a:hover .podcast-art__arrow,summary:hover .podcast-art__arrow { transform:none; } }
