/* style.css — Untold People components & layout */

.wrap{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.header-inner{display:flex;align-items:center;gap:var(--space-4);min-height:66px}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-0.02em}
.brand-mark{flex-shrink:0;border-radius:var(--radius-full)}
.brand-text .brand-dot{color:var(--color-primary)}
.site-nav{margin-inline-start:auto}
.nav{display:flex;align-items:center;gap:0.2rem}
.nav a{display:block;padding:0.5rem 0.75rem;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.nav a:hover{color:var(--color-text);background:var(--color-surface-offset)}
.nav a.active{color:var(--color-primary)}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-md);color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset)}
.theme-toggle .icon-moon{display:none}
[data-theme='dark'] .theme-toggle .icon-sun{display:none}
[data-theme='dark'] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-toggle .icon-sun{display:none}:root:not([data-theme]) .theme-toggle .icon-moon{display:block}}
.menu-btn{display:none;width:42px;height:42px;place-items:center;border-radius:var(--radius-md);color:var(--color-text)}

/* ---------- gradients ---------- */
.grad-ember{background:linear-gradient(135deg,#c2502b,#7a2c12)}
.grad-crimson{background:linear-gradient(135deg,#a13540,#6e1f29)}
.grad-spring{background:linear-gradient(135deg,#3f7d34,#23531f)}
.grad-sky{background:linear-gradient(135deg,#2c6f9e,#1c4a6b)}
.grad-rose{background:linear-gradient(135deg,#b0456e,#7a2d49)}
.grad-forest{background:linear-gradient(135deg,#2f6b46,#1d4630)}
.grad-violet{background:linear-gradient(135deg,#6f3f9e,#4a2970)}
.grad-sun{background:linear-gradient(135deg,#c98a16,#8a5d0a)}
.grad-ocean{background:linear-gradient(135deg,#1f6e8c,#11455b)}
[data-theme='dark'] .grad-ember{background:linear-gradient(135deg,#5a2a16,#3a1a0c)}
[data-theme='dark'] .grad-crimson{background:linear-gradient(135deg,#5e2230,#3a1218)}
[data-theme='dark'] .grad-spring{background:linear-gradient(135deg,#1f4a1c,#122c10)}
[data-theme='dark'] .grad-sky{background:linear-gradient(135deg,#15405c,#0e2a3c)}
[data-theme='dark'] .grad-rose{background:linear-gradient(135deg,#5e2238,#3a1422)}
[data-theme='dark'] .grad-forest{background:linear-gradient(135deg,#16432b,#0e2a18)}
[data-theme='dark'] .grad-violet{background:linear-gradient(135deg,#3e2460,#26143c)}
[data-theme='dark'] .grad-sun{background:linear-gradient(135deg,#6e4c0a,#442d05)}
[data-theme='dark'] .grad-ocean{background:linear-gradient(135deg,#114458,#0a2a38)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.8rem 1.4rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;letter-spacing:0.01em;transition:transform var(--transition-interactive),background var(--transition-interactive),box-shadow var(--transition-interactive),color var(--transition-interactive)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md)}
.btn-ghost{border:1px solid var(--color-border);color:var(--color-text)}
.btn-ghost:hover{background:var(--color-surface-offset);border-color:var(--color-text-faint)}
.btn-outline{border:1.5px solid var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-text{color:var(--color-primary);font-weight:600;font-size:var(--text-sm);padding:0.3rem 0}
.btn-text:hover{color:var(--color-primary-hover)}
.btn-lg{padding:1rem 2rem;font-size:var(--text-base)}

/* ---------- hero (landing) ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,5.5rem);background:linear-gradient(160deg,#1c1812 0%,#2a1d14 45%,#3a2418 100%);color:#fff}
.hero-inner{position:relative;z-index:2;max-width:820px}
.eyebrow{font-size:var(--text-xs);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
.hero-title{font-size:var(--text-hero);line-height:0.98;font-weight:600;letter-spacing:-0.03em;color:#fff}
.hero-title .hl{color:#e8973c}
.hero-sub{margin-top:var(--space-6);font-size:var(--text-lg);max-width:62ch;color:#e8ddca;line-height:1.55}
.hero-cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero .btn-primary{background:#e0824a;color:#1a140d}
.hero .btn-primary:hover{background:#f0975c}
.hero .btn-ghost{border-color:rgba(255,255,255,0.3);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,0.08)}
.hero-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 80% 10%,rgba(224,130,74,0.28),transparent 70%),radial-gradient(50% 50% at 10% 90%,rgba(193,80,43,0.2),transparent 70%)}

/* ---------- sections ---------- */
.section{padding-block:clamp(2.8rem,6vw,5rem)}
.section-kicker{font-size:var(--text-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.section-title{font-size:var(--text-2xl);max-width:20ch;letter-spacing:-0.02em}
.section-title.light{color:#fff}
.section-lede{margin-top:var(--space-5);font-size:var(--text-lg);max-width:62ch;color:var(--color-text-muted)}
.section-lede.light{color:#e8ddca}
.section .btn{margin-top:var(--space-8)}

/* need stats */
.section-need{background:var(--color-surface)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.stat{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.stat-num{display:block;font-family:var(--font-display);font-size:clamp(2rem,1.4rem+1.6vw,3rem);font-weight:700;color:var(--color-primary);line-height:1;letter-spacing:-0.02em}
.stat-label{display:block;margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.stats-inline{display:flex;flex-wrap:wrap;gap:var(--space-4);margin:var(--space-6) 0}
.stats-inline .stat{flex:1 1 200px;padding:var(--space-5)}

/* story */
.section-story{background:var(--color-surface-2)}
.story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.prose{font-size:var(--text-lg);color:var(--color-text-muted);margin-top:var(--space-4);max-width:54ch;line-height:1.6}
.prose+.prose{margin-top:var(--space-4)}
.story-figure{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.story-figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story-figure figcaption{padding:var(--space-3);font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface)}

/* gospel */
.section-gospel{color:#fff;background:linear-gradient(160deg,#2f6b46,#1d4630)}
.section-gospel .section-kicker{color:#9fd6a8}
.section-gospel .section-lede{color:#dbe9de}
.gospel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.mini-card{display:block;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:var(--radius-lg);padding:var(--space-6);color:#fff;font-weight:600;transition:background var(--transition-interactive),transform var(--transition-interactive)}
.mini-card:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px)}

/* theme grid */
.section-themes{background:var(--color-bg)}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.theme-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg);min-height:150px;position:relative;overflow:hidden;color:#fff;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.theme-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tc-kicker{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600}
.tc-blurb{font-size:var(--text-sm);color:rgba(255,255,255,0.82)}
.tc-go{margin-top:auto;font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase}
.tc-orange{background:linear-gradient(135deg,#c2502b,#7a2c12)}
.tc-notification{background:linear-gradient(135deg,#a13540,#6e1f29)}
.tc-success{background:linear-gradient(135deg,#3f7d34,#23531f)}
.tc-blue{background:linear-gradient(135deg,#2c6f9e,#1c4a6b)}
.tc-purple{background:linear-gradient(135deg,#6f3f9e,#4a2970)}
.tc-gold{background:linear-gradient(135deg,#c98a16,#8a5d0a)}

/* action */
.section-action{color:#fff;background:linear-gradient(160deg,#c98a16,#8a5d0a)}
.section-action .section-kicker{color:#ffe6a8}
.action-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.action-cards{display:flex;flex-direction:column;gap:var(--space-3)}
.action-card{display:flex;align-items:center;gap:var(--space-4);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:var(--radius-lg);padding:var(--space-5);color:#fff;font-weight:600;transition:background var(--transition-interactive),transform var(--transition-interactive)}
.action-card:hover{background:rgba(255,255,255,0.2);transform:translateX(3px)}
.ac-num{font-family:var(--font-display);font-weight:700;color:#ffe6a8;font-size:var(--text-lg)}

/* cta */
.section-cta{text-align:center;background:var(--color-surface)}
.cta-inner{max-width:760px;margin-inline:auto}
.big-quote{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;font-style:italic;line-height:1.2;letter-spacing:-0.01em}
.quote-attr{margin-top:var(--space-4);color:var(--color-text-muted)}

/* ---------- library ---------- */
.page-hero{color:#fff;padding-block:clamp(2.5rem,5vw,4rem)}
.page-hero .eyebrow{color:rgba(255,255,255,0.85)}
.page-title{font-size:var(--text-3xl);color:#fff;letter-spacing:-0.02em}
.page-sub{margin-top:var(--space-4);font-size:var(--text-lg);color:rgba(255,255,255,0.85);max-width:56ch}
.lib-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);margin-bottom:var(--space-6)}
.lib-count{font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-faint);white-space:nowrap}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}
.card-grid-wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);min-height:150px;position:relative;transition:transform var(--transition-interactive),box-shadow var(--transition-interactive),border-color var(--transition-interactive)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-text-faint)}
.card-kicker{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary)}
.card-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;line-height:1.2}
.card-tagline{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:auto}
.card-arrow{position:absolute;top:var(--space-6);right:var(--space-6);color:var(--color-text-faint);font-size:1.2rem;transition:transform var(--transition-interactive),color var(--transition-interactive)}
.card:hover .card-arrow{transform:translateX(4px);color:var(--color-primary)}
.card-orange .card-kicker{color:#c2502b}
.card-notification .card-kicker{color:#a13540}
.card-success .card-kicker{color:#3f7d34}
.card-blue .card-kicker{color:#2c6f9e}
.card-purple .card-kicker{color:#6f3f9e}
.card-gold .card-kicker{color:#c98a16}
[data-theme='dark'] .card-orange .card-kicker{color:#d9683f}
[data-theme='dark'] .card-notification .card-kicker{color:#c64a55}
[data-theme='dark'] .card-success .card-kicker{color:#6aa85a}
[data-theme='dark'] .card-blue .card-kicker{color:#5fa3d0}
[data-theme='dark'] .card-purple .card-kicker{color:#9a72c4}
[data-theme='dark'] .card-gold .card-kicker{color:#e0a73c}

/* ---------- article ---------- */
.article-hero{color:#fff;padding-block:clamp(2rem,4vw,3.2rem)}
.article-hero .eyebrow{color:rgba(255,255,255,0.85)}
.article-title{font-size:var(--text-2xl);color:#fff;max-width:22ch}
.article-tagline{margin-top:var(--space-3);font-size:var(--text-lg);color:rgba(255,255,255,0.85);max-width:60ch}
.crumbs{display:flex;align-items:center;gap:0.5rem;font-size:var(--text-xs);color:rgba(255,255,255,0.75);margin-bottom:var(--space-4)}
.crumbs a:hover{text-decoration:underline}
.article{padding-block:clamp(2.5rem,5vw,4.5rem)}
.article-wrap{max-width:760px}
.article-intro{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;line-height:1.3;letter-spacing:-0.01em;color:var(--color-text);border-left:3px solid var(--color-primary);padding-left:var(--space-5);margin-bottom:var(--space-8)}
.article-body{font-size:var(--text-base);line-height:1.75}
.article-body p{margin-bottom:var(--space-5)}
.article-body h3{font-size:var(--text-lg);margin-top:var(--space-8);margin-bottom:var(--space-3);color:var(--color-text)}
.article-body ul:not(.ext-links):not(.steps){margin:var(--space-4) 0;padding-left:var(--space-5);list-style:disc}
.article-body ul:not(.ext-links):not(.steps) li{margin-bottom:var(--space-2);padding-left:var(--space-1)}
.article-body ul:not(.ext-links):not(.steps) li::marker{color:var(--color-primary)}
.scripture{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);line-height:1.5;border-left:3px solid var(--color-primary-highlight);background:var(--color-surface-offset);padding:var(--space-5) var(--space-6);margin:var(--space-5) 0;border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--color-text)}
.callout{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;font-style:italic;text-align:center;margin:var(--space-8) 0;padding:var(--space-8) 0;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);color:var(--color-primary)}
.ext-links{margin:var(--space-6) 0;display:flex;flex-direction:column;gap:var(--space-2)}
.ext-link{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--color-primary);padding:var(--space-3) var(--space-4);background:var(--color-surface-offset);border-radius:var(--radius-md);border:1px solid var(--color-border);width:fit-content}
.ext-link:hover{background:var(--color-primary-highlight);border-color:var(--color-primary)}
.ext-link svg{flex-shrink:0;opacity:0.6}
.steps{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-6) 0;counter-reset:step}
.step{display:flex;gap:var(--space-4);align-items:flex-start}
.step-num{font-family:var(--font-display);font-weight:700;color:var(--color-primary);font-size:var(--text-lg);min-width:2.5rem}
.step h4{font-size:var(--text-base);margin-bottom:var(--space-1)}
.step p{margin:0;color:var(--color-text-muted)}
.article-cta{margin-top:var(--space-12);padding:var(--space-8);background:linear-gradient(135deg,var(--color-primary-highlight),var(--color-surface-offset));border-radius:var(--radius-lg);text-align:center}
.cta-text{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-4)}
.article-note{margin-top:var(--space-8);font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic;border-top:1px solid var(--color-divider);padding-top:var(--space-5)}
.article-sources-label{margin-top:var(--space-6);font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-faint)}
.article-sources{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.article-sources li{margin-bottom:var(--space-1)}
.article-related{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--color-divider)}
.article-related h3{font-size:var(--text-lg);margin-bottom:var(--space-5)}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.related-card{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-5);border-radius:var(--radius-md);background:var(--color-surface);border:1px solid var(--color-border);transition:transform var(--transition-interactive),box-shadow var(--transition-interactive)}
.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.rc-kicker{font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-faint)}
.rc-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-base)}
.rc-arrow{margin-top:var(--space-1);color:var(--color-primary);font-size:var(--text-sm)}
.rc-orange .rc-kicker{color:#c2502b}
.rc-notification .rc-kicker{color:#a13540}
.rc-success .rc-kicker{color:#3f7d34}
.rc-blue .rc-kicker{color:#2c6f9e}
.rc-purple .rc-kicker{color:#6f3f9e}
.rc-gold .rc-kicker{color:#c98a16}
[data-theme='dark'] .rc-orange .rc-kicker{color:#d9683f}
[data-theme='dark'] .rc-notification .rc-kicker{color:#c64a55}
[data-theme='dark'] .rc-success .rc-kicker{color:#6aa85a}
[data-theme='dark'] .rc-blue .rc-kicker{color:#5fa3d0}
[data-theme='dark'] .rc-purple .rc-kicker{color:#9a72c4}
[data-theme='dark'] .rc-gold .rc-kicker{color:#e0a73c}

/* ---------- footer ---------- */
.site-footer{background:var(--color-surface-offset);border-top:1px solid var(--color-divider);padding-block:var(--space-12)}
.footer-inner{display:grid;grid-template-columns:1.2fr 2fr 1fr;gap:var(--space-8);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:var(--space-2);color:var(--color-primary)}
.footer-name{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);color:var(--color-text)}
.footer-tag{font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-note{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6}
.footer-links{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm)}
.footer-links a{color:var(--color-primary);font-weight:500}
.footer-links a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .story-grid,.action-inner{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:var(--space-6)}
}
@media (max-width:720px){
  .site-nav,.theme-toggle{display:none}
  .menu-btn{display:grid}
  .site-nav.open{display:block;position:absolute;top:66px;left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-divider);padding:var(--space-4)}
  .site-nav.open .nav{flex-direction:column;align-items:stretch;gap:0}
  .site-nav.open .nav a{padding:var(--space-3)}
  .lib-group-head{flex-direction:column;align-items:flex-start}
}