/* The Reading Nook's shelf and storybook styles.
   Extracted from reading-nook.html so the per-book pages under
   /reading-nook/<slug> can share it instead of inlining 44 KB apiece.
   scripts/render-nook-pages.mjs links it; both surfaces read from here. */

/* ============================================================
   THE READING NOOK
   The Memphis sticker world opens into quiet paper. Chrome and
   shelf stay in the app's pop language (Fredoka, ink borders,
   hard offset shadows); the open book switches to a warm serif
   on paper so the words themselves get the stage.
   ============================================================ */

/* The rest of the site now speaks in soft blurred shadows. The nook is
   the one surface still built out of paper stickers, so it keeps the
   hard Memphis offset — scoped here, on the page body, rather than
   inherited from whatever the site-wide :root last decided. Every lift
   below names one of these tokens instead of guessing an offset. */
.nook-page {
  --pop: 4px 4px 0 rgba(25, 11, 38, 0.85);
  --pop-sm: 3px 3px 0 rgba(25, 11, 38, 0.6);
  --pop-soft: 7px 7px 0 rgba(25, 11, 38, 0.22);
  --nook-lift: 6px 8px 0 rgba(25, 11, 38, 0.85);
  --nook-lift-sm: 4px 5px 0 rgba(25, 11, 38, 0.85);
  --nook-press: 1px 1px 0 rgba(25, 11, 38, 0.85);
  --nook-ledge: 3px 3px 0 rgba(25, 11, 38, 0.5);
  --nook-sun: #ffc83d;
  /* The two radii this page kept guessing at: picture frames and the
     asymmetric jacket shape with its spine on the left. */
  --nook-radius-art: 12px;
  --nook-radius-book: 10px 14px 14px 10px;
  /* One micro-label size for every small caps label on the page. */
  --nook-label: 600 0.8125rem/1.2 var(--font-display);
}

.nook-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 30px);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px) var(--section-pad) 60px;
}

.nook-shell .safe-header {
  position: static;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.nook-shell .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nook-shell .brand__mark { width: 44px; height: 44px; overflow: hidden; background: #fff; }
.nook-shell .brand__mark img { width: 100%; height: 100%; }
.nook-shell .brand strong { display: block; font-size: 1.02rem; color: var(--ink-strong); }
.nook-shell .brand small { display: block; font-size: 0.78rem; }
.nook-shell .header-actions { display: flex; gap: 8px; }
.nook-shell .tool-button { padding: 9px 13px; background: #fff; text-decoration: none; font-size: 0.88rem; }

/* --- Hero: just a title line, because the shelf is the hero ------- */
.nook-hero {
  padding: clamp(2px, 0.8vw, 10px) 4px 0;
}

.nook-hero h1 {
  margin: 6px 0 0;
  font-size: clamp(1.8rem, 3.8vw, 2.5rem);
  color: var(--ink-strong);
  letter-spacing: 0.004em;
}

.nook-hero h1::after {
  content: "";
  display: block;
  width: 132px;
  height: 12px;
  margin-top: 10px;
  background-repeat: repeat-x;
  background-size: 118px 12px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="12" viewBox="0 0 118 12"%3E%3Cpath d="M2 8 C 12 1, 22 11, 32 6 S 52 1, 62 6 82 11, 92 6 112 1, 116 5" fill="none" stroke="%23ff9826" stroke-width="4" stroke-linecap="round"/%3E%3C/svg%3E');
}

.nook-hero .lede {
  max-width: 58ch;
  margin: 12px 0 0;
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.55;
  color: var(--ink);
}

/* --- The bookcase ------------------------------------------------ */
.nook-shelf { margin: 0; }

.nook-shelf h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--ink-strong);
  margin: 0 0 4px;
}

.nook-shelf h2::after {
  content: "";
  display: block;
  width: 118px;
  height: 12px;
  margin-top: 8px;
  background-repeat: repeat-x;
  background-size: 118px 12px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="118" height="12" viewBox="0 0 118 12"%3E%3Cpath d="M2 8 C 12 1, 22 11, 32 6 S 52 1, 62 6 82 11, 92 6 112 1, 116 5" fill="none" stroke="%2349d2b3" stroke-width="4" stroke-linecap="round"/%3E%3C/svg%3E');
}

.nook-shelf__hint {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.nook-case {
  border: 2.5px solid var(--ink-line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle, rgba(255, 200, 61, 0.35) 2px, transparent 2.6px) 30px 40px / 190px 170px,
    radial-gradient(circle, rgba(116, 201, 242, 0.3) 2px, transparent 2.6px) 110px 90px / 210px 190px,
    linear-gradient(180deg, #fff6dc, #fff0e0);
  box-shadow: var(--pop), var(--pop-soft);
  padding: clamp(16px, 2.6vw, 30px);
}

.nook-collection {
  position: relative;
}

.nook-collection + .nook-collection {
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: clamp(28px, 4vw, 42px);
  border-top: 3px solid rgba(25, 11, 38, 0.24);
}

.nook-collection__intro {
  max-width: 68ch;
  margin: 0 0 clamp(20px, 3vw, 30px);
  border: 2px solid var(--ink-line);
  border-radius: var(--radius-tight);
  background: rgba(255, 254, 253, 0.9);
  box-shadow: var(--pop-sm);
  padding: clamp(14px, 2vw, 20px);
}

.nook-collection__intro .eyebrow {
  margin: 0 0 5px;
  color: var(--berry);
}

.nook-collection__intro h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.72rem);
  color: var(--ink-strong);
}

.nook-collection__intro p:last-child {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.nook-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nook-row + .nook-row { margin-top: clamp(22px, 3vw, 34px); }

/* Every book stands on its own little ledge, so the shelf reads as
   furniture at any wrap width. The column is a flex box and the cover
   grows to fill it, so a short book rests on its ledge instead of
   hanging in mid-air beside a taller one. */
.nook-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
}

.nook-slot::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 11px;
  border: 2px solid var(--ink-line);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--nook-sun), #f0ad1d);
  box-shadow: var(--nook-ledge);
}

.nook-cover {
  --jacket: #49d2b3;
  --jacket-deep: #2aa98c;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 220px;
  padding: 16px 12px 14px 22px;
  border: 2.5px solid var(--ink-line);
  border-radius: var(--nook-radius-book);
  background:
    linear-gradient(90deg, var(--jacket-deep) 0 12px, transparent 12px),
    var(--nook-pattern, none),
    var(--jacket);
  box-shadow: var(--pop-sm);
  color: var(--ink-strong);
  text-decoration: none;
  text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* cloth stitching down the spine */
.nook-cover::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 12px;
  border-left: 2px dashed rgba(255, 255, 255, 0.55);
}

.nook-slot:nth-child(3n) .nook-cover { transform: rotate(0.9deg); }
.nook-slot:nth-child(4n + 1) .nook-cover { transform: rotate(-0.8deg); }

/* Hover only where a pointer really hovers, so the lift does not stick
   to the last cover a thumb touched. */
@media (hover: hover) {
  .nook-cover:hover {
    transform: translate(-2px, -5px) rotate(-1deg);
    box-shadow: var(--nook-lift);
  }
}

.nook-cover:focus-visible {
  /* Transparent outline rides along for Windows High Contrast, where
     the box-shadow ring is not painted. */
  outline: 3px solid transparent;
  outline-offset: 3px;
  transform: translate(-2px, -5px) rotate(-1deg);
  box-shadow: var(--shadow-focus), var(--nook-lift);
}

.nook-cover__art {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 2.5px solid var(--ink-line);
  border-radius: 50%;
  background: #fffefd;
  box-shadow: var(--nook-ledge);
}

.nook-cover__art svg { width: 62px; height: 62px; }

.nook-cover__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Book Dash jackets use their real local cover art and stay still. The
   narrow white frame reads as a library provenance card, not a rating. */
.nook-cover--book-dash {
  min-height: 292px;
  background:
    linear-gradient(90deg, var(--jacket-deep) 0 12px, transparent 12px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 55%),
    var(--jacket);
}

.nook-cover--book-dash .nook-cover__art {
  width: 112px;
  height: 112px;
  overflow: hidden;
  border-radius: var(--nook-radius-art);
  background: #fffefd;
}

.nook-cover--book-dash .nook-cover__art,
.nook-cover--book-dash:hover .nook-cover__art,
.nook-cover--book-dash:focus-visible .nook-cover__art {
  animation: none;
}

.nook-cover__editorial {
  background: #fff0e0;
  color: #6b3157;
}

/* The jackets run from lemon to teal, and white words on the lightest
   of them measured under 2:1. Rather than retune thirty jacket colors,
   the words sit on a printed spine label: half-strength ink, so the
   jacket still shows through and every title clears 4.5:1. */
.nook-cover__title,
.nook-cover__byline {
  width: 100%;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(25, 11, 38, 0.5);
}

.nook-cover__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
  color: #fffefd;
  text-wrap: balance;
}

.nook-cover__byline {
  font-size: 0.84rem;
  font-weight: 600;
  color: #fffefd;
}

.nook-cover__time {
  margin-top: auto;
  border: 1.5px solid var(--ink-line);
  border-radius: 999px;
  background: #fffefd;
  padding: 3px 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-strong);
}

.nook-cover__star {
  position: absolute;
  top: -10px;
  right: -8px;
  display: none;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid var(--ink-line);
  border-radius: 50%;
  background: var(--nook-sun);
  box-shadow: var(--pop-sm);
  font-size: 1rem;
}

.nook-cover.is-done .nook-cover__star { display: grid; }

.nook-cover__heart {
  position: absolute;
  top: -10px;
  left: -8px;
  display: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid var(--ink-line);
  border-radius: 50%;
  background: #ff4f7f;
  box-shadow: var(--pop-sm);
  color: #fffefd;
  font-size: 0.85rem;
}

.nook-cover.is-together .nook-cover__heart { display: grid; }

/* --- The StoryBeam Original seal: only the credited originals wear it.
   A gold prize rosette with the beam sparkle and an ORIGINAL ribbon,
   stuck on at a sticker angle. --------------------------------------- */
.nook-cover__original {
  position: absolute;
  top: -16px;
  left: -14px;
  width: 56px;
  height: 56px;
  transform: rotate(-9deg);
  filter: drop-shadow(2.5px 3px 0 rgba(25, 11, 38, 0.4));
  pointer-events: none;
  transition: transform 180ms ease;
}

.nook-cover__original svg { width: 100%; height: 100%; display: block; }

.nook-seal__brand,
.nook-seal__word { font-family: var(--font-display); font-weight: 700; }
.nook-seal__brand { font-size: 13px; fill: #190b26; letter-spacing: 0.5px; }
.nook-seal__word {
  font-size: 16.5px;
  fill: #fffefd;
  letter-spacing: 1px;
  stroke: #190b26;
  stroke-width: 2.6px;
  stroke-linejoin: round;
  paint-order: stroke;
}

.nook-cover:hover .nook-cover__original,
.nook-cover:focus-visible .nook-cover__original { transform: rotate(-4deg) scale(1.07); }

/* --- Reader toolbar (visible while a book is open) ---------------- */
.nook-toolbar {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: none;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ink-line);
  border-radius: var(--radius-tight);
  background: rgba(255, 254, 253, 0.97);
  box-shadow: var(--pop-sm);
  padding: 8px 10px;
}

body.is-reading .nook-toolbar { display: flex; flex-wrap: wrap; }

.nook-toolbar__title {
  flex: 1;
  min-width: 120px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Flat in the toolbar, but never at the cost of the focus ring: this is
   the keyboard exit from an open book. */
.nook-toolbar .tool-button:not(:focus-visible) { box-shadow: none; }
.nook-toolbar .tool-button:hover:not(:focus-visible) { transform: none; box-shadow: none; background: var(--surface-warm); }
.nook-toolbar .tool-button:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-size {
  display: inline-flex;
  gap: 6px;
}

.nook-size button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid var(--ink-line);
  border-radius: var(--radius-tight);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
}

/* aria-disabled rather than disabled: a real `disabled` on the focused
   button drops focus to <body>, which dumps a keyboard reader out of
   the toolbar on the second press. */
.nook-size button[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.nook-size button:not([aria-disabled="true"]):hover { background: var(--surface-warm); }
.nook-size button:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-beam {
  position: relative;
  width: 100%;
  height: 7px;
  margin-top: 2px;
  border: 1.5px solid var(--ink-line);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.nook-beam span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffc83d, #ff9826, #ff625a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}

/* --- Books: quiet paper ------------------------------------------ */
body.is-reading .nook-hero,
body.is-reading .nook-shelf { display: none; }

.nook-books { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); }

.nook-book {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  border: 2.5px solid var(--ink-line);
  border-radius: var(--radius);
  background: #fffdf4;
  box-shadow: var(--pop), var(--pop-soft);
  padding: clamp(22px, 4vw, 44px);
}

body.js .nook-book { display: none; }
body.js .nook-book.is-open { display: block; }

.nook-book__cover { position: relative; text-align: center; margin-bottom: 10px; }

.nook-book__cover .nook-cover__original {
  top: -10px;
  left: -8px;
  width: 76px;
  height: 76px;
}

.nook-book__cover .nook-cover__art {
  width: 118px;
  height: 118px;
  margin: 0 auto 14px;
  background: var(--jacket-pale, #fff6dc);
}

.nook-book__cover .nook-cover__art svg { width: 86px; height: 86px; }

.nook-book__cover h2 {
  margin: 0;
  font-size: clamp(1.65rem, 3.4vw, 2.2rem);
  color: var(--ink-strong);
  line-height: 1.15;
  text-wrap: balance;
}

.nook-book__byline {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--berry);
}

.nook-book__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.nook-book__meta li {
  border: 1.5px solid var(--ink-line);
  border-radius: 999px;
  background: #fff;
  padding: 4px 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--ink-strong);
}

.nook-book__note {
  max-width: 54ch;
  margin: 18px auto 0;
  border: 1.5px dashed var(--ink-line-soft);
  border-radius: var(--radius-tight);
  background: var(--surface-warm);
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
}

/* One micro-label treatment. Four of these used to carry the same job
   at four sizes, four tracking values and three colors. */
.nook-book__note strong,
.nook-next__label,
.nook-awards__label,
.nook-book__credits-grid dt {
  font: var(--nook-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--berry);
}

.nook-book__note strong {
  display: block;
  margin-bottom: 4px;
}

.nook-resume {
  display: none;
  margin: 18px auto 0;
  min-height: 44px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: var(--nook-sun);
  box-shadow: var(--pop-sm);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-strong);
  cursor: pointer;
}

.nook-resume.is-visible { display: block; }
.nook-resume:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-book__pages {
  max-width: 68ch;
  margin-top: 26px;
  margin-inline: auto;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  color: #2b1b3a;
  line-height: 1.72;
}

.nook-books[data-size="s"] .nook-book__pages { font-size: 1.05rem; }
.nook-books[data-size="m"] .nook-book__pages { font-size: 1.22rem; }
.nook-books[data-size="l"] .nook-book__pages { font-size: 1.45rem; line-height: 1.78; }

.nook-book__pages p { margin: 0 0 0.95em; }

.nook-book__pages > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.1em;
  line-height: 0.85;
  float: left;
  padding: 0.04em 0.12em 0 0;
  color: var(--jacket-ink, #ff625a);
}

.nook-book__pages h3 {
  margin: 1.8em 0 0.7em;
  font-size: 1.18em;
  color: var(--ink-strong);
}

/* The official Book Dash gallery pages already carry the words in the
   artwork, so these readers present the vetted local derivatives as a
   quiet facsimile instead of laying a second text layer over them. */
.nook-book--book-dash { max-width: 1120px; }

.nook-book--book-dash .nook-book__cover,
.nook-book--book-dash .nook-book__credits {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.nook-book--book-dash .nook-book__cover .nook-cover__art {
  width: min(220px, 48vw);
  height: min(220px, 48vw);
  overflow: hidden;
  border-radius: var(--nook-radius-art);
}

/* The facsimile sequence is artwork, not a measure of running text, so
   it opts out of the 68ch reading column. */
.nook-book__pages--facsimile {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 32px);
  max-width: none;
  font-family: var(--font-display);
}

.nook-facsimile-page {
  width: min(100%, 640px);
  margin: 0 auto;
}

.nook-facsimile-page--spread,
.nook-book__page--wide { width: 100%; }

.nook-facsimile-page img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink-line);
  border-radius: var(--nook-radius-art);
  background: #fff;
  box-shadow: 4px 5px 0 rgba(25, 11, 38, 0.3);
}

.nook-facsimile-page figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: center;
}

.nook-book__credits {
  margin-top: clamp(28px, 5vw, 48px);
  border: 2px solid var(--ink-line);
  border-radius: var(--radius-tight);
  background: #fff6dc;
  box-shadow: var(--pop-sm);
  padding: clamp(16px, 3vw, 26px);
  color: var(--ink);
}

.nook-book__credits-head {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
}

.nook-book__credits-logo {
  display: block;
  border: 2px solid var(--ink-line);
  border-radius: var(--nook-radius-art);
  background: #fff;
  padding: 8px;
  box-shadow: 3px 3px 0 rgba(25, 11, 38, 0.25);
}

.nook-book__credits-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.nook-book__credits h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  color: var(--ink-strong);
}

.nook-book__credits-head p,
.nook-book__credits > p { margin: 5px 0 0; line-height: 1.55; }

.nook-book__credits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 18px 0 0;
}

.nook-book__credits-grid div {
  border-top: 1px solid rgba(25, 11, 38, 0.2);
  padding-top: 8px;
}

.nook-book__credits-grid dd { margin: 2px 0 0; }

.nook-book__credits a {
  color: #5d2c85;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.nook-book__credits a:focus-visible {
  border-radius: 3px;
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-book__adaptation {
  margin-top: 16px !important;
  border-top: 1.5px dashed rgba(25, 11, 38, 0.35);
  padding-top: 14px;
  font-size: 0.84rem;
}

hr.nook-break {
  border: none;
  margin: 1.6em 0;
  text-align: center;
}

hr.nook-break::after {
  content: "\2726 \2726 \2726";
  display: block;
  color: var(--jacket-ink, #ff9826);
  font-size: 0.85rem;
  letter-spacing: 0.7em;
  padding-left: 0.7em;
}

.nook-book__end {
  margin-top: 34px;
  text-align: center;
}

.nook-book__end-art { width: 92px; height: 44px; margin: 0 auto 6px; color: var(--berry); }

.nook-book__end-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink-strong);
  margin: 0 0 18px;
}

.nook-book__end .button-secondary {
  display: inline-block;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 0.92rem;
  cursor: pointer;
}

/* --- the grown-up's Read together stamp ---------------------------- */
.nook-together {
  display: block;
  margin: 0 auto 16px;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdd7e, #ffc83d);
  box-shadow: var(--pop-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-strong);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.nook-together:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 auto 14px;
}

.nook-stamp[hidden] { display: none; }

.nook-stamp__seal { width: 86px; height: 86px; filter: drop-shadow(3px 3px 0 rgba(25, 11, 38, 0.35)); }
.nook-stamp__seal svg { width: 100%; height: 100%; }

.nook-stamp strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--berry);
}

@keyframes nook-stamp-in {
  0% { transform: scale(0.84) rotate(-6deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); }
}

.nook-stamp.is-stamping .nook-stamp__seal { animation: nook-stamp-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }

html[data-dark="on"] .nook-together { background: linear-gradient(180deg, #ffc83d, #f0ad1d); }
html[data-dark="on"] .nook-stamp strong { color: #ffb8cf; }

.nook-next {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.nook-next__label {
  width: 100%;
  margin: 0 0 2px;
}

.nook-next a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--pop-sm);
  padding: 7px 14px 7px 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-strong);
  text-decoration: none;
}

.nook-next a:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--shadow-focus);
}

.nook-next i {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink-line);
  border-radius: 6px;
  background: var(--dot, #49d2b3);
}

/* --- Footer ------------------------------------------------------- */
.nook-shell .trust-footer { margin-top: 8px; }

/* --- The original pictures ----------------------------------------- */
.nook-pic {
  margin: 1.7em auto;
  max-width: 420px;
  text-align: center;
}

/* Tap to enlarge is a real control, so it is a real button: Enter and
   Space work, it takes the global focus ring, and aria-pressed says
   out loud whether the picture is big right now. */
.nook-pic__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--nook-radius-art);
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

.nook-pic.is-zoomed .nook-pic__zoom { cursor: zoom-out; }

.nook-pic img {
  width: 100%;
  height: auto;
  padding: 7px;
  border: 2px solid var(--ink-line);
  border-radius: var(--nook-radius-art);
  background: #fffefd;
  box-shadow: var(--pop-soft);
  cursor: inherit;
  transition: transform 160ms ease;
}

.nook-pic.is-zoomed { max-width: 100%; }

.nook-pic figcaption {
  margin-top: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--berry);
}

/* --- Golden edge: the books that hold original pictures -------------- */
.nook-cover--pictures {
  outline: 3px solid rgba(255, 200, 61, 0.72);
  outline-offset: 3px;
}

/* On focus the gold edge intensifies and the sky ring lands outside it.
   This rule used to set only outline-color, which could not revive the
   `outline: none` the focus rule above it had already set, so eighteen
   of the thirty-three covers showed nothing at all on keyboard focus. */
.nook-cover--pictures:focus-visible {
  outline: 3px solid var(--nook-sun);
  outline-offset: 3px;
  box-shadow: var(--shadow-focus), var(--nook-lift);
}

.nook-cover--pictures:focus-visible .nook-cover__art { animation: nook-wiggle 480ms ease; }

.nook-ask {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--berry);
}

/* --- Reading awards -------------------------------------------------- */
.nook-awards { margin-top: 22px; }

.nook-awards__label { margin: 0 0 4px; }

.nook-awards ol {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.nook-award {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 118px;
  text-align: center;
}

.nook-award__medal {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2.5px dashed var(--ink-line-soft);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #b6adc2;
}

.nook-award__medal svg { width: 30px; height: 30px; }

.nook-award strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}

.nook-award small { font-size: 0.82rem; line-height: 1.35; color: var(--muted); }

.nook-award.is-earned .nook-award__medal {
  border: 2.5px solid var(--ink-line);
  background: linear-gradient(180deg, #ffc83d, #ffb31f);
  color: #190b26;
  box-shadow: var(--pop-sm);
  outline: 2px solid rgba(255, 200, 61, 0.72);
  outline-offset: 2px;
}

.nook-award.is-earned strong { color: var(--ink-strong); }
.nook-award.is-new .nook-award__medal { animation: nook-wiggle 600ms ease 2; }

html[data-dark="on"] .nook-award__medal { background: #2e2044; border-color: rgba(255, 244, 222, 0.3); color: #6f6383; }
html[data-dark="on"] .nook-award strong, html[data-dark="on"] .nook-award small { color: rgba(246, 236, 217, 0.6); }
html[data-dark="on"] .nook-award.is-earned strong { color: #ffe9b0; }
html[data-dark="on"] .nook-ask { color: #ffb8cf; }
html[data-dark="on"] .nook-pic img { box-shadow: var(--pop-soft); }

/* --- Little delights ------------------------------------------------ */
@keyframes nook-wiggle {
  0% { transform: rotate(0); }
  30% { transform: rotate(-5deg) scale(1.05); }
  60% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}

.nook-cover:hover .nook-cover__art,
.nook-cover:focus-visible .nook-cover__art { animation: nook-wiggle 480ms ease; }

.nook-cover__pics { margin-top: 6px; background: var(--nook-sun); }

.nook-shelf__score {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: var(--nook-sun);
  box-shadow: var(--pop-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-strong);
}

.nook-shelf__score[hidden] { display: none; }

/* Ink on the coral pill, not white: white measured 3.84:1 on #ff4f7f
   and neither of these is large text. Ink reads 5.9:1 and matches how
   the gold score pill above already handles itself. */
.nook-cover__new {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  padding: 2px 10px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: #ff4f7f;
  color: #190b26;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  box-shadow: var(--pop-sm);
}

.nook-shelf__release {
  display: inline-block;
  margin: 16px 0 14px;
  padding: 7px 14px;
  border: 2px solid var(--ink-line);
  border-radius: 999px;
  background: #ff4f7f;
  color: #190b26;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  box-shadow: var(--pop-sm);
}

html[data-dark="on"] .nook-shelf__release { border-color: rgba(255, 244, 222, 0.34); }

.nook-burst { position: relative; height: 0; }

.nook-burst i {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 11px;
  height: 11px;
  background: var(--c, #ffc83d);
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 82% 100%, 50% 76%, 18% 100%, 29% 60%, 0 38%, 37% 35%);
  animation: nook-pop 1.15s ease-out forwards;
}

@keyframes nook-pop {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(0.5) rotate(var(--rot, 180deg)); }
}

/* --- Dark pages: light words on deep plum, shelf stays lamplit ----- */
html[data-dark="on"] body {
  background:
    radial-gradient(circle, rgba(255, 200, 61, 0.18) 1.6px, transparent 2.2px) 26px 90px / 210px 190px,
    radial-gradient(circle, rgba(116, 201, 242, 0.14) 1.6px, transparent 2.2px) 130px 30px / 230px 210px,
    linear-gradient(180deg, #241536 0%, #190b26 55%, #150922 100%);
  color: #f6ecd9;
}

html[data-dark="on"] .safe-header,
html[data-dark="on"] .nook-toolbar,
html[data-dark="on"] .nook-hero,
html[data-dark="on"] .trust-footer {
  background: #241833;
  border-color: rgba(255, 244, 222, 0.32);
}

html[data-dark="on"] .brand strong,
html[data-dark="on"] .nook-hero h1,
html[data-dark="on"] .nook-shelf h2,
html[data-dark="on"] .nook-toolbar__title,
html[data-dark="on"] .trust-footer strong { color: #fff6e6; }

html[data-dark="on"] .brand small { color: #ffb8cf; }
html[data-dark="on"] .nook-hero .lede { color: #f0e4cd; }
html[data-dark="on"] .nook-shelf__hint,
html[data-dark="on"] .trust-footer p { color: rgba(246, 236, 217, 0.75); }

html[data-dark="on"] .tool-button,
html[data-dark="on"] .nook-size button,
html[data-dark="on"] .footer-chips span {
  background: #2e2044;
  border-color: rgba(255, 244, 222, 0.34);
  color: #f6ecd9;
}

html[data-dark="on"] .tool-button:hover,
html[data-dark="on"] .nook-size button:not([aria-disabled="true"]):hover { background: #3a2a52; }

html[data-dark="on"] .tool-button--mode[aria-pressed="true"],
html[data-dark="on"] .nook-size [data-nook-dark][aria-pressed="true"] {
  border-color: var(--nook-sun);
  background: #3a2a52;
  box-shadow: inset 0 0 0 1.5px var(--nook-sun);
}

html[data-dark="on"] .nook-beam { background: #190b26; border-color: rgba(255, 244, 222, 0.34); }

html[data-dark="on"] .nook-book {
  background: #261a38;
  border-color: rgba(255, 244, 222, 0.3);
}

html[data-dark="on"] .nook-book__pages { color: #f6ecd9; }
html[data-dark="on"] .nook-book__cover h2,
html[data-dark="on"] .nook-book__pages h3,
html[data-dark="on"] .nook-book__end-word { color: #fff6e6; }
html[data-dark="on"] .nook-book__byline { color: #d9b8ff; }

html[data-dark="on"] .nook-book__meta li,
html[data-dark="on"] .nook-next a,
html[data-dark="on"] .nook-book__end .button-secondary {
  background: #2e2044;
  border-color: rgba(255, 244, 222, 0.34);
  color: #f6ecd9;
}

html[data-dark="on"] .nook-book__note {
  background: #2e2044;
  border-color: rgba(255, 244, 222, 0.3);
  color: #f0e4cd;
}

html[data-dark="on"] .nook-pic img { background: #f6ecd9; border-color: rgba(255, 244, 222, 0.4); }
html[data-dark="on"] .nook-pic figcaption { color: #d9b8ff; }
html[data-dark="on"] .nook-shelf__score { background: #3a2a52; color: #ffe9b0; border-color: rgba(255, 244, 222, 0.34); }

/* The bookcase itself stays lamplit in Dark Mode on purpose: it is the
   one warm object in the room. So everything standing inside it keeps
   daylight ink. Without this, cream borders and cream dividers landed
   on a cream shelf and simply disappeared, and the collection intro
   cards floated as dark panels on a light shelf. */
html[data-dark="on"] .nook-case {
  --ink-line: rgba(25, 11, 38, 0.66);
  --ink-line-soft: rgba(25, 11, 38, 0.16);
  --ink: #2b1b3a;
  --ink-strong: #190b26;
  --muted: rgba(43, 27, 58, 0.72);
  --berry: #7d2f8f;
}

html[data-dark="on"] .nook-book__credits {
  background: #2e2044;
  border-color: rgba(255, 244, 222, 0.34);
  color: #f0e4cd;
}

html[data-dark="on"] .nook-book__credits h3 { color: #fff6e6; }

html[data-dark="on"] .nook-facsimile-page figcaption { color: rgba(246, 236, 217, 0.75); }

html[data-dark="on"] .nook-book__credits-grid div,
html[data-dark="on"] .nook-book__adaptation { border-color: rgba(255, 244, 222, 0.24); }

html[data-dark="on"] .nook-book__credits a { color: #d9b8ff; }

@media print {
  html[data-dark="on"] body, html[data-dark="on"] .nook-book { background: #fff !important; }
  html[data-dark="on"] .nook-book__pages, html[data-dark="on"] .nook-book__cover h2 { color: #000 !important; }
}

/* --- Comfort + care ----------------------------------------------- */
html[data-calm="on"] .nook-cover,
html[data-calm="on"] .nook-slot::after,
html[data-calm="on"] .nook-beam span,
html[data-calm="on"] .nook-next i,
html[data-calm="on"] .nook-book__cover .nook-cover__original,
html[data-calm="on"] .nook-book__cover .nook-cover__art {
  filter: saturate(0.22) contrast(0.97);
}

/* styles.css already greys every <img> in Calm, and a filter on the
   jacket applies to its whole subtree, so cover art was being filtered
   twice and read flatter than the drawn covers beside it. One filter,
   one owner: the jacket. */
html[data-calm="on"] .nook-cover__art img,
html[data-calm="on"] .nook-book__cover .nook-cover__art img { filter: none; }

/* --- Pointer states -------------------------------------------------
   Hover lives behind (hover: hover) so a lift does not stick to the
   last cover a thumb touched, and every control has a press state that
   pushes the sticker into the page. ---------------------------------- */
@media (hover: hover) {
  .nook-cover--pictures:hover { outline-color: var(--nook-sun); }
  .nook-resume:hover,
  .nook-together:hover,
  .nook-next a:hover { transform: translate(-1px, -2px); box-shadow: var(--nook-lift-sm); }
  .nook-pic:not(.is-zoomed) .nook-pic__zoom:hover img { transform: scale(1.015) rotate(-0.4deg); }
}

.nook-size button:not([aria-disabled="true"]):active,
.nook-resume:active,
.nook-together:active,
.nook-next a:active,
.nook-book__end .button-secondary:active {
  transform: translate(1px, 2px);
  box-shadow: var(--nook-press);
}

@media (max-width: 640px) {
  .nook-row { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .nook-cover { min-height: 196px; padding: 12px 10px 12px 20px; }
  .nook-cover__art { width: 68px; height: 68px; }
  .nook-cover__art svg { width: 50px; height: 50px; }
  .nook-cover__title { font-size: 0.92rem; }
  .nook-cover--book-dash { min-height: 272px; }
  .nook-cover--book-dash .nook-cover__art { width: 96px; height: 96px; }
  .nook-book { padding: 20px 16px 28px; }
  .nook-books[data-size="m"] .nook-book__pages { font-size: 1.13rem; }
  .nook-books[data-size="l"] .nook-book__pages { font-size: 1.3rem; }
  .nook-book--book-dash { padding-right: 10px; padding-left: 10px; }
  .nook-book__credits-head { grid-template-columns: 1fr; }
  .nook-book__credits-logo { width: min(180px, 100%); }
  .nook-book__credits-grid { grid-template-columns: 1fr; }
  .nook-facsimile-page--spread,
  .nook-book__page--wide { width: calc(100% + 8px); margin-left: -4px; }
}

/* --- One home for motion opt-outs -----------------------------------
   This lived in three separate blocks, which is exactly how the award
   medal ended up as the one animated thing on the page with no
   reduced-motion path. New animation? It gets switched off here. ----- */
@media (prefers-reduced-motion: reduce) {
  .nook-cover,
  .nook-cover__original,
  .nook-resume,
  .nook-together,
  .nook-next a,
  .nook-beam span,
  .nook-pic img { transition: none; }

  .nook-cover--pictures .nook-cover__art,
  .nook-cover:hover .nook-cover__art,
  .nook-cover:focus-visible .nook-cover__art,
  .nook-cover--pictures:focus-visible .nook-cover__art,
  .nook-stamp.is-stamping .nook-stamp__seal,
  .nook-award.is-new .nook-award__medal { animation: none; }

  .nook-cover:hover,
  .nook-cover:focus-visible { transform: none; }
  .nook-cover:hover .nook-cover__original,
  .nook-cover:focus-visible .nook-cover__original { transform: rotate(-9deg); }
  .nook-pic:not(.is-zoomed) .nook-pic__zoom:hover img { transform: none; }
  .nook-burst { display: none; }
}

/* The skip link and Escape both move focus here; no ring on a landing
   spot the reader never tabbed to. */
#main-content:focus { outline: none; }

@media print {
  .safe-header, .nook-hero, .nook-shelf, .nook-toolbar, .trust-footer,
  .nook-resume, .nook-book__end, .skip-link { display: none !important; }
  body, .nook-book { background: #fff !important; box-shadow: none !important; border: none !important; }
  body.js .nook-book { display: none !important; }
  body.js .nook-book.is-open { display: block !important; }
  body:not(.js) .nook-book { display: block !important; }
}