:root {
  --cream: #FCEEC9;
  --cream-light: #FEF9EA;
  --yellow: #FFF9C4;
  --red: #B61E16;
  --red-dark: #A80000;
  --black: #190300;
  --brown: #3A241F;
  --orange: #FFBD52;
  --teal: #005D52;
  --white: #FFFFFF;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --max-width: 1160px;
  --radius: 10px;
}

/* Opts every same-site page navigation (index.html -> blog.html, etc.) into the browser's
   built-in View Transitions API: instead of the old hard flash-to-white between pages, the
   browser cross-fades the outgoing page into the incoming one automatically. This is a
   single declarative rule -- no JavaScript, no per-page setup. Browsers that don't support
   it yet (anything other than current Chrome/Edge, as of when this was added) just ignore
   this whole block and navigate exactly as before, so there's no fallback code needed and
   nothing that can break for those visitors.
   The site already respects prefers-reduced-motion elsewhere (see the scroll-reveal logic
   in main.js), so the same courtesy applies here: for anyone who's told their OS they'd
   rather not see motion effects, the transition's animation is turned off below -- the
   content still fully changes, it just does so instantly instead of cross-fading. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--black);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-reveal],
.book-card,
.media-card,
.series-card,
.blog-post,
.review-card,
.podcast-card {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.book-grid .book-card:nth-child(2) { transition-delay: 0.08s; }
.book-grid .book-card:nth-child(3) { transition-delay: 0.16s; }
.book-grid .book-card:nth-child(4) { transition-delay: 0.24s; }
.media-grid .media-card:nth-child(2) { transition-delay: 0.06s; }
.media-grid .media-card:nth-child(3) { transition-delay: 0.12s; }
.series-grid .series-card:nth-child(2) { transition-delay: 0.06s; }
.series-grid .series-card:nth-child(3) { transition-delay: 0.12s; }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

.hidden-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--red);
  color: var(--white);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Headings */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--black);
  margin: 0 0 16px;
  line-height: 1.15;
}

h1 { font-size: clamp(2.8rem, 6.5vw, 5.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 16px; color: var(--brown); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 12px;
}

.section-title { text-align: center; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background-color: var(--red);
  color: var(--white);
}
.btn-primary:hover { background-color: var(--red-dark); }

.btn-outline {
  background-color: transparent;
  border-color: var(--red);
  color: var(--red);
}
.btn-outline:hover { background-color: var(--red); color: var(--white); }

.btn-small { padding: 9px 18px; font-size: 0.85rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--cream-light);
  border-bottom: 1px solid rgba(25, 3, 0, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--black);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a:not(.btn) {
  color: var(--black);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav a:not(.btn):hover { color: var(--red); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--black);
  display: block;
}

/* Hero */
.hero { padding: 72px 0 96px; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.hero-sub { font-size: 1.1rem; max-width: 46ch; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

.hero-media {
  min-width: 0;
}

.hero-media img {
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(25, 3, 0, 0.35);
}

/* Featured */
.featured { padding: 72px 0; background-color: var(--yellow); }

.featured-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}

.featured-cover {
  min-width: 0;
}

.featured-cover img {
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -16px rgba(25, 3, 0, 0.4);
}

.featured-text .subtitle {
  font-size: 1.15rem;
  color: var(--black);
  font-weight: 500;
}

.buy-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

/* Book grid */
.book-grid-section { padding: 96px 0; }

.book-grid-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.book-grid-header .section-title { flex: 1; margin-bottom: 0; }

.carousel-controls { display: flex; gap: 10px; flex-shrink: 0; }
.carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--red);
  background-color: transparent;
  color: var(--red);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.carousel-btn:hover { background-color: var(--red); color: var(--white); }
.carousel-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.carousel-btn:disabled:hover { background-color: transparent; color: var(--red); }

.book-grid {
  display: flex;
  gap: 32px;
  margin-top: 48px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.book-grid::-webkit-scrollbar { display: none; }

.book-grid .book-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.book-card {
  min-width: 0;
  background-color: var(--cream-light);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  display: flex;
  flex-direction: column;
  scroll-margin-top: 100px;
  transition: box-shadow 0.15s ease;
}
/* :has() lets the whole card's shadow respond to hover/focus on *either* of its two
   interactive children (the cover image button or the "Buy Now" button) in one rule.
   Before :has() existed, getting this same whole-card effect from a hover on an inner
   element would have needed JavaScript (adding/removing a class on mouseenter/mouseleave)
   -- this does it in pure CSS instead. */
.book-card:has(.cover-frame:hover, .cover-frame:focus-visible, .book-buy-trigger:hover, .book-buy-trigger:focus-visible) {
  box-shadow: 0 16px 32px -16px rgba(25, 3, 0, 0.35);
}

.cover-frame {
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  margin: 0 auto 20px;
  background-color: var(--cream);
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cover-frame:hover, .cover-frame:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -14px rgba(25, 3, 0, 0.4);
  outline: none;
}

.book-card img {
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-buy-trigger { cursor: pointer; margin-top: auto; }

.book-card h3 { margin-bottom: 8px; }
.book-card p { font-size: 0.92rem; }

/* Reviews */
.reviews { padding: 96px 0; background-color: var(--cream-light); }

.reviews-intro {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 40px;
}
.reviews-intro a { color: var(--red); font-weight: 600; }

.review-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1160px;
  margin: 0 auto 56px;
}

.review-card {
  background-color: var(--cream-light);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-stars {
  color: var(--red);
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.review-quote {
  font-style: italic;
  color: var(--black);
  margin: 0;
  flex-grow: 1;
}

.review-meta {
  margin: 0;
  font-size: 0.88rem;
  color: var(--brown);
}
.review-meta strong { color: var(--black); }

.reviews-cta { text-align: center; }

/* Blog */
.blog-post-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.blog-post {
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(25, 3, 0, 0.1);
}
.blog-post:last-child { border-bottom: none; padding-bottom: 0; }

.blog-post-date {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 8px;
}

.blog-post h2 { font-size: 1.6rem; margin-bottom: 0; }
.blog-post { scroll-margin-top: 100px; }

.blog-post-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.blog-post-thumb { flex-shrink: 0; display: block; border-radius: 6px; }
.blog-post-thumb img {
  width: 56px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 18px -10px rgba(25, 3, 0, 0.4);
  display: block;
}
.blog-post-thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.blog-post-top-text { flex: 1; min-width: 0; }
.blog-post-top-text .blog-post-date { margin-bottom: 4px; }

.blog-post-more { margin-top: 16px; }

.blog-post-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--red);
  color: var(--red);
  font-weight: 600;
  font-size: 0.92rem;
}
.blog-post-more summary::-webkit-details-marker { display: none; }
.blog-post-more summary::marker { content: ""; }
.blog-post-more summary:hover { background-color: var(--red); color: var(--white); }
.blog-post-more summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.blog-post-more:not([open]) summary .read-less-label { display: none; }
.blog-post-more[open] summary .read-more-label { display: none; }
.blog-post-more[open] summary { margin-bottom: 20px; }

.blog-post-more-content > p:first-child { margin-top: 0; }

.post-shop-link { margin-top: 24px; font-weight: 600; }
.post-shop-link a { color: var(--red); text-decoration: none; }
.post-shop-link a:hover { text-decoration: underline; }

.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  font-size: 0.85rem;
}
.post-share-label { color: var(--brown); font-weight: 600; }
.post-share a { color: var(--red); font-weight: 600; text-decoration: none; }
.post-share a:hover { text-decoration: underline; }

/* Watch & Listen */
.watch-series { padding: 40px 0 96px; }
.watch-media { padding: 40px 0 96px; background-color: var(--cream-light); scroll-margin-top: 90px; }

.series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1160px;
  margin: 40px auto 0;
}

.series-card {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.series-card:hover, .series-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -16px rgba(25, 3, 0, 0.45);
  outline: none;
}
.series-card img {
  width: 100%;
  height: auto;
  display: block;
}

.media-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin: 32px auto 0;
}

.media-search-sort {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.media-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-chip {
  padding: 9px 20px;
  border-radius: 999px;
  border: 2px solid var(--red);
  background-color: transparent;
  color: var(--red);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { background-color: rgba(182, 30, 22, 0.1); }
.filter-chip.is-active { background-color: var(--red); color: var(--white); }
.filter-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.media-search { flex: 1 1 320px; max-width: 420px; }
.media-search input {
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--white);
  color: var(--black);
}
.media-search input:focus { outline: 2px solid var(--red); }

.media-sort select {
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--white);
  color: var(--black);
  cursor: pointer;
}
.media-sort select:focus { outline: 2px solid var(--red); }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1160px;
  margin: 40px auto 0;
}

.media-card {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  display: flex;
  flex-direction: column;
}
.media-card[hidden] { display: none; }

.media-thumb,
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--black);
  padding: 0;
  border: none;
  display: block;
}
button.media-thumb { cursor: pointer; }
.media-thumb.is-square { aspect-ratio: 1 / 1; }

.video-embed iframe,
.media-thumb img,
.media-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(182, 30, 22, 0.9);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  padding-left: 4px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
button.media-thumb:hover .play-badge,
button.media-thumb:focus-visible .play-badge {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: var(--red-dark);
}

.media-type-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: rgba(25, 3, 0, 0.65);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.media-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.media-empty {
  text-align: center;
  color: var(--brown);
  font-style: italic;
  margin: 40px 0 0;
}

.media-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 48px 0 0;
}
.media-pagination button {
  min-width: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.media-pagination button:hover { border-color: var(--red); }
.media-pagination button[aria-current="true"] {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.media-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.media-card h3 {
  font-size: 1.05rem;
  margin: 4px 0 0;
}

.video-date {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
  font-weight: 700;
  margin: 0 0 6px;
}

.podcast-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.podcast-card-meta .video-date { margin: 0; }

.podcast-duration {
  font-size: 0.85rem;
  color: var(--brown);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.media-card audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.reviews-empty {
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 32px;
  text-align: center;
  background-color: var(--yellow);
  border-radius: var(--radius);
  color: var(--brown);
  font-style: italic;
}

.review-form {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px;
  background-color: var(--yellow);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.review-form h3 { margin: 0 0 4px; text-align: center; }
.review-form .btn { align-self: center; }

.optional-tag {
  font-weight: 400;
  font-size: 0.85em;
  opacity: 0.7;
}

/* About */
.about { padding: 96px 0; background-color: var(--red); }

.about .section-title { color: var(--cream); margin-bottom: 0; }
.about .btn-primary { background-color: var(--cream); color: var(--red); }
.about .btn-primary:hover { background-color: var(--white); }

.about-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "photo photo bio bio"
    "photo photo stat1 stat2"
    "quote quote quote quote"
    "cta cta cta cta";
  gap: 20px;
  margin-top: 40px;
}

.about-cell-photo { grid-area: photo; min-width: 0; }
.about-cell-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }

.about-cell-bio {
  grid-area: bio;
  background-color: var(--cream-light);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.about-cell-bio p { color: var(--black); margin: 0; font-size: 0.95rem; }

.about-cell-stat {
  background-color: var(--cream-light);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.about-cell-stat-years { grid-area: stat1; }
.about-cell-stat-books { grid-area: stat2; }
.about-stat-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--red); margin: 0; line-height: 1; }
.about-stat-label { font-size: 0.8rem; font-weight: 600; color: var(--brown); margin: 8px 0 0; text-transform: uppercase; letter-spacing: 0.04em; }

.about-cell-quote {
  grid-area: quote;
  background-color: var(--cream-light);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -18px rgba(25, 3, 0, 0.3);
  padding: 32px;
}
.about .quote {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--black);
}
.about .quote span {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--brown);
}

.about-cell-cta { grid-area: cta; display: flex; justify-content: center; }

/* Invite */
.invite { padding: 88px 0; background-color: var(--yellow); }

.invite-inner { max-width: 640px; margin: 0 auto; text-align: center; }

.invite-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 20px 0 36px;
}
.invite-list li {
  background-color: var(--cream-light);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown);
}

.invite-form {
  text-align: left;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.invite-form .btn { align-self: flex-start; }

.form-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-row input[type="date"] {
  font-family: var(--font-body);
  color: var(--black);
}

.form-row select {
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--white);
  color: var(--black);
}
.form-row select:focus { outline: 2px solid var(--red); }

/* Policy page */
.policy { padding: 72px 0 112px; }

.policy-inner { max-width: 720px; margin: 0 auto; }

.policy-updated {
  font-size: 0.85rem;
  color: var(--brown);
  opacity: 0.75;
  margin: 0 0 40px;
}

.policy h2 {
  font-size: 1.7rem;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(25, 3, 0, 0.1);
}
.policy h2:first-of-type { margin-top: 8px; padding-top: 0; border-top: none; }

.policy h3 {
  font-size: 1.15rem;
  margin: 28px 0 10px;
}

.policy ul {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--brown);
}
.policy li { margin-bottom: 6px; }

.policy-contact {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(25, 3, 0, 0.1);
  font-weight: 600;
}

/* Newsletter */
.newsletter { padding: 88px 0; text-align: center; }

.newsletter-inner { max-width: 560px; margin: 0 auto; }

.newsletter-form {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter-form input {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 999px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--white);
}
.newsletter-form input:focus { outline: 2px solid var(--red); }

.form-note { margin-top: 14px; font-weight: 600; color: var(--red); min-height: 1.2em; }

/* Contact */
.contact { padding: 88px 0 112px; background-color: var(--yellow); }

.contact-inner { max-width: 640px; margin: 0 auto; text-align: center; }

.contact-form { text-align: left; margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }

.form-row { display: flex; flex-direction: column; gap: 6px; }

.form-row label { font-weight: 600; font-size: 0.9rem; }

.form-row input, .form-row textarea {
  padding: 12px 16px;
  border-radius: 8px;
  border: 2px solid rgba(25, 3, 0, 0.15);
  font-family: var(--font-body);
  font-size: 1rem;
  background-color: var(--white);
  resize: vertical;
}
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--red); }

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
  border-color: var(--red);
}

.field-error {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
}
.field-error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background-color: var(--red); color: var(--white); font-size: 0.72rem; flex-shrink: 0; }
.form-row.has-error .field-error { display: flex; }

.contact-form .btn { align-self: flex-start; }

/* Footer */
.site-footer { background-color: var(--black); color: var(--cream); padding: 48px 0; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-footer .logo { color: var(--cream); }

.footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-nav a { color: var(--cream); text-decoration: none; font-size: 0.92rem; opacity: 0.85; }
.footer-nav a:hover { opacity: 1; color: var(--orange); }

.social-links { display: flex; gap: 18px; }
.social-links a { color: var(--cream); text-decoration: none; font-size: 0.92rem; opacity: 0.85; }
.social-links a:hover { opacity: 1; color: var(--orange); }

.copyright { width: 100%; font-size: 0.82rem; opacity: 0.6; margin: 8px 0 0; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner, .featured-inner {
    grid-template-columns: 1fr;
  }
  .hero-media { order: -1; max-width: 380px; margin: 0 auto; }
  .book-grid .book-card { flex-basis: 45%; }
  .review-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
  .series-grid { grid-template-columns: repeat(2, 1fr); }
  .about-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "photo photo"
      "bio bio"
      "stat1 stat2"
      "quote quote"
      "cta cta";
  }
  .about-cell-photo { max-width: 320px; margin: 0 auto; }
}

@media (max-width: 1150px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--cream-light);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px 28px;
    gap: 18px;
    border-bottom: 1px solid rgba(25, 3, 0, 0.08);
    display: none;
  }
  .site-nav.is-open { display: flex; }
}

@media (max-width: 720px) {
  .book-grid .book-card { flex-basis: 78%; }
  .book-grid-header .carousel-controls { display: none; }
  .review-cards-grid { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .series-grid { grid-template-columns: 1fr; }
  .contact-form .btn, .invite-form .btn { align-self: stretch; text-align: center; }
  .form-row-pair { grid-template-columns: 1fr; }
}

/* Book modal */
/* Now a native <dialog> (see index.html). The browser positions and centers a <dialog>
   in the viewport automatically once .showModal() is called, and z-index doesn't matter
   because the browser renders it in a separate "top layer" above everything else on the
   page -- so this rule only needs to describe how the panel itself should look, not how
   to center an overlay by hand the way the old .modal/.modal-overlay/.modal-panel trio
   had to. */
.modal {
  border: none;
  border-radius: 16px;
  background-color: var(--cream-light);
  width: min(640px, 100% - 48px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
/* [open] is the attribute the browser adds to a <dialog> while it's showing -- this is
   the direct replacement for the old ".modal.is-open { display: flex }" rule. */
.modal[open] {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
}

/* ::backdrop is a pseudo-element the browser renders behind a <dialog> automatically
   when it's opened with .showModal() -- this replaces the old .modal-overlay div, which
   had to be created, positioned, and click-to-close-wired by hand. */
.modal::backdrop {
  background-color: rgba(25, 3, 0, 0.55);
}

.modal-cover-wrap { min-width: 0; }
.modal-cover-wrap img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 14px 26px -14px rgba(25, 3, 0, 0.4);
}

.modal-info { min-width: 0; }
.modal-info h3 { margin-bottom: 6px; }

.modal-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 14px;
}

.modal-note { font-size: 0.85rem; opacity: 0.75; margin: 14px 0 0; }

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brown);
  cursor: pointer;
  border-radius: 50%;
}
.modal-close:hover { background-color: rgba(25, 3, 0, 0.08); }
.modal-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 560px) {
  .modal[open] {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 24px;
    text-align: center;
  }
  .modal-cover-wrap img { max-width: 180px; margin: 0 auto; }
}