.layout-comic {
  --accent: #e9a94d;
  --story-bg: #090d16;
  --page-text: white;
  --copy: rgba(255, 255, 255, 0.7);
  --panel: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.16);
  --give-bg: #111827;
  --donation-bg: #f8efe2;
  --story-radius: 0;
}

.layout-comic .story-section {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1fr);
}

.layout-comic .chapter-grid {
  grid-template-columns: 1fr;
}

.layout-comic .chapter-grid article {
  border-radius: 0;
  border-left: 4px solid var(--accent);
}

.layout-trust {
  --accent: #0b8f8a;
  --page-bg: #f7f3eb;
  --story-bg: #fff;
  --give-bg: #e8f3f0;
}

.layout-trust .hero-stage {
  min-height: 86vh;
}

.layout-trust .hero-card,
.layout-trust .donation-panel {
  border-radius: 0.8rem;
  box-shadow: 0 28px 90px rgba(9, 44, 58, 0.18);
}

.layout-luxury {
  --accent: #7ee7ef;
  --page-bg: #020a10;
  --page-text: #eef9fb;
  --story-bg: #061823;
  --panel: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.14);
  --copy: rgba(238, 249, 251, 0.7);
  --give-bg: #07111f;
  --donation-bg: rgba(255, 255, 255, 0.08);
}

.layout-luxury .hero-card {
  border-radius: 2.2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05));
}

.layout-luxury .story-visual {
  box-shadow: 0 32px 120px rgba(9, 166, 179, 0.18);
}

.layout-data {
  --accent: #17b6d0;
  --page-bg: #eef9fb;
  --metric-bg: #062d38;
  --story-bg: #dff5f8;
  --give-bg: #eef9fb;
  --story-radius: 0.4rem;
}

.layout-data .hero-overlay {
  background: linear-gradient(90deg, rgba(2, 35, 44, 0.92), rgba(2, 35, 44, 0.36));
}

.layout-data .metric-strip article {
  font-family: "Courier New", monospace;
}

.layout-clean {
  --accent: #e2a600;
  --nav-text: #142335;
  --page-bg: #fffaf0;
  --metric-bg: #f7c948;
  --metric-text: #1f2937;
  --story-bg: white;
  --give-bg: #fff3bf;
}

.layout-clean .site-header {
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.78), transparent);
}

.layout-clean .site-header nav {
  border-color: rgba(20, 35, 53, 0.14);
  background: rgba(255, 255, 255, 0.42);
}

.layout-clean .site-header nav a {
  color: rgba(20, 35, 53, 0.72);
}

.layout-clean .hero-stage {
  min-height: 78vh;
}

.layout-clean .hero-overlay {
  background: linear-gradient(90deg, rgba(255, 250, 240, 0.9), rgba(255, 250, 240, 0.2));
}

.layout-clean .hero-copy,
.layout-clean .hero-copy > p:last-of-type {
  color: #142335;
}

.layout-clean .dg-button.ghost {
  color: #142335;
  border-color: rgba(20, 35, 53, 0.26);
}

.layout-control {
  --accent: #83f7b6;
  --page-bg: #05070d;
  --page-text: #eef7ff;
  --story-bg: #080d18;
  --panel: rgba(30, 72, 120, 0.24);
  --line: rgba(131, 247, 182, 0.25);
  --copy: rgba(238, 247, 255, 0.72);
  --give-bg: #081120;
  --donation-bg: #0d1524;
  --action-bg: #0f6bff;
}

.layout-control .hero-stage {
  background-image:
    linear-gradient(rgba(131, 247, 182, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(131, 247, 182, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

.layout-control .metric-strip span::before {
  content: "STATUS / ";
  color: var(--accent);
}

.layout-minimal {
  --accent: #09a6b3;
  --page-bg: #f8fafc;
  --metric-bg: white;
  --metric-text: #07111f;
  --story-bg: #f3f5f7;
  --story-radius: 0;
  --give-bg: white;
}

.layout-minimal .hero-stage,
.layout-minimal .story-section,
.layout-minimal .give-section {
  max-width: 1180px;
  margin: 0 auto;
}

.layout-minimal .hero-card,
.layout-minimal .chapter-grid article,
.layout-minimal .doctrine-section article,
.layout-minimal .donation-panel {
  border-radius: 0;
  box-shadow: none;
}

.layout-race {
  --accent: #ff6a32;
  --page-bg: #061b2a;
  --page-text: white;
  --story-bg: #081f32;
  --panel: rgba(255, 106, 50, 0.1);
  --line: rgba(255, 255, 255, 0.16);
  --copy: rgba(255, 255, 255, 0.72);
  --give-bg: #0c2438;
  --donation-bg: #fff;
}

.layout-race .metric-strip article {
  transform: skewX(-5deg);
}

.layout-race .metric-strip span {
  display: inline-block;
  transform: skewX(5deg);
}

.layout-journal {
  --accent: #c9974c;
  --page-bg: #efe7d4;
  --story-bg: #193a36;
  --page-text: #112b29;
  --give-bg: #e7dcc7;
  --story-radius: 2rem;
}

.layout-journal .hero-copy h1,
.layout-journal .story-copy h2,
.layout-journal .give-section h2 {
  font-family: Newsreader, Georgia, serif;
  font-weight: 400;
}

.layout-journal .chapter-grid article {
  background: rgba(255, 255, 255, 0.48);
}

.layout-bold {
  --accent: #ef3e36;
  --page-bg: #0a0f15;
  --page-text: white;
  --story-bg: #15191e;
  --panel: rgba(239, 62, 54, 0.12);
  --line: rgba(255, 255, 255, 0.16);
  --copy: rgba(255, 255, 255, 0.72);
  --give-bg: #161616;
  --donation-bg: #f4f4f4;
  --story-radius: 0.25rem;
}

.layout-bold .hero-copy h1,
.layout-bold .story-copy h2,
.layout-bold .give-section h2 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.layout-bold .dg-button.primary,
.layout-bold .amount-grid button.active {
  color: white;
  background: var(--accent);
}

@media (max-width: 980px) {
  .hub-grid,
  .matrix-entry,
  .hero-stage,
  .story-section,
  .give-section {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 28rem;
  }

  .metric-strip,
  .doctrine-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero-copy .dg-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .hub-copy h1,
  .hero-copy h1 {
    font-size: 3rem;
  }

  .hero-copy > p:last-of-type {
    max-width: 20rem;
    font-size: 1rem;
  }

  .story-copy h2,
  .give-section h2 {
    font-size: 2.25rem;
  }

  .hub-grid,
  .matrix-link-grid,
  .metric-strip,
  .doctrine-section,
  .chapter-grid,
  .amount-grid {
    grid-template-columns: 1fr;
  }

  .site-header nav {
    max-width: 10.5rem;
    overflow-x: auto;
  }

  .site-footer {
    flex-direction: column;
  }
}