/* Kept Stories: the pages of the book are the hero, laid on kraft paper. */
.site-header .brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.01em; }
.site-header nav a { color: var(--brand-text); font-weight: 700; text-decoration: none; }
.hero-title { font-family: var(--font-display); font-weight: 400; line-height: 1.08; color: var(--brand-text); }
h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--brand-text); }
.eyebrow { color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--step--1); font-weight: 700; }
.promise { font-size: var(--step-1); }
.note { margin-top: var(--s3); }
.narrow-wide { max-width: 46rem; }

/* Two real pages of the PDF, fanned. */
html[data-layout="specimen"] .specimen-sheet.fan { position: relative; background: transparent; border: 0; box-shadow: none; padding: 0; transform: none; aspect-ratio: 1.15 / 1; max-width: 34rem; }
.fan img { position: absolute; width: 62%; height: auto; border: 1px solid color-mix(in oklab, var(--ink) 15%, transparent); box-shadow: 0 18px 40px -16px rgb(60 30 10 / 0.45); background: #fff; }
.fan .back { right: 2%; top: 6%; transform: rotate(5deg); }
.fan .front { left: 4%; top: 0; transform: rotate(-3deg); }

.inside { padding-left: 1.2rem; font-size: var(--step-0); line-height: 1.6; }
.inside li { margin-bottom: var(--s2); }
.chapters { columns: 2; column-gap: var(--s6); padding-left: 1.4rem; line-height: 1.8; }
.why { display: grid; gap: var(--s5); }
.why h3 { margin-top: var(--s3); }
.why p { margin: var(--s2) 0 0; }
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, 1fr); } }
.peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s5) 0; }
.peek img { width: 100%; height: auto; border: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgb(60 30 10 / 0.5); background: #fff; }
details.more { margin-top: var(--s3); }

/* The question draw. */
.draw { padding: var(--s6); border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -20px rgb(60 30 10 / 0.45); }
.drawn { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; margin: var(--s3) 0 var(--s5); min-height: 3.8em; }
.drawn.pop { animation: pop 0.35s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawn.pop { animation: none; } }
.qlist { display: grid; gap: var(--s5); }
.qgroup ol { padding-left: 1.4rem; line-height: 1.55; }
.qgroup li { margin-bottom: var(--s2); }

@media print {
  .site-header, .hero-q, .noprint, footer, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .qgroup { break-inside: avoid; }
}
html[data-layout="specimen"] .hero-q .container { align-items: start; }
@media (max-width: 859px) {
  html[data-layout="specimen"] .specimen-sheet.fan { order: 1; max-width: 22rem; margin-bottom: var(--s4); }
  html[data-layout="specimen"] .hero { padding-top: var(--s2); }
}
@media (max-width: 600px) {
  .peek { grid-template-columns: 1fr 1fr; }
  .peek img:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
  .chapters { columns: 1; }
}

/* Search pages: the related links and the gift ideas. */
.links { padding-left: 1.2rem; line-height: 1.9; }
.links a { color: var(--brand-text); font-weight: 700; }
.ideas { padding-left: 1.4rem; }
.ideas h3 { margin: var(--s4) 0 0; }
.ideas p { margin: var(--s2) 0 0; }
.faq h3 { margin-top: var(--s5); }
#buy .checks { line-height: 1.6; }