/* A listening page, not an app: dark, cover-led, like a song page. */
:root{
  --bg:#0b0b0d; --ink:#f4f4f6; --muted:rgba(244,244,246,.62); --faint:rgba(244,244,246,.38);
  --line:rgba(255,255,255,.10); --chip:rgba(255,255,255,.08); --chip-hover:rgba(255,255,255,.14);
  --read:rgba(244,244,246,.42); --hl:rgba(255,255,255,.16); --accent:#ffffff; --on-accent:#0b0b0d;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.5 Inter,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit}

/* Ambient color from the cover */
.ambient{position:fixed;inset:-20%;z-index:-1;background:var(--cover) center/cover no-repeat;filter:blur(90px) saturate(1.3);opacity:.45;transform:translateZ(0)}
.ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.35),var(--bg) 70%)}

/* Always on screen, so the download button is too */
nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px max(22px,calc((100vw - 1180px) / 2 + 22px));
  background:rgba(11,11,13,.72);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:-.01em}
.logo svg{width:24px;height:24px}
.pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:14px;padding:9px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);transition:transform .15s}
.pill:hover{transform:scale(1.03)}
.pill.ghost{background:var(--chip);color:var(--ink)}
.pill.ghost:hover{background:var(--chip-hover)}

.page{max-width:1180px;margin:0 auto;padding:6px 22px 60px;display:grid;gap:34px}
@media (min-width:920px){
  .page{grid-template-columns:380px 1fr;gap:72px;padding-top:24px}
  /* Padding inside the scroll box so the play button's hover and shadow aren't clipped */
  .side{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow:auto;scrollbar-width:none;padding:16px;margin:-16px}
  .side .cover{width:min(100%,calc(100vh - 530px));min-width:180px;max-width:320px}
  .follow{left:auto;right:calc((100vw - 1180px) / 2 + 22px);transform:none}
}
@media (min-width:920px) and (max-width:1180px){ .follow{right:22px} }

/* Cover and the player under it */
.cover{width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#3a3733,#1d1b19);box-shadow:0 30px 60px -24px rgba(0,0,0,.7);position:relative}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .mark{position:absolute;inset:0;display:grid;place-items:center}
.cover .mark svg{width:38%;opacity:.9}
@media (max-width:919px){
  /* One column: everything above the text on the center line, like a song page */
  .cover{max-width:340px;margin:0 auto}
  .side{text-align:center;max-width:560px;margin:0 auto;width:100%}
  .player{max-width:460px;margin-left:auto;margin-right:auto}
  .row{justify-content:center}
  .main{max-width:640px;margin:0 auto;width:100%}
}
.kicker{margin:22px 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-family:Newsreader,Georgia,serif;font-weight:700;font-size:clamp(30px,4.2vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0}
.byline{margin:10px 0 0;color:var(--muted);font-size:15px}
.byline b{color:var(--ink);font-weight:600}

.player{margin-top:22px;display:flex;align-items:center;gap:16px}
.big{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;transition:transform .15s;box-shadow:0 10px 30px -10px rgba(255,255,255,.35)}
.big:hover{transform:scale(1.05)}
.big svg{width:26px;height:26px}
.wave{flex:1;min-width:0;position:relative}
.wave svg{display:block;width:100%;height:46px;cursor:pointer;touch-action:none}
.wave rect{fill:rgba(255,255,255,.22);transition:fill .2s}
.wave rect.on{fill:#fff}
/* Below the waveform, out of the flow: the waveform itself lines up with the button's center */
.times{position:absolute;left:0;right:0;top:calc(100% + 4px);display:flex;justify-content:space-between;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--chip);padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.chip:hover{background:var(--chip-hover)}
.chip svg{width:15px;height:15px}

/* Read along */
.main h2.sec{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.summary{border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:18px 20px;margin-bottom:34px}
.summary p{margin:0;font-size:16px;line-height:1.6;color:rgba(244,244,246,.86)}
.text{font-family:Newsreader,Georgia,serif;font-size:clamp(20px,2.1vw,23px);line-height:1.62}
.text p{margin:0 0 1.05em}
.text h3{font-size:1.2em;line-height:1.25;margin:1.4em 0 .5em}
.text blockquote{margin:0 0 1.05em;padding-left:18px;border-left:2px solid var(--line);font-style:italic}
.w{border-radius:5px;cursor:pointer;transition:color .25s,background .15s}
.w.read{color:var(--read)}
h1 .w{border-radius:8px}
h1 .w.read{color:var(--ink)}  /* the title stays bright once read; only the current word lights */
.w.now{color:#fff;background:var(--hl);box-shadow:0 0 0 3px var(--hl)}
@media (prefers-reduced-motion:reduce){.w{transition:none}}

/* A note on what the page is (read in the sharer's own voice), above the summary */
.notes{margin:0 0 26px;display:grid;gap:6px}
.notes p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;padding-left:12px;border-left:2px solid var(--line)}

/* Created with Vois */
.made{margin-top:56px;border-radius:26px;padding:34px 28px;background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);display:grid;gap:18px;align-items:center}
@media (min-width:700px){ .made{grid-template-columns:1fr auto} }
.made h3{font-family:Newsreader,Georgia,serif;font-size:30px;line-height:1.1;margin:0 0 8px}
.made p{margin:0;color:var(--muted);max-width:440px}
.made img{height:48px;display:block}
/* Under the Created with Vois card; room below for the mini player */
footer{margin-top:18px;padding:0 4px 70px;color:var(--faint);font-size:13px;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:919px){ footer{justify-content:center} }
footer a{text-decoration:none}

/* Mini player once the big one scrolls away */
.mini{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,160%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:9px 10px 9px 9px;border-radius:18px;
  background:rgba(28,28,32,.86);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--line);z-index:10;overflow:hidden}
.mini.show{transform:translate(-50%,0)}
.mini .thumb{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#3a3733,#1d1b19) center/cover;flex:none}
.mini .t{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini .t small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.mini button{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer}
.mini button svg{width:18px;height:18px}
.mini .line{position:absolute;left:0;bottom:0;height:2px;background:#fff;width:0}
.follow{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:9;border:0;border-radius:999px;padding:8px 14px;
  background:rgba(255,255,255,.92);color:#0b0b0d;font-weight:600;font-size:13px;cursor:pointer;display:none}
/* Phones: Safari's toolbar floats over the bottom of the page, so the mini player and
   "Follow the voice" sit at the top, just under the nav (the mini slides out from under it). */
@media (max-width:919px){
  .mini{top:72px;bottom:auto;transform:translate(-50%,-150%);z-index:19}
  .mini.show{transform:translate(-50%,0)}
  .follow{top:80px;bottom:auto}
  body.mini-on .follow{top:146px}
}
.state{min-height:70vh;display:grid;place-items:center;text-align:center;color:var(--muted);padding:0 22px}

/* Listen in Vois, under the controls (vois.audio/open/ opens the app, or the App Store) */
.inapp{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inapp .app{padding:11px 18px;font-size:15px}
.inapp .app svg{width:18px;height:18px}
.inapp span{color:var(--faint);font-size:13px}
@media (max-width:919px){ .inapp{justify-content:center} }

/* The end card, when the reading finishes: a dialog over the page (on phones too, where
   Safari's toolbar floats over the bottom) */
.endcard{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:22px;background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.endcard[hidden]{display:none}
.endbox{position:relative;width:min(400px,100%);border-radius:26px;padding:34px 28px 26px;text-align:center;
  background:linear-gradient(160deg,#232227,#141417);border:1px solid var(--line);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.endmark{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:#111113;display:grid;place-items:center;border:1px solid var(--line)}
.endmark svg{width:30px;height:30px}
.endbox h3{font-family:Newsreader,Georgia,serif;font-size:30px;line-height:1.1;margin:0 0 8px}
.endbox p{margin:0 auto 20px;color:var(--muted);max-width:300px}
.endbox .badge{display:inline-block}
.endbox .badge img{height:48px;display:block}
.endbox .fine{margin:14px 0 0;font-size:13px;color:var(--faint)}
.endbox .x{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;
  color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.endbox .x:hover{background:var(--chip);color:var(--ink)}