/* The Audiobooks page. His words at the top, then the title in hand: its cover large on the left with its own
   two colours washing the page, its credits beside it, a thin line under them for the clip's place. Play puts the
   clip, a vertical promo, in the cover's place, the cover blurred behind it, and the line becomes the scrub; the
   bar's transport drives it. The three titles stand in a row beneath, the one in hand marked. Nothing is drawn to
   look like furniture: the cover carries the page. */

.pg {
  --u: calc(min(100cqw, 1400px) * 1.75 / 19);
  --fs-body: clamp(13px, calc(var(--u) * 0.118), 16px); --fs-label: clamp(7.5px, calc(var(--u) * 0.068), 9.5px); --fs-name: clamp(8.5px, calc(var(--u) * 0.08), 11px);
  --cap-w: max(64px, calc(var(--u) * 0.5)); --cap-h: calc(var(--cap-w) * 0.6); --fs-cap: max(8.5px, calc(var(--cap-w) * 0.14));
  --ink: #e4e0d7; --ink-dim: #9a9da5; --ink-line: rgba(228, 224, 215, 0.2); --engrave: 0 1px 0 rgba(0, 0, 0, 0.8); --silk: var(--stamp-font); --punch: var(--punch-font); --plate-solid: #0e0f12;
  --accent: var(--amber); --led-on: url(../assets/img/parts/led-amber-on.png); --led-off: url(../assets/img/parts/led-amber-off.png);
  --btn-wide: url(../assets/img/parts/btn-wide-dark.png); --btn-ink: #e3dfd6; --link: var(--amber);
  position: relative; max-width: 1400px; margin: 0 auto; padding: 0 0 56px; color: var(--ink);
}
@media (max-width: 999px) { .pg { --u: clamp(84px, 10.5cqw, 100px); --fs-label: 9px; } }

/* the wash: the two colours of the title in hand, soft, fixed to the window, fading from one title to the next */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #d9a0c0; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #c9a060; }
body { --c1: #d9a0c0; --c2: #c9a060; transition: --c1 0.9s, --c2 0.9s; background: radial-gradient(1400px 600px at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(80% 60% at 16% 28%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 70%), radial-gradient(64% 56% at 88% 78%, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%), var(--void); background-attachment: scroll, fixed, fixed, scroll; }

/* the bar is glass here, as on the Music page: no plate, no edge, so the wash runs under the mark and the menu; once the
   page has scrolled under it, a blur keeps the mark and the caps clear of the words beneath */
.sitebar { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color 0.3s; }
body.scrolled .sitebar { background: rgba(10, 11, 13, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* the bar's transport: always on this page, centred on one line with the mark; a phone keeps it level with the mark */
.sitebar .clipbar { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; width: max-content; flex-wrap: nowrap; align-items: center; margin: 0; gap: 6px; z-index: 4; }
.sitebar .clipbar .tbtn { flex: none; width: var(--cap-w); height: var(--cap-h); aspect-ratio: auto; padding: 0; max-width: none; display: inline-grid; place-items: center; }
.sitebar .clipbar .tbtn .ico { width: max(9px, calc(var(--cap-w) * 0.2)); height: max(9px, calc(var(--cap-w) * 0.2)); }
.sitebar .clipbar .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
.sitebar .clipbar .i-pause { display: none; }
.sitebar .clipbar .pause .i-play, .big.pause .i-play { display: none; }
.sitebar .clipbar .pause .i-pause, .big.pause .i-pause { display: block; }
body:has(#menu:checked) .sitebar .clipbar { visibility: hidden; }
@media (max-width: 699px) { .sitebar .clipbar { --cap-w: 50px; --cap-h: 30px; left: calc(50% + var(--mark-w, 70px) / 2); gap: 6px; } } /* three caps have the room for a fingertip's size beside the mark */
@media (max-width: 359px) { .sitebar .clipbar { position: static; translate: none; order: 2; flex: 1 1 100%; width: auto; justify-content: center; margin: 8px 0 0; gap: 4px; } }

/* ---------- the words ---------- */
.room { scroll-margin-top: calc(var(--bar-h, 64px) + 12px); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3) 0; }
.title { margin: 0; font-family: var(--punch); font-weight: 800; font-size: clamp(56px, min(calc(var(--u) * 1.05), 11vw), 136px); line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; text-box: trim-start cap alphabetic; }
.silkline { margin: 16px 0 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; color: var(--ink-dim); text-shadow: var(--engrave); }
.lede { max-width: 58ch; margin: 18px 0 0; font-size: clamp(15px, calc(var(--u) * 0.135), 18px); line-height: 1.55; color: #c9ccd2; }

/* ---------- the title in hand: the cover, or the clip in its place, and the credits beside it ---------- */
.feature { display: grid; grid-template-columns: minmax(260px, calc(var(--u) * 3.4)) minmax(0, 1fr); gap: calc(var(--u) * 0.44); align-items: center; margin-top: calc(var(--u) * 0.5); }
/* the frame: the cover's square; with the clip in it, a portrait of the same height (the script holds the height while
   the width narrows, so the row never jumps), centred where the square stood */
.frame { position: relative; width: 100%; aspect-ratio: 1; justify-self: center; border-radius: 4px; overflow: hidden; background: #111; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: width 0.45s cubic-bezier(0.4, 0.1, 0.2, 1); }
.frame.clip { width: 56.25%; aspect-ratio: 9 / 16; }
@media (prefers-reduced-motion: reduce) { .frame { transition: none; } }
.frame .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s; }
.frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%); pointer-events: none; }
.frame .clip { position: absolute; inset: 0; }
.frame .clip[hidden] { display: none; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.frame.playing .cover { opacity: 0; }
.frame .big { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(64px, calc(var(--u) * 0.7), 92px); height: clamp(64px, calc(var(--u) * 0.7), 92px); margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 11, 13, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.25s, opacity 0.3s; }
.frame .big .ico { width: 40%; height: 40%; margin-left: 4%; }
.frame .big .i-pause { margin-left: 0; }
.frame .big:hover, .frame .big:focus-visible { transform: scale(1.06); outline: none; box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(0, 0, 0, 0.5); }
.frame.playing .big { opacity: 0; }
.frame.playing:hover .big, .frame.playing .big:focus-visible { opacity: 1; }
.about { min-width: 0; }
.about > p { margin: 0; }
.kicker { font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
.name { margin-top: 10px !important; font-family: var(--punch); font-weight: 800; font-size: clamp(40px, calc(var(--u) * 0.58), 76px); line-height: 0.92; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; }
.by { margin-top: 12px !important; font-family: var(--jost); font-weight: 500; font-size: clamp(16px, calc(var(--u) * 0.155), 20px); color: #c9ccd2; }
.scrawl { margin-top: 22px !important; font-family: var(--marker-font); font-size: clamp(18px, calc(var(--u) * 0.19), 24px); line-height: 1.2; color: var(--amber); transform: rotate(-1.5deg); transform-origin: 0 100%; width: max-content; max-width: 100%; }
.awards { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.award { display: inline-flex; align-items: center; gap: 6px; max-width: 40ch; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink-dim); text-shadow: var(--engrave); }
.award::before, .award::after { content: ""; flex: none; width: 15px; height: 24px; background: url(../assets/img/laurel.svg) center / contain no-repeat; }
.award::after { transform: scaleX(-1); }
.awards:empty, .scrawl:empty, .blurb:empty { display: none; }
.blurb { max-width: 52ch; margin-top: 18px !important; font-size: clamp(14px, calc(var(--u) * 0.125), 16px); line-height: 1.5; color: #c9ccd2; }
.caps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.caps .tbtn { width: auto; min-width: var(--cap-w); height: max(40px, var(--cap-h)); padding: 0 1.4em; text-decoration: none; }
.caps .go { color: var(--amber); }
.caps .back { color: var(--ink-dim); }
.caps [hidden] { display: none; }
.caps .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
/* the line: the clip's place; it takes a click or a drag, and the keys */
.line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 30px; }
.lcdish { font-family: var(--lcd-font); font-size: clamp(17px, calc(var(--u) * 0.16), 21px); line-height: 1; color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 0, 0.35); }
.rail { position: relative; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink-line); }
.rail .done { position: absolute; left: 0; top: 7px; height: 4px; width: calc(var(--p, 0) * 100%); background: var(--amber); box-shadow: 0 0 8px rgba(255, 176, 0, 0.5); transition: width 0.2s linear; }
.rail .done::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 0, 0.7); opacity: 0; transition: opacity 0.2s; }
.rail:hover .done::after, .rail:focus-visible .done::after, .rail.held .done::after { opacity: 1; }
.rail.held .done { transition: none; }
.rail:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- the titles: three covers in a row, the one in hand marked ---------- */
.titles { margin-top: calc(var(--u) * 0.6); }
.rowname { margin: 0 0 18px; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.2); max-width: calc(var(--u) * 5.4); }
.card { display: grid; gap: 10px; align-content: start; color: inherit; text-decoration: none; outline: none; }
.card .art { display: block; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: #111; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s; }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card:hover .art, .card:focus-visible .art { transform: translateY(-6px); }
.card.cur .art { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--amber); }
.card:focus-visible .art { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent); }
.card b { font-family: var(--jost); font-weight: 700; font-size: clamp(13px, calc(var(--u) * 0.12), 15px); line-height: 1.3; }
.card small { font-family: var(--silk); font-size: max(7.5px, calc(var(--fs-label) * 0.9)); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; color: var(--ink-dim); }

/* ---------- narrower and a phone: everything stacked, the cover with air around it, the titles still three across ---------- */
@media (max-width: 760px) {
  .room { padding-top: 24px; text-align: center; }
  .lede { margin-inline: auto; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; justify-items: center; }
  .frame { width: min(74%, 360px); }
  .frame.clip { width: min(41.6%, 202px); }
  .about { text-align: left; width: 100%; }
  .caps { justify-content: flex-start; }
  .titles { text-align: left; }
  .cards { max-width: none; gap: 12px; }
  .card b { font-size: 12px; }
}