/* Episode cover: the art beside every row of the episode list (Episodes hub + topic pages). Picked 30 Sep 2026 from the
   episode-art review: round 2, C6 "Big name" (episode-art-variants/cover/). Loaded after ot-pages.css, on the list pages only;
   the old square tile (.eprow__art in ot-pages.css) is left as it is, because the Next Episode card and the About hero cards
   still use it.

   A 4:5 cover on the site's deep-green card colour. The guest's cutout (black and white) fills the top, lit from behind;
   the guest's first and last name are each set to the cover's full width at the foot, the surname in green (the site's
   H1 pattern: last phrase green); the guest's logo, the episode, the topic and the play circle run down the right.
   No show name on the art. Everything inside is in cqw (1cqw = 1% of the cover's width; the cover is 100 × 125cqw), so the
   composition is the same at 320px, 250px and phone width.

   The two name lines carry their own size, --fs, so each fills the width: fs = 86 / (Anton width of the word in em − 0.01 ×
   its letters). Measured: Austin 34.7, Wendel 30, Derrick 29, Conyers 27 (cqw). Capped at 36cqw for very short names.
   The cutouts are cut flat on their left edge, so the guest always starts at the cover's left edge (left:0). */

/* the row: the art column takes the cover's width */
.eplist--cover .eprow{grid-template-columns:320px 1fr; gap:52px}
.eplist--cover .eprow h3{max-width:21ch}
.eplist--cover .eprow .links .needs{margin:0}
@media (max-width:1100px){ .eplist--cover .eprow{grid-template-columns:250px 1fr; gap:36px} }
@media (max-width:700px){ .eplist--cover .eprow{grid-template-columns:1fr; gap:24px} .eplist--cover .epcover{width:100%; max-width:360px} }

.epcover{position:relative; display:block; overflow:hidden; isolation:isolate; container-type:inline-size; aspect-ratio:4/5; border-radius:12px;
  color:#fff; text-decoration:none; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(62% 42% at 40% 24%, rgba(32,157,80,.5) 0, rgba(32,157,80,0) 72%), linear-gradient(180deg,#1B4F31 0,#164328 100%);
  box-shadow:0 50px 90px -56px rgba(22,67,40,.95), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform 1s var(--out-expo), box-shadow 1s var(--out-expo)}
.epcover > *{position:absolute}
.epcover img{display:block; max-width:none; -webkit-user-drag:none; user-select:none}
/* fine grain over the whole cover, felt more than seen */
.epcover::after{content:""; position:absolute; inset:0; z-index:9; pointer-events:none; opacity:.1; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}

.epcover__guest{left:0; top:0; width:98cqw; height:auto; z-index:2; pointer-events:none; transform-origin:50% 100%;
  filter:grayscale(1) contrast(1.08) drop-shadow(0 1.5cqw 4cqw rgba(0,0,0,.35)); transition:transform 1.1s var(--out-expo)}
.epcover__shade{left:0; right:0; bottom:0; height:58%; z-index:3; background:linear-gradient(0deg,rgba(12,38,23,.96) 0,rgba(12,38,23,.78) 40%,rgba(12,38,23,0) 100%)}
.epcover__logo{right:6cqw; top:6cqw; height:9cqw; width:auto; z-index:4; opacity:.9}
.epcover__logo--wide{height:8cqw}
.epcover__side{right:6cqw; top:20cqw; width:32cqw; z-index:4; text-align:right}
.epcover__side small{display:block; margin:0 0 1.8cqw -30cqw; white-space:nowrap; font:600 max(10px,2.7cqw)/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:rgba(239,241,238,.72)}
.epcover__side b{display:block; font:400 5.2cqw/.98 var(--display); text-transform:uppercase; letter-spacing:-.005em; color:rgba(239,241,238,.86)}
.epcover__name{left:6cqw; right:6cqw; bottom:5.5cqw; z-index:4}
.epcover__name b{display:block; font:400 min(var(--fs,24cqw),36cqw)/.84 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--paper); white-space:nowrap}
.epcover__name b + b{color:var(--green)}
.epcover__play{right:6cqw; top:47cqw; width:14cqw; height:14cqw; z-index:8; display:grid; place-items:center; border-radius:50%; background:var(--paper); color:#111;
  transition:background-color .3s ease, color .3s ease}
.epcover__play svg{width:36%; height:36%; margin-left:9%}

/* hover the row: the cover lifts, the guest rises a little, play turns green */
.eprow:hover .epcover{transform:translateY(-6px); box-shadow:0 60px 100px -56px rgba(22,67,40,1), inset 0 1px 0 rgba(255,255,255,.12)}
.eprow:hover .epcover__guest{transform:translateY(-1.2cqw)}
.eprow:hover .epcover__play{background:var(--green); color:#fff}

@media (prefers-reduced-motion:reduce){
  .epcover,.epcover *{transition:none !important}
  .eprow:hover .epcover,.eprow:hover .epcover__guest{transform:none}
}