/* =============================================
   SIRLEY ANTORIANO — Joomla Template CSS
   The Root of My Journey / La raíz de mi viaje
   ============================================= */

:root {
  --red:    #dd3333;
  --red-hover: #bb2222;
  --black:  #111111;
  --gray:   #555555;
  --light:  #f5f5f5;
  --border: #e0e0e0;
  --white:  #ffffff;

  /* Gold / brown brand palette */
  --gold-900: #3b2200;
  --gold-800: #5a3a10;
  --gold-700: #7a5510;
  --gold-600: #9a6e18;
  --gold-500: #b07800;
  --gold-400: #c89a00;
  --gold-300: #d4a843;
  --gold-200: #e8c86a;
  --gold-100: #f5e6b8;
  --gold-50:  #fdf8ef;

  /* RGB versions for rgba() usage */
  --gold-900-rgb: 59, 34, 0;
  --gold-800-rgb: 90, 58, 16;
  --gold-700-rgb: 122, 85, 16;
  --gold-600-rgb: 154, 110, 24;
  --gold-500-rgb: 176, 120, 0;
  --gold-400-rgb: 200, 154, 0;
  --gold-300-rgb: 212, 168, 67;
  --gold-200-rgb: 232, 200, 106;
  --gold-100-rgb: 245, 230, 184;
  --gold-50-rgb:  253, 248, 239;
  --accent-rgb:   245, 166, 35;

  /* Accent orange (CTAs, highlights) */
  --accent:       #f5a623;
  --accent-hover: #f59e0b;
  --accent-light: #f9c200;

  /* Design tokens */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 50px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Focus visibility for keyboard users */
:focus-visible {
  outline: 2.5px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
button:focus-visible, a:focus-visible {
  border-radius: var(--radius-md);
}

body {
  font-family: 'Source Serif 4', Georgia, serif;
  background: var(--white);
  color: var(--black);
  line-height: 1.7;
  font-size: 18px;
}

a { color: var(--black); text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; display: block; }

/* Branded text selection */
::selection { background: rgba(var(--accent-rgb), .28); color: var(--gold-900); }
::-moz-selection { background: rgba(var(--accent-rgb), .28); color: var(--gold-900); }

/* ── NAV ─────────────────────────────────────── */
nav {
  border-bottom: 1px solid rgba(var(--gold-700-rgb),.14);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  /* Frosted-glass: translucent gold with backdrop blur (solid fallback first) */
  background: var(--gold-50);
  background: rgba(253, 248, 239, .72);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 6px 20px rgba(var(--gold-700-rgb),.06);
  overflow: visible;
  -webkit-transform: translateZ(0); /* force GPU layer on iOS to prevent clipping */
  transform: translateZ(0);
}

/* ── Nav logo: fountain pen handwriting effect ── */
.nav-logo {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--gold-900);
  overflow: visible;
  cursor: pointer;
  user-select: none;
}

.nav-logo-text {
  font-family: 'Allura', cursive;
  font-size: 1.85rem;
  color: var(--gold-900);
  white-space: nowrap;
  display: inline-block;
  line-height: 1;
}

.nav-logo-text .logo-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(3px);
}

.nav-logo.is-writing .nav-logo-text .logo-letter {
  animation: logo-letter-appear 0.1s ease forwards;
}

.nav-logo.has-animated .nav-logo-text .logo-letter {
  opacity: 1;
  transform: translateY(0);
}

@keyframes logo-letter-appear {
  to { opacity: 1; transform: translateY(0); }
}

/* Ink trail */
.nav-logo-ink {
  position: absolute;
  bottom: 2px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--gold-900-rgb),0) 0%, rgba(var(--gold-900-rgb),.18) 15%, rgba(var(--gold-900-rgb),.3) 50%, rgba(var(--gold-900-rgb),0) 100%);
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  width: 0%;
}

.nav-logo.is-writing .nav-logo-ink {
  animation: logo-ink-grow 2.6s cubic-bezier(.35,0,.2,1) forwards;
  opacity: 1;
}

@keyframes logo-ink-grow {
  0%   { width: 0%; opacity: 0; }
  5%   { opacity: 1; }
  88%  { width: 100%; opacity: 1; }
  95%  { opacity: 0; }
  100% { width: 100%; opacity: 0; }
}

/* Fountain pen cursor */
.nav-logo-pen {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  will-change: left, transform, opacity;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
/* Larger pen on mobile for visibility */
@media (max-width: 760px) {
  .nav-logo-pen svg {
    width: 28px;
    height: 28px;
  }
}

.nav-logo.is-writing .nav-logo-pen {
  animation: logo-pen-move 2.8s cubic-bezier(.35,0,.2,1) forwards;
  opacity: 1;
}

@keyframes logo-pen-move {
  0%   { left: 12px; top: 55%; transform: translateY(-50%) rotate(45deg); opacity: 1; }
  10%  { top: 52%; }
  20%  { top: 55%; }
  30%  { top: 53%; }
  40%  { top: 55%; }
  50%  { top: 52%; }
  60%  { top: 55%; }
  70%  { top: 53%; }
  80%  { top: 55%; }
  90%  { left: calc(100% - 12px); top: 55%; transform: translateY(-50%) rotate(45deg); opacity: 1; }
  100% { left: calc(100% - 8px); top: 45%; transform: translateY(-50%) rotate(30deg); opacity: 0; }
}

/* Subtle gold shimmer on hover */
.nav-logo:hover .nav-logo-text {
  background: linear-gradient(100deg, var(--gold-900) 25%, var(--gold-400) 50%, var(--gold-900) 75%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-position: -100% center;
  transition: background-position 1.1s ease;
}

/* Joomla menu module outputs a <ul> — we style it here */
nav ul,
.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li a,
.nav-links li a {
  display: block;
  padding: 0 1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-800);
  transition: color 0.15s;
  line-height: 64px;
}

nav ul li a:hover,
.nav-links li a:hover { color: var(--gold-500); }

/* Hide Joomla sub-menus in main nav */
nav ul .nav-child { display: none; }

.nav-links > li {
  position: relative;
}

.nav-books-dropdown {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  min-width: 340px;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  border: 1px solid rgba(var(--gold-700-rgb),.14);
  border-radius: 20px;
  background: rgba(255, 250, 244, .97);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 40px rgba(var(--gold-900-rgb),.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 130;
}

.nav-books-item:hover .nav-books-dropdown,
.nav-books-item:focus-within .nav-books-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-books-dropdown li a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(var(--gold-700-rgb),.08);
}

.nav-books-dropdown li a:hover,
.nav-books-dropdown li a:focus-visible {
  color: var(--gold-900);
  background: rgba(255,255,255,.96);
  border-color: rgba(var(--gold-700-rgb),.16);
  outline: none;
}

.nav-books-title,
.nav-books-meta {
  display: block;
}

.nav-books-copy {
  display: block;
  min-width: 0;
  flex: 1;
}

.nav-books-thumb {
  width: 42px;
  height: 58px;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(var(--gold-900-rgb), .14);
  background: rgba(var(--gold-700-rgb), .08);
}

.nav-books-thumb--placeholder {
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.45rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(160deg, #241912 0%, #6f4e24 55%, #d1a63c 100%);
}

.nav-books-title {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gold-900);
}

.nav-books-meta {
  margin-top: 0.28rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--gray);
}

#lang-toggle {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 2px solid var(--gold-700);
  background: none;
  color: var(--gold-800);
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  transition: all 0.15s;
  line-height: 1.4;
}

#lang-toggle:hover { background: var(--gold-700); color: var(--white); }

nav ul li.lang-item,
.nav-links li.lang-item {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  border-left: 1px solid rgba(var(--gold-700-rgb),.18);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-800);
}

/* ── SITE WRAPPER ─────────────────────────────── */
.site-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── HERO ────────────────────────────────────── */
.hero {
  border-bottom: 2px solid var(--black);
  padding: 3rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
}

.hero-intro {
  text-align: center;
}

.hero-intro h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 0.25rem;
}

.hero-intro h1 em {
  display: block;
  font-style: italic;
  font-size: 0.6em;
  color: var(--gray);
  margin-top: 0.3rem;
}

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--black);
  border-radius: var(--radius-lg);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  text-align: center;
}

@keyframes btn-gold-glow {
  0%,100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb),.55); }
  50%      { box-shadow: 0 0 0 9px rgba(var(--accent-rgb),0);   }
}

.btn:hover {
  background: var(--accent);
  color: var(--gold-900);
  border-color: var(--accent);
  transform: translateY(-2px);
  animation: btn-gold-glow 1.2s ease-in-out infinite;
}

.btn:active {
  transform: translateY(0);
}

/* ── Small modern polish: smoother link/hover transitions ── */
a:not(.btn):not(.hero-book-card) {
  transition: color 0.2s ease, opacity 0.2s ease;
}

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

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

.btn-disabled {
  background: var(--light);
  color: var(--gray);
  border-color: var(--border);
  cursor: default;
}

.btn-disabled:hover {
  background: var(--light);
  color: var(--gray);
}

/* ── BOOK COVER ───────────────────────────────── */
.book-cover-placeholder {
  width: 200px;
  aspect-ratio: 2/3;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-align: center;
  padding: 1.5rem;
  margin: 0 auto;
  position: relative;
}

.book-cover-placeholder::after {
  content: '';
  position: absolute;
  bottom: -6px; right: -6px;
  width: 100%; height: 100%;
  border: 2px solid var(--black);
  z-index: -1;
}

.book-cover-placeholder .cover-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.book-cover-placeholder .cover-sub {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.7;
}

.book-cover-placeholder .cover-line {
  width: 30px;
  height: 2px;
  background: var(--red);
  margin: 0.75rem auto;
}

.book-cover-placeholder .cover-author {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cover-hint {
  font-size: 0.6rem;
  opacity: 0.5;
  margin-top: 1rem;
  line-height: 1.4;
}


.book-cover-image {
  width: 200px;
  aspect-ratio: 2/3;
  object-fit: cover;
  margin: 0 auto;
  display: block;
  background: var(--light);
}

.hero-books-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 250px));
  gap: 1.8rem;
  align-items: start;
  justify-content: center;
}

.hero-book-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--black);
}

.hero-book-card:hover .hero-book-cover-wrap {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 18px 28px rgba(0,0,0,0.12), 0 40px 70px rgba(0,0,0,0.18);
}

.hero-book-cover-wrap {
  position: relative;
  border-radius: 7px;
  overflow: visible;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 14px 30px rgba(0,0,0,0.12);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-book-cover-wrap .book-cover-image {
  width: 100%;
  max-width: 300px;
  border-radius: 7px;
  display: block;
}

/* Overlay removed — clean Apple-style float, no dark cover */
.hero-book-overlay { display: none; }

/* ── AVAILABLE BADGE (shimmer pill) ─────────────── */
@keyframes cs-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%)  skewX(-15deg); }
}
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(245, 166, 35, 0.65); }
  50%       { box-shadow: 0 0 0 8px rgba(245, 166, 35, 0);    }
}

.avail-badge {
  position: absolute;
  top: -12px;
  right: -14px;
  background: linear-gradient(135deg, var(--accent), #f7c56e, #e8880a);
  color: var(--gold-900);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  overflow: hidden;
  white-space: nowrap;
  z-index: 10;
  animation: glow-breathe 2.5s ease-in-out infinite;
  pointer-events: none;
}

.avail-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: cs-shimmer 2.2s ease-in-out infinite;
}

/* ── AUTHOR — centered Option B ───────────────────── */
/* ── Author — overlap card ───────────────────────── */
.author-overlap {
  position: relative;
  padding-top: 75px;
  display: flex;
  justify-content: center;
}

.author-photo-ring {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--white);
  box-shadow: 0 14px 34px rgba(var(--gold-900-rgb), 0.22);
  z-index: 2;
}

.author-photo-circle {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.author-card {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(180deg, var(--gold-50), var(--white));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 96px 3rem 2.6rem;
  text-align: center;
  box-shadow: 0 22px 55px rgba(var(--gold-700-rgb), 0.10);
}

.author-prose {
  max-width: 36rem;
  margin: 0 auto;
}

.author-card .author-prose blockquote {
  border-left: none;
  padding: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--black);
  line-height: 1.5;
  margin: 0 auto 1.2rem;
}

.author-prose p {
  font-size: 0.98rem;
}

.author-gallery-btn {
  margin-top: 1.2rem;
  display: inline-block;
}

/* ── Author script subtitle ──────────────────────── */
.author-subtitle {
  font-family: 'Allura', cursive;
  font-size: 2rem;
  line-height: 1;
  color: var(--red);
  margin: -0.2rem 0 1.1rem;
}

@media (max-width: 600px) {
  .author-card { padding: 80px 1.4rem 2rem; border-radius: 16px; }
  .author-card .author-prose blockquote { font-size: 1.12rem; }
}

/* ── BOOK DETAIL PAGE ─────────────────────────────── */
.book-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3.5rem;
}

.book-breadcrumb {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  color: var(--gray);
  margin-bottom: 1.6rem;
}
.book-breadcrumb a { color: var(--red); }
.book-breadcrumb .crumb-sep { margin: 0 0.5rem; color: var(--gold-300); }

.book-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: center;
}

.book-hero-cover .book-cover-image {
  width: 100%;
  max-width: 260px;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(var(--gold-900-rgb), 0.22);
}
.book-hero-cover .book-cover-placeholder { max-width: 260px; }

.book-hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  margin: 0.4rem 0 0.2rem;
}

.book-hero-tagline {
  font-family: 'Allura', cursive;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--red);
  margin-bottom: 1.4rem;
}

.book-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.book-hero-actions .btn,
.book-hero-actions .btn-rmj-activities,
.book-hero-actions .btn-bibi-activities,
.book-hero-actions .btn-bibi-game {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  margin-top: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(var(--gold-700-rgb), 0.12);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.book-hero-actions .btn:hover,
.book-hero-actions .btn-rmj-activities:hover,
.book-hero-actions .btn-bibi-activities:hover,
.book-hero-actions .btn-bibi-game:hover {
  transform: translateY(-2px);
}

.book-hero-actions .btn:active,
.book-hero-actions .btn-rmj-activities:active,
.book-hero-actions .btn-bibi-activities:active,
.book-hero-actions .btn-bibi-game:active {
  transform: translateY(0);
}

.book-hero-actions .btn.btn-red {
  background: linear-gradient(180deg, #fff6f4 0%, #fde7e3 100%);
  color: #b33d36;
  border-color: rgba(222, 67, 57, 0.18);
  box-shadow: 0 10px 24px rgba(222, 67, 57, 0.12);
}

.book-hero-actions .btn.btn-red:hover {
  background: linear-gradient(180deg, #fff8f6 0%, #fce0dc 100%);
  color: #a8342e;
  border-color: rgba(222, 67, 57, 0.24);
  animation: none;
}

.book-hero-actions .btn-rmj-activities,
.book-hero-actions .btn-bibi-activities {
  background: linear-gradient(180deg, #f5fff9 0%, #e4f8ec 100%);
  color: #188d56;
  border-color: rgba(31, 184, 106, 0.18);
  box-shadow: 0 10px 24px rgba(31, 184, 106, 0.10);
}

.book-hero-actions .btn-rmj-activities:hover,
.book-hero-actions .btn-bibi-activities:hover {
  background: linear-gradient(180deg, #f8fffb 0%, #dcf4e6 100%);
  color: #137645;
  border-color: rgba(31, 184, 106, 0.24);
  filter: none;
}

.book-hero-actions .btn-bibi-game {
  background: linear-gradient(180deg, #f5f9ff 0%, #e7efff 100%);
  color: #2d63d9;
  border-color: rgba(56, 124, 246, 0.18);
  box-shadow: 0 10px 24px rgba(56, 124, 246, 0.10);
}

.book-hero-actions .btn-bibi-game:hover {
  background: linear-gradient(180deg, #f7fbff 0%, #dfe9ff 100%);
  color: #214fba;
  border-color: rgba(56, 124, 246, 0.24);
  filter: none;
}

.book-hero-actions .btn-rmj-activities .btn-3d-icon,
.book-hero-actions .btn-bibi-activities .btn-3d-icon,
.book-hero-actions .btn-bibi-game .btn-3d-icon {
  animation: none;
}

.book-coming-note {
  font-family: 'Source Serif 4', serif;
  color: var(--gray);
  font-size: 1.02rem;
  margin-bottom: 1rem;
  max-width: 30rem;
}


.btn-ghost-gold {
  background: transparent;
  border: 2px solid var(--gold-700);
  color: var(--gold-900);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.btn-ghost-gold:hover {
  background: var(--gold-50);
  border-color: var(--gold-700);
  color: var(--gold-900);
}

.book-about {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) 1;
  max-width: 720px;
}

.book-back { margin-top: 2.5rem; }
.book-back-link {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-900);
}
.book-back-link:hover { color: var(--red); }

@media (max-width: 760px) {
  .book-hero {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    text-align: center;
    justify-items: center;
  }
  .book-hero-actions { justify-content: center; }
  .book-coming-note { margin-left: auto; margin-right: auto; }
  .book-about { margin-left: auto; margin-right: auto; }
}

/* ── EVENTS — accordion album cards ──────────────── */
.ev-accordion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}

.ev-accordion-item { display: flex; flex-direction: column; contain: layout paint; }

.ev-accordion-card {
  appearance: none;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
  display: block;
  width: 100%;
}

.ev-accordion-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.16); }
.ev-accordion-item.open .ev-accordion-card { border-radius: 6px 6px 0 0; }

/* ── GALLERY IMAGE LOADING (skeleton shimmer) ──── */
@keyframes gallery-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.gallery-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e0e0e0 25%, #c8c8c8 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: gallery-shimmer 1.5s infinite;
  z-index: 0;
}

/* Cover images: auto-reveal fallback in case onload fails */
.ev-accordion-cover img {
  opacity: 0;
  transition: opacity .4s ease;
  position: relative;
  z-index: 1;
  animation: gallery-auto-reveal 2.5s ease 1s forwards;
}

.ev-accordion-cover img.loaded {
  opacity: 1;
  animation: none;
  transition: none; /* Instant reveal like Facebook */
}

/* Inner photo cards: wait for actual load, strong skeleton visible */
.ev-photo-card img {
  opacity: 0;
  transition: opacity .3s ease;
  position: relative;
  z-index: 1;
}

.ev-photo-card img.loaded {
  opacity: 1;
}

@keyframes gallery-auto-reveal {
  to { opacity: 1; }
}

/* Hide skeleton when image is loaded */
.ev-accordion-cover img.loaded ~ .gallery-skeleton,
.ev-photo-card img.loaded ~ .gallery-skeleton {
  display: none;
}

/* Strong Facebook-style skeleton for photo cards */
.ev-photo-card .gallery-skeleton {
  background: linear-gradient(90deg, #b0b0b0 25%, #e0e0e0 50%, #b0b0b0 75%);
  background-size: 200% 100%;
}

.ev-accordion-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Album cover image cycling */
.ev-accordion-cover .album-cycle-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transform: scale(1.03) !important;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1 !important;
  animation: none !important;
}
.ev-accordion-cover .album-cycle-img.active {
  opacity: 1 !important;
  transform: scale(1.0) !important;
  z-index: 2 !important;
}
/* Ensure skeleton stays hidden when cycling */
.ev-accordion-cover .album-cycle-img.loaded ~ .gallery-skeleton {
  display: none !important;
}

.ev-accordion-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ev-accordion-card:hover .ev-accordion-cover img { transform: scale(1.06); }

.ev-accordion-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 5;
  pointer-events: none;
}

/* ── "New" badge on gallery albums/videos ─────────── */
.new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, var(--accent), #e8880a);
  color: var(--gold-900);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  z-index: 5;
  pointer-events: none;
  animation: glow-breathe 2.5s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(245,166,35,.4);
}
/* On video cards, shift New badge to right so it doesn't overlap Video badge */
.cine-vid-frame .new-badge {
  left: auto;
  right: 10px;
}

.ev-accordion-plus {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--black);
  line-height: 1;
  transition: transform 0.3s ease;
}

.ev-accordion-item.open .ev-accordion-plus { transform: rotate(45deg); }

.ev-accordion-info {
  padding: 12px 14px;
  background: var(--white);
}

.ev-accordion-info h4 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  margin-bottom: 2px;
  color: var(--black);
}

.ev-accordion-info span {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  color: var(--gray);
}

.ev-accordion-see-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-900);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.ev-accordion-card:hover .ev-accordion-see-all {
  color: var(--gold-500);
}

.ev-accordion-see-all-arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
  margin-left: 6px;
}

.ev-accordion-card:hover .ev-accordion-see-all-arrow {
  background: var(--gold-300);
  transform: translateX(3px);
}

/* Expand panel */
.ev-accordion-expand {
  overflow: hidden;
  max-height: 0;
  background: var(--light);
  border-radius: 0 0 6px 6px;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
  will-change: max-height;
}

.ev-accordion-expand[hidden] { display: block !important; } /* override hidden, use max-height instead */
.ev-accordion-item.open .ev-accordion-expand { max-height: 2000px; }

.ev-accordion-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 3px;
}

/* Individual photo tiles inside accordion */
.ev-photo-card {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  appearance: none;
  border: none;
  padding: 0;
  background: var(--light);
  cursor: pointer;
}

.ev-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ev-photo-card:hover img { transform: scale(1.08); }

.ev-photo-hover {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
}

.ev-photo-card:hover .ev-photo-hover { background: rgba(0,0,0,0.28); }

/* ── MODERN LIGHTBOX ──────────────────────────────── */

/* Backdrop */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.lightbox[hidden] {
  display: none;
}

/* Top bar */
.lightbox-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  z-index: 10002;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}

.lightbox-topbar > * {
  pointer-events: auto;
}

.lightbox-counter {
  color: rgba(255,255,255,0.8);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lightbox-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(4px);
}

.lightbox-close:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.08);
}

/* Stage */
.lightbox-stage {
  position: absolute;
  inset: 3.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.lightbox-image {
  max-width: 100vw;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-image.loaded {
  opacity: 1;
}

.lightbox-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2a2a2a 25%, #444 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: gallery-shimmer 1.5s infinite;
  z-index: 0;
}

.lightbox-image.loaded ~ .lightbox-skeleton {
  display: none;
}

/* Navigation arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
  z-index: 10001;
  backdrop-filter: blur(4px);
}

.lightbox-arrow:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-arrow--prev { left: 1rem; }
.lightbox-arrow--next { right: 1rem; }

/* Bottom bar */
.lightbox-bottombar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem;
  z-index: 10002;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  pointer-events: none;
}

.lightbox-caption {
  color: rgba(255,255,255,0.9);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

/* Mobile */
@media (max-width: 640px) {
  .lightbox-stage {
    padding: 3rem 0;
  }
  .lightbox-arrow {
    display: none !important;
  }
  .lightbox-topbar {
    padding: 0.75rem 1rem;
  }
  .lightbox-bottombar {
    padding: 1rem;
  }
  .lightbox-caption {
    font-size: 0.85rem;
  }
}

.hero-book-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
}

.hero-book-copy strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--black);
}

.hero-book-copy .book-tagline {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #8a7a62;
  letter-spacing: 0.02em;
  line-height: 1.4;
}


/* ── TWO-COLUMN LAYOUT ────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  padding: 3.5rem 0;
  align-items: start;
}

.two-col--full {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ── MAIN CONTENT ─────────────────────────────── */
.main-content > section {
  padding: 3rem 0;
  /* Softer divider: hairline that fades out toward the edges */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent) 1;
}

.main-content > section:last-child { border-bottom: none; border-image: none; }

.section-tag {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(221, 51, 51, .09);
  padding: 0.4em 0.9em;
  border-radius: var(--radius-lg);
  margin-bottom: 0.7rem;
}

.section-book-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  font-style: italic;
  color: #3b1f0a;
  margin-bottom: 0.3rem;
}

.bibi-book-name {
  font-family: 'Nunito', 'Source Sans 3', sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  margin-bottom: 0.3rem;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,.10));
  line-height: 1.1;
}
.bibi-book-name .t-bibis  { color: #1565c0; }
.bibi-book-name .t-brave  { color: #e85c00; }
.bibi-book-name .t-flight { color: #1565c0; }

.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.lead {
  font-size: 1.1rem;
  color: var(--gray);
  margin-bottom: 1rem;
}

.prose p { margin-bottom: 1rem; color: var(--gray); line-height: 1.75; }

.prose blockquote {
  border-left: 4px solid var(--red);
  padding: 0.4rem 1.2rem;
  margin: 1.5rem 0;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--black);
}

.feature-book-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}

.feature-book-cover-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}


.feature-book-cover {
  width: 220px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
  background: var(--light);
}


.author-photo-slot img,
.author-photo {
  width: 220px;
  height: 220px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 3px solid var(--black);
}

.photo-placeholder {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray);
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 1rem;
}

.photo-placeholder small {
  font-size: 0.65rem;
  margin-top: 0.5rem;
  opacity: 0.6;
}

/* ── EDITIONS ─────────────────────────────────── */
.editions-lead {
  color: var(--gray); margin-bottom: 0; line-height: 1.6; font-size: .95rem;
}

.editions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.editions-grid--single {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}

.editions-grid--three {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.15rem;
}
.editions-grid--three .edition-slot {
  flex: 0 1 calc(50% - 0.6rem);
  max-width: none;
  align-items: stretch;
}

.editions-grid--three .edition-slot:last-child {
  flex-basis: 100%;
  max-width: 100%;
}

/* Single-edition books (Bibi, Semillas): one clean RMJ-style card, centered */
.editions-grid--solo {
  display: flex;
  justify-content: center;
}
.editions-grid--solo .edition-slot {
  width: 100%;
  max-width: 540px;
}

.editions-grid--single .edition-card-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.editions-grid--single .edition-cover {
  width: 100%;
  max-width: 240px;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}


.editions-grid--single .edition-flag {
  justify-content: center;
}

.editions-grid--single .edition-card-body {
  width: 100%;
}

/* ── Bibi two-column layout with sticky sidebar ── */
.bibi-layout {
  display: block;
}

.bibi-layout--sidebar {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
}

.bibi-main {
  flex: 1;
  min-width: 0;
}

.bibi-video-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  border-left: 1px solid #e8e0d4;
  padding: 6px 0 0 24px;
}

.bvs-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bvs-tag {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c0392b;
}

.bvs-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  color: #3b1f0a;
  margin-top: -4px;
}

.bvs-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0d8cc;
}

.bvs-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #aaa;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.bvs-tab.on {
  color: #c0392b;
  border-bottom-color: #c0392b;
}

.bvs-video {
  width: 100%;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  background: #000;
}

.bvs-quote {
  font-style: italic;
  font-size: .8rem;
  color: #888;
  border-left: 3px solid #e0d8cc;
  padding-left: 10px;
  line-height: 1.6;
}

.bvs-btn {
  display: block;
  padding: 11px 16px;
  background: #c0392b;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 3px 0 #922b21;
  transition: transform .1s, box-shadow .1s;
}

.bvs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #922b21;
}

/* hide sidebar on mobile, show video section normally */
@media (max-width: 900px) {
  .bibi-layout--sidebar {
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 1.4rem;
  }
  .bibi-video-sidebar {
    width: 100%;
    border-left: none;
    border-top: 1px solid #e8e0d4;
    padding: 22px 0 0;
    position: static;
  }
  .bvs-video { max-width: 480px; }
}

/* ── Bibi video section ── */
.video-lead {
  font-size: .95rem;
  color: var(--gray);
  margin-bottom: 1.6rem;
  text-align: center;
}

.bibi-video-tabs {
  max-width: 720px;
  margin: 0 auto;
}

.bvt-btns {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0d8cc;
  margin-bottom: 0;
}

.bvt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: #aaa;
  transition: color .15s, border-color .15s;
}

.bvt-btn.on {
  color: #c0392b;
  border-bottom-color: #c0392b;
}

.bvt-pane { margin-top: 20px; }

.bibi-video-player {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  display: block;
  background: #000;
}

.bibi-extras {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
}

.bibi-hero-actions .btn-bibi-activities,
.bibi-extras .btn-bibi-activities,
.bibi-extras .btn-bibi-game {
  margin-top: 0;
}

.bibi-hero-actions {
  align-items: center;
}

.bibi-extras .btn-bibi-activities,
.bibi-extras .btn-bibi-game {
  font-size: .75rem;
  padding: 10px 20px;
}

/* Edition slot — card + button below */
.edition-slot {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: stretch;
}

/* Edition card with book cover image */
.edition-card-inner {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.edition-cover {
  width: 82px;
  flex-shrink: 0;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  display: block;
}

.edition-card-body { flex: 1; min-width: 0; }

.edition-card {
  border: 1px solid rgba(var(--gold-700-rgb), .1);
  border-radius: 22px;
  padding: 1rem 1rem 0.95rem;
  background: var(--white);
  box-shadow: 0 14px 28px rgba(var(--gold-900-rgb), .07);
  transition: box-shadow .18s, transform .15s;
  flex: 1;
}

.edition-card:hover {
  box-shadow: 0 18px 34px rgba(var(--gold-900-rgb), .1);
  transform: translateY(-2px);
}
.edition-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.55rem;
}

.edition-flag-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
}

.edition-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.98rem;
  line-height: 1.28;
  margin-bottom: 0.35rem;
}

.edition-card p {
  font-size: 0.84rem;
  color: var(--gray);
  margin-bottom: 0;
  line-height: 1.55;
}

/* Button sits below the card, full width */
.edition-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 22px;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
}

.editions-grid--three .edition-slot:last-child .edition-card-inner {
  max-width: 760px;
}

.media-intro {
  color: var(--gray);
  margin-bottom: 1.5rem;
  max-width: 560px;
}

.event-group + .event-group {
  margin-top: 2.5rem;
}

.event-group-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.event-card {
  border: 2px solid var(--black);
  background: var(--white);
  appearance: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.event-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--light);
  display: block;
}

.event-card.empty::before {
  content: 'Add event photo';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.9rem;
  color: var(--gray);
  background: var(--light);
  border-bottom: 1px solid var(--border);
}

.event-card.empty img {
  display: none;
}

.event-card-body {
  padding: 1.1rem;
}

.event-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  margin-bottom: 0.45rem;
}

.event-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  margin-bottom: 0;
}

.event-card p {
  color: var(--gray);
  font-size: 0.9rem;
}

.gallery-section-block + .gallery-section-block {
  margin-top: 2.5rem;
}

.gallery-media-grid,


.gallery-media-card,
.gallery-video-card {
  border: 2px solid var(--black);
  background: var(--white);
}

.gallery-media-card img,
.gallery-video-card video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--light);
}

.gallery-media-card figcaption,
.gallery-video-card figcaption {
  padding: 0.9rem 1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.86rem;
  color: var(--gray);
}

.gallery-empty-card {
  border: 2px dashed var(--border);
  padding: 1.25rem;
  margin-top: 1rem;
}

.gallery-empty-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  margin-bottom: 0.45rem;
}

.gallery-empty-card p {
  color: var(--gray);
}

.gallery-preview-shell {
  margin-top: 1.25rem;
}

.gallery-preview-controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.gallery-nav-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-size: 1.1rem;
  cursor: pointer;
}

.gallery-nav-btn:hover {
  background: var(--black);
  color: var(--white);
}

.gallery-preview-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2rem) / 3);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 0.5rem;
}

.gallery-preview-card {
  appearance: none;
  border: 2px solid var(--black);
  background: var(--white);
  padding: 0;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}

.gallery-preview-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery-preview-card figcaption {
  padding: 0.85rem 0.95rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.gallery-preview-card strong {
  color: var(--black);
  font-size: 0.92rem;
  font-weight: 700;
}

.gallery-page {
  padding: 2.5rem 0 3rem;
}

.media-section + .media-section {
  margin-top: 2.5rem;
}

.gallery-media-card,
.gallery-preview-card {
  font: inherit;
}

.gallery-media-card {
  appearance: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.gallery-media-card:hover,
.gallery-preview-card:hover,
.gallery-nav-btn:hover {
  transform: translateY(-1px);
}

.lightbox-open {
  overflow: hidden;
}







/* ── PAGE HEADER ──────────────────────────────── */
.page-header {
  padding: 3rem 0 2rem;
  border-bottom: 3px solid var(--black);
}

.page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

.page-header p {
  color: var(--gray);
  margin-top: 0.5rem;
  font-style: italic;
}













/* ── CONTACT ──────────────────────────────────── */
.contact-section { padding: 3rem 0; }

.contact-form {
  max-width: 580px;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cf-row { display: flex; gap: 1rem; }
.cf-row--2 > .cf-field { flex: 1; }

.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cf-field label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
}

.contact-form input,
.contact-form textarea {
  border: 2px solid #d0d0d0;
  padding: 0.75rem 1rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  background: var(--white);
  resize: vertical;
  transition: border-color 0.2s;
  border-radius: 2px;
}

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--black); }

.contact-form textarea { min-height: 130px; }

.cf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.cf-email-alt {
  font-size: 0.82rem;
  color: var(--gray);
}

.cf-email-alt a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}

.cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 50px;
  border: none;
  background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 100%);
  color: var(--gold-900);
  box-shadow: 0 4px 14px rgba(184,134,11,.25);
  transition: transform .12s, box-shadow .2s, filter .15s;
  min-width: 180px;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
}
.cf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184,134,11,.35);
  filter: brightness(1.05);
}
.cf-submit:active {
  transform: translateY(0);
}
.cf-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}
.cf-submit .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(26,18,0,.25);
  border-top-color: var(--gold-900);
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
  display: none;
  flex-shrink: 0;
}
.cf-submit.is-loading .spinner {
  display: inline-block;
}
.cf-submit.is-loading .cf-label {
  display: none;
}
@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

/* ── CONTACT SUCCESS CARD ─────────────────────── */
@keyframes cf-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.97); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes cf-bounce-icon {
  0%, 100% { transform: translateY(0);    }
  40%       { transform: translateY(-12px); }
  70%       { transform: translateY(-5px);  }
}

.cf-success-card {
  animation: cf-pop .5s cubic-bezier(.22,1,.36,1) both;
  background: var(--white);
  border: 2px solid #d4f5b8;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  max-width: 540px;
}
/* Gradient header band — matches the confirmation email header */
.cf-success-header {
  background: linear-gradient(135deg, #d4f5b8 0%, #b8e8ff 100%);
  padding: 2.1rem 2rem 1.7rem;
}
.cf-success-content {
  padding: 1.8rem 2rem 2rem;
}
.cf-success-icon {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: .6rem;
  display: block;
  animation: cf-bounce-icon .9s ease .3s both;
}
.cf-success-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  color: #1e3a10;
  margin-bottom: .35rem;
}
.cf-success-subtitle {
  font-family: 'Source Sans 3', sans-serif;
  font-style: italic;
  font-size: .98rem;
  color: #4a7a30;
  margin: 0;
}
.cf-success-body {
  font-size: 1rem;
  color: var(--gray);
  line-height: 1.75;
  margin-bottom: 1rem;
  font-family: 'Source Sans 3', sans-serif;
}
.cf-success-confirm {
  background: #f0fce8;
  border-left: 4px solid #5a8a40;
  border-radius: 8px;
  padding: .7rem 1rem;
  font-size: .92rem;
  color: #2d6a1e;
  font-family: 'Source Sans 3', sans-serif;
  margin-bottom: 1.1rem;
  text-align: left;
}
.cf-success-spam {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fffbe6;
  border: 2px solid #f5c200;
  border-radius: 12px;
  padding: 1rem 1.1rem;
  font-size: .88rem;
  color: #7a5c00;
  font-family: 'Source Sans 3', sans-serif;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 1.2rem;
}
.cf-success-spam-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.cf-success-list {
  background: #eef7f1;
  border: 1px solid #cfe7d6;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  font-size: .9rem;
  color: #2d6a1e;
  font-family: 'Source Sans 3', sans-serif;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.cf-reset-btn {
  font-size: .88rem;
  padding: 10px 26px;
  background: transparent;
  color: var(--black);
  border: 2px solid var(--border);
}
.cf-reset-btn:hover { background: var(--light); border-color: #aaa; }


/* ── FOOTER ───────────────────────────────────── */
footer.site-footer {
  border-top: 3px solid var(--black);
  background: var(--black);
  color: rgba(255,255,255,.7);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  margin-top: 0;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
}

.footer-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-tagline {
  font-style: italic;
  color: rgba(255,255,255,.55);
  font-size: 0.85rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  text-decoration: none;
}

.social-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb),.08);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.25rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: rgba(255,255,255,.4);
  font-size: 0.72rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

footer.site-footer a { color: rgba(255,255,255,.5); text-decoration: none; }
footer.site-footer a:hover { color: var(--accent); }

/* ── AMAZON PILL BADGE ───────────────────────────── */
.amz-pill-badge {
  position: absolute;
  top: -12px;
  left: -10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--accent), #f7c56e, #e8880a);
  color: var(--gold-900);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 10;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  animation: glow-breathe 2.5s ease-in-out infinite;
}

.amz-pill-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: cs-shimmer 2.2s ease-in-out infinite;
}
.amz-pill-badge svg { flex-shrink: 0; position: relative; z-index: 1; }
.amz-pill-badge span { position: relative; z-index: 1; }


/* Placeholder cover (shown until real art is uploaded) */
.book-cover-placeholder {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem 1rem;
  color: #fff;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.28), transparent 55%),
    linear-gradient(160deg, #7d9fdc 0%, #5a78bd 45%, #3f5aa0 100%);
  box-shadow: inset 0 0 60px rgba(255,255,255,0.12);
}
.book-cover-placeholder .placeholder-kicker {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.book-cover-placeholder .placeholder-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

/* ── HONEY COMING SOON BUTTON ────────────────────── */
@keyframes honey-shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%)  skewX(-15deg); }
}
@keyframes honey-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb),0.5), 0 4px 18px rgba(var(--accent-rgb),0.25); }
  50%       { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0),   0 4px 28px rgba(var(--accent-rgb),0.45); }
}
@keyframes bee-hover {
  0%, 100% { transform: translateY(0)   rotate(-5deg); }
  50%       { transform: translateY(-4px) rotate(4deg);  }
}

.btn-honey-cs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, var(--accent), #f7c56e, #e8880a);
  color: var(--gold-900);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 0 #b86800, 0 6px 18px rgba(var(--accent-rgb),.35);
  animation: honey-pulse 2.2s ease-in-out infinite;
  margin-top: 0.5rem;
  transition: transform .12s, box-shadow .12s;
}
.btn-honey-cs:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b86800, 0 10px 24px rgba(var(--accent-rgb),.4);
}
.btn-honey-cs:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b86800, 0 4px 10px rgba(var(--accent-rgb),.3);
}

.btn-honey-cs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: honey-shimmer 2.4s ease-in-out infinite;
}

.btn-honey-cs__bee {
  font-size: 1rem;
  animation: bee-hover 1.8s ease-in-out infinite;
  display: inline-block;
  position: relative;
  z-index: 1;
}

/* Unified 3D button icon bounce */
.btn-3d-icon {
  font-size: 1.05rem;
  display: inline-block;
  animation: btn-icon-bounce 2s ease-in-out infinite;
}
@keyframes btn-icon-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


.bibi-action-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.bibi-action-group .btn-honey-cs,
.bibi-action-group .btn-bibi-game,
.bibi-action-group .btn-bibi-activities {
  width: min(100%, 320px);
  min-height: 58px;
  justify-content: center;
  margin-top: 0;
  text-align: center;
}

/* ── BIBI COMING SOON POPUP ─────────────────────── */
.bibi-overlay {
  position: fixed; inset: 0;
  background: rgba(10,20,5,0.62);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  animation: bibi-overlay-in .35s ease both;
}
.bibi-overlay[hidden] { display: none; }
@keyframes bibi-overlay-in { from{opacity:0} to{opacity:1} }

.bibi-popup {
  position: relative;
  background: linear-gradient(160deg,#daf5ff 0%,#f0fce8 55%,#fffde6 100%);
  border-radius: 24px;
  width: 100%; max-width: 680px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.6) inset;
  animation: bibi-popup-rise .55s cubic-bezier(.22,1,.36,1) both;
  display: grid; grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) { .bibi-popup { grid-template-columns: 1fr; } }
@keyframes bibi-popup-rise {
  from{opacity:0;transform:translateY(50px) scale(.94)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}

/* Left panel */
.bibi-popup-left {
  position: relative;
  background: linear-gradient(160deg,#b8e8ff 0%,#d4f5b8 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 2rem 1.5rem 0; min-height: 340px; overflow: hidden;
}
/* Mini clouds */
.bibi-mc {
  position: absolute; background: rgba(255,255,255,.75); border-radius: 40px;
  animation: bibi-cloud linear infinite;
}
.bibi-mc::before,.bibi-mc::after {
  content:''; position:absolute; background:rgba(255,255,255,.75); border-radius:50%;
}
.bibi-mc1{width:70px;height:22px;top:8%;left:-80px;animation-duration:18s}
.bibi-mc1::before{width:34px;height:34px;top:-18px;left:12px}
.bibi-mc1::after {width:24px;height:24px;top:-10px;left:36px}
.bibi-mc2{width:50px;height:16px;top:22%;left:-60px;animation-duration:24s;animation-delay:-7s;opacity:.6}
.bibi-mc2::before{width:24px;height:24px;top:-14px;left:8px}
.bibi-mc2::after {width:18px;height:18px;top:-8px;left:26px}
@keyframes bibi-cloud{from{transform:translateX(0)}to{transform:translateX(220px)}}
/* Sparkles */
.bibi-sp{position:absolute;pointer-events:none;animation:bibi-sparkle 3s ease-in-out infinite;opacity:0;font-size:1rem}
@keyframes bibi-sparkle{0%{opacity:0;transform:translateY(0) scale(.5)}45%{opacity:1;transform:translateY(-18px) scale(1)}100%{opacity:0;transform:translateY(-32px) scale(.3)}}
/* Butterfly */
.bibi-butterfly{position:absolute;bottom:32%;left:6%;font-size:1.1rem;z-index:6;pointer-events:none;animation:bibi-bf 5s ease-in-out infinite}
@keyframes bibi-bf{0%{transform:translate(0,0)}30%{transform:translate(8px,-12px) rotate(-10deg)}60%{transform:translate(-4px,-6px) rotate(6deg)}100%{transform:translate(0,0)}}
/* Bee trail */
.bibi-bee-trail{position:absolute;top:22%;right:20%;display:flex;flex-direction:column;gap:4px;pointer-events:none;z-index:8;animation:bibi-trail-in .5s ease both 1s}
@keyframes bibi-trail-in{from{opacity:0}to{opacity:1}}
.bibi-bee-trail span{font-size:.85rem;animation:bibi-twinkle 2s ease-in-out infinite}
.bibi-bee-trail span:nth-child(2){animation-delay:.4s;font-size:.65rem;opacity:.7}
.bibi-bee-trail span:nth-child(3){animation-delay:.8s;font-size:.5rem;opacity:.5}
@keyframes bibi-twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
/* Bee SVG animations */
.bibi-bee-wrap{position:absolute;top:10%;right:6%;width:80px;height:80px;z-index:10;animation:bibi-fly-in 1s cubic-bezier(.22,1,.36,1) both,bibi-hover 2.6s ease-in-out 1s infinite;filter:drop-shadow(0 6px 14px rgba(230,180,0,.4))}
@keyframes bibi-fly-in{from{opacity:0;transform:translate(-140px,60px) rotate(-20deg) scale(.3)}to{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}}
@keyframes bibi-hover{0%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(3deg)}50%{transform:translateY(-4px) rotate(-2deg)}75%{transform:translateY(-14px) rotate(2deg)}100%{transform:translateY(0) rotate(0deg)}}
.bibi-eye-l,.bibi-eye-r{animation:bibi-blink 3.8s ease-in-out infinite}
.bibi-eye-r{animation-delay:.15s}
@keyframes bibi-blink{0%,85%,100%{transform:scaleY(1)}90%{transform:scaleY(.07)}}
.bibi-wing-l{animation:bibi-wflap .16s linear infinite alternate;transform-origin:50% 90%}
.bibi-wing-r{animation:bibi-wflap .16s linear infinite alternate-reverse;transform-origin:50% 90%}
@keyframes bibi-wflap{from{transform:scaleY(1) rotate(-8deg)}to{transform:scaleY(.65) rotate(8deg)}}
/* Cover */
.bibi-cover-wrap{position:relative;z-index:5;animation:bibi-cover-rise 1s cubic-bezier(.22,1,.36,1) both .4s;filter:drop-shadow(0 16px 32px rgba(0,0,0,.28))}
@keyframes bibi-cover-rise{from{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
.bibi-cover-wrap img{display:block;width:155px;border-radius:6px}
/* Flowers row */
.bibi-flowers-row{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:flex-end;height:34px;font-size:1.1rem;padding:0 4px;pointer-events:none}
.bibi-flowers-row span{display:inline-block;animation:bibi-sway 2.8s ease-in-out infinite alternate;transform-origin:bottom center}
.bibi-flowers-row span:nth-child(even){animation-direction:alternate-reverse}
@keyframes bibi-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* Right panel */
.bibi-popup-right{padding:2rem 1.8rem 2rem 1.6rem;display:flex;flex-direction:column;justify-content:center;gap:.85rem}
.bibi-popup-tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-400);font-family:sans-serif;font-weight:700}
.bibi-popup-title{font-size:1.7rem;color:#1e3a10;line-height:1.2;font-family:Georgia,serif}
.bibi-popup-title em{color:var(--gold-400);font-style:normal}
.bibi-popup-desc{font-size:.88rem;color:#4a5e38;line-height:1.65;font-family:sans-serif}

/* Notify form */
.bibi-notify-label{display:block;font-size:.78rem;font-family:sans-serif;font-weight:700;color:#2d4a1e;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.bibi-notify-row{display:flex;border-radius:50px;overflow:hidden;box-shadow:0 3px 14px rgba(0,0,0,.13)}
.bibi-notify-input{flex:1;border:2px solid #e8d88a;border-right:none;border-radius:50px 0 0 50px;padding:.65rem 1.1rem;font-size:.88rem;font-family:sans-serif;outline:none;background:#fffef5;color:#333;transition:border-color .2s;min-width:0}
.bibi-notify-input:focus{border-color:var(--accent)}
.bibi-notify-btn{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,var(--accent-light),var(--accent));border:none;border-radius:0 50px 50px 0;padding:.65rem 1.2rem;font-size:.82rem;font-family:sans-serif;font-weight:700;color:#3a2000;cursor:pointer;text-transform:uppercase;letter-spacing:.05em;transition:filter .2s,transform .18s ease,box-shadow .18s ease;white-space:nowrap;box-shadow:0 10px 22px rgba(var(--accent-rgb),.20)}
.bibi-notify-btn:hover{filter:brightness(1.08)}
.bibi-notify-btn:disabled{opacity:.92;cursor:wait}
.bibi-notify-privacy{font-size:.72rem;color:#8a9a78;font-family:sans-serif;margin-top:.35rem}
.bibi-notify-success{background:#ecfce5;border:1px solid #7bce6a;border-radius:10px;padding:.7rem 1rem;font-size:.88rem;font-family:sans-serif;color:#2d6a1e;font-weight:600;margin-top:.5rem}
.bibi-notify-success[hidden],.bibi-notify-error[hidden]{display:none}
.bibi-notify-error{background:#fdecea;border:1px solid #e57373;border-radius:10px;padding:.7rem 1rem;font-size:.88rem;font-family:sans-serif;color:#b71c1c;margin-top:.5rem}

/* Close button */
.bibi-popup-close{position:absolute;top:.8rem;right:.8rem;background:rgba(255,255,255,.82);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555;box-shadow:0 2px 8px rgba(0,0,0,.12);z-index:20;transition:background .2s}
.bibi-popup-close:hover{background:#fff}

/* ── BIBI GAME BUTTON ────────────────────────────── */
.btn-bibi-game {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.8rem;
  padding: 13px 28px;
  background: linear-gradient(135deg, #4d96ff 0%, #2563eb 100%);
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 50px;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 0 #1a4ab5, 0 6px 18px rgba(37,99,235,.35);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn-bibi-game:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #1a4ab5, 0 10px 24px rgba(37,99,235,.4);
}
.btn-bibi-game .btn-3d-icon { animation-delay: .2s; }
.btn-bibi-game:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1a4ab5, 0 4px 10px rgba(37,99,235,.3);
}

/* ── Activities button (matches existing Bibi buttons) ── */
.btn-bibi-activities {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 0.8rem; padding: 13px 28px;
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 50px; border: none; cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 0 #15803d, 0 6px 18px rgba(22,163,74,.35);
  transition: transform .12s, box-shadow .12s;
}
.btn-bibi-activities:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #15803d, 0 10px 24px rgba(22,163,74,.4);
}
.btn-bibi-activities:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #15803d;
}
.btn-bibi-activities .btn-3d-icon { animation-delay: .4s; }

/* ── RMJ button group (Order Your Copy + Book Activities) ── */
.rmj-btn-group {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem; margin-top: 1rem;
}

/* Override the global .btn/.btn-red inside this group to match pill style */
.rmj-btn-group .btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 26px;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 50px; border: none; line-height: 1;
  margin-top: 0;
  transition: transform .12s, filter .15s;
  animation: none;
}
.rmj-btn-group .btn:hover {
  transform: translateY(-2px); filter: brightness(1.08);
  background: var(--red); color: var(--white); border-color: transparent;
  animation: none;
}
.rmj-btn-group .btn:active { transform: translateY(1px); filter: brightness(.95); }
.rmj-btn-group .btn-red {
  background: #cc2222; color: var(--white);
  box-shadow: 0 4px 14px rgba(204,34,34,.35);
}

/* ── RMJ Activities button — pill, matches Order Your Copy ── */
.btn-rmj-activities {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 50px; border: none; cursor: pointer;
  text-decoration: none; line-height: 1;
  box-shadow: 0 4px 0 #15803d, 0 6px 18px rgba(22,163,74,.35);
  transition: transform .12s, box-shadow .12s, filter .2s;
}
.btn-rmj-activities:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #15803d, 0 10px 24px rgba(22,163,74,.4);
  filter: brightness(1.08);
}
.btn-rmj-activities:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #15803d;
}
.btn-rmj-activities .btn-3d-icon { animation-delay: .6s; }

/* ── RMJ Poster Section (Option A — image left, content right) ── */
.rmj-poster-section { padding: 0; }

.rmj-poster-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: .5rem 0 1rem;
}

.rmj-poster-img-wrap {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  flex-shrink: 0; align-self: start;
}
.rmj-poster-img { width: 100%; height: auto; display: block; }
/* Ensure hidden attribute wins even when display:block is set */
.rmj-poster-img[hidden] { display: none !important; }

.rmj-poster-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #a0522d; margin-bottom: .5rem;
}
.rmj-poster-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem; color: #2a1a00; line-height: 1.15;
  margin-bottom: .3rem;
}
.rmj-poster-author {
  font-style: italic; color: #7a4a2a; font-size: .92rem;
  margin-bottom: .9rem;
}
.rmj-poster-quote {
  border-left: 3px solid #a0522d; padding-left: 1rem;
  font-style: italic; color: #7a4a2a; font-size: .92rem;
  line-height: 1.65; margin-bottom: .9rem;
}
.rmj-poster-body {
  font-size: .92rem; color: #555; line-height: 1.7; margin-bottom: .7rem;
}
.rmj-poster-invite {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-size: 1.05rem; color: #a0522d;
  margin-bottom: 1.1rem;
}
.btn-rmj-poster-amz {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 26px;
  background: #cc2222; color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 50px; border: none;
  text-decoration: none; line-height: 1;
  box-shadow: 0 4px 14px rgba(204,34,34,.3);
  transition: transform .12s, filter .15s;
}
.btn-rmj-poster-amz:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-rmj-poster-amz:active { transform: translateY(1px); }

@media (max-width: 620px) {
  .rmj-poster-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .rmj-poster-img-wrap { max-width: 240px; margin: 0 auto; }
  .rmj-poster-title { font-size: 1.5rem; }
}

.activities-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.2rem 2.8rem;
}

.activities-page-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 1.8rem;
}

.activities-page-lead {
  color: var(--gray);
  line-height: 1.75;
  margin: 0 auto;
}

.activities-page-shell {
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 32px 100px rgba(0,0,0,.12);
  overflow: hidden;
}

.bibi-section-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(249, 194, 0, .16);
  color: #a56a00;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  animation: glow-breathe 2.5s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 8px rgba(var(--accent-rgb),.3); }
  50%       { filter: brightness(1.15); box-shadow: 0 0 20px rgba(var(--accent-rgb),.6); }
}


.act-header--page {
  border-radius: 0;
}

.act-body--page {
  max-height: none;
}

.act-footer--page {
  border-top: 1px solid #eee5d3;
}

/* ── Modal header ── */
.act-header {
  background: linear-gradient(135deg, #1a1200 0%, #3a2600 50%, #1e1600 100%);
  padding: 1.8rem; position: relative; overflow: hidden; flex-shrink: 0;
}
/* Green variant — used for RMJ popup */
.act-header--green {
  background: linear-gradient(135deg, #14532d 0%, #16a34a 55%, #4ade80 100%);
}
.act-header--green .act-header-badge {
  background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #d1fae5;
}
.act-header--green .act-bee-wrap { background: rgba(255,255,255,.18); }
.act-header::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(var(--accent-rgb),.2) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(255,210,60,.1) 0%, transparent 50%);
}
.act-header-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.1rem; }

/* Bee tile */
@keyframes act-bee-hover {
  0%, 100% { transform: translateY(0)    rotate(-4deg) scale(1);    }
  35%       { transform: translateY(-9px) rotate(3deg)  scale(1.05); }
  65%       { transform: translateY(-4px) rotate(-2deg) scale(1.02); }
}
@keyframes act-bee-spark {
  0%   { opacity: 0;  transform: translateY(0)    scale(.6); }
  25%  { opacity: .9; transform: translateY(-8px)  scale(1);  }
  100% { opacity: 0;  transform: translateY(-28px) scale(.4); }
}
.act-bee-wrap {
  flex-shrink: 0; width: 68px; height: 68px; border-radius: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,210,60,.25);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb),.08), 0 8px 24px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.act-bee-emoji {
  font-size: 2.3rem; line-height: 1; display: block;
  animation: act-bee-hover 3.6s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(var(--accent-rgb),.55));
}
.bee-spark {
  position: absolute; font-size: .65rem; pointer-events: none;
  animation: act-bee-spark 3s ease-in-out infinite; opacity: 0;
}
.bee-spark:nth-child(2) { top: -6px;  left: 8px;   animation-delay: 0s;   }
.bee-spark:nth-child(3) { top: 4px;   right: -8px;  animation-delay: 1.2s; }
.bee-spark:nth-child(4) { bottom: 0;  left: 4px;   animation-delay: 2.1s; }

.act-header-text { flex: 1; }
.act-header-badge {
  display: inline-block;
  background: rgba(var(--accent-rgb),.2); border: 1px solid rgba(var(--accent-rgb),.35);
  color: #f5c842; font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .14rem .52rem; border-radius: 50px; margin-bottom: .38rem;
}
.act-header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--white);
  line-height: 1.08;
  margin: 0;
}
.act-header-sub {
  font-family: 'Source Sans 3', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  margin-top: .28rem;
}

.act-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6); font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.act-close:hover { background: rgba(255,255,255,.2); color: var(--white); }

/* ── Body + grid ── */
.act-body { padding: 1.3rem; overflow-y: auto; flex: 1; }
.act-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(162px,1fr)); gap: .9rem; }

.act-section-head {
  margin-bottom: 1rem;
}

.act-section-kicker {
  margin: 0 0 .3rem;
  color: #9a6b1f;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.act-section-title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #24160a;
  line-height: 1.12;
}

.act-featured-video {
  margin-bottom: 1.8rem;
}

.act-featured-video__card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
  gap: 1rem;
  background: linear-gradient(145deg, #12203d, #1d2f59);
  border-radius: 24px;
  padding: 1rem;
  box-shadow: 0 18px 40px rgba(12, 24, 54, .22);
}

.act-featured-video__player {
  background: #0b1223;
  border-radius: 18px;
  min-height: 260px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.act-featured-video__media {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  background: #0b1223;
}

.act-featured-video__info {
  padding: .4rem .35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.act-featured-video__eyebrow {
  margin: 0 0 .45rem;
  color: #8fd5ff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.act-featured-video__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.14;
  color: var(--white);
}

.act-video-list {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.act-lyrics-card {
  margin-top: 1rem;
  background: linear-gradient(145deg, #fff8df, #fffef7);
  border: 1px solid #f0d88a;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(150, 109, 18, .10);
  overflow: hidden;
}

.act-lyrics-card__toggle {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1.1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9f6b00;
  background: linear-gradient(135deg, rgba(247, 210, 120, .24), rgba(255,255,255,.82));
}

.act-lyrics-card__toggle::-webkit-details-marker { display: none; }

.act-lyrics-card__toggle::after {
  content: '+';
  float: right;
  color: #b57b0e;
  font-size: 1rem;
}

.act-lyrics-card[open] .act-lyrics-card__toggle::after {
  content: '−';
}

.act-lyrics-card__head {
  padding: 1rem 1.1rem .7rem;
  background: linear-gradient(135deg, rgba(247, 209, 120, .42), rgba(255,255,255,.72));
  border-bottom: 1px solid rgba(176, 120, 0, .12);
}

.act-lyrics-card__eyebrow {
  margin: 0 0 .3rem;
  color: #a16b00;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.act-lyrics-card__title {
  margin: 0 0 .25rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #2b1806;
}

.act-lyrics-card__sub {
  margin: 0;
  color: #7a664b;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}

.act-lyrics-card__body {
  padding: 1rem 1.1rem 1.15rem;
}

.act-lyrics-card__line {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.55;
  color: #2f2217;
}

.act-lyrics-card__gap {
  height: .55rem;
}

.act-card--video-mini .act-card__preview {
  height: 180px;
  background: #0f172a;
}

.act-downloads-section {
  border-top: 1px solid #efe5d5;
  padding-top: 1.6rem;
}

/* ── Activity card ── */
.act-card {
  display: flex; flex-direction: column;
  background: #fafafa; border: 1.5px solid #ebebeb;
  border-radius: 16px; overflow: hidden;
  text-decoration: none; color: var(--black);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.act-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
  border-color: #d4b44a;
}

/* Colour stripe per type */
.act-card__strip { height: 5px; width: 100%; flex-shrink: 0; }
.act-card--image .act-card__strip { background: linear-gradient(90deg,#a855f7,#d946ef); }
.act-card--video .act-card__strip { background: linear-gradient(90deg,#0ea5e9,#2563eb); }
.act-card--pdf   .act-card__strip { background: linear-gradient(90deg,#ef4444,#f87171); }
.act-card--zip   .act-card__strip { background: linear-gradient(90deg,var(--accent-hover),#fbbf24); }
.act-card--doc   .act-card__strip { background: linear-gradient(90deg,#3b82f6,#60a5fa); }
.act-card--other .act-card__strip { background: linear-gradient(90deg,#6b7280,#9ca3af); }

/* Preview thumbnail area */
.act-card__preview {
  width: 100%; height: 130px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0; background: #f3f4f6;
}
.act-card__preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.act-card:hover .act-card__preview img { transform: scale(1.05); }

.act-card__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #111827;
}

.preview-badge--video {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

/* PDF.js canvas */
.act-pdfjs-wrap { width: 100%; height: 100%; position: relative; }
.act-pdfjs-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg,#fef2f2,#fee2e2);
}
.act-pdfjs-spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(153,27,27,.2); border-top-color: #ef4444;
  border-radius: 50%; animation: act-spin .8s linear infinite;
}
@keyframes act-spin { to { transform: rotate(360deg); } }
.act-pdfjs-canvas { width: 100%; height: 100%; object-fit: cover; display: none; }

/* Badge overlay (PDF label on corner) */
.preview-badge {
  position: absolute; top: .45rem; right: .45rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .14rem .42rem; border-radius: 50px;
  background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;
}

/* Non-image placeholder (ZIP, DOC) */
.act-card__preview-icon {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem;
}
.act-card--zip   .act-card__preview-icon { background: linear-gradient(145deg,#fffbeb,#fef3c7); }
.act-card--doc   .act-card__preview-icon { background: linear-gradient(145deg,#eff6ff,#dbeafe); }
.act-card--other .act-card__preview-icon { background: linear-gradient(145deg,#f9fafb,#f3f4f6); }
.act-card__preview-icon .big-icon  { font-size: 3rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.1)); }
.act-card__preview-icon .type-badge {
  font-size: .6rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: .18rem .5rem; border-radius: 50px;
}
.act-card--zip   .type-badge { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.act-card--doc   .type-badge { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
.act-card--other .type-badge { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; }

/* Card info text */
.act-card__info {
  padding: .72rem .85rem .5rem;
  display: flex; flex-direction: column; gap: .18rem; flex: 1;
}
.act-card__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.28;
}
.act-card__meta  {
  font-family: 'Source Sans 3', sans-serif;
  font-size: .76rem;
  font-weight: 600;
  color: #8f887f;
}

/* ── Option D: Pulse glow download button ── */
@keyframes act-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(var(--gold-500-rgb),.6), 0 3px 10px rgba(var(--gold-500-rgb),.25); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--gold-500-rgb),0),  0 3px 10px rgba(var(--gold-500-rgb),.25); }
  100% { box-shadow: 0 0 0 0   rgba(var(--gold-500-rgb),0),  0 3px 10px rgba(var(--gold-500-rgb),.25); }
}
@keyframes act-icon-rock {
  0%, 100% { transform: rotate(0deg) scale(1);     }
  20%       { transform: rotate(-15deg) scale(1.1); }
  50%       { transform: rotate(10deg) scale(1.05); }
  75%       { transform: rotate(-5deg) scale(1.02); }
}
.act-card__dl {
  display: flex; align-items: center; justify-content: center; gap: .38rem;
  width: calc(100% - 1.6rem); margin: 0 .8rem .8rem;
  background: linear-gradient(135deg, var(--gold-500), var(--accent));
  color: var(--white); border: none; border-radius: 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .6rem .4rem;
  animation: act-pulse-ring 2s ease-out infinite;
  flex-shrink: 0;
}
.dl-ico { font-size: .95rem; display: inline-block; animation: act-icon-rock 2s ease-in-out infinite; }

.act-card__dl--video {
  background: linear-gradient(135deg, #155dfc, #0ea5e9);
  animation: none;
}

/* ── Activity gallery (view-only, opens lightbox) ── */
.act-gallery-section { padding: 0 1.4rem 1.2rem; }
.act-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin-top: .8rem;
}
.act-gallery-item {
  position: relative; border: none; padding: 0; cursor: pointer;
  border-radius: 10px; overflow: hidden;
  background: #f0ebe3;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform .15s, box-shadow .15s;
  aspect-ratio: 1 / 1;
}
.act-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: filter .2s;
}
.act-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.act-gallery-item:hover img { filter: brightness(.88); }
.act-gallery-zoom {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.18);
  pointer-events: none;
}
.act-gallery-item:hover .act-gallery-zoom { opacity: 1; }

/* ── Coming-soon state ── */
.act-coming-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 2rem; text-align: center; gap: .8rem;
}
.act-cs-bee { font-size: 3rem; animation: act-bee-hover 3.6s ease-in-out infinite; display: block; }
.act-cs-title { font-size: 1.3rem; font-weight: 700; color: #2a1a00; margin: 0; }
.act-cs-sub { font-size: .9rem; color: #666; margin: 0; max-width: 340px; line-height: 1.5; }

/* ── Modal footer ── */
.act-footer {
  padding: .8rem 1.4rem 1rem; text-align: center;
  font-size: .69rem; color: #c0c0c0; border-top: 1px solid #f0f0f0;
  flex-shrink: 0; background: #fafafa;
}

/* Mobile */
@media (max-width: 480px) {
  .act-grid { grid-template-columns: repeat(2, 1fr); }
  .act-header { padding: 1.4rem; }
  .act-header-title { font-size: 1.7rem; }
  .act-bee-wrap { width: 54px; height: 54px; }
  .act-bee-emoji { font-size: 1.9rem; }
  .btn-bibi-activities { display: flex !important; align-items: center; justify-content: center; width: 100%; text-align: center; box-sizing: border-box; }
}

@media (max-width: 820px) {
  .act-featured-video__card {
    grid-template-columns: 1fr;
  }

  .act-featured-video__player {
    min-height: 220px;
  }

  /* 4-book hero shelf wraps to 2×2 before it gets too tight on tablets */
  .hero-books-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 1.6rem;
  }
}

/* ── BEE CURSOR — Bibi book card only ────────────── */
.hero-book-card--bee,
.hero-book-card--bee * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%23FFD700' fill-opacity='.06'/%3E%3Cellipse cx='11' cy='19' rx='10' ry='6' fill='%23d6f0ff' fill-opacity='.88' transform='rotate(-20 11 19)'/%3E%3Cellipse cx='37' cy='19' rx='10' ry='6' fill='%23d6f0ff' fill-opacity='.88' transform='rotate(20 37 19)'/%3E%3Cellipse cx='11' cy='19' rx='10' ry='6' fill='none' stroke='%2399ccff' stroke-width='.8' transform='rotate(-20 11 19)'/%3E%3Cellipse cx='37' cy='19' rx='10' ry='6' fill='none' stroke='%2399ccff' stroke-width='.8' transform='rotate(20 37 19)'/%3E%3Cellipse cx='24' cy='32' rx='10' ry='13' fill='%23FFD700'/%3E%3Cellipse cx='24' cy='32' rx='10' ry='13' fill='none' stroke='%23e8a000' stroke-width='.8'/%3E%3Crect x='14' y='27' width='20' height='5' rx='2.5' fill='%231a1a1a'/%3E%3Crect x='14' y='35' width='20' height='5' rx='2.5' fill='%231a1a1a'/%3E%3Ccircle cx='24' cy='17' r='8' fill='%23FFD700'/%3E%3Ccircle cx='24' cy='17' r='7.5' fill='none' stroke='%23e8a000' stroke-width='.8'/%3E%3Ccircle cx='21' cy='16' r='2.2' fill='%231a1a1a'/%3E%3Ccircle cx='27' cy='16' r='2.2' fill='%231a1a1a'/%3E%3Ccircle cx='21.7' cy='15.3' r='.8' fill='white'/%3E%3Ccircle cx='27.7' cy='15.3' r='.8' fill='white'/%3E%3Ccircle cx='20' cy='18.5' r='2' fill='%23ffaaaa' fill-opacity='.55'/%3E%3Ccircle cx='28' cy='18.5' r='2' fill='%23ffaaaa' fill-opacity='.55'/%3E%3Cpath d='M21 20 Q24 22.5 27 20' stroke='%231a1a1a' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cline x1='21' y1='10' x2='17' y2='4' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='17' cy='4' r='1.8' fill='%23FFD700' stroke='%231a1a1a' stroke-width='1'/%3E%3Cline x1='27' y1='10' x2='31' y2='4' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='4' r='1.8' fill='%23FFD700' stroke='%231a1a1a' stroke-width='1'/%3E%3Cpolygon points='24,45 21.5,41 26.5,41' fill='%23e8880a'/%3E%3C/svg%3E") 24 24, pointer;
}

/* ── CINEMATIC GALLERY (Option B) ────────────── */
.page-gallery { background: var(--white); }

/* Photo grid — 4 tight columns, every 7th card is wide */
.cine-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 3.5rem;
}

.cine-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  appearance: none;
  border: none;
  padding: 0;
  background: #1a1a1a;
  font: inherit;
}

/* Every 7th card (starting at 1) spans 2 columns — creates the wide-card pattern */
.cine-card:nth-child(7n+1) {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

.cine-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cine-card:hover img { transform: scale(1.08); }

.cine-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  transition: background 0.35s ease;
}

.cine-card:hover .cine-overlay { background: rgba(0, 0, 0, 0.52); }

.cine-label {
  padding: 10px 14px;
  color: var(--white);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cine-card:hover .cine-label { transform: translateY(0); opacity: 1; }

/* Video section — full-bleed dark */
.cine-video-section {
  background:
    radial-gradient(circle at top right, rgba(76, 129, 255, 0.12), transparent 24%),
    radial-gradient(circle at top left, rgba(247, 209, 120, 0.1), transparent 20%),
    linear-gradient(180deg, #0b0f17 0%, #111827 100%);
  padding: 4rem 0 4.4rem;
  margin-top: 1.25rem;
}

.cine-video-head {
  max-width: 760px;
  margin-bottom: 1.9rem;
}

.cine-video-kicker {
  margin: 0 0 .35rem;
  color: #8fd5ff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cine-video-section .section-title {
  color: var(--white);
  margin-bottom: .45rem;
}

.cine-video-lead {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.cine-video-group + .cine-video-group {
  margin-top: 2rem;
}

.cine-video-group__head {
  margin-bottom: 1rem;
}

.cine-video-group__kicker {
  margin: 0 0 .3rem;
  color: #9ecfff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cine-video-group__title {
  margin: 0;
  color: var(--white);
  font-family: 'Playfair Display', serif;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.16;
}

.cine-vid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.cine-vid-card {
  align-self: start;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.cine-vid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(0,0,0,.30);
  border-color: rgba(143, 213, 255, .28);
}

.cine-vid-frame {
  position: relative;
  background: #05070c;
}

.cine-vid-card video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  background: #000;
}

.cine-vid-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(143, 213, 255, .28);
  color: #d7f0ff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.cine-vid-card figcaption {
  padding: 14px 16px 16px;
  color: #c8d0db;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.cine-vid-title {
  display: block;
  color: #f5f7fb;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.28;
}

.cine-lyrics {
  margin: 0 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}

.cine-lyrics__toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 12px 0 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(37, 99, 235, .18));
  border: 1px solid rgba(143, 213, 255, .22);
  color: #e8f7ff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.cine-lyrics__toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(143, 213, 255, .42);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .18);
}

.cine-lyrics__toggle::-webkit-details-marker { display: none; }

.cine-lyrics__toggle-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cine-lyrics__toggle-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.14);
  color: #fff3cf;
  font-size: .72rem;
  letter-spacing: 0;
}

.cine-lyrics__toggle-chevron {
  color: #cfefff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}

.cine-lyrics[open] .cine-lyrics__toggle-chevron {
  transform: rotate(45deg);
  color: var(--white);
}

.cine-lyrics__body {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

.cine-lyrics__line {
  margin: 0;
  color: #f4f7fb;
  font-family: 'Playfair Display', serif;
  font-size: .98rem;
  line-height: 1.52;
}

.cine-lyrics__gap {
  height: 8px;
}

/* Empty state inside dark section */
.gallery-empty-card--dark {
  border-color: var(--gray);
  background: #1a1a1a;
}

.gallery-empty-card--dark h4,
.gallery-empty-card--dark p { color: #888; }

.gallery-empty-card--dark code {
  background: #2a2a2a;
  color: #aaa;
  padding: 0.1rem 0.3rem;
}

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 980px) {
  .site-wrapper {
    padding: 0 1.25rem;
  }

  .hero {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  .two-col {
    gap: 2rem;
  }

  .event-grid,
  .gallery-media-grid,
  .cine-grid { grid-template-columns: repeat(3, 1fr); }
  .cine-vid-grid { grid-template-columns: repeat(2, 1fr); }
  .ev-accordion-grid { grid-template-columns: repeat(2, 1fr); }

  .gallery-preview-track {
    grid-auto-columns: minmax(240px, 55%);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .site-wrapper {
    padding: 0 1rem;
  }

  nav {
    padding: 0 1rem;
  }

  nav ul,
  .nav-links {
    display: none;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    border-bottom: 2px solid var(--black);
    z-index: 99;
  }

  nav ul.open,
  .nav-links.open { display: flex; }

  nav ul li a,
  .nav-links li a {
    line-height: 1;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }

  .nav-links > li {
    width: 100%;
  }

  .nav-books-dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0.7rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-books-dropdown li a {
    margin: 0 1rem 0.45rem 2rem;
    padding: 0.8rem 1rem;
    line-height: 1.3;
  }

  .nav-books-thumb {
    width: 36px;
    height: 50px;
  }

  .nav-toggle { display: flex; }

  .hero {
    gap: 1.5rem;
    padding: 2.25rem 0 2rem;
  }

  .hero-intro h1 {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  .hero-books-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 1.2rem;
    width: 100%;
  }

  .hero-book-overlay strong {
    font-size: 1rem;
  }

  .two-col { grid-template-columns: 1fr; }

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

  .main-content > section {
    padding: 2.1rem 0;
  }

  .cine-card:nth-child(7n+1) { grid-column: span 2; aspect-ratio: 2/1; }
  .cine-vid-grid { grid-template-columns: 1fr; }
  .ev-accordion-grid { grid-template-columns: 1fr; }
  .ev-accordion-photos { grid-template-columns: repeat(3, 1fr); }

  .gallery-preview-track {
    grid-auto-columns: 82%;
  }

  .event-group + .event-group {
    margin-top: 2rem;
  }

  .event-group-title {
    font-size: 1.25rem;
    margin-bottom: 0.85rem;
  }

  .event-card-body {
    padding: 0.9rem;
  }

  

  .author-photo,
  .author-photo-slot img {
    margin: 0 auto;
  }

  .footer-inner { padding: 2rem 1rem 1.25rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; gap: 1rem; }
  .cf-row--2 { flex-direction: column; }
}

@media (max-width: 420px) {
  nav {
    height: 56px;
  }

  nav ul,
  .nav-links {
    top: 56px;
  }

  .nav-logo {
    font-size: 1rem;
    max-width: 70vw;
  }

  .hero {
    padding-top: 1.9rem;
  }

  

  .btn {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}

/* ── MOBILE POLISH ─────────────────────────────── */
@media (max-width: 480px) {

  /* Headings: smaller + balanced so no single-word orphan lines */
  .section-title,
  .page-header h1 {
    font-size: clamp(1.3rem, 5.5vw, 1.6rem);
    line-height: 1.2;
    text-wrap: balance;       /* modern browsers: even line lengths   */
    overflow-wrap: break-word; /* fallback: break very long words       */
  }

  .hero-intro h1 {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    line-height: 1.2;
    text-wrap: balance;
  }

  /* Tighter section spacing */
  .main-content > section {
    padding: 1.75rem 0;
  }

  /* Prose: slightly tighter line height + spacing */
  .prose p {
    line-height: 1.65;
    margin-bottom: .85rem;
  }

  .prose .lead {
    font-size: 1rem;
    line-height: 1.6;
  }

  .prose blockquote {
    font-size: 1rem;
    padding: .85rem 1rem .85rem 1.1rem;
    text-wrap: balance;
  }

  /* Section tag: slightly tighter */
  .section-tag {
    font-size: .68rem;
    margin-bottom: .4rem;
  }

  /* Buttons: full-width on tiny screens */
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Feature book grid: stack image smaller */
  .feature-book-grid {
    gap: 1.2rem;
  }

  .feature-book-cover {
    max-width: 180px;
    margin: 0 auto;
  }

  /* Event accordion */
  .ev-accordion-grid { grid-template-columns: 1fr; }
  .ev-accordion-photos { grid-template-columns: repeat(2, 1fr); }

  /* Contact form */
  .cf-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .cf-submit {
    width: 100%;
  }
}

/* ── Subscribe Strip (slim bar above footer) ───── */
.sub-strip {
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%);
  border-top: 2px solid rgba(var(--gold-700-rgb),.14);
  padding: 1.1rem 2rem;
  text-align: center;
}

.sub-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
}

.sub-strip-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .92rem;
  color: var(--gold-800);
  white-space: nowrap;
}

.sub-strip-row {
  display: flex;
  gap: .5rem;
}

.sub-strip-status {
  width: 100%;
  min-height: 1.2rem;
  margin-top: .2rem;
  font-size: .82rem;
  color: #8b5e00;
  font-family: sans-serif;
  letter-spacing: .01em;
  transition: opacity .18s ease;
}

.sub-strip-status[hidden],
.sub-strip-ok[hidden],
.sub-strip-err[hidden],
#sub-strip-form[hidden] {
  display: none !important;
}

.sub-strip-input {
  padding: .48rem .9rem;
  border: 1.5px solid rgba(180,130,40,.38);
  border-radius: 8px;
  font-size: .88rem;
  font-family: inherit;
  width: 210px;
  outline: none;
  background: var(--white);
  transition: border-color .2s;
}
.sub-strip-input:focus { border-color: var(--gold-500); }

.sub-strip-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: .48rem 1.1rem;
  background: var(--gold-500);
  color: var(--white);
  border: none;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 18px rgba(var(--gold-500-rgb),.22);
}
.sub-strip-btn:hover    { background: #8b5e00; transform: translateY(-1px); }
.sub-strip-btn:disabled { background: #bbb; cursor: not-allowed; }
.sub-strip-btn.is-loading,
.bibi-signup-submit.is-loading,
.bibi-notify-btn.is-loading {
  cursor: wait;
}
.sub-strip-btn.is-loading::before,
.bibi-signup-submit.is-loading::before,
.bibi-notify-btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.26), rgba(255,255,255,.08));
  transform: translateX(-100%);
  animation: sub-fill 1.15s ease-in-out infinite;
  z-index: -1;
}
.sub-strip-btn.is-success,
.bibi-signup-submit.is-success,
.bibi-notify-btn.is-success {
  background: linear-gradient(135deg,#2f9e44,#1f7a34);
  box-shadow: 0 10px 22px rgba(47,158,68,.24);
}
.sub-strip-btn.is-success::after,
.bibi-signup-submit.is-success::after,
.bibi-notify-btn.is-success::after {
  content: "✓";
  display: inline-block;
  margin-left: .45rem;
  font-weight: 800;
}

.sub-strip-ok {
  font-size: .88rem;
  color: #14532d;
  background: #dcfce7;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: .6rem 1rem;
  text-align: center;
  animation: sub-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.sub-strip-ok--premium {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.1rem;
  text-align: left;
  background: linear-gradient(135deg, #eefcf0 0%, #e0f8ea 100%);
  border: 1.5px solid #8bd5a4;
  box-shadow: 0 14px 30px rgba(41, 125, 73, 0.10);
}
.sub-strip-ok__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #35aa54, #23803a);
  color: var(--white);
  font-size: 1.15rem;
  box-shadow: 0 10px 20px rgba(45, 106, 30, 0.16);
}
.sub-strip-ok__content {
  min-width: 0;
}
.sub-strip-ok__title {
  display: block;
  margin-bottom: .22rem;
  font-size: .96rem;
  color: #14532d;
}
.sub-strip-ok__body {
  margin: 0;
  font-size: .86rem;
  line-height: 1.6;
  color: #28553a;
  font-family: sans-serif;
}
.sub-strip-err {
  font-size: .88rem;
  color: #7f1d1d;
  background: #fee2e2;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  padding: .6rem 1rem;
  text-align: center;
}
@keyframes sub-pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1);   }
}
@keyframes sub-fill {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@media (max-width: 600px) {
  .sub-strip-inner { flex-direction: column; gap: .7rem; }
  .sub-strip-label { white-space: normal; }
  .sub-strip-input { width: 100%; }
  .sub-strip-row   { width: 100%; }
  .sub-strip-ok--premium { align-items: flex-start; }
}

.bibi-signup-page {
  padding: 2.2rem 1.3rem 0;
  background:
    radial-gradient(circle at top left, rgba(255,224,130,.42), transparent 34%),
    radial-gradient(circle at top right, rgba(173,216,255,.45), transparent 30%),
    linear-gradient(180deg, #fffdf6 0%, #f8f2df 100%);
}

.bibi-pointer {
  position: fixed;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-999px, -999px, 0);
  opacity: 0;
  transition: opacity .25s ease;
}

.bibi-pointer-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 22px;
  border-radius: 55% 55% 48% 48%;
  background: linear-gradient(180deg, #ffd64d 0%, #f2b316 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 18px rgba(241, 166, 0, .28);
}

.bibi-pointer-wing {
  position: absolute;
  top: 15px;
  width: 16px;
  height: 22px;
  border-radius: 70% 70% 55% 55%;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(120, 170, 200, .34);
  animation: bibi-pointer-flap .16s ease-in-out infinite alternate;
}

.bibi-pointer-wing--left {
  left: 10px;
  transform-origin: 90% 100%;
}

.bibi-pointer-wing--right {
  right: 10px;
  transform-origin: 10% 100%;
  animation-direction: alternate-reverse;
}

.bibi-pointer-stripe {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 4px;
  background: rgba(45, 28, 0, .86);
  border-radius: 999px;
  transform: translateX(-50%);
}

.bibi-pointer-stripe--one {
  top: 6px;
}

.bibi-pointer-stripe--two {
  top: 12px;
}

.bibi-pointer-eye {
  position: absolute;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #2b1700;
}

.bibi-pointer-eye--left {
  left: 7px;
}

.bibi-pointer-eye--right {
  right: 7px;
}

.bibi-pointer-stinger {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid #2b1700;
  transform: translateX(-50%);
}

.bibi-pointer-spark {
  position: absolute;
  font-size: .8rem;
  line-height: 1;
  opacity: .85;
  animation: bibi-pointer-twinkle 1.6s ease-in-out infinite;
}

.bibi-pointer-spark--one {
  left: 4px;
  top: 8px;
}

.bibi-pointer-spark--two {
  right: 2px;
  bottom: 10px;
  animation-delay: .35s;
}

.bibi-signup-hero {
  max-width: 1180px;
  margin: 0 auto 2.2rem;
}

.bibi-signup-card {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(178,130,40,.18);
  background: rgba(255,255,255,.82);
  box-shadow: 0 28px 70px rgba(117,82,16,.14);
}

.bibi-signup-media {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem 1.4rem;
  background:
    radial-gradient(circle at 20% 22%, rgba(255,255,255,.9), transparent 18%),
    radial-gradient(circle at 80% 14%, rgba(255,241,186,.8), transparent 19%),
    linear-gradient(180deg, #9fd7ff 0%, #dff4ff 42%, #f3f7dd 100%);
}

.bibi-signup-cover-wrap {
  position: relative;
  width: min(290px, 82%);
  z-index: 2;
}

.bibi-signup-cover-wrap .avail-badge {
  top: -10px;
  right: -10px;
}

.bibi-signup-cover {
  width: 100%;
  border-radius: 18px;
  border: 4px solid rgba(32,24,12,.88);
  box-shadow: 0 18px 50px rgba(25,25,25,.24);
  display: block;
}

.bibi-signup-bee {
  position: absolute;
  top: 12%;
  right: 15%;
  font-size: 2.4rem;
  animation: bibi-float 3.2s ease-in-out infinite;
  z-index: 3;
}

.bibi-signup-spark {
  position: absolute;
  font-size: 1.1rem;
  opacity: .9;
  animation: bibi-twinkle 2.8s ease-in-out infinite;
}

.bibi-signup-orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.55);
}

.bibi-signup-orbit--one {
  inset: 12% 13% auto auto;
  width: 120px;
  height: 120px;
}

.bibi-signup-orbit--two {
  inset: auto auto 11% 8%;
  width: 180px;
  height: 180px;
}

.bibi-signup-copy {
  padding: 3.1rem 3rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bibi-signup-tag {
  margin: 0 0 .75rem;
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cc8a00;
  font-family: sans-serif;
  font-weight: 800;
}

.bibi-signup-title {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1.02;
  color: #271700;
}

.bibi-signup-lead {
  margin: .85rem 0 .55rem;
  font-size: 1.16rem;
  color: #66451a;
  font-family: "Source Serif 4", Georgia, serif;
}

.bibi-signup-text {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  line-height: 1.75;
  color: #5c5f4f;
  max-width: 58ch;
}

.bibi-signup-points {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.4rem;
}

.bibi-signup-point {
  background: linear-gradient(135deg, rgba(255,250,232,.95), rgba(255,244,209,.9));
  border: 1px solid rgba(207,168,73,.28);
  border-radius: 16px;
  padding: .9rem 1rem;
  color: #5b4721;
  box-shadow: 0 8px 22px rgba(var(--gold-500-rgb),.08);
}

.bibi-signup-form {
  background: #fffdf7;
  border: 1px solid rgba(194,146,49,.2);
  border-radius: 22px;
  padding: 1.2rem;
  box-shadow: 0 18px 42px rgba(152,108,25,.1);
}

.bibi-signup-label {
  display: block;
  margin-bottom: .65rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #85611a;
  font-family: sans-serif;
  font-weight: 800;
}

.bibi-signup-row {
  display: flex;
  gap: .65rem;
}

.bibi-signup-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(var(--gold-500-rgb),.34);
  border-radius: 14px;
  padding: .92rem 1rem;
  font-size: .96rem;
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}

.bibi-signup-input:focus {
  outline: none;
  border-color: #cc8a00;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
}

.bibi-signup-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: none;
  border-radius: 14px;
  padding: .92rem 1.2rem;
  min-width: 170px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent-hover));
  color: #3d2500;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 24px rgba(245,158,11,.22);
}

.bibi-signup-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.bibi-signup-note {
  margin: .8rem 0 0;
  font-size: .84rem;
  line-height: 1.6;
  color: #7a7d68;
}

.bibi-signup-success,
.bibi-signup-error {
  margin-top: 1rem;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  line-height: 1.7;
  animation: sub-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}

.bibi-signup-success {
  background: #ecfce5;
  border: 1.5px solid #8cd67e;
  color: #1f6c2b;
}

.bibi-signup-error {
  background: #fff0ef;
  border: 1.5px solid #f2a0a0;
  color: #a02727;
}

.bibi-signup-back {
  margin-top: 1.15rem;
  color: #8b2020;
  font-weight: 700;
  text-decoration: none;
}

.bibi-signup-back:hover {
  text-decoration: underline;
}

@keyframes bibi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bibi-twinkle {
  0%, 100% { transform: scale(.92); opacity: .72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes bibi-pointer-twinkle {
  0%, 100% { transform: scale(.75); opacity: .35; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes bibi-pointer-flap {
  from { transform: rotate(-18deg) scaleY(1); }
  to { transform: rotate(14deg) scaleY(.72); }
}

@media (hover: hover) and (pointer: fine) {
  .page-bibi-signup,
  .page-bibi-signup a,
  .page-bibi-signup button,
  .page-bibi-signup input,
  .page-bibi-signup label {
    cursor: none !important;
  }
}

@media (max-width: 860px) {
  .bibi-signup-card {
    grid-template-columns: 1fr;
  }

  .bibi-signup-media {
    min-height: 340px;
    padding: 2rem 1rem 1.2rem;
  }

  .bibi-signup-copy {
    padding: 2rem 1.35rem 2.2rem;
  }

  .bibi-signup-row {
    flex-direction: column;
  }

  .bibi-signup-submit {
    width: 100%;
    min-width: 0;
  }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .bibi-pointer {
    display: none;
  }
}

/* ── Reduced motion support ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Scroll progress bar ─────────────────────────── */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--accent-light) 55%, #dd3333 100%);
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  transition: width .08s linear;
}

/* ── Scroll reveal ───────────────────────────────── */
/* Only hide when JS is available; content stays visible if JS fails */
.js .sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.25,.46,.45,.94),
              transform .7s cubic-bezier(.25,.46,.45,.94);
}
.js .sr.sr-on {
  opacity: 1;
  transform: none;
}
.sr-d1 { transition-delay: .08s; }
.sr-d2 { transition-delay: .16s; }
.sr-d3 { transition-delay: .24s; }

/* ── Alternating section backgrounds ─────────────── */
#about,
#editions,
#events {
  background: var(--gold-50);
  border-radius: 20px;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}

/* ── Back-to-top button ──────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--gold-500);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, background .2s;
  pointer-events: none;
  z-index: 500;
  font-family: sans-serif;
}
#back-to-top.btt-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: #8b5e00;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

/* ── Bibi buttons: stack on mobile ──────────────── */
@media (max-width: 580px) {
  .bibi-action-group {
    align-items: stretch;
  }
  .btn-honey-cs,
  .btn-bibi-game,
  .btn-bibi-activities {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-right: 0 !important;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Slightly subtler shadows on mobile so buttons don't look chunky */
  .btn-honey-cs { box-shadow: 0 3px 0 #b86800, 0 4px 12px rgba(var(--accent-rgb),.3); }
  .btn-bibi-game { box-shadow: 0 3px 0 #1a4ab5, 0 4px 12px rgba(37,99,235,.3); }
  .btn-bibi-activities { box-shadow: 0 3px 0 #15803d, 0 4px 12px rgba(22,163,74,.3); }
}

/* ── Mobile nav: parchment dropdown ─────────────── */
@media (max-width: 760px) {
  nav ul,
  .nav-links {
    background: linear-gradient(160deg, var(--gold-50), var(--gold-100)) !important;
    border-bottom: 2px solid var(--gold-700) !important;
  }
  nav ul li a,
  .nav-links li a {
    border-bottom-color: rgba(var(--gold-700-rgb),.15) !important;
  }
}

/* ── Mobile Safari fixes: logo pen + Bibi CTA buttons ───────────── */
@media (max-width: 760px) {
  nav {
    overflow: visible !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .nav-logo {
    min-width: 0;
    max-width: calc(100vw - 92px);
    overflow: visible !important;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .nav-logo-text {
    font-size: clamp(1.42rem, 7vw, 1.82rem);
    max-width: calc(100vw - 112px);
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.15;
  }

  .nav-logo-pen {
    display: block;
    left: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    z-index: 20;
    -webkit-transform: translate3d(0,-50%,0) rotate(45deg);
    transform: translate3d(0,-50%,0) rotate(45deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .nav-logo-pen svg {
    display: block;
    width: 30px;
    height: 30px;
  }

  .nav-logo.is-writing .nav-logo-pen {
    -webkit-animation: logo-pen-move-mobile 2.8s cubic-bezier(.35,0,.2,1) forwards;
    animation: logo-pen-move-mobile 2.8s cubic-bezier(.35,0,.2,1) forwards;
    opacity: 1;
  }

  @-webkit-keyframes logo-pen-move-mobile {
    0%   { -webkit-transform: translate3d(0,-42%,0) rotate(45deg); opacity: 1; }
    15%  { -webkit-transform: translate3d(16%,-55%,0) rotate(42deg); opacity: 1; }
    30%  { -webkit-transform: translate3d(32%,-44%,0) rotate(45deg); opacity: 1; }
    45%  { -webkit-transform: translate3d(48%,-56%,0) rotate(42deg); opacity: 1; }
    60%  { -webkit-transform: translate3d(64%,-44%,0) rotate(45deg); opacity: 1; }
    78%  { -webkit-transform: translate3d(82%,-55%,0) rotate(42deg); opacity: 1; }
    92%  { -webkit-transform: translate3d(calc(100vw - 140px),-45%,0) rotate(36deg); opacity: 1; }
    100% { -webkit-transform: translate3d(calc(100vw - 128px),-72%,0) rotate(28deg); opacity: 0; }
  }

  @keyframes logo-pen-move-mobile {
    0%   { transform: translate3d(0,-42%,0) rotate(45deg); opacity: 1; }
    15%  { transform: translate3d(16%,-55%,0) rotate(42deg); opacity: 1; }
    30%  { transform: translate3d(32%,-44%,0) rotate(45deg); opacity: 1; }
    45%  { transform: translate3d(48%,-56%,0) rotate(42deg); opacity: 1; }
    60%  { transform: translate3d(64%,-44%,0) rotate(45deg); opacity: 1; }
    78%  { transform: translate3d(82%,-55%,0) rotate(42deg); opacity: 1; }
    92%  { transform: translate3d(calc(100vw - 140px),-45%,0) rotate(36deg); opacity: 1; }
    100% { transform: translate3d(calc(100vw - 128px),-72%,0) rotate(28deg); opacity: 0; }
  }
}

@media (max-width: 580px) {
  .bibi-action-group {
    width: 100%;
    align-items: stretch !important;
    gap: .72rem;
  }

  .bibi-action-group .btn-honey-cs,
  .bibi-action-group .btn-bibi-game,
  .bibi-action-group .btn-bibi-activities {
    -webkit-appearance: none;
    appearance: none;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 14px !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 18px;
    font-size: .76rem;
    line-height: 1.2;
    letter-spacing: .06em;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .bibi-action-group .btn-honey-cs > span,
  .bibi-action-group .btn-bibi-game > span,
  .bibi-action-group .btn-bibi-activities > span {
    min-width: 0;
  }

  .bibi-action-group .btn-honey-cs__bee,
  .bibi-action-group .btn-3d-icon {
    flex: 0 0 auto;
  }
}

/* ═══════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.testimonial-card {
  background: var(--light);
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.testimonial-quote {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--black);
  margin-bottom: 1.25rem;
}
.testimonial-footer {
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 1rem;
  font-size: .9rem;
}
.testimonial-footer strong {
  display: block;
  color: var(--black);
  font-weight: 700;
}
.testimonial-footer span {
  color: var(--gray);
  font-size: .82rem;
}
@media (max-width: 860px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}



/* ════════════════════════════════════════════════
   PROFESSIONAL UPGRADES — Bibi's Brave Flight Launch
   ════════════════════════════════════════════════ */

/* ── ANNOUNCEMENT BANNER ──────────────────────── */
.announcement-bar {
  background: linear-gradient(90deg, #c0003c 0%, #dd3333 50%, #f4a623 100%);
  color: #fff;
  text-align: center;
  padding: 0.7rem 1.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: 8px;
}
.announcement-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: 0.3rem;
}
.announcement-bar a:hover {
  color: #fff8e7;
}

.book-ribbon-wrap {
  position: relative;
  display: inline-block;
}

/* ── ENHANCED BUY BUTTON ──────────────────────── */
.btn-amazon {
  background: linear-gradient(135deg, #ff9900 0%, #ff7700 100%);
  color: #fff;
  border-color: #e66a00;
  box-shadow: 0 4px 12px rgba(255,119,0,0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.btn-amazon:hover {
  background: linear-gradient(135deg, #ffaa22 0%, #ff8800 100%);
  border-color: #cc5c00;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255,119,0,0.45);
}
.btn-amazon::before {
  content: '🛒';
  font-size: 1.1em;
}

/* ── SCROLL REVEAL ANIMATIONS ─────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }