/* About hero: "The host and the show" (picked 30 Sep 2026 from about-hero-variants/, version 2: "I like this one use this to its
   actual page"). It replaces the two episode cards beside the title. Linked after ot-pages.css on about/index.html only.
   From 1200px up the two objects sit in the slot the cards used (.ab4-hero .ab4-card in ot-pages.css: absolute, 4vw from the
   screen edge, clamp(200px, 23.45vw - 24px, 320px) wide), centred on the title and hung on cables like the mic: Sarah's photo in
   the home page's arch (the "At the mic" frame) with its glass chip, and the show's cover with "Latest episode". From 701 to 1199
   each side keeps the compact card's box (.ab4-card), so the mic and the strip don't move, with the photo or the cover in its
   tile; on phones the two objects hang either side of the mic (the end of this file). */

/* ---------- compact card (701-1199) ---------- */
.ab8-cards .ab8-side{pointer-events:auto}
.ab8-full{display:none}
.ab8-mini{display:contents}
@media (max-width:1199px){ .ab8-side{position:relative} }
.ab8-mini__art{background:#111}
.ab8-mini__img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover}
.ab8-side--l .ab8-mini__img{object-position:50% 30%}
.ab8-stretch{color:inherit; text-decoration:none} .ab8-stretch::after{content:""; position:absolute; inset:0; z-index:5}   /* the whole card opens the link */
.ab8-stretch:focus-visible{outline:none} .ab8-side:has(.ab8-stretch:focus-visible){outline:2px solid var(--green); outline-offset:3px}

/* the glass name chip (the home's "Sarah Gonzales · Host" chip, .hm-chip) */
.ab8-chip{display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.76); border:1px solid rgba(17,17,17,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 18px 40px -28px rgba(17,17,17,.45);
  font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.ab8-chip b{font-weight:600}
.ab8-chip .sep{width:1px; height:12px; background:rgba(17,17,17,.2)}
.ab8-chip .eq{color:var(--green); height:14px} .ab8-chip .eq i{width:2.5px}

/* ---------- beside the title (1200 and up), and beside the mic on phones (sizes and places at the end of this file) ---------- */
@media (min-width:1200px), (max-width:700px){
  /* --W: the slot's width; --tc: the title's centre line from the slot's top (four lines of min(6.3vw, 92px), the slot 12px below the title's top) */
  .ab8-cards{--W:clamp(200px, calc(23.45vw - 24px), 320px); --tc:calc(2 * min(6.3vw, 92px) - 12px)}
  .ab4-hero .ab8-cards .ab8-side{background:none; border:0; border-radius:0; box-shadow:none; overflow:visible; padding:0; transition:none}
  .ab4-hero .ab8-cards .ab8-side:hover{transform:none; box-shadow:none}
  .ab8-mini{display:none}
  .ab8-full{display:block; position:relative; color:inherit; text-decoration:none; transform-origin:50% -700px}
  .ab8-cable{position:absolute; left:50%; bottom:100%; width:2px; height:1400px; translate:-50% 0; background:#3D3D3D; border-radius:1px; z-index:0}   /* the hero clips it at its top */
  .ab8-img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; transition:scale 1.2s var(--out-expo)}
  .ab8-chip{position:absolute; z-index:2; left:50%; bottom:-20px; translate:-50% 0}
  /* Sarah in the arch */
  .ab8-host{--aw:calc(var(--W) - 24px); --ah:calc(var(--aw) * 1.3); width:var(--aw); margin-top:calc(var(--tc) - var(--ah) / 2 - 12px)}
  .ab8-arch{display:block; position:relative; z-index:1; height:var(--ah); border-radius:calc(var(--aw) / 2) calc(var(--aw) / 2) 24px 24px; overflow:hidden; background:#E4E7E2;
    box-shadow:0 44px 88px -50px rgba(22,67,40,.6)}
  .ab8-arch::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1.5px rgba(32,157,80,.6); pointer-events:none}
  .ab8-arch .ab8-img{object-position:50% 34%}
  /* the show's cover */
  .ab8-show{--cw:calc(var(--W) - 44px); width:var(--cw); margin-top:calc(var(--tc) - var(--cw) / 2 - 12px); margin-left:auto}
  .ab8-cover{display:block; position:relative; z-index:1; aspect-ratio:1; border-radius:16px; overflow:hidden; background:#209D50; box-shadow:0 44px 88px -44px rgba(22,67,40,.75), inset 0 1px 0 rgba(255,255,255,.2)}
  .ab8-full:hover .ab8-img{scale:1.03}
  .ab8-full:focus-visible{outline:none} .ab8-full:focus-visible .ab8-arch,.ab8-full:focus-visible .ab8-cover{outline:2px solid var(--green); outline-offset:5px}
}
@media (min-width:1600px){ .ab8-cards{--tc:calc(2 * min(6.3vw, 92px) - 20px)} }   /* the slot starts 8px lower there (ot-pages.css) */
@media (min-width:1200px) and (prefers-reduced-motion:no-preference), (max-width:700px) and (prefers-reduced-motion:no-preference){
  .ab8-host{animation:ab8-sway 6s ease-in-out -2s infinite alternate}
  .ab8-show{animation:ab8-sway 7s ease-in-out -5s infinite alternate}
  @keyframes ab8-sway{from{rotate:-.7deg} to{rotate:.7deg}}
}

/* ---------- beside the mic on phones (marked screenshots, 30 Sep: "these should be shown in mob version as well") ----------
   The photo and the cover hang in the empty space either side of the mic, above "A show by", on their own cables, in place of
   the compact cards under the buttons (so the hero is also 192px shorter, measured at 360-412). Each is centred in the room between the gutter
   and the mic (25% of the wrap less 15px from its edge) and on the mic's body (--yc, from the wrap's top: the hero's 244px
   padding). --pa: the arch's width; the cover is 6px narrower. The chips shorten to fit: Sarah's name alone, "Latest episode"
   smaller. 701-1199 keep the compact cards. */
@media (max-width:700px){
  .ab4-hero .ab8-cards{position:absolute; left:0; right:0; top:0; margin:0; display:block; pointer-events:none; z-index:3;
    --pa:clamp(84px, 24vw, 100px); --pc:calc(var(--pa) - 6px); --yc:-90px}
  .ab4-hero .ab8-cards .ab8-side{position:absolute; top:0; width:auto; display:block}
  .ab4-hero .ab8-cards .ab8-side--l{left:calc(25% - 15px - var(--pa) / 2)}
  .ab4-hero .ab8-cards .ab8-side--r{right:calc(25% - 15px - var(--pc) / 2)}
  .ab8-full{transform-origin:50% -100px}
  .ab8-cable{width:2px}
  .ab8-host{--aw:var(--pa); margin-top:calc(var(--yc) - var(--ah) / 2)}
  .ab8-arch{border-radius:calc(var(--aw) / 2) calc(var(--aw) / 2) 14px 14px; box-shadow:0 22px 40px -24px rgba(22,67,40,.55)}
  .ab8-show{--cw:var(--pc); margin:calc(var(--yc) - var(--cw) / 2) 0 0}
  .ab8-cover{border-radius:11px; box-shadow:0 22px 44px -22px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.2)}
  .ab8-chip{bottom:-12px; gap:6px; padding:6px 10px; font-size:8.5px; letter-spacing:.08em; box-shadow:0 10px 24px -16px rgba(17,17,17,.45)}
  .ab8-chip .eq{height:10px} .ab8-chip .eq i{width:2px}
  .ab8-host .ab8-chip{font-size:0; gap:0} .ab8-host .ab8-chip .sep{display:none} .ab8-host .ab8-chip b{font-size:8.5px; letter-spacing:.08em}
}

/* ---------- "What Getting Out of the Truck Means": the episode, portrait ----------
   Picked 30 Sep 2026 from about-means-variants/, version 4 ("use this one variation into actual about page"). It replaces the
   Episode 1 video beside the text: the episode poster stood on end, Sarah and the guest on the call, the waveform, the chapter
   about this topic and the title, moving between the episodes (ot-about.js; the pick buttons switch by hand). From 1101px it is
   as tall as the text column (less 32px at the top, the eyebrow's row); 961-1100 it is 4:5; at 960 and below it sits under the
   text, 460px at most. With the video gone, the header's play button and the Latest Episode bar open Episode 1's page
   (ot-pages.js, body data-ep1). */
.am{position:relative; display:flex; flex-direction:column; gap:14px; min-width:0}
.am-obj{position:relative; flex:1 1 auto; min-height:0}
@media (min-width:961px){ .am{justify-self:end; width:min(100%,500px)} }
@media (min-width:1101px){ .am-sec .grid{align-items:stretch} .am{margin-top:32px} .am-obj{min-height:520px} }
@media (max-width:1100px){ .am{align-self:center} .am-obj{flex:none; aspect-ratio:4/5} }
@media (max-width:960px){ .am{width:min(460px,100%); justify-self:center; margin:8px auto 0} }

/* rotation: the episodes share one grid cell; the new one fades in on top while the old one stays whole underneath, then the
   old one goes (fading both out and in blinked the paper through for a moment) */
.am-stack{display:grid}
.am-stack > [data-am-item]{grid-area:1/1; min-width:0; min-height:0; z-index:0; opacity:0; visibility:hidden; transition:opacity 0s linear .7s, visibility 0s linear .7s}
.am-stack > [data-am-item].is-on{z-index:1; opacity:1; visibility:visible; transition:opacity .7s var(--ease), visibility 0s}
.am .am4{color:#fff}   /* the About section colours its links (.about--canva a): the banner keeps its own */
.am a:focus-visible{outline:2px solid var(--green); outline-offset:4px}
.am-picks{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.am-pick{height:30px; padding:0 13px; border-radius:999px; border:1px solid rgba(17,17,17,.16); background:rgba(255,255,255,.6); color:var(--ink-2); font:500 12.5px/1 var(--body); cursor:pointer; transition:background-color .25s var(--ease), color .25s var(--ease)}
.am-pick:hover{background:#fff; color:var(--ink)}
.am-pick[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}
.am-pick:focus-visible{outline:2px solid var(--green); outline-offset:2px}

.am4__stack{border-radius:22px}
.am4{position:relative; display:flex; flex-direction:column; min-height:0; padding:18px 18px 20px; border-radius:22px; overflow:hidden; color:#fff; text-decoration:none; container-type:inline-size;
  background:radial-gradient(90% 40% at 50% 0, #1d2a21 0, #141414 70%); box-shadow:0 44px 80px -44px rgba(17,17,17,.62), inset 0 0 0 1px rgba(255,255,255,.06)}
.am4__tiles{flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; gap:12px; min-height:0}
.am4__tile{position:relative; overflow:hidden; border-radius:14px; background:radial-gradient(90% 70% at 50% 18%, #282828 0, #161616 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.am4__tile--guest{box-shadow:inset 0 0 0 2px var(--green), 0 0 44px -10px rgba(32,157,80,.55)}
.am4__cut{position:absolute; max-width:none; height:auto; filter:grayscale(1) contrast(1.05)}   /* width / left / top per person, inline */
.am4__name{position:absolute; left:8px; right:8px; bottom:8px; display:flex; align-items:center; gap:6px; min-width:0; padding:7px 9px; border-radius:9px; background:rgba(17,17,17,.64); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font:600 12px/1.2 var(--body); white-space:nowrap}
.am4__name b{overflow:hidden; text-overflow:ellipsis}
.am4__name small{font:500 9.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.am4__dot{flex:none; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.55)}
.am4__name .eq{flex:none; height:12px; color:var(--green)} .am4__name .eq i{width:2px}
.am4__wave{position:relative; display:block; flex:none; height:52px; margin:18px 0 12px; color:rgba(255,255,255,.26)}
.am4__w{position:absolute; left:0; top:0; width:calc(100cqw - 36px); height:100%}   /* 100cqw is the banner's width: less its 18px padding each side */
.am4__played{position:absolute; left:0; top:0; bottom:0; width:24%; overflow:hidden; color:var(--green)}
.am4__head{position:absolute; left:24%; top:-8px; bottom:-8px; width:2px; margin-left:-1px; background:#fff; border-radius:1px}
.am4__head::before{content:""; position:absolute; left:50%; top:-4px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff}
.am4__beat{display:flex; align-items:center; gap:10px; flex:none; font:500 11px/1.35 var(--body); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.86)}
.am4__beat time{flex:none; font:400 24px/1 var(--display); letter-spacing:0; color:#fff}
.am4__beat .eq{flex:none; height:16px; color:var(--green)}
.am4__foot{display:grid; grid-template-columns:62px minmax(0,1fr); gap:14px; align-items:center; flex:none; margin-top:14px; padding:14px 60px 0 0; border-top:1px solid rgba(255,255,255,.12)}
.am4__logo{display:block; width:62px; height:auto}
.am4__t small{display:flex; align-items:center; gap:8px; margin:0 0 6px; font:500 10.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.am4__t small .eq{height:12px; color:var(--green)} .am4__t small .eq i{width:2px}
.am4__t b{display:block; font:400 clamp(19px,1.6vw,23px)/1.02 var(--display); text-transform:uppercase; letter-spacing:-.004em; color:#fff; text-wrap:balance}
.am4__t em{font-style:normal; color:var(--green)}
.am4__play{position:absolute; right:20px; bottom:22px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#111; box-shadow:0 12px 26px -12px rgba(0,0,0,.7); transition:background-color .25s var(--ease), color .25s var(--ease)}
.am4__play svg{width:18px; height:18px; margin-left:2px}
.am4:hover .am4__play{background:var(--green); color:#fff}
/* phones (the review was judged on a laptop): the 4:5 box squeezed the photo tiles to a strip once the title wrapped (97px tall
   at 360, 28px at 320) and cut the host's name ("Sarah Go…" up to 440). Here the tiles keep a portrait shape and the banner
   grows with its text; the foot's logo and play button are smaller so the title keeps a line fewer; a narrow tile's name chip
   sets "Host" under the name and lets a long name take two lines. */
@media (max-width:700px){
  .am-obj{aspect-ratio:auto}
  .am4__tiles{flex:1 0 auto; aspect-ratio:5/3}
  .am4__tile{container-type:inline-size}
  .am4__foot{grid-template-columns:48px minmax(0,1fr); padding-right:52px}
  .am4__logo{width:48px}
  .am4__play{right:18px; bottom:18px; width:42px; height:42px}
  .am4__play svg{width:16px; height:16px}
  @container (max-width:180px){
    .am4__name{left:6px; right:6px; bottom:6px; padding:6px 8px; font-size:11px}
    .am4__name b{white-space:normal}
    .am4__name:has(small){flex-wrap:wrap; row-gap:2px}
    .am4__name small{flex-basis:100%; padding-left:12px}   /* under the name: the dot and the gap */
  }
}