/* ============================================
   JENNY FIGMENT — Components
   ============================================ */

/* ===== MASTHEAD (main site header) =====
   Centred author imprint: grouped nav on the left, wordmark in the middle,
   About / Contact / Kids Zone on the right, pinned on desktop. Kids Zone
   pages keep the .site-nav header below. */

.masthead {
  position: relative;
  z-index: var(--z-sticky);
  background: var(--cream-light);
  box-shadow: 0 1px 0 rgba(79, 61, 66, 0.12);
}

.masthead__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.75rem;
}

.masthead__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.masthead__links li {
  margin: 0;
}

.masthead__link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.masthead__link:hover,
.masthead__link:focus-visible,
.masthead__link[aria-current="page"],
.masthead__trigger[aria-expanded="true"] {
  background: rgba(226, 77, 134, 0.1);
  color: var(--pink-hot);
}

.masthead__link:focus-visible,
.masthead__brand:focus-visible,
.masthead__kids:focus-visible,
.masthead__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.masthead__caret {
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.masthead__trigger[aria-expanded="true"] .masthead__caret {
  transform: rotate(180deg);
}

/* No-JS fallback only: hover opens the panel in CSS (see .mega-panel), so the
   trigger and caret follow it. Once main.js adds .is-enhanced it drives
   hover itself and aria-expanded above covers these states. */
@media (hover: hover) and (min-width: 64em) {
  .masthead:not(.is-enhanced) .masthead__group:hover > .masthead__trigger {
    background: rgba(226, 77, 134, 0.1);
    color: var(--pink-hot);
  }

  .masthead:not(.is-enhanced) .masthead__group:hover .masthead__caret {
    transform: rotate(180deg);
  }
}

.masthead__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding-inline: var(--space-2);
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.masthead__wordmark {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.65rem);
  line-height: 1;
  color: var(--burgundy);
  white-space: nowrap;
}

.masthead__wordmark--sm {
  font-size: 1.2rem;
}

.masthead__tagline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--burgundy-light);
}

.masthead__tagline::before,
.masthead__tagline::after {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: rgba(79, 61, 66, 0.3);
}

.masthead__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.masthead__divider {
  width: 1px;
  height: 1.6rem;
  margin-inline: var(--space-1);
  background: rgba(79, 61, 66, 0.15);
}

.masthead__kids {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  background: var(--pink-hot);
  font-family: var(--font-kids);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.masthead__kids:hover,
.masthead__kids:focus-visible {
  color: var(--white);
  transform: translateY(-2px);
}

.masthead__kids:active {
  transform: scale(0.97);
}

.masthead__kids .sparkle {
  display: inline-block;
  animation: sparkle-spin 3s linear infinite;
}

/* Hamburger (mobile) */
.masthead__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.masthead__toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--burgundy);
}

.masthead__toggle:hover {
  background: var(--pink-glow);
}

/* Mobile: hamburger · wordmark · round Kids Zone button. The bar stays in
   normal flow (see the note on .site-nav below for why it isn't pinned). */
@media (max-width: 63.99em) {
  .masthead__row {
    grid-template-columns: 2.75rem 1fr 2.75rem;
    width: 100%;
    padding-inline: var(--space-3);
  }

  .masthead__nav,
  .masthead__links--right,
  .masthead__divider,
  .masthead__kids-label {
    display: none;
  }

  .masthead__brand { gap: 0.2rem; }

  .masthead__tagline {
    font-size: 0.53rem;
    letter-spacing: 0.22em;
  }

  .masthead__tagline::before,
  .masthead__tagline::after { display: none; }

  .masthead__right { gap: 0; }

  .masthead__kids {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.05rem;
  }
}

@media (min-width: 64em) {
  .masthead {
    position: sticky;
    top: 0;
  }

  .masthead.is-scrolled {
    box-shadow: 0 1px 0 rgba(43, 22, 27, 0.08), 0 10px 26px rgba(43, 22, 27, 0.1);
  }

  .masthead__row {
    gap: var(--space-4);
    padding-block: 0.75rem;
  }

  .masthead__toggle { display: none; }

  /* Pull the first link out by its own padding so the "Books" text, not its
     hover pill, lines up with the page content edge. */
  .masthead__nav--left .masthead__links {
    margin-left: -0.8rem;
  }
}

/* 1024–1280px: tighten so both link groups fit either side of the wordmark */
@media (min-width: 64em) and (max-width: 79.99em) {
  .masthead__link {
    padding-inline: 0.55rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
  }

  .masthead__nav--left .masthead__links { margin-left: -0.55rem; }
  .masthead__kids { padding-inline: 0.85rem; }
  .masthead__divider { margin-inline: 0; }
}

/* ── Drop panels ── */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--cream-light);
  border-top: 2px solid var(--pink-hot);
  box-shadow: 0 22px 40px rgba(43, 22, 27, 0.18);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease-smooth),
              transform var(--duration-fast) var(--ease-smooth),
              visibility 0s linear var(--duration-fast);
}

/* Invisible bridge over the gap between trigger and panel, so the pointer
   can travel down without the hover dropping. */
.mega-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.25rem;
}

.mega-panel--educators {
  border-top-color: var(--flora-green);
}

/* No-JS fallback: open on hover. With JS, .is-open is the only switch, so
   hover and click can't disagree about whether a panel is up. */
@media (hover: hover) and (min-width: 64em) {
  .masthead:not(.is-enhanced) .masthead__group:hover > .mega-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}

.masthead__group.is-open > .mega-panel {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

@media (max-width: 63.99em) {
  .mega-panel { display: none; }
}

.mega-panel__inner {
  display: flex;
  gap: var(--space-8);
  padding-block: 1.6rem 1.75rem;
}

.mega-panel__inner--cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 16rem;
}

/* Sized to the shelf, so the covers stay together on the left. */
.mega-panel__main {
  flex: none;
  min-width: 0;
}

/* "Where to buy" pinned to the panel's right edge. */
.mega-panel__aside {
  width: 14.5rem;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-8);
  border-left: 1px solid rgba(79, 61, 66, 0.12);
}

.mega-panel__label {
  margin: 0 0 var(--space-4);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy-light);
}

.mega-panel__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-panel__list li {
  margin: 0;
}

.mega-panel__list a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: none;
  transition: color var(--duration-fast);
}

/* No colour for aria-current here: the panel's trigger already marks the
   section you're in, and a permanently green link reads as stuck. */
.mega-panel__list a:hover,
.mega-panel__list a:focus-visible {
  color: var(--pink-hot);
}

.mega-panel--educators .mega-panel__list a:hover,
.mega-panel--educators .mega-panel__list a:focus-visible {
  color: #2f8a38;
}

.mega-panel__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pink-hot);
  text-decoration: none;
}

.mega-panel__more:hover {
  color: var(--burgundy);
}

.mega-books {
  display: grid;
  /* Fixed columns packed to the left, so the covers sit together as a shelf
     instead of spreading across the full panel width. */
  grid-template-columns: repeat(4, 8.5rem);
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-books li {
  margin: 0;
}

.mega-book {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  transition: opacity var(--duration-fast);
}

/* Fixed height, natural width: Lucky Penny is squarer than the series
   covers, and cropping it to 2:3 would cut the art. */
.mega-book__cover {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
}

.mega-book img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 9rem;
  border-radius: 3px;
  box-shadow: 2px 3px 0 rgba(43, 22, 27, 0.14);
}

/* Small sticker on the cover's corner, echoing the home page's
   "New book" pill, so the details line below stays the same for every book. */
.mega-book__badge {
  position: absolute;
  top: -0.45rem;
  right: -0.55rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--pink-hot);
  color: var(--white);
  font-family: var(--font-kids);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 0 0 2px var(--cream-light);
  transform: rotate(4deg);
}

.mega-book:hover,
.mega-book:focus-visible {
  opacity: 0.74;
}

.mega-book__title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--burgundy);
}

.mega-book[aria-current="page"] .mega-book__title {
  color: var(--pink-hot);
}

.mega-book__meta {
  font-size: 0.78rem;
  color: var(--burgundy-light);
}


.mega-panel__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: #f2f8f1;
}

.mega-panel__card p {
  margin: 0;
}

.mega-panel__card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--burgundy);
}

.mega-panel__card-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--burgundy-warm);
}

.mega-panel__card-cta {
  margin-top: 2px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #2f8a38;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(43, 22, 27, 0.18);
  transition: background var(--duration-fast);
}

.mega-panel__card-cta:hover,
.mega-panel__card-cta:focus-visible {
  background: #256e2c;
  color: var(--white);
}

/* ── Mobile drawer ── */
.masthead-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  overflow-y: auto;
  background: var(--cream-light);
  padding: 0 var(--space-4) var(--space-8);
}

.masthead-drawer.is-open {
  display: block;
}

.masthead-drawer__bar {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  justify-items: center;
  min-height: 3.75rem;
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-3);
  box-shadow: 0 1px 0 rgba(79, 61, 66, 0.12);
}

.masthead-drawer__close {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 10px;
  background: rgba(226, 77, 134, 0.14);
  cursor: pointer;
}

.masthead-drawer__close span {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: calc(50% - 1px);
  height: 2px;
  border-radius: 2px;
  background: var(--pink-hot);
  transform: rotate(45deg);
}

.masthead-drawer__close span + span {
  transform: rotate(-45deg);
}

.masthead-drawer__close:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.masthead-drawer__links {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.masthead-drawer__links li {
  margin: 0;
  border-bottom: 1px solid #f0e0d8;
}

.masthead-drawer__links li:last-child {
  border-bottom: 0;
}

.masthead-drawer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--burgundy);
  text-decoration: none;
}

.masthead-drawer__links a:hover,
.masthead-drawer__links a[aria-current="page"] {
  color: var(--pink-hot);
}

.masthead-drawer__hint {
  font-size: 0.85rem;
  font-weight: 500;
  color: #a58c8c;
}

.masthead-drawer__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.masthead-drawer__cta {
  padding: 0.95rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.masthead-drawer__cta--visit {
  background: #2f8a38;
  color: var(--white);
  box-shadow: 0 3px 0 rgba(43, 22, 27, 0.18);
}

.masthead-drawer__cta--kids {
  background: var(--pink-hot);
  font-family: var(--font-kids);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(250, 3, 107, 0.35);
}

@media (min-width: 64em) {
  .masthead-drawer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead__kids .sparkle { animation: none; }
  .mega-panel { transition: none; }
}

/* ===== NAVIGATION (Kids Zone pages) ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  /* Aged paper look with subtle grain */
  background-color: rgba(253, 246, 240, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Rough bottom edge instead of a clean line */
  border-bottom: none;
  box-shadow:
    0 1px 0 rgba(43,22,27,0.06),
    0 2px 0 rgba(43,22,27,0.03),
    0 3px 0 rgba(43,22,27,0.015),
    0 4px 16px rgba(43, 22, 27, 0.06);
}

/* Mobile: plain in-flow bar, not pinned. It sits at the top of the
   document like any other content and scrolls away with the page once
   you scroll past it — no fixed/sticky positioning, no safe-area offset
   math, and (as a side effect) no gap above it for content to show
   through, since it's just normal content in normal document flow. */
@media screen and (max-width: 63.99em) {
  .site-nav {
    position: static;
    background-color: #fdf6f0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-nav-h);
  gap: var(--space-4);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo-mark {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--pink-hot);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--white);
  flex-shrink: 0;
}

.site-nav__logo-text {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  color: var(--burgundy);
  line-height: 1.2;
  max-width: 12rem;
}

.site-nav__links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-1);
  align-items: center;
}

@media (min-width: 64em) {
  .site-nav__links {
    display: flex;
  }
}

.site-nav__links a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--burgundy-warm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
  white-space: nowrap;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  background-color: var(--pink-glow);
  color: var(--pink-hot);
}

.site-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Kids Zone CTA button in nav */
.btn-kids-zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--pink-hot);
  color: var(--white) !important;
  font-family: var(--font-kids);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow: 0 3px 12px rgba(250, 3, 107, 0.35);
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
}

.btn-kids-zone:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(250, 3, 107, 0.45);
  color: var(--white) !important;
}

.btn-kids-zone .sparkle {
  animation: sparkle-spin 3s linear infinite;
}

/* Below desktop nav breakpoint, Kids Zone lives in the drawer only (avoids crowding the bar) */
@media (max-width: 63.99em) {
  .site-nav__right > .btn-kids-zone {
    display: none;
  }
}

@keyframes sparkle-spin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
}

/* Mobile hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background-color: var(--pink-glow);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--pink-hot);
  outline-offset: 2px;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--burgundy);
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-smooth),
              opacity var(--duration-normal) var(--ease-smooth);
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 64em) {
  .nav-toggle {
    display: none;
  }
}

/* Mobile drawer */
.nav-drawer {
  display: none;
  position: fixed;
  inset: var(--site-nav-h) 0 0 0;
  background-color: var(--cream-paper);
  z-index: var(--z-dropdown);
  padding: var(--space-6);
  overflow-y: auto;
  border-top: 1px solid var(--pink-soft);
}

.nav-drawer.is-open {
  display: block;
}

.nav-drawer__links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6) 0;
}

.nav-drawer__links li {
  margin: 0;
  border-bottom: 1px solid var(--cream);
}

.nav-drawer__links a {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--burgundy);
  text-decoration: none;
}

.nav-drawer__links a:hover {
  color: var(--pink-hot);
}

@media (min-width: 64em) {
  .nav-drawer {
    display: none !important;
  }
}

/* Utilities */
.u-drawer-cta {
  width: 100%;
  justify-content: center;
  margin-top: 1rem;
}

/* Breadcrumbs */
.breadcrumb {
  margin-bottom: var(--space-8);
}

.breadcrumb--compact {
  margin-bottom: var(--space-6);
}

.breadcrumb__list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--burgundy-light);
  flex-wrap: wrap;
}

.breadcrumb__link {
  color: var(--pink-hot);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}


/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-fast) var(--ease-bounce),
    box-shadow var(--duration-fast) var(--ease-smooth),
    background-color var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
  min-height: 2.75rem;
}

/* Whimsy hand-drawn border effect via layered shadows */
.btn--primary {
  background-color: var(--pink-hot);
  color: var(--white);
  box-shadow:
    0 3px 0 rgba(43, 22, 27, 0.25),
    0 5px 15px rgba(250, 3, 107, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn--primary:hover {
  background-color: #e0005e;
  transform: translateY(-2px);
  box-shadow:
    0 5px 0 rgba(43, 22, 27, 0.2),
    0 8px 25px rgba(250, 3, 107, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(43, 22, 27, 0.25),
    0 2px 8px rgba(250, 3, 107, 0.25);
}

.btn--secondary {
  background-color: transparent;
  color: var(--burgundy);
  box-shadow:
    0 0 0 2px var(--burgundy),
    0 3px 0 rgba(43, 22, 27, 0.25),
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(43, 22, 27, 0.05);
}

.btn--secondary:hover {
  background-color: var(--burgundy);
  color: var(--cream-light);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 4px rgba(217, 112, 151, 0.35),
    0 5px 0 rgba(43, 22, 27, 0.22),
    0 10px 22px rgba(43, 22, 27, 0.18);
}

.btn--outline-pink {
  background-color: transparent;
  color: var(--pink-hot);
  box-shadow: 0 0 0 2px var(--pink-hot);
}

.btn--outline-pink:hover {
  background-color: var(--pink-hot);
  color: var(--white);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--pink-hot);
  padding-inline: var(--space-4);
}

.btn--ghost:hover {
  background: var(--pink-glow);
  transform: translateY(-2px);
}

.btn--lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-lg);
  min-height: 3.25rem;
}

.btn--sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  min-height: 2.25rem;
}

/* Disabled buttons: no “hover” motion; keep resting look */
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  pointer-events: none;
}

/* ===== STORYBOOK CARD ===== */
/*
   Raw scrap paper aesthetic:
   - Torn/rough polygon edges via clip-path
   - Visible paper grain background
   - Off-kilter rotation
   - Masking-tape strip on top
   - Multi-layer pencil-sketch shadow
*/
.storybook-card {
  background-color: var(--cream-paper);
  /* Paper grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 100px 100px;

  /* Torn paper edge polygon — jagged, asymmetric */
  clip-path: polygon(
    0% 2%, 4% 0%, 8% 2%, 14% 0%, 20% 1.5%, 28% 0%,
    36% 2%, 44% 0%, 52% 1%, 60% 0%, 68% 2%, 76% 0%,
    84% 1.5%, 92% 0%, 96% 2%, 100% 0%,
    100% 98%, 98% 100%, 94% 97.5%, 88% 100%, 82% 98%,
    74% 100%, 66% 97%, 58% 100%, 50% 98.5%,
    42% 100%, 34% 97%, 26% 100%, 18% 98%,
    10% 100%, 4% 97.5%, 0% 100%
  );

  padding: calc(var(--space-8) + 4px) var(--space-8) var(--space-8);
  position: relative;
  transition: transform var(--duration-normal) var(--ease-bounce),
              filter var(--duration-normal) var(--ease-smooth);
  /* Pencil-sketch multi-drop shadow */
  filter:
    drop-shadow(1px 2px 0 rgba(43,22,27,0.18))
    drop-shadow(2px 4px 0 rgba(43,22,27,0.10))
    drop-shadow(3px 6px 10px rgba(43,22,27,0.09));

  --card-rotation: -1.5deg;
  transform: rotate(var(--card-rotation));
}

.storybook-card:nth-child(even) {
  --card-rotation: 1.2deg;
  clip-path: polygon(
    0% 1.5%, 5% 0%, 11% 1%, 18% 0%, 25% 2%, 33% 0%,
    42% 1.5%, 51% 0%, 60% 2%, 69% 0%, 78% 1%, 87% 0%,
    93% 1.5%, 97% 0%, 100% 1%,
    100% 98.5%, 97% 100%, 91% 98%, 84% 100%, 76% 97.5%,
    68% 100%, 59% 98%, 50% 100%, 41% 97.5%,
    32% 100%, 23% 98%, 14% 100%, 6% 97.5%, 0% 100%
  );
}

.storybook-card:nth-child(3n) {
  --card-rotation: 0.6deg;
}

.storybook-card:hover {
  transform: rotate(0deg) translateY(-8px);
  filter:
    drop-shadow(2px 4px 0 rgba(43,22,27,0.15))
    drop-shadow(4px 8px 0 rgba(43,22,27,0.08))
    drop-shadow(0 20px 30px rgba(43,22,27,0.14));
}

/* Masking-tape strip across top */
.storybook-card::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 4.5rem;
  height: 1.4rem;
  background:
    /* Subtle crosshatch on the tape */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.25) 0px, rgba(255,255,255,0.25) 1px,
      transparent 1px, transparent 4px
    ),
    rgba(255, 200, 220, 0.6);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Second tape piece on some cards */
.storybook-card:nth-child(odd)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  right: 15%;
  transform: rotate(2deg);
  width: 3rem;
  height: 1.1rem;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.2) 0px, rgba(255,255,255,0.2) 1px,
      transparent 1px, transparent 4px
    ),
    rgba(255, 220, 180, 0.5);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}


/* ===== TESTIMONIAL CARD ===== */
/* Ruled composition notebook page look */
.testimonial-card {
  background-color: #FEFCF8;
  /* paper grain + ruled lines */
  background-image:
    /* Paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    /* Ruled lines */
    repeating-linear-gradient(
      transparent,
      transparent 1.65rem,
      rgba(255, 106, 151, 0.14) 1.65rem,
      rgba(255, 106, 151, 0.14) calc(1.65rem + 1px)
    );
  background-repeat: repeat, repeat;
  background-size: 80px 80px, auto;
  background-position: 0 0, 0 2.75rem;
  padding: var(--space-8) var(--space-8) var(--space-6);
  position: relative;
  /* Torn top & bottom edges */
  clip-path: polygon(
    0% 0%, 5% 1.5%, 12% 0%, 20% 2%, 30% 0%, 42% 1%, 55% 0%,
    68% 1.5%, 80% 0%, 90% 1%, 95% 0%, 100% 0%,
    100% 100%, 95% 98.5%, 87% 100%, 78% 98%, 68% 100%,
    55% 97.5%, 42% 100%, 30% 98%, 18% 100%, 8% 98.5%, 0% 100%
  );
  filter:
    drop-shadow(0 2px 0 rgba(43,22,27,0.12))
    drop-shadow(0 4px 12px rgba(43,22,27,0.08));
}

/* Red margin line */
.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 3rem;
  bottom: 0;
  width: 1px;
  background-color: rgba(250, 3, 107, 0.2);
  border-radius: 1px;
}

.testimonial-card__quote {
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--burgundy-warm);
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
  position: relative;
}

.testimonial-card__quote::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--pink-soft);
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
}

.testimonial-card__author {
  padding-left: var(--space-6);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--burgundy-light);
  text-align: left;
  margin: 0 0 0.125rem;
}

.testimonial-card__role {
  padding-left: var(--space-6);
  font-size: var(--text-xs);
  color: var(--pink-hot);
  text-align: left;
  margin: 0;
}

/* Stars */
.star-rating {
  display: flex;
  gap: 2px;
  color: var(--tony-amber);
  font-size: 1rem;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}


/* ===== SECTION HEADINGS ===== */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-hot);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--burgundy);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--burgundy-light);
  max-width: 52ch;
  line-height: 1.6;
  margin-bottom: var(--space-8);
}


/* ===== INK SPLATTER DIVIDER ===== */
.ink-divider {
  width: 100%;
  height: 3rem;
  overflow: hidden;
  line-height: 0;
  margin-block: var(--space-section);
}

.ink-divider svg {
  width: 100%;
  height: 100%;
}

.ink-divider--sm {
  height: 1.5rem;
  margin-block: var(--space-8);
}


/* ===== BOOK CARD ===== */
.book-card {
  background-color: var(--cream-paper);
  /* Scrap paper grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='0.065'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
  /* Rough border */
  clip-path: polygon(
    1% 0%, 99% 1%, 100% 99%, 98% 100%, 2% 99%, 0% 1%
  );
  overflow: visible;
  filter:
    drop-shadow(2px 3px 0 rgba(43,22,27,0.15))
    drop-shadow(1px 1px 0 rgba(43,22,27,0.1))
    drop-shadow(0 6px 16px rgba(43,22,27,0.09));
  transition: transform var(--duration-normal) var(--ease-bounce),
              filter var(--duration-normal) var(--ease-smooth);
  text-decoration: none;
  color: var(--burgundy);
  display: flex;
  flex-direction: column;
}

.book-card:hover {
  transform: translateY(-10px) rotate(1deg);
  filter:
    drop-shadow(3px 5px 0 rgba(43,22,27,0.12))
    drop-shadow(0 16px 30px rgba(43,22,27,0.15));
  color: var(--burgundy);
}

.book-card__cover {
  aspect-ratio: 2 / 3;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  overflow: hidden;
  position: relative;
}

.book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background-color: var(--tony-amber);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.book-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.book-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.book-card__tagline {
  font-size: var(--text-sm);
  color: var(--burgundy-light);
  margin-bottom: var(--space-4);
  flex: 1;
}

.book-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--page-accent, var(--pink-hot));
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.book-card__cta::after {
  content: '→';
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.book-card:hover .book-card__cta::after {
  transform: translateX(4px);
}


/* ===== RESOURCE CARD (for educators) ===== */
.resource-card {
  background-color: var(--cream-paper);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  height: 100%;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--cream);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.resource-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--icon-bg, var(--pink-glow));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.resource-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.resource-card__title {
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.resource-card__desc {
  font-size: var(--text-sm);
  color: var(--burgundy-light);
  flex: 1;
  margin-bottom: 0;
}

.resource-card__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pink-hot);
  text-decoration: none;
}

.resource-card__download:hover {
  color: var(--burgundy);
}


/* ===== FOOTER ===== */
.site-footer {
  background-color: var(--cream-light);
  color: var(--burgundy);
  padding-block: var(--space-12) var(--space-8);
  margin-top: 0;
  position: relative;
  border-top: 1px solid rgba(79, 61, 66, 0.1);
}

.site-footer::before {
  content: none;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

.site-footer__brand p {
  font-size: var(--text-sm);
  color: var(--burgundy-light);
  max-width: 28ch;
  margin-top: var(--space-3);
}

.site-footer__brand-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.1;
}

.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--burgundy-light);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer__links li {
  margin-bottom: var(--space-2);
}

.site-footer__links a {
  font-size: var(--text-sm);
  color: var(--burgundy-warm);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.site-footer__links a:hover {
  color: var(--pink-hot);
}

.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(217, 112, 151, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--burgundy);
  text-decoration: none;
  padding: 0;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-bounce);
}

.site-footer__social a:hover {
  background-color: rgba(217, 112, 151, 0.22);
  transform: translateY(-1px);
}

.site-footer__social-icon {
  display: none;
}

.site-footer__social a::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.site-footer__social a[aria-label="Facebook"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234f3d42' viewBox='0 0 24 24'%3E%3Cpath d='M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z'/%3E%3C/svg%3E");
}

.site-footer__social a[aria-label="Instagram"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234f3d42' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.site-footer__bottom {
  border-top: 1px solid rgba(79, 61, 66, 0.14);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--burgundy-light);
}

/* ===== FORM ELEMENTS ===== */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--burgundy);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--pink-hot);
  margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--burgundy);
  background-color: var(--white);
  border: 2px solid var(--cream);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--pink-hot);
  box-shadow: 0 0 0 3px rgba(250, 3, 107, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--burgundy-light);
  opacity: 0.55;
}

/* File input: keep native chooser behavior, style it like site buttons */
.form-input[type="file"] {
  appearance: auto;
  -webkit-appearance: auto;
  padding: var(--space-2) var(--space-3);
  line-height: 1.2;
  cursor: pointer;
}

.form-input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--pink-soft);
  border-radius: var(--radius-md);
  background: var(--cream-light);
  color: var(--burgundy);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast) var(--ease-bounce);
}

.form-input[type="file"]::-webkit-file-upload-button {
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--pink-soft);
  border-radius: var(--radius-md);
  background: var(--cream-light);
  color: var(--burgundy);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.form-input[type="file"]:hover::file-selector-button,
.form-input[type="file"]:focus::file-selector-button {
  background: var(--pink-glow);
  border-color: var(--pink-hot);
  transform: translateY(-1px);
}

/* Contact page submit button: keep lift, no tilt */
#contact-form .btn--primary:hover {
  transform: translateY(-2px);
}

.form-textarea {
  resize: vertical;
  min-height: 8rem;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232B161B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
}

.form-error {
  display: none;
  font-size: var(--text-xs);
  color: var(--error);
  margin-top: var(--space-1);
  align-items: center;
  gap: var(--space-1);
}

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

.form-group.has-error .form-error {
  display: flex;
}

/* Conditional form fields */
.conditional-field {
  display: none;
}

.conditional-field.is-visible {
  display: block;
}

/* Honeypot field for Formspree spam protection. Deliberately NOT the .sr-only
   pattern this used to use: a visually-hidden field stays in the accessibility
   tree and stays visible to password managers, so screen reader users and
   anyone with autofill were filling it in and having real submissions dropped
   as spam. display:none hides it from assistive tech and autofill both, while
   bots that parse the HTML and fill every input still fall into it. */
.form-honeypot {
  display: none !important;
}

/* Inline success/error banner shown after a Formspree submission.
   flex-basis: 100% makes it wrap onto its own line inside flex forms;
   harmless in ordinary block-flow forms. */
.form-status {
  flex: 1 1 100%;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}

.form-status[hidden] {
  display: none;
}

.form-status--success {
  background: rgba(56, 142, 60, 0.1);
  color: var(--success);
  border: 2px solid var(--success);
}

.form-status--error {
  background: rgba(211, 47, 47, 0.1);
  color: var(--error);
  border: 2px solid var(--error);
}

/* ===== BADGE / TAG ===== */
.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.badge--pink { background: var(--pink-soft); color: var(--burgundy); }
/* Book detail reader bands — use on all title pages for Ages / Grades consistency */
.badge--ages { background: var(--pink-soft); color: var(--burgundy); }
.badge--grades { background: rgba(123, 75, 148, 0.15); color: var(--jenny-purple); }
.badge--purple { background: rgba(123, 75, 148, 0.15); color: var(--jenny-purple); }
.badge--amber { background: rgba(212, 136, 58, 0.15); color: var(--tony-amber); }
.badge--green { background: rgba(107, 175, 107, 0.15); color: #3d7a3d; }
.badge--teal { background: rgba(58, 173, 168, 0.15); color: #267572; }
.badge--coming-soon { background: var(--tony-amber); color: var(--white); }

/* ===== HERO ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(1deg); }
  66% { transform: translateY(-6px) rotate(-0.5deg); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-up {
  animation: fade-up 0.7s var(--ease-smooth) both;
}

.animate-fade-up--delay-1 { animation-delay: 0.1s; }
.animate-fade-up--delay-2 { animation-delay: 0.2s; }
.animate-fade-up--delay-3 { animation-delay: 0.35s; }
.animate-fade-up--delay-4 { animation-delay: 0.5s; }