:root {
  --header-height: 64px;
  --atelier-paper: #fff8ed;
  --atelier-white: #ffffff;
  --atelier-ink: #24324a;
  --atelier-muted: #667085;
  --atelier-brand: #245e69;
  --atelier-brand-hover: #17444d;
  --atelier-brand-dark: #16343b;
  --atelier-terracotta: #df705d;
  --atelier-terracotta-accessible: #b94a3a;
  --atelier-gold: #f2c75c;
  --atelier-mint: #b9ddd1;
  --atelier-sky: #dfecf4;
  --atelier-safety-bg: #e5f2ed;
  --atelier-border: #e7ded2;
  --atelier-shadow: 0 18px 42px rgb(36 50 74 / 0.14);
  --atelier-shadow-soft: 0 10px 28px rgb(36 50 74 / 0.08);
  --atelier-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --atelier-sans: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --atelier-persian: "Vazirmatn", system-ui, sans-serif;
}

body {
  background: var(--atelier-paper);
  color: var(--atelier-ink);
  font-family: var(--atelier-sans);
}

body.locale-fa {
  font-family: var(--atelier-persian);
}

body.locale-fa .logo-text,
body.locale-fa .atelier-cinema-hero__copy h1,
body.locale-fa .atelier-section h2,
body.locale-fa .atelier-catalog h1,
body.locale-fa .atelier-book-detail h1,
body.locale-fa .atelier-book-detail h2,
body.locale-fa .story-step h2,
body.locale-fa .atelier-book-card h2,
body.locale-fa .atelier-book-card h3,
body.locale-fa .atelier-facts-card h3,
body.locale-fa .atelier-faq__item h3,
body.locale-fa .atelier-faq__item--collapsible summary,
body.locale-fa .footer-section h3 {
  font-family: var(--atelier-persian);
  letter-spacing: 0;
}

body.nav-open {
  overflow: hidden;
}

.main-content {
  padding-top: var(--header-height);
}

.btn--primary,
.button--primary {
  color: #fff;
  background: var(--atelier-brand);
  border-color: var(--atelier-brand);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--atelier-brand-hover);
  border-color: var(--atelier-brand-hover);
}

.btn--outline {
  color: var(--atelier-brand);
  background: transparent;
  border: 2px solid var(--atelier-brand);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  color: var(--atelier-brand);
  background: rgb(36 94 105 / 0.08);
}

.btn--warm {
  color: #fff;
  background: var(--atelier-terracotta-accessible);
  border: 2px solid var(--atelier-terracotta-accessible);
}

.btn--warm:hover,
.btn--warm:focus-visible {
  background: #9f3f33;
  border-color: #9f3f33;
}

.navbar--atelier {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgb(255 248 237 / 0.9);
  border-bottom: 1px solid rgb(231 222 210 / 0.9);
  backdrop-filter: blur(16px);
}

.nav-container--atelier,
.footer-container,
.container {
  max-width: 1200px;
}

.nav-container--atelier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0 auto;
  min-height: var(--header-height);
  padding: 10px 24px;
  gap: 20px;
  flex-wrap: nowrap;
}

.nav-start--atelier,
.nav-logo--atelier {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon--book {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  /* One source of truth with the favicon: base.html sets --brand-mark from the
     site's own brand_logo and the favicon link uses the same file. The literal
     is the fallback, so a page rendered without that variable — a legal page,
     an error page — still shows a mark. */
  background: var(--atelier-brand) var(--brand-mark, url("../images/logo-gooki.svg")) center / 100% 100% no-repeat;
}

.logo-text {
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* A shop whose mark IS its name draws that one picture and nothing else — no
   square tile, no word in type beside it. It is a drawing on its own ground
   (the Iranian shop's was cream lettering on the company blue), so it is
   rounded like the tile it replaces rather than left as a hard rectangle on
   paper. Unused since 2026-09-23 — no site declares `brand_wordmark`, because
   the one drawing that exists spells a name that shop no longer has — and kept
   because the rule is what makes putting a re-lettered one back a one-key
   change.
   Sized by HEIGHT with `width: auto`, so the file can be recut at a different
   aspect without a second number here having to be changed to match. */
.logo-wordmark {
  display: block;
  width: auto;
  height: 44px;
  border-radius: 12px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--atelier-muted);
}

.lang-switch__label {
  font-size: 0.85rem;
}

.lang-switch__select {
  border: 1px solid var(--atelier-border);
  border-radius: 999px;
  padding: 9px 14px;
  min-width: 0px;
  color: var(--atelier-ink);
  background: var(--atelier-white);
}

.nav-menu--atelier {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--atelier-ink);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  text-align: center;
}

.nav-link--quiet {
  color: var(--atelier-muted);
}

.nav-link--cta {
  color: #fff;
  background: var(--atelier-brand);
}

.nav-link--cta:hover,
.nav-link--cta:focus-visible {
  background: var(--atelier-brand-hover);
}

body.nav-compact .nav-toggle {
  display: inline-flex;
  margin-left: auto;
}

body.nav-compact .nav-menu--atelier {
  position: absolute;
  right: 24px;
  left: auto;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 36px));
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--atelier-border);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.99);
  box-shadow: 0 18px 42px rgb(36 50 74 / 0.18);
  transform-origin: top right;
}

body.nav-compact .nav-menu--atelier.active {
  display: flex;
}

body.nav-compact .nav-link {
  justify-content: flex-start;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.98rem;
}

body.nav-compact .nav-link:hover,
body.nav-compact .nav-link:focus-visible {
  background: rgb(36 94 105 / 0.08);
}

body.nav-compact .nav-link--cta {
  justify-content: center;
  margin-top: 4px;
  padding: 11px 14px;
}

body.is-rtl.nav-compact .nav-menu--atelier {
  left: 24px;
  right: auto;
  inset-inline-end: auto;
  inset-inline-start: auto;
  transform-origin: top left;
}

body.is-rtl.nav-compact .nav-toggle {
  order: -1;
  margin-left: 0;
  margin-right: 0;
}

body.is-rtl.nav-compact .nav-link {
  justify-content: flex-end;
  text-align: right;
}

.atelier-catalog,
.atelier-book-detail {
  padding-bottom: 72px;
}

.atelier-home {
  padding-bottom: 0;
}

.atelier-cinema-hero,
.atelier-section,
.atelier-catalog,
.atelier-book-detail {
  position: relative;
  padding: 48px 24px;
}

.atelier-cinema-hero {
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100svh - var(--header-height));
  min-height: 0;
  overflow: hidden;
  background: var(--atelier-brand-dark);
  isolation: isolate;
}

.atelier-cinema-hero__media,
.atelier-cinema-hero__overlay {
  position: absolute;
  inset: 0;
}

.atelier-cinema-hero__media {
  overflow: hidden;
}

.atelier-cinema-hero__video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
}

.atelier-cinema-hero__overlay {
  background:
    linear-gradient(
      90deg,
      rgb(22 52 59 / 0.92) 0%,
      rgb(22 52 59 / 0.62) 38%,
      rgb(22 52 59 / 0.12) 72%,
      transparent 88%
    );
}

.atelier-cinema-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100%;
  padding: 48px 24px;
}

.atelier-cinema-hero__copy {
  max-width: 620px;
  color: #fffdf8;
  transition: opacity 180ms linear, transform 180ms linear;
}

.atelier-cinema-hero__copy .atelier-eyebrow,
.story-step .atelier-eyebrow {
  color: var(--atelier-gold);
}

.atelier-cinema-hero__copy h1,
.atelier-section h2,
.atelier-catalog h1,
.atelier-book-detail h1,
.story-step h2 {
  margin: 0;
  font-family: var(--atelier-serif);
  letter-spacing: -0.05em;
}

.atelier-cinema-hero__copy h1 {
  font-size: clamp(2.75rem, 5vw, 4.75rem);
  line-height: 1.02;
  max-width: 11ch;
}

.atelier-section h2,
.atelier-book-detail h2,
.story-step h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.1;
}

.atelier-lead,
.story-step p {
  max-width: 60ch;
  font-size: 1.16rem;
  line-height: 1.7;
}

.atelier-cinema-hero__copy .atelier-lead {
  color: rgb(255 248 237 / 0.92);
}

.atelier-cinema-hero .btn--outline {
  color: #fffdf8;
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 248 237 / 0.8);
  backdrop-filter: blur(10px);
}

.atelier-cinema-hero .btn--outline:hover,
.atelier-cinema-hero .btn--outline:focus-visible {
  color: #fffdf8;
  background: rgb(255 255 255 / 0.18);
  border-color: #fffdf8;
}

.atelier-cinema-hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 1.5rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%);
}

.atelier-actions,
.atelier-book-card__footer,
.atelier-pill-row,
.atelier-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.atelier-actions {
  margin-top: 28px;
}

.atelier-hero-proof,
.atelier-character-list {
  margin: 24px 0 0;
  padding: 0;
}

.atelier-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  max-width: 620px;
  color: rgb(255 248 237 / 0.78);
  font-size: 0.9rem;
  font-weight: 600;
}

.atelier-step-card,
.atelier-faq__item,
.atelier-book-card {
  border: 1px solid var(--atelier-border);
  border-radius: 20px;
  box-shadow: var(--atelier-shadow-soft);
}

.story-scroll {
  position: relative;
  height: 320vh;
  margin: 0;
  background: var(--atelier-brand-dark);
}

.story-scroll__stage {
  position: sticky;
  top: var(--header-height);
  height: calc(100svh - var(--header-height));
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(210px, auto);
  overflow: hidden;
  background: var(--atelier-brand-dark);
}

.story-scroll__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 24%, rgb(242 199 92 / 0.16), transparent 24%),
    radial-gradient(circle at 82% 74%, rgb(139 198 182 / 0.18), transparent 28%),
    linear-gradient(180deg, rgb(23 47 55 / 0.98), rgb(23 47 55 / 1));
}

.story-scroll__visual,
.story-scroll__copy {
  position: relative;
  z-index: 1;
}

.story-scroll__visual {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.story-scroll__copy {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  width: min(880px, calc(100% - 48px));
  margin: 0 auto clamp(20px, 3vh, 36px);
  display: grid;
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  color: #fff8ed;
  background: rgb(13 39 46 / 0.94);
  border: 1px solid rgb(255 248 237 / 0.14);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.story-visual-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 350ms ease,
    transform 500ms ease,
    visibility 0s linear 500ms;
  pointer-events: none;
}

.story-scroll__visual .story-visual-layer {
  display: grid;
  place-items: center;
}

.story-scroll__visual .story-visual-layer--transform {
  width: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 0 clamp(8px, 2vh, 24px);
}

.story-scroll__visual .story-visual-layer--voices,
.story-scroll__visual .story-visual-layer--arrival {
  width: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 0 clamp(8px, 2vh, 24px);
}

.story-visual-layer.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.story-step {
  grid-area: 1 / 1;
  position: relative;
  inset: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 300ms ease,
    transform 420ms ease,
    visibility 0s linear 420ms;
  pointer-events: none;
}

.story-step p {
  color: rgb(255 248 237 / 0.9);
}

.story-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}

.story-step .atelier-eyebrow {
  margin: 0 0 8px;
  color: var(--atelier-gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-step h2 {
  margin: 0;
  color: #fff8ed;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.story-step > p:last-child {
  max-width: 65ch;
  margin: 12px 0 0;
  color: rgb(255 248 237 / 0.82);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.55;
}

.story-visual-layer img {
  display: block;
  width: min(860px, 82vw);
  max-width: none;
  max-height: calc(100svh - 64px - 230px);
  height: auto;
  object-fit: contain;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.24);
}

.story-visual-layer--book img {
  transform: translateX(-5vw);
}

.story-visual-layer--voices img {
  width: min(980px, 92vw);
}

.story-visual-layer--arrival img {
  width: min(960px, 90vw);
  transform: translateX(4vw);
}

.story-book-showcase {
  position: relative;
  width: min(86%, 640px);
  min-height: 520px;
}

.story-book-showcase__item {
  position: absolute;
  margin: 0;
  width: 44%;
  padding: 14px;
  border-radius: 28px;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 248 237 / 0.12);
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.22);
}

/* These are book covers, and every book is printed square — 4/5 + `cover` cut the
   title off the same jackets the catalog card was cutting. */
.story-book-showcase__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: linear-gradient(180deg, #fffdf8, #f6efe0);
  border-radius: 18px;
}

.story-book-showcase__item figcaption {
  display: grid;
  gap: 4px;
  padding-top: 14px;
}

.story-book-showcase__item strong,
.story-transform-card__item figcaption,
.story-arrival-card__note {
  color: #fff8ed;
}

.story-book-showcase__item span {
  color: rgb(255 248 237 / 0.7);
  font-size: 0.92rem;
}

.story-book-showcase__item--story {
  left: 0;
  top: 12%;
  transform: rotate(-8deg);
}

.story-book-showcase__item--math {
  right: 4%;
  top: 0;
  transform: rotate(6deg);
}

.story-book-showcase__item--language {
  left: 28%;
  bottom: 0;
  transform: rotate(-2deg);
}

.story-transform-card {
  width: 100%;
  max-width: none;
  height: 100%;
  display: grid;
  align-items: end;
}

.story-transform-card__media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  grid-template-areas:
    "source-frame arrow result-frame"
    "source-caption . result-caption";
  align-items: start;
  width: min(100%, 880px);
  margin: 0 auto;
  column-gap: clamp(12px, 2vw, 20px);
  row-gap: 14px;
}

.story-transform-card__frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 22px 48px rgb(0 0 0 / 0.22);
}

.story-transform-card__frame--source {
  grid-area: source-frame;
}

.story-transform-card__frame--result {
  grid-area: result-frame;
}

.story-transform-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.story-visual-layer--transform img {
  transform: none;
}

.story-transform-card__caption {
  max-width: 15ch;
  min-height: 2.8em;
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
  font-weight: 700;
  color: #fff8ed;
}

.story-transform-card__caption--source {
  grid-area: source-caption;
}

.story-transform-card__caption--result {
  grid-area: result-caption;
}

.story-transform-card__caption {
  max-width: 18ch;
}

.story-transform-card__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 54px;
  height: 54px;
  padding-bottom: 4px;
  border-radius: 999px;
  background: rgb(242 199 92 / 0.18);
  border: 1px solid rgb(242 199 92 / 0.25);
  color: var(--atelier-gold);
  font-size: 1.55rem;
  font-weight: 700;
}

.story-voice-card {
  position: relative;
  width: min(100%, 680px);
  margin: 0 auto;
  padding: 28px;
  border-radius: 30px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 248 237 / 0.12);
}

.story-voice-card__badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgb(139 198 182 / 0.18);
  color: #fff8ed;
  font-size: 0.84rem;
  font-weight: 700;
}

.story-voice-track + .story-voice-track {
  margin-top: 16px;
}

.story-voice-track__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: #fff8ed;
}

.story-voice-track__meta strong {
  font-size: 0.98rem;
}

.story-voice-track__meta span {
  color: rgb(255 248 237 / 0.68);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.story-voice-track__body {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
}

.story-voice-track__body img {
  width: 72px;
  min-width: 72px;
  height: 72px;
  max-width: none;
  margin: 0;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  transform: none;
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.22);
}

.story-visual-layer--voices .story-voice-track__body img {
  width: 72px;
  min-width: 72px;
  height: 72px;
  max-width: none;
  margin: 0;
  transform: none;
}

.story-voice-chart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  height: 58px;
  padding: 0 2px;
}

.story-voice-chart span {
  display: block;
  width: 10px;
  border-radius: 999px;
  background: rgb(255 248 237 / 0.92);
  opacity: 0.95;
}

.story-voice-chart span:nth-child(1) { height: 14px; }
.story-voice-chart span:nth-child(2) { height: 10px; }
.story-voice-chart span:nth-child(3) { height: 18px; }
.story-voice-chart span:nth-child(4) { height: 34px; }
.story-voice-chart span:nth-child(5) { height: 52px; }
.story-voice-chart span:nth-child(6) { height: 42px; }
.story-voice-chart span:nth-child(7) { height: 18px; }
.story-voice-chart span:nth-child(8) { height: 56px; }
.story-voice-chart span:nth-child(9) { height: 46px; }
.story-voice-chart span:nth-child(10) { height: 24px; }
.story-voice-chart span:nth-child(11) { height: 30px; }
.story-voice-chart span:nth-child(12) { height: 36px; }
.story-voice-chart span:nth-child(13) { height: 22px; }
.story-voice-chart span:nth-child(14) { height: 28px; }
.story-voice-chart span:nth-child(15) { height: 48px; }
.story-voice-chart span:nth-child(16) { height: 20px; }
.story-voice-chart span:nth-child(17) { height: 16px; }
.story-voice-chart span:nth-child(18) { height: 26px; }
.story-voice-chart span:nth-child(19) { height: 38px; }
.story-voice-chart span:nth-child(20) { height: 34px; }
.story-voice-chart span:nth-child(21) { height: 44px; }
.story-voice-chart span:nth-child(22) { height: 52px; }
.story-voice-chart span:nth-child(23) { height: 40px; }
.story-voice-chart span:nth-child(24) { height: 58px; }
.story-voice-chart span:nth-child(25) { height: 28px; }

.story-voice-chart--warm span {
  background: rgb(242 199 92 / 0.94);
}

.story-voice-chart--soft span {
  background: rgb(139 198 182 / 0.94);
}

.story-voice-card__mic {
  position: absolute;
  right: 24px;
  top: 24px;
  color: var(--atelier-terracotta);
  font-size: 1rem;
  text-shadow: 0 0 18px rgb(216 98 79 / 0.7);
}

.story-arrival-card {
  width: min(100%, 880px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 30px;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 248 237 / 0.12);
}

.story-arrival-card__frame {
  overflow: hidden;
  border-radius: 24px;
}

.story-arrival-card img {
  display: block;
  width: 100%;
  max-width: none;
  transform: none;
}

.story-visual-layer--arrival .story-arrival-card img {
  width: 100%;
  max-width: none;
  height: auto;
  transform: none;
}

@supports not (backdrop-filter: blur(1px)) {
  .story-scroll__copy {
    background: #102f37;
  }
}

.story-arrival-card__note {
  max-width: 52ch;
  margin: 0 auto;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.atelier-proof {
  background: linear-gradient(180deg, var(--atelier-paper), #fffdf8);
}

.family-proof {
  background: #fffdf8;
}

.family-proof__header {
  max-width: 780px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.family-proof__header h2 {
  max-width: 16ch;
  margin: 8px 0 20px;
  line-height: 1.03;
  text-wrap: balance;
}

.family-proof__header .atelier-lead {
  max-width: 65ch;
  margin: 0;
}

.family-proof__gallery {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: auto auto;
  gap: 24px;
  align-items: stretch;
}

.family-proof__tile {
  margin: 0;
}

.family-proof__tile--photo {
  grid-column: 1;
  grid-row: 1;
}

.family-proof__tile--character {
  grid-column: 1;
  grid-row: 2;
}

.family-proof__tile--page {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.family-proof__image {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 34px rgb(38 51 71 / 0.08);
}

.family-proof__tile--photo .family-proof__image,
.family-proof__tile--character .family-proof__image {
  aspect-ratio: 4 / 3;
}

.family-proof__tile--page .family-proof__image {
  height: 100%;
  min-height: 100%;
  background: var(--atelier-sky);
}

.family-proof__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-proof__tile--page .family-proof__image img {
  object-fit: cover;
}

.family-proof__tile figcaption {
  display: grid;
  gap: 4px;
  padding-top: 14px;
}

.family-proof__tile figcaption strong {
  color: var(--atelier-ink);
  font-size: 1.05rem;
}

.family-proof__tile figcaption span {
  color: var(--atelier-muted);
}

.atelier-proof__grid,
.atelier-delivery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.atelier-proof__copy {
  grid-column: span 6;
}

.atelier-proof__media {
  grid-column: span 6;
}

.atelier-proof__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.atelier-delivery {
  background: var(--atelier-safety-bg);
}

.atelier-delivery__grid > :first-child {
  grid-column: span 7;
}

.atelier-delivery__grid > :last-child {
  grid-column: span 5;
}

.atelier-section__heading {
  max-width: 68ch;
  margin-bottom: 28px;
}

.atelier-section__heading--split {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.atelier-section__heading--split {
  width: 100%;
  max-width: none;
  align-items: end;
  gap: 24px;
}

.atelier-section__heading--split > * {
  margin: 0;
}

.atelier-eyebrow {
  margin: 0 0 14px;
  color: var(--atelier-brand);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.atelier-section h2,
.atelier-catalog h1,
.atelier-book-detail h1 {
  color: var(--atelier-ink);
}

.atelier-lead,
.atelier-book-card p,
.atelier-step-card p,
.atelier-faq__item p,
.atelier-facts-card p,
.atelier-proof__photo-card p,
.atelier-proof__illustration-card p,
.atelier-proof__sample p,
.atelier-book-detail__note,
.atelier-muted {
  color: var(--atelier-muted);
}

.atelier-steps__grid,
.atelier-faq__grid,
.atelier-book-grid {
  display: grid;
  gap: 28px;
}

.atelier-steps__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atelier-step-card,
.atelier-faq__item,
.atelier-book-card,
.atelier-proof__photo-card,
.atelier-proof__illustration-card,
.atelier-proof__sample {
  background: rgb(255 255 255 / 0.86);
}

.atelier-step-card,
.atelier-faq__item {
  padding: 24px;
}

.atelier-faq__item--collapsible {
  padding: 0;
  overflow: hidden;
}

.atelier-faq__grid {
  max-width: 900px;
  margin-inline: auto;
  gap: 0;
  border-top: 1px solid var(--atelier-border);
}

.atelier-faq__item {
  border: 0;
  border-bottom: 1px solid var(--atelier-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.atelier-faq__item--collapsible summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  color: var(--atelier-ink);
  font-family: var(--atelier-sans);
  font-size: 1.05rem;
  line-height: 1.2;
}

.atelier-faq__item--collapsible summary::-webkit-details-marker {
  display: none;
}

.atelier-faq__item--collapsible summary::after {
  content: "+";
  flex: none;
  color: var(--atelier-brand);
  font-family: var(--atelier-sans);
  font-size: 1.7rem;
  font-weight: 400;
}

.atelier-faq__item--collapsible[open] summary::after {
  content: "−";
}

.atelier-faq__item--collapsible p {
  margin: 0;
  padding: 0 4px 20px;
}

.atelier-step-card__number {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 999px;
  color: var(--atelier-brand-dark);
  background: rgb(242 199 92 / 0.52);
  font-weight: 800;
}

.atelier-book-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atelier-book-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

/* Every book in the catalog is printed SQUARE (17 x 17 cm), so the card frame is
   square too: a square jacket in a 4:3 frame was being cropped top and bottom by
   `object-fit: cover`, which cut the title off the covers that carry one. */
.atelier-book-card__media {
  display: block;
  padding: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf8, #f6efe0);
}

.atelier-book-card__media img,
.atelier-proof__photo-card img,
.atelier-proof__illustration-card img,
.atelier-proof__sample img {
  display: block;
  width: 100%;
  border-radius: 20px;
}

/* `contain`, not `cover`: the whole cover has to be visible. A book whose art is
   not square is letterboxed onto the card's paper rather than cut into. */
.atelier-book-card__media img {
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

@supports not (aspect-ratio: 1 / 1) {
  .atelier-book-card__media {
    position: relative;
    height: 0;
    padding-top: 100%;
  }

  .atelier-book-card__media img,
  .atelier-book-card__media .book-card__placeholder {
    position: absolute;
    inset: 0;
    height: 100%;
  }
}

.atelier-book-card__body {
  flex: 1;
  display: grid;
  gap: 12px;
  padding: 20px;
}

.atelier-book-card__category,
.atelier-book-card__meta {
  margin: 0;
  color: var(--atelier-muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.atelier-book-card__description {
  margin: 0;
}

.atelier-book-card h2,
.atelier-book-card h3,
.atelier-facts-card h3,
.atelier-faq__item h3 {
  margin: 0;
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.45rem;
  line-height: 1.2;
}

.atelier-book-card__facts,
.atelier-facts-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.atelier-book-card__facts div,
.atelier-facts-card dl div {
  padding: 14px;
  border-radius: 18px;
  background: rgb(220 234 244 / 0.58);
}

.atelier-book-card__facts dt,
.atelier-facts-card dt {
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--atelier-muted);
}

.atelier-book-card__facts dd,
.atelier-facts-card dd {
  margin: 0;
  color: var(--atelier-ink);
  font-weight: 800;
}

.atelier-price {
  color: var(--atelier-ink);
  font-size: 1.2rem;
}

.atelier-pill,
.atelier-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.atelier-pill {
  color: var(--atelier-brand-dark);
  border-color: rgb(36 94 105 / 0.22);
  background: rgb(223 236 244 / 0.45);
}

.atelier-pill--soft {
  color: #6b5500;
  border-color: rgb(242 199 92 / 0.55);
  background: rgb(255 240 184 / 0.45);
}

.atelier-badge {
  color: #2c6154;
  border-color: rgb(40 89 78 / 0.2);
  background: rgb(220 239 232 / 0.5);
}

.atelier-text-link {
  color: var(--atelier-brand);
  font-weight: 800;
}

.atelier-proof__sample {
  margin-top: 24px;
}

.atelier-proof__photo-card,
.atelier-proof__illustration-card,
.atelier-proof__sample {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.atelier-proof__photo-card,
.atelier-proof__illustration-card {
  display: flex;
  flex-direction: column;
}

.atelier-proof__copy {
  display: block;
}

.atelier-proof__photo-card img,
.atelier-proof__illustration-card img,
.atelier-proof__sample img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

.atelier-proof__label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--atelier-ink);
  font-weight: 800;
}

.atelier-safety-note {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--atelier-border);
}

.atelier-facts-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.atelier-facts-card dl {
  gap: 0 32px;
  margin: 0;
}

.atelier-facts-card dl div {
  padding: 16px 0;
  border-bottom: 1px solid rgb(38 51 71 / 0.16);
  border-radius: 0;
  background: transparent;
}

.atelier-catalog__hero {
  max-width: 64ch;
  margin-bottom: 32px;
}

.atelier-character-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--atelier-border);
}

.atelier-character-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.book-card__placeholder {
  min-height: 240px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fffdf9, #f2e8d7);
}

.footer {
  color: #fff8ed;
  background: var(--atelier-ink);
  border-top: 1px solid rgb(255 255 255 / 0.06);
}

.atelier-finale {
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgb(242 199 92 / 0.12), transparent 24%),
    linear-gradient(180deg, #245e69, #245e69);
}

.atelier-finale__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

.atelier-finale__copy {
  color: #fff8ed;
}

.atelier-finale__copy .atelier-eyebrow {
  color: var(--atelier-gold);
}

.atelier-finale__copy h2,
.atelier-finale__copy .atelier-lead {
  color: inherit;
}

.atelier-finale__cards {
  display: grid;
  gap: 18px;
}

.atelier-finale__card {
  padding: 22px;
  border: 1px solid rgb(255 248 237 / 0.14);
  border-radius: 24px;
  background: rgb(255 255 255 / 0.06);
}

.atelier-finale__card strong {
  display: block;
  margin-bottom: 10px;
  color: #fff8ed;
  font-size: 1.05rem;
}

.atelier-finale__card p {
  margin: 0;
  color: rgb(255 248 237 / 0.8);
}

.footer-container {
  margin: 0 auto;
  padding: 48px 24px 24px;
}

.footer a,
.footer p,
.footer h3,
.footer .footer-email-link,
.footer .footer-link-button {
  color: inherit;
}

.footer-section h3 {
  font-family: var(--atelier-serif);
}

@media (prefers-reduced-motion: reduce) {
  .story-scroll {
    height: auto;
  }

  .story-scroll__stage {
    position: relative;
    top: 0;
    height: auto;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .story-visual-layer,
  .story-step {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-bottom: 18px;
  }

  .story-scroll__visual,
  .story-scroll__copy {
    display: grid;
    gap: 16px;
  }
}

@media (max-width: 1080px) {
  .atelier-book-grid,
  .atelier-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .atelier-proof__copy,
  .atelier-proof__media {
    grid-template-columns: 1fr;
    grid-column: span 12;
  }

  .atelier-delivery__grid > :first-child,
  .atelier-delivery__grid > :last-child {
    grid-column: span 12;
  }

  .atelier-finale__grid {
    grid-template-columns: 1fr;
  }

  .story-book-showcase {
    min-height: 480px;
  }

  .family-proof__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .family-proof__tile--photo,
  .family-proof__tile--character,
  .family-proof__tile--page {
    grid-column: auto;
    grid-row: auto;
  }

  .family-proof__tile--page .family-proof__image {
    min-height: 0;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .story-step h2 {
    font-size: 1.65rem;
  }

  .story-step > p:last-child {
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

@media (max-width: 1180px) {
  .nav-container--atelier {
    padding: 14px 18px;
  }

  .logo-wordmark {
    height: 36px;
  }

  .lang-switch__label {
    display: none;
  }

  .lang-switch__select {
    min-width: 0px;
    padding: 8px 12px;
  }

  .atelier-cinema-hero,
  .atelier-section,
  .atelier-catalog,
  .atelier-book-detail {
    padding: 32px 18px;
  }

  .family-proof__header h2 {
    max-width: 11ch;
  }

  .atelier-proof__media,
  .atelier-book-grid,
  .atelier-steps__grid,
  .atelier-faq__grid,
  .atelier-book-card__facts,
  .atelier-facts-card dl {
    grid-template-columns: 1fr;
  }

  .atelier-section__heading--split,
  .atelier-book-card__footer,
  .atelier-character-list li {
    display: block;
  }

  .atelier-cinema-hero {
    height: calc(100svh - var(--header-height));
  }

  .atelier-cinema-hero__overlay {
    background:
      linear-gradient(
        180deg,
        rgb(23 47 55 / 0.15) 10%,
        rgb(23 47 55 / 0.85) 78%,
        rgb(23 47 55 / 0.95) 100%
      );
  }

  .atelier-cinema-hero__video {
    width: 114.3%;
    height: 100%;
    object-position: 58% center;
  }

  .atelier-cinema-hero__content {
    align-items: end;
    padding-bottom: 7rem;
  }

  .atelier-cinema-hero__copy h1 {
    max-width: 12ch;
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .atelier-actions {
    display: grid;
  }

  .atelier-actions .btn {
    width: 100%;
  }

  .family-proof__image {
    border-radius: 18px;
  }

  .atelier-finale__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .story-scroll {
    height: 280vh;
  }

  .story-scroll__stage {
    top: var(--header-height);
    height: calc(100svh - var(--header-height));
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .story-scroll__visual {
    min-width: 0;
  }

  .story-scroll__copy {
    width: 100%;
    max-height: 46svh;
    margin: 0;
    padding: 22px 20px 26px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    background: rgb(13 39 46 / 0.97);
    overflow-y: auto;
  }

  .story-book-showcase {
    width: 100%;
    min-height: 380px;
  }

  .story-book-showcase__item {
    width: 48%;
    padding: 10px;
  }

  .story-scroll__visual .story-visual-layer--transform {
    padding-bottom: 8px;
  }

  .story-transform-card__media {
    grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
    grid-template-areas:
      "source-frame arrow result-frame"
      "source-caption . result-caption";
    width: min(100%, 640px);
    column-gap: 10px;
    row-gap: 10px;
    padding-inline: 8px;
  }

  .story-transform-card__arrow {
    position: relative;
    inset: auto;
    align-self: center;
    justify-self: center;
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
    padding-bottom: 4px;
  }

  .story-transform-card__caption {
    min-height: 3.2em;
    max-width: 12ch;
    font-size: 0.95rem;
  }

  .story-voice-card {
    width: min(100%, 640px);
    padding: 20px;
  }

  .story-voice-track__meta {
    gap: 10px;
  }

  .story-voice-track__body {
    grid-template-columns: 58px 1fr;
    gap: 10px;
  }

  .story-voice-track__body img {
    width: 58px;
    min-width: 58px;
    height: 58px;
    max-width: none;
    margin: 0;
    transform: none;
  }

  .story-visual-layer--voices .story-voice-track__body img {
    width: 58px;
    min-width: 58px;
    height: 58px;
    max-width: none;
    transform: none;
  }

  .story-voice-chart {
    gap: 5px;
  }

  .story-voice-chart span {
    width: 8px;
  }

  .story-arrival-card {
    width: min(100%, 640px);
    padding: 16px;
    gap: 12px;
  }

  .story-arrival-card__note {
    max-width: 38ch;
    font-size: 0.92rem;
  }

  .story-visual-layer img {
    width: min(560px, 125vw);
    max-width: none;
    max-height: calc(100svh - 64px - 260px);
    transform: translateX(-8vw);
  }

  .story-step h2 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .story-step > p:last-child {
    margin-top: 10px;
    font-size: 0.94rem;
  }
}

@media (max-width: 760px) and (max-height: 540px) {
  .story-scroll {
    height: auto;
  }

  .story-scroll__stage {
    position: relative;
    top: 0;
    height: auto;
  }

  .story-scroll__visual {
    min-height: 320px;
  }

  .story-scroll__copy {
    max-height: none;
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   Book categories — the browsing axis (/categories, ?category= on /books).
   Uses the atelier tokens only, so a category page inherits the storefront's
   palette, radii and shadows rather than defining a second look.
   --------------------------------------------------------------------------- */

.atelier-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.atelier-category-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--atelier-border);
  border-radius: 18px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.atelier-category-card:hover,
.atelier-category-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--atelier-shadow);
}

.atelier-category-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.atelier-category-card__title {
  margin: 0;
  color: var(--atelier-ink);
  font-size: 1.35rem;
}

.atelier-category-card__blurb {
  margin: 0;
  color: var(--atelier-muted);
}

/* Three covers, slightly overlapped, as a hint of what is inside the category.
   Decorative — the count beneath it is the real information. */
.atelier-category-card__covers {
  display: flex;
  margin-top: 6px;
}

/* Square, like the books themselves — a 64x48 thumb of a square cover crops the
   title off the very jacket the stack is there to show. */
.atelier-category-card__covers img {
  width: 56px;
  height: 56px;
  border: 2px solid var(--atelier-white);
  border-radius: 10px;
  object-fit: cover;
  box-shadow: var(--atelier-shadow-soft);
}

.atelier-category-card__covers img + img {
  margin-inline-start: -16px;
}

.atelier-category-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}

/* Filter row on /books ---------------------------------------------------- */

.atelier-category-filter {
  margin-bottom: 28px;
}

.atelier-category-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.atelier-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--atelier-border);
  border-radius: 999px;
  background: var(--atelier-white);
  color: var(--atelier-brand-dark);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.atelier-chip:hover,
.atelier-chip:focus-visible {
  border-color: var(--atelier-brand);
  background: var(--atelier-sky);
}

.atelier-chip.is-active {
  border-color: var(--atelier-brand);
  background: var(--atelier-brand);
  color: var(--atelier-white);
}

.atelier-chip--lg {
  min-height: 48px;
  padding: 10px 20px;
  font-size: 1.02rem;
}

.atelier-chip__count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgb(36 50 74 / 0.09);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.atelier-chip.is-active .atelier-chip__count {
  background: rgb(255 255 255 / 0.24);
}

/* Category links on a book card and on the book detail page ---------------- */

.atelier-category-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.atelier-category-links__label {
  color: var(--atelier-muted);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.atelier-category-links__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border: 1px solid var(--atelier-border);
  border-radius: 999px;
  color: var(--atelier-brand);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}

.atelier-category-links__item:hover,
.atelier-category-links__item:focus-visible {
  border-color: var(--atelier-brand);
  background: var(--atelier-sky);
}

.atelier-category-links--detail {
  margin-top: 16px;
}

/* The Persian face is set on headings elsewhere in this sheet; a category
   heading is a heading like any other. */
body.locale-fa .atelier-category-card__title {
  font-family: var(--atelier-persian);
}

@media (max-width: 1080px) {
  .atelier-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .atelier-category-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Book detail page
   The old layout put the book's own pictures below two columns of metadata, and
   the reader's thumbnail strip had no layout rule at all — so five page buttons
   stacked full width and the page ran to four screens of the same spread. It is
   now: the cover, the pitch and the price above the fold; the sample spreads in
   one reader whose strip IS its navigation; the facts once, at the bottom.
   --------------------------------------------------------------------------- */

.book-page__hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px;
  align-items: center;
}

.book-page__cover-figure {
  margin: 0;
}

.book-page__cover {
  display: block;
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgb(36 50 74 / 0.18);
}

.book-page__intro > * {
  margin-inline: 0;
}

.atelier-book-detail h1 {
  margin-bottom: 12px;
}

.book-page__intro .atelier-lead {
  margin: 0 0 20px;
  max-width: 46ch;
}

/* "Published as <story name>" — the words on the cover shown two inches to the
   left, so the heading and the artwork do not read as two different books. */
.book-page__story-title {
  margin: -6px 0 18px;
  color: var(--atelier-muted);
  font-size: 0.95rem;
}

.book-page__story-title em {
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.1rem;
  font-style: italic;
}

.book-page__tags {
  margin-bottom: 18px;
}

/* The buying decision, kept together: price, the one line that says what is
   being bought, the button, and what happens after it. */
.book-page__buy {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--atelier-border);
  border-radius: 20px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

.book-page__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 16px;
}

.book-page__price .atelier-price {
  font-family: var(--atelier-serif);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.book-page__price span {
  color: var(--atelier-muted);
  font-size: 0.95rem;
}

.book-page__buy .btn {
  width: 100%;
  justify-content: center;
}

.book-page__buy .atelier-book-detail__note {
  margin: 12px 0 0;
  font-size: 0.88rem;
  text-align: center;
}

.book-page__inside {
  margin-top: 64px;
}

/* "What a … book is" — the product explained, above the sample spreads.
   Paper-coloured and bordered rather than a plain run of text: it is an
   aside about the product, not more copy about this title. */
.book-about {
  margin-top: 56px;
  padding: 28px 30px;
  border: 1px solid var(--atelier-border);
  border-radius: 18px;
  background: var(--atelier-paper);
}

.book-about__title {
  margin: 0 0 8px;
  font-family: var(--atelier-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--atelier-ink);
}

.book-about__lead {
  margin: 0 0 22px;
  max-width: 62ch;
  color: var(--atelier-muted);
  line-height: 1.65;
}

.book-about__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-about__points li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* The rule sits at the START of the line, so it follows the page's own
     direction and lands on the right-hand side of a Persian page. */
  border-inline-start: 3px solid var(--atelier-mint);
  padding-inline-start: 14px;
}

.book-about__points strong {
  color: var(--atelier-ink);
  font-size: 0.98rem;
}

.book-about__points span {
  color: var(--atelier-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .book-about {
    padding: 22px 18px;
  }
}

.book-page__heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--atelier-border);
}

/* A section heading, not a hero: the old one inherited the 3.25rem display size
   and wrapped "Inside this book" onto two lines in a half-width column. */
.atelier-book-detail .book-page__heading h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.book-page__heading p {
  margin: 0;
  font-size: 0.95rem;
}

/* The sample's own language, above the reader rather than inside its dark
   panel: it is a question about the BOOK the customer would receive, not a
   control of the picture viewer, and the same row carries the sentence that
   says so — the shop's language and the copy's language are two axes, and this
   is the one place on the storefront where a visitor can feel the difference. */
.book-reader__lang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  color: var(--atelier-muted);
}

.book-reader__lang-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--atelier-ink);
}

.book-reader__lang select {
  border: 1px solid var(--atelier-border);
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--atelier-ink);
  background: var(--atelier-white);
}

/* It explains the control beside it, so on a narrow screen it belongs under the
   control and not squeezed alongside it. */
.book-reader__lang-hint {
  flex: 1 1 260px;
  font-size: 0.85rem;
  line-height: 1.35;
}

.book-reader {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, #1f4b57, #17383f);
  box-shadow: 0 18px 40px rgb(23 47 55 / 0.18);
}

.book-reader__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.06);
}

.book-reader__image {
  display: block;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 8px;
}

.book-reader__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  margin: 14px 2px 0;
  color: rgb(255 248 237 / 0.9);
  font-size: 0.95rem;
}

.book-reader__counter {
  color: rgb(255 248 237 / 0.6);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* The strip is the navigation. It scrolls rather than wraps, so a longer sample
   never turns the reader into a wall of pages.

   `overflow-x` clips at the PADDING box, and a thumb's selected ring is drawn
   OUTSIDE its border box — so with no padding the ring of whichever thumb sits
   at an edge of the strip is sliced off. It is not a rare case: the strip opens
   on page one, and page one is the first flex item, which is the right-hand edge
   on a Persian shop and the left-hand one everywhere else. The top 2px went the
   same way; only the bottom had room, and only by accident. The padding makes
   that room on all four sides and the negative inline margin gives it back, so
   the thumbs still line up with the stage above them. */
.book-reader__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  margin-inline: -4px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Every page gets an edge, not just the open one. The background sits BEHIND an
   opaque image and so was never visible: on the dark panel a night-time spread
   simply bled into it and a reader could not see where one page stopped and the
   next began. The hairline is the book's own cream so the strip reads as a row
   of pages; the open one keeps the gold. */
.book-reader__thumb {
  flex: 0 0 auto;
  width: 128px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: 0 0 0 1px rgb(255 248 237 / 0.25);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms linear, box-shadow 140ms linear;
}

/* The whole spread, not a crop of its top: a cropped 2:1 thumbnail is a strip of
   sky, and every page in a book then looks like every other. */
.book-reader__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.book-reader__thumb:hover,
.book-reader__thumb:focus-visible {
  opacity: 0.9;
}

.book-reader__thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--atelier-gold);
}

/* The rest of the book is behind an account, so the band says which part of it
   the reader is holding. It sits UNDER the reader, on the paper rather than on
   the reader's dark panel: it is about the shop, not about the page on screen. */
.book-reader-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 18px;
  padding: 18px 22px;
  border: 1px solid var(--atelier-border);
  border-radius: 18px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

.book-reader-more__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: min(100%, 320px);
  flex: 1 1 320px;
}

.book-reader-more__text strong {
  font-size: 1.05rem;
}

.book-reader-more__text span {
  font-size: 0.95rem;
  opacity: 0.8;
}

.book-reader-more__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 760px) {
  .book-reader-more__actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

.book-page__facts {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px;
  margin-top: 56px;
  align-items: start;
}

@media (max-width: 1180px) {
  .book-page__hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .book-page__cover-figure {
    max-width: 420px;
  }

  .book-page__facts {
    grid-template-columns: 1fr;
  }

  .book-reader__image {
    max-height: none;
  }

  .book-page__heading,
  .book-reader__caption {
    display: flex;
  }
}

@media (max-width: 760px) {
  .book-reader {
    padding: 12px;
  }

  .book-reader__thumb {
    width: 96px;
  }
}

/* ---------------------------------------------------------------------------
   Book detail: the facts, and the band after them

   The facts and the roles were two unbounded columns of hairline rules sitting
   straight on the paper — the page's last impression was a specification sheet.
   They are cards now, in the same white-on-paper idiom as the buy box above
   them, with the facts as tiles and each role carrying the initial of the person
   the customer's own photograph will replace.

   Under them is the thing the page was missing: the book does not end on its
   last spread. `front_matter` lets it carry notes pages between the last spread
   and the imprint — things to try together, and a page for the adult reading it
   — and the sample reader excludes matter outright, so until now the only way to
   read one was to own the book. Excerpted there, warm ground, and the buy button
   sitting in it: the page now ends on what a family gets to DO with the book.
   --------------------------------------------------------------------------- */

.book-page__facts .atelier-facts-card {
  padding: 28px 30px;
  border: 1px solid var(--atelier-border);
  border-radius: 26px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

.book-page__facts .atelier-facts-card h3 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--atelier-border);
}

.book-facts__blurb {
  margin: 16px 0 0;
  color: var(--atelier-muted);
}

.book-page__facts .atelier-facts-card dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 0;
}

/* Tiles rather than hairlines: inside a white card a ruled list reads as a form,
   and half of these values are one word long. Only the room and the corners are
   set here — the tint and the hairline are the design layer's one chip
   treatment, and a second one is exactly what it exists to stop. */
.book-page__facts .atelier-facts-card dl div {
  padding: 12px 14px;
  border-radius: 14px;
}

.book-page__facts .atelier-facts-card dt {
  margin-bottom: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-page__facts .atelier-facts-card dd {
  font-size: 0.98rem;
  line-height: 1.3;
}

.book-roles .atelier-character-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 0;
}

.book-roles .atelier-character-list li:first-child {
  padding-top: 18px;
}

/* No face has been uploaded yet — that is the whole point of the card — so the
   role is stood in for by its initial rather than by an empty avatar. */
.book-roles__initial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--atelier-safety-bg);
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
}

.book-roles__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.book-roles__who strong {
  line-height: 1.2;
}

.book-roles__who span {
  color: var(--atelier-muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   What the customer chooses, shown as the pictures they will choose from.

   The order form has rendered these as swatch chips and prop tiles for a while;
   the shop window never named a single choice, so the one thing that makes a
   copy different from the sample spreads above it was invisible until after
   checkout. Display only — the control that submits lives on the order form.
   --------------------------------------------------------------------------- */
.book-choices {
  border-top: 1px solid var(--atelier-border);
}

.book-choices__heading {
  max-width: 52ch;
  margin-bottom: 28px;
}

.book-choices__heading h2 {
  margin: 6px 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.15;
}

.book-choices__heading .atelier-lead {
  margin: 14px 0 0;
}

/* The band is three groups now — the people, the pictures, the copy itself —
   because the order form asks three different kinds of question and only the
   middle one was ever shown here. Each group keeps the same card grid, so a
   person card and a colour card are visibly the same kind of object: a thing
   you decide. */
.book-choices__group + .book-choices__group {
  margin-top: 44px;
}

.book-choices__group-title {
  margin: 0;
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.38rem);
  line-height: 1.2;
}

.book-choices__group-lead {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--atelier-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.book-choices__group-title + .book-choices__grid,
.book-choices__group-lead + .book-choices__grid {
  margin-top: 18px;
}

.book-choices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 18px;
  /* Every card is as tall as its row. Stretching used to print a card-sized area
     of nothing beside a card holding six colours — but that was when a colour
     card ran six rows of tiles and ~700px: the cards are capped at two rows now,
     so what a one-line answer has to fill is one row of tiles, not six, and the
     line is centred in it (see .book-choices__free) rather than left hanging
     under the heading. Cards with a tile grid keep their own top alignment. */
  align-items: stretch;
}

.book-choices__card {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border: 1px solid var(--atelier-border);
  border-radius: 24px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

.book-choices__card h3 {
  margin: 0;
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.12rem;
  line-height: 1.25;
}

.book-choices__help {
  margin: 8px 0 0;
  color: var(--atelier-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The whole answer, on one line: an age, or a name the customer writes. It is
   the only card body that cannot fill a row, so it is centred in whatever the
   row leaves — balanced space above and below reads as a card, where the same
   space all at the bottom reads as a card that failed to load. The heading
   stays where its neighbours' headings are. */
.book-choices__free {
  margin: auto 0;
  padding-top: 14px;
  color: var(--atelier-muted);
  font-size: 0.9rem;
}

.book-choices__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.book-choices__choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  text-align: center;
}

.book-choices__art {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 88px;
  height: 88px;
  border: 1px solid var(--atelier-border);
  border-radius: 16px;
  background: var(--atelier-safety-bg);
}

/* A colour chip is not a picture of a thing: it fills its tile edge to edge, and
   carries its own hairline so a cream one does not disappear into the card. */
.book-choices__row--swatches .book-choices__choice,
.book-choices__row--swatches .book-choices__art {
  width: 68px;
}

.book-choices__row--swatches .book-choices__art {
  height: 68px;
  border: 0;
  background: none;
}

.book-choices__swatch {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}

.book-choices__art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.book-choices__glyph {
  color: var(--atelier-muted);
  font-size: 1.5rem;
  line-height: 1;
}

/* A choice whose picture was never rendered falls back to its own word, which is
   a better tile than a broken image. */
.book-choices__glyph--word {
  padding: 6px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.book-choices__label {
  color: var(--atelier-ink);
  font-size: 0.8rem;
  line-height: 1.25;
}

/* What the two rows did not fit. Set as a pill rather than a tile, so it reads
   as a count and not as a seventh choice whose picture failed to load; it sits
   on the tile row's own baseline area, which keeps the card exactly two rows
   tall. */
.book-choices__more {
  align-self: center;
  padding: 6px 12px;
  border: 1px dashed var(--atelier-border);
  border-radius: 999px;
  color: var(--atelier-muted);
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* A field with nothing to show — a list of names — stays words. Five identical
   empty tiles say less than five words do. */
.book-choices__words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.book-choices__word {
  padding: 6px 12px;
  border: 1px solid var(--atelier-border);
  border-radius: 999px;
  background: var(--atelier-safety-bg);
  color: var(--atelier-ink);
  font-size: 0.85rem;
}

/* A person's card. No photograph has been uploaded yet — that is the whole
   point of it — so the role stands in with its initial, the same device the
   facts card uses. */
.book-choices__card h3 .book-choices__initial {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-inline-end: 9px;
  vertical-align: -7px;
  border-radius: 50%;
  background: var(--atelier-safety-bg);
  font-size: 0.92rem;
  text-transform: uppercase;
}

/* What the pills underneath are an answer TO. The gender question is asked on
   the character, so its label is the form's own word for it. */
.book-choices__field-label {
  margin: 18px 0 0;
  color: var(--atelier-muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-choices__field-label + .book-choices__words {
  margin-top: 8px;
}

/* Not a choice between things — what the customer hands over for this person,
   and it is drawn rather than named. A pill row reads as "pick one"; a
   photograph is not optional, and the whole product is that the face on the
   page is theirs. So the photo and the voice each get a slot the size of a
   picture, visibly EMPTY — a dashed frame is the honest state of something
   nobody has uploaded yet, and it is the same signal the order form's own file
   inputs give. Two equal columns, one height, so the pair reads as two things
   still to come rather than as an icon and a diagram. */
.book-choices__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  /* Capped, because a book with ONE character (moontrip declares only the
     child) gets one card spanning the whole grid — and an uncapped waveform
     then runs 570px across and reads as a banner rather than as a slot the
     size of the thing that goes in it. */
  max-width: 440px;
}

.book-choices__slot {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}

.book-choices__slot-art {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 10px;
  /* Not `--atelier-border`: that token is a cream hairline, and on this slot's
     own tint the dashes were invisible — which loses the only thing saying the
     slot is empty. A soft ink at 22% is the same line in both themes, whose
     inks are the same navy. */
  border: 1px dashed rgb(36 50 74 / 0.22);
  border-radius: 16px;
  background: var(--atelier-safety-bg);
  color: var(--atelier-ink);
}

.book-choices__slot figcaption {
  color: var(--atelier-muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* The waveform fills its slot edge to edge; the portrait stays a fixed 52px, so
   a wide card does not print a giant silhouette. */
.book-choices__slot-art--voice {
  padding: 14px 12px;
}

/* The portrait is a PRINT sitting in the empty frame: a white border and a soft
   shadow, which is what makes a rectangle of colour read as a photograph rather
   than as a panel. Square, and as tall as the slot allows, so the two slots are
   one height whatever the card's width turns out to be. */
.book-choices__photo {
  position: relative;
  display: block;
  /* Sized in pixels, not as a share of the slot. `height: 100%` plus
     `aspect-ratio` inside a centred grid item resolved against the wrong box and
     the print came out taller than the frame holding it, with its badge hanging
     over the caption. */
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--atelier-white);
  box-shadow: 0 4px 12px rgb(36 50 74 / 0.18);
  padding: 3px;
}

.book-choices__photo svg {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
}

/* What says the print is a stand-in and not the book's own picture. On the
   corner rather than across the middle: it marks the photo without covering the
   thing it is marking. */
.book-choices__photo-badge {
  position: absolute;
  /* Just clear of the print, and still inside the frame's own padding, so it
     never crosses the dashed line or reaches the caption. */
  inset-inline-end: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--atelier-white);
  background: var(--atelier-gold, #f7c948);
  color: #4a3608;
}

.book-choices__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  color: var(--atelier-ink);
}

/* Each bar takes an equal share of whatever width the card ends up with, so the
   waveform is the same shape on a phone and in a three-column grid. The height
   is the envelope, set per bar. */
/* The bar's own colour is set inline, along the shelf's ramp — see the
   `voice_slot` macro. A row of identical grey bars is a diagram; this has to
   read as sound at a glance. */
.book-choices__wave i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  animation: gooki-voice-wave 1.9s ease-in-out infinite;
  /* Negative and staggered: every bar is in one animation at a different point
     of it, which is a wave travelling. Positive delays would hold each bar
     still at full height until its turn came round. */
  animation-delay: calc(var(--bar, 0) * -0.07s);
}

/* The one moving thing on this page. Some people are made ill by that, and the
   preference is the only thing that says so. */
@media (prefers-reduced-motion: reduce) {
  .book-choices__wave i {
    animation: none;
  }
}

@keyframes gooki-voice-wave {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}

/* The third thing a character costs is a word, so it stays a word. */
.book-choices__supply-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--atelier-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.book-choices__supply-glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--atelier-border);
  background: var(--atelier-safety-bg);
  color: var(--atelier-ink);
}

/* The sample spreads above show one of each of these. Marking which one stops a
   parent reading the yellow raincoat in the preview as the book rather than as a
   choice — it is the same mark on a chip, a tile and a word. */
.book-choices__choice.is-default .book-choices__art {
  box-shadow: 0 0 0 2px var(--atelier-ink);
}

.book-choices__row--swatches .book-choices__choice.is-default .book-choices__swatch {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 2px var(--atelier-ink);
}

.book-choices__choice.is-default .book-choices__label,
.book-choices__word.is-default {
  font-weight: 700;
}

.book-choices__word.is-default {
  border-color: var(--atelier-ink);
}

.book-choices__footnote {
  margin: 22px 0 0;
  max-width: 52ch;
  color: var(--atelier-muted);
  font-size: 0.85rem;
}

.book-after {
  border-top: 1px solid var(--atelier-border);
  background:
    radial-gradient(circle at 12% 0%, rgb(242 199 92 / 0.18), transparent 45%),
    var(--atelier-safety-bg);
}

.book-after__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px;
  align-items: start;
}

/* A section heading, not a hero — the same trim the reader's heading needed. */
.book-after__copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.15;
}

.book-after__copy .atelier-lead {
  margin: 16px 0 26px;
  max-width: 44ch;
}

.book-after__footnote {
  margin: 18px 0 0;
  max-width: 42ch;
  color: var(--atelier-muted);
  font-size: 0.85rem;
}

.book-after__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.book-after__card {
  padding: 24px 26px;
  border: 1px solid var(--atelier-border);
  border-radius: 24px;
  background: var(--atelier-white);
  box-shadow: var(--atelier-shadow-soft);
}

.book-after__card h3 {
  margin: 0;
  color: var(--atelier-ink);
  font-family: var(--atelier-serif);
  font-size: 1.2rem;
  line-height: 1.25;
}

.book-after__lead {
  margin: 12px 0 0;
  color: var(--atelier-muted);
  font-size: 0.95rem;
  white-space: pre-line;
}

.book-after__list {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* The rule is on the leading edge, not the left one: these pages are printed in
   Persian too, and the storefront is laid out from the locale's own direction. */
.book-after__list li {
  padding-inline-start: 16px;
  border-inline-start: 2px solid rgb(242 199 92 / 0.9);
  color: var(--atelier-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* A single newline in these paragraphs is the author's own list — one arm of the
   plan per line — and printing it as running prose loses the shape. On the SPAN,
   not on the <li>: the list item also contains the template's own indentation,
   which pre-line would print as blank lines. */
.book-after__list span {
  white-space: pre-line;
}

.book-after__list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--atelier-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.book-after__more {
  margin: 16px 0 0;
  color: var(--atelier-terracotta-accessible);
  font-size: 0.82rem;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .book-after__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 760px) {
  .book-page__facts .atelier-facts-card {
    padding: 22px;
  }

  .book-after__cards,
  .book-choices__grid {
    grid-template-columns: 1fr;
  }

  .book-choices__card {
    padding: 20px 22px;
  }
}

@media (max-width: 600px) {
  .book-page__facts .atelier-facts-card dl {
    grid-template-columns: 1fr;
  }
}