/* 
   PASSION & PROSE — Premium Editorial Stylesheet
   Sacred Luxury & Literary Excellence for Women of Color
*/

:root {
  /* Brand Palette */
  --cream: #FAF7F4;
  --dusty-mauve: #C7A2B7;
  --dusty-mauve-light: #D9BDCC;
  --dusty-mauve-dark: #A67C94;
  --deep-plum: #5E415A;
  --deep-plum-dark: #2B1D2A;
  --deep-plum-surface: #382736;
  --deep-plum-card: #453243;
  --deep-plum-light: #765471;
  --soft-taupe: #B7AAA3;
  --soft-taupe-light: #D5CDC7;
  --soft-taupe-dark: #8A7C75;

  /* Theme Mappings */
  --bg-dark: #2B1D2A;
  --bg-dark-surface: #382736;
  --bg-dark-card: #453243;
  --bg-paper: #FAF7F4;
  --bg-paper-surface: #FFFFFF;
  
  --text-light: #FAF7F4;
  --text-muted: rgba(250, 247, 244, 0.76);
  --text-dim: rgba(250, 247, 244, 0.48);
  --text-dark: #2B1D2A;
  --text-dark-muted: #665864;

  --gold: #C9A659;
  --gold-light: #E3C888;
  --gold-dark: #8F7238;
  --gold-dim: rgba(201, 166, 89, 0.25);
  --gold-faint: rgba(201, 166, 89, 0.08);

  --merlot: var(--deep-plum);
  --merlot-dark: var(--deep-plum-dark);
  --merlot-light: var(--deep-plum-light);

  --border-dark: rgba(201, 166, 89, 0.28);
  --border-light: rgba(183, 170, 163, 0.35);

  /* Fonts */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-brand: 'Century Gothic', CenturyGothic, 'Apple Gothic', AppleGothic, sans-serif;
  --font-body: 'Century Gothic', CenturyGothic, 'Apple Gothic', AppleGothic, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Transitions */
  --tr-fast: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tr-smooth: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  position: relative;
  line-height: 1.6;
}

/* Custom Noise Texture Overlay */
.bg-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  /* The SVG data-URI has no intrinsic pixel size, so without an explicit
     background-size the browser stretches its 200x200 viewBox to fill the
     entire 100vw x 100vh box. That stretch is what reads as a soft blurry
     haze over the whole page instead of fine, crisp grain. Tiling it at a
     fixed small size fixes it. */
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Custom Cursor (Desktop Only) */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: default;
  }
  .custom-cursor {
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
  }
  .custom-cursor-ring {
    width: 38px;
    height: 38px;
    border: 1px solid var(--gold-light);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 2147483647;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
    opacity: 0.7;
  }
  body.cursor-hover .custom-cursor {
    width: 16px;
    height: 16px;
    background: var(--gold-light);
  }
  body.cursor-hover .custom-cursor-ring {
    width: 58px;
    height: 58px;
    border-color: var(--gold);
    opacity: 1;
  }
}

@media (hover: none) {
  .custom-cursor, .custom-cursor-ring {
    display: none !important;
  }
}

/* Typography Utilities */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
}

.eyebrow {
  font-family: var(--font-brand);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.eyebrow::before, .eyebrow::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.eyebrow-dark {
  color: var(--deep-plum);
}

.eyebrow-dark::before, .eyebrow-dark::after {
  background: linear-gradient(90deg, transparent, var(--gold-dark));
}

.eyebrow-dark::after {
  background: linear-gradient(90deg, var(--gold-dark), transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-brand);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 2px;
  transition: all var(--tr-fast);
  cursor: pointer;
}

.btn-primary {
  background: var(--gold);
  color: var(--bg-dark);
  border: 1px solid var(--gold);
  box-shadow: 0 4px 20px rgba(201, 166, 89, 0.25);
}

.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(201, 166, 89, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--border-dark);
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--text-light);
  background: var(--gold-faint);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--deep-plum);
  color: var(--text-light);
  border: 1px solid var(--deep-plum);
}

.btn-dark:hover {
  background: var(--deep-plum-light);
  transform: translateY(-2px);
}

/* Scroll Reveal */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.rv.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 3rem;
  }
}

/* Header & Navigation — Book Spine Edition */
.navbar {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 1240px;
  z-index: 1000;
  padding: 0.6rem 2.2rem;
  border-radius: 6px;
  background: linear-gradient(
    180deg,
    #4A3347 0%,
    #2E1E2C 15%,
    #3B2838 50%,
    #241723 85%,
    #4A3347 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid rgba(201, 166, 89, 0.85);
  border-bottom: 2px solid rgba(201, 166, 89, 0.85);
  border-left: 1px solid rgba(201, 166, 89, 0.4);
  border-right: 1px solid rgba(201, 166, 89, 0.4);
  box-shadow: 
    inset 0 2px 4px rgba(255, 235, 175, 0.22),
    inset 0 -2px 5px rgba(0, 0, 0, 0.65),
    0 16px 45px rgba(15, 8, 14, 0.75);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all var(--tr-smooth);
}

.navbar.scrolled {
  background: linear-gradient(
    180deg,
    #3D293B 0%,
    #251824 15%,
    #322130 50%,
    #1C121B 85%,
    #3D293B 100%
  );
  box-shadow: 
    inset 0 2px 5px rgba(255, 235, 175, 0.28),
    inset 0 -2px 6px rgba(0, 0, 0, 0.8),
    0 20px 50px rgba(10, 5, 10, 0.85);
  border-top-color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Spine Head & Tail Decorative Ends */
.spine-head, .spine-tail {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: linear-gradient(
    180deg,
    var(--gold-light) 0%,
    var(--gold) 50%,
    var(--gold-dark) 100%
  );
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(201, 166, 89, 0.6);
}

.spine-head {
  left: 8px;
}

.spine-tail {
  right: 8px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.nav-logo-mark {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(201, 166, 89, 0.55));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.nav-brand:hover .nav-logo-mark {
  transform: scale(1.06);
  filter: drop-shadow(0 0 14px rgba(201, 166, 89, 0.75));
}

.nav-title {
  font-family: var(--font-brand);
  font-size: 0.92rem;
  letter-spacing: 0.24em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.nav-title span {
  color: var(--gold);
}

.spine-dot {
  color: var(--gold);
  font-size: 0.55rem;
  opacity: 0.75;
  user-select: none;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .nav-links {
    display: flex;
    gap: 2rem;
  }
}

@media (min-width: 1150px) {
  .nav-links {
    gap: 2.5rem;
  }
}

.nav-link {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tr-fast);
}

.nav-link:hover {
  color: var(--gold-light);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.nav-actions .btn {
  display: none;
  padding: 0.55rem 1.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  border-radius: 999px;
}

@media (min-width: 992px) {
  .nav-actions .btn {
    display: inline-block;
  }
}

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

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

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-light);
  transition: transform 0.3s, opacity 0.3s;
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(43, 29, 42, 0.97);
  backdrop-filter: blur(20px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.mobile-drawer.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer-links {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.mobile-drawer-link {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
}

.mobile-drawer-link:hover {
  color: var(--gold);
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5rem;
  padding-top: 9rem;
  overflow: hidden;
  background-color: var(--bg-dark);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.62) contrast(1.08);
  transform: scale(1.05);
  transition: transform 10s ease-out;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(43, 29, 42, 0.6) 0%,
    rgba(43, 29, 42, 0.3) 40%,
    rgba(43, 29, 42, 0.88) 85%,
    rgba(43, 29, 42, 1) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 920px;
}

.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: rgba(201, 166, 89, 0.12);
  border: 1px solid rgba(201, 166, 89, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #e63b2e;
  border-radius: 50%;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid #e63b2e;
  border-radius: 50%;
  animation: pulseRing 2s infinite ease-out;
}

@keyframes pulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

.hero-live-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  text-transform: uppercase;
}

.hero-title {
  font-size: clamp(2.8rem, 6.2vw, 5.2rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: var(--text-light);
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-muted);
  font-weight: 300;
  max-width: 680px;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

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

/* Author Marquee Ticker */
.authors-marquee {
  background: var(--bg-dark-surface);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 1.25rem 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 5;
}

.marquee-track {
  display: inline-flex;
  animation: marquee 32s linear infinite;
  gap: 3rem;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marquee-item span.star {
  color: var(--gold);
  font-size: 0.9rem;
}

/* Section Shared Padding & Rhythm */
.section {
  padding: clamp(5rem, 9vw, 8rem) 0;
  position: relative;
}

.section-dark {
  background-color: var(--bg-dark);
  background-image:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(201, 166, 89, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(94, 65, 90, 0.35) 0%, transparent 60%);
  color: var(--text-light);
}

.section-paper {
  background-color: var(--bg-paper);
  background-image:
    radial-gradient(ellipse 60% 45% at 100% 0%, rgba(201, 166, 89, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(94, 65, 90, 0.04) 0%, transparent 60%);
  color: var(--text-dark);
}

/* Gold hairline divider at the top of every section, echoing a book's gilt-edged page */
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(340px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}

.section-header {
  max-width: 720px;
  margin-bottom: 4rem;
}

.section-title {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  margin-bottom: 1.25rem;
}

.section-title-dark {
  color: var(--text-dark);
}

.section-title-dark em {
  color: var(--deep-plum);
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.7;
}

.section-desc-dark {
  color: var(--text-dark-muted);
}

/* About / Purpose Section */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .about-grid {
    grid-template-columns: 1.05fr 1fr;
  }
}

.about-image-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.about-image-wrapper img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 80%;
  display: block;
  border-radius: 4px;
  filter: contrast(1.05);
}

.about-image-frame {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
  border-radius: 2px;
}

.about-quote-card {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  background: rgba(43, 29, 42, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-dark);
  padding: 1.5rem 1.75rem;
  border-radius: 4px;
}

.about-quote-card p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-light);
  line-height: 1.45;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;

  padding-top: 2rem;
  border-top: 1px solid var(--border-dark);
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-label {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Visiting Author Spotlight */
.author-card-featured {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

@media (min-width: 992px) {
  .author-card-featured {
    grid-template-columns: 1.1fr 1fr;
  }
}

.author-media {
  position: relative;
  min-height: 400px;
}

.author-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.author-media-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: var(--deep-plum);
  color: var(--text-light);
  font-family: var(--font-brand);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 2px;
}

.author-details {
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.author-name {
  font-size: 2.5rem;
  margin-bottom: 0.4rem;
  color: var(--text-light);
}

.author-accolade {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.author-session-title {
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 1rem;
  line-height: 1.35;
}

.author-quote-box {
  border-left: 2px solid var(--gold);
  padding-left: 1.25rem;
  margin: 1.5rem 0 2rem 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
}

.author-grid-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.author-subcard {
  background: var(--bg-dark-card);
  border: 1px solid rgba(201, 166, 89, 0.14);
  padding: 2rem;
  border-radius: 6px;
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}

.author-subcard:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.author-subcard-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.author-subcard-name {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}

.author-subcard-book {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

/* Books & Curated Shelf */
.genre-tabs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  padding: 0.65rem 1.4rem;
  font-family: var(--font-brand);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--tr-fast);
}

.tab-btn.active, .tab-btn:hover {
  background: var(--dusty-mauve);
  color: var(--deep-plum-dark);
  border-color: var(--dusty-mauve);
  font-weight: 500;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.25rem;
}

.book-card {
  background: var(--bg-paper-surface);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(94, 65, 90, 0.16);
}

.book-cover-wrapper {
  position: relative;
  height: 320px;
  background: var(--bg-paper);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.book-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(94, 65, 90, 0.92);
  color: var(--cream);
  font-family: var(--font-brand);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
}

.book-info {
  padding: 1.75rem;
}

.book-title {
  font-size: 1.6rem;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.book-author {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--deep-plum);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.book-synopsis {
  font-size: 0.95rem;
  color: var(--text-dark-muted);
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.book-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.85rem;
}

.book-rating {
  color: var(--gold);
  font-weight: 500;
}

/* Interactive Reading Vibe Selector Widget */
.vibe-widget {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 3rem 2.5rem;
  margin-top: 4rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.vibe-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.75rem 0;
}

.vibe-chip {
  background: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--tr-fast);
}

.vibe-chip.active, .vibe-chip:hover {
  background: var(--gold-faint);
  border-color: var(--gold);
  color: var(--gold-light);
}

.vibe-result-box {
  background: var(--bg-dark-card);
  border-left: 3px solid var(--gold);
  padding: 1.75rem;
  border-radius: 0 4px 4px 0;
  margin-top: 1.5rem;
}

.vibe-result-title {
  font-size: 1.4rem;
  color: var(--text-light);
  margin-bottom: 0.3rem;
}

.vibe-result-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* The Sisterhood Pillars */
.pillars-grid {
  /* 5 fixed cards: auto-fit grid columns fit exactly 4 across at this
     container width and orphan the 5th alone on its own row, flush left
     with a large empty gap beside it. Flex-wrap + justify-content:center
     makes every row (3-then-2) center itself instead. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.pillars-grid .pillar-card {
  flex: 1 1 300px;
  max-width: 360px;
}

.pillar-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  min-height: 380px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-dark);
  transition: transform var(--tr-fast);
}

.pillar-card:hover {
  transform: translateY(-6px);
}

.pillar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(43, 29, 42, 0.94) 0%,
    rgba(43, 29, 42, 0.65) 60%,
    rgba(43, 29, 42, 0.3) 100%
  );
  transition: background var(--tr-fast);
}

.pillar-card:hover .pillar-overlay {
  background: linear-gradient(
    0deg,
    rgba(43, 29, 42, 0.96) 0%,
    rgba(43, 29, 42, 0.72) 60%,
    rgba(43, 29, 42, 0.4) 100%
  );
}

.pillar-num {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gold);
  margin-bottom: auto;
}

.pillar-title {
  position: relative;
  z-index: 2;
  font-size: 1.8rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.pillar-desc {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Membership Tiers */
.membership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.25rem;
  align-items: stretch;
}

.tier-card {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 3rem 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}

.tier-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
}

.tier-card.featured {
  background: linear-gradient(180deg, var(--bg-dark-card) 0%, var(--deep-plum) 100%);
  border: 1px solid var(--gold);
  box-shadow: 0 12px 40px rgba(94, 65, 90, 0.35);
}

.tier-badge {
  position: absolute;
  top: -12px;
  right: 2rem;
  background: var(--gold);
  color: var(--bg-dark);
  font-family: var(--font-brand);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
}

.tier-name {
  font-size: 2rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}

.tier-price {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  color: var(--gold-light);
  margin-bottom: 0.25rem;
}

.tier-price span {
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--text-muted);
  font-weight: 300;
}

.tier-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-dark);
}

.tier-features {
  list-style: none;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.tier-features li {
  font-size: 0.95rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tier-features li::before {
  content: '✦';
  color: var(--gold);
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

/* Testimonials / Sisterhood Voices */
.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
}

.quote-card {
  background: var(--bg-paper-surface);
  border: 1px solid var(--border-light);
  padding: 2.5rem 2.25rem;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.quote-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

.quote-author {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep-plum);

}

.quote-role {
  font-size: 0.85rem;
  color: var(--text-dark-muted);
  margin-top: 0.25rem;
}

/* Application Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 29, 42, 0.88);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: var(--bg-dark-surface);
  border: 1px solid var(--border-dark);
  width: 100%;
  max-width: 620px;
  padding: 3rem 2.5rem;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 24px 60px rgba(25, 15, 24, 0.7);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--tr-fast);
}

.modal-close:hover {
  color: var(--gold);
}

.form-group {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
  padding: 0.85rem 1rem;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  border-radius: 4px;
  outline: none;
  transition: border-color var(--tr-fast);
}

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

/* Footer */
.footer {
  background-color: #1F141E;
  border-top: 1px solid var(--border-dark);
  padding: 6rem 0 3rem 0;
  border-radius: 3rem 3rem 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3.5rem;
  margin-bottom: 5rem;
}

.footer-brand-title {
  font-family: var(--font-brand);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1rem;
}

.footer-brand-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.6;
}

.footer-col-title {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--tr-fast);
}

.footer-links a:hover {
  color: var(--gold-light);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(201, 166, 89, 0.12);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 8px #34d399;
}

/* ===== Chapter network build (per client outline) ===== */
.section-cta { text-align: center; margin-top: 3rem; }

.read-block { margin-top: 5rem; }
.read-heading { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--text-dark); margin-bottom: 1.5rem; }
.read-heading em { color: var(--deep-plum); }
.read-genres { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.read-genres span {
  padding: 0.55rem 1.2rem; border: 1px solid var(--border-light); border-radius: 999px;
  font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dark-muted);
}
.events-more { margin: 3rem 0 0; justify-content: center; }
.events-more span { border-color: var(--border-dark); color: var(--text-muted); }
/* ===== Interactive Bookshelf Gallery ===== */
.shelf-eyebrow-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 0.75rem; padding-top: 2.5rem; border-top: 1px solid var(--border-light); margin-bottom: 2.5rem;
}
.shelf-hint {
  font-family: var(--font-brand); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--text-dark-muted); font-style: italic;
}

.bookshelf {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  padding: 2.5rem clamp(1.5rem, 3vw, 2.5rem) 1.75rem;
  background: linear-gradient(180deg, rgba(94,65,90,0.04) 0%, rgba(94,65,90,0.09) 100%);
  border: 1px solid var(--border-light);
  border-bottom: 10px solid var(--deep-plum);
  border-radius: 6px;
  position: relative;
}
.bookshelf::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -18px; height: 14px;
  background: radial-gradient(ellipse at center, rgba(43,29,42,0.22) 0%, rgba(43,29,42,0) 75%);
}

.shelf-book {
  position: relative;
  width: clamp(108px, 12vw, 138px);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center;
  transition: transform var(--tr-fast);
  transform: rotate(var(--tilt, 0deg));
}
.shelf-book:nth-child(3n)   { --tilt: -1.2deg; }
.shelf-book:nth-child(3n+1) { --tilt: 0.8deg; }
.shelf-book:nth-child(5n)   { --tilt: -0.4deg; }
.shelf-book:hover, .shelf-book:focus-visible {
  transform: translateY(-14px) rotate(0deg) scale(1.045);
  z-index: 3;
}

.shelf-cover {
  width: 100%; aspect-ratio: 2 / 3; border-radius: 3px;
  box-shadow: 0 10px 22px rgba(43,29,42,0.28), 0 2px 0 rgba(0,0,0,0.15);
  overflow: hidden; position: relative;
  background: var(--deep-plum-card);
  transition: box-shadow var(--tr-fast);
}
.shelf-book:hover .shelf-cover, .shelf-book:focus-visible .shelf-cover {
  box-shadow: 0 22px 36px rgba(43,29,42,0.4), 0 2px 0 rgba(0,0,0,0.15);
}
.shelf-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.3s ease;
}
.shelf-cover.no-image img { display: none; }
.shelf-cover-fallback {
  display: none;
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0.9rem 0.6rem;
  background: linear-gradient(160deg, var(--deep-plum) 0%, var(--deep-plum-dark) 100%);
  border-left: 3px solid var(--gold-light);
}
.shelf-cover.no-image .shelf-cover-fallback { display: flex; }
.shelf-cover-fallback-title {
  font-family: var(--font-serif); font-style: italic; font-size: 1rem; line-height: 1.2;
  color: var(--text-light); margin-bottom: 0.5rem;
}
.shelf-cover-fallback-author {
  font-family: var(--font-brand); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-light); opacity: 0.85;
}
.shelf-cover-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.22) 0%, transparent 32%);
  pointer-events: none; opacity: 0; transition: opacity var(--tr-fast);
}
.shelf-book:hover .shelf-cover-shine, .shelf-book:focus-visible .shelf-cover-shine { opacity: 1; }

.shelf-shop-badge {
  position: absolute; bottom: 0.5rem; left: 50%; transform: translate(-50%, 6px);
  background: var(--gold-light); color: var(--deep-plum-dark);
  font-family: var(--font-brand); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity var(--tr-fast), transform var(--tr-fast);
  pointer-events: none;
}
.shelf-book:hover .shelf-shop-badge, .shelf-book:focus-visible .shelf-shop-badge {
  opacity: 1; transform: translate(-50%, 0);
}

.shelf-caption { margin-top: 0.65rem; text-align: center; width: 100%; }
.shelf-caption-title {
  font-family: var(--font-serif); font-style: italic; font-size: 0.85rem;
  color: var(--text-dark); line-height: 1.25; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shelf-caption-author {
  font-family: var(--font-brand); font-size: 0.6rem; letter-spacing: 0.06em;
  color: var(--text-dark-muted); margin-top: 0.2rem;
}

.chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.chapter-card {
  background: var(--bg-dark-card); border: 1px solid var(--border-dark); border-radius: 6px;
  padding: 2.25rem 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.chapter-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.chapter-state { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; }
.chapter-name { font-size: 1.6rem; }
.chapter-city { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; color: var(--text-muted); }
.chapter-note { font-size: 0.9rem; color: var(--text-muted); margin: 0.4rem 0 0.8rem; }

.status-pill {
  display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-brand); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--border-dark); color: var(--text-light);
}
.status-open { background: var(--dusty-mauve); color: var(--deep-plum-dark); border-color: var(--dusty-mauve); }
.status-full { background: transparent; color: var(--text-light); border-color: var(--text-dim); }
.status-forming { background: rgba(201, 166, 89, 0.18); color: var(--gold-light); }
.status-soon { background: transparent; color: var(--soft-taupe); border-color: var(--soft-taupe-dark); }

.status-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 2rem;
  margin-top: 2.5rem; font-size: 0.85rem; color: var(--text-muted);
}
.status-legend .status-pill { margin-right: 0.6rem; }

.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--border-dark); }
.how-step span { font-family: var(--font-serif); font-size: 2.2rem; color: var(--gold-light); line-height: 1; }
.how-step h4 { font-family: var(--font-brand); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0.6rem 0 0.4rem; color: var(--text-light); }
.how-step p { font-size: 0.9rem; color: var(--text-muted); }

.lead-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.lead-col { background: var(--bg-paper-surface); border: 1px solid var(--border-light); border-radius: 6px; padding: 2rem; }
.lead-col h4 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--deep-plum); margin-bottom: 1rem; }
.lead-col ul { list-style: none; }
.lead-col li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.92rem; color: var(--text-dark); }
.lead-col li:last-child { border-bottom: none; }

.start-flow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1rem; margin-top: 3rem;
  font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep-plum);
}
.start-flow i { font-style: normal; color: var(--dusty-mauve-dark); }
.start-flow span { padding: 0.5rem 1rem; border: 1px solid var(--dusty-mauve); border-radius: 999px; white-space: nowrap; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.contact-card {
  display: block; text-decoration: none; background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 6px; padding: 2rem; transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.contact-card h4 { font-family: var(--font-serif); font-size: 1.35rem; color: var(--text-light); margin-bottom: 0.6rem; }
.contact-card span { font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }

/* ===== Gold Integration Pass — card framing, glow, richer surfaces ===== */
.author-subcard, .chapter-card, .contact-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(9, 6, 9, 0.22);
}
.author-subcard::before, .chapter-card::before, .contact-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}
.author-subcard:hover, .chapter-card:hover, .contact-card:hover {
  box-shadow: 0 18px 40px rgba(9, 6, 9, 0.32), 0 0 0 1px rgba(201, 166, 89, 0.18);
}

.lead-col {
  position: relative;
  box-shadow: 0 8px 20px rgba(94, 65, 90, 0.08);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-color var(--tr-fast);
}
.lead-col::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.lead-col:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 16px 32px rgba(94, 65, 90, 0.14);
}

/* Double-frame editorial treatment on the founder photo, echoing a gallery mat */
.about-image-frame {
  inset: 12px;
  border: 1px solid var(--gold-dim);
}
.about-image-wrapper::after {
  content: '';
  position: absolute; inset: 20px;
  border: 1px solid rgba(201, 166, 89, 0.32);
  pointer-events: none;
  border-radius: 2px;
}

/* Marquee: soft fade at both edges instead of a hard cut, gold on hover */
.authors-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-item {
  transition: color var(--tr-fast);
}
.marquee-item:hover {
  color: var(--gold-light);
}

/* Read genre pills gain a gold hover state to tie into the shelf below */
.read-genres span {
  transition: border-color var(--tr-fast), color var(--tr-fast);
}
.read-genres span:hover {
  border-color: var(--gold);
  color: var(--deep-plum);
}
.events-more span:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* Chapter status legend pills get the same gold hairline the rest of the page uses */
.status-legend {
  border-top: 1px solid var(--border-dark);
  padding-top: 2rem;
}

/* How-it-works numerals get a gold ring, echoing a wax seal */
.how-step span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
}

/* Start-flow ribbon: alternate gold/mauve pips so the flow reads as a
   sequence rather than a flat repeated row */
.start-flow span:nth-child(4n+1) { border-color: var(--gold); color: var(--gold-dark); }

/* ===== Motion & Interactivity Pass — de-flatten the text-heavy blocks ===== */

/* Generic staggered-child reveal, driven by JS adding .stagger-in per child
   once its parent's [data-stagger] scrolls into view (see script.js). */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-stagger] > *.stagger-in {
  opacity: 1;
  transform: translateY(0);
}

/* Status legend: interactive hover row, not a flat static line */
.status-legend > div {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  transition: background var(--tr-fast), transform var(--tr-fast);
}
.status-legend > div:hover {
  background: rgba(201, 166, 89, 0.08);
  transform: translateX(4px);
}
.status-legend .status-pill {
  transition: transform var(--tr-fast);
}
.status-legend > div:hover .status-pill {
  transform: scale(1.08);
}

/* How It Works: numerals lift on hover, and a connecting line runs
   behind them with a traveling dot on first scroll-into-view */
.how-steps {
  position: relative;
}
.how-steps::before {
  content: '';
  position: absolute;
  top: calc(3rem + 1.3rem);
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), var(--gold-dim), transparent);
}
.how-step {
  position: relative;
  transition: transform var(--tr-fast);
}
.how-step:hover {
  transform: translateY(-6px);
}
.how-step span {
  transition: box-shadow var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
  background: var(--bg-dark);
  position: relative;
  z-index: 1;
}
.how-step:hover span {
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(201, 166, 89, 0.1);
  transform: scale(1.06);
}
.how-steps-travel-dot {
  position: absolute;
  top: calc(3rem + 1.3rem - 3px);
  left: 8%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px 2px rgba(227, 200, 136, 0.8);
  opacity: 0;
  transition: left 1.6s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}
.how-steps-travel-dot.run {
  left: 92%;
  opacity: 1;
}

/* Lead columns (Who We're Looking For / What Leaders Do / What We Provide):
   list rows reveal in sequence on hover instead of sitting as one static block */
.lead-col li {
  position: relative;
  padding-left: 1.1rem;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.lead-col li::before {
  content: '✦';
  position: absolute; left: 0; top: 0.55rem;
  font-size: 0.55rem; color: var(--gold);
  opacity: 0; transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lead-col:hover li::before {
  opacity: 1;
  transform: translateX(0);
}
.lead-col:hover li {
  border-color: var(--gold-dim);
}
.lead-col li:nth-child(1)::before { transition-delay: 0.02s; }
.lead-col li:nth-child(2)::before { transition-delay: 0.07s; }
.lead-col li:nth-child(3)::before { transition-delay: 0.12s; }
.lead-col li:nth-child(4)::before { transition-delay: 0.17s; }
.lead-col li:nth-child(5)::before { transition-delay: 0.22s; }
.lead-col li:nth-child(6)::before { transition-delay: 0.27s; }

/* Start-flow ribbon: arrows drift gently to suggest forward motion */
.start-flow i {
  display: inline-block;
  animation: startFlowDrift 1.8s ease-in-out infinite;
}
.start-flow span:nth-child(4n+2) i,
.start-flow i:nth-of-type(2n) { animation-delay: 0.3s; }
@keyframes startFlowDrift {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(4px); opacity: 1; }
}
.start-flow span {
  transition: transform var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.start-flow span:hover {
  transform: translateY(-3px);
  background: var(--gold-faint);
  border-color: var(--gold);
}

/* =====================================================================
   PRODUCTION: balanced headings, skip link, focus, reduced motion
   ===================================================================== */
h1, h2, h3 { text-wrap: balance; }
.section-desc, .hero-subtitle { text-wrap: pretty; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2147483647;
  background: var(--gold); color: #1a1218; padding: 0.75rem 1.25rem;
  font-family: var(--font-brand); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; border-radius: 4px; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

.a11y-toggle {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1500;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; min-width: 44px; padding: 0.6rem 0.9rem;
  background: var(--deep-plum-dark); color: var(--text-light);
  border: 1px solid var(--border-dark); border-radius: 999px;
  font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.a11y-toggle:hover { border-color: var(--gold); transform: translateY(-2px); }
.a11y-toggle[aria-pressed="true"] { background: #fff; color: #111; border-color: #111; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .marquee-track { animation: none !important; }
  .rv, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* Touch devices: hover-only reveals must be visible without hover */
@media (hover: none) {
  .lead-col li::before { opacity: 1; transform: none; }
  .shelf-shop-badge { opacity: 1; transform: translate(-50%, 0); }
}

/* =====================================================================
   PRODUCTION: mobile and tablet layout (base rules above are desktop)
   ===================================================================== */
@media (max-width: 991px) {
  .how-steps::before, .how-steps-travel-dot { display: none; }
  .about-image-wrapper img { height: 440px; }
}

@media (max-width: 767px) {
  .navbar { top: 0.75rem; width: calc(100% - 1.5rem); padding: 0.5rem 1.4rem; }
  .nav-brand { gap: 0.6rem; min-width: 0; }
  .nav-logo-mark { height: 38px; }
  .nav-title { font-size: 0.74rem; letter-spacing: 0.14em; }
  .nav-toggle { padding: 12px; margin-right: -6px; }

  .hero { padding-top: 7.5rem; padding-bottom: 3.5rem; }
  .hero-live-badge { max-width: 100%; border-radius: 18px; padding: 0.5rem 0.9rem; align-items: flex-start; }
  .hero-live-badge .pulse-dot { margin-top: 0.35rem; flex-shrink: 0; }
  .hero-live-text { font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1.5; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; }

  .section { padding: 4rem 0; }
  .section-header { margin-bottom: 2.5rem; }

  .about-grid { gap: 2.5rem; }
  .about-image-wrapper img { height: 360px; object-position: 50% 30%; }
  .about-quote-card { position: relative; inset: auto; margin: -3rem 1rem 0; }
  .about-image-wrapper::after { inset: 14px; }
  .about-stats { gap: 1.5rem 1rem; }
  .stat-num { font-size: 2rem; }

  .pillars-grid { gap: 1.25rem; }
  .pillars-grid .pillar-card { flex-basis: 100%; max-width: none; min-height: 300px; padding: 2rem 1.5rem; }

  .read-block { margin-top: 3.5rem; }
  .shelf-eyebrow-row { flex-direction: column; align-items: flex-start; }
  .bookshelf { justify-content: center; gap: 1.25rem 1rem; padding: 2rem 1rem 1.5rem; }
  .shelf-book { width: calc(50% - 0.75rem); max-width: 150px; }

  .chapter-card { padding: 1.75rem 1.5rem; }
  .status-legend { grid-template-columns: 1fr; }
  .status-legend > div { flex-wrap: wrap; }
  .how-steps { gap: 2rem 1rem; }
  .how-step span { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; }

  .lead-col { padding: 1.5rem; }
  .start-flow { gap: 0.6rem; }
  .start-flow i { transform: rotate(90deg); display: block; width: 100%; text-align: center; animation: none; }
  .start-flow span { white-space: normal; text-align: center; }

  .contact-card { padding: 1.5rem; }

  .footer { padding: 4rem 0 2rem; border-radius: 2rem 2rem 0 0; }
  .footer-grid { gap: 2.5rem; margin-bottom: 3rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .modal-backdrop { padding: 0.75rem; align-items: flex-end; }
  .modal-box { padding: 2.25rem 1.25rem 1.5rem; max-height: 92dvh; }
  .modal-close { top: 0.75rem; right: 0.75rem; min-width: 44px; min-height: 44px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 1rem; }

  .a11y-toggle-label { display: none; }
  .a11y-toggle { padding: 0.6rem; right: 0.75rem; bottom: 0.75rem; }
}

@media (max-width: 400px) {
  .container { padding: 0 1.15rem; }
  .btn { padding: 0.9rem 1.25rem; letter-spacing: 0.12em; }
  .hero-title { font-size: 2.6rem; }
  .nav-title { letter-spacing: 0.1em; }
  .shelf-book { width: calc(50% - 0.6rem); }
}

/* =====================================================================
   PRODUCTION: WCAG AA accessible mode (toggle bottom-right)
   Remaps the design tokens to a white / near-black scheme, enlarges every
   small label, enforces 44px tap targets, calms motion, thickens display type.
   ===================================================================== */
body.a11y-mode {
  --bg-dark: #ffffff;
  --bg-dark-surface: #f4f1f3;
  --bg-dark-card: #ffffff;
  --bg-paper: #ffffff;
  --bg-paper-surface: #ffffff;
  --text-light: #111111;
  --text-muted: #1f1f1f;
  --text-dim: #333333;
  --text-dark: #111111;
  --text-dark-muted: #2a2a2a;
  --gold: #6b4d0c;
  --gold-light: #5a3f08;
  --gold-dark: #4a3306;
  --gold-dim: rgba(0,0,0,0.35);
  --gold-faint: rgba(0,0,0,0.06);
  --border-dark: rgba(0,0,0,0.55);
  --border-light: rgba(0,0,0,0.55);
  --deep-plum: #4a2f46;
  background: #fff; color: #111;
}
body.a11y-mode .bg-noise { display: none; }
body.a11y-mode .section-dark, body.a11y-mode .section-paper { background-image: none; }
body.a11y-mode #chapters, body.a11y-mode #contact { background-color: #f4f1f3 !important; }
body.a11y-mode .navbar { background: #fff; border-color: #111; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
body.a11y-mode .nav-title, body.a11y-mode .nav-link, body.a11y-mode .spine-dot { color: #111; text-shadow: none; }
body.a11y-mode .nav-toggle span { background: #111; }
body.a11y-mode .spine-head, body.a11y-mode .spine-tail { background: #111; box-shadow: none; }
body.a11y-mode .mobile-drawer { background: #fff; }
body.a11y-mode .mobile-drawer-link { color: #111; }
body.a11y-mode .footer { background-color: #f4f1f3; }
body.a11y-mode .modal-backdrop { background: rgba(0,0,0,0.75); }

/* Text sitting on photography stays light, over a heavier scrim */
body.a11y-mode .hero-overlay { background: rgba(20, 12, 20, 0.78); }
body.a11y-mode .hero-title, body.a11y-mode .hero-subtitle, body.a11y-mode .hero-live-text,
body.a11y-mode .pillar-title, body.a11y-mode .pillar-desc, body.a11y-mode .pillar-num,
body.a11y-mode .about-quote-card p { color: #fff; text-shadow: none; }
body.a11y-mode .hero-title em { color: #f1d98f; }
body.a11y-mode .hero-live-badge { background: rgba(0,0,0,0.6); border-color: #fff; }
body.a11y-mode .pillar-overlay { background: rgba(20, 12, 20, 0.82); }
body.a11y-mode .about-quote-card { background: #111; border-color: #fff; }
body.a11y-mode .hero .btn-ghost { color: #fff; border-color: #fff; }
body.a11y-mode .hero .btn-primary { background: #fff; color: #111; border-color: #fff; }

/* Buttons: solid, high contrast */
body.a11y-mode .btn-primary { background: #111; color: #fff; border-color: #111; box-shadow: none; }
body.a11y-mode .btn-ghost { color: #111; border: 2px solid #111; background: transparent; }
body.a11y-mode .btn-dark { background: #111; color: #fff; border-color: #111; }
body.a11y-mode .btn:hover { transform: none; box-shadow: none; }

/* Links: distinct underlined accessible blue in running copy */
body.a11y-mode .section-desc a, body.a11y-mode .chapter-note a, body.a11y-mode .footer-links a,
body.a11y-mode .footer-bottom a, body.a11y-mode .modal-box a { color: #0057b8; text-decoration: underline; }

/* Status pills and cards */
body.a11y-mode .status-pill { color: #111; border: 2px solid #111; background: #fff; }
body.a11y-mode .status-open { background: #111; color: #fff; }
body.a11y-mode .chapter-card, body.a11y-mode .contact-card, body.a11y-mode .author-subcard,
body.a11y-mode .lead-col, body.a11y-mode .modal-box { background: #fff; border: 2px solid #111; box-shadow: none; }
body.a11y-mode .chapter-card::before, body.a11y-mode .contact-card::before,
body.a11y-mode .author-subcard::before, body.a11y-mode .lead-col::before,
body.a11y-mode .section::before { display: none; }
body.a11y-mode .how-step span { background: #fff; border: 2px solid #111; color: #111; }
body.a11y-mode .start-flow span { border: 2px solid #111; color: #111; background: #fff; }
body.a11y-mode .start-flow i { color: #111; }
body.a11y-mode .read-genres span { border: 2px solid #111; color: #111; }
body.a11y-mode .bookshelf { background: #f4f1f3; border-color: #111; }
body.a11y-mode .form-group input, body.a11y-mode .form-group select, body.a11y-mode .form-group textarea {
  background: #fff; color: #111; border: 2px solid #111;
}
body.a11y-mode .form-group label { color: #111; }
body.a11y-mode .marquee-track { animation: none; }
body.a11y-mode .authors-marquee { background: #f4f1f3; -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
body.a11y-mode .marquee-item { color: #111; }

/* Type: every small tracked-caps label to at least 0.95rem, thin serifs thickened */
body.a11y-mode .eyebrow, body.a11y-mode .nav-link, body.a11y-mode .btn, body.a11y-mode .status-pill,
body.a11y-mode .chapter-state, body.a11y-mode .form-group label, body.a11y-mode .footer-col-title,
body.a11y-mode .footer-links a, body.a11y-mode .footer-bottom, body.a11y-mode .hero-live-text,
body.a11y-mode .pillar-num, body.a11y-mode .shelf-hint, body.a11y-mode .shelf-caption-author,
body.a11y-mode .shelf-caption-title, body.a11y-mode .marquee-item, body.a11y-mode .how-step h4,
body.a11y-mode .contact-card span, body.a11y-mode .stat-label, body.a11y-mode .read-genres span,
body.a11y-mode .start-flow, body.a11y-mode .author-subcard-date, body.a11y-mode .a11y-toggle,
body.a11y-mode .mobile-drawer-link { font-size: 0.95rem; }
body.a11y-mode .section-desc, body.a11y-mode .chapter-note, body.a11y-mode .how-step p,
body.a11y-mode .lead-col li, body.a11y-mode .status-legend { font-size: 1.05rem; }
body.a11y-mode h1, body.a11y-mode h2, body.a11y-mode h3, body.a11y-mode h4,
body.a11y-mode .about-quote-card p, body.a11y-mode .chapter-city, body.a11y-mode .author-subcard-book { font-weight: 600; }
body.a11y-mode h1 em, body.a11y-mode h2 em, body.a11y-mode h3 em { font-weight: 600; }

/* Tap targets and calm motion */
body.a11y-mode a, body.a11y-mode button { min-height: 44px; }
body.a11y-mode .nav-link, body.a11y-mode .footer-links a, body.a11y-mode .mobile-drawer-link {
  display: inline-flex; align-items: center; min-height: 44px;
}
body.a11y-mode *, body.a11y-mode *::before, body.a11y-mode *::after {
  animation: none !important; scroll-behavior: auto !important;
}
body.a11y-mode .rv, body.a11y-mode [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
body.a11y-mode .custom-cursor, body.a11y-mode .custom-cursor-ring { display: none !important; }
body.a11y-mode a:focus-visible, body.a11y-mode button:focus-visible,
body.a11y-mode input:focus-visible, body.a11y-mode select:focus-visible, body.a11y-mode textarea:focus-visible {
  outline: 3px solid #0057b8; outline-offset: 3px;
}

.section-desc-soft { color: rgba(247, 244, 238, 0.65); }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.68rem; }
.card-copy { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
body.a11y-mode .section-desc-soft { color: #1f1f1f; }
body.a11y-mode .btn-sm { font-size: 0.95rem; padding: 0.7rem 1.2rem; }
body.a11y-mode .card-copy { font-size: 1.05rem; }

/* =====================================================================
   MULTI-PAGE: inner-page heroes, split layouts, mission, values, teasers
   ===================================================================== */

/* Active nav link */
.nav-link[aria-current="page"] {
  color: var(--gold-light);
  box-shadow: 0 1px 0 var(--gold);
  padding-bottom: 4px;
}
.mobile-drawer-link[aria-current="page"] { color: var(--gold); }

/* Heading-level variants (h2/h3 now used for semantics; same look as before) */
.how-step h3 { font-family: var(--font-brand); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0.6rem 0 0.4rem; color: var(--text-light); font-weight: 400; }
.lead-col h3 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--deep-plum); margin-bottom: 1rem; }
.contact-card h2 { font-family: var(--font-serif); font-size: 1.35rem; color: var(--text-light); margin-bottom: 0.6rem; font-weight: 400; }

/* Buttons in a CTA row sit side by side and wrap cleanly */
.section-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.section-cta > p { flex-basis: 100%; }
.section-cta-left { margin-top: 2rem; }

/* Inner page hero */
.page-hero {
  position: relative;
  padding: clamp(9.5rem, 18vh, 12rem) 0 clamp(3.5rem, 8vh, 5.5rem);
  background-color: var(--bg-dark);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 12% 100%, rgba(201, 166, 89, 0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(43, 29, 42, 0.86) 0%, rgba(43, 29, 42, 0.78) 55%, rgba(43, 29, 42, 0.97) 100%);
}
.page-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.6;
}
.page-hero-inner { position: relative; max-width: 980px; }
.page-title {
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.08;
  color: var(--text-light);
  margin-bottom: 1rem;
  text-shadow: 0 4px 20px rgba(0,0,0,0.45);
}
.page-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--text-muted); max-width: 640px; line-height: 1.5;
}

/* Two-column story layout: 1 : sqrt(3) split */
.split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) {
  .split { grid-template-columns: 36.6fr 63.4fr; gap: 4.5rem; }
  .split-head { position: sticky; top: 8rem; }
}
.split-head .section-title { margin-bottom: 0; }
.pull-line {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3;
  color: var(--deep-plum); margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--gold);
}
.section-paper .pull-line { color: var(--deep-plum); }
.lead-cols { margin-top: 4rem; }
.split + .lead-cols { margin-top: 4.5rem; }

/* Mission statement */
.mission { max-width: 900px; margin: 0 auto; text-align: center; }
.mission .eyebrow { margin-bottom: 2rem; }
.mission-statement {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.3; color: var(--text-light);
  position: relative; padding: 2.5rem 0 0;
}
.mission-statement::before {
  content: '“'; position: absolute; top: -1.4rem; left: 50%; transform: translateX(-50%);
  font-size: 6rem; line-height: 1; color: var(--gold); opacity: 0.5;
}

/* Values */
.values-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.value-card {
  flex: 1 1 200px; max-width: 232px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.6rem 1.5rem; position: relative; overflow: hidden;
  background: var(--bg-dark-card); border: 1px solid var(--border-dark); border-radius: 6px;
  transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.value-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.value-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 18px 36px rgba(9, 6, 9, 0.35); }
.value-num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gold); letter-spacing: 0.12em; }
.value-card h3 { font-size: 1.55rem; color: var(--text-light); }

/* Home teasers */
.teaser-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .teaser-grid { grid-template-columns: 1.1fr 1fr; gap: 5rem; } }
.teaser-pills { display: flex; flex-direction: column; gap: 1rem; }
.teaser-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; position: relative; overflow: hidden;
  background: var(--bg-dark-card); border: 1px solid var(--border-dark); border-radius: 6px;
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.teaser-pill::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.teaser-pill:hover { transform: translateX(6px); border-color: var(--gold); }
.teaser-pill strong { display: block; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; color: var(--text-light); }
.teaser-pill div span { font-size: 0.85rem; color: var(--text-muted); }

.teaser-event {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 2.5rem;
  padding: 2rem 2.25rem; background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 6px; position: relative; overflow: hidden;
}
.teaser-event::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.teaser-event-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; padding: 0.9rem 1rem; border: 1px solid var(--gold); border-radius: 4px;
  font-family: var(--font-mono); text-align: center; line-height: 1.1;
}
.teaser-event-month { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--gold); }
.teaser-event-day { font-family: var(--font-serif); font-size: 2.8rem; color: var(--text-light); line-height: 1; margin: 0.2rem 0; }
.teaser-event-year { font-size: 0.7rem; letter-spacing: 0.16em; color: var(--text-muted); }
.teaser-event-body { flex: 1 1 260px; }

.teaser-center { max-width: 760px; margin: 0 auto; text-align: center; }
.teaser-center .section-desc { margin-left: auto; margin-right: auto; }
.teaser-center .section-cta { margin-top: 2.25rem; }

.bookshelf-mini { margin-bottom: 1rem; }

.events-more-block { margin-top: 4rem; text-align: center; }
.events-more-block .events-more { justify-content: center; margin-top: 1rem; }
.presents-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 0; }

/* Mobile */
@media (max-width: 767px) {
  .page-hero { padding-top: 7.5rem; }
  .teaser-event { padding: 1.5rem; gap: 1.25rem; }
  .teaser-event .btn { width: 100%; }
  .value-card { flex-basis: calc(50% - 0.75rem); max-width: none; min-height: 150px; }
  .value-card:last-child { flex-basis: 100%; }
  .section-cta .btn { width: 100%; }
}

/* Accessible mode */
body.a11y-mode .page-hero-overlay { background: rgba(20, 12, 20, 0.84); }
body.a11y-mode .page-title, body.a11y-mode .page-sub, body.a11y-mode .page-hero .eyebrow { color: #fff; text-shadow: none; }
body.a11y-mode .page-title em { color: #f1d98f; }
body.a11y-mode .page-hero::after { display: none; }
body.a11y-mode .pull-line { color: #111; border-top-color: #111; }
body.a11y-mode .mission-statement { color: #111; }
body.a11y-mode .mission-statement::before { color: #111; opacity: 0.35; }
body.a11y-mode .value-card, body.a11y-mode .teaser-pill, body.a11y-mode .teaser-event { background: #fff; border: 2px solid #111; box-shadow: none; }
body.a11y-mode .value-card::before, body.a11y-mode .teaser-pill::before, body.a11y-mode .teaser-event::before { display: none; }
body.a11y-mode .teaser-event-date { border-color: #111; }
body.a11y-mode .nav-link[aria-current="page"] { color: #111; box-shadow: 0 2px 0 #111; }
body.a11y-mode .value-num, body.a11y-mode .teaser-event-month, body.a11y-mode .teaser-event-year,
body.a11y-mode .teaser-pill div span { font-size: 0.95rem; }
body.a11y-mode .how-step h3 { font-size: 0.95rem; color: #111; }

/* Past event spotlight */
.spotlight { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 992px) { .spotlight { grid-template-columns: 1fr 1.15fr; gap: 5rem; } }
.spotlight-figure { position: relative; margin: 0; border-radius: 4px; }
.spotlight-figure img { width: 100%; height: auto; max-height: 620px; object-fit: cover; object-position: 50% 25%; display: block; border-radius: 4px; box-shadow: 0 24px 50px rgba(43, 29, 42, 0.28); }
.spotlight-figure::before, .spotlight-figure::after { content: ''; position: absolute; border: 1px solid rgba(201, 166, 89, 0.55); pointer-events: none; border-radius: 2px; }
.spotlight-figure::before { inset: 12px; }
.spotlight-figure::after { inset: 20px; opacity: 0.5; }
.spotlight-badge {
  position: absolute; top: 1.75rem; left: 1.75rem; z-index: 2;
  background: var(--gold); color: #1a1218; padding: 0.4rem 0.9rem; border-radius: 999px;
  font-family: var(--font-brand); font-size: 0.64rem; letter-spacing: 0.16em; white-space: nowrap;
}
.spotlight-role { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; color: var(--deep-plum); margin-bottom: 1.5rem; }
.spotlight-quote {
  font-family: var(--font-serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.55; color: var(--text-dark);
  border-left: 2px solid var(--gold); padding-left: 1.5rem; margin-bottom: 1.75rem;
}
.spotlight-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.section-paper .btn-ghost { color: var(--deep-plum); border-color: var(--deep-plum); }
.section-paper .btn-ghost:hover { background: rgba(94, 65, 90, 0.08); color: var(--deep-plum); }
@media (max-width: 767px) { .spotlight-actions .btn { width: 100%; } .spotlight-badge { top: 1.4rem; left: 1.4rem; } }
body.a11y-mode .spotlight-badge { background: #111; color: #fff; }
body.a11y-mode .spotlight-quote { border-left-color: #111; color: #111; }
body.a11y-mode .spotlight-role { color: #111; }
body.a11y-mode .spotlight-figure::before, body.a11y-mode .spotlight-figure::after { display: none; }
body.a11y-mode .section-paper .btn-ghost { color: #111; border-color: #111; }

/* Past event spotlight on a dark section (home) */
.spotlight-home { margin-top: 4.5rem; }
.spotlight-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--text-light); margin-bottom: 0.75rem; }
.section-dark .spotlight-role { color: var(--gold-light); }
.section-dark .spotlight-quote { color: var(--text-light); }
.section-dark .spotlight-figure img { box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); }
body.a11y-mode .spotlight-title { color: #111; }
body.a11y-mode .section-dark .spotlight-role { color: #111; }

/* =====================================================================
   GALLERY: filterable masonry + lightbox
   ===================================================================== */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; }
.filter-chip {
  min-height: 44px; padding: 0.55rem 1.4rem; cursor: pointer;
  background: transparent; color: var(--text-dark-muted);
  border: 1px solid var(--border-light); border-radius: 999px;
  font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.filter-chip:hover { border-color: var(--gold); }
.filter-chip.active { background: var(--deep-plum); color: var(--text-light); border-color: var(--deep-plum); }

.gallery-grid { column-count: 3; column-gap: 1.25rem; }
@media (max-width: 991px) { .gallery-grid { column-count: 2; } }
@media (max-width: 479px) { .gallery-grid { column-gap: 0.75rem; } }

.gallery-item {
  display: block; width: 100%; margin: 0 0 1.25rem; padding: 0; cursor: zoom-in;
  break-inside: avoid; position: relative; overflow: hidden;
  background: var(--soft-taupe-light); border: 0; border-radius: 4px;
  box-shadow: 0 10px 24px rgba(43, 29, 42, 0.16);
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.gallery-item img { display: block; width: 100%; height: auto; transition: transform 0.6s ease, filter 0.4s ease; }
.gallery-item::after {
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 166, 89, 0);
  border-radius: 2px; pointer-events: none; transition: border-color var(--tr-fast);
}
.gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(43, 29, 42, 0.28); }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
.gallery-item:hover::after, .gallery-item:focus-visible::after { border-color: rgba(201, 166, 89, 0.85); }
.gallery-item[hidden] { display: none; }

/* Lightbox (sits above page content, below the custom cursor) */
.lightbox {
  position: fixed; inset: 0; z-index: 20000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 12, 20, 0.94); padding: 2.5rem 4.5rem;
  opacity: 0; transition: opacity 0.3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lightbox-figure img {
  max-width: 100%; max-height: calc(100dvh - 8rem); width: auto; height: auto; display: block;
  border-radius: 3px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.lightbox-figure figcaption { font-family: var(--font-brand); font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(250, 247, 244, 0.8); text-align: center; max-width: 60ch; }
.lightbox-close, .lightbox-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(250, 247, 244, 0.08); color: #FAF7F4; border: 1px solid rgba(201, 166, 89, 0.5);
  font-size: 1.5rem; line-height: 1; transition: background var(--tr-fast), border-color var(--tr-fast);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(201, 166, 89, 0.25); border-color: var(--gold); }
.lightbox-close { top: 1.25rem; right: 1.25rem; font-size: 2rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .lightbox { padding: 4.5rem 0.75rem 5rem; }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; transform: none; }
  .lightbox-prev { left: calc(50% - 4rem); }
  .lightbox-next { right: calc(50% - 4rem); }
  .lightbox-figure img { max-height: calc(100dvh - 10rem); }
}

/* Reveal: items are visible by default; the stagger is progressive only */
.gallery-item.rv { transition-delay: calc(var(--i, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  .gallery-item img, .gallery-item, .lightbox { transition: none !important; }
}

/* Accessible mode */
body.a11y-mode .filter-chip { border: 2px solid #111; color: #111; font-size: 0.95rem; }
body.a11y-mode .filter-chip.active { background: #111; color: #fff; }
body.a11y-mode .gallery-item { box-shadow: none; border: 2px solid #111; }
body.a11y-mode .gallery-item::after { display: none; }
body.a11y-mode .lightbox-figure figcaption { font-size: 1.05rem; color: #fff; }

/* Founder portrait: tall source, keep the face in frame inside the 520px box */
.about-image-wrapper img { object-position: 50% 28%; }

/* =====================================================================
   EYE-SAFE HEROES
   The photo is pre-cropped so the eyes sit in the upper-middle of the band
   (--fy). Because background-position percentages align the image point at
   N% with the box point at N%, pointing --fy at that eye line keeps the eyes
   at the same place on every screen width. The headline is anchored to the
   bottom so it only ever covers shoulders, never faces; the top stays clear
   for the nav.
   ===================================================================== */
.page-hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(30rem, 42vw, 42rem);
  padding: 0 0 clamp(2.25rem, 4.5vw, 3.75rem);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--fx, 50%) var(--fy, 38%);
}
.page-hero-inner { width: 100%; }
.page-title { font-size: clamp(2.1rem, 4.4vw, 3.8rem); margin-bottom: 0.75rem; }
.page-hero-overlay {
  background:
    radial-gradient(ellipse 70% 90% at 12% 100%, rgba(201, 166, 89, 0.14) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(43, 29, 42, 0.50) 0%,
      rgba(43, 29, 42, 0.18) 28%,
      rgba(43, 29, 42, 0.30) 50%,
      rgba(43, 29, 42, 0.82) 74%,
      rgba(43, 29, 42, 0.97) 100%);
}
@media (max-width: 767px) {
  .page-hero {
    min-height: 30rem;
    padding-bottom: 2rem;
    background-position: var(--fxm, 50%) var(--fy, 38%);
  }
  .page-title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
}
/* Home: the hero image is a composed canvas with the face on the right; eye line is baked in */
.hero-bg img { object-position: 82% 55%; }
@media (max-width: 767px) { .hero-bg img { object-position: 50% 27%; } }
body.a11y-mode .page-hero-overlay { background: rgba(20, 12, 20, 0.80); }

/* Phones: show the full photo width (no one is sliced off the edge), placed
   below the floating nav, then fade it into the plum field so the headline
   sits on solid color instead of over faces. */
@media (max-width: 767px) {
  .page-hero {
    background-size: 100% auto;
    background-position: 50% 5.4rem;
    background-color: var(--bg-dark);
  }
  .page-hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(43, 29, 42, 0.40) 0%,
        rgba(43, 29, 42, 0.08) 18%,
        rgba(43, 29, 42, 0.12) 42%,
        rgba(43, 29, 42, 0.78) 58%,
        rgba(43, 29, 42, 1) 66%,
        rgba(43, 29, 42, 1) 100%);
  }
}

/* =====================================================================
   PROFESSIONAL PHOTO FEATURES: community band + dinner story
   ===================================================================== */
.section-header-center { margin-left: auto; margin-right: auto; text-align: center; }

.community-figure, .dinner-lead {
  position: relative; margin: 0; border-radius: 4px;
  box-shadow: 0 28px 60px rgba(43, 29, 42, 0.30);
}
.community-figure img, .dinner-lead img { display: block; width: 100%; height: auto; border-radius: 4px; }
.community-figure::before, .dinner-lead::before,
.community-figure::after, .dinner-lead::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 2px;
  border: 1px solid rgba(201, 166, 89, 0.55);
}
.community-figure::before, .dinner-lead::before { inset: 12px; }
.community-figure::after, .dinner-lead::after { inset: 20px; opacity: 0.45; }

.dinner-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.dinner-tile { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; position: relative; box-shadow: 0 16px 36px rgba(9, 6, 9, 0.35); }
.dinner-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.dinner-tile:hover img { transform: scale(1.04); }
.dinner-tile::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(201, 166, 89, 0); border-radius: 2px; pointer-events: none; transition: border-color var(--tr-fast); }
.dinner-tile:hover::after { border-color: rgba(201, 166, 89, 0.8); }

@media (max-width: 767px) {
  .dinner-trio { grid-template-columns: 1fr; gap: 0.9rem; }
  .dinner-tile { aspect-ratio: 4 / 4.4; }
  .community-figure::before, .dinner-lead::before { inset: 8px; }
  .community-figure::after, .dinner-lead::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dinner-tile img { transition: none; } }
body.a11y-mode .community-figure, body.a11y-mode .dinner-lead, body.a11y-mode .dinner-tile { box-shadow: none; border: 2px solid #111; }
body.a11y-mode .community-figure::before, body.a11y-mode .dinner-lead::before,
body.a11y-mode .community-figure::after, body.a11y-mode .dinner-lead::after, body.a11y-mode .dinner-tile::after { display: none; }

/* =====================================================================
   BOOK CLUB HERO: one composition. Rotating portraits bleed in from the
   right and dissolve into the plum field; copy is left-aligned on a gold
   spine. Every slide is pre-cropped (4:5) with the eye line at 34% of the
   panel, object-position 50% 34% keeps it there at any size. Faces sit in
   the right 60-75% of each crop, clear of the fade and the headline.
   ===================================================================== */
.bc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(36rem, 92vh, 54rem);
  display: flex; align-items: flex-end;
  padding: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(60% 55% at 0% 100%, rgba(201, 166, 89, 0.16), transparent),
    radial-gradient(45% 40% at 100% 0%, rgba(199, 162, 183, 0.14), transparent),
    var(--bg-dark);
}
.bc-hero-photos {
  position: absolute; top: 0; right: 0; bottom: 0; width: 54%; z-index: -1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 14%, #000 34%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 14%, #000 34%);
}
.bc-hero-photos::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(43,29,42,0.78) 0%, transparent 26%),
    linear-gradient(to top, rgba(43,29,42,0.92) 0%, transparent 30%);
}
.bc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.bc-slide.is-active { opacity: 1; }
.bc-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%;
  transform: scale(1.06); transition: transform 7s ease-out;
}
.bc-slide.is-active img { transform: scale(1); }

.bc-hero-grid { position: relative; width: 100%; }
.bc-copy {
  position: relative; max-width: 38rem;
  padding-left: clamp(1.4rem, 2.6vw, 2.2rem);
  border-left: 1px solid rgba(201, 166, 89, 0.7);
}
.bc-copy::before {
  content: ''; position: absolute; left: -4px; top: 0; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg);
}
.bc-kicker {
  display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.6rem;
  font-family: var(--font-brand); font-size: 0.75rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.bc-kicker i { display: block; width: 2.6rem; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }
.bc-title { font-size: clamp(2.4rem, 4.8vw, 4.4rem); line-height: 1.04; color: var(--text-light); margin: 0; }
.bc-line { display: block; white-space: nowrap; }
.bc-line-2 { padding-left: clamp(1.4rem, 3.6vw, 3.2rem); color: var(--text-muted); }
.bc-line-3 { padding-left: clamp(2.8rem, 7.2vw, 6.4rem); }
.bc-line em {
  font-size: 1.08em; padding-right: 0.06em;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-rail { list-style: none; margin: clamp(2rem, 4.5vw, 3.4rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.bc-rail-btn {
  display: inline-flex; align-items: baseline; gap: 0.5rem; min-height: 44px; padding: 0;
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font-family: var(--font-brand); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap; transition: color 0.3s, border-color 0.3s;
}
.bc-rail-btn b { font-weight: 400; color: var(--gold-dark); transition: color 0.3s; }
.bc-rail-btn:hover, .bc-rail-btn.is-active { color: var(--text-light); border-bottom-color: var(--gold); }
.bc-rail-btn.is-active b { color: var(--gold); }
.bc-rail-btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.bc-hero-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.6; }

@media (max-width: 767px) {
  .bc-hero { display: block; min-height: 0; padding: 0 0 2.5rem; }
  .bc-hero-photos {
    position: relative; width: 100%; height: auto; aspect-ratio: 4 / 4.4; z-index: 0; margin-top: 5.2rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }
  .bc-hero-photos::after { background: linear-gradient(to bottom, rgba(43,29,42,0.5) 0%, transparent 16%); }
  .bc-hero-grid { margin-top: -2.2rem; }
  .bc-copy { max-width: none; }
  .bc-title { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .bc-line-2 { padding-left: 1.2rem; }
  .bc-line-3 { padding-left: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-slide { transition: none; }
  .bc-slide img { transform: none; transition: none; }
}
body.a11y-mode .bc-hero { background: #1b1119; }
body.a11y-mode .bc-hero-photos { -webkit-mask-image: none; mask-image: none; opacity: 0.5; }
body.a11y-mode .bc-title, body.a11y-mode .bc-line-2 { color: #fff; }
body.a11y-mode .bc-line em { color: #ffe39a; background: none; -webkit-text-fill-color: #ffe39a; }
body.a11y-mode .bc-kicker, body.a11y-mode .bc-rail-btn { font-size: 0.95rem; color: #fff; }
body.a11y-mode .bc-rail-btn b { color: #ffe39a; }

/* Home variant of the split hero */
.bc-hero-home { min-height: clamp(38rem, 100vh, 58rem); }
.bc-hero-home .bc-title { font-size: clamp(3rem, 6.2vw, 5.6rem); }
.bc-hero-home .bc-line-2 { color: var(--text-light); padding-left: clamp(1.8rem, 4.4vw, 4rem); }
.bc-hero-home .hero-live-badge { margin-bottom: 1.6rem; }
.bc-hero-home .hero-subtitle { margin-top: 1.4rem; max-width: 30rem; }
.bc-hero-home .hero-actions { margin-top: 2rem; }
@media (max-width: 767px) { .bc-hero-home .bc-title { font-size: clamp(2.6rem, 13vw, 3.4rem); } }

.bc-pause {
  margin-top: 1rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}
.bc-pause:hover { color: var(--gold-light); }
.bc-pause:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
body.a11y-mode .bc-pause { font-size: 0.95rem; color: #fff; }

/* Pause control: only for visitors who need it (reduced motion, accessible mode) */
.bc-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .bc-pause { display: inline-block; } }
body.a11y-mode .bc-pause { display: inline-block; }

/* Ken Burns: slow push-in / pull-out on every photo. The origin sits on the eye line (34%),
   so the eyes hold their place while the frame breathes around them. The same animation runs on
   the active slide AND on the slide fading out (same name, so it never restarts), and its length
   equals hold + crossfade, so there is no jump at the swap. */
.bc-slide img { transform-origin: 62% 34%; transition: none; }
.bc-slide.is-active img, .bc-slide.is-leaving img { animation: bcIn 6.8s linear forwards; }
.bc-slide:nth-child(even).is-active img, .bc-slide:nth-child(even).is-leaving img { animation-name: bcOut; }
@keyframes bcIn  { from { transform: scale(1); }    to { transform: scale(1.1); } }
@keyframes bcOut { from { transform: scale(1.1); }  to { transform: scale(1.02); } }
.bc-slide { transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .bc-slide.is-active img, .bc-slide.is-leaving img { animation: none; transform: none; }
}

/* Story section: the founder portrait rides at the top of its column (aligned to the eyebrow)
   and stays with the text as it scrolls, instead of floating mid-column with empty space above. */
@media (min-width: 992px) {
  .about-grid { align-items: start; }
}
/* The stats ride under the portrait, filling what used to be dead space in the left column */
.about-left .about-stats { margin-top: 2rem; }

/* Per-photo focal point: eyes sit about 38% down the hero, below the nav band, at any width */
.bc-slide img { object-position: 50% var(--op, 45%); transform-origin: 62% 40%; }

/* Framing: every slide is cropped so its highest eye line sits at 34% (upper third). With
   object-position set to that same 34%, percent alignment keeps the eyes on the upper-third
   line at every screen size. */
.bc-slide img { object-position: 50% 34%; transform-origin: 62% 34%; }

/* Community + chapter finder: one section. The chapter panel rests on the bottom edge of the group portrait. */
.community-chapters .community-figure { margin-bottom: 0; }
.chapter-panel {
  position: relative; z-index: 2;
  margin: clamp(-5.2rem, -6vw, -2.6rem) clamp(0rem, 4vw, 4rem) 0;
  padding: clamp(1.75rem, 3.6vw, 3rem);
  background: rgba(43, 29, 42, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 166, 89, 0.5);
  border-radius: 4px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}
.chapter-panel .teaser-grid { gap: clamp(1.75rem, 4vw, 4rem); }
.chapter-panel-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
@media (max-width: 767px) { .chapter-panel { margin: -1.5rem 0 0; } }
body.a11y-mode .chapter-panel { background: #1b1119; border-color: #fff; }

/* Home reading shelf: six books fill the row edge to edge (equal columns), three per row on tablets */
@media (min-width: 768px) {
  .bookshelf-mini { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: end; }
  .bookshelf-mini .shelf-book { width: 100%; max-width: 150px; }
}
@media (min-width: 992px) {
  .bookshelf-mini { grid-template-columns: repeat(6, 1fr); }
}

/* Community + chapters: the group portrait is atmosphere, not a feature. It sits behind the copy as a
   tinted, softened backdrop that dissolves into the plum at the top and bottom. */
.community-chapters { position: relative; isolation: isolate; overflow: hidden; background-color: var(--bg-dark-surface); }
.community-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--bg-dark-surface) 0%, rgba(56,39,54,0.55) 22%, rgba(56,39,54,0.55) 70%, var(--bg-dark-surface) 100%),
    linear-gradient(90deg, rgba(43,29,42,0.78) 0%, rgba(43,29,42,0.5) 55%, rgba(43,29,42,0.7) 100%),
    url('/images/photos/pp-community.jpg') center 30% / cover no-repeat;
  filter: saturate(0.7) blur(1.5px);
  transform: scale(1.03);
}
.community-chapters .chapter-panel {
  margin: 0 auto; max-width: 1060px;
  background: rgba(43, 29, 42, 0.78);
}
body.a11y-mode .community-bg { display: none; }

/* Chapter panel: smaller, centered. Copy on top, the three chapters in one row beneath. */
.community-chapters .chapter-panel { max-width: 860px; text-align: center; }
.chapter-panel .teaser-grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); justify-items: center; }
.chapter-panel .teaser-copy { display: flex; flex-direction: column; align-items: center; }
.chapter-panel .teaser-copy .section-desc { max-width: 34rem; margin-left: auto; margin-right: auto; }
.chapter-panel .section-cta-left { margin-top: 0.5rem; display: flex; justify-content: center; }
.chapter-panel .teaser-pills { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; text-align: left; }
.chapter-panel .teaser-pill { flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.1rem 1.2rem; }
.chapter-panel .teaser-pill:hover { transform: translateY(-4px); }
@media (max-width: 767px) {
  .chapter-panel .teaser-pills { grid-template-columns: 1fr; }
  .chapter-panel .teaser-pill { flex-direction: row; align-items: center; }
}

/* =====================================================================
   GLASS PAGE (home): frosted panels over drifting light, with subtle parallax.
   Backdrop blur alone is invisible over a flat color, so every glass surface also carries its own
   diagonal sheen and a bright top edge, and each section holds soft colored orbs behind it to
   refract. Motion uses the independent `translate` / `scale` properties, so it never fights the
   reveal transforms. Everything below is switched off for reduced motion and the accessible mode.
   ===================================================================== */
.glass-page .section { position: relative; isolation: isolate; overflow: clip; }

/* drifting light behind the glass */
.glass-page .orb {
  position: absolute; z-index: -1; pointer-events: none;
  width: clamp(240px, 34vw, 520px); aspect-ratio: 1; border-radius: 50%;
  filter: blur(70px); opacity: 0.5; will-change: translate;
}
.glass-page .orb-gold  { background: radial-gradient(circle, rgba(201,166,89,0.60), transparent 68%); }
.glass-page .orb-mauve { background: radial-gradient(circle, rgba(199,162,183,0.55), transparent 68%); }
.glass-page .orb-plum  { background: radial-gradient(circle, rgba(118,84,113,0.70), transparent 68%); }
.glass-page .section-paper .orb { opacity: 0.32; }

/* the glass surface */
.glass-page .about-quote-card,
.glass-page .about-stats > div,
.glass-page .teaser-event,
.glass-page .spotlight-body,
.glass-page .teaser-pill,
.glass-page .teaser-center,
.glass-page .chapter-panel {
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 100%),
    rgba(56, 39, 54, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22), 0 18px 48px rgba(0,0,0,0.32);
}
.glass-page .about-stats { border-top: 0; padding-top: 0; }
.glass-page .about-stats > div { padding: 1.1rem 1.25rem; }
.glass-page .spotlight-body { padding: clamp(1.5rem, 3vw, 2.4rem); }
.glass-page .teaser-center { padding: clamp(2rem, 4vw, 3.2rem); max-width: 820px; margin-left: auto; margin-right: auto; }
.glass-page .teaser-event::before, .glass-page .teaser-pill::before { display: none; }
.glass-page .teaser-pill { transition: transform var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast); }
.glass-page .teaser-pill:hover { border-color: rgba(201,166,89,0.65); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 22px 54px rgba(0,0,0,0.4); }

/* portrait + spotlight photo: glass edge, rounded, image drifts inside the frame */
.glass-page .about-image-wrapper, .glass-page .spotlight-figure {
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 24px 60px rgba(0,0,0,0.38);
}
.glass-page .about-image-wrapper img, .glass-page .spotlight-figure img { scale: 1.12; will-change: translate; }

/* cream section: frosted-light shelf */
.glass-page .bookshelf {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.7) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.9); border-bottom: 10px solid var(--deep-plum);
  box-shadow: inset 0 1px 0 #fff, 0 22px 50px rgba(94,65,90,0.18);
  border-radius: 14px;
}

/* ticker: a frosted band */
.glass-page .authors-marquee { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

/* ghost buttons turn to glass */
.glass-page .btn-ghost {
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}

/* community backdrop gets room to travel */
.glass-page .community-bg { inset: -7% 0; will-change: translate; }

/* hero photo panel lags the page slightly */
.glass-page .bc-hero-photos { will-change: translate; }

/* focus-pull reveal: content sharpens as it arrives */
.glass-page .rv { filter: blur(8px); transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease; }
.glass-page .rv.visible { filter: none; }

@media (max-width: 767px) {
  .glass-page .orb { filter: blur(50px); }
  .glass-page .about-stats > div { padding: 0.9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-page .rv { filter: none !important; }
  .glass-page .orb, .glass-page .about-image-wrapper img, .glass-page .spotlight-figure img,
  .glass-page .community-bg, .glass-page .bc-hero-photos { translate: none !important; }
}
/* accessible mode: no blur, no orbs, no drift, flat surfaces */
body.a11y-mode .glass-page .orb { display: none; }
body.a11y-mode .glass-page .rv { filter: none !important; }
body.a11y-mode .glass-page .about-image-wrapper img, body.a11y-mode .glass-page .spotlight-figure img { scale: 1; translate: none !important; }
body.a11y-mode .glass-page .community-bg, body.a11y-mode .glass-page .bc-hero-photos { translate: none !important; }
body.a11y-mode .glass-page .about-quote-card, body.a11y-mode .glass-page .about-stats > div,
body.a11y-mode .glass-page .teaser-event, body.a11y-mode .glass-page .spotlight-body,
body.a11y-mode .glass-page .teaser-pill, body.a11y-mode .glass-page .teaser-center,
body.a11y-mode .glass-page .chapter-panel, body.a11y-mode .glass-page .bookshelf,
body.a11y-mode .glass-page .btn-ghost, body.a11y-mode .glass-page .authors-marquee {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background-image: none;
}
body.a11y-mode .glass-page .about-stats > div, body.a11y-mode .glass-page .spotlight-body,
body.a11y-mode .glass-page .teaser-center, body.a11y-mode .glass-page .bookshelf {
  background-color: #fff; border: 2px solid #111; color: #111;
}

/* ---------- Glass across the whole site ---------- */
.glass-page .value-card,
.glass-page .chapter-card,
.glass-page .how-step,
.glass-page .contact-card,
.glass-page .author-subcard,
.glass-page .author-card-featured {
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 100%),
    rgba(56, 39, 54, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.22), 0 18px 48px rgba(0,0,0,0.32);
}
.glass-page .value-card::before, .glass-page .chapter-card::before, .glass-page .contact-card::before,
.glass-page .author-subcard::before { display: none; }
.glass-page .value-card:hover, .glass-page .chapter-card:hover, .glass-page .contact-card:hover,
.glass-page .author-subcard:hover {
  border-color: rgba(201,166,89,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 22px 54px rgba(0,0,0,0.4);
}
/* the same glass, tuned for cream sections (dark copy stays dark) */
.glass-page .section-paper .spotlight-body {
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.7), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.7) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 22px 50px rgba(94,65,90,0.16);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
/* photo frames: rounded with a glass edge */
.glass-page .pillar-card, .glass-page .dinner-tile, .glass-page .dinner-lead, .glass-page .community-figure, .glass-page .gallery-item {
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 20px 48px rgba(0,0,0,0.3);
}
.glass-page .dinner-lead img, .glass-page .community-figure img { border-radius: 14px; }
.glass-page .dinner-lead img { scale: 1.1; will-change: translate; }
/* filter chips as glass */
.glass-page .filter-chip { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-image: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1)); }
.glass-page .filter-chip.active { background-image: none; }
/* inquiry modal (shared, outside the page wrapper): frosted glass over a blurred page */
.modal-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal-box {
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.07)), rgba(43,29,42,0.82);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 30px 80px rgba(0,0,0,0.5);
  border-radius: 14px;
}
body.a11y-mode .glass-page .value-card, body.a11y-mode .glass-page .chapter-card, body.a11y-mode .glass-page .how-step,
body.a11y-mode .glass-page .contact-card, body.a11y-mode .glass-page .author-subcard, body.a11y-mode .glass-page .author-card-featured,
body.a11y-mode .glass-page .section-paper .spotlight-body, body.a11y-mode .glass-page .filter-chip,
body.a11y-mode .modal-box, body.a11y-mode .modal-backdrop {
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; background-image: none;
}
body.a11y-mode .glass-page .dinner-lead img { scale: 1; translate: none !important; }
@media (prefers-reduced-motion: reduce) { .glass-page .dinner-lead img { translate: none !important; } }

/* Hide the system pointer wherever the custom cursor is running, so the two never stack.
   Only applied once the script has created the custom cursor, and never in the accessible mode. */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor body:not(.a11y-mode),
  html.has-custom-cursor body:not(.a11y-mode) * { cursor: none !important; }
  html.has-custom-cursor body:not(.a11y-mode) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  html.has-custom-cursor body:not(.a11y-mode) textarea { cursor: text !important; }
}

/* How it works: each step is a glass card with its numeral sitting on the connecting line, straddling the card's top edge. */
.glass-page .how-steps { padding-top: 3rem; margin-top: 3rem; gap: 1.5rem; }
.glass-page .how-steps::before { top: 3rem; }
.glass-page .how-steps-travel-dot { top: calc(3rem - 3px); }
.glass-page .how-step { padding: 2.4rem 1.4rem 1.6rem; text-align: center; }
.glass-page .how-step span { display: flex; margin: -3.7rem auto 1rem; }
.glass-page .how-step h3, .glass-page .how-step h4 { margin: 0 0 0.5rem; }
.glass-page .how-step p { margin: 0; }
@media (max-width: 767px) { .glass-page .how-steps { gap: 3.2rem 1rem; } }

/* Chapters: steps and directory share one section; a quiet rule separates them */
.chapter-directory { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--border-dark); }

/* Join a chapter: ONE glass panel. A header, a four-step line, then the chapters as quiet rows (no inner cards). */
.glass-page .join-panel {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.07) 100%),
    rgba(56, 39, 54, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 24px 60px rgba(0,0,0,0.38);
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
.join-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; flex-wrap: wrap; }
.join-head .section-title { margin-bottom: 0; }
.join-head .eyebrow { margin-bottom: 0.9rem; }

/* four steps on one line: numerals are nodes on a hairline, text sits plainly beneath */
.join-steps {
  list-style: none; margin: clamp(2.25rem, 4vw, 3.25rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; text-align: center;
}
.join-steps::before {
  content: ''; position: absolute; top: 1.3rem; left: 12.5%; right: 12.5%; height: 1px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
}
.join-steps li { position: relative; padding: 0 0.5rem; }
.join-steps span {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; margin: 0 auto 1rem; border-radius: 50%;
  border: 1px solid var(--gold); background: var(--bg-dark);
  font-family: var(--font-serif); font-size: 1.4rem; line-height: 1; color: var(--gold-light);
}
.join-steps h3 { font-family: var(--font-brand); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; color: var(--text-light); margin: 0 0 0.4rem; }
.join-steps p { font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); margin: 0 auto; max-width: 15rem; }

/* chapters as rows */
.join-list { margin-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid rgba(255,255,255,0.14); }
.join-row {
  display: grid; grid-template-columns: 11rem 1.3fr auto 1.4fr; align-items: center; gap: 1rem 2rem;
  padding: 1.35rem 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background var(--tr-fast);
}
.join-row:hover { background: linear-gradient(90deg, rgba(201,166,89,0.07), transparent 70%); }
.join-row .chapter-state { margin: 0; }
.join-row .chapter-name { margin: 0; font-size: 1.45rem; }
.join-row .chapter-city { margin-top: 0.15rem; }
.join-row .join-status .status-pill { margin: 0; }
.join-row .join-note { display: flex; align-items: center; justify-content: flex-end; gap: 1rem 1.25rem; flex-wrap: wrap; text-align: right; }
.join-row .chapter-note { margin: 0; }

@media (max-width: 991px) {
  .join-row { grid-template-columns: 1fr auto; }
  .join-row .join-where { grid-column: 1 / -1; }
  .join-row .join-note { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
}
@media (max-width: 767px) {
  .join-head .btn { width: 100%; }
  .join-steps { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .join-steps::before { display: none; }
}
body.a11y-mode .glass-page .join-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; box-shadow: none; background-color: #fff; border: 2px solid #111; }
body.a11y-mode .join-steps span { background: #fff; border: 2px solid #111; color: #111; }
body.a11y-mode .join-steps h3 { font-size: 0.95rem; color: #111; }
body.a11y-mode .join-steps p, body.a11y-mode .join-row .chapter-note { color: #111; font-weight: 600; }

/* Chapters: three boxes under the steps, inside the one panel */
.join-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255,255,255,0.14); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.join-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem;
  padding: 1.6rem 1.5rem 1.5rem; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)), rgba(43,29,42,0.35);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.join-card:hover { transform: translateY(-4px); border-color: rgba(201,166,89,0.6); }
.join-card .chapter-state { margin: 0 0 0.5rem; }
.join-card .chapter-name { margin: 0; font-size: 1.5rem; }
.join-card .chapter-city { margin: 0.2rem 0 0.9rem; }
.join-card .status-pill { margin: 0 0 0.9rem; }
.join-card .chapter-note { margin: 0; }
.join-card .btn { margin-top: 1.1rem; }
@media (max-width: 991px) { .join-cards { grid-template-columns: 1fr; } }
body.a11y-mode .join-card { background: #fff; border: 2px solid #111; box-shadow: none; }
body.a11y-mode .join-card .chapter-note { color: #111; font-weight: 600; }

.join-foot { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Presents cards: a photo behind each, under a plum veil that is heaviest where the copy sits.
   Cocktails & Confessions shows the top of its poster photo (the poster, not the faces);
   The Author's Table is the empty roses-and-candles table, no faces at all. */
.glass-page .presents-grid .author-subcard { min-height: 24rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.glass-page .presents-grid .author-subcard:nth-child(1) {
  background:
    linear-gradient(90deg, rgba(43,29,42,0.94) 0%, rgba(43,29,42,0.74) 52%, rgba(43,29,42,0.42) 100%),
    url('/images/photos/pp-presents-cc.jpg') 64% 45% / cover no-repeat;
}
.glass-page .presents-grid .author-subcard:nth-child(2) {
  background:
    linear-gradient(90deg, rgba(43,29,42,0.94) 0%, rgba(43,29,42,0.74) 52%, rgba(43,29,42,0.42) 100%),
    url('/images/photos/pp-pillar-gather.jpg') 50% 62% / cover no-repeat;
}
body.a11y-mode .glass-page .presents-grid .author-subcard { background-image: none !important; background-color: #fff; border: 2px solid #111; }

/* Values: one word each does not need a box. A typographic index instead: large serif words on hairlines,
   a gold rule that draws across on hover, the word easing right and turning gold italic. */
.values-lines { list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); padding: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.value-line {
  position: relative; display: flex; align-items: baseline; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.2vw, 1.6rem) 0.25rem; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.value-line::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light) 60%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
}
.value-line-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--gold); min-width: 2.2rem; }
.value-line h3 {
  font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.05;
  color: var(--text-light); margin: 0; white-space: nowrap;
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), color 0.4s ease, font-style 0.4s;
}
.value-line:hover::after, .value-line:focus-within::after { transform: scaleX(1); }
.value-line:hover h3 { transform: translateX(clamp(0.5rem, 1.6vw, 1.4rem)); color: var(--gold-light); font-style: italic; }
@media (hover: none) { .value-line::after { transform: scaleX(1); opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .value-line::after, .value-line h3 { transition: none; } .value-line:hover h3 { transform: none; } }
body.a11y-mode .value-line h3 { color: #111; font-weight: 500; }
body.a11y-mode .value-line:hover h3 { color: #111; font-style: normal; transform: none; }
body.a11y-mode .value-line-num { color: #111; font-size: 0.95rem; }
body.a11y-mode .values-lines, body.a11y-mode .value-line { border-color: #111; }
@media (max-width: 767px) { .value-line h3 { white-space: normal; } }

/* Five ways we gather: the signature horizontal accordion. Photo panels side by side; one opens
   (hover, focus, or tap) to reveal its line. Faces are anchored by their eye line, so they hold at any width. */
.pillars-acc { display: flex; gap: 0.9rem; height: clamp(30rem, 44vw, 38rem); }
.pillar-panel {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 14px; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 20px 48px rgba(0,0,0,0.32);
  transition: flex-grow 0.85s cubic-bezier(.4, 0, .2, 1);
}
.pillar-panel.is-active { flex-grow: 2.7; }
.pillar-photo {
  position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
  filter: brightness(0.62) saturate(0.85); transform: scale(1);
  transition: filter 0.7s ease, transform 1.1s cubic-bezier(.4, 0, .2, 1);
}
.pillar-panel.is-active .pillar-photo, .pillar-panel:hover .pillar-photo { filter: brightness(1) saturate(1.05); transform: scale(1.04); }
.pillar-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,29,42,0.92) 0%, rgba(43,29,42,0.35) 38%, rgba(43,29,42,0.08) 70%); }
.pillar-content {
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; padding: 1.1rem 1.25rem 1.2rem;
  border-radius: 10px; color: var(--text-light);
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)), rgba(43,29,42,0.5);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.26);
}
.pillar-n { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.35rem; }
.pillar-content h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.1; margin: 0; color: var(--text-light); }
.pillar-content p {
  margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted);
  transition: max-height 0.7s cubic-bezier(.4, 0, .2, 1), opacity 0.5s ease, margin 0.5s ease;
}
.pillar-panel.is-active .pillar-content p { max-height: 8rem; opacity: 1; margin-top: 0.65rem; transition-delay: 0s, 0.3s, 0s; }
.pillar-panel:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
@media (max-width: 767px) {
  .pillars-acc { flex-direction: column; height: auto; gap: 0.75rem; }
  .pillar-panel { flex: none; height: 6rem; transition: height 0.8s cubic-bezier(.4, 0, .2, 1); }
  .pillar-panel.is-active { height: 23rem; }
}
@media (prefers-reduced-motion: reduce) { .pillar-panel, .pillar-photo, .pillar-content p { transition: none; } }
body.a11y-mode .pillars-acc { flex-direction: column; height: auto; }
body.a11y-mode .pillar-panel { flex: none; height: auto; min-height: 14rem; }
body.a11y-mode .pillar-photo { filter: brightness(0.5); }
body.a11y-mode .pillar-content { background: #111; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: #fff; }
body.a11y-mode .pillar-content h3, body.a11y-mode .pillar-content p { color: #fff; }
body.a11y-mode .pillar-content p { max-height: none; opacity: 1; margin-top: 0.65rem; font-size: 1rem; }
body.a11y-mode .pillar-n { color: #ffe39a; font-size: 0.95rem; }

/* Navigation: the page you are on is the book pulled forward from the shelf.
   A leather-toned spine, gold foil bands top and bottom, lifted with a shadow beneath it.
   Padding is cancelled by negative margin, so choosing a page never moves its neighbours. */
.nav-link { position: relative; display: inline-block; transition: color var(--tr-fast), transform 0.35s cubic-bezier(.4, 0, .2, 1); }
.nav-link:hover { transform: translateY(-2px); }
.nav-link[aria-current="page"] {
  padding: 0.95rem 1.2rem; margin: -0.95rem -1.2rem;
  color: var(--gold-light); box-shadow: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(255,255,255,0.10) 9%, rgba(255,255,255,0.02) 30%, rgba(0,0,0,0.30) 100%),
    linear-gradient(180deg, #74506e 0%, #4d3249 100%);
  border: 1px solid rgba(201, 166, 89, 0.6);
  border-radius: 3px 3px 2px 2px;
  transform: translateY(-4px);
  box-shadow: 0 12px 18px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.35);
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}
.nav-link[aria-current="page"]::before, .nav-link[aria-current="page"]::after {
  content: ''; position: absolute; left: 0.45rem; right: 0.45rem; height: 3px;
  border-top: 1px solid var(--gold); border-bottom: 1px solid rgba(201,166,89,0.7);
  opacity: 0.85;
}
.nav-link[aria-current="page"]::before { top: 0.4rem; }
.nav-link[aria-current="page"]::after { bottom: 0.4rem; }
.mobile-drawer-link[aria-current="page"] { border-left: 3px solid var(--gold); padding-left: 0.9rem; }
body.a11y-mode .nav-link, body.a11y-mode .nav-link:hover { transform: none; }
body.a11y-mode .nav-link[aria-current="page"] {
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0 0 4px; color: #111; text-shadow: none; box-shadow: 0 3px 0 #111;
}
body.a11y-mode .nav-link[aria-current="page"]::before, body.a11y-mode .nav-link[aria-current="page"]::after { display: none; }
@media (prefers-reduced-motion: reduce) { .nav-link, .nav-link:hover, .nav-link[aria-current="page"] { transition: none; } }

/* Upcoming-event card: a sunset over the sunflower field at Magnolia Meadow Farms behind the date and name. */
.glass-page .teaser-event {
  background:
    linear-gradient(90deg, rgba(43,29,42,0.92) 0%, rgba(43,29,42,0.72) 50%, rgba(43,29,42,0.38) 100%),
    url('/images/photos/pp-event-magnolia.jpg') 50% 58% / cover no-repeat;
  min-height: 9.5rem;
}
body.a11y-mode .glass-page .teaser-event { background-image: none !important; }

/* Values, quieter: five words with nothing to explain, so they sit as one hushed line.
   Small serif italics, muted, separated by tiny gold diamonds; gold on hover. No numbers, no rules, no boxes. */
.values-lines {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.6rem 0;
  border-top: 0; margin: clamp(1.5rem, 3vw, 2.25rem) auto clamp(2.25rem, 4vw, 3.25rem); padding: 0; max-width: 62rem;
}
.value-line { display: inline-flex; align-items: baseline; padding: 0; border: 0; }
.value-line::after { display: none; }
.value-line-num { display: none; }
.value-line + .value-line::before {
  content: ''; width: 5px; height: 5px; margin: 0 clamp(1rem, 2.4vw, 2rem); align-self: center;
  background: var(--gold); transform: rotate(45deg); opacity: 0.55;
}
.value-line h3 {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 2.1vw, 1.7rem); letter-spacing: 0.02em; line-height: 1.2;
  color: var(--text-muted); transition: color 0.4s ease;
}
.value-line:hover h3 { transform: none; font-style: italic; color: var(--gold-light); }
body.a11y-mode .value-line h3 { font-size: 1.15rem; font-weight: 500; font-style: normal; color: #111; }
body.a11y-mode .values-lines { border: 0; }
@media (max-width: 767px) { .values-lines { flex-direction: column; align-items: center; gap: 0.5rem; } .value-line + .value-line::before { display: none; } }

/* Values: all five words always share one line on tablet and desktop (no orphans). Type scales with the viewport so it fits. */
@media (min-width: 768px) {
  .values-lines { flex-wrap: nowrap; justify-content: center; max-width: none; }
  .value-line { flex: 0 0 auto; }
  .value-line h3 { font-size: clamp(1.05rem, 1.9vw, 1.65rem); white-space: nowrap; }
  .value-line + .value-line::before { margin: 0 clamp(0.7rem, 1.9vw, 1.8rem); }
}

/* Event card: note line and two actions */
.teaser-event-note { margin: 0.6rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted); max-width: 34rem; }
.teaser-event-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (max-width: 767px) { .teaser-event-actions { width: 100%; flex-direction: column; align-items: stretch; } .teaser-event-actions .btn { width: 100%; } }

/* Privacy page */
.legal-copy { max-width: 46rem; margin: 0 auto; }
.legal-updated { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dark-muted); margin-bottom: 2rem; }
.legal-copy h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 400; color: var(--text-dark); margin: 2.25rem 0 0.6rem; }
.legal-copy p { font-size: 1rem; line-height: 1.75; color: var(--text-dark-muted); }
.legal-copy a { color: var(--deep-plum); text-decoration: underline; text-underline-offset: 3px; }
body.a11y-mode .legal-copy p, body.a11y-mode .legal-copy h2, body.a11y-mode .legal-updated { color: #111; }
body.a11y-mode .legal-copy a { color: #0057b8; }

/* Featured upcoming event: the flyer, whole and uncropped, beside the details */
.event-feature { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .event-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.event-flyer { display: block; justify-self: center; width: 100%; max-width: 27rem; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 28px 64px rgba(0,0,0,0.42); transition: transform 0.5s cubic-bezier(.4,0,.2,1), box-shadow 0.5s ease; }
.event-flyer:hover, .event-flyer:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(201,166,89,0.6), 0 34px 72px rgba(0,0,0,0.5); }
.event-flyer img { display: block; width: 100%; height: auto; }
.event-feature-body { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem); border-radius: 14px;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 100%), rgba(56,39,54,0.42);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 18px 48px rgba(0,0,0,0.32); }
.event-feature-date { display: inline-flex; flex-direction: column; align-items: center; padding: 0.6rem 1.1rem; margin-bottom: 1.1rem; border: 1px solid rgba(201,166,89,0.5); border-radius: 8px; }
.event-feature-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin: 0.3rem 0 0.2rem; color: var(--text-light); }
.event-feature-sub { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--gold-light); margin: 0 0 1.1rem; }
.event-feature-copy { font-size: 1rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 1.4rem; }
.event-feature-facts { list-style: none; margin: 0 0 1.1rem; padding: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.event-feature-facts li { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; color: var(--text-light); }
.event-feature-facts span { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.15rem; }
.event-feature-note { font-family: var(--font-brand); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 1.4rem; }
.event-feature-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 767px) { .event-feature-actions .btn { width: 100%; } }
/* plain variant of the event row (no photo behind it) */
.glass-page .teaser-event.teaser-event-plain { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,0.15), transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 100%), rgba(56,39,54,0.42); min-height: 0; margin-top: 1.25rem; }
body.a11y-mode .event-feature-body { background: #fff; border: 2px solid #111; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.a11y-mode .event-feature-title, body.a11y-mode .event-feature-copy, body.a11y-mode .event-feature-facts li, body.a11y-mode .event-feature-sub, body.a11y-mode .event-feature-note { color: #111; }
body.a11y-mode .event-feature-facts span { color: #111; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .event-flyer { transition: none; } .event-flyer:hover { transform: none; } }