/* Listen page, "Prefer to Read? Every Episode Is Written Up" (.ab4-means--read): the episode deck, picked 30 Sep from review
   round 3 of this section (listen-read-v2/deck-6-all.html, C6 "All of it"; the team: "I like this one … move this from here
   to its actual page"). One black card per episode: the title where a numeral used to be (last phrase green, as on the episode
   banners), the banner's waveform with the playhead on the part about hiring, the next guests waiting at the deck's edge. The
   front card turns over to its written side before the next one comes forward; the green card lists the chapters about
   hiring. Markup written by listen-read-v2/_src/deck-port.mjs from the episode list; motion in ot-listen.js. Linked after
   ot-pages.css. Every size inside a card is cqw of the card, so it is the same drawing at every width. */

/* ---------- the section: the copy left (its CTA under a hairline, as reviewed), the deck right ---------- */
@media (min-width:961px){ .ab4-means--read .grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:72px; align-items:center} }
@media (min-width:961px) and (max-width:1100px){ .ab4-means--read .grid{gap:48px} }
.ab4-means--read .cta{flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:18px; margin:34px 0 0; padding:28px 0 0; border:0; border-top:1px solid rgba(17,17,17,.14); border-radius:0; background:none; box-shadow:none}
.ab4-means--read .cta p{margin:0; font:500 17px/1.45 var(--body); color:var(--ink); max-width:none}
.lr-obj{min-width:0; display:flex; flex-direction:column; gap:26px}
@media (max-width:960px){ .ab4-means--read .grid{gap:52px} .lr-obj{width:100%; max-width:620px; margin:0 auto} }

.lr-stage{position:relative; aspect-ratio:612/630}
.lr-deck{position:absolute; right:0; top:0; width:66%; aspect-ratio:4/5}

/* ---------- a card: --d = how far back it sits (0 = the front); the ones behind stand in line at the deck's left edge ---------- */
.ab4-means--read .lr-card{position:absolute; inset:0; display:block; border-radius:24px; color:#fff; text-decoration:none; perspective:1800px;
  transform-origin:50% 100%; z-index:calc(20 - var(--d,0)); filter:brightness(calc(1 - var(--d,0) * .14));
  transform:translate(calc(var(--d,0) * -26%), calc(var(--d,0) * 1.5%)) rotate(calc(var(--d,0) * -3deg)) scale(calc(1 - var(--d,0) * .06));
  transition:transform .9s var(--out-expo), filter .6s var(--ease), opacity .5s var(--ease)}
.ab4-means--read .lr-card.is-leaving{z-index:40; transform:translate(-58%, 6%) rotate(-14deg) scale(.96); transition:transform .45s cubic-bezier(.4,0,.6,1), filter .45s var(--ease)}
.ab4-means--read .lr-card:focus-visible{outline:3px solid var(--green); outline-offset:4px}
.lr-flip{position:absolute; inset:0; display:block; transform-style:preserve-3d}
.lr-face{position:absolute; inset:0; display:block; overflow:hidden; border-radius:24px; container-type:inline-size; -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%); box-shadow:0 50px 90px -50px rgba(17,17,17,.75), inset 0 1px 0 rgba(255,255,255,.06)}
.lr-face--b{transform:rotateY(180deg)}
.ab4-means--read .lr-face img{max-width:none}
.ab4-means--read .lr-face .cut{position:absolute; z-index:2; right:-3cqw; bottom:0; width:auto; height:84%; filter:grayscale(1) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%); mask-image:linear-gradient(90deg,transparent 0,#000 24%); transition:opacity .5s var(--ease)}
.ab4-means--read .lr-face .peek{position:absolute; z-index:2; left:-7cqw; bottom:0; width:auto; height:80%; filter:grayscale(1) contrast(1.05); opacity:0; transition:opacity .5s var(--ease)}
.lr-card:not(.is-front) .peek{opacity:1}   /* a card behind shows its guest at its edge, not in its middle */
.lr-card:not(.is-front) .cut{opacity:0}
.ab4-means--read .lr-face .logo{position:absolute; z-index:4; right:6cqw; top:6.5cqw; height:9cqw; width:auto; opacity:.95; transition:opacity .4s var(--ease)}

/* the front: topic, title, guest */
.lr-col{position:absolute; z-index:3; left:7cqw; top:7cqw; bottom:25cqw; width:52cqw; display:flex; flex-direction:column; align-items:flex-start; transition:opacity .4s var(--ease)}
.lr-card:not(.is-front) .lr-col,.lr-card:not(.is-front) .logo,.lr-card:not(.is-front) .lr-wave{opacity:0}   /* a card behind shows no cut-off words */
.lr-eb{display:flex; align-items:center; gap:10px; font:600 max(10px,2.5cqw)/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.lr-eb .eq{height:max(13px,3.4cqw)}
.ab4-means--read .lr-t{display:block; margin:5cqw 0 0; font:400 7cqw/.98 var(--display); text-transform:uppercase; letter-spacing:-.004em; color:#fff; text-wrap:balance}
.ab4-means--read .lr-t em{font-style:normal; color:var(--green)}
.lr-who{display:block; margin-top:5cqw}
.lr-who b{display:block; font:600 max(13px,4.3cqw)/1.2 var(--body); color:#fff}
.lr-who span{display:block; margin-top:.9cqw; font:500 max(11px,3.1cqw)/1.35 var(--body); color:rgba(255,255,255,.7)}

/* the waveform across the card's foot: the playhead jumps to the part about hiring once the deck is in view */
.lr-wave{position:absolute; z-index:3; left:7cqw; right:7cqw; top:80cqw; height:13cqw; transition:opacity .4s var(--ease)}
.lr-wave svg{display:block; width:100%; height:100%; overflow:visible}
.lr-wave rect{fill:rgba(239,241,238,.36)}
.lr-wave rect.hit{transition:fill .6s var(--ease) 1.25s}
.lr-wave rect.span{fill:rgba(32,157,80,0); transition:fill .6s var(--ease) 1.25s}
.lr-head{position:absolute; z-index:2; left:0; top:-2.5cqw; bottom:-2.5cqw; width:2px; margin-left:-1px; border-radius:1px; background:#fff; transition:left 1.1s cubic-bezier(.6,0,.25,1) .3s}
.lr-head::before{content:""; position:absolute; left:-5px; top:-5px; width:12px; height:12px; border-radius:50%; background:#fff}
.lr-head time{position:absolute; left:10px; top:-5.4cqw; font:400 max(13px,4cqw)/1 var(--display); letter-spacing:.02em; color:#fff; white-space:nowrap}
.lr-stage.is-seen .lr-card.is-front .lr-wave rect.hit{fill:var(--green)}
.lr-stage.is-seen .lr-card.is-front .lr-wave rect.span{fill:rgba(32,157,80,.2)}
.lr-stage.is-seen .lr-card.is-front .lr-head{left:var(--x)}

/* the back: the same episode written up (its written section, the sentence about hiring painted green) */
.lr-col--b{right:7cqw; width:auto}
.lr-by{display:flex; align-items:center; gap:3cqw}
.lr-by .lr-who{margin:0}
.ab4-means--read .lr-by .av{flex:none; width:12cqw; height:12cqw; border-radius:50%; object-fit:cover; object-position:50% 4%; background:radial-gradient(80% 70% at 30% 0, #2A2A2A 0, #161616 70%); filter:grayscale(1) contrast(1.05)}
.ab4-means--read .lr-h{display:block; margin:6cqw 0 3.2cqw; font:400 6.6cqw/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#fff; text-wrap:balance}
.ab4-means--read .lr-chip{display:inline-flex; align-items:center; gap:1.8cqw; max-width:100%; padding:1.2cqw 3.2cqw 1.2cqw 1.2cqw; border-radius:max(14px,3.6cqw); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font:500 max(11px,2.8cqw)/1.3 var(--body); color:#fff}
.ab4-means--read .lr-chip svg{flex:none; width:max(20px,5.2cqw); height:max(20px,5.2cqw); padding:1.4cqw; border-radius:50%; background:#fff; color:var(--green-deep)}
.ab4-means--read .lr-chip time{flex:none; font:400 max(12px,3.2cqw)/1 var(--display); letter-spacing:.03em}
.ab4-means--read .lr-chip span{min-width:0; text-wrap:balance}
.lr-ps{display:block; flex:1 1 auto; min-height:0; margin-top:3.6cqw; overflow:hidden; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent)}
.ab4-means--read .lr-ps p{margin:0 0 2.6cqw; font:400 max(12px,3.05cqw)/1.6 var(--body); color:rgba(255,255,255,.8); max-width:none; text-wrap:pretty}
.ab4-means--read .lr-hi{--hi:rgba(32,157,80,.62); color:#fff; font-weight:600; padding:.06em .14em; margin:0 -.14em; border-radius:4px;
  background:linear-gradient(var(--hi),var(--hi)) 0 0 / 0 100% no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone}
@container (max-width:380px){ .ab4-means--read .lr-ps .lr-pre{display:none} }   /* a narrow card starts at the sentence (Episode 2's is in its last paragraph) */

/* ---------- the green card: where to jump in (the hiring chapters; with no chapters yet, the first two things you'll learn) ---------- */
.lr-jump{position:absolute; z-index:30; left:0; bottom:3%; width:58%; border-radius:18px; color:#fff;
  background:linear-gradient(180deg,#1B4F31,#164328); box-shadow:0 40px 80px -40px rgba(22,67,40,.85), inset 0 1px 0 rgba(255,255,255,.12)}
/* the showing episode sets the card's height (it grows up from its foot); the others wait, laid over it */
.lr-j{position:absolute; left:0; right:0; bottom:0; min-width:0; padding:18px 12px 10px; opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .4s var(--ease), transform .7s var(--out-expo), visibility 0s linear .7s}
.lr-j.is-on{position:relative; opacity:1; visibility:visible; transform:none; transition-delay:.25s,.25s,0s}
.lr-label{display:block; margin:0 0 8px; padding:0 8px; font:600 11px/1.2 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.lr-rows{list-style:none; margin:0; padding:0}
.lr-rows li{margin:0}
.lr-rows li + li{border-top:1px solid rgba(255,255,255,.12)}
.ab4-means--read .lr-rows a{display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; align-items:baseline; padding:11px 8px; border-radius:10px; color:#fff; text-decoration:none; font:500 14.5px/1.4 var(--body); transition:background-color .2s var(--ease)}
.ab4-means--read .lr-rows a:hover{background:rgba(255,255,255,.1)}
.ab4-means--read .lr-rows a:focus-visible{outline:2px solid #fff; outline-offset:-2px}
.lr-rows time{font:400 20px/1 var(--display)}
.ab4-means--read .lr-rows--learn a{grid-template-columns:14px minmax(0,1fr); gap:12px; font-weight:400; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.86)}
.lr-rows--learn a > i{align-self:start; width:3px; height:15px; margin:3px 0 0 4px; border-radius:2px; background:#fff}
.lr-rows--learn b{color:#fff; font-weight:600}

/* ---------- the switcher: a button per episode, its bar the time until the next one ---------- */
.lr-eps{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.lr-eps[hidden]{display:none}   /* shown by ot-listen.js: without it the buttons would do nothing */
.ab4-means--read .lr-ep{position:relative; display:flex; align-items:center; gap:10px; padding:6px 18px 6px 6px; border-radius:999px; border:1px solid rgba(17,17,17,.14); background:rgba(255,255,255,.45);
  color:var(--ink); font:inherit; text-align:left; cursor:pointer; overflow:hidden; transition:background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease)}
.ab4-means--read .lr-ep:hover{background:#fff}
.ab4-means--read .lr-ep:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.ab4-means--read .lr-ep__img{width:38px; height:38px; max-width:none; border-radius:50%; object-fit:cover; object-position:50% 5%; background:radial-gradient(80% 70% at 30% 0, #1F1F1F 0, #111 70%); filter:grayscale(1) contrast(1.05)}
.lr-ep small{display:block; font:600 10.5px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.lr-ep b{display:block; font:600 14px/1.25 var(--body)}
.ab4-means--read .lr-ep[aria-pressed="true"]{background:#fff; border-color:rgba(17,17,17,.06); box-shadow:0 16px 32px -22px rgba(17,17,17,.5)}
.lr-ep[aria-pressed="true"] small{color:var(--green-ui)}
.lr-ep__bar{position:absolute; left:54px; right:18px; bottom:5px; height:2px; border-radius:2px; background:rgba(17,17,17,.08); overflow:hidden; opacity:0; transition:opacity .3s var(--ease)}
.lr-ep__bar i{display:block; width:100%; height:100%; background:var(--green); transform:scaleX(0); transform-origin:0 50%}
.ab4-means--read.is-auto .lr-ep[aria-pressed="true"] .lr-ep__bar{opacity:1}
.ab4-means--read.is-auto .lr-ep[aria-pressed="true"] .lr-ep__bar i{animation:lr-fill var(--lr-t,9500ms) linear forwards}
.ab4-means--read.is-paused .lr-ep__bar i{animation-play-state:paused}
@keyframes lr-fill{to{transform:scaleX(1)}}

/* ---------- motion off: nothing moves; the front card shows its written side with the sentence painted ---------- */
@media (prefers-reduced-motion:reduce){
  .lr-obj *,.lr-obj *::before,.lr-obj *::after{transition-duration:0s !important; transition-delay:0s !important}
  .ab4-means--read .lr-hi{background-size:100% 100%}
}

/* ---------- small laptops (961-1100): the column is narrow, so Episode 2's green card grows tall and, sat on the stage's foot,
   covers the guest's name and the waveform. It hangs from the card's foot instead (the bottom 90px of the card, under the
   waveform), and the stage keeps room for the tallest episode's green card (--jh, from ot-listen.js) ---------- */
@media (min-width:961px) and (max-width:1100px){
  .lr-stage{aspect-ratio:auto; container-type:inline-size; padding-bottom:calc(82.5% - 90px + var(--jh,260px))}   /* % of the width: the card is 66% × 5/4 */
  .lr-jump{top:calc(82.5cqw - 90px); bottom:auto}
}

/* ---------- phone: the green card nearly spans the column, so it hangs from the card's foot too, over only its last 30px ---------- */
@media (max-width:700px){
  .lr-stage{aspect-ratio:auto; container-type:inline-size; padding-bottom:calc(92.5% - 30px + var(--jh,220px))}   /* % of the width: the card is 74% × 5/4 */
  .lr-deck{width:74%}
  .lr-jump{width:88%; top:calc(92.5cqw - 30px); bottom:auto}
  .lr-eps{gap:8px}
  .ab4-means--read .lr-ep{gap:8px; padding:5px 12px 5px 5px}   /* two fit on one line at 390 */
  .ab4-means--read .lr-ep__img{width:32px; height:32px}
  .lr-ep small{font-size:9.5px}
  .lr-ep b{font-size:13px}
  .lr-ep__bar{left:45px; right:12px}
}