/* In the Wild: the web series page (/in-the-wild/). Lootie's shapes and
   animation live in lightning-shell.css with the utility-bar perch. */

.itw-hero{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;
  grid-template-areas:"title owl" "lede owl";column-gap:clamp(24px,5vw,80px);align-items:start;
}
.itw-hero-title{grid-area:title}
.itw-hero .lede{grid-area:lede}
.itw-owl{grid-area:owl;align-self:end;display:flex;justify-content:center}
.itw-owl .lootie{width:clamp(64px,9vw,124px)}
.itw-page-hero{padding-bottom:clamp(36px,4vw,56px)}
.itw-section{padding-top:clamp(28px,4vw,56px)}
@media(max-width:768px){
  .itw-hero{grid-template-areas:"title owl" "lede lede";grid-template-rows:auto auto}
  .itw-owl{align-self:center}
}

/* player + episode list: side by side on desktop, stacked on phones */
.itw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.itw-stage{margin:0;width:calc(min(78vh,760px) * 9 / 16);scroll-margin-top:calc(var(--shell-h) + 12px)}
.itw-frame{position:relative;aspect-ratio:9/16;background:#000;border:1px solid var(--ink)}
.itw-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.itw-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:transparent;cursor:pointer;
}
.itw-play-icon{display:grid;place-items:center;width:76px;height:76px;background:var(--accent);color:#fff}
html.motion .itw-play-icon{transition:background-color .18s}
.itw-play:hover .itw-play-icon{background:var(--accent-dark)}
.itw-play:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.itw-stage.is-started .itw-play{display:none}
.itw-now{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:14px}
.itw-now-title{font:600 17px/1.35 var(--sans);color:var(--ink)}
.itw-now-no{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.itw-next{
  flex:0 0 auto;padding:9px 14px;white-space:nowrap;border:1px solid var(--ink);background:transparent;cursor:pointer;
  font:500 14px/1 var(--sans);color:var(--ink);
}
html.motion .itw-next{transition:background-color .18s,color .18s}
.itw-next:hover{background:var(--ink);color:#fff}
.itw-next:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.itw-next[hidden]{display:none}

/* desktop: the list is capped at the frame height and scrolls on its own */
.itw-list{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  max-height:min(78vh,760px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--steel) transparent;
}
.itw-list li:last-child .itw-ep{border-bottom:0}
.itw-list .itw-ep{padding-right:12px}
.itw-ep{
  display:grid;grid-template-columns:68px minmax(0,1fr);gap:20px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--hairline);color:var(--ink);text-decoration:none;
}
.itw-ep img{display:block;width:68px;height:auto;aspect-ratio:9/16;border:1px solid var(--hairline);background:var(--panel)}
.itw-ep-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.itw-ep-no{font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.itw-ep-title{font:600 18px/1.3 var(--sans)}
.itw-ep-line{font-size:15px;line-height:1.5;color:var(--muted)}
.itw-ep:hover .itw-ep-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.itw-ep:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.itw-ep[aria-current="true"] img{border:2px solid var(--ink)}
.itw-ep[aria-current="true"] .itw-ep-no{color:var(--ink)}
.itw-note{margin-top:20px;font:400 13px/1.6 var(--mono);color:var(--muted)}

@media(max-width:860px){
  .itw{grid-template-columns:minmax(0,1fr)}
  .itw-list{max-height:none;overflow:visible}
  .itw-list .itw-ep{padding-right:0}
  .itw-stage{width:min(100%,calc(74vh * 9 / 16),calc(74svh * 9 / 16));margin-inline:auto}
  .itw-ep{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .itw-ep img{width:56px}
  .itw-ep-title{font-size:17px}
}

/* transcripts: the shared FAQ accordion, with speaker labels */
.itw-script p + p{margin-top:10px}
.itw-who{display:inline-block;min-width:84px;margin-right:8px;font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.itw-card{font-style:italic}