/* ============================================================
   Audiobooks — Erasmus Cromwell-Smith II
   All rules namespaced to body[data-page='audiobooks'].
   ============================================================ */

body[data-page='audiobooks']{
  --ab-night:#0a0f1c;
  --ab-night-2:#121a2e;
  --ab-night-3:#080c16;
  --ab-gold:#c9a227;
  --ab-gold-lit:#e0c060;
  --ab-gold-dim:rgba(201,162,39,.34);
  --ab-ink:#1a1a1a;
  /* frosted warm-sand plate: light, translucent, of the same family as the
     cream page and the gold rules. Swap these four for another pastel. */
  --ab-plate-a:rgba(247,241,229,.86);
  --ab-plate-b:rgba(232,220,199,.80);
  --ab-plate-rule:rgba(150,120,40,.34);
  --ab-plate-tick:rgba(150,120,40,.70);
}

/* ---------- hero ---------- */
  /* site standard */


/* ---------- filter chips ---------- */
body[data-page='audiobooks'] .ab-filters{
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  margin-top:var(--space-6,1.75rem);
}
body[data-page='audiobooks'] .ab-chip{
  font:inherit; font-size:.83rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  border:1px solid rgba(0,0,0,.16); background:transparent; color:inherit;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
body[data-page='audiobooks'] .ab-chip:hover{ border-color:var(--ab-gold); }
body[data-page='audiobooks'] .ab-chip.is-on{
  background:var(--ab-night); border-color:var(--ab-night); color:#f4ead2;
}
body[data-page='audiobooks'] .ab-chipsep{
  width:1px; align-self:stretch; background:rgba(0,0,0,.14); margin:.15rem .35rem;
}

/* ---------- shelf ---------- */
body[data-page='audiobooks'] .ab-shelf{
  background:
    radial-gradient(90% 60% at 18% 0%, rgba(201,162,39,.07) 0%, rgba(201,162,39,0) 60%),
    radial-gradient(80% 70% at 88% 40%, rgba(140,120,90,.06) 0%, rgba(140,120,90,0) 62%),
    #f7f4ee;
}
body[data-page='audiobooks'] .ab-grid{
  display:grid; gap:2.75rem 3rem;
  /* two per row so each square carries a full-size mockup */
  grid-template-columns:repeat(2, minmax(0,1fr));
  width:min(100%, 62rem); margin-inline:auto;
}
body[data-page='audiobooks'] .ab-card.is-hidden{ display:none; }

/* A lone card at the end of an odd result set is centred across both columns
   rather than left hanging beside an empty half-row. audiobooks.js marks it,
   because the filter and the language panels both change which card it is. */
body[data-page='audiobooks'] .ab-card.is-alone{
  grid-column:1 / -1;
  width:min(100%, calc(50% - 1rem));
  margin-inline:auto;
}

/* Threshold of Embodiment closes the Rebel Hackers trilogy and is the odd
   third card of its group. Centred on its own row under the other two, it
   reads as deliberate and keeps the two series below it -- Dangerous Liaisons
   and Satoshi -- paired instead of one column out of step. */
body[data-page='audiobooks'] .ab-card.is-wide{
  grid-column:1 / -1;
  width:min(100%, calc(50% - 1rem));
  margin-inline:auto;
}

/* ---------- the square frame ---------- */
body[data-page='audiobooks'] .ab-frame{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  border-radius:3px;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--ab-plate-a) 0%, var(--ab-plate-b) 100%);
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  box-shadow:
    0 1px 2px rgba(40,34,24,.10),
    0 14px 30px -16px rgba(40,34,24,.30),
    inset 0 1px 0 rgba(255,255,255,.85);
}
/* fine gold inset rule */
body[data-page='audiobooks'] .ab-frame::before{
  content:''; position:absolute; inset:11px; pointer-events:none;
  border:1px solid var(--ab-plate-rule); border-radius:1px;
}
/* corner ticks */
body[data-page='audiobooks'] .ab-frame::after{
  content:''; position:absolute; inset:11px; pointer-events:none;
  background:
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) left  top   /14px 1px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) left  top   /1px 14px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) right top   /14px 1px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) right top   /1px 14px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) left  bottom/14px 1px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) left  bottom/1px 14px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--ab-plate-tick),var(--ab-plate-tick)) right bottom/1px 14px no-repeat;
  opacity:.85;
}

/* the portrait cover, plated inside the square */
body[data-page='audiobooks'] .ab-plate{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
/* Every mockup is normalised to a 1200x1200 canvas with the book 82% of the
   height and centred, so one rule presents all 22 identically. The shadow is
   a drop-shadow, not a box-shadow: it has to follow the book's silhouette,
   not the transparent square around it. */
body[data-page='audiobooks'] .ab-plate img{
  display:block; width:100%; height:100%; max-width:none; object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(40,34,24,.24)) drop-shadow(0 20px 28px rgba(40,34,24,.28));
  transition:filter .32s ease;
}
body[data-page='audiobooks'] .ab-card:hover .ab-plate,
body[data-page='audiobooks'] .ab-card:focus-within .ab-plate{
  transform:translateY(-4px) scale(1.022);
}
body[data-page='audiobooks'] .ab-card:hover .ab-plate img,
body[data-page='audiobooks'] .ab-card:focus-within .ab-plate img{
  filter:drop-shadow(0 5px 12px rgba(40,34,24,.30)) drop-shadow(0 28px 36px rgba(40,34,24,.34));
}

/* language chip + coming-soon flag */
body[data-page='audiobooks'] .ab-lang{
  position:absolute; top:20px; right:20px; z-index:2;
  font-size:.62rem; letter-spacing:.14em; font-weight:600;
  padding:.2rem .42rem; border-radius:2px;
  color:#6b5310; background:rgba(255,252,245,.82);
  border:1px solid var(--ab-plate-rule);
}
body[data-page='audiobooks'] .ab-soon{
  position:absolute; top:20px; left:20px; z-index:2;
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .48rem; border-radius:2px;
  color:var(--ab-night); background:var(--ab-gold-lit);
}

/* Sold only by the author. Same corner and colour as the "soon" chip, a shade
   smaller because the words are longer. Injected by audiobooks.js. */
body[data-page='audiobooks'] .ab-excl{
  position:absolute; top:20px; left:20px; z-index:2;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:.2rem .48rem; border-radius:2px;
  color:var(--ab-night); background:var(--ab-gold-lit);
}

/* ---------- card meta ---------- */
body[data-page='audiobooks'] .ab-meta{
  padding-top:1rem;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
body[data-page='audiobooks'] .ab-title{ margin:0 0 .3rem; font-size:1.06rem; line-height:1.3; }
body[data-page='audiobooks'] .ab-titlelink{
  font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-align:center; text-decoration:underline;
  text-decoration-color:var(--ab-gold-dim);
  text-decoration-thickness:1px; text-underline-offset:.22em;
  transition:text-decoration-color .18s ease, color .18s ease;
}
body[data-page='audiobooks'] .ab-titlelink:hover,
body[data-page='audiobooks'] .ab-titlelink:focus-visible{
  text-decoration-color:var(--ab-gold); color:#6b5310;
}
body[data-page='audiobooks'] .ab-series{
  margin:0 0 .18rem; font-size:.82rem; letter-spacing:.03em; opacity:.72;
}
body[data-page='audiobooks'] .ab-dot{ opacity:.5; padding:0 .18em; }
/* The narrator is a credit, not a footnote. It used to render at .6 opacity in
   grey italic, which put the one person who performs the book below the series
   line in visual weight. It now carries the same antique gold as the series
   rules and the banner ornaments: a short hairline above to separate it from
   the metadata without boxing it in, the label quiet in letterspaced small
   caps, and the name in aged gold on the display face. Deliberately NOT the lit
   gold used for links and buttons, so it reads as a credit rather than
   something to click. */
body[data-page='audiobooks'] .ab-narr{
  --narr-gold:#8a6e14;
  position:relative;
  margin:.5rem 0 .9rem;
  padding-top:.62rem;
  font-family:var(--font-display);
  font-size:.82rem;
  line-height:1.3;
  letter-spacing:.015em;
  font-style:normal;
  opacity:1;
  color:var(--narr-gold);
}
body[data-page='audiobooks'] .ab-narr::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:2.4rem; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--ab-gold-dim) 20%, var(--ab-gold) 50%,
    var(--ab-gold-dim) 80%, transparent);
}
body[data-page='audiobooks'] .ab-narr span{
  display:block;
  margin-bottom:.14rem;
  font-family:var(--font-body);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(26,26,26,.5);
}

body[data-page='audiobooks'] .ab-buy{
  font:inherit; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.62rem 1.05rem; cursor:pointer; border-radius:2px;
  border:1px solid var(--ab-night); background:transparent; color:var(--ab-night);
  transition:background .18s ease, color .18s ease;
}
body[data-page='audiobooks'] .ab-buy:hover{ background:var(--ab-night); color:#f4ead2; }
body[data-page='audiobooks'] .ab-buy.is-soon{
  border-color:rgba(0,0,0,.2); color:rgba(0,0,0,.42); cursor:default;
}
/* Free sampler: same corner and geometry as the "soon" chip, gold. */
/* the free card's call to action is a link, not a button */
body[data-page='audiobooks'] .ab-empty{ text-align:center; opacity:.6; padding:3rem 0; }

/* ---------- where-to-listen band ---------- */
body[data-page='audiobooks'] .ab-band{
  background:linear-gradient(168deg,var(--ab-night-2),var(--ab-night) 60%,var(--ab-night-3));
  color:#e8e3d6; text-align:center;
}
body[data-page='audiobooks'] .ab-band h2{ color:#f4ead2; margin:.2rem 0 .9rem; }
body[data-page='audiobooks'] .ab-band .kicker{ color:var(--ab-gold-lit); }
body[data-page='audiobooks'] .ab-bandlede{
  max-width:60ch; margin:0 auto 2rem; opacity:.8; line-height:1.65;
}
body[data-page='audiobooks'] .ab-rtrow{
  display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-width:820px; margin:0 auto;
}

/* ---------- retailer tiles ---------- */
body[data-page='audiobooks'] .ab-rt{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:60px; padding:.7rem .9rem; border-radius:3px; text-decoration:none;
  border:1px solid rgba(201,162,39,.28); background:rgba(255,255,255,.035);
  color:#efe7d3; font-size:.86rem; letter-spacing:.02em;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
body[data-page='audiobooks'] .ab-rt:hover{
  border-color:var(--ab-gold); background:rgba(201,162,39,.10); transform:translateY(-1px);
}
body[data-page='audiobooks'] .ab-rt-name{ display:block; line-height:1.25; }
body[data-page='audiobooks'] .ab-rt-name em{
  display:block; font-style:normal; font-size:.72rem; opacity:.6; letter-spacing:.04em;
}
/* A retailer with no URL for this title is hidden outright — a greyed-out
   tile reads as a broken page. Empty <details> sections hide too (see JS). */
body[data-page='audiobooks'] .ab-rt.is-pending{ display:none; }
body[data-page='audiobooks'] .ab-more.is-empty{ display:none; }

/* ---------- modals ---------- */
body[data-page='audiobooks'] .ab-modal{ position:fixed; inset:0; z-index:120; }
body[data-page='audiobooks'] .ab-modal[hidden]{ display:none !important; }
body[data-page='audiobooks'] .ab-modal-scrim{
  position:absolute; inset:0; background:rgba(8,12,22,.72); backdrop-filter:blur(3px);
}
body[data-page='audiobooks'] .ab-modal-box{
  position:relative; z-index:1; margin:min(6vh,3.5rem) auto; width:min(920px,92vw);
  max-height:88vh; overflow:auto; border-radius:4px; padding:2.4rem clamp(1.25rem,4vw,2.6rem);
  background:linear-gradient(168deg,var(--ab-night-2),var(--ab-night) 62%,var(--ab-night-3));
  color:#e8e3d6; box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  border:1px solid rgba(201,162,39,.24);
}
body[data-page='audiobooks'] .ab-modal-buy{ width:min(720px,92vw); text-align:center; }
body[data-page='audiobooks'] .ab-x{
  position:absolute; top:.6rem; right:.85rem; z-index:2;
  font-size:1.9rem; line-height:1; background:none; border:0; cursor:pointer;
  color:rgba(240,232,214,.6); padding:.2rem .35rem;
}
body[data-page='audiobooks'] .ab-x:hover{ color:var(--ab-gold-lit); }

body[data-page='audiobooks'] .ab-sum-grid{
  display:grid; gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:minmax(0,210px) minmax(0,1fr);
  align-items:start;
}
body[data-page='audiobooks'] .ab-sum-cover img{
  display:block; width:100%; height:auto; border-radius:2px;
  outline:1px solid rgba(201,162,39,.3);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85);
}
body[data-page='audiobooks'] .ab-sum-kicker{
  margin:0 0 .3rem; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ab-gold-lit);
}
body[data-page='audiobooks'] .ab-modal h2{
  margin:0 0 1rem; color:#f6eeda; font-size:clamp(1.4rem,3.2vw,1.95rem); line-height:1.2;
}
body[data-page='audiobooks'] .ab-sum-facts{
  display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem;
  margin:0 0 1.35rem; padding:0 0 1.1rem; font-size:.82rem;
  border-bottom:1px solid rgba(201,162,39,.2);
}
body[data-page='audiobooks'] .ab-sum-facts dt{ opacity:.55; letter-spacing:.04em; }
body[data-page='audiobooks'] .ab-sum-facts dd{ margin:0; opacity:.92; }
body[data-page='audiobooks'] .ab-sum-text p{
  font-family:'Spectral',Georgia,serif; line-height:1.72; margin:0 0 1rem; opacity:.9;
}
body[data-page='audiobooks'] .ab-sum-buy{ margin-top:.4rem; }

body[data-page='audiobooks'] .ab-rtgrid{
  display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:1.4rem 0 1.6rem;
}
body[data-page='audiobooks'] .ab-more{ text-align:left; margin:0 0 .75rem; }
body[data-page='audiobooks'] .ab-more summary{
  cursor:pointer; font-size:.84rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ab-gold-lit); padding:.55rem 0;
}
body[data-page='audiobooks'] .ab-rtsmall{
  display:flex; flex-wrap:wrap; gap:.45rem; padding:.4rem 0 .8rem;
}
body[data-page='audiobooks'] .ab-rt-sm{
  min-height:0; padding:.42rem .72rem; font-size:.78rem;
}
body[data-page='audiobooks'] .ab-note{
  font-size:.76rem; opacity:.5; margin:.6rem 0 0;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body[data-page='audiobooks'] .ab-sum-grid{ grid-template-columns:1fr; }
  body[data-page='audiobooks'] .ab-sum-cover{ max-width:190px; margin:0 auto; }
}
@media (max-width:700px){
      body[data-page='audiobooks'] .ab-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.8rem 1.6rem; }
  body[data-page='audiobooks'] .ab-frame::before,
  body[data-page='audiobooks'] .ab-frame::after{ inset:8px; }
  body[data-page='audiobooks'] .ab-lang,
  body[data-page='audiobooks'] .ab-soon{ top:14px; }
  body[data-page='audiobooks'] .ab-lang{ right:14px; }
  body[data-page='audiobooks'] .ab-soon{ left:14px; }
  body[data-page='audiobooks'] .ab-excl{ top:14px; left:14px; font-size:.46rem; letter-spacing:.05em; padding:.16rem .32rem; }
}
@media (prefers-reduced-motion:reduce){
  body[data-page='audiobooks'] .ab-plate{ transition:none; }
  body[data-page='audiobooks'] .ab-card:hover .ab-plate{ transform:none; }
}


/* hero copy is the shared .hero / .hero-copy object from the home page —
   nothing overridden here, so the opener matches index.html exactly */
body[data-page='audiobooks'] .ab-filters{ margin-top:0; }

/* the banner's WORDS / IDEAS / WORLDS trio, set as live type */
body[data-page='audiobooks'] .ab-trio{
  list-style:none; margin:0 0 var(--space-8); padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4) var(--space-12);
}
body[data-page='audiobooks'] .ab-trio li{ text-align:center; }
body[data-page='audiobooks'] .ab-trio b{
  display:block; font-family:var(--font-body); font-weight:400;
  font-size:var(--text-xs); letter-spacing:.22em; text-transform:uppercase;
  color:var(--color-text-faint);
}
body[data-page='audiobooks'] .ab-trio span{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:var(--text-base); color:var(--color-text-muted); margin-top:.2rem;
}

/* ---------- flat square audiobook covers ---------- */
/* The covers are finished 1:1 artwork, so the plate is now a mount rather than
   a stage: the frame keeps the cream ground and takes 5% padding all round, and
   the cover sits inside it as a square object with its own hairline rule and
   shadow. Running the artwork edge to edge made two neighbouring cards read as
   one strip -- the margin is what separates them, and it also gives the EN/ES
   chip somewhere to sit that is not on top of the illustration.
   The frame's gold inset rule and corner ticks stay off: they were drawn at a
   fixed 11px, which now falls inside the cover instead of around it. */
body[data-page='audiobooks'] .ab-card.is-square .ab-plate{ inset:5%; }
body[data-page='audiobooks'] .ab-card.is-square .ab-frame::before,
body[data-page='audiobooks'] .ab-card.is-square .ab-frame::after{ content:none; }
/* Inset on .ab-plate, not padding on .ab-frame: the plate is absolutely
   positioned and resolves inset:0 against the frame's border box, so padding
   on the frame left the cover full-bleed. */
body[data-page='audiobooks'] .ab-card.is-square .ab-plate img{
  width:100%; height:100%; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px var(--ab-plate-rule);
  filter:drop-shadow(0 2px 5px rgba(40,34,24,.18)) drop-shadow(0 10px 20px rgba(40,34,24,.22));
}
body[data-page='audiobooks'] .ab-card.is-square:hover .ab-plate img,
body[data-page='audiobooks'] .ab-card.is-square:focus-within .ab-plate img{
  filter:drop-shadow(0 4px 9px rgba(40,34,24,.24)) drop-shadow(0 16px 28px rgba(40,34,24,.28));
}

/* ---------- listening post ------------------------------------------------
 * A translucent disc over the artwork. It is visible at rest rather than on
 * hover, because its job is to say "this cover is playable" to someone who
 * is only scanning -- an affordance that appears on hover is one a phone
 * user never sees at all.
 *
 * White at 82% over a warm cover reads as glass rather than as a sticker,
 * and the blur behind it keeps the triangle legible over both the dark and
 * the pale artwork in this catalogue without giving the disc a border.
 * ------------------------------------------------------------------------ */
body[data-page='audiobooks'] .ab-listen{
  position:absolute; inset:0; margin:0; padding:0;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  z-index:3;
}
body[data-page='audiobooks'] .ab-listen-disc{
  position:relative;
  width:clamp(44px,20%,74px); aspect-ratio:1; border-radius:50%;
  /* Glass, not a white button: the artwork stays visible through the disc
     and only the blur and a hairline ring separate it. Every cover in this
     catalogue is dark at its centre -- the lightest measures 111 of 255 --
     so a white mark holds on all of them, and the disc can afford to be
     this faint without the triangle getting lost. */
  /* Totally clear, not frosted. The blur was reading as a smear of white over
     the artwork rather than as glass; with the fill and the blur both gone,
     the cover shows through untouched and only the hairline ring and the
     white triangle mark the control. The ring carries its own drop shadow so
     it still separates from a light passage in a cover. */
  background:transparent;
  border:1.5px solid rgba(255,255,255,.88);
  box-shadow:0 1px 6px rgba(20,16,10,.45), inset 0 0 6px rgba(20,16,10,.28);
  transition:background .18s ease, transform .18s ease,
             box-shadow .18s ease, border-color .18s ease;
  display:grid; place-items:center;
}
/* Triangle drawn with a clip-path rather than a border trick: it stays a
   clean shape at any size, and it can morph to the pause bars below. */
body[data-page='audiobooks'] .ab-listen-disc::after{
  content:''; width:34%; aspect-ratio:1;
  background:#fff;
  filter:drop-shadow(0 1px 2px rgba(20,16,10,.45));
  clip-path:polygon(18% 6%, 18% 94%, 92% 50%);
  transform:translateX(6%);
  transition:clip-path .16s ease, transform .16s ease, width .16s ease;
}
body[data-page='audiobooks'] .ab-listen:hover .ab-listen-disc,
body[data-page='audiobooks'] .ab-listen:focus-visible .ab-listen-disc{
  background:rgba(255,255,255,.10);
  border-color:#fff;
  transform:scale(1.06);
  box-shadow:0 4px 18px rgba(20,16,10,.36);
}
body[data-page='audiobooks'] .ab-listen:focus-visible{
  outline:2px solid var(--ab-plate-tick); outline-offset:-6px;
}
body[data-page='audiobooks'] .ab-listen:active .ab-listen-disc{ transform:scale(.98); }

/* Playing: the triangle becomes two bars, and a ring fills as the clip runs.
   --p is written by audiobooks.js, 0 to 1. */
body[data-page='audiobooks'] .ab-listen.is-playing .ab-listen-disc::after{
  width:30%;
  clip-path:polygon(6% 6%, 34% 6%, 34% 94%, 6% 94%, 6% 6%,
                    66% 6%, 94% 6%, 94% 94%, 66% 94%, 66% 6%);
  transform:none;
}
body[data-page='audiobooks'] .ab-listen.is-playing .ab-listen-disc{
  background:transparent;
  border-color:#fff;
}
body[data-page='audiobooks'] .ab-listen.is-playing .ab-listen-disc::before{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.95) calc(var(--p,0) * 360deg),
                            rgba(255,255,255,.18) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
body[data-page='audiobooks'] .ab-listen.is-loading .ab-listen-disc{ opacity:.6; }

/* Remaining time, so the visitor knows this is a taste and not the book. */
body[data-page='audiobooks'] .ab-listen-time{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8%; font-size:11px; letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:#fff; background:rgba(20,16,10,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:2px 7px; border-radius:2px;
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
body[data-page='audiobooks'] .ab-listen.is-playing .ab-listen-time{ opacity:1; }

/* The cover already lifts on card hover; don't let the disc fight it. */
body[data-page='audiobooks'] .ab-card:hover .ab-listen-disc{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.95);
}
@media (prefers-reduced-motion:reduce){
  body[data-page='audiobooks'] .ab-listen-disc,
  body[data-page='audiobooks'] .ab-listen-disc::after{ transition:none; }
}

/* ===== Buy dialog: direct-from-the-author block =================
   Shown only for titles that have a Shopify SKU (see AB_SHOP). Titles
   without one skip straight to the retailer grid, so no card is ever
   left with an empty slot.                                          */
.ab-direct{
  margin: 0 0 1.35rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid rgba(198,163,79,.38);
  border-radius: 12px;
  background: rgba(198,163,79,.07);
  text-align: center;
}
.ab-direct[hidden]{ display: none !important; }
.ab-direct-or[hidden], .ab-rtgrid[hidden], .ab-note[hidden]{ display: none !important; }
.ab-direct-kicker{
  margin: 0 0 .6rem;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold, #c6a34f);
}
.ab-direct-mount{
  display: flex;
  justify-content: center;
  min-height: 2.6rem;
}
.ab-direct-note{
  margin: .6rem 0 0;
  font-size: .82rem;
  opacity: .72;
}
.ab-direct-or{
  margin: .95rem 0 -.3rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  opacity: .55;
}

/* ---------- the narrator's word ----------
   A credit says who read the book; this says what reading it did to him, and
   it is the only outside voice on the page, so it gets the page's gold and
   nothing else competes with it. Hairline, diamond, aged gold on the display
   face: the same vocabulary as the series banners, at a quieter volume. No
   box, no tint panel, because the cream band already holds it. */
body[data-page='audiobooks'] .ab-quote{
  --narr-gold:#8a6e14;
  margin:1.9rem auto 1.6rem;
  max-width:36rem;
  padding:1.45rem 1rem 0;
  position:relative;
  text-align:center;
}
body[data-page='audiobooks'] .ab-quote::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:8rem; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--ab-gold-dim) 18%, var(--ab-gold) 50%,
    var(--ab-gold-dim) 82%, transparent);
}
body[data-page='audiobooks'] .ab-quote::after{
  content:"\2666";
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-size:.5rem; line-height:1; color:var(--ab-gold);
  background:var(--color-surface, #f7f1e4); padding:0 .5rem;
}
body[data-page='audiobooks'] .ab-quote blockquote{
  margin:0; padding:0; border:0;
}
body[data-page='audiobooks'] .ab-quote blockquote p{
  margin:0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.02rem, .95rem + .45vw, 1.3rem);
  line-height:1.55;
  letter-spacing:.005em;
  color:var(--narr-gold);
  text-wrap:balance;
}
body[data-page='audiobooks'] .ab-quote figcaption{
  margin-top:.95rem;
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
}
body[data-page='audiobooks'] .ab-quote-name{
  font-family:var(--font-display);
  font-size:.82rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ab-gold);
}
body[data-page='audiobooks'] .ab-quote-role{
  font-family:var(--font-body);
  font-size:.7rem; letter-spacing:.055em;
  color:rgba(26,26,26,.52);
}
@media (max-width:40rem){
  body[data-page='audiobooks'] .ab-quote{ margin:1.5rem auto 1.3rem; padding-top:1.25rem; }
  body[data-page='audiobooks'] .ab-quote::before{ width:6rem; }
}

/* ---------- the Spanish voice ----------
   Same gold, same hairline, same geometry as .ab-quote, but it carries a
   statement of fact rather than a quotation: the Spanish page honours the
   narrator the Spanish listener actually hears. Upright, not italic, because
   italic in this position reads as speech and nobody is being quoted yet.
   When Maxi sends his own words, swap this figure back to .ab-quote markup
   and the styling is already waiting. */
body[data-page='audiobooks'] .ab-voice{
  --narr-gold:#8a6e14;
  margin:1.9rem auto 1.6rem;
  max-width:36rem;
  padding:1.45rem 1rem 0;
  position:relative;
  text-align:center;
}
body[data-page='audiobooks'] .ab-voice::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:8rem; height:1px;
  background:linear-gradient(90deg,
    transparent, var(--ab-gold-dim) 18%, var(--ab-gold) 50%,
    var(--ab-gold-dim) 82%, transparent);
}
body[data-page='audiobooks'] .ab-voice::after{
  content:"\2666";
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  font-size:.5rem; line-height:1; color:var(--ab-gold);
  background:var(--color-surface, #f7f1e4); padding:0 .5rem;
}
body[data-page='audiobooks'] .ab-voice-line{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1rem, .94rem + .4vw, 1.22rem);
  line-height:1.5;
  color:var(--narr-gold);
  text-wrap:balance;
}
body[data-page='audiobooks'] .ab-voice figcaption{
  margin-top:.9rem;
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
}

/* Credit line sits above Maxi's statement in the Spanish voice block. */
body[data-page='audiobooks'] .ab-voice-line + blockquote{ margin-top:.8rem; }