/* ========================================
   DMI Global Stylesheet — Mobile First
   ======================================== */

/* ---- CSS Custom Properties ---- */
:root {
  /* Colors */
  --color-dark: #0a0e17;
  --color-dark-rgb: 10, 14, 23;
  --color-navy: #1a1a2e;
  --color-navy-rgb: 26, 26, 46;
  --color-gold: #d4a95a;
  --color-gold-light: #e0b96e;
  --color-gold-dark: #b08d57;
  --color-cream: #f0e6d3;
  --color-cream-rgb: 240, 230, 211;
  --color-white: #faf8f5;
  --color-body-text: #3d3a36;
  --color-body-muted: #6b6560;
  --color-border: rgba(212, 169, 90, 0.2);

  /* Typography */
  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-heading: 'Georgia', 'Times New Roman', serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --content-width: 1200px;
  --prose-width: 720px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Header */
  --header-height: 70px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

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

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

a {
  color: var(--color-gold-dark);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--color-gold);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ---- Skip link (a11y) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold);
  color: var(--color-dark);
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  z-index: 9999;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* ========================================
   HEADER / NAVIGATION — Mobile First
   ======================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(var(--color-dark-rgb), 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-sm);
  height: var(--header-height);
  width: 100%;
}

/* Logo */
.logo img {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* Desktop nav — hidden on mobile */
.main-nav {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-link {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s, color 0.3s;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--color-cream);
  border-color: var(--color-gold);
}

/* Dropdown */
.nav-item {
  position: relative;
}

.dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: rgba(var(--color-dark-rgb), 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Invisible hover bridge so mouse travel from nav link to dropdown
   doesn't pass through a :hover-dead zone */
.dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.6rem;
  height: 0.6rem;
}

.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  display: block;
}

.dropdown-link {
  display: block;
  padding: 0.6rem 1.2rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.dropdown-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.dropdown-link.highlight-link {
  color: var(--color-gold);
  font-weight: 700;
  border-left: 3px solid var(--color-gold);
  background: rgba(212,169,90,0.08);
}

.dropdown-link.highlight-link:hover {
  color: #fff;
  background: rgba(212,169,90,0.18);
}

/* Nav CTA buttons */
.nav-cta {
  display: none;
}

/* Partner links row (desktop) */
.partner-icons {
  display: none;
}

.partner-icons a,
a.partner-icons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.partner-icons a:hover,
a.partner-icons:hover {
  color: var(--color-cream);
}

.partner-icons img {
  height: 34px;
  width: auto;
  border-radius: 6px;
  background: #fff;
  padding: 3px 4px;
}

.partner-label {
  text-align: right;
  line-height: 1.2;
  font-size: 0.78rem;
  white-space: nowrap;
}

.partner-label-short {
  display: none;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
}

/* ---- Hamburger ---- */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* ---- Mobile nav overlay ---- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(var(--color-dark-rgb), 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: var(--header-height);
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-inner {
  padding: var(--space-md) var(--space-sm) var(--space-xl);
  max-width: 400px;
  margin: 0 auto;
}

.mobile-section {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-heading);
  min-height: 48px;
}

.mobile-toggle .chevron {
  font-size: 0.65em;
  transition: transform 0.3s;
}

.mobile-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.mobile-sub {
  display: none;
  padding-bottom: var(--space-sm);
}

.mobile-sub.open {
  display: block;
}

.mobile-sub a {
  display: block;
  padding: 0.6rem 0 0.6rem 1rem;
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  min-height: 44px;
  line-height: 44px;
  transition: color 0.2s;
}

.mobile-sub a:hover {
  color: var(--color-gold);
}

.mobile-sub .highlight-link {
  color: var(--color-gold);
  font-weight: 700;
}

.mobile-cta {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-lg) 0 var(--space-md);
  justify-content: center;
}

.mobile-partners {
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.mobile-partners a {
  color: #fff;
  font-size: 0.85rem;
}

.mobile-partners a:hover {
  color: var(--color-gold);
}

/* ---- Mobile header layout: hamburger left, logo near it, WSOL right ---- */
@media (max-width: 1023.98px) {
  .header-inner {
    justify-content: flex-start;
    padding-left: 4rem;
    position: relative;
  }
  .hamburger {
    position: absolute;
    left: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
  }
  .partner-icons.wsol-link {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
  }
  .partner-label {
    font-size: 0.65rem;
  }
}

/* Smallest phones: collapse the WSOL long label to the abbreviation */
@media (max-width: 359.98px) {
  .partner-label {
    display: none;
  }
  .partner-label-short {
    display: inline;
  }
}

/* ---- Desktop nav breakpoint ---- */
@media (min-width: 1024px) {
  .header-inner {
    padding: 0 var(--space-lg);
  }

  .logo img {
    height: 70px;
  }

  .main-nav {
    display: block;
    flex: 1;
    margin: 0 var(--space-md);
  }

  .nav-list {
    gap: var(--space-md);
  }

  .nav-link {
    font-size: 0.95rem;
  }

  .partner-icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    max-width: 200px;
    margin-left: auto;
  }

  .partner-icons.wsol-link {
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
  }

  .partner-icons.wsol-link:hover {
    background: rgba(255,255,255,0.06);
  }

  .partner-icons.wsol-link img {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
  }

  .hamburger {
    display: none;
  }

  :root {
    --header-height: 90px;
  }
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

.btn:hover {
  transform: translateY(-1px);
}

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

.btn-sm {
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  min-height: 36px;
}

.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.15rem;
}

.btn-primary {
  background: var(--color-gold);
  color: var(--color-dark);
}

.btn-primary:hover {
  background: var(--color-gold-light);
  color: var(--color-dark);
  box-shadow: 0 4px 16px rgba(212,169,90,0.3);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
}

.btn-outline:hover {
  background: var(--color-gold);
  color: var(--color-dark);
}

.btn-outline-light {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--color-dark);
}

.btn-white:hover {
  background: var(--color-cream);
  color: var(--color-dark);
  box-shadow: var(--shadow-md);
}

/* ========================================
   LAYOUT UTILITIES
   ======================================== */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.container-prose {
  width: 100%;
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 768px) {
  .container,
  .container-prose {
    padding: 0 var(--space-lg);
  }
}

/* Page content starts below fixed header */
.page-content {
  padding-top: var(--header-height);
}

/* ========================================
   HERO SECTIONS
   ======================================== */

/* Dark hero (homepage) */
.hero-dark {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  overflow: hidden;
  display: flex;
  min-height: 70vh;
}

.hero-dark .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-dark .hero-overlay {
  position: absolute;
  inset: 0;
  background: none;
}

/* Local scrims behind each hero text block. The harvest_bg image stays
   bright everywhere except a soft halo around each text element, which
   gives the type something darker to sit on without dimming the whole
   image. Disabled on mobile because the text flows naturally there
   instead of being absolute-positioned, so percentage-based gradients
   wouldn't line up with the actual text positions. */
.hero-dark .hero-text-scrim {
  display: none;
}

@media (min-width: 768px) {
  .hero-dark .hero-text-scrim {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
  }
}

/* Mobile default: natural flex-column flow with space-between */
.hero-dark .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: calc(var(--header-height) + var(--space-md)) var(--space-sm) var(--space-lg);
}

.hero-dark .hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hero-dark .hero-tagline {
  margin: var(--space-xl) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5em;
  row-gap: 0.1em;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 7vw, 2.8rem);
  font-style: italic;
  color: #fff;
  letter-spacing: 0.03em;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,1),
     1.5px -1.5px 0 rgba(0,0,0,1),
    -1.5px  1.5px 0 rgba(0,0,0,1),
     1.5px  1.5px 0 rgba(0,0,0,1),
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0  -1px  0 rgba(0,0,0,1),
     0   1px  0 rgba(0,0,0,1),
     0 3px 8px rgba(0,0,0,1),
     0 6px 20px rgba(0,0,0,1),
     0 0 40px rgba(0,0,0,0.85),
     0 0 70px rgba(0,0,0,0.65);
}

/* Each phrase wraps as one whole unit; flex-wrap on the parent stacks them
   when both don't fit side-by-side. */
.hero-dark .hero-tagline-line {
  white-space: nowrap;
}

.hero-dark h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(3.2rem, 14vw, 5.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-shadow:
    -2px -2px 0 rgba(0,0,0,1),
     2px -2px 0 rgba(0,0,0,1),
    -2px  2px 0 rgba(0,0,0,1),
     2px  2px 0 rgba(0,0,0,1),
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0  -1px  0 rgba(0,0,0,1),
     0   1px  0 rgba(0,0,0,1),
     0 3px 8px rgba(0,0,0,1),
     0 6px 24px rgba(0,0,0,1),
     0 0 50px rgba(0,0,0,0.9),
     0 0 90px rgba(0,0,0,0.7);
}

.hero-dark .hero-subtitle {
  font-size: clamp(0.95rem, 3.5vw, 1.35rem);
  color: #fff;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.55;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,1),
     1.5px -1.5px 0 rgba(0,0,0,1),
    -1.5px  1.5px 0 rgba(0,0,0,1),
     1.5px  1.5px 0 rgba(0,0,0,1),
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0  -1px  0 rgba(0,0,0,1),
     0   1px  0 rgba(0,0,0,1),
     0 3px 8px rgba(0,0,0,1),
     0 6px 20px rgba(0,0,0,1),
     0 0 40px rgba(0,0,0,0.85),
     0 0 70px rgba(0,0,0,0.65);
}

.hero-dark .hero-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Shrink hero buttons on mobile so they fit in one row and don't
   overlap the tagline */
.hero-dark .hero-actions .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  min-height: 40px;
}

/* Frosted dark fill for the outlined hero buttons (Learn More / Give / Send).
   The .btn-primary "Go" button is intentionally excluded. */
.hero-dark .hero-actions .btn-outline-light {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-dark .hero-actions .btn-outline-light:hover {
  background: rgba(0, 0, 0, 0.55);
}

@media (min-width: 768px) {
  .hero-dark {
    min-height: 80vh;
  }

  /* Desktop: absolute positioning for precise percentage placement */
  .hero-dark .hero-content {
    display: block;
    padding: 0;
  }

  .hero-dark .hero-top {
    position: absolute;
    top: calc(var(--header-height) + 10%);
    left: 0;
    right: 0;
    padding: 0 var(--space-lg);
    gap: var(--space-md);
  }

  .hero-dark .hero-tagline {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    padding: 0 var(--space-lg);
    transform: translateY(-50%);
  }

  .hero-dark h1 {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    padding: 0 var(--space-lg);
  }

  /* Restore full-size buttons on desktop */
  .hero-dark .hero-actions .btn {
    padding: 1rem 2.5rem;
    font-size: 1.15rem;
    min-height: 44px;
  }
}

/* Sub-page hero (lighter, shorter) */
.hero-sub {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-xl);
  text-align: center;
}

.hero-sub .hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/harvest_bg.webp') center/cover no-repeat;
}

.hero-sub .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--color-dark-rgb), 0.15) 0%,
    rgba(var(--color-dark-rgb), 0.45) 100%
  );
}

.hero-sub h1 {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,1),
     1.5px -1.5px 0 rgba(0,0,0,1),
    -1.5px  1.5px 0 rgba(0,0,0,1),
     1.5px  1.5px 0 rgba(0,0,0,1),
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0  -1px  0 rgba(0,0,0,1),
     0   1px  0 rgba(0,0,0,1),
     0 3px 8px rgba(0,0,0,1),
     0 6px 20px rgba(0,0,0,1),
     0 0 40px rgba(0,0,0,0.85),
     0 0 70px rgba(0,0,0,0.65);
}

.hero-sub .hero-lead {
  position: relative;
  z-index: 2;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: #fff;
  max-width: 600px;
  margin: var(--space-sm) auto 0;
  padding: 0 var(--space-sm);
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,1),
     1.5px -1.5px 0 rgba(0,0,0,1),
    -1.5px  1.5px 0 rgba(0,0,0,1),
     1.5px  1.5px 0 rgba(0,0,0,1),
    -1px  0   0 rgba(0,0,0,1),
     1px  0   0 rgba(0,0,0,1),
     0  -1px  0 rgba(0,0,0,1),
     0   1px  0 rgba(0,0,0,1),
     0 3px 8px rgba(0,0,0,1),
     0 6px 20px rgba(0,0,0,1),
     0 0 40px rgba(0,0,0,0.85),
     0 0 70px rgba(0,0,0,0.65);
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.section {
  padding: var(--space-xl) 0;
}

.section-alt {
  background: var(--color-cream);
}

.section-dark {
  background: var(--color-dark);
  color: #fff;
}

.section-dark h2,
.section-dark h3 {
  color: var(--color-gold);
}

.section-dark p {
  color: rgba(255,255,255,0.8);
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-2xl) 0;
  }
}

/* Modifier: pull a section closer to whatever sits above it (used by
   the Give/Send/Go CTA so it hugs the hero). Bottom padding stays at
   the .section default. */
.section-tight-top {
  padding-top: var(--space-lg);
}

@media (min-width: 768px) {
  .section-tight-top {
    padding-top: var(--space-xl);
  }
}

/* ---- Section headings ---- */
.section-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}

.section-heading .section-rule {
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  margin: var(--space-sm) auto 0;
  border-radius: 2px;
}

.section-heading p {
  color: var(--color-body-muted);
  font-size: 1.05rem;
  max-width: 550px;
  margin: var(--space-sm) auto 0;
}

/* ========================================
   CARDS
   ======================================== */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .card-grid-2,
  .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.3s, transform 0.2s;
}

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

.card-icon {
  width: 56px;
  height: 56px;
  background: rgba(212,169,90,0.1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  font-size: 1.6rem;
}

.card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-dark);
  margin-bottom: var(--space-xs);
}

.card p {
  color: var(--color-body-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ========================================
   CONTENT PANELS (sub-pages)
   ======================================== */
.content-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.04);
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .content-panel {
    padding: var(--space-xl);
  }
}

.content-panel h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--color-dark);
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.3;
}

.content-panel h2:first-child {
  margin-top: 0;
}

.content-panel h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--color-dark);
  margin: var(--space-md) 0 var(--space-xs);
}

.content-panel p {
  color: var(--color-body-text);
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: var(--space-sm);
}

.content-panel ul,
.content-panel ol {
  color: var(--color-body-text);
  line-height: 1.8;
  padding-left: 1.5rem;
  margin-bottom: var(--space-sm);
  list-style: revert;
}

.content-panel li {
  margin-bottom: 0.4rem;
}

.content-panel a:not(.btn) {
  color: var(--color-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.content-panel a:not(.btn):hover {
  color: var(--color-gold);
}

.content-panel img.section-img {
  display: block;
  max-width: 100%;
  margin: var(--space-md) auto;
  border-radius: var(--radius);
}

/* Strategy-of-missions page lists (.foundations-list, .steps-list) */
.content-panel .foundations-list,
.content-panel .steps-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}
.content-panel .foundations-list li {
  color: var(--color-body-text);
  font-size: 1rem;
  line-height: 1.8;
  padding: 0.8rem 0 0.8rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.content-panel .foundations-list li:last-child {
  border-bottom: none;
}
.content-panel .foundations-list li::before {
  content: '\2726';
  color: var(--color-gold);
  position: absolute;
  left: 0;
  font-size: 0.85rem;
}
.content-panel .foundations-list li .scripture {
  display: block;
  color: var(--color-body-muted);
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 0.2rem;
}
.content-panel .steps-list {
  counter-reset: step-counter;
}
.content-panel .steps-list li {
  color: var(--color-body-text);
  font-size: 1rem;
  line-height: 1.8;
  padding: 0.6rem 0 0.6rem 2.5rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  counter-increment: step-counter;
}
.content-panel .steps-list li:last-child {
  border-bottom: none;
}
.content-panel .steps-list li::before {
  content: counter(step-counter);
  color: #fff;
  background: var(--color-gold);
  font-weight: 700;
  font-size: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0.75rem;
}

/* Send page — appeal box and "What We Need" pill list */
.content-panel .appeal-box {
  border-left: 4px solid var(--color-gold);
  background: rgba(212,169,90,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  font-style: italic;
}
.content-panel .appeal-box p {
  margin-bottom: var(--space-sm);
}
.content-panel .appeal-box p:last-child {
  margin-bottom: 0;
}
.content-panel .needs-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: var(--space-md) 0;
}
.content-panel .needs-list li {
  padding: 0.5rem 1.2rem;
  background: rgba(212,169,90,0.1);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 0;
}

/* Strategy-of-missions fellowship image pair */
.fellowship-images {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0;
}
.fellowship-images img {
  max-width: 340px;
  width: 100%;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .content-panel .foundations-list li,
  .content-panel .steps-list li {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }
  .fellowship-images {
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .fellowship-images img {
    max-width: 100%;
  }
}

/* Highlight callout box */
.highlight-box {
  border-left: 4px solid var(--color-gold);
  background: rgba(212,169,90,0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}

.highlight-box p {
  font-weight: 600;
  margin-bottom: 0;
}

/* Content divider */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

/* Strategy-page emphasis: bold gold-hued clauses with a boxed sub-clause */
.strategy-emphasis {
  font-weight: 700;
  color: var(--color-gold-dark);
}
.strategy-callout {
  display: inline-block;
  border: 2px solid var(--color-dark);
  background: #fff;
  color: var(--color-dark);
  font-weight: 700;
  padding: 0.05em 0.4em;
  border-radius: 3px;
  margin: 0 0.1em;
}
.strategy-callout strong {
  font-weight: 900;
  text-decoration: underline;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Section with a side-floated image (Go page: Incarnational / Team) */
.side-float {
  display: flow-root;
  margin: var(--space-md) 0;
}
.side-float-img {
  display: block;
  width: clamp(140px, 34vw, 320px);
  height: auto;
  border-radius: var(--radius);
}
.side-float-right .side-float-img {
  float: right;
  margin: 0 0 var(--space-sm) var(--space-md);
}
.side-float-left .side-float-img {
  float: left;
  margin: 0 var(--space-md) var(--space-sm) 0;
}

/* Variant: on narrow screens, collapse the float and drop the image
   between the two siblings (used where the wrapper holds two quotes). */
@media (max-width: 640px) {
  .side-float-center-mobile {
    display: flex;
    flex-direction: column;
  }
  .side-float-center-mobile > .side-float-img {
    float: none;
    order: 2;
    align-self: center;
    width: clamp(200px, 70vw, 360px);
    margin: var(--space-md) auto;
  }
  .side-float-center-mobile > :nth-child(2) { order: 1; }
  .side-float-center-mobile > :nth-child(3) { order: 3; }
}

/* ========================================
   STATS ROW
   ======================================== */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  text-align: center;
  padding: var(--space-md) 0;
}

@media (min-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item .stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.1;
}

.stat-item .stat-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   QUOTE BLOCK
   ======================================== */
.quote-block {
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
  max-width: var(--prose-width);
  margin: 0 auto;
}

.quote-block blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}

.quote-block cite {
  font-size: 0.9rem;
  color: var(--color-body-muted);
  font-style: normal;
}

/* ========================================
   FAQ ACCORDION
   ======================================== */
.faq-list {
  max-width: var(--prose-width);
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-md) 0;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-dark);
  min-height: 48px;
  gap: var(--space-sm);
}

.faq-question .faq-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--color-gold);
  transition: transform 0.3s;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-item.open .faq-answer {
  max-height: 2000px;
}

.faq-answer-inner {
  padding-bottom: var(--space-md);
  color: var(--color-body-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ========================================
   FILE BROWSER / RESOURCE GRID
   ======================================== */
.file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

.file-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.3s, transform 0.2s;
}

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

.file-card-preview {
  aspect-ratio: 4/3;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.file-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-card-info {
  padding: var(--space-sm);
}

.file-card-info h3 {
  font-size: 0.9rem;
  color: var(--color-dark);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.file-card-info .file-meta {
  font-size: 0.8rem;
  color: var(--color-body-muted);
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,0.6);
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-sm) var(--space-lg);
}

.footer-brand {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.footer-logo {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  margin: 0 auto var(--space-xs);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.2rem;
}

.footer-ministry {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: center;
}

@media (min-width: 640px) {
  .footer-links {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

.footer-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.footer-col a {
  display: block;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: #fff;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

@media (max-width: 639px) {
  .footer-contact-link {
    justify-content: center;
  }
}

.footer-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}

.footer-contact-link:hover .footer-icon {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-lg);
  text-align: center;
}

.footer-accreditation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.footer-accreditation img {
  height: 36px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-accreditation img:hover {
  opacity: 1;
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}

@media (min-width: 768px) {
  .footer-inner {
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  }

  .footer-brand {
    text-align: left;
  }

  .footer-logo {
    margin: 0 0 var(--space-xs);
  }
}

/* ========================================
   STATEMENT OF FAITH PAGE
   ======================================== */

/* Hero button nav (on dark hero-sub background) */
.faith-nav {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.faith-hero-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-dark);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
  letter-spacing: 0.02em;
}

.faith-hero-btn:hover {
  background: #fff;
  transform: translateY(-2px);
}

.faith-hero-btn .arrow {
  margin-left: 0.4em;
  opacity: 0.6;
}

/* Doctrine card (inside .content-panel on a white background) */
.doctrine-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0;
  text-align: center;
}

.doctrine-card h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

.doctrine-body {
  max-width: 800px;
  margin: 0 auto;
}

.doctrine-body p {
  text-align: center;
  margin-bottom: var(--space-sm);
  line-height: 1.8;
}

.scripture-ref {
  color: var(--color-body-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

/* Practice links list (external statements) */
.practice-links {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.practice-links li {
  margin-bottom: 0.75rem;
}

.practice-links a {
  color: var(--color-gold-dark);
  text-decoration: none;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}

.practice-links a:hover {
  color: var(--color-dark);
}

.practice-links .link-arrow {
  font-size: 1.2rem;
}

/* Centered section intro (used above Statement of Faith / Practice blocks) */
.section-centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Gold section divider */
.section-divider {
  width: 80px;
  height: 4px;
  background: var(--color-gold);
  margin: var(--space-xl) auto;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .faith-nav {
    gap: var(--space-sm);
  }

  .faith-hero-btn {
    padding: 0.7rem 1.5rem;
    font-size: clamp(1rem, 4vw, 1.3rem);
  }

  .doctrine-card {
    padding: var(--space-sm) var(--space-md);
  }

  .doctrine-card h2 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  .doctrine-body p {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
  }

  .scripture-ref {
    font-size: 0.82rem;
  }

  .section-divider {
    margin: var(--space-lg) auto;
  }

  .practice-links a {
    font-size: clamp(0.9rem, 3.5vw, 1rem);
  }
}

@media (max-width: 480px) {
  .faith-nav {
    gap: 0.6rem;
  }

  .faith-hero-btn {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  .section-divider {
    margin: var(--space-md) auto;
  }
}

/* ========================================
   UTILITIES
   ======================================== */
.text-center { text-align: center; }
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-body-muted); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   SCROLL ANIMATIONS
   ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* ========================================
   LIGHTBOX
   ======================================== */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ========================================
   BACK TO TOP
   ======================================== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s;
  z-index: 50;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: all;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

/* ========================================
   NARROWEST PHONES (≤360px, e.g. iPhone SE)
   ======================================== */
@media (max-width: 360px) {
  .container,
  .container-prose {
    padding: 0 0.6rem;
  }

  .content-panel {
    padding: 0.6rem 0.5rem;
  }

  .file-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

/* ========================================
   INCARNATIONAL / BAYANIHAN PAIRED BLOCKS
   Image + list, alternating sides on wide layouts.
   Governed by container queries so the same CSS
   works inside a mock device frame or at full width.
   ======================================== */
.ib-section { container-type: inline-size; }

.ib-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  margin: var(--space-lg) 0;
}

.ib-figure { margin: 0; text-align: center; }
.ib-figure-inner { display: block; }
.ib-figure img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.ib-figcaption {
  font-size: 0.85rem;
  color: var(--color-body-muted);
  font-style: italic;
  margin-top: 0.5rem;
}
.ib-text h3 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  margin: 0 0 0.75rem;
}
.ib-text ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
  color: var(--color-body-text);
}
.ib-text ul li { margin: 0.4rem 0; line-height: 1.6; }

/* PC / wide container: two columns, alternating sides.
   Portrait block (reverse) uses a NARROW image column so the portrait's
   natural aspect ratio yields a height close to the text column — no crop.
   Landscape block uses a wider column and stretches the image to match text
   height via object-fit: cover — trims top/bottom slightly but no whitespace. */
@container (min-width: 820px) {
  .ib-block {
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: var(--space-xl);
    align-items: stretch;
  }
  .ib-block--reverse {
    grid-template-columns: 1fr minmax(180px, 240px);
    align-items: center;
  }
  .ib-block--reverse .ib-figure { grid-column: 2; grid-row: 1; }
  .ib-block--reverse .ib-text   { grid-column: 1; grid-row: 1; }
  .ib-block--reverse .ib-figure img { max-width: 100%; }

  /* Landscape block: stretch image to fill row height (= text height) */
  .ib-block:not(.ib-block--reverse) .ib-figure {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .ib-block:not(.ib-block--reverse) .ib-figure-inner {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .ib-block:not(.ib-block--reverse) .ib-figure-inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Tablet: keep stacked but allow a slightly wider image */
@container (min-width: 560px) and (max-width: 819.98px) {
  .ib-figure img { max-width: 480px; }
  .ib-text { max-width: 640px; margin: 0 auto; }
}

/* ========================================
   MOCKUP DEVICE FRAMES (mockup-*.php only)
   Frames hold fixed "device" widths so each one always renders
   its target layout regardless of the actual viewport. If the
   viewport is narrower than a frame, that frame scrolls horizontally.
   ======================================== */
.mock-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: center;
  margin: 0 auto;
  padding: var(--space-lg) 0;
}

.mock-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  padding: 2px;
}

.mock-device {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

.mock-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--color-dark);
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.mock-label .mock-dims {
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
  font-size: 0.8rem;
}

.mock-frame {
  background: var(--color-white);
  padding: var(--space-lg) var(--space-md);
}

.mock-desktop { width: 1280px; }
.mock-tablet  { width: 820px; }
.mock-mobile  { width: 390px; }

/* Each frame forces its target layout on the .ib-block markup
   inside — independent of viewport and container-query support. */

/* Desktop mock: two columns, alternating sides.
   Portrait block: narrow column, no crop (natural aspect).
   Landscape block: wide column, stretch + crop via object-fit: cover. */
.mock-desktop .ib-block {
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}
.mock-desktop .ib-block--reverse {
  grid-template-columns: 1fr minmax(180px, 240px);
  align-items: center;
}
.mock-desktop .ib-block--reverse .ib-figure { grid-column: 2; grid-row: 1; }
.mock-desktop .ib-block--reverse .ib-text   { grid-column: 1; grid-row: 1; }
.mock-desktop .ib-block--reverse .ib-figure img { max-width: 100%; }

/* Landscape block in desktop mock: stretch image to match text height */
.mock-desktop .ib-block:not(.ib-block--reverse) .ib-figure {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mock-desktop .ib-block:not(.ib-block--reverse) .ib-figure-inner {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mock-desktop .ib-block:not(.ib-block--reverse) .ib-figure-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

/* Tablet mock: single column, wider image cap, centered text column */
.mock-tablet .ib-figure img { max-width: 480px; }
.mock-tablet .ib-text { max-width: 640px; margin: 0 auto; }

/* Mobile mock: uses the default stacked .ib-block rules — no overrides needed */

/* ──────────────────────────────────────────────────────────────────────────
   LIBRARY MODULE
   Mobile-first. Breakpoints follow the convention used elsewhere in this
   file: 640 (tablet), 768 (small desktop), 1024 (wide desktop).
   ────────────────────────────────────────────────────────────────────── */

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

/* Hero — extra room for stacked action buttons on mobile */
.library-hero { padding-bottom: 1.5rem; }
.library-hero-compact { min-height: 18vh; }
.library-hero-actions {
  /* Lift above the absolutely-positioned .hero-bg / .hero-overlay layers
     in .hero-sub. Without this the buttons paint BEHIND the hero
     image. The h1 and .hero-lead in .hero-sub already do this. */
  position: relative;
  z-index: 2;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 320px;
}
@media (min-width: 640px) {
  .library-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
    gap: 0.75rem;
  }
}

/* Library buttons — distinct from .btn so we can keep them tap-friendly
   on mobile without depending on .btn's specific padding. */
.btn-library {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-library-primary {
  background: var(--color-gold);
  color: var(--color-dark);
}
.btn-library-primary:hover,
.btn-library-primary:focus { background: var(--color-gold-light); color: var(--color-dark); }
.btn-library-primary:disabled,
.btn-library-primary[disabled] {
  background: rgba(212,169,90,0.35);
  cursor: not-allowed;
}
.btn-library-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-library-ghost:hover,
.btn-library-ghost:focus { background: rgba(255,255,255,0.1); color: #fff; }

/* On light sections (search results, book detail) ghost buttons need
   a darker scheme. */
.section .btn-library-ghost {
  color: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
}
.section .btn-library-ghost:hover,
.section .btn-library-ghost:focus {
  background: var(--color-gold-dark);
  color: #fff;
}

/* Stats */
.library-stats-section { padding-top: 2rem; padding-bottom: 0.5rem; }
.library-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  text-align: center;
}
.library-stats .library-stat:nth-child(3) {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .library-stats { grid-template-columns: repeat(3, 1fr); }
  .library-stats .library-stat:nth-child(3) { grid-column: auto; }
}
.library-stat {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius);
  padding: 1.25rem 0.75rem;
  box-shadow: var(--shadow-card);
}
.library-stat-num {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  color: var(--color-dark);
  line-height: 1.1;
}
@media (min-width: 768px) { .library-stat-num { font-size: 2.25rem; } }
.library-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  margin-top: 0.25rem;
}

/* Search bar */
.library-search-section { padding-top: 1rem; padding-bottom: 1rem; }
.library-search-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .library-search-form { flex-direction: row; }
}
.library-search-form input[type="search"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;       /* ≥16px to keep iOS from auto-zooming */
  padding: 0.75rem 1rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  min-height: 48px;
  background: #fff;
}
.library-search-form input[type="search"]:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}

/* Section heading */
.library-section-heading {
  font-family: var(--font-heading);
  color: var(--color-dark);
  margin: 0 0 1rem;
}

/* Grid of book cards */
.library-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px) { .library-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 768px) { .library-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px){ .library-grid { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } }

.library-grid-item { display: flex; }
.library-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-dark);
  transition: transform 0.15s, box-shadow 0.15s;
}
.library-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.library-card-cover {
  aspect-ratio: 2 / 3;
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.library-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-card-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  color: var(--color-gold-dark);
  font-size: 3rem;
  background: linear-gradient(135deg, var(--color-cream), #fff);
}
.library-card-meta {
  padding: 0.6rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.library-card-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--color-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-card-author {
  font-size: 0.8rem;
  color: var(--color-body-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-card-status { margin-top: 0.4rem; }

/* Pills (status badges) */
.library-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.library-pill-avail { background: rgba(34,139,34,0.12); color: #1f6e1f; }
.library-pill-out   { background: rgba(176,0,32,0.10);  color: #8a0019; }
.library-pill-muted { background: rgba(0,0,0,0.06);     color: var(--color-body-muted); }

/* Empty / count / pager */
.library-empty {
  text-align: center;
  color: var(--color-body-muted);
  padding: 2rem 0;
}
.library-result-count {
  color: var(--color-body-muted);
  margin: 1rem 0;
}
.library-browse-link { text-align: center; margin-top: 1.5rem; }
.library-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.library-pager-info { color: var(--color-body-muted); font-size: 0.9rem; }
.library-back { margin-bottom: 1rem; }
.library-back a { color: var(--color-gold-dark); text-decoration: none; }
.library-back a:hover { color: var(--color-gold); }

/* Book detail */
.library-book-section { padding-top: 6rem; }   /* clear fixed header */
.library-book {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .library-book {
    flex-direction: row;
    gap: 2.5rem;
    align-items: flex-start;
  }
}
.library-book-cover {
  flex: 0 0 auto;
  width: 60%;
  max-width: 220px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .library-book-cover { width: 220px; margin: 0; }
}
.library-book-cover img,
.library-book-cover-placeholder {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.library-book-meta { flex: 1; min-width: 0; }
.library-book-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-dark);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
@media (min-width: 768px) { .library-book-title { font-size: 2rem; } }
.library-book-author {
  color: var(--color-body-muted);
  margin: 0 0 1rem;
}
.library-book-fields {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.4rem 1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.library-book-fields dt {
  font-weight: 600;
  color: var(--color-body-muted);
}
.library-book-fields dd { margin: 0; color: var(--color-dark); }
.library-book-subhead {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-dark);
  margin: 1.5rem 0 0.5rem;
}
.library-book-desc { color: var(--color-body-text); }
.library-book-no-copies { color: var(--color-body-muted); font-style: italic; }
.library-copies {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  overflow: hidden;
}
.library-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  color: var(--color-body-text);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
.library-copy:last-child { border-bottom: none; }
.library-copy-acc { font-weight: 600; color: var(--color-dark); }
.library-copy .library-pill { margin-left: auto; }

.library-book-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 640px) {
  .library-book-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Public forms (join, login, activate) */
.library-form { display: flex; flex-direction: column; gap: 1rem; }
.library-form .form-field { display: flex; flex-direction: column; gap: 0.3rem; }
.library-form label {
  font-weight: 600;
  color: var(--color-dark);
  font-size: 0.95rem;
}
.library-form .form-hint,
.library-form .muted { font-size: 0.85rem; color: var(--color-body-muted); font-weight: normal; }
.library-form input[type="text"],
.library-form input[type="email"],
.library-form input[type="tel"],
.library-form input[type="password"],
.library-form textarea {
  font-family: inherit;
  font-size: 1rem;             /* ≥16px so iOS doesn't auto-zoom */
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 6px;
  min-height: 48px;
  background: #fff;
  color: var(--color-dark);
  width: 100%;
}
.library-form textarea { min-height: 5rem; resize: vertical; }
.library-form input:focus,
.library-form textarea:focus,
.library-form select:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}
.library-form .invitation-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.library-form .form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  margin: 0;
  padding: 0;
}
.library-form .form-radio-group legend {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-dark);
}
.library-form .form-radio-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  min-height: 44px;       /* tap target */
}
@media (min-width: 640px) {
  .library-form .form-radio-group { flex-direction: row; gap: 1.5rem; flex-wrap: wrap; }
}
.library-form .form-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: normal;
}
.library-form input[type="checkbox"],
.library-form input[type="radio"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.library-form .captcha-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.library-form .captcha-question {
  background: var(--color-cream);
  padding: 0.55rem 0.9rem;
  border-radius: 6px;
  font-weight: 600;
  color: var(--color-dark);
  border: 1px dashed rgba(0,0,0,0.15);
}
.library-form .captcha-input { max-width: 6rem; }
.library-form-submit {
  align-self: flex-start;
  width: 100%;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .library-form-submit { width: auto; min-width: 180px; }
}
.library-form-help { margin-top: 1.5rem; color: var(--color-body-muted); }
.library-form-help a { color: var(--color-gold-dark); }

/* Honeypot — fully hidden but reachable in DOM. Never display:none (some
   bots filter that), instead position off-screen + zero size. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status messages */
.library-message {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.library-message-ok  { background: rgba(34,139,34,0.10); color: #1f6e1f; border: 1px solid rgba(34,139,34,0.25); }
.library-message-err { background: rgba(176,0,32,0.10);  color: #8a0019; border: 1px solid rgba(176,0,32,0.25); }

/* Member-account page */
.library-account-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.library-loan-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.library-loan {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .library-loan {
    grid-template-columns: minmax(140px, auto) 1fr auto;
    align-items: start;
    gap: 1rem;
  }
}
.library-loan-overdue { border-color: rgba(176,0,32,0.4); background: rgba(176,0,32,0.02); }
.library-loan-status .library-pill { font-size: 0.75rem; }
.library-loan-title { font-family: var(--font-heading); color: var(--color-dark); font-size: 1.05rem; line-height: 1.3; }
.library-loan-title a { color: inherit; text-decoration: none; }
.library-loan-title a:hover { color: var(--color-gold-dark); }
.library-loan-author { color: var(--color-body-muted); font-size: 0.9rem; }
.library-loan-meta { color: var(--color-body-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.library-loan-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 640px) {
  .library-loan-actions { justify-self: end; }
}
.library-history .library-loan { background: #fafaf8; box-shadow: none; }

/* ──────────────────────────────────────────────────────────────────────
   Library hero — signed-in banner + embedded tabbed login form
   Mobile-first; matches the other library widgets at 640/768/1024.
   ────────────────────────────────────────────────────────────────── */

.library-hero-banner {
  /* Same lift as the h1 — paint above the hero bg/overlay layers.
     This previously worked accidentally because backdrop-filter creates
     a new stacking context; making it explicit so it doesn't break if
     backdrop-filter ever gets removed. */
  position: relative;
  z-index: 2;
  margin: 1.25rem auto 0;
  max-width: 540px;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
  color: #fff;
}
@media (min-width: 640px) {
  .library-hero-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
}
.library-hero-banner-id { display: flex; flex-direction: column; gap: 0.1rem; }
.library-hero-banner-greeting {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: #fff;
}
.library-hero-banner-role {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.library-hero-banner .library-hero-actions {
  margin-top: 0;
  flex-direction: row;
  gap: 0.5rem;
}

/* Embedded login form */
.library-hero-login {
  /* Lift above the .hero-bg / .hero-overlay absolute layers — without
     this the entire login form paints behind the hero image and the
     visitor sees an empty hero. */
  position: relative;
  z-index: 2;
  margin: 1.25rem auto 0;
  width: 100%;
  max-width: 380px;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  overflow: hidden;
  text-align: left;
  color: var(--color-dark);
}
@media (min-width: 640px) { .library-hero-login { max-width: 440px; } }

.library-login-tabs {
  display: flex;
  background: rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.library-login-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-body-muted);
  cursor: pointer;
  min-height: 48px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.library-login-tab:hover { background: rgba(0,0,0,0.03); }
.library-login-tab.active {
  color: var(--color-dark);
  border-bottom-color: var(--color-gold);
  background: #fff;
}

.library-login-form { padding: 1rem 1.1rem 1.1rem; }
.library-login-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.library-login-form input[type="text"],
.library-login-form input[type="email"],
.library-login-form input[type="password"] {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;          /* ≥16px to suppress iOS zoom */
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
}
.library-login-form input:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}
.library-login-form .btn-library-primary {
  width: 100%;
  margin-top: 0.25rem;
}
.library-login-msg {
  margin: 0.5rem 0 0;
  min-height: 1.2em;
  font-size: 0.9rem;
}
.library-login-msg-ok  { color: #1f6e1f; }
.library-login-msg-err { color: #b00020; }
.library-login-help {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--color-body-muted);
}
.library-login-help a {
  color: var(--color-gold-dark);
  text-decoration: none;
}
.library-login-help a:hover { color: var(--color-gold); text-decoration: underline; }
.library-login-help-sep { margin: 0 0.4rem; color: rgba(0,0,0,0.25); }

/* =====================================================================
   Library — collection page (filter toolbar, list view, chips)
   ===================================================================== */
.library-collection-section { padding-top: 1.5rem; }

/* Toolbar — three rows of controls inside one form */
.library-toolbar {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.library-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}
.library-toolbar-search { gap: 0.5rem; align-items: center; }
.library-toolbar-search input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;       /* ≥16px keeps iOS from auto-zooming */
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: #fff;
  color: var(--color-dark);
}
.library-toolbar-search input[type="search"]:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}

/* Grid / list toggle */
.library-view-toggle {
  display: inline-flex;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.library-view-btn {
  padding: 0.5rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-body-text);
  text-decoration: none;
  background: #fff;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.library-view-btn + .library-view-btn { border-left: 1px solid rgba(0,0,0,0.15); }
.library-view-btn:hover:not(.is-active) { background: var(--color-cream); }
.library-view-btn.is-active {
  background: var(--color-gold);
  color: var(--color-dark);
}

/* Individual filter control */
.library-filter {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 160px;
  min-width: 0;
}
.library-filter > span:first-child {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-body-muted);
}
.library-filter select,
.library-filter input[type="text"] {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-dark);
  min-height: 40px;
}
.library-filter select:focus,
.library-filter input[type="text"]:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}
.library-filter-shelf { flex: 0 1 140px; }

.library-filter-check {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  flex: 0 1 auto;
  align-self: end;
  padding-bottom: 0.4rem;  /* align baseline with neighbouring inputs */
}
.library-filter-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-gold-dark);
  flex: 0 0 auto;
}
.library-filter-check > span:first-child {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9rem;
  color: var(--color-body-text);
}

.library-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  align-self: end;
}
.library-toolbar-apply,
.library-toolbar-clear {
  min-height: 40px;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

/* Active-filter chips */
.library-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 1rem;
}
.library-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--color-body-text);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.library-chip:hover,
.library-chip:focus {
  background: var(--color-gold);
  color: var(--color-dark);
}
.library-chip-x { font-size: 1.05rem; line-height: 1; }

/* Card shelf annotation (grid view) */
.library-card-shelf {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.7rem;
  color: var(--color-body-muted);
  margin-top: 0.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* List view */
.library-list {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
/* The data row is a flex column: a primary grid line (cover + 6 columns)
   plus an optional secondary metadata line (Publisher / Edition / ISBN /
   Call No / Subject). The header is a single grid row matching the
   primary line's template. */
.library-list-head,
.library-list-row-primary {
  display: grid;
  /* cover · title · author · year · topic · shelf · copies */
  grid-template-columns: 36px minmax(0, 2.2fr) minmax(0, 1.5fr) 56px minmax(0, 1.1fr) minmax(0, 0.95fr) 88px;
  gap: 0.6rem;
  align-items: center;
}
.library-list-head {
  background: var(--color-cream);
  padding: 0.6rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-body-muted);
  border-bottom: 1px solid var(--color-border);
}
.library-list-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  text-decoration: none;
  color: var(--color-dark);
  transition: background 0.1s;
}
.library-list-row:last-child { border-bottom: 0; }
.library-list-row:hover,
.library-list-row:focus { background: var(--color-cream); outline: none; }
.library-list-row-primary > span,
.library-list-row > span {
  font-size: 0.9rem;
  color: var(--color-body-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Secondary metadata line — Publisher · Edition · ISBN · Call No · Subject */
.library-list-row-meta {
  font-size: 0.78rem;
  color: var(--color-body-muted);
  /* Indent past the cover column so the meta text aligns with the title. */
  padding-left: calc(36px + 0.6rem);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.library-list-row-meta strong {
  font-weight: 600;
  color: var(--color-body-text);
}
.library-list-col-cover {
  width: 36px;
  height: 54px;
  background: var(--color-cream);
  border-radius: 2px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.library-list-col-cover img { width: 100%; height: 100%; object-fit: cover; }
.library-list-cover-placeholder {
  font-family: var(--font-heading);
  color: var(--color-gold-dark);
  font-size: 1.1rem;
}
.library-list-col-title {
  font-family: var(--font-heading);
  color: var(--color-dark);
  font-size: 1rem;
}
.library-list-col-shelf {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.85rem;
  color: var(--color-body-muted);
}
.library-list-col-copies { white-space: nowrap; }

/* Drop year column on medium screens */
@media (max-width: 900px) {
  .library-list-head .library-list-col-year,
  .library-list-row  .library-list-col-year { display: none; }
  .library-list-head,
  .library-list-row-primary {
    grid-template-columns: 36px minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) 80px;
  }
}
/* Drop topic column on small screens */
@media (max-width: 640px) {
  .library-list-head .library-list-col-topic,
  .library-list-row  .library-list-col-topic { display: none; }
  .library-list-head,
  .library-list-row-primary {
    grid-template-columns: 32px minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 0.9fr) 70px;
    gap: 0.5rem;
  }
  .library-list-row { padding: 0.55rem 0.7rem; }
  .library-list-col-cover { width: 32px; height: 48px; }
  /* On narrow screens the meta line gets its own indent (smaller cover) */
  .library-list-row-meta { padding-left: calc(32px + 0.5rem); }
  .library-toolbar-actions { margin-left: 0; width: 100%; }
  .library-toolbar-apply { flex: 1; }
}