/* ============================================================================
   BRANDI FILER — DESIGN SYSTEM
   Warm sage, soft gold & ivory palette. Elegant serif headings (Fraunces),
   friendly rounded sans body copy (Nunito). Built mobile-first, layered up
   to desktop with generous whitespace and gentle motion throughout.
============================================================================ */

:root{
  /* ---- Color palette (from the Brandi Filer logo) ---- */
  --sage-50:  #F5F7EF;
  --sage-100: #E9EEDD;
  --sage-200: #D3DCBB;
  --sage-300: #AEBB8C;
  --sage-500: #7C8A63;
  --sage-600: #667350;
  --sage-700: #4E5A3D;
  --sage-900: #333C28;

  --gold-200: #F2E3B8;
  --gold-400: #D9B975;
  --gold-500: #C9A15A;
  --gold-600: #AD8845;

  --ivory:      #FBF7EE;
  --ivory-deep: #F4ECDC;
  --paper:      #FFFDF8;
  --white:      #FFFFFF;

  --charcoal:      #2C2A25;
  --charcoal-soft: #5B564C;
  --charcoal-faint: #8A8477;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgba(66, 56, 30, 0.08);
  --shadow-md: 0 14px 34px rgba(66, 56, 30, 0.14);
  --shadow-lg: 0 26px 60px rgba(50, 44, 26, 0.20);

  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1200px;
  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ---------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
.hero, .section, .contact, #gallery{ scroll-margin-top: 93px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{ margin: 0; }
img{ max-width: 100%; display: block; min-width: 0; }
picture{ display: block; min-width: 0; }
ul{ list-style: none; margin: 0; padding: 0; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; }
h1,h2,h3,h4{ font-family: var(--font-serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--charcoal); }
p{ margin: 0 0 1em; }

body{
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1{ font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
h2{ font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3{ font-size: clamp(1.25rem, 2vw, 1.55rem); }

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

.eyebrow{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--sage-600);
  margin: 0 0 .9em;
}
.eyebrow--light{ color: var(--gold-200); }

.section{ padding: clamp(64px, 9vw, 120px) 0; }
.section__header{ max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section__lede{ color: var(--charcoal-soft); font-size: 1.08rem; }

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

.skip-link{
  position: absolute; left: 12px; top: -60px; background: var(--sage-700); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-sm); z-index: 999; transition: top .2s var(--ease);
}
.skip-link:focus{ top: 12px; }

:focus-visible{ outline: 3px solid var(--gold-500); outline-offset: 3px; }

/* Reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: .98rem;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  overflow: hidden;
  white-space: nowrap;
}
.btn--primary{ background: var(--sage-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover{ background: var(--sage-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost{ background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); backdrop-filter: blur(6px); }
.btn--ghost:hover{ background: #fff; color: var(--sage-700); transform: translateY(-2px); }
.btn--outline{ background: transparent; color: var(--sage-700); border-color: var(--sage-300); }
.btn--outline:hover{ background: var(--sage-50); border-color: var(--sage-500); transform: translateY(-2px); }
.btn--gold{ background: var(--gold-500); color: var(--charcoal); }
.btn--gold:hover{ background: var(--gold-600); transform: translateY(-2px); }
.btn--small{ padding: 10px 20px; font-size: .85rem; }
.btn--large{ padding: 17px 34px; font-size: 1.05rem; }
.btn--full{ width: 100%; }
.btn:disabled, .btn[aria-disabled="true"]{ opacity: .55; cursor: not-allowed; transform: none !important; }

.btn::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 60%);
  opacity: 0; transform: scale(0); transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.btn:active::after{ opacity: 1; transform: scale(2.2); transition: 0s; }

/* ============================================================================
   HEADER / NAV
============================================================================ */
.site-header{
  position: sticky; top: 0; z-index: 200;
  background: rgba(251, 247, 238, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(124,138,99,.14);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px rgba(50,44,26,.08); }

.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; padding-bottom: 12px; gap: 20px;
  height: 92px; box-sizing: border-box; overflow: hidden;
}
.brand{ display: flex; align-items: center; flex-shrink: 0; }
.brand__logo{ height: 68px; width: auto; }

.nav__list{ display: flex; gap: 30px; }
.nav__list a{
  font-weight: 700; font-size: .95rem; color: var(--charcoal-soft);
  position: relative; padding: 6px 0;
}
.nav__list a::after{
  content:""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold-500); transition: right .3s var(--ease);
}
.nav__list a:hover{ color: var(--sage-700); }
.nav__list a:hover::after{ right: 0; }

.nav__cta{ flex-shrink: 0; }

.nav-toggle{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: none; border: none; }
.nav-toggle span{ display: block; width: 24px; height: 2px; background: var(--sage-700); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); margin: 0 auto; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: none; flex-direction: column; gap: 18px; padding: 10px 24px 28px;
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s var(--ease);
}
.mobile-nav.is-open{ max-height: 480px; opacity: 1; }
.mobile-nav ul{ display: flex; flex-direction: column; gap: 14px; }
.mobile-nav a{ font-weight: 700; font-size: 1.05rem; }
.mobile-nav .btn{ align-self: flex-start; }

@media (max-width: 900px){
  .nav, .nav__cta{ display: none; }
  .nav-toggle{ display: flex; }
  .mobile-nav{ display: flex; }
}

/* ============================================================================
   HERO
============================================================================ */
.hero{
  position: relative; height: calc(100svh - 94px); display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero__bg{
  position: absolute; inset: -40px; background-size: cover; background-position: center 30%;
  will-change: transform; transform: translateY(0) scale(1.06); z-index: -2;
}
.hero__overlay{
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(30,26,18,.55) 0%, rgba(30,26,18,.68) 45%, rgba(20,24,15,.86) 100%);
}
.hero__particles{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__particles span{
  position: absolute; bottom: -10%; display: block; border-radius: 50%;
  background: rgba(242, 227, 184, 0.55);
  animation: floatUp linear infinite;
  filter: blur(.3px);
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: 1; }
  90%{ opacity: .7; }
  100%{ transform: translateY(-115vh) translateX(var(--drift, 40px)); opacity: 0; }
}

.hero__content{ position: relative; z-index: 1; text-align: center; padding: 24px; }
.hero__title{ color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.35); margin-bottom: .35em; }
.hero__subtitle{ color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 620px; margin: 0 auto 2em; }
.hero__actions{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.hero__scroll{
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 1;
  width: 30px; height: 46px; border: 2px solid rgba(255,255,255,.75); border-radius: 20px;
}
.hero__scroll span{
  position: absolute; top: 8px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  background: #fff; border-radius: 50%; animation: scrollDot 1.8s infinite var(--ease);
}
@keyframes scrollDot{ 0%{ opacity: 1; transform: translateY(0);} 70%{ opacity: 0; transform: translateY(16px);} 100%{ opacity: 0;} }

/* ---------------------------------- Intro band ---------------------------------- */
.intro-band{ background: linear-gradient(120deg, var(--gold-400), var(--gold-500)); padding: 46px 0; }
.intro-band__quote{
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: #423414; text-align: center; max-width: 900px;
  margin: 0 auto; line-height: 1.5;
}

/* ============================================================================
   ABOUT
============================================================================ */
.about{ background: var(--ivory); position: relative; }
.about__grid{ display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 72px; align-items: center; }

.about__portrait-wrap{ position: relative; min-width: 0; }
.about__portrait{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 11/14; object-fit: cover; }
.about__portrait-inset{
  position: absolute; z-index: 2; right: -28px; bottom: 0; width: 42%; aspect-ratio: 4/5;
  border-radius: var(--radius-md); border: 6px solid var(--paper); box-shadow: var(--shadow-md);
  overflow: hidden; transition: transform .4s var(--ease);
}
.about__portrait-inset picture{ width: 100%; height: 100%; }
.about__portrait-inset img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.about__portrait-inset:hover{ transform: translateY(-6px) rotate(-2deg); }
.about__blob{ position: absolute; width: 220px; height: 220px; opacity: .55; z-index: 0; animation: blobDrift 14s ease-in-out infinite; }
.about__blob--1{ top: -60px; left: -60px; color: var(--gold-200); }
.about__blob--2{ bottom: -50px; right: -50px; width: 260px; height: 260px; color: var(--sage-200); animation-delay: -6s; }
@keyframes blobDrift{ 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(12px,-16px) rotate(8deg);} }

.sparkle{ position: absolute; color: var(--gold-500); font-size: 1.6rem; z-index: 2; animation: sparkleTwinkle 3s ease-in-out infinite; }
.sparkle--1{ top: 6%; right: 8%; animation-delay: 0s; }
.sparkle--2{ bottom: 10%; left: 4%; font-size: 1.1rem; animation-delay: 1.4s; color: var(--sage-500); }
@keyframes sparkleTwinkle{ 0%,100%{ opacity: .3; transform: scale(.8);} 50%{ opacity: 1; transform: scale(1.15);} }

.quote-block{
  font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--sage-700);
  border-left: 4px solid var(--gold-500); padding: 6px 0 6px 22px; margin: 0 0 26px;
}

.timeline{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sage-200); }
.timeline__item{ display: flex; flex-direction: column; }
.timeline__number{ font-family: var(--font-serif); font-size: 2.1rem; color: var(--gold-600); font-weight: 600; display: block; line-height: 1; margin-bottom: 4px; }
.timeline__label{ font-size: .92rem; color: var(--charcoal-soft); font-weight: 700; }

.mission-vision{ margin-top: 90px; }
.mission-vision__grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 30px; }
.mission-vision__card{
  background: var(--paper); border-radius: var(--radius-md); padding: 38px 34px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(124,138,99,.14); text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mission-vision__card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.mission-vision__card h3{ color: var(--sage-700); }
.mission-vision__card p{ color: var(--charcoal-soft); margin-bottom: 0; }

.giving-back{
  margin-top: 40px; text-align: center; background: var(--paper); border-radius: var(--radius-md);
  border: 1px solid rgba(124,138,99,.14); box-shadow: var(--shadow-sm); padding: 42px 36px;
}
.giving-back h3{ color: var(--sage-700); margin-top: 4px; }
.giving-back p{ max-width: 640px; margin: 14px auto 24px; color: var(--charcoal-soft); }

@media (max-width: 560px){
  .giving-back{ padding: 32px 22px; }
}

@media (max-width: 900px){
  .about__grid{ grid-template-columns: 1fr; gap: 48px; }
  .about__portrait-wrap{ max-width: 420px; margin: 0 auto; }
  .mission-vision__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .timeline{ grid-template-columns: repeat(2,1fr); }
  .about__portrait-inset{ right: -12px; width: 46%; }
}

/* ============================================================================
   BOOKS
============================================================================ */
.books{ background: var(--ivory-deep); position: relative; overflow: hidden; }
.books__bg{
  position: absolute; inset: 0; background-size: cover; background-position: center 30%;
  opacity: .16; z-index: 0; filter: blur(6px); transform: scale(1.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.books > .wrap{ position: relative; z-index: 1; }

.book-feature{
  display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 52px; align-items: center;
  background: var(--paper); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-md); margin-bottom: 64px; position: relative; overflow: hidden;
  border: 1px solid rgba(201,161,90,.25);
}
.book-feature::before{
  content: ""; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-200) 0%, transparent 70%); opacity: .7; z-index: 0;
}
.book-feature__cover{ position: relative; z-index: 1; min-width: 0; }
.book-feature__cover img{ border-radius: var(--radius-md); box-shadow: var(--shadow-lg); width: 100%; transition: transform .5s var(--ease); }
.book-feature__cover:hover img{ transform: scale(1.03) rotate(-1deg); }
.book-feature__body{ position: relative; z-index: 1; }
.book-feature__kicker{ display: inline-block; background: var(--gold-500); color: var(--charcoal); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.book-feature__tagline{ color: var(--sage-600); font-weight: 700; margin-bottom: 14px; font-size: 1.05rem; }
.book-feature__desc{ color: var(--charcoal-soft); font-size: 1.05rem; }
.book-feature__meta{ display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.book-feature__actions{ display: flex; gap: 16px; flex-wrap: wrap; }
.book-feature__instore{ margin-top: 16px; font-size: .92rem; color: var(--sage-700); font-weight: 600; }
.book-feature__instore a{ text-decoration: underline; text-underline-offset: 2px; }
.book-feature__instore a:hover{ color: var(--gold-600); }

.badge{
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800;
  padding: 7px 15px; border-radius: var(--radius-pill); background: var(--sage-100); color: var(--sage-700);
}
.badge--gold{ background: var(--gold-200); color: #6b5220; }

.book-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }

.book-card{
  background: var(--paper); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(124,138,99,.14);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.book-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-md); }
.book-card__cover{ position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--sage-100); }
.book-card__cover img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.book-card:hover .book-card__cover img{ transform: scale(1.07); }
.book-card__body{ padding: 24px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.book-card__badges{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.book-card__title{ font-size: 1.2rem; margin-bottom: 0; }
.book-card__tagline{ color: var(--sage-600); font-weight: 700; font-size: .92rem; margin-bottom: 4px; }
.book-card__desc{ color: var(--charcoal-soft); font-size: .92rem; flex: 1; margin-bottom: 14px; }
.book-card__actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.book-card__actions .btn{ flex: 1; }
.book-card__instore{ margin: 12px 0 0; font-size: .82rem; color: var(--sage-700); font-weight: 600; }
.book-card__instore a{ text-decoration: underline; text-underline-offset: 2px; }
.book-card__instore a:hover{ color: var(--gold-600); }

@media (max-width: 860px){
  .book-feature{ grid-template-columns: 1fr; }
  .book-feature__cover{ max-width: 280px; margin: 0 auto; }
}

/* ============================================================================
   STORYTELLING EVENTS + GALLERY
============================================================================ */
.events{ padding-top: 0; background: var(--ivory); }
.events__band{
  background: linear-gradient(135deg, var(--sage-700), var(--sage-600));
  padding: 90px 0 100px; position: relative; overflow: hidden;
}
.events__band::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.10), transparent 55%);
}
.events__band-inner{ position: relative; text-align: center; max-width: 720px; }
.events__band-inner h2{ color: #fff; }
.events__band-inner p{ color: rgba(255,255,255,.9); font-size: 1.08rem; margin-bottom: 30px; }

.events__intro{
  display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 56px; align-items: center;
  margin-top: -64px; margin-bottom: 90px; background: var(--paper); border-radius: var(--radius-lg);
  border: 1px solid rgba(124,138,99,.14);
  padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-lg); position: relative; z-index: 2;
}
.events__intro > picture{ min-width: 0; }
.events__intro-photo{ border-radius: var(--radius-md); box-shadow: var(--shadow-md); width: 100%; height: auto; aspect-ratio: 6/7; object-fit: cover; }
.events__intro-copy{ padding-top: 8px; }
.check-list{ margin-top: 18px; }
.check-list li{ position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--charcoal-soft); font-weight: 600; }
.check-list li::before{ content: "✦"; position: absolute; left: 0; color: var(--gold-500); }
.events__intro-note{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sage-200); color: var(--charcoal-faint); font-size: .92rem; font-style: italic; }

@media (max-width: 860px){
  .events__intro{ grid-template-columns: 1fr; gap: 24px; }
  .events__intro-photo{ max-width: 320px; margin: 0 auto; height: auto; aspect-ratio: 4/5; }
  .events__intro-copy{ padding-top: 0; }
}

.gallery-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; margin-top: 40px;
}
.gallery-item{
  display: block; width: 100%; padding: 0; border: none; text-align: left;
  position: relative; border-radius: var(--radius-md); aspect-ratio: 4 / 5; min-width: 0;
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; background: var(--sage-100);
}
.gallery-item picture{ position: absolute; inset: 0; display: block; min-width: 0; }
.gallery-item img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .6s var(--ease);
}
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item__overlay{
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px;
  background: linear-gradient(0deg, rgba(28,26,18,.82) 0%, rgba(28,26,18,0) 55%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.gallery-item:hover .gallery-item__overlay, .gallery-item:focus-visible .gallery-item__overlay{ opacity: 1; }
.gallery-item__caption{ color: #fff; font-size: .85rem; font-weight: 700; margin: 0; }

@media (max-width: 640px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-item{ aspect-ratio: 1 / 1; }
}

.gallery-more{ text-align: center; margin-top: 36px; }

@media (max-width: 640px){
  .gallery-more{ margin-top: 24px; }
  .gallery-more .btn{ width: 100%; max-width: 320px; }
}

/* ============================================================================
   READER REVIEWS (real Goodreads reviews)
============================================================================ */
.reviews{ background: var(--ivory-deep); }

/* Summary panel: aggregate rating + actions */
.reviews-summary{
  max-width: 1100px; margin: 0 auto 40px; padding: 22px 30px;
  background: var(--paper); border: 1px solid rgba(124,138,99,.16); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.reviews-summary__rating{ display: flex; align-items: center; gap: 16px; }
.reviews-summary__number{ font-family: var(--font-serif); font-size: 2.6rem; font-weight: 600; color: var(--sage-700); line-height: 1; }
.reviews-summary__stars-count{ display: flex; flex-direction: column; gap: 4px; }
.reviews-summary__stars{ color: var(--gold-500); letter-spacing: 2px; font-size: 1.1rem; }
.reviews-summary__count{ font-size: .9rem; color: var(--charcoal-faint); font-weight: 600; }
.reviews-summary__actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* Carousel shell */
.reviews-carousel{
  max-width: 1160px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
}
.reviews-carousel__viewport{ flex: 1; overflow: hidden; min-width: 0; }
.reviews-carousel__track{
  display: flex; gap: 26px; transition: transform .45s var(--ease);
}
.reviews-carousel__arrow{
  flex-shrink: 0; align-self: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1px solid rgba(124,138,99,.2); color: var(--sage-700);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.reviews-carousel__arrow:hover{ background: var(--sage-600); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.reviews-carousel__arrow:disabled{ opacity: .35; cursor: not-allowed; transform: none; }
.reviews-carousel__dots{ flex-basis: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.reviews-carousel__dot{
  width: 9px; height: 9px; border-radius: 50%; background: var(--sage-200); border: none; padding: 0; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.reviews-carousel__dot.is-active{ background: var(--gold-500); transform: scale(1.3); }

/* Review card */
.review-card{
  flex: 0 0 calc((100% - 2 * 26px) / 3); min-width: 0;
  background: var(--paper); border-radius: var(--radius-md); padding: 30px 28px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(124,138,99,.14);
  display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.review-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.review-card__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.review-card__avatar{
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--sage-100); color: var(--sage-700); font-family: var(--font-serif); font-weight: 600; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.review-card__who{ display: flex; flex-direction: column; min-width: 0; }
.review-card__name{ font-weight: 800; color: var(--charcoal); font-size: .95rem; }
.review-card__source{ font-size: .78rem; color: var(--sage-600); font-weight: 600; }
.review-card__source:hover{ color: var(--gold-600); }
.review-card__stars{ color: var(--gold-500); letter-spacing: 2px; margin-bottom: 12px; font-size: .95rem; }
.review-card__quote{
  font-family: var(--font-serif); font-style: italic; color: var(--charcoal);
  margin-bottom: 10px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__note{ font-size: .8rem; color: var(--charcoal-faint); margin: 0 0 14px; }
.review-card__foot{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--sage-100); margin-top: auto;
}
.review-card__date{ font-size: .82rem; color: var(--charcoal-faint); }
.review-card__more{ font-size: .82rem; font-weight: 700; color: var(--sage-600); white-space: nowrap; }
.review-card__more:hover{ color: var(--gold-600); }

@media (max-width: 980px){
  .review-card{ flex: 0 0 calc((100% - 26px) / 2); }
}
@media (max-width: 640px){
  .reviews-summary{ flex-direction: column; align-items: flex-start; }
  .review-card{ flex: 0 0 100%; }

  /* Goodreads buttons: equal-width row instead of stacked */
  .reviews-summary__actions{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%;
  }
  .reviews-summary__actions .btn{
    width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center;
  }

  /* Carousel: move prev/next arrows down to sit alongside the pagination dots,
     all on one explicit row via CSS Grid (no flex-wrap guesswork). */
  .reviews-carousel__arrow{ width: 40px; height: 40px; }
  .reviews-carousel{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "viewport viewport viewport"
      "prev     dots     next";
    align-items: center;
    row-gap: 18px;
    column-gap: 14px;
  }
  .reviews-carousel__viewport{ grid-area: viewport; }
  .reviews-carousel__arrow--prev{ grid-area: prev; }
  .reviews-carousel__dots{ grid-area: dots; margin-top: 0; }
  .reviews-carousel__arrow--next{ grid-area: next; }
}

@media (max-width: 320px){
  .reviews-summary__actions{ grid-template-columns: 1fr; }
}

/* ============================================================================
   FAQ
============================================================================ */
.faq-accordion{ display: flex; flex-direction: column; gap: 14px; }
.faq-item{ background: var(--paper); border: 1px solid rgba(124,138,99,.18); border-radius: var(--radius-md); overflow: hidden; }
.faq-item__question{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; padding: 22px 26px; font-family: var(--font-serif);
  font-size: 1.08rem; font-weight: 600; color: var(--charcoal);
}
.faq-item__icon{ flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sage-100); color: var(--sage-700); display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease), background .35s var(--ease); font-size: 1rem; }
.faq-item.is-open .faq-item__icon{ transform: rotate(45deg); background: var(--gold-500); color: #fff; }
.faq-item__panel{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-item__panel-inner{ padding: 0 26px 24px; color: var(--charcoal-soft); }
.faq-item.is-open .faq-item__panel{ max-height: 400px; }

/* ============================================================================
   CONTACT
============================================================================ */
.contact{ background: linear-gradient(160deg, var(--sage-700), var(--sage-900)); padding: clamp(70px, 9vw, 120px) 0; position: relative; overflow: hidden; }
.contact::before{ content:""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 90%, rgba(217,185,117,.14), transparent 55%); }
.contact__grid{ position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start; }
.contact__copy h2{ color: #fff; }
.contact__copy p{ color: rgba(255,255,255,.86); }

.contact__author-photo{
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin-bottom: 24px;
  border: 3px solid var(--gold-400); box-shadow: var(--shadow-md);
}
.contact__author-photo img{ width: 100%; height: 100%; object-fit: cover; }

.contact-list{ margin: 26px 0 34px; display: flex; flex-direction: column; gap: 16px; }
.contact-list li{ display: flex; align-items: center; gap: 14px; }
.contact-list a{ color: #fff; font-weight: 700; }
.contact-list a:hover{ color: var(--gold-300); }
.contact-list__icon{ width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: var(--gold-300); flex-shrink: 0; }
.contact-list__rating{ display: block; margin-top: 2px; font-weight: 600; color: var(--gold-300); opacity: .9; }

.contact__form-wrap{ display: flex; flex-direction: column; gap: 30px; }

/* Booking / classroom-visit request form */
.booking-card{ background: var(--paper); border-radius: var(--radius-lg); padding: clamp(22px,3vw,30px); box-shadow: var(--shadow-lg); scroll-margin-top: 110px; }
.booking-card h3{ color: var(--sage-700); font-size: 1.3rem; }
.booking-card > p{ font-size: .92rem; }
.booking-form{ margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.booking-form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking-form__field{ display: flex; flex-direction: column; gap: 4px; }
.booking-form__field label{ font-size: .82rem; font-weight: 700; color: var(--charcoal-soft); }
.booking-form__optional{ font-weight: 500; color: var(--charcoal-faint); }
.booking-form__field input,
.booking-form__field textarea{
  padding: 9px 13px; border-radius: var(--radius-sm); border: 2px solid var(--sage-200);
  font: inherit; font-size: .92rem; background: var(--ivory); resize: vertical; width: 100%;
}
.booking-form__field textarea{ min-height: 64px; }
.booking-form__field input:focus,
.booking-form__field textarea:focus{ border-color: var(--sage-500); outline: none; }
.booking-form .btn--large{ padding: 13px 28px; font-size: .95rem; }
.booking-form__note{ margin: 0; font-size: .85rem; color: var(--sage-600); font-weight: 700; min-height: 0; }
.booking-form__note:empty{ margin: 0; }
.booking-form__note[data-state="error"]{ color: #B3453C; }

@media (max-width: 900px){
  .contact__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .booking-form__row{ grid-template-columns: 1fr; }
}

/* ============================================================================
   FOOTER
============================================================================ */
.site-footer{ background: var(--sage-900); color: rgba(255,255,255,.75); padding: 0 0 0; }

.footer-newsletter{
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px 40px; align-items: center;
  padding-top: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-newsletter__copy{ min-width: 0; }
.footer-newsletter__copy h3{ color: #fff; margin-bottom: 8px; }
.footer-newsletter__copy p{ color: rgba(255,255,255,.72); margin: 0; }
.footer-newsletter__form-wrap{ display: flex; flex-direction: column; min-width: 0; }
.footer-newsletter__form{ display: flex; gap: 10px; flex-wrap: wrap; }
.footer-newsletter__form input{
  flex: 1; min-width: 200px; padding: 14px 18px; border-radius: var(--radius-pill);
  border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font: inherit;
}
.footer-newsletter__form input::placeholder{ color: rgba(255,255,255,.5); }
.footer-newsletter__form input:focus{ border-color: var(--gold-400); outline: none; background: rgba(255,255,255,.14); }
.footer-newsletter__note{ margin: 10px 0 0; font-size: .88rem; color: var(--gold-300); font-weight: 700; min-height: 0; }
.footer-newsletter__note:empty{ margin: 0; }

.site-footer__grid{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 24px; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.site-footer__brand img{ margin: 0 auto; }
.site-footer__logo{ height: 96px; width: auto; }
.site-footer__brand p{ margin: 10px 0 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.site-footer__nav{ display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: center; }
.site-footer__nav a{ font-weight: 700; font-size: .92rem; }
.site-footer__nav a:hover{ color: var(--gold-300); }
.site-footer__social{ display: flex; gap: 14px; justify-content: center; }
.site-footer__social a{ width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), transform .3s var(--ease); }
.site-footer__social a:hover{ background: var(--gold-500); color: var(--sage-900); transform: translateY(-3px); }
.site-footer__bottom{ text-align: center; padding-top: 22px; padding-bottom: 22px; font-size: .85rem; }
.site-footer__bottom p{ margin: 0 auto; max-width: 420px; line-height: 1.6; }
.site-footer__bottom p.site-footer__credit{ margin-top: 10px; font-size: .78rem; color: rgba(255,255,255,.5); }
.site-footer__credit a{ color: rgba(255,255,255,.68); font-weight: 700; }
.site-footer__credit a:hover{ color: var(--gold-300); }
.footer-bottom__break{ display: none; }

@media (max-width: 860px){
  .footer-newsletter{ grid-template-columns: 1fr; text-align: center; }
  .footer-newsletter__form{ justify-content: center; }
  .footer-bottom__break{ display: block; }
  .site-footer__bottom p{ max-width: 280px; }
}

/* ============================================================================
   LIGHTBOX
============================================================================ */
.lightbox{
  position: fixed; inset: 0; background: rgba(20,18,12,.94); z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;
}
.lightbox[hidden]{ display: none; }
.lightbox__img{ max-width: min(90vw, 1000px); max-height: 74vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox__caption{ color: #fff; margin-top: 18px; font-weight: 700; text-align: center; max-width: 640px; }
.lightbox__close{ position: absolute; top: 24px; right: 28px; background: rgba(255,255,255,.12); color: #fff; width: 44px; height: 44px; border-radius: 50%; border: none; font-size: 1.6rem; line-height: 1; }
.lightbox__nav{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); color: #fff; width: 48px; height: 48px; border-radius: 50%; border: none; font-size: 1.1rem; }
.lightbox__nav--prev{ left: 20px; }
.lightbox__nav--next{ right: 20px; }
.lightbox__nav:hover, .lightbox__close:hover{ background: var(--gold-500); color: var(--sage-900); }

/* ============================================================================
   Small utility responsive tweaks
============================================================================ */
@media (max-width: 640px){
  .hero__title{ margin-bottom: .25em; }
  .hero__subtitle{ margin-bottom: 1.4em; }
  .hero__actions{ flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__actions .btn{ width: 100%; }
  .hero__scroll{ display: none; }
  .book-card__actions{ flex-direction: column; }
}