/* /listen . the A to Z audio.
   Shares the Future of Fandom click-through's typographic voice on purpose:
   Figtree, Inter, Caveat, ink ground, coral. Both are the free gift, so they
   belong to the same world and neither belongs to the six site pages. */

:root{--ink:#22282f;--ground:#15191e;--cream:#FBF7E8;--coral:#e6614e;--grey:#889093;--hair:#39424B}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:#B7BFC7;padding-bottom:104px}
a{color:inherit}

.wrap{max-width:940px;margin:0 auto;padding:0 28px}

/* head */
.top{padding:64px 0 34px}
.topin{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.mark{height:26px;flex:none}
/* One line, always. It used to carry max-width:16ch, which gives it 165.6px
   when the string needs 177px, so it broke and left "it" alone on a second
   line. The row is 884px wide with a 71px logo in it, so that 16ch was capping
   the text against 612px of empty space. */
.kick{font-family:'Caveat',cursive;font-weight:600;font-size:23px;line-height:1.1;text-align:right;white-space:nowrap;color:var(--coral)}
h1{font-family:'Figtree';font-weight:900;letter-spacing:-2px;line-height:1.02;font-size:62px;color:var(--coral);margin-top:30px}
.lede{font-family:'Figtree';font-weight:800;font-size:23px;line-height:1.3;color:#fff;margin-top:16px;max-width:34ch}
.note{font-size:15px;line-height:1.6;margin-top:14px;max-width:60ch;color:var(--grey)}

/* section headings */
.sect{margin-top:52px;border-top:1px solid var(--hair);padding-top:26px}
.sect h2{font-family:'Figtree';font-weight:900;font-size:15px;letter-spacing:3.2px;text-transform:uppercase;color:var(--grey)}

/* the whole book */
.book{margin-top:18px;background:var(--ink);border-radius:16px;padding:28px 30px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.book .t{flex:1;min-width:220px}
.book .t b{display:block;font-family:'Figtree';font-weight:900;font-size:28px;letter-spacing:-.8px;color:#fff}
.book .t span{font-size:15px;color:var(--grey)}
.book .go{font-family:'Figtree';font-weight:800;font-size:15px;background:var(--coral);color:#12161a;border:none;border-radius:10px;padding:13px 26px;cursor:pointer;text-decoration:none;display:inline-block}
.book .go:hover{filter:brightness(1.08)}

/* chapter rows */
.rows{margin-top:8px}
.row{display:flex;align-items:center;gap:18px;padding:15px 14px;border-radius:12px;text-decoration:none;color:inherit;border:1px solid transparent}
.row:hover{background:rgba(255,255,255,.04)}
.row.on{background:rgba(230,97,78,.11);border-color:rgba(230,97,78,.36)}
.row .l{font-family:'Figtree';font-weight:900;font-size:19px;width:34px;flex:none;text-align:center;color:var(--coral)}
.row.on .l{color:#fff}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-family:'Figtree';font-weight:800;font-size:16px;letter-spacing:-.2px;color:#fff}
.row .m span{display:block;font-size:14px;line-height:1.5;color:var(--grey);margin-top:2px}
.row .d{font-size:13px;color:var(--grey);flex:none;font-variant-numeric:tabular-nums}

/* the sticky player */
.player{position:fixed;left:0;right:0;bottom:0;background:#10141a;border-top:1px solid var(--hair);z-index:20;transform:translateY(100%);transition:transform .22s ease}
.player.up{transform:none}
.player .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.player .now{flex:none;min-width:170px}
.player .now b{display:block;font-family:'Figtree';font-weight:800;font-size:15px;color:#fff}
.player .now span{font-size:13px;color:var(--grey)}
.player audio{flex:1;min-width:240px;height:38px}

footer{border-top:1px solid var(--hair);margin-top:56px;padding:30px 0 20px;font-size:13px;color:var(--grey)}
footer a{color:var(--grey);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#111;color:#fff;padding:12px 20px;font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.player{transition:none}}

@media(max-width:700px){
  h1{font-size:40px}
  .lede{font-size:19px}
  .row{gap:12px;padding:13px 8px}
  .row .m span{display:none}
  .book{padding:22px}
}

/* The tagline is nowrap, so on the narrowest phones it has to shrink rather
   than break. It needs 177px at 23px, and a 320px screen leaves it about 169px
   once the padding, the logo and the gap come out. 340px is the cut: measured,
   375px keeps full size with 48px to spare and 320px clears by 16px at 20px.
   Do not raise this to 400px, which shrinks the type on phones that never
   needed it. */
@media(max-width:340px){
  .kick{font-size:20px}
}