html { scroll-behavior: smooth; }
/* ============ Marie Mackay — pink world theme ============ */
:root {
  /* ONE font for the whole site — Lora, the same font as Marie's existing
     mariemackay.com. Change it HERE (or via Dashboard settings site_font_*)
     and everything follows. */
  --font-body: "Lora", Georgia, serif;
  /* TRIAL (14 July): Marie picked Jersey 20 for headers in the sandbox and
     asked to see it live — one line to revert to Lora if she changes her mind */
  --font-head: "Jersey 20", "Lora", Georgia, serif;
  /* Ink & Rose — Marie's chosen scheme (13 July). Near-black page + rose-pink.
     Panel kept warm (NOT the blue-black she flagged in the sandbox). Her
     Dashboard colour settings / settings-fallback.json still override these. */
  --bg: #05060a;
  --bg2: #05060a;
  --pink: #ff4da6;        /* rose-pink (Ink & Rose) */
  --pink-soft: #ffb3d3;
  --ink: #ffffff;
  --ink-soft: #ffd7ee;    /* secondary text */
  --ink-dim: #ffffff88;   /* captions / faint text */
  --line-soft: #ffffff22; /* subtle borders + dividers */
  --line-mid: #ffffff44;  /* dashed placeholder boxes */
  --panel: #1c0614;       /* warm rose-black card (not blue) */
  --pink-bright: #ff70b8; /* same hue, brighter — THE dropdown banner colour */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* the hidden attribute must always win, even over display:grid/flex rules */
[hidden] { display: none !important; }

body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 60%, var(--bg) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* THE one section-title style — every big heading on the site uses this
   single class (Marie, 8 July: "why is there four different title types?" —
   because sections were built at different times, each with its own heading
   styles. Never again: typography lives HERE only.) */
.section-title {
  display: block; text-align: center;
  font-family: var(--font-head); font-weight: 700;
  /* ~10% bigger (Marie, 15 July) */
  font-size: clamp(1.55rem, 3.3vw, 2.2rem); letter-spacing: .12em;
  text-transform: uppercase; color: var(--pink-soft);
}
/* a slim dividing line above each on-page section heading (Marie, 15 July) —
   scoped to sections so popup headings don't get one */
section .section-title::before {
  content: ""; display: block; width: min(340px, 70%); height: 1px;
  background: var(--line-soft); margin: 0 auto 1.1rem;
}

/* drop-down sections (quiz + chart): a clean banner bar — drop arrow on the
   LEFT, one title that looks like a title (smaller than a full section
   heading). Both banners are the same width with a divider between, so each
   reads clearly as its own thing (Marie, 9 July). */
.drop-section summary { list-style: none; cursor: pointer; }
.drop-section summary::-webkit-details-marker { display: none; }
/* THE one dropdown style (Marie, 14 July): the bright pink "Bundle and save"
   banner is the baseline for EVERY dropdown — quiz, insanity chart, bundle. */
.drop-banner {
  display: grid; grid-template-columns: 1.8rem 1fr 1.8rem; align-items: center;
  gap: .4rem; padding: .8rem 1rem;
  /* the USUAL site pink (Marie, 14 July — the brighter one was hard to read) */
  background: var(--pink);
  border: 1px solid var(--pink); border-radius: 12px;
  transition: background .15s ease;
}
.drop-banner:hover { background: var(--pink-bright); }
.drop-heading {
  grid-column: 2; text-align: center; margin: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.4rem); letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
}
.drop-banner .drop-arrow { grid-column: 1; justify-self: start; color: #fff; font-size: 1.15rem; }
.drop-arrow { display: inline-block; transition: transform .2s ease; }
.drop-section[open] .drop-arrow { transform: rotate(180deg); }
/* a clean divider makes the two banners read as separate things (Marie) */
.drop-divider { border: none; height: 1px; background: var(--line-soft); max-width: 900px; margin: 1.6rem auto; }

img { display: block; max-width: 100%; }

/* ---------- header + nav + social icons ----------
   These now live in ONE shared source, partials.js (injected on every page),
   so the banner/nav/social are never rebuilt per page. Do not re-add them here. */

/* ---------- quote (smaller + softer so it reads as a whisper — Marie, 15 July) ---------- */
.quote {
  text-align: center;
  padding: 1.2rem 1rem .6rem;
  font-style: italic;
}
.quote p { font-size: 1.05rem; max-width: 44rem; margin: 0 auto; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.quote span { color: var(--pink-soft); font-size: .85rem; }

/* ---------- top row: socials + the two small buttons on ONE line ---------- */
.top-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem 1rem; padding: .4rem 1rem 0; }
/* inside the top row the social bar drops its own top padding so the icons
   and the two buttons sit on the SAME midline (Marie, 15 July) */
.top-row .social-bar { padding: 0; }
/* PIXEL buttons site-wide (Marie's pick, 16 July — matches her ART/DETAILS
   tabs): Silkscreen font, hard edges, a stepped pixel shadow, press-down on
   click. The .btn-sm size override + long labels stay readable via the .8rem. */
.btn {
  /* SAME font as the ART/DETAILS/AUDIOBOOK tabs: Silkscreen weight 400 (not
     bold — bold read thick + chunky), matching size + spacing (Marie, 16 July) */
  font-family: "Silkscreen", monospace; font-weight: 400; cursor: pointer;
  font-size: .72rem; letter-spacing: .03em; line-height: 1.3;
  padding: .8rem 1.4rem; border-radius: 0;
  text-decoration: none; display: inline-block; text-align: center;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { transform: translate(-1px, -1px); }
.btn:active { transform: translate(2px, 2px); }
.btn-solid {
  background: var(--pink); color: #fff; border: 0;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--bg) 55%, var(--pink)), 0 0 0 2px var(--pink-soft);
}
.btn-solid:active { box-shadow: 2px 2px 0 color-mix(in srgb, var(--bg) 55%, var(--pink)), 0 0 0 2px var(--pink-soft); }
.btn-outline {
  background: transparent; color: var(--pink-soft); border: 3px solid var(--pink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pink) 30%, transparent);
}
/* THE one .btn-sm — restyle HERE only. It was declared twice (once above .btn,
   once far below); the lower copy silently won, which is the only reason the
   size override worked at all. MUST stay after .btn — same specificity, so
   whichever comes last wins, and above .btn it gets swallowed by .btn's padding. */
.btn-sm { padding: .4rem 1rem; font-size: .85rem; }

/* ---------- freebies box ---------- */
.freebies { display: flex; justify-content: center; padding: 1rem; }
.freebies-box {
  background: var(--panel);
  border: 2px dashed var(--pink);
  border-radius: 18px;
  text-align: center;
  padding: 1.6rem 2.4rem;
  cursor: pointer;
  max-width: 26rem;
  transition: transform .15s ease;
}
.freebies-box:hover { transform: scale(1.03); }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.freebies-box h2 { color: var(--pink-soft); letter-spacing: .08em; }

/* ---------- reading order ---------- */
.reading-order {
  text-align: center;
  padding: 1rem 1rem 1.2rem;   /* tight — reader hits the books fast (Marie, 15 July) */
  margin-top: .2rem;
}
.ro-note { max-width: 34rem; margin: .6rem auto .8rem; color: var(--ink-soft); }
/* "Sort by:" sits right beside the toggle (Marie, 15 July) */
.ro-sort-row { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.ro-sort { color: var(--ink-dim); font-size: .9rem; }
/* THE one toggle (Marie's pick, 14 July): G2b from the sandbox — pink pixel
   track, the chosen word on a raised WHITE button with pink text and shaded
   edges, the quiet word still readable. Font = Silkscreen (the OG pixel
   switch's font, her ask). Reading order, Art/Details/Audiobook tabs and the
   freebies NSFW button all use this ONE class — restyle it HERE only. */
.toggle { display: inline-flex; background: var(--pink); border: 4px solid var(--bg); border-radius: 6px; box-shadow: 0 0 0 2px var(--pink-soft); }
.toggle button {
  font-family: "Silkscreen", monospace; font-size: .72rem; letter-spacing: .04em;
  /* unselected = almost-white, just a touch softer (Marie, 14 July —
     the old 55% read too dark-pink on the track) */
  background: none; border: 0; color: #fff; opacity: .82; margin: 3px;
  padding: .5rem .9rem; border-radius: 4px; cursor: pointer;
}
.toggle button.active {
  opacity: 1; background: #fff; color: var(--pink);
  box-shadow: inset 2px 2px 0 #fff, inset -3px -3px 0 color-mix(in srgb, var(--pink) 30%, transparent), 0 2px 0 color-mix(in srgb, var(--bg) 55%, transparent);
}
/* per-spot placement only — the look lives in .toggle above */
.ro-toggle { margin-bottom: 1.4rem; }
.ro-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.ro-cluster { display: flex; align-items: center; }
.ro-cluster .ro-item + .ro-item { margin-left: -4rem; } /* duets/trilogies overlap */
/* gentle up/down variance like Marie's original strip */
.ro-cluster .ro-item:nth-child(odd) { transform: translateY(-7px) rotate(-2deg); }
.ro-cluster .ro-item:nth-child(even) { transform: translateY(7px) rotate(2deg); }
.ro-strip > .ro-cluster:nth-child(even) { transform: translateY(8px); }
.ro-cluster .ro-item:hover, .ro-cluster .ro-item:focus-visible {
  transform: scale(1.12) translateY(-6px) rotate(0deg);
}
.ro-item {
  background: none; border: none; padding: 0; cursor: pointer;
  transition: transform .18s ease;
}
.ro-item:hover, .ro-item:focus-visible {
  transform: scale(1.12) translateY(-4px);
  position: relative; z-index: 2;
}
.ro-item img { height: 130px; width: auto; }
.ro-label {
  letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
  padding: .6rem 0 .7rem;   /* tighter under each strip (Marie, 15 July) */
}
.ro-label span { display: block; font-weight: 400; opacity: .6; font-size: .8rem; letter-spacing: .5em; }

/* ---------- insanity chart (Marie's pin pieces on a coded stage) ----------
   Everything is % of the fixed-ratio stage, so positions never drift. */
.chart-wrap { max-width: 900px; margin: 0 auto; padding: 0 1rem; text-align: center; }
.chart-stage { position: relative; aspect-ratio: 1366 / 560; margin-top: 1rem; }
.chart-line { position: absolute; left: 14%; width: 72%; top: 40%; }
.pin {
  position: absolute; left: calc(var(--x) - var(--w) / 2); width: var(--w);
  transition: transform .18s ease; cursor: pointer;
}
.pin img { width: 100%; height: auto; display: block; }
.pin-up { bottom: 60.8%; }  /* small breathing room above the line (Marie, 8 July) */
.pin-down { top: 43.2%; }   /* bottom row sits ~10px lower (Marie, round 5) */
.pin:hover, .pin:focus-visible { transform: scale(1.1); z-index: 2; }
/* "less"/"max" end labels — sit in the margin outside the line, vertically
   centred on the line (chart-line's own top:40%), far edges so they never
   meet a pin (Marie, 14 July) */
.chart-stage::before, .chart-stage::after {
  position: absolute; top: 40%; transform: translateY(-50%);
  color: var(--pink-soft); font-family: "Silkscreen", monospace;
  font-size: clamp(.5rem, 1.6vw, .7rem); text-transform: uppercase;
  letter-spacing: .1em; pointer-events: none;
}
.chart-stage::before { content: "sane"; left: 7%; }
/* Marie's label (16 July): the right end reads "max nutty mode". Stacked over
   two lines so it stays tucked in the right margin without reaching the pins. */
.chart-stage::after { content: "max nutty\A mode"; right: 3%; white-space: pre; text-align: center; line-height: 1.25; }

/* ---------- book shelf (horizontal scroll) ---------- */
.shelf-wrap { padding: 2.5rem 0 1rem; }
/* carousel: the previous/next book peeks at each side (desktop, click to
   move); pink arrows flip it on the phone */
.shelf-stage {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: .6rem 1rem 1.2rem;
}
.shelf { flex: 0 1 990px; min-width: 0; }
/* the trailing books: every slot is a FIXED box so no cover shape can shift
   the layout; they fade with distance like a real carousel */
.side-thumb { flex: 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.side-book {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--pink-soft); font-weight: 700; font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, opacity .18s ease;
}
.side-book.near { width: 92px; height: 136px; opacity: .6; }
.side-book.mid  { width: 66px; height: 100px; opacity: .38; }
.side-book.far  { width: 46px; height: 72px;  opacity: .2; }
/* narrower screens shed the furthest books so the card keeps its width */
@media (max-width: 1330px) { .side-book.far { display: none; } }
@media (max-width: 1120px) { .side-book.mid { display: none; } }
.side-book img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.side-book:hover, .side-book:focus-visible {
  /* softer pink-PURPLE glow, not the hot near-red one (Marie, 13 July) */
  opacity: 1; transform: scale(1.1);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pink) 50%, #a64bff));
}
/* delicate chevron (just the arrow head) between the card and its neighbours */
.side-chevron {
  background: none; border: none; cursor: pointer; padding: 0 .1rem;
  color: var(--pink-soft); font-size: 2.1rem; font-weight: 300; line-height: 1;
  opacity: .7; transition: transform .15s ease, opacity .15s ease;
  /* pinned at the artwork's height — the same spot for every book. They used
     to centre on the whole card and jumped as card heights changed between
     books (Marie, 12 July). */
  align-self: flex-start;
  margin-top: calc(clamp(300px, 46vw, 520px) / 2 + 73px);
}
.side-chevron:hover, .side-chevron:focus-visible { opacity: 1; transform: scale(1.25); }
/* phone: just the delicate arrow heads, no circles, no stalks */
.shelf-arrow {
  display: none;
  /* same fixed anchor as .side-chevron — never centred on the changing card */
  position: absolute; top: calc(clamp(300px, 46vw, 520px) / 2 + 90px);
  transform: translateY(-50%); z-index: 3;
  background: none; border: none; cursor: pointer;
  color: var(--pink-soft); font-size: 2.4rem; font-weight: 300; line-height: 1;
  text-shadow: 0 0 8px #000;
}
.shelf-arrow.prev { left: .2rem; }
.shelf-arrow.next { right: .2rem; }

.book-card {
  display: none;
  /* no container box (Marie, 13 July) — the book flows straight on the page,
     no darker-pink panel, no border line */
  background: transparent;
  border-radius: 16px;
  padding: 1.4rem;
}
.book-card.active { display: block; animation: card-in .45s ease; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.book-card.flash { outline: 4px solid var(--pink); }

/* title sits left, the Art/Details pill sits right (Marie, 8 July) */
.book-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; text-align: left; padding-bottom: .4rem;
}
.book-head h3 {
  /* small enough that every title fits ONE line (Marie, 8 July) */
  font-size: clamp(1.05rem, 2.1vw, 1.45rem); letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--pink-soft);
}
.book-sub { color: var(--ink-soft); opacity: .8; font-size: .95rem; }

.tab-row { flex: 0 0 auto; }
.tab-row button { padding: .35rem 1.1rem; } /* slightly slimmer inside the card header */
/* THE FIX (2 July): hidden panes must actually hide — display:flex below was
   overriding the hidden attribute, so Details stacked under the art. */
.tab-pane[hidden] { display: none; }
/* art panes: same height for every book, art centred, air before the buttons */
/* THE ONE CONTAINER RULE (Marie, round 5): art and details share the exact
   same fixed-size box — switching tabs or books never changes the card size */
.pane-art, .pane-details {
  display: flex; justify-content: center; align-items: center;
  height: clamp(300px, 46vw, 520px); margin-bottom: .8rem;
  position: relative;
}
/* art sits a touch smaller than its box (Marie) — 94%, in ONE rule only */
.pane-art img { max-width: 100%; max-height: 94%; object-fit: contain; border-radius: 10px; }

/* two-image panel: Marie exports the SAME design twice at 2732x1788 —
   panel-base (no arrows/writing) + panel-hover (with them). Both use
   object-fit:contain in the SAME fixed box, so they still overlap perfectly
   and the container never changes size. */
/* art sits at the TOP of the box (Marie, 14 July: "the book starts higher for
   details than art") so art + details tops line up; the box itself never
   changes size (the one-container rule), any spare room sits at the bottom */
.pane-art.duo { overflow: hidden; align-items: flex-start; }
/* both images obey the same .pane-art img 94% cap; BOTH layers must use the
   same alignment (top) or hovering shifts the picture (the 12-July bug) */
.duo-base { width: 100%; height: 100%; object-fit: contain; transition: opacity .45s ease; }
.duo-hover {
  position: absolute; inset: 0; margin: 0 auto; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .45s ease;
}
.pane-art.duo:hover .duo-hover { opacity: 1; } /* tropes fade in on top; base stays solid underneath so there's no fade-out flash */
@media (hover: none) { .duo-hover { opacity: 1; } } /* phones: always visible */
.pane-details .book-body { height: 100%; width: 100%; justify-content: center; }
/* blurbs can be long — the info column scrolls inside the slot */
.pane-details .book-info { max-height: 100%; overflow-y: auto; padding-right: .4rem; }
/* subtle app-coloured scrollbar instead of the bright white default (Marie) */
.book-info { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--pink) 40%, transparent) transparent; }
.book-info::-webkit-scrollbar { width: 6px; }
.book-info::-webkit-scrollbar-track { background: transparent; }
.book-info::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--pink) 40%, transparent); border-radius: 999px; }
.blurb-block { padding-bottom: 1rem; }
/* multi-book cards: each part folds into its own drop-down */
.blurb-drop { margin-bottom: .6rem; }
.blurb-drop summary {
  cursor: pointer; color: var(--pink-soft); font-weight: 700;
  letter-spacing: .05em; padding: .35rem 0;
}
.blurb-drop[open] summary { padding-bottom: .5rem; }
.blurb { white-space: pre-line; font-size: .92rem; padding-bottom: .4rem; }
/* tropes drop-down: PHONE ONLY (Marie, 16 July). It reuses THE site drop-down
   theme (.drop-section/.drop-banner — the pink bar with white text, same as
   Quiz / Omegas / Bundle and save), just sized down to sit inside a book card.
   Desktop hides the bar and JS keeps it open, so desktop looks as it always did. */
.tropes-drop > summary { display: none; }
.tropes-drop .drop-banner { padding: .45rem .7rem; border-radius: 8px; grid-template-columns: 1.2rem 1fr 1.2rem; }
.tropes-drop .drop-heading { font-size: .82rem; letter-spacing: .08em; }
.tropes-drop .drop-arrow { font-size: .9rem; }
.tropes-drop[open] .tropes { padding-top: .6rem; }
.tw summary { cursor: pointer; color: var(--pink-soft); font-weight: 700; padding: .3rem 0; }
.tw p { white-space: pre-line; font-size: .88rem; opacity: .85; padding: .3rem 0 .2rem; }
.pane-details .book-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.pane-details .book-cover img { max-height: 92%; width: auto; max-width: 100%; }

.book-body { display: flex; gap: 1.4rem; align-items: center; }
.side-right .book-body { flex-direction: row-reverse; }

.book-cover { flex: 0 0 42%; margin: 0; }
.book-cover img { width: 100%; }
.cover-soon {
  aspect-ratio: 5 / 8; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line-mid); border-radius: 12px;
  color: var(--ink-dim); font-style: italic;
}

.book-info { flex: 1; }
.book-tagline { font-style: italic; color: var(--pink-soft); padding-bottom: .7rem; }
.tropes { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding-bottom: 1rem; }
.tropes li {
  border: 1px solid var(--pink); border-radius: 999px;
  padding: .25rem .7rem; font-size: .8rem; color: var(--ink-soft);
}
/* a little air below the buttons — they sat hard against the card's bottom
   edge (Marie, 12 July) */
.book-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-bottom: .6rem; }

@media (max-width: 700px) {
  .book-body, .side-right .book-body { flex-direction: column; }
  .book-cover { flex-basis: auto; width: 70%; }
  .side-thumb, .side-chevron { display: none; }  /* phone: delicate arrows only */
  .shelf-arrow { display: block; }
  .book-head { flex-direction: column; text-align: center; gap: .5rem; }
  /* really small: the three buttons stack (Marie, round 5) */
  .book-actions { flex-direction: column; align-items: center; }
  /* taller card on phones so the Details blurb has real room to scroll — the
     98px box was far too cramped (Marie, 16 July). ART + DETAILS still share
     ONE box (the one-container rule), so both grow together. */
  .pane-art, .pane-details { height: 390px; }
  /* stacked details: small cover on top, blurbs scroll in the space left. The
     cover is a touch smaller here so the scroll box gets ~185px, not ~98px. */
  .pane-details .book-cover { height: auto; flex: 0 0 auto; }
  .pane-details .book-cover img { max-height: 150px; }
  .pane-details .book-info { flex: 1 1 auto; min-height: 0; width: 100%; }
  /* phone: the pink "Tropes" bar shows and the chips start CLOSED — they ate
     the Details tab's room (Marie, 16 July) */
  .tropes-drop > summary { display: grid; }
}
.badge-soon {
  display: inline-block; background: #000c; color: var(--pink-soft);
  padding: .35rem .9rem; border-radius: 999px; font-weight: 700; font-size: .85rem;
}

/* ---------- art page: header + empty state ---------- */
.drops-wrap { max-width: 60rem; margin: 0 auto; padding: 2.5rem 1rem; }
.drops-title { padding: 1rem 0 2rem; }  /* typography comes from .section-title */
.drops-empty { text-align: center; color: var(--ink-soft); opacity: .8; padding: 3rem 0; }

/* ---------- accordion ---------- */
.accordion { max-width: 46rem; margin: 2.5rem auto; padding: 0 1rem; }
.accordion details {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: 12px; margin-bottom: .8rem; padding: 1rem 1.2rem;
}
.accordion summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.accordion p { padding: .7rem .2rem 0; color: var(--ink-soft); }
/* each question is its own little drop-down INSIDE the FAQs one (Marie, 12 July) */
.accordion .faq-item { background: color-mix(in srgb, var(--panel) 55%, #000); margin: .7rem 0 0; padding: .7rem 1rem; }
.accordion .faq-item summary { font-size: .95rem; color: var(--pink-soft); }
.accordion .faq-item p { padding: .5rem .2rem 0; }

/* ---------- footer ---------- */
.footer {
  text-align: center; border-top: 1px solid var(--line-soft);
  padding: 2rem 1rem 2.4rem; margin-top: 2rem;
}
.footer a { color: var(--pink-soft); }
.footer-fine { color: var(--ink-dim); font-size: .8rem; margin-top: .4rem; }

/* ---------- popup ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: #000a;
  backdrop-filter: blur(3px);           /* see-through, matches page behind */
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.popup {
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  border: 2px solid var(--pink);
  border-radius: 18px;
  max-width: 34rem; width: 100%;
  max-height: 85vh; overflow-y: auto; overflow-x: hidden;
  padding: 2rem 1.6rem 1.6rem;
  position: relative;
}
.popup-close {
  position: absolute; top: .6rem; right: .9rem;
  background: none; border: none; color: #fff;
  font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.popup h3 { color: var(--pink-soft); margin-bottom: .8rem; }
.popup p { margin-bottom: .8rem; }
.popup .btn { margin: .25rem; }

/* embedded Stripe checkout — renders right inside the popup, no redirect */
.popup.popup-checkout { max-width: 30rem; }
.checkout-screen { position: relative; padding-top: .2rem; }
.checkout-back {
  position: absolute; top: -.4rem; left: -.4rem;
  background: none; border: none; color: var(--pink-soft);
  font-size: 1.8rem; line-height: 1; cursor: pointer; padding: .1rem .5rem;
  transition: transform .12s ease;
}
.checkout-back:hover, .checkout-back:focus-visible { transform: scale(1.2); }
.checkout-title { text-align: center; color: var(--pink-soft); font-weight: 700; margin: 0 1.4rem .7rem; }
.checkout-cover { display: block; max-height: 120px; width: auto; margin: 0 auto .8rem; border-radius: 8px; box-shadow: 0 3px 14px color-mix(in srgb, var(--pink) 35%, transparent); }
.embedded-checkout { background: #fff; border-radius: 14px; min-height: 220px; padding: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--pink) 40%, transparent), 0 10px 30px rgba(0,0,0,.35); }
.checkout-loading, .checkout-error { text-align: center; color: #444; padding: 2rem 1rem; margin: 0; }
.thanks-screen { text-align: center; }

/* ---------- the book-match quiz (embedded subway map, Marie's design) ---------- */
.quiz-wrap { max-width: 900px; margin: 2.5rem auto 0; padding: 0 1rem; text-align: center; }
#quiz-map { width: 100%; max-width: 640px; height: auto; margin: 1rem auto 0; --map-gray: #4d3c46; }
#quiz-map .track3 { stroke: var(--map-gray); stroke-width: 4; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
#quiz-map .track3.lit { stroke: var(--pink); }
#quiz-map .st3 { fill: #241019; stroke: var(--map-gray); stroke-width: 4; }
#quiz-map .st3.lit { fill: #fff; stroke: var(--pink); cursor: pointer; }
#quiz-map .st3.here { fill: var(--pink); stroke: var(--pink); }
#quiz-map .bk .pg { fill: #241019; stroke: var(--map-gray); stroke-width: 2; }
#quiz-map .bk line { stroke: var(--map-gray); stroke-width: 2; }
#quiz-map .bk.lit .pg { fill: var(--pink); stroke: var(--pink); filter: drop-shadow(0 0 5px var(--pink)); }
#quiz-map .bk.lit line { stroke: #fff; }
.quiz-area {
  min-height: 170px; display: flex; flex-direction: column; justify-content: center;
  position: relative; padding: 0 1rem;
}
/* the whole questionnaire sits in a centred, tight panel; the back arrow hangs
   just to its left so it's right next to the questions — not stranded at the
   screen edge (Marie, 13 July). Fixed panel width keeps the arrow put. */
.quiz-panel { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.quiz-q-row { display: flex; align-items: center; justify-content: center; }
.quiz-q { font-weight: 700; font-size: 1.05rem; padding: .6rem 0 .9rem; }
/* back arrow: hangs just left of the centred panel, vertically centred beside it
   — a normal questionnaire back button, close to the questions, not at the edge */
.quiz-back {
  font: inherit; background: none; border: none; cursor: pointer;
  color: var(--pink-soft); font-size: 1.7rem; line-height: 1; padding: .2rem .4rem;
  position: absolute; left: -2.4rem; top: 50%; transform: translateY(-50%);
  transition: transform .12s ease;
}
.quiz-back:hover, .quiz-back:focus-visible { transform: translateY(-50%) scale(1.25); }
.quiz-opts { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.quiz-opt {
  font: inherit; cursor: pointer; font-size: .9rem; font-weight: 700;
  width: 100%; max-width: 360px; border: 2px solid var(--pink); border-radius: 10px;
  background: transparent; color: var(--ink-soft); padding: .5rem .8rem;
  transition: transform .12s ease;
}
.quiz-opt:hover, .quiz-opt:focus-visible { transform: scale(1.04); }
/* the reveal reads sideways: words left, book on a tablet right */
.quiz-result-card {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  flex-wrap: wrap; color: var(--pink-soft); font-weight: 700;
  border: 2px dashed var(--pink); border-radius: 14px; padding: .9rem 1rem;
}
.quiz-result-btns { padding-top: .6rem; }
.quiz-result-card img { height: 130px; width: auto; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pink) 33%, transparent)); }
/* the tablet art IS the "go to this book" button — glow + grow on hover says so */
.quiz-result-jump { background: none; border: 0; padding: 0; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.quiz-result-jump:hover, .quiz-result-jump:focus-visible {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pink) 50%, #a64bff));
}
/* on a phone the panel fills the width, so lift the arrow to sit just above it, top-left */
@media (max-width: 600px) {
  .quiz-back { left: 0; top: -1.9rem; transform: none; }
  .quiz-back:hover, .quiz-back:focus-visible { transform: scale(1.25); }
}

/* ---------- the freebies present (drawn in CSS — no emojis on site) ---------- */
.gift-box {
  position: relative; display: block; width: 92px; height: 78px;
  margin: 2.8rem auto 1.6rem; background: var(--pink); border: none;
  border-radius: 8px; cursor: pointer; animation: bounce 1.6s infinite;
}
.gift-box::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px;
  transform: translateX(-50%); background: #fff; border-radius: 2px;
}
.gift-lid {
  position: absolute; top: -16px; left: -8px; right: -8px; height: 18px;
  background: var(--pink); border-radius: 5px; box-shadow: 0 2px 0 #00000033;
}
.gift-lid::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 14px;
  transform: translateX(-50%); background: #fff;
}
.gift-bow::before, .gift-bow::after {
  content: ""; position: absolute; top: -30px; width: 18px; height: 16px;
  border: 4px solid #fff; background: transparent;
}
.gift-bow::before { left: calc(50% - 20px); border-radius: 50% 50% 0 50%; }
.gift-bow::after { left: calc(50% + 2px); border-radius: 50% 50% 50% 0; }
.gift-box:hover { animation-play-state: paused; transform: scale(1.08); }
.gift-box-img {
  width: 120px; height: 120px; background: transparent center/contain no-repeat;
  border-radius: 0;
}
.gift-box-img::before { display: none; }
.gift-box.wobble { animation: gift-wobble .3s ease; }
@keyframes gift-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(var(--wob, 6deg)) scale(1.04); }
  75% { transform: rotate(calc(var(--wob, 6deg) * -1)) scale(1.04); }
}
.gift-box.explode { animation: gift-explode .5s ease forwards; }
@keyframes gift-explode {
  30% { transform: scale(1.3) rotate(-8deg); }
  60% { transform: scale(0.8) rotate(10deg); box-shadow: 0 0 0 18px color-mix(in srgb, var(--pink) 33%, transparent); }
  100% { transform: scale(2.6) rotate(24deg); opacity: 0; box-shadow: 0 0 0 60px color-mix(in srgb, var(--pink) 0%, transparent); }
}
.gift-hint { font-size: .85rem; opacity: .85; padding-top: .2rem; }
#gift-reveal img {
  display: block; max-width: 100%; max-height: 52vh;
  margin: .9rem auto 0; border-radius: 10px;
}
.gift-title { font-size: .85rem; color: var(--ink-soft); padding: .4rem 0 .1rem; }
/* The Free Extras popup is a touch wider so the sign-up form has room. */
.gift-popup { max-width: 40rem; }
/* the native sign-up box (used in the Free Extras popup + newsletter popup) */
.gift-signup-form {
  margin: 1.6rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.signup-native {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
  padding-top: .4rem;
}
/* PIXEL newsletter boxes (Marie's pick, 16 July) — hard edges, Silkscreen,
   stepped shadow, matching the pixel buttons + tabs */
.signup-native input {
  font-family: "Silkscreen", monospace; font-size: .78rem;
  padding: .7rem .9rem; border-radius: 0;
  border: 3px solid var(--pink); background: #00000044; color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pink) 40%, transparent);
  flex: 1 1 200px; min-width: 0;
}
/* the email box is always wider than the name box (Marie: ~40 / 60) */
.signup-native input[name="first_name"] { flex: 2 1 120px; }
.signup-native input[name="email"] { flex: 3 1 150px; }
.signup-native input::placeholder { color: var(--ink-dim); }
.signup-msg { color: var(--pink-soft); font-size: .85rem; width: 100%; }
.signup-done { color: var(--pink-soft); font-weight: 700; padding: .4rem 0; }
/* the on-page newsletter section (replaces the old dashed Free Extras box) */
.signup-section {
  max-width: 42rem; margin: 2.5rem auto 0; padding: 0 1rem; text-align: center;
}
.signup-section p { color: var(--ink-soft); padding: .3rem 0 .6rem; }

/* ---------- About Me (photo + Marie's verbatim bio) ---------- */
.about { text-align: center; padding: 2.4rem 1rem 1rem; }
.about-row {
  max-width: 900px; margin: 1.4rem auto 0;
  display: flex; align-items: center; gap: 2.2rem; text-align: left;
}
.about-photo {
  width: min(320px, 38%); height: auto; flex: none;
  aspect-ratio: 1; object-fit: cover;       /* a circle, not a rounded box (Marie) */
  border-radius: 50%; border: 1px solid var(--line-soft);
}
.about-text p { margin: 0 0 1em; color: var(--ink-soft); line-height: 1.65; }
.about-text p:last-child { margin-bottom: 0; }
.about-text s { color: var(--ink-dim); } /* the spell-check joke reads as crossed out, softer */
@media (max-width: 700px) {
  .about-row { flex-direction: column; gap: 1.2rem; text-align: center; }
  .about-photo { width: min(260px, 82%); }
}

/* ---------- audiobooks section (under My Books) ---------- */
.audio-shop { text-align: center; padding: 2.2rem 1rem 1rem; }
.audio-grid {
  max-width: 990px; margin: 1.2rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;
}
.audio-tile {
  font: inherit; cursor: pointer; background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: 14px; padding: .8rem;
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
  transition: transform .15s ease, border-color .15s ease;
}
/* price pinned to the tile's BOTTOM so it never bounces about between tiles
   with longer/shorter titles (Marie, 15 July) */
.audio-tile .audio-tile-price { margin-top: auto; }
.audio-tile:hover, .audio-tile:focus-visible { transform: translateY(-4px); border-color: var(--pink); }
/* the tile + its "+cart" button live in one column; the tile stretches to
   fill so every "+" sits on the SAME line no matter how the titles wrap */
.audio-tile-wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; height: 100%; }
.audio-tile-wrap .audio-tile { width: 100%; flex: 1; }
.audio-tile-add { padding: .35rem 1rem; font-size: .9rem; }
/* set already in the basket → the +cart fades like the bundle strip's items */
.audio-tile-add.in { opacity: .45; }
/* the price bar that appears under the tiles once something's in the cart */
#audio-section-bar { max-width: 560px; margin: 1rem auto 0; }
.audio-tile img { width: 100%; border-radius: 10px; }
/* Marie's tile layout (12 July): pink title, italic feature line, price under */
.audio-tile-title { color: var(--pink-soft); font-weight: 700; line-height: 1.25; }
.audio-tile-kind { color: var(--ink-dim); font-style: italic; font-size: .85rem; }
.audio-tile-price { color: var(--ink); font-weight: 700; font-size: .95rem; }
/* the elsewhere-price: struck through + a hover "?" (Marie, 12 July) */
.audio-was { color: var(--ink-dim); font-weight: 400; margin-left: .25rem; }
.audio-why {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem;
  border: 1px solid var(--line-mid); border-radius: 50%;
  font-size: .68rem; font-weight: 400; color: var(--ink-dim);
  margin-left: .35rem; cursor: help; vertical-align: 2px;
}
/* the bonus-hours "!" — same size as the "?" but a BRIGHT filled pink so it
   stands out and invites a tap/hover (only on the two extended editions) */
.audio-extra {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--pink); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
  margin-left: .3rem; cursor: pointer; vertical-align: 2px;
}
.audio-extra:hover, .audio-extra:focus-visible { background: var(--pink-bright); }
/* tapping the ? opens this little bubble (phones can't hover) */
.why-bubble {
  /* absolute (not fixed) so it stays anchored to its "?" and scrolls WITH the
     page instead of floating down the screen with you (Marie, 16 July) */
  position: absolute; z-index: 999; max-width: 250px;
  background: var(--panel); border: 1px solid var(--pink-soft); border-radius: 10px;
  color: var(--ink-soft); font-size: .85rem; padding: .6rem .8rem; text-align: left;
}
/* the delivery line inside the buy popup */
.audio-note { color: var(--ink-dim); font-size: .8rem; max-width: 22rem; }
/* her line under the heading */
.audio-sub { color: var(--ink-soft); max-width: 36rem; margin: 0 auto; padding: .3rem 1rem 0; }
.price-note { text-align: center; color: var(--ink-dim); font-size: .8rem; margin: .35rem 0 0; }

/* ---------- audio buy popup (cover + verbatim store name + USD price) ---------- */
.audio-pop { display: grid; gap: .55rem; justify-items: center; text-align: center; max-width: 100%; }
/* every child must be allowed to shrink to the popup width so the 10-wide
   basket strip scrolls INSIDE instead of stretching the popup off-screen */
.audio-pop > * { min-width: 0; max-width: 100%; }
/* smaller cover so the buttons + Buy-more drop-down fit without scrolling (Marie) */
.audio-pop .audio-cover {
  width: min(190px, 46vw); max-height: 30vh; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--line-soft);
}
.audio-pop .audio-name { font-weight: 700; max-width: 24rem; font-size: 1.05rem; }
.audio-pop .audio-meta { color: var(--pink-soft); font-size: 1rem; font-weight: 700; }
.audio-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .2rem; }

/* ---------- the "Buy more and save" basket drop-down ---------- */
/* breathing room BELOW the banner too, so the audio tab never feels cramped
   and the card doesn't end right at the dropdown (Marie, 14 July) */
.bundle-drop { width: 100%; max-width: 560px; min-width: 0; margin: .7rem auto .9rem; }
.bundle-box, .bundle-strip { min-width: 0; max-width: 100%; }
/* the bundle drop-down reuses the .drop-section/.drop-banner style (Marie:
   "use the ones we have") — no custom summary styling needed here. */
.bundle-box { padding: .9rem .2rem 0; }
/* .55rem headroom on top so the hover glow/pop isn't cropped (Marie, 14 July) */
.bundle-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .55rem .1rem 1rem; scrollbar-width: thin; scrollbar-color: var(--pink) transparent; }
.bundle-strip::-webkit-scrollbar { height: 6px; }
.bundle-strip::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.bundle-item { flex: none; width: 84px; display: grid; justify-items: center; gap: .3rem; cursor: pointer; }
.bundle-item img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; object-position: top; transition: transform .09s ease-out, filter .09s ease-out; }
/* no title under the cover — hover shows the name (tooltip) and the SAME
   pink-purple glow as the reading-order iPads, kept gentle so nothing crops */
.bundle-item:hover img, .bundle-item:focus-visible img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pink) 50%, #a64bff));
}
.bundle-item.in { opacity: .45; }
.bundle-pill { font: inherit; font-weight: 700; line-height: 1; cursor: pointer; border: 2px solid var(--pink); border-radius: 999px; background: transparent; color: var(--pink-soft); width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.bundle-item.in .bundle-pill { background: var(--pink); color: #fff; }
.bundle-empty { color: var(--ink-dim); font-style: italic; text-align: center; padding: .4rem 0 .8rem; }
.bundle-price { border: 1px solid var(--line-soft); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .2rem; text-align: center; margin-bottom: .8rem; }
.bp-big { color: var(--ink); font-weight: 700; font-size: 1.35rem; }
.bp-line { color: var(--ink-soft); font-size: .88rem; }
.bp-hrs { color: var(--ink-dim); font-style: italic; font-size: .82rem; }
.bp-save { color: var(--pink-soft); font-size: .85rem; }
.bundle-buy { display: block; margin: 0 auto; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .quote p { font-size: 1.05rem; }
  .book-card { flex-basis: 92vw; }
  /* insanity chart: use the full phone width instead of the desktop side
     padding squeezing it down (Marie, 14 July) — pin/line positions are all
     % based so they scale safely with the stage */
  .chart-wrap { max-width: 100%; padding: 0; }
  /* quiz dropdown matches the chart: same edge-to-edge width on phone so the
     two banners line up (Marie, 16 July). The questionnaire keeps its own
     centred max-widths, so only the pink banner widens — quiz stays centred. */
  .quiz-wrap { max-width: 100%; padding: 0; }
  /* phone: drop the "sane"/"max" end words — no room for them beside a
     full-width chart, and the line reads clearly on its own (Marie, 16 July) */
  .chart-stage::before, .chart-stage::after { display: none; }
  /* phone: scale the WHOLE chart up TOGETHER so it reaches the screen edges
     (Marie, 16 July: "I need the whole thing scaled up, but together").
     Everything inside the stage — the line image, its diamond ends, the nesting
     arrow + "(when nesting)" label, and every pin — is positioned in % of the
     stage, so making the STAGE wider than the screen grows it all in exact
     proportion. Nothing is stretched, so the diamond end-caps stay square (no
     "double corner"). aspect-ratio grows the height to match, and the wrap
     clips the invisible side overflow so there's no sideways scroll.
     138% ⇒ the 14%–86% content band lands ~1px–374px on a 375px phone. */
  .chart-wrap { overflow-x: hidden; }
  .chart-stage { width: 138%; margin-left: -19%; }
  /* …and the pin PICTURES another ~15% on top (Marie, 16 July) — each
     character's NAME is baked into its PNG, so growing the picture is what
     makes the names readable on a phone. Each pin stays on its --x point. */
  .pin { width: calc(var(--w) * 1.15); left: calc(var(--x) - var(--w) * 0.575); }
}

/* ---------- freebies page: free-art gallery grouped by book ---------- */
.freebie-book { margin: 0 0 2.2rem; }
.freebie-book-title { color: var(--pink-soft); letter-spacing: .06em; font-size: 1.3rem; margin: 0 0 .8rem; }
.freebie-layout { display: flex; align-items: flex-start; gap: 16px; }
.freebie-row {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 14px; overflow-x: auto; padding: 0 .2rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.freebie-row::-webkit-scrollbar { height: 8px; }
.freebie-row::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 8px; }
.freebie-piece { flex: 0 0 auto; margin: 0; }
/* all art matches one height; width follows each picture's shape */
.freebie-piece img { height: 240px; width: auto; max-width: none; border-radius: 14px; display: block;
  border: 1px solid var(--line-soft); background: var(--panel); }
.freebie-piece figcaption { font-size: .78rem; color: var(--ink-dim); text-align: center; padding-top: .4rem; }
@media (max-width: 600px) { .freebie-piece img { height: 180px; } }

/* the book cover sits fixed on the left of each row; art never slides under it */
.freebie-cover { flex: 0 0 auto; }
.freebie-cover .book3d { display: inline-block; }
.freebie-cover img { height: 240px; width: auto; display: block; border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
@media (max-width: 600px) { .freebie-cover img { height: 180px; } }

/* ============ AUDIOBOOK TAB (3rd tab on the book card — 14 July) ============ */

/* top bar: Read now + a round crossovers icon under the title; tabs on the right */
.book-head.xbar-a { align-items: flex-start; }
.xbar-a .book-head-left { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.xbar-a .book-actions { justify-content: flex-start; margin: .35rem 0 0; }
.cross-btn { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid var(--pink);
  background: transparent; color: var(--pink-soft); display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .12s ease; }
.cross-btn:hover, .cross-btn:focus-visible { transform: scale(1.1); background: color-mix(in srgb, var(--pink) 18%, transparent); }
.cross-btn svg { width: 18px; height: 18px; }

/* the audio pane: one main display (cover or a teaser) on the cover side, info the other */
.pane-audio { display: block; height: auto; }
/* info column sits vertically centred beside the cover (Marie, 14 July) */
.au-body { display: flex; gap: 1.4rem; align-items: center; }
.side-right .au-body { flex-direction: row-reverse; }
.au-media { --cw: calc(clamp(300px, 46vw, 520px) * 0.575); flex: 0 0 42%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
/* match the ebook exactly: it's capped by EITHER its height (→ --cw) OR its 42% column
   (→ 100%), whichever is smaller — so use min() of the two */
.au-stage { width: min(var(--cw), 100%); }
.au-cover2 { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); display: block; }
.au-teaser-vid { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; border: 1px solid var(--line-soft); background: #000; display: block; }
/* thumbnails below: first is the cover, then the teasers — tap to swap the big view */
/* min-height so books WITHOUT teasers reserve the same row — the audio tab
   keeps ONE height across books; containers never resize (Marie, 14 July) */
.au-teaser-thumbs { width: min(var(--cw), 100%); min-height: 64px; display: flex; gap: .4rem; overflow-x: auto; padding: .45rem 0 .1rem; scrollbar-width: thin; scrollbar-color: var(--pink) transparent; }
.au-teaser-thumbs::-webkit-scrollbar { height: 5px; } .au-teaser-thumbs::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.au-teaser-thumb { flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; overflow: hidden; opacity: .55; transition: opacity .12s ease, transform .12s ease; }
.au-teaser-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-teaser-thumb:hover { opacity: 1; transform: scale(1.05); }
.au-teaser-thumb.on { border-color: var(--pink); opacity: 1; }

.au-info2 { flex: 1; min-width: 0; text-align: left; }
.au-meta { color: var(--pink-soft); font-weight: 700; }
.au-was { color: var(--ink-dim); font-weight: 400; margin-left: .3rem; }
.au-bookfunnel { color: var(--ink-dim); font-size: .82rem; margin-top: .2rem; }
.au-narrators { color: var(--ink-soft); font-size: .92rem; margin-top: .25rem; }
/* sample: circle play + long progress bar + running time (normal player) */
.au-sample { display: flex; align-items: center; gap: .7rem; margin: .8rem 0 .6rem; }
/* volume: small speaker icon that pops a vertical slider upward */
.au-vol-wrap { position: relative; flex: none; display: inline-flex; }
.au-vol-btn { flex: none; width: 1.7rem; height: 1.7rem; padding: 0; border: none; background: transparent; color: var(--pink-soft); cursor: pointer; display: grid; place-items: center; transition: color .12s ease, transform .12s ease; }
.au-vol-btn:hover { color: var(--pink); transform: scale(1.08); }
.au-vol-btn svg { width: 18px; height: 18px; display: block; }
.au-vol-pop { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; justify-content: center; align-items: center; height: 84px; padding: .6rem .45rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; }
.au-vol-pop[hidden] { display: none; }
.au-vol { writing-mode: vertical-lr; direction: rtl; width: 6px; height: 100%; accent-color: var(--pink); cursor: pointer; }
.au-sample-circle { flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 2px solid var(--pink); background: var(--pink); color: #fff; font-size: .95rem; cursor: pointer; display: grid; place-items: center; padding-left: 2px; transition: transform .12s ease; }
.au-sample-circle:hover { transform: scale(1.08); }
.au-sample-circle.playing { background: transparent; color: var(--pink-soft); padding-left: 0; }
.au-sample-bar { flex: 1; min-width: 50px; height: 6px; border-radius: 999px; background: var(--line-soft); cursor: pointer; position: relative; }
.au-sample-fill { display: block; height: 100%; width: 0; background: var(--pink); border-radius: 999px; }
.au-sample-time { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: .85rem; }
.au-actions { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; margin-top: 1rem; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; font: inherit; font-weight: 700; cursor: pointer; border: 3px solid var(--pink); background: transparent; color: var(--pink-soft); border-radius: 0; padding: 0 1.1rem; box-shadow: 3px 3px 0 color-mix(in srgb, var(--pink) 30%, transparent); transition: transform .12s ease, background .12s ease; }
.btn-icon:hover { transform: scale(1.06); background: color-mix(in srgb, var(--pink) 16%, transparent); }
.btn-icon .plus { font-size: 1.15rem; line-height: 1; }
.btn-icon svg { width: 20px; height: 20px; display: block; }
@media (max-width: 700px) {
  .au-body, .side-right .au-body { flex-direction: column; align-items: center; }
  .au-media { width: 100%; flex-basis: auto; }
  .au-info2 { text-align: center; } .au-actions, .au-narrators, .au-sample { justify-content: center; text-align: center; }
  /* phone: a book with NO teasers left a big empty gap between the cover and
     the text (the reserved 64px thumbs row). Stacked like this it isn't needed,
     so collapse the empty row (Marie, 16 July). Books WITH teasers keep theirs. */
  .au-teaser-thumbs:empty { display: none; }
  /* phone: centre the whole stacked header — the Art/Details/Audiobook toggle included */
  .book-head.xbar-a { align-items: center; }
  .xbar-a .book-head-left { align-items: center; }
  .xbar-a .book-actions { flex-direction: row; justify-content: center; }
  .tab-row { max-width: 100%; }
}
@media (max-width: 600px) {
  /* phone: NO panel behind the Audiobook tab — it now matches Art + Details,
     which sit straight on the page with no background (Marie, 16 July) */
  .pane-audio { background: none; padding: 0; }
  /* tabs must NEVER crop: the row fills the width and the three buttons share
     it, with the label shrinking so AUDIOBOOK always fits, even at 320px
     (Marie, 16 July — the white pill was cracking out the side) */
  .tab-row { display: flex; width: 100%; max-width: 100%; }
  .tab-row button { flex: 1 1 0; min-width: 0; padding: .45rem .2rem;
    font-size: clamp(.5rem, 2.7vw, .72rem); white-space: nowrap; }
  /* phone: three smaller audiobook tiles per row */
  .audio-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .audio-tile { padding: .45rem; gap: .35rem; }
  .audio-tile-title { font-size: .72rem; line-height: 1.15; }
  .audio-tile-kind { font-size: .62rem; }
  .audio-tile-price { font-size: .74rem; }
}

/* Buy more and save — the solid brighter-pink bar you picked; price detail left, checkout right */
/* (the bright-pink look lives on the base .drop-banner now — one style for all) */
.drop-banner .bundle-count { grid-column: 3; justify-self: end; background: #fff; color: var(--pink); font-size: .72rem; font-weight: 700; min-width: 1.3rem; height: 1.3rem; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; }
@keyframes count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.55); } 100% { transform: scale(1); } }
.bundle-count.pop { animation: count-pop .35s ease; }
.bundle-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--line-soft); border-radius: 12px; padding: .7rem 1rem; margin-top: .3rem; }
.bundle-detail { text-align: left; display: grid; gap: .1rem; }
.bundle-all { display: block; margin: .3rem auto .2rem; }
/* ---------- corner mini-cart (appears only when the basket has books) ---------- */
.mini-cart { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.mini-cart-btn {
  position: relative; width: 54px; height: 54px; border-radius: 50%; border: none;
  background: var(--pink); color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); transition: transform .12s ease;
}
.mini-cart-btn:hover { transform: scale(1.08); }
.mini-cart-btn svg { width: 24px; height: 24px; }
.mini-cart-count {
  position: absolute; top: -4px; right: -4px; min-width: 1.35rem; height: 1.35rem;
  background: #fff; color: var(--pink); font-size: .75rem; font-weight: 700;
  border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}
.mini-cart-panel {
  width: min(280px, calc(100vw - 32px)); max-height: 55vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--pink); border-radius: 12px;
  padding: .8rem; box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.mc-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.mc-name { flex: 1; min-width: 0; }
.mc-x { flex: none; background: none; border: none; color: var(--pink); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.mc-total { display: flex; justify-content: space-between; font-weight: 700; padding: .55rem 0 .2rem; }
.mc-buy { width: 100%; margin-top: .5rem; }
/* Clear cart sits under Checkout, quieter (Marie, 16 July) */
.mc-clear { width: 100%; margin-top: .4rem; }
/* the display-only "Buy all audio" line under the Audiobooks section */
#audio-buyall { display: block; margin: .8rem auto 0; }
.au-or { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--ink-dim); margin: .6rem auto; }
.bundle-shelf { display: flex; align-items: center; gap: .25rem; }
.bundle-shelf .bundle-strip { flex: 1; min-width: 0; }
.bundle-arrow { flex: none; background: none; border: none; cursor: pointer; color: var(--pink-soft); font-size: 1.8rem; line-height: 1; opacity: .8; padding: 0 .1rem; transition: transform .12s ease, opacity .12s ease; }
.bundle-arrow:hover { opacity: 1; transform: scale(1.2); }