/* Self-hosted fonts (served from this site, NOT Google's servers) so no
   visitor IP is sent to Google — removes the Google Fonts GDPR transfer and
   lets the privacy policy drop any mention of fonts entirely. Files in
   /assets/fonts/. Lora is a variable font (one file covers 500-700). */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-400-latinext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-700-latinext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/fonts/lora-latinext.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #2e4a5e;
  --navy-dark: #1f3544;
  /* ONE red family sitewide, and it is the BRIGHT brand red (Kelly's call,
     2026-07-16, twice: one red only, and it must be the old bright red that
     matches the covers and the logo dot). #d11f26/#a81720 hold 5.3:1 / 7.5:1
     against white button text — both clear AA. The hero punchline uses the
     same bright red at display size (3.6:1 on pistachio, passes AA large-text). */
  --terracotta: #d11f26;
  --terracotta-dark: #a81720;
  --gold: #f2b441;
  --sage: #8fa98c;
  /* Garden Party palette (Kelly, 2026-07-16): pistachio hero, pale pistachio
     reviews (rose dropped 2026-07-16), apricot newsletter, leaf accents. Navy
     stays the text color, cream stays the neutral, red stays action/punchline
     only. --sage-light is the pale leaf; its uses (gift image panels, pill
     hovers, card borders) harmonize with the fields without per-rule edits. */
  --pistachio: #d6dfbc;
  --apricot: #f6cca4;
  --sage-light: #eef2e0;
  --teal: #2b8a85;
  --teal-deep: #216b67;
  --cream: #fdf6ec;
  --cream-deep: #f1e3d1;
  /* Warm near-black instead of neutral grey — sits better on the cream
     palette (same reasoning as the cover red: warm, not cool). */
  --charcoal: #362f28;
  --white: #fffdf9;
  /* Shadow + radius tiers (visual polish 2026-07-16): editorial, not a
     software dashboard. Physical book covers keep their strong realistic
     shadows (set where covers render); promotional cards, forms, and
     floating menus get a subtle lift at the full 18px radius; standard
     book/article/review cards sit lighter at a tighter 13px radius; small
     supporting panels rely on a thin border instead of a shadow. */
  --shadow: 0 10px 30px rgba(46, 74, 94, 0.1);
  --shadow-card: 0 6px 18px rgba(31, 53, 68, 0.08);
  --radius: 18px;
  --radius-card: 13px;
}

* {
  box-sizing: border-box;
}

html {
  /* Root size drives every rem on the site. 112.5% = 18px at default settings,
     and unlike a px value it still honors a reader's browser font-size
     preference — the senior readers this site serves use that setting. */
  font-size: 112.5%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  color: var(--charcoal);
  background: var(--cream);
  /* Atkinson Hyperlegible: designed by the Braille Institute specifically
     for low-vision readers — a deliberate choice for this audience. */
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

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

a {
  color: var(--navy);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--terracotta-dark);
}

h1,
h2,
h3 {
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  line-height: 1.15;
  margin: 0 0 0.65em;
  /* Kelly's rule: pack line 1 with as much text as fits, only overflow to
     line 2 — not text-wrap:balance's even-but-not-maximal line lengths. */
}

h1 {
  /* Sized so "Skip the Candle." and "Give This Instead." each hold ONE line
     in the hero column at every width (was 5.6rem max, which wrapped each
     sentence and made four ragged lines). Tracking eased: -0.045em crunches
     Lora at display size. */
  font-size: clamp(2.25rem, 3.9vw, 3.8rem);
  letter-spacing: -0.02em;
}

/* Category/utility pages (retirement-books, word-search-books, etc.) don't
   need the homepage's full display-size hero — a smaller heading means less
   scroll before the book grid, and books selling is priority one. Freebie
   pages get the matching fix further down, at ".book-hero.gift-hero h1"
   (needs the extra specificity to beat ".book-hero h1"). */
.page-hero h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
}

h2 {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.42rem;
}

p {
  margin: 0 0 1.15em;
  text-wrap: pretty;
}

li {
  text-wrap: pretty;
}

.shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* 72px, was 104px (Kelly, 2026-07-19: section seams read as big empty gaps
   on desktop too, not just mobile). */
.section {
  padding: 72px 0;
}

/* No heading block above the filters on /books/, so the standard section
   padding just reads as dead air before the grid. */
.books-index-section {
  padding-top: 48px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-160%);
  color: white;
  background: var(--navy-dark);
}

.skip-link:focus {
  transform: translateY(0);
}

.announcement {
  padding: 11px 20px;
  text-align: center;
  background: var(--navy-dark);
  color: var(--cream);
  /* 18px floor (visual audit 2026-07-16): no visible text below 1rem. */
  font-size: 1rem;
}

.announcement a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.announcement a:hover {
  text-decoration: underline;
}

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid rgba(46, 74, 94, 0.13);
  background: rgba(253, 246, 236, 0.95);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  min-height: 90px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  width: 130px;
  height: 98px;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.primary-nav > a:not(.button),
.nav-item > a {
  color: var(--navy-dark);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-item {
  position: relative;
}

.nav-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.65em;
  transform: translateY(-1px);
}

.nav-dropdown {
  position: absolute;
  /* No gap between trigger and panel — a margin here creates a dead zone
     the mouse can cross and prematurely close the CSS-only hover dropdown. */
  top: 100%;
  left: 0;
  z-index: 40;
  display: none;
  min-width: 240px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border: 1px solid #dccbb8;
  border-radius: 14px;
  background: var(--cream);
  box-shadow: var(--shadow);
  flex-direction: column;
  gap: 2px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: flex;
}

.nav-dropdown a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--navy-dark);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-dropdown a:hover {
  background: rgba(31, 53, 68, 0.07);
  color: var(--terracotta-dark);
}

.header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-dark);
}

.header-social-link:hover {
  color: var(--terracotta-dark);
}

.header-social-link svg {
  flex: none;
}

.menu-button {
  display: none;
  border: 2px solid var(--navy);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--terracotta);
  border-radius: 999px;
  padding: 13px 25px;
  color: white;
  background: var(--terracotta);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: 160ms ease;
}

.button:hover {
  border-color: var(--terracotta-dark);
  color: white;
  background: var(--terracotta-dark);
}

@media (prefers-reduced-motion: no-preference) {
  .button:hover {
    transform: translateY(-2px);
  }
}

/* Two-layer ring: the navy outline carries the 3:1 non-text contrast on
   cream/white backgrounds, the gold halo carries it on navy sections. */
.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--navy-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--gold);
}

.button-small {
  min-height: 48px;
  padding: 9px 18px;
  font-size: 1rem;
}

.button-secondary {
  color: var(--navy);
  border-color: var(--navy);
  background: transparent;
}

.button-secondary:hover {
  border-color: var(--navy-dark);
  background: var(--navy-dark);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.eyebrow {
  margin-bottom: 14px;
  /* Navy, not red: Kelly's rule (2026-07-16) — red means action or punchline,
     never decoration. Red eyebrows everywhere made the page busy and diluted
     the red buttons. Also fixes AA on the Garden Party color fields. */
  color: var(--navy);
  /* 18px floor (visual audit 2026-07-16). */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.section-intro {
  max-width: 720px;
  color: #56616a;
  font-size: 1.08rem;
}

.hero {
  overflow: hidden;
  /* 80/96 (was 92/112): the desktop hero trimmed ~13% per Kelly's brief,
     still spacious. Mobile padding is set in its own media query below. */
  padding: 80px 0 96px;
  background: var(--pistachio);
}

/* Two intentional lines, the second the red punchline (Kelly's rule: red
   means action or punchline, never decoration). Deep brand red, not the
   bright button red: on pistachio the bright #d11f26 only holds ~3.6:1 and
   vibrates against green; #a81720 holds ~5:1 and reads richer. Buttons keep
   the bright red — white-on-red is a different pairing and passes there. */
.hero h1 .punchline {
  display: block;
  color: var(--terracotta);
}

/* .hero-intro's default #505a61 is only ~4.7:1 on pistachio; navy-dark holds
   ~9:1 for this normal-size sentence. */
.hero .hero-intro {
  max-width: 34em;
  color: var(--navy-dark);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 70px;
}

.hero-intro {
  color: #505a61;
  font-size: 1.2rem;
}

.carousel-label {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.hero-books {
  position: relative;
  /* Tall enough that the cover (400px slide -> ~600px tall) fits fully
     inside, leaving the dots a clear band BELOW the book (Kelly, 2026-07-16:
     "The 4 button things should be below each book"). */
  min-height: 650px;
}

.carousel-track {
  /* Absolutely fill .hero-books: the old height:100% resolved against a
     parent with only a min-height (indefinite), so the track collapsed to
     0 and the slides' percentage height had nothing to size against. */
  position: absolute;
  inset: 0;
}

.hero-carousel-slide {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  /* All covers render 400px wide, so the squarer 8.5x11 activity books come
     out ~80px SHORTER than the 6x9 guides and used to hang from the top,
     off-center against the arrows (Kelly, 2026-07-16). Each slide now fills
     the cover zone (everything above the 46px dot band) and centers its
     cover vertically, so every trim size sits on the arrows' axis. */
  height: calc(100% - 46px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 470px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 400ms ease;
}

/* Covers are sized by HEIGHT, not width: every trim size fills the cover
   zone exactly, so the squarer 8.5x11 activity books render wider instead
   of shorter and the gap under the carousel label stays identical on every
   slide (Kelly, 2026-07-16). The flex anchor keeps a cover centered even
   when it's wider than the slide (small screens). Natural cover files are
   494px wide, so the ~465px desktop render never upscales. */
.hero-carousel-slide a {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.hero-carousel-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.hero-carousel-slide img {
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 5px;
  box-shadow: 0 32px 60px rgba(31, 53, 68, 0.34);
}

.carousel-arrow {
  position: absolute;
  z-index: 4;
  /* Centered on the cover zone (box minus the 46px dot band), matching the
     slides' centering axis above — not on the whole carousel box. */
  top: calc(50% - 23px);
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--navy);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1;
  transform: translateY(-50%);
}

.carousel-arrow:hover {
  color: white;
  background: var(--navy);
}

.carousel-prev {
  left: -4px;
}

.carousel-next {
  right: -4px;
}

@media (min-width: 1100px) {
  .carousel-prev {
    left: -30px;
  }
  .carousel-next {
    right: -30px;
  }
}

.carousel-dots {
  position: absolute;
  z-index: 4;
  bottom: -4px;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

/* The visible dot is drawn on ::before; the button itself is a 26px-plus
   tap target (mobile audit 2026-07-16: the old 11px buttons sat under the
   WCAG 2.2 24px minimum — hard for senior thumbs). Visuals unchanged. */
.carousel-dots button {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  transition: width 200ms ease;
}

.carousel-dots button::before {
  content: "";
  width: 11px;
  height: 11px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  transition: width 200ms ease;
}

.carousel-dots button[aria-selected="true"] {
  width: 44px;
}

.carousel-dots button[aria-selected="true"]::before {
  width: 30px;
  border-radius: 999px;
  background: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-dots button,
  .carousel-dots button::before {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-slide {
    transition: none;
  }
}

.featured {
  background: var(--white);
}

.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 38px;
}

.text-link {
  flex: none;
  font-weight: 800;
}

.book-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 40px;
}

.filter-pill {
  min-height: 48px;
  padding: 11px 26px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  background: var(--white);
  font: inherit;
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  transition: 160ms ease;
  box-shadow: 0 2px 8px rgba(31, 53, 68, 0.1);
}

.filter-pill:hover {
  background: var(--sage-light);
}

.filter-pill.is-active {
  color: white;
  background: var(--navy);
}

.filter-empty {
  margin-top: 30px;
  color: var(--charcoal);
  font-weight: 700;
}

/* Flex, not grid (visual audit 2026-07-16): a partial last row centers
   itself instead of stranding the final card on the left — for any book
   count AND any filtered subset. 7 books = 4 + 3 centered. */
.book-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.book-grid .book-card {
  flex: 0 1 calc(25% - 15px);
  min-width: 0;
}

.book-grid[data-filterable] .book-card[hidden] {
  display: none;
}

.book-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--sage-light);
}

/* Compact "coming soon" row: earlier version reused the full book-card
   image-wrap treatment (320px empty placeholder box), so on mobile 5
   unpublished titles cost as much scroll as the real books above them and
   read as broken rather than intentional. This is a single short row
   instead — same info, a fraction of the height. */
.book-card.coming-soon {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  background: var(--sage-light);
}

.book-card.coming-soon h2,
.book-card.coming-soon h3 {
  margin: 0;
  color: var(--navy-dark);
  font-size: 1.02rem;
}

.coming-soon-tag {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--terracotta);
  color: white;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.book-image-wrap {
  position: relative;
  display: flex;
  min-height: 372px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--sage-light);
}

.book-image-wrap img {
  width: auto;
  height: 320px;
  max-width: 100%;
  max-height: none;
  border-radius: 3px;
  box-shadow: 0 15px 30px rgba(31, 53, 68, 0.22);
}

.book-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 28px;
  text-align: center;
}

.book-copy h3 {
  min-height: 66px;
}

.book-copy h2 a,
.book-copy h3 a {
  color: inherit;
  text-decoration: none;
}

.book-copy h2 a:hover,
.book-copy h3 a:hover {
  color: var(--terracotta-dark);
}

.book-copy p {
  min-height: 130px;
  color: #56616a;
  font-size: 1rem;
}

.card-amazon-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  padding: 15px 0 0;
  color: var(--terracotta);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.card-amazon-hint:hover {
  color: var(--terracotta-dark);
  text-decoration: underline;
}

.card-amazon-hint span {
  transition: 160ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .card-amazon-hint:hover span {
    transform: translateX(3px);
  }
}

/* "Rita's approach" on the About page — sage green so it reads as its own
   section, distinct from the navy footer directly below it. */
.approach-section {
  background: var(--sage-light);
}

.approach-section h2 {
  color: var(--navy);
}

.reviews {
  background: var(--white);
}

/* Homepage-only override: keeps the section rhythm alternating (pistachio
   hero, white books, pale pistachio reviews, white gifts, cream blog, apricot
   newsletter) without touching the shared .reviews background on book pages. */
.home-reviews {
  background: var(--sage-light);
}

/* Book detail pages: reviews sits between look-inside (navy) and the FAQ
   (white) — both .reviews' own white and cream-deep would clash with a
   neighbor, so it gets the plain cream in between. */
.book-reviews {
  background: var(--cream);
}

.free-gifts {
  background: var(--white);
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 42px;
}

.gift-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.gift-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 36px 28px;
  background: var(--sage-light);
}

.gift-image img {
  width: 100%;
  height: auto;
}

.gift-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

/* Free Gifts hub cards: the title is a card heading, not a page hero, so it
   shouldn't render at the full 51px h2 display size. */
.gift-card .gift-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
}

.gift-copy .button {
  align-self: flex-start;
  font-size: 1rem;
}

.signature-line {
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 20px;
}

/* Cream, not white — the "about" section between this and free-gifts (also
   white) was removed, so this reverts to keep the rhythm alternating. */
.articles {
  background: var(--cream);
}

.article-grid {
  display: grid;
  /* auto-fit instead of a hardcoded 3 columns: a section with only 1-2
     articles (e.g. a category page's "From Rita's Blog" teaser) used to
     leave the unused columns as dead whitespace instead of reflowing. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: 22px;
}

/* Blog-index cards use h2 (correct hierarchy under the page h1); size them
   like the h3 cards everywhere else. */
.article-card h2 {
  font-size: 1.42rem;
  letter-spacing: normal;
}

.article-card {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  border: 1px solid #e7dcc8;
  border-radius: var(--radius-card);
  padding: 34px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(31, 53, 68, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .article-card {
    transition: none;
  }
  .article-card:hover {
    transform: none;
  }
}

.article-category {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-card a {
  margin-top: auto;
  font-weight: 800;
}

.newsletter {
  color: var(--navy-dark);
  background: var(--apricot);
}

.newsletter h2 {
  font-size: clamp(1.9rem, 2.6vw, 2.65rem);
  margin-bottom: 0;
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "text  form"
    "image form";
  align-items: center;
  gap: 48px;
}

.newsletter-text {
  grid-area: text;
}

.newsletter-image {
  grid-area: image;
  margin-top: 14px;
}

.newsletter-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.newsletter-form {
  grid-area: form;
  display: grid;
  gap: 8px;
  border-radius: var(--radius);
  padding: 30px;
  color: var(--charcoal);
  background: var(--white);
  box-shadow: var(--shadow);
}

.newsletter-form input {
  width: 100%;
  min-height: 51px;
  margin-bottom: 8px;
  border: 1px solid #9aa6ad;
  border-radius: 10px;
  padding: 10px 13px;
  font: inherit;
}

.newsletter-form p {
  margin: 4px 0 0;
  color: #545f68;
  font-size: 1rem;
}

.newsletter-form .form-disclaimer {
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}

/* Freebie hero: copy on the left, signup box on the right (stacks on mobile). */
.freebie-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 780px) {
  /* minmax(0, 1fr): see the large-text audit note on .book-hero-grid. */
  .freebie-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* Freebie hero: intro, "what you'll receive" label, and the item list all render
   at one size and colour; only the resource names are bold. */
.freebie-detail p,
.freebie-detail li {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.6;
}
.freebie-detail > p {
  margin: 0 0 14px;
}
.freebie-detail-label {
  margin: 0 0 10px;
  font-weight: 700;
}

/* Freebie pages alternate cream hero -> white "keep exploring" -> cream FAQ so
   no two neighbouring sections share a background. */
.freebie-page .faq-section {
  background: var(--cream);
}

/* Tighten the freebie pages so "Keep exploring" sits higher up the page. */
.freebie-page .gift-hero {
  padding-bottom: 48px;
}
.freebie-page .white-section {
  padding: 52px 0;
}

/* "Keep exploring" book: cover beside the text, stacks on mobile. */
.explore-book {
  display: flex;
  gap: 28px;
  align-items: center;
}
.explore-cover {
  flex: 0 0 auto;
  display: block;
  order: 2;
}
.explore-cover img {
  width: 230px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(54, 47, 40, 0.18);
}
.explore-text {
  flex: 1 1 auto;
}
.explore-text h2 {
  margin-top: 0;
}
@media (max-width: 560px) {
  .explore-book {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* Single-column footer on small phones (large-text audit 2026-07-19):
     two columns at 200% reader text leaves too little room per link. */
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.freebie-hero-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.freebie-hero-list li {
  padding-left: 26px;
  position: relative;
}
.freebie-hero-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
.freebie-hero-list strong {
  color: var(--charcoal);
  font-weight: 700;
}

/* MailerLite embedded form, restyled to Rita's brand (scoped to the embed id so
   it does not affect anything else). Replaces MailerLite's default grey box and
   black button with the site's white card, red button, and fonts. */
#mlb2-43756184.ml-form-embedContainer , #mlb2-43890253.ml-form-embedContainer {
  border-radius: var(--radius);
  padding: 30px;
  color: var(--charcoal);
  background: var(--white);
}
#mlb2-43756184 .ml-form-embedWrapper, #mlb2-43890253 .ml-form-embedWrapper,
#mlb2-43756184 .ml-form-embedBody, #mlb2-43890253 .ml-form-embedBody,
#mlb2-43756184 .ml-form-successBody , #mlb2-43890253 .ml-form-successBody {
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
#mlb2-43756184 .ml-form-fieldRow , #mlb2-43890253 .ml-form-fieldRow {
  margin: 0 0 8px;
}
#mlb2-43756184 .ml-field-group label , #mlb2-43890253 .ml-field-group label {
  display: block;
  margin: 0 0 5px;
  color: var(--charcoal);
  font: inherit;
  font-weight: 700;
}
#mlb2-43756184 .ml-field-group input , #mlb2-43890253 .ml-field-group input {
  width: 100%;
  min-height: 51px;
  border: 1px solid #9aa6ad;
  border-radius: 10px;
  padding: 10px 13px;
  font: inherit;
  color: var(--charcoal);
  background: var(--white);
}
#mlb2-43756184 .ml-form-embedSubmit , #mlb2-43890253 .ml-form-embedSubmit {
  margin: 12px 0 0;
}
#mlb2-43756184 .ml-form-embedSubmit button , #mlb2-43890253 .ml-form-embedSubmit button {
  width: 100%;
  min-height: 51px;
  border: 2px solid var(--terracotta);
  border-radius: 10px;
  background: var(--terracotta);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#mlb2-43756184 .ml-form-embedSubmit button:hover , #mlb2-43890253 .ml-form-embedSubmit button:hover {
  border-color: var(--terracotta-dark);
  background: var(--terracotta-dark);
}
#mlb2-43756184 .form-disclaimer , #mlb2-43890253 .form-disclaimer {
  margin: 10px 0 0;
  color: #545f68;
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
}
#mlb2-43756184 .ml-form-successContent h4 , #mlb2-43890253 .ml-form-successContent h4 {
  color: var(--terracotta-dark);
}

.site-footer {
  padding: 72px 0 26px;
  color: #dce4e9;
  background: var(--navy-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.25fr 0.85fr 0.75fr;
  gap: 40px;
}

.site-footer nav a {
  white-space: nowrap;
}

.footer-logo {
  width: 150px;
  margin-bottom: 20px;
}

.site-footer h2 {
  color: white;
  font-family: "Atkinson Hyperlegible", Verdana, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.site-footer a {
  color: #dce4e9;
  font-size: 1rem;
  text-decoration: none;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding-top: 24px;
  color: #545f68;
  font-size: 1rem;
}

.breadcrumbs a {
  font-weight: 700;
}

/* Left-aligned within the full-width .shell (not centered independently
   like .content-narrow), so it lines up with "What Rita Writes" below it
   instead of sitting indented relative to the full-width section. */
.about-hero-copy {
  max-width: 100%;
}

.about-hero-copy > *:last-child {
  margin-bottom: 0;
}

.about-hero-banner {
  max-width: 820px;
  margin-top: 8px;
  margin-bottom: -24px;
}

.about-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 44px, was 60px (Kelly, 2026-07-19: too much empty space between the
   breadcrumb row and the page heading). */
.page-hero,
.article-hero {
  padding: 44px 0;
  background: var(--cream);
}

/* The last eyebrow/heading/paragraph in a hero still carries its own
   trailing margin, which stacked on top of the section's bottom padding
   made the gap below the text bigger than the gap above the eyebrow. */
.page-hero .shell > *:last-child,
.article-hero .shell > *:last-child {
  margin-bottom: 0;
}

.page-hero h1 {
  max-width: 100%;
}

/* Books page hero is just an eyebrow + h1 now (no intro paragraph), so it
   doesn't need the standard hero padding — keep it short. */
.books-hero {
  padding: 40px 0;
}

/* Only content-narrow heroes (About page, legal pages) get a capped width,
   matching the narrower body copy directly below them. Every other
   page-hero uses the full standard .shell width so its eyebrow/heading
   lines up on the left edge with the book grid/cards below it. */
.page-hero .shell.content-narrow {
  max-width: 820px;
}

.white-section {
  background: var(--white);
}

.content-narrow {
  max-width: 820px;
}

/* Long-form reading column: ~72 characters per line. Wider than this is
   measurably harder to track line-to-line, especially for older eyes. */
.prose {
  max-width: 720px;
  margin: 0 auto;
}

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

.info-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
  margin-top: 38px;
}

.info-card {
  display: block;
  border: 1px solid #e5d7c5;
  border-radius: var(--radius-card);
  padding: 30px;
  background: var(--cream);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.info-card h3 {
  color: var(--navy);
}

.info-card:hover {
  background: var(--white);
  box-shadow: 0 16px 38px rgba(31, 53, 68, 0.12);
  transform: translateY(-4px);
}

.info-card:hover h3 {
  color: var(--terracotta-dark);
}

@media (prefers-reduced-motion: reduce) {
  .info-card {
    transition: none;
  }
  .info-card:hover {
    transform: none;
  }
}


/* Deliberate row shapes per collection size (visual audit 2026-07-16):
   default 3 per row; .cols-4 (books index, 7 books) = 4 + 3 centered;
   .cols-2 (2- and 4-book categories) = centered pairs / a 2x2. The build
   assigns the class from the real book count. */
.all-books {
  margin-top: 44px;
}

.all-books .book-card {
  flex-basis: calc(33.333% - 13.4px);
}

.all-books.cols-4 .book-card {
  flex-basis: calc(25% - 15px);
}

.all-books.cols-2 .book-card {
  flex-basis: calc(50% - 10px);
}

.all-books .book-copy h2 {
  min-height: 74px;
  font-size: 1.32rem;
}

.all-books .book-copy p {
  min-height: 90px;
  font-size: 1rem;
}

.book-hero {
  padding-top: 65px;
  background: var(--cream);
}

.book-hero-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  grid-template-areas:
    "cover head"
    "cover copy";
  align-items: start;
  column-gap: 70px;
  row-gap: 14px;
}

.book-hero-head {
  grid-area: head;
  align-self: end;
  text-align: center;
}

.book-hero-copy {
  grid-area: copy;
}

.book-detail-cover {
  grid-area: cover;
  align-self: center;
  display: flex;
  min-height: 660px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  padding: 36px;
  background: var(--sage-light);
}

/* +12% cover (visual audit 2026-07-16): the desktop cover was restrained
   next to the display-size title. Mobile sizes below are untouched. */
.book-detail-cover img {
  width: auto;
  max-height: 630px;
  border-radius: 4px;
  box-shadow: 0 22px 45px rgba(31, 53, 68, 0.25);
}

/* Freebie preview: let the panel hug the wide preview image instead of
   floating it in the tall book-cover panel. */
.gift-preview {
  min-height: 0;
}

.gift-preview img {
  width: 100%;
  box-shadow: none;
}

.freebie-list-note {
  margin: 12px 0 0;
  color: #545f68;
  font-size: 1rem;
  text-align: center;
}

/* Freebie hero: wider, closer-to-even columns and less padding so the
   preview image reads much bigger than the default book-cover treatment.
   Gated to min-width:781px (matching the max-width:780px mobile stack
   query below) — un-gated, this 2-class selector's higher specificity
   would beat the mobile single-column rule and break the stack. */
@media (min-width: 781px) {
  .gift-hero .book-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "head cover"
      "copy cover";
  }
}

.gift-hero .book-detail-cover {
  padding: 20px;
  /* Top-align the preview box with the heading so its green border sits at
     the same height regardless of how many lines the intro copy runs — keeps
     both free-gift pages' boxes lined up exactly. */
  align-self: start;
}

.book-subtitle {
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Hero buy button: one geo-routed Amazon link, sized to the 18px floor. */
.book-hero .button-row .button {
  min-height: 52px;
  padding: 12px 22px;
  font-size: 1rem;
}

.book-hero h1 {
  font-size: clamp(2.55rem, 5vw, 4.8rem);
}

/* Higher specificity than ".book-hero h1" above (two classes vs one), so
   freebie pages keep the smaller heading regardless of source order. */
.book-hero.gift-hero h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
}

.book-hero h2 {
  margin-top: 16px;
  font-size: 1.22rem;
}

.book-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid #d9c9b6;
}

.book-facts div {
  padding: 18px 20px 8px 0;
  border-bottom: 1px solid #d9c9b6;
}

.book-facts dt {
  color: #545f68;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.book-facts dd {
  margin: 4px 0 0;
  color: var(--navy-dark);
  font-weight: 700;
}

.callout {
  border-left: 6px solid var(--gold);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 32px;
  background: var(--cream);
}

.feature-list {
  padding-left: 1.25em;
}

.feature-list li,
.callout li {
  margin-bottom: 11px;
}

.look-inside {
  background: var(--navy-dark);
}

.look-inside h2,
.look-inside .eyebrow,
.look-inside .section-intro {
  color: white;
}

.look-inside h2 {
  max-width: 100%;
}

.interior-stack {
  display: grid;
  gap: 28px;
  margin-top: 42px;
}

.interior-banner {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* Near-square interior images (flagged by the build) are capped so they
   don't balloon to a full viewport height inside the banner stack. */
.interior-tall {
  width: auto;
  max-width: min(640px, 100%);
  margin-inline: auto;
}

.faq-section {
  background: var(--white);
}

.faq-list {
  border-top: 1px solid #ddcdb9;
}

.faq-list details {
  border-bottom: 1px solid #ddcdb9;
  padding: 4px 0;
}

/* Custom marker with a hanging indent: wrapped question lines align with
   the question text instead of sliding under the disclosure arrow. */
.faq-list summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 20px 42px 20px 1.5em;
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--teal-deep);
}

.faq-list details[open] summary::before {
  content: "\25BE";
}

.faq-list details p {
  padding-right: 42px;
}


.mini-cta {
  color: var(--navy-dark);
  background: var(--sage-light);
}

.mini-cta h2,
.mini-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.mini-cta-inner .button {
  white-space: nowrap;
}

.blog-grid {
  grid-template-columns: repeat(2, 1fr);
}

.blog-grid .article-card {
  min-height: 330px;
  background: var(--sage-light);
}

.article-hero .content-narrow {
  margin: 0 auto;
}

.article-hero h1 {
  max-width: 900px;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
}

.prose h2 {
  margin-top: 1.6em;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
}

.prose h3 {
  margin-top: 1.4em;
}

.prose li {
  margin-bottom: 8px;
}

.prose a {
  font-weight: 700;
}

.contact-form {
  display: grid;
  gap: 16px;
  border-radius: var(--radius);
  padding: 32px;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.contact-form label,
.newsletter-form label {
  display: grid;
  gap: 6px;
  font-size: 1rem;
  font-weight: 800;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid #9aa6ad;
  border-radius: 10px;
  padding: 11px 13px;
  background: white;
  font: inherit;
}

.form-status {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}

/* Browsers without <dialog> support render its content inline at the bottom
   of every page; keep it hidden there (script.js also guards showModal). */
dialog:not([open]) {
  display: none;
}

.signup-popup {
  width: min(580px, calc(100% - 30px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  border: 0;
  border-radius: var(--radius);
  padding: 42px;
  color: var(--charcoal);
  background: var(--cream);
  box-shadow: 0 30px 80px rgba(31, 53, 68, 0.35);
}

.signup-popup::backdrop {
  background: rgba(31, 53, 68, 0.72);
  backdrop-filter: blur(4px);
}

.signup-popup .newsletter-form {
  margin-top: 24px;
  padding: 24px;
}

.popup-close {
  float: right;
  border: 0;
  padding: 7px;
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 58px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  font-size: 1rem;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom .social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #dce4e9;
  font-weight: 700;
  text-decoration: none;
}

.footer-bottom .social-link:hover {
  color: white;
}

.footer-bottom .social-link svg {
  flex: none;
}

@media (max-width: 1060px) {
  .primary-nav {
    gap: 15px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 800px;
  }

  .hero-books {
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .book-grid .book-card,
  .all-books .book-card,
  .all-books.cols-4 .book-card,
  .all-books.cols-2 .book-card {
    flex-basis: calc(50% - 10px);
  }

  .gift-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  /* 48px, was 76px (Kelly, 2026-07-19: the seams between sections read as
     big empty gaps on a phone). */
  .section {
    padding: 48px 0;
  }

  /* Compact filter pills on phones (Kelly, 2026-07-19: full-size pills each
     claimed a whole row — five stacked pills pushed the books ~700px down
     the page). Smaller padding lets two share a row; 44px tap height kept. */
  .book-filters {
    gap: 10px;
    margin: 20px 0 28px;
  }

  .filter-pill {
    min-height: 44px;
    padding: 8px 16px;
    font-size: 1rem;
  }

  .section-heading-row {
    margin-bottom: 20px;
  }

  .content-grid {
    gap: 40px;
  }

  .menu-button {
    display: block;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 20px;
    left: 20px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #dccbb8;
    border-radius: 18px;
    padding: 20px;
    background: var(--cream);
    box-shadow: var(--shadow);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav > a,
  .nav-item > a {
    padding: 7px;
  }

  .nav-dropdown {
    position: static;
    display: flex;
    margin: 0 0 6px 16px;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  .header-inner {
    min-height: 78px;
  }

  .brand {
    width: 78px;
    height: 60px;
  }

  /* Tighter, was 66px 0 78px (Kelly, 2026-07-19: too much empty space
     between the hero and the books below it on a phone). */
  .hero {
    padding: 48px 0 52px;
  }

  .hero-books {
    min-height: 440px;
  }

  .hero-carousel-slide {
    width: 270px;
  }

  .gift-grid,
  .article-grid,
  .blog-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  /* Compact mobile footer (visual polish 2026-07-16): the old single-column
     stack made the footer extremely long. Brand row stays full width; the
     Explore / Rita / Information link groups share a balanced two-column
     grid. Long labels wrap inside their column instead of overflowing.
     minmax(0, 1fr) not bare 1fr (large-text audit 2026-07-19): 1fr floors at
     min-content, so at 200% reader text size the widest link propped the
     column open and pushed every page 86px past the screen edge. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  .site-footer nav a {
    white-space: normal;
  }

  /* Two books per row on phones, was one full-width card per book (Kelly,
     2026-07-19: seven stacked cards made an endless scroll of covers and
     Buy buttons). Covers render ~165px wide — still comfortably above the
     100px thumbnail-legibility bar every cover is proofed against. Card
     text steps down to fit the narrower column, so titles wrap at word
     boundaries instead of breaking mid-word. */
  .book-grid .book-card,
  .all-books .book-card,
  .all-books.cols-4 .book-card,
  .all-books.cols-2 .book-card {
    flex-basis: calc(50% - 10px);
  }

  .book-copy {
    padding: 16px 12px 20px;
  }

  .book-copy h2,
  .book-copy h3 {
    font-size: 1.05rem;
    line-height: 1.3;
    min-height: 0;
  }

  .book-copy p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .book-copy .card-amazon-hint {
    font-size: 1rem;
  }

  /* minmax(0, 1fr) + min-width: 0 on children (large-text audit 2026-07-19):
     bare 1fr floors at min-content, so a long book title at 200% reader text
     forced the hero 100px past the screen edge on every book page. */
  .book-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "cover"
      "copy";
    gap: 22px;
  }

  .book-hero-grid > *,
  .freebie-hero-grid > *,
  .footer-grid > *,
  .testimonial-band > * {
    min-width: 0;
  }

  /* At reader text sizes the heading row's shrink-to-fit children (it goes
     flex-direction: column further down) otherwise size to their widest
     word and spill; long words in any text block break instead of pushing
     the page sideways. "anywhere" not "break-word": only "anywhere" lowers
     min-content width, which is what grid/flex sizing actually uses.
     (Large-text audit 2026-07-19.) */
  .section-heading-row > * {
    min-width: 0;
    max-width: 100%;
  }

  h1, h2, h3, h4, p, a, li, td, label, figcaption {
    overflow-wrap: anywhere;
  }

  .book-detail-cover {
    min-height: 0;
    padding: 24px;
    order: 0;
  }

  .book-detail-cover img {
    max-height: 440px;
  }

  .page-hero,
  .article-hero {
    padding: 36px 0;
  }

  .book-image-wrap {
    min-height: 380px;
  }

  .book-copy h3,
  .book-copy p {
    min-height: 0;
  }

  /* Mobile order (Kelly, 2026-07-14): heading, then the sign-up form,
     then the image last — different order than desktop's two-column
     layout, so this needs its own template-areas, not just 1fr columns. */
  .newsletter-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "form"
      "image";
    gap: 32px;
  }

  /* Grid items default to min-width:auto, so their intrinsic content width
     (the form's padding, the image's max-width) blows out the 1-column
     mobile track and pushes everything past the right edge. min-width:0
     lets them actually shrink to the column. */
  .newsletter-text,
  .newsletter-form,
  .newsletter-image {
    min-width: 0;
  }

  .newsletter-image {
    margin-top: 0;
  }

  .newsletter-image img {
    max-width: 100%;
  }

  .section-heading-row {
    align-items: start;
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }

  h1 {
    font-size: 2.65rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  /* Paired buttons sit side by side, splitting the row evenly, instead of
     stacking full-width one on top of the other (Kelly, 2026-07-19). A row
     with a single button still gets the full width via flex-grow. */
  .button-row {
    width: 100%;
    gap: 12px;
  }

  .button-row .button {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  .gift-copy .button {
    width: 100%;
  }

  .hero-books {
    min-height: 400px;
  }

  .hero-carousel-slide {
    width: 235px;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  /* Ensure all interactive links have a 44px minimum tap target on mobile.
     flex-wrap (large-text audit 2026-07-19): inline-flex makes the link's
     text a single unbreakable flex line, so a long link (an email address,
     a book title) at 200% reader text pushed the whole page sideways. */
  a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 44px;
    min-width: 44px;
  }

  /* Links inside sentences flow as TEXT, not flex boxes (Kelly, 2026-07-19:
     the inline-flex box inflated the line spacing around "Privacy Policy"
     in every form disclaimer). display:inline keeps the line height normal;
     the vertical padding still extends the tappable area without moving the
     text (inline vertical padding paints outward, it does not grow the line
     box). WCAG 2.5.8 exempts in-sentence links from target-size minimums.
     No horizontal padding — it opened a visible gap between a link and the
     punctuation right after it ("Privacy Policy .") (Kelly, 2026-07-16). */
  p a, li a, td a, figcaption a {
    display: inline;
    min-height: auto;
    min-width: 0;
    padding: 10px 0;
  }

  /* Breadcrumbs: the 44px link box centers its label while the "/" spans
     sat top-aligned — "Home" rendered lower than "/ Blog" on every page
     (Kelly, 2026-07-19). Centering the flex row lines them all up. */
  .breadcrumbs {
    align-items: center;
  }

  .info-card-grid {
    grid-template-columns: 1fr;
  }

  /* Single-column card grids don't need the desktop row-equalizing
     min-heights; they just read as random gaps here. */
  .book-copy h3,
  .book-copy p {
    min-height: 0;
  }

  /* Stack every buy-button group full width, matching the hero treatment,
     instead of the ragged 1/2/1 pyramid the centered wrap produces. */
  .description-cta {
    flex-direction: column;
    align-items: stretch;
  }

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

  .book-detail-cover {
    min-height: 360px;
    padding: 30px;
  }

  .mini-cta-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .mini-cta-inner .button {
    white-space: normal;
  }

  .gift-copy,
  .article-card {
    padding: 26px;
  }

  .signup-popup {
    padding: 28px 20px 22px;
  }
}

/* --- 2026-07 additions: testimonials, category strip, form helpers --- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.testimonial-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 22px;
  margin: 42px 0 36px;
}

.testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid #e5d7c5;
  border-radius: var(--radius-card);
  padding: 30px;
  background: var(--cream);
}

.testimonial blockquote {
  /* Stronger quote-to-attribution spacing (visual audit 2026-07-16). */
  margin: 0 0 24px;
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.5;
}

/* Real Amazon review titles, shown above the quote on both card styles. */
.review-title {
  margin: 0 0 8px;
  /* Navy, not red — review titles are content, not actions (Kelly's red rule). */
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.testimonial figcaption {
  margin-top: auto;
  display: grid;
  gap: 2px;
  font-size: 1rem;
}

.testimonial figcaption span {
  color: #545f68;
}

.testimonial figcaption a {
  font-weight: 700;
}

.pull-review {
  margin: 26px 0;
  border-left: 5px solid var(--sage);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: 24px 28px;
  background: var(--cream);
}

.pull-review blockquote {
  margin: 0 0 18px;
  color: var(--navy);
  font-family: "Lora", Georgia, serif;
  font-size: 1.22rem;
  line-height: 1.5;
}

.pull-review figcaption {
  display: grid;
  gap: 2px;
  font-size: 1rem;
}

.pull-review figcaption span {
  color: #545f68;
}

.review-more {
  font-weight: 700;
}

@media (max-width: 1000px) {
  .testimonial-band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  /* minmax(0, 1fr): see the large-text audit note on .book-hero-grid. */
  .testimonial-band {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reviews page (visual audit 2026-07-16): three strong reviews featured up
   top, then a true masonry wall — each card ends right after its own
   attribution instead of inheriting the tallest card's height. */
.featured-reviews {
  margin-bottom: 22px;
}

.testimonial-featured {
  padding: 36px;
}

.testimonial-featured blockquote {
  font-size: 1.35rem;
}

.review-wall {
  columns: 3;
  column-gap: 22px;
}

.review-wall .testimonial {
  break-inside: avoid;
  margin: 0 0 22px;
  width: 100%;
}

@media (max-width: 1000px) {
  .review-wall {
    columns: 2;
  }
}

@media (max-width: 640px) {
  .review-wall {
    columns: 1;
  }
}

/* Centered buy buttons under the product description */
.description-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 48px;
}

/* Final buy band after the FAQ: the last thing a high-intent reader sees on a
   book page is a way to buy, not a way to leave. Apricot, not gold (visual
   audit 2026-07-16): the saturated yellow was the one colour outside the
   Garden Party palette and read promotional; apricot keeps the red button
   dominant and hands off cleanly from the cream FAQ above it. */
.buy-band {
  text-align: center;
  background: var(--apricot);
}

.buy-band h2 {
  color: var(--navy-dark);
}

.buy-band .eyebrow {
  color: var(--navy-dark);
}

.buy-band .description-cta {
  margin-top: 34px;
}


/* --- 2026-07 batch: centered titles --- */

.book-hero .book-subtitle {
  text-align: center;
}