/* Dynasty Library — Classic Card component
 * Single stylesheet cloned across every /classics/<slug>/ title.
 * Design tokens mirror the Library shell so gate/navigation stay consistent.
 */

/* Base — reuse Library shell tokens */
:root{
  --bg:        #0a0a0a;
  --panel:     #111112;
  --panel-2:   #17171a;
  --line:      #2b2b31;
  --line-2:    #3a3a44;
  --ink:       #e7e4dd;
  --ink-soft:  #a8a49a;
  --ink-mute:  #7d7970;
  --amber:     #F59E0B;
  --amber-2:   #ffb020;
  --ok:        #6EE7B7;
  --paper:     #f5f2ea;
  --paper-2:   #ded8c8;
  --serif:     "Spectral","Iowan Old Style",Georgia,serif;
  --cond:      "Barlow Condensed",Impact,sans-serif;
  --black:     "Archivo Black","Barlow Condensed",Impact,sans-serif;
  --sans:      system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--serif); }
body{ line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--amber); text-decoration:none; }
a:hover{ color:var(--amber-2); text-decoration:underline; }

/* ---------- Top bar (matches Library shell) ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  padding:16px 28px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--cond); letter-spacing:.06em;
}
.topbar .brand{ font-family:var(--black); font-size:22px; color:var(--paper); letter-spacing:.02em;}
.topbar .brand .amber{ color:var(--amber); margin-left:6px;}
.topbar .crumbs{ font-size:13px; color:var(--ink-mute); }
.topbar .crumbs a{ color:var(--ink-soft); }

/* ---------- Card header ---------- */
.card-head{
  border-bottom:1px solid var(--line);
  padding: 44px 28px 32px;
  max-width:1180px; margin:0 auto;
}
.card-head .shelf-tag{
  font-family:var(--cond); font-size:13px; letter-spacing:.24em;
  color:var(--amber); text-transform:uppercase; margin-bottom:14px;
}
.card-head h1{
  font-family:var(--black); font-weight:normal;
  font-size:clamp(38px, 6vw, 68px);
  line-height:1.02; letter-spacing:-.01em;
  color:var(--paper); margin:0 0 8px;
}
.card-head .byline{
  font-family:var(--cond); font-size:16px; letter-spacing:.14em;
  color:var(--ink-soft); text-transform:uppercase;
}
.card-head .byline em{ font-style:normal; color:var(--ink-mute); }

/* Badge row */
.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.badge{
  font-family:var(--cond); font-size:12px; letter-spacing:.18em;
  padding:6px 10px; border:1px solid var(--line-2); border-radius:2px;
  color:var(--ink-soft); text-transform:uppercase;
}
.badge.finish{ border-color:var(--amber); color:var(--amber); }
.badge.done{ border-color:var(--ok); color:var(--ok); }

/* Primary action row */
.actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;
}
.btn{
  font-family:var(--cond); font-size:14px; letter-spacing:.16em;
  padding:14px 22px; border:1px solid var(--ink-soft);
  color:var(--ink); background:transparent; cursor:pointer;
  text-transform:uppercase; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .12s, color .12s, border-color .12s;
}
.btn:hover{ border-color:var(--paper); color:var(--paper); background:rgba(255,255,255,.03); text-decoration:none;}
.btn.primary{ background:var(--amber); border-color:var(--amber); color:#111; }
.btn.primary:hover{ background:var(--amber-2); border-color:var(--amber-2); color:#000; }
.btn.ghost{ border-color:var(--line-2); color:var(--ink-soft);}
.btn.small{ padding:9px 14px; font-size:12px; }
.btn:disabled,.btn.disabled{ opacity:.5; cursor:not-allowed; }

/* Listen CTA — the "one button" that opens the whole book. */
.btn.listen-cta{
  background:#111; border-color:var(--amber);
  color:var(--amber); font-weight:600;
  padding:14px 22px 14px 18px;
  box-shadow:0 0 0 0 rgba(212,164,74,0);
  position:relative;
}
.btn.listen-cta:hover{
  background:var(--amber); color:#111; border-color:var(--amber);
  box-shadow:0 6px 22px -8px rgba(212,164,74,.55);
}
.btn.listen-cta .listen-cta-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--amber); color:#111;
  font-size:11px; line-height:1;
  transition:background .12s, color .12s;
}
.btn.listen-cta:hover .listen-cta-icon{
  background:#111; color:var(--amber);
}
.btn.listen-cta.is-playing{
  background:var(--amber); color:#111;
}
.btn.listen-cta.is-playing .listen-cta-icon{
  background:#111; color:var(--amber);
}
.btn.listen-cta.is-playing .listen-cta-icon::before{
  content:"▮▮"; letter-spacing:-1px;
}
.btn.listen-cta.is-playing .listen-cta-icon{
  font-size:0;
}

/* Format row */
.formats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:28px;
}
.fmt{
  padding:18px 20px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.fmt:last-child{ border-right:none; }
.fmt .lbl{ font-family:var(--cond); font-size:12px; letter-spacing:.2em; color:var(--ink-mute); text-transform:uppercase;}
.fmt .val{ font-family:var(--cond); font-size:15px; letter-spacing:.06em; color:var(--paper);}
.fmt.forge .val{ color:var(--ink-mute); }
.fmt.live .val::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:8px; vertical-align:middle;}

/* Utility bar */
.util{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:16px 28px; border-bottom:1px solid var(--line);
  max-width:1180px; margin:0 auto;
}
.util .grow{ flex:1;}
.util .checkout{ font-family:var(--cond); font-size:13px; color:var(--ink-soft); letter-spacing:.12em; align-self:center;}
.util .checkout .num{ color:var(--paper); }

/* Two-pane layout: reading + rail */
.layout{
  max-width:1180px; margin:0 auto; padding:28px;
  display:grid; grid-template-columns:1fr 320px; gap:44px;
}
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; gap:28px; padding:20px;}
  .formats{ grid-template-columns:repeat(2,1fr);}
  .fmt:nth-child(2){ border-right:none;}
}

/* Reading pane */
.reading{ min-width:0; }
.reading .kicker{
  font-family:var(--cond); font-size:12px; letter-spacing:.24em;
  color:var(--amber); text-transform:uppercase; margin-bottom:8px;
}
.reading h2{
  font-family:var(--black); font-weight:normal;
  font-size:34px; line-height:1.1; color:var(--paper);
  margin:0 0 20px; letter-spacing:-.005em;
}
.reading .lead{
  font-family:var(--serif); font-size:19px; line-height:1.55;
  color:var(--ink); margin:0 0 32px; border-left:2px solid var(--amber);
  padding:2px 0 2px 18px;
}
.reading section.beat{ margin:0 0 40px; }
.reading section.beat h3{
  font-family:var(--black); font-weight:normal;
  font-size:19px; letter-spacing:.02em; color:var(--paper);
  margin:0 0 10px; text-transform:uppercase;
}
.reading section.beat p{ margin:0 0 12px; font-size:17px; color:var(--ink); }
.reading blockquote{
  margin:22px 0; padding:14px 18px;
  border-left:3px solid var(--line-2); background:var(--panel);
  color:var(--paper); font-style:italic;
}
.reading blockquote cite{
  display:block; margin-top:8px; font-family:var(--cond); font-style:normal;
  font-size:12px; letter-spacing:.16em; color:var(--ink-mute); text-transform:uppercase;
}
.reading .anchors{
  margin:38px 0 0; padding:22px 24px;
  border:1px solid var(--line-2); background:var(--panel);
}
.reading .anchors h4{
  font-family:var(--cond); font-size:12px; letter-spacing:.24em;
  color:var(--amber); margin:0 0 12px; text-transform:uppercase;
}
.reading .anchors ol{
  margin:0; padding-left:20px; color:var(--paper);
  font-size:16px; line-height:1.55;
}
.reading .anchors ol li{ margin:0 0 10px;}
.reading .anchors ol li em{ color:var(--ink-soft); font-style:normal; display:block; font-size:14px; margin-top:2px;}
.reading .trigger{
  margin-top:32px; padding:22px 24px;
  border:1px solid var(--amber); background:rgba(245,158,11,.05);
}
.reading .trigger .lbl{
  font-family:var(--cond); font-size:12px; letter-spacing:.24em;
  color:var(--amber); text-transform:uppercase; margin-bottom:10px;
}
.reading .trigger p{
  font-family:var(--serif); font-size:20px; line-height:1.4;
  color:var(--paper); margin:0; font-style:italic;
}
.reading .finish-row{
  margin:44px 0 0; padding:22px 24px; border:1px dashed var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.reading .finish-row .msg{ font-family:var(--cond); letter-spacing:.1em; color:var(--ink-soft); font-size:14px; text-transform:uppercase;}

/* Rail */
.rail{ min-width:0; }
.rail .box{
  border:1px solid var(--line); background:var(--panel-2);
  padding:18px 20px; margin-bottom:18px;
}
.rail .box .lbl{
  font-family:var(--cond); font-size:12px; letter-spacing:.22em;
  color:var(--ink-mute); text-transform:uppercase; margin-bottom:10px;
}
.rail .box p{ font-family:var(--serif); font-size:15px; margin:0 0 10px; color:var(--ink);}
.rail .box p:last-child{ margin-bottom:0;}
.rail .full-btn-row{ display:flex; flex-direction:column; gap:10px; margin-top:6px;}

/* Audio slot (shelled) */
.audio-slot{
  border:1px dashed var(--line-2); background:var(--panel);
  padding:22px; text-align:center;
}
.audio-slot .badge.forge{
  border-color:var(--amber); color:var(--amber);
  font-family:var(--cond); font-size:12px; letter-spacing:.22em;
  display:inline-block; padding:6px 10px; border:1px solid var(--amber);
  text-transform:uppercase; margin-bottom:12px;
}
.audio-slot .fake-player{
  background:#0a0a0a; border:1px solid var(--line);
  border-radius:2px; padding:14px 16px;
  display:flex; align-items:center; gap:14px;
  opacity:.6;
}
.audio-slot .fake-player .play{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--ink-mute);
  display:flex; align-items:center; justify-content:center; color:var(--ink-mute);
}
.audio-slot .fake-player .bar{
  flex:1; height:3px; background:var(--line-2); border-radius:2px;
  position:relative;
}
.audio-slot .fake-player .bar::after{
  content:""; position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--ink-mute);
}
.audio-slot .fake-player .time{ font-family:var(--cond); color:var(--ink-mute); font-size:13px;}
.audio-slot .note{ margin-top:12px; font-family:var(--cond); font-size:12px; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase;}

/* Full-text viewer overlay */
.full-viewer{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:stretch; justify-content:center;
  z-index:1000;
}
.full-viewer.open{ display:flex; }
.full-viewer .panel{
  background:var(--paper); color:#141414;
  width:min(880px, 96vw); margin:2vh auto; max-height:96vh;
  display:flex; flex-direction:column;
  font-family:var(--serif); box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.full-viewer .panel header{
  padding:14px 18px; border-bottom:1px solid #ccc;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper-2);
}
.full-viewer .panel header h3{
  font-family:var(--black); margin:0; font-size:18px; letter-spacing:.02em;
}
.full-viewer .panel header .x{
  border:1px solid #333; background:transparent; padding:6px 12px;
  font-family:var(--cond); letter-spacing:.14em; cursor:pointer;
}
.full-viewer .panel .body{
  overflow:auto; padding:24px 32px; line-height:1.65; font-size:17px;
}
.full-viewer .panel .body h1,
.full-viewer .panel .body h2,
.full-viewer .panel .body h3{ font-family:var(--black); }
.full-viewer .panel footer{
  padding:10px 18px; border-top:1px solid #ccc; background:var(--paper-2);
  font-family:var(--cond); font-size:12px; letter-spacing:.14em; color:#555;
  display:flex; justify-content:space-between; align-items:center;
}

/* Card footer */
.card-foot{
  border-top:1px solid var(--line); padding:22px 28px;
  max-width:1180px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-family:var(--cond); font-size:12px; letter-spacing:.16em;
  color:var(--ink-mute); text-transform:uppercase;
}
.card-foot a{ color:var(--ink-soft);}

/* Print — synthesis only */
@media print{
  body{ background:#fff; color:#111; }
  .topbar, .util, .rail, .card-foot, .full-viewer, .finish-row, .actions,
  .badges, .formats{ display:none !important;}
  .card-head{ border:none; padding:0 0 20px;}
  .card-head h1{ color:#111;}
  .card-head .byline{ color:#333;}
  .card-head .shelf-tag{ color:#666;}
  .layout{ display:block; padding:0; max-width:none;}
  .reading{ color:#111;}
  .reading h2, .reading section.beat h3{ color:#111;}
  .reading .lead{ border-left:2px solid #333; color:#111;}
  .reading blockquote{ background:#f5f2ea; color:#111;}
  .reading .anchors{ background:#f8f5ec; border:1px solid #999; color:#111;}
  .reading .anchors h4, .reading .trigger .lbl{ color:#555;}
  .reading .trigger{ background:#fff; border:1px solid #333; color:#111;}
  .reading .trigger p{ color:#111;}
  @page{ margin:18mm 16mm;}
}

/* ============================================================
   READ-ALONG CONTRACT v1.0
   Sentence-level highlighting, section IDs, sync toolbar,
   full-version stats block.
   ============================================================ */

/* Contract section headers — reuse the existing .reading h2 look */
.reading .section-head { margin: 0 0 20px; }
.reading .section-head .kicker-h2 {
  font-family:var(--cond); font-size:12px; letter-spacing:.24em;
  color:var(--amber); text-transform:uppercase;
  margin:0 0 6px; font-weight:normal;
}
.reading .section-head .section-sub {
  font-family:var(--black); font-weight:normal;
  font-size:32px; line-height:1.1; color:var(--paper);
  margin:0; letter-spacing:-.005em;
}

/* Contract identity/synthesis/trigger/full-version don't need to change background;
   they inherit layout from .reading and .rail.                                     */

/* Restore lead margin now that the wrapper changed */
#synthesis-body .lead {
  font-family:var(--serif); font-size:19px; line-height:1.6;
  color:var(--ink); margin:0 0 32px; border-left:2px solid var(--amber);
  padding:2px 0 2px 18px;
}

/* Segment (sentence-level) states */
.segment{
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
  border-radius:3px;
  padding:1px 2px;
  margin:0 -2px;
  scroll-margin-top: 90px;   /* room above when scrollIntoView(center) */
  scroll-margin-bottom: 90px;
}
.segment.is-seekable{ cursor: pointer; }
.segment.is-upcoming{ color: var(--ink); }
.segment.is-read{ color: var(--ink-mute); opacity:.72; }
.segment.is-active{
  background: rgba(245, 158, 11, .18);
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(245,158,11,.35);
}
.segment.is-seekable:hover:not(.is-active){
  background: rgba(255,255,255,.05);
  color: var(--paper);
}
.segment.is-seekable:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Trigger question — contract form */
#trigger.trigger-section{
  margin:44px 0 0; padding:24px 26px;
  border:1px solid var(--amber); background:rgba(245,158,11,.05);
}
#trigger.trigger-section .kicker-h2{
  font-family:var(--cond); font-size:12px; letter-spacing:.24em;
  color:var(--amber); text-transform:uppercase;
  margin:0 0 12px; font-weight:normal;
}
#trigger.trigger-section #trigger-question{
  margin:0; padding:0; border:none; background:none;
  font-family:var(--serif); font-size:22px; line-height:1.4;
  color:var(--paper); font-style:italic;
}

/* Full-version panel — real stats */
#full-version.full-box .stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;
  margin:14px 0 16px;
  padding:14px 16px;
  border:1px solid var(--line-2);
  background:var(--panel);
}
#full-version.full-box .stats .stat{
  display:flex; flex-direction:column;
  font-family:var(--cond); letter-spacing:.04em;
}
#full-version.full-box .stats .stat .n{
  color:var(--paper); font-size:15px; font-weight:600;
}
#full-version.full-box .stats .stat .u{
  color:var(--ink-mute); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; margin-top:2px;
}
#full-version.full-box .stats .stat.src{ grid-column: 1 / -1; }
#full-version.full-box .stats .stat.src .u{ letter-spacing:.1em; }

/* Listen — real audio player + sync toolbar */
#listen .player-shell{
  margin-top:6px;
  padding:12px 12px 10px;
  border:1px solid var(--line-2);
  background:var(--panel);
}
#listen audio#book-audio{
  width:100%;
  display:block;
  filter: invert(0.94) hue-rotate(180deg);   /* dark-mode friendly controls */
}
#listen audio#book-audio:not([src]){ opacity:.4; pointer-events:none; }
#listen .sync-status{
  margin-top:8px;
  font-family:var(--cond); font-size:11px; letter-spacing:.18em;
  color:var(--ink-mute); text-transform:uppercase;
  min-height:14px;
}
#listen .sync-status.live{ color: var(--ok); }
#listen .sync-status.in-forge{
  color: var(--ink-mute);
  border-left: 3px solid var(--amber);
  padding: 6px 10px;
  background: rgba(245,158,11,.04);
  letter-spacing:.14em;
}
#listen .read-along-toolbar{
  margin-top:10px;
  display:flex; gap:8px; align-items:center;
}
#listen .read-along-toolbar #follow-toggle[aria-pressed="true"]{
  border-color: var(--ok);
  color: var(--paper);
}
#listen .read-along-toolbar #follow-toggle[aria-pressed="true"]::before{
  content:""; display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:var(--ok); margin-right:8px; vertical-align:middle;
}
#listen .voice-note{
  margin-top:10px;
  font-family:var(--cond); font-size:12px; letter-spacing:.06em;
  color:var(--ink-mute);
}
#listen .voice-note strong{ color:var(--ink-soft); font-weight:normal; letter-spacing:.16em; text-transform:uppercase;}

/* Audio-length picker — sits inside .player-shell just under the audio element */
#listen .length-picker{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed var(--line-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
#listen .length-picker-label{
  font-family:var(--cond); font-size:11px; letter-spacing:.18em;
  color:var(--ink-soft); text-transform:uppercase;
}
#listen .length-picker-select{
  appearance:none; -webkit-appearance:none;
  font-family:var(--cond); font-size:13px; letter-spacing:.05em;
  color:var(--paper);
  background:transparent;
  border:1px solid var(--line-2);
  padding:8px 32px 8px 12px;
  cursor:pointer;
  min-width:180px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#listen .length-picker-select:hover{ border-color: var(--paper); }
#listen .length-picker-select:focus{ outline: 2px solid var(--brass, var(--paper)); outline-offset: 2px; }
#listen .length-picker-select option{ background: var(--panel); color: var(--paper); }
#listen .length-picker-note{
  flex-basis:100%;
  margin:2px 0 0;
  font-family:var(--cond); font-size:12px; letter-spacing:.04em;
  color:var(--ink-mute);
}
@media (max-width: 640px){
  #listen .length-picker-select{ min-width:0; flex:1 1 auto; }
}

/* Pull-quote inside a beat needs a bit more room now that beat wraps inside #synthesis-body */
#synthesis-body .beat blockquote.pull-quote{
  margin:22px 0; padding:14px 18px;
  border-left:3px solid var(--line-2); background:var(--panel);
  color:var(--paper); font-style:italic;
}
#synthesis-body .beat blockquote.pull-quote cite{
  display:block; margin-top:8px; font-family:var(--cond); font-style:normal;
  font-size:12px; letter-spacing:.16em; color:var(--ink-mute); text-transform:uppercase;
}

/* Mobile tap targets */
@media (max-width: 720px){
  .segment{ padding:2px 3px; margin:0 -3px; }
  #full-version.full-box .stats{ grid-template-columns:1fr; }
  #listen .read-along-toolbar #follow-toggle{ padding:11px 14px; font-size:12px; }
  .reading .section-head .section-sub{ font-size:26px; }
  #trigger.trigger-section #trigger-question{ font-size:19px; }
}

/* Print: hide audio + toolbar */
@media print{
  #listen, #listen *, .read-along-toolbar, .segment{ background: transparent !important; box-shadow: none !important; color: #000 !important; }
  #listen audio, #listen .read-along-toolbar, #listen .sync-status, #listen .voice-note{ display: none !important; }
}

/* ============================================================
   Book Hero — Cover-left, identity-right (with sticky-on-scroll)
   Added in the cinematic shelf pass.
   ============================================================ */

.book-hero {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 44px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 28px 12px;
  align-items: start;
}

@media (max-width: 820px) {
  .book-hero {
    grid-template-columns: 1fr;
    padding: 28px 20px 8px;
    gap: 24px;
  }
  .book-hero .book-hero-cover { justify-self: center; max-width: 260px; }
}

.book-hero .card-head {
  padding: 0 !important;
  border-bottom: none !important;
  max-width: none !important;
  margin: 0 !important;
}

.book-hero-cover {
  position: relative;
  aspect-ratio: 2/3;
}

.book-hero-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -14px 30px -14px rgba(0,0,0,0.5) inset,
    0 30px 60px -14px var(--book-shadow, rgba(0,0,0,0.55)),
    -8px 0 18px -10px rgba(0,0,0,0.5);
  transition: transform .35s ease, box-shadow .35s ease;
}
.book-hero-cover:hover .book-hero-cover-img {
  transform: translateY(-4px);
}

/* Gilded page edge */
.book-hero-cover::before {
  content: "";
  position: absolute;
  top: 5px; bottom: 5px; right: 0;
  width: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(212,164,74,0.16) 40%,
    rgba(0,0,0,0.4) 100%);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}

.book-cover-download {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--cond);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.book-cover-download:hover {
  color: var(--book-accent, var(--amber));
  border-color: var(--book-accent, var(--amber));
}

/* ============================================================
   Sticky cover thumb — appears after hero scrolls off
   ============================================================ */
.cover-sticky {
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 900;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 8px;
  background: rgba(12, 10, 8, 0.92);
  border: 1px solid rgba(212,164,74,0.25);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
  max-width: 320px;
}
.cover-sticky.visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.cover-sticky img {
  width: 44px; height: 66px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.cover-sticky-meta {
  min-width: 0;
}
.cover-sticky .cst-title {
  font-family: var(--black);
  font-size: 13px;
  color: var(--paper);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.cover-sticky .cst-author {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 2px;
}

@media (max-width: 560px) {
  .cover-sticky {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
  }
  .cover-sticky .cst-title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .book-hero-cover:hover .book-hero-cover-img,
  .cover-sticky {
    transition: none !important;
  }
}

/* =====================================================================
   TIER PICKER — synthesis length chips ("<10 min" / "30 min" / "Full")
   ===================================================================== */
.tier-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 6px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212, 164, 74, 0.15);
  border-radius: 999px;
  align-items: center;
}
.tier-chip {
  font-family: var(--cond, 'BarlowCondensed'), sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #aaa;
  background: transparent;
  border: 1px solid transparent;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.tier-chip:hover {
  color: #f0c674;
  background: rgba(212, 164, 74, 0.08);
}
.tier-chip.is-active {
  color: #1a1108;
  background: #d4a44a;
  border-color: #d4a44a;
  box-shadow: 0 2px 12px rgba(212, 164, 74, 0.35);
}
.tier-chip.is-active:hover {
  color: #1a1108;
  background: #d4a44a;
}
.tier-chip-full {
  margin-left: auto;
  color: #888;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding-left: 18px;
  border-radius: 0 999px 999px 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tier-chip-full:hover {
  color: #f0c674;
  background: transparent;
}

@media (max-width: 560px) {
  .tier-picker {
    border-radius: 12px;
    padding: 8px;
  }
  .tier-chip {
    font-size: 11px;
    padding: 8px 12px;
  }
  .tier-chip-full {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 0;
    padding-top: 12px;
    margin-top: 4px;
  }
}