/* =====================================================================
   curriculum.css — Shared design system for ~79 curriculum pages
   "People Studies++" / Ruth flagship aesthetic:
   clay + parchment, Fraunces + Mulish, tactile clay-relief shadows,
   big rounding, textured paper background, branded pebble nav.

   HARD CONTRACT: every original CSS custom-property NAME is preserved
   below (pages' inline styles reference them). Values are re-mapped to
   the Ruth clay/parchment palette + scale. Ruth's extra tokens are added
   as bonuses (--clay, --wheat, --night, --sage, --raise*, --press, --r-*).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1&family=Mulish:ital,wght@0,300..800;1,400..600&display=swap');

:root {
    /* ---- Ruth paper tones (mapped onto the original parchment names) ---- */
    --parchment-light: #f4eade;   /* warm bone page */
    --parchment:       #efe0cb;    /* deeper bone */
    --parchment-dark:  #e7d4ba;    /* grooves / wells */
    --parchment-shadow:#d8c3a4;    /* deepest paper edge */

    /* ---- Ruth clay / wheat (mapped onto the original gold names) ---- */
    --gold:        #b0603c;        /* terracotta clay — primary accent */
    --gold-bright: #e0a24a;        /* harvest wheat gold */
    --gold-dark:   #8e4a2d;        /* deep clay */
    --gold-shine:  linear-gradient(90deg, #e0a24a, #b0603c);

    /* ---- Ink (cocoa) ---- */
    --ink:        #43291b;         /* darkest cocoa ink */
    --ink-light:  #6b4733;         /* secondary ink */
    --ink-faded:  #735840;         /* muted ink (AA on clay cards) */

    /* ---- Accent roles (re-keyed to Ruth's stage/character palette) ---- */
    --apostle-red:    #b0603c;     /* clay — card headers */
    --royal-blue:     #4f708b;     /* threshing-floor dusk blue */
    --fisherman-blue: #4f708b;     /* dusk blue */
    --martyr-crimson: #8e4a2d;     /* deep clay (for "wrong"/martyr states) */
    --inner-circle:   #84935f;     /* providence sage */

    /* ---- Typography ---- */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-uncial:  'Fraunces', Georgia, serif;   /* big display lockups */

    /* ---- Spacing (kept names; Ruth-comfortable values) ---- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* ---- Touch targets ---- */
    --touch-min: 48px;

    /* ============================================================
       BONUS Ruth tokens (so future pages can use them directly)
       ============================================================ */
    --clay:        #b0603c;
    --clay-deep:   #8e4a2d;
    --clay-soft:   #c98a5e;
    --wheat:       #e0a24a;
    --wheat-soft:  #eccf92;
    --night:       #4f708b;
    --night-deep:  #3c586f;
    --sage:        #84935f;
    --sage-deep:   #6b7a4b;
    --cocoa:       #43291b;
    --cocoa-2:     #6b4733;
    --cocoa-3:     #735840;
    --paper:       #f4eade;
    --paper-2:     #efe0cb;
    --paper-3:     #e7d4ba;

    --soft: "SOFT" 45, "WONK" 0;

    /* clay-relief shadow recipes */
    --raise: 0 2px 1px rgba(255,251,244,.65) inset,
             0 -8px 18px -10px rgba(120,66,38,.18) inset,
             0 18px 34px -16px rgba(67,41,27,.40),
             0 6px 13px -8px rgba(67,41,27,.28);
    --raise-sm: 0 1px 1px rgba(255,251,244,.6) inset,
                0 10px 20px -12px rgba(67,41,27,.40),
                0 4px 8px -5px rgba(67,41,27,.26);
    --press: inset 0 4px 9px rgba(67,41,27,.32),
             inset 0 -2px 4px rgba(255,251,244,.45);

    --r-lg: 26px;
    --r-md: 18px;
    --r-sm: 12px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* =========================================================
   BODY — textured paper + Mulish + cocoa ink
   ========================================================= */
body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink);
    background-color: var(--parchment-light);
    background-image:
        radial-gradient(125% 90% at 12% -5%, rgba(224,162,74,.16), transparent 46%),
        radial-gradient(120% 85% at 92% 0%, rgba(79,112,139,.12), transparent 42%),
        radial-gradient(120% 120% at 50% 120%, rgba(176,96,60,.10), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-attachment: fixed, fixed, fixed, scroll;
    overflow-x: hidden;
}

::selection { background: var(--wheat-soft); color: var(--ink); }

a { color: var(--clay-deep); }

:focus-visible {
    outline: 3px solid var(--night);
    outline-offset: 3px;
    border-radius: 4px;
}

/* shared layout container */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* =========================================================
   SKIP LINK (accessibility)
   ========================================================= */
.skip-link {
    position: absolute;
    top: -48px;
    left: 0;
    background: var(--clay);
    color: #fdf3e7;
    padding: 10px 18px;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 800;
    border-radius: 0 0 var(--r-sm) 0;
    z-index: 1000;
}

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

/* =========================================================
   PAGE FRAME
   ========================================================= */
.page-frame {
    max-width: 1140px;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 2.5rem);
    position: relative;
}

/* =========================================================
   HERO — eyebrow + big Fraunces title + clay scripture plaque
   ========================================================= */
.hero {
    text-align: center;
    padding: clamp(2.6rem, 7vw, 4.6rem) 0 clamp(1.4rem, 3vw, 2rem);
    position: relative;
}

.hero__ornament {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-bottom: 1rem;
}

.hero__ornament::before,
.hero__ornament::after {
    content: '';
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--clay-soft);
}

.hero__icon {
    display: inline-block;
    font-size: 2.6rem;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero__title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 55, "WONK" 1;
    font-weight: 600;
    font-size: clamp(3rem, 11vw, 6.4rem);
    line-height: .94;
    color: var(--ink);
    letter-spacing: -.01em;
    margin-bottom: var(--space-sm);
    text-shadow: 0 1px 0 rgba(255,251,244,.8), 0 3px 6px rgba(67,41,27,.16);
}

.hero__title::first-letter {
    color: var(--clay-deep);
}

.hero__subtitle {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    color: var(--ink-light);
    letter-spacing: .02em;
    margin-top: 1rem;
    margin-bottom: var(--space-xl);
}

/* Theme Verse — rounded clay-relief scripture card with big quote glyph */
.hero__verse {
    max-width: 720px;
    margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--raise);
    position: relative;
}

.hero__verse::before {
    content: '\201C';
    font-family: var(--font-display);
    font-weight: 700;
    position: absolute;
    top: -.35em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4.2rem;
    color: var(--wheat);
    background: var(--paper);
    line-height: 1;
    padding: 0 .15em;
    text-shadow: 0 2px 4px rgba(67,41,27,.18);
}

.hero__verse::after { content: none; }

.hero__verse blockquote {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: var(--soft);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.15rem, 2.6vw, 1.42rem);
    line-height: 1.6;
    color: var(--ink);
}

.hero__verse cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--clay-deep);
}

/* =========================================================
   NAVIGATION — sticky branded pebble bar
   ========================================================= */
.nav-scroll {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .65rem clamp(1rem, 4vw, 2.5rem);
    background: rgba(244,234,222,.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(120,66,38,.16);
    position: sticky;
    top: 0;
    z-index: 200;
}

.nav-scroll__btn {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .01em;
    min-height: var(--touch-min);
    padding: .46rem .9rem;
    background: var(--paper);
    border: none;
    border-radius: 999px;
    color: var(--cocoa-2);
    cursor: pointer;
    box-shadow: var(--raise-sm);
    transition: transform .14s ease, color .14s, box-shadow .14s, background .14s;
}

.nav-scroll__btn:hover,
.nav-scroll__btn:focus {
    transform: translateY(-1px);
    color: var(--clay-deep);
}

.nav-scroll__btn.active {
    background: var(--clay);
    color: #fdf3e7;
    box-shadow: var(--press), 0 0 0 1px rgba(142,74,45,.4);
}

/* =========================================================
   CONTENT SECTIONS
   ========================================================= */
.section {
    padding: clamp(2rem, 5vw, 4rem) 0;
    border-bottom: 1px solid rgba(120,66,38,.14);
    /* Visible by default. A page's scroll-reveal script may opt in via .reveal;
       never gate base visibility on JS, or pages without that script render blank. */
    opacity: 1;
}

.section.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.section__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(1.8rem, 4vw, 2.6rem);
}

.section__icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: var(--space-sm);
}

.section__title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 1;
    font-weight: 600;
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.05;
    color: var(--ink);
    position: relative;
    display: inline-block;
}

.section__title::after {
    content: '';
    display: block;
    margin: .7rem auto 0;
    width: 78px;
    height: 7px;
    border-radius: 7px;
    background: var(--gold-shine);
    box-shadow: var(--raise-sm);
}

/* =========================================================
   INFO BOXES — clay-relief tile
   ========================================================= */
.info-box {
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--raise);
    padding: clamp(1.3rem, 3.4vw, 2rem);
    margin-bottom: var(--space-xl);
    position: relative;
}

.info-box::before {
    content: '✦';
    position: absolute;
    top: -14px;
    left: clamp(1.3rem, 3.4vw, 2rem);
    background: var(--clay);
    color: #fdf3e7;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    box-shadow: var(--raise-sm);
    font-size: 1rem;
}

.info-box h4 {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-md);
    font-size: 1.3rem;
}

.info-box p { color: var(--ink-light); line-height: 1.8; }

.info-box ul {
    margin-top: var(--space-md);
    padding-left: var(--space-xl);
}

.info-box li {
    margin-bottom: var(--space-sm);
    color: var(--ink-light);
}

/* =========================================================
   TIMELINE — clay path
   ========================================================= */
.timeline {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 8px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: repeating-linear-gradient(180deg, var(--clay) 0 16px, var(--clay-soft) 16px 30px);
    box-shadow: var(--raise-sm);
}

.timeline__event {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}

.timeline__event:nth-child(even) { flex-direction: row-reverse; }

.timeline__marker {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    background: var(--paper);
    border: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    z-index: 2;
    box-shadow: var(--raise);
    transition: transform 0.25s ease;
}

.timeline__event:hover .timeline__marker { transform: translateX(-50%) scale(1.08); }

.timeline__content {
    width: calc(50% - 56px);
    padding: clamp(1.1rem, 2.8vw, 1.6rem);
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    position: relative;
    box-shadow: var(--raise);
    transition: transform 0.25s ease;
}

.timeline__content:hover { transform: translateY(-3px); }

.timeline__event:nth-child(odd) .timeline__content { margin-right: auto; }
.timeline__event:nth-child(even) .timeline__content { margin-left: auto; }
.timeline__content::after { content: none; }

.timeline__year {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-bottom: var(--space-sm);
}

.timeline__title {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: var(--space-md);
}

.timeline__text { color: var(--ink-light); line-height: 1.8; }

/* =========================================================
   APOSTLE / PEOPLE CARDS — soft clay-relief
   ========================================================= */
.apostle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
    margin-bottom: var(--space-xl);
}

.apostle-card {
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--raise);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.apostle-card:hover { transform: translateY(-4px); }

.apostle-card.expanded {
    grid-column: 1 / -1;
    cursor: default;
}

.apostle-card__header {
    padding: 1.4rem 1.2rem;
    color: #fdf3e7;
    background: linear-gradient(160deg, var(--clay-soft), var(--clay-deep));
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--touch-min);
}

.apostle-card__icon {
    font-size: 2.2rem;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.apostle-card__name {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 55, "WONK" 1;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.1;
}

.apostle-card__meaning {
    font-size: 0.85rem;
    opacity: 0.92;
    font-style: italic;
    margin-top: var(--space-xs);
}

.apostle-card__body { padding: 1.2rem; }

.apostle-card__section { margin-bottom: var(--space-md); }
.apostle-card__section:last-child { margin-bottom: 0; }

.apostle-card__label {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.74rem;
    color: var(--clay-deep);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.apostle-card__text { color: var(--ink-light); line-height: 1.7; }

.apostle-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* =========================================================
   BADGES — pill chips with clay-relief
   ========================================================= */
.badge {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    padding: .28rem .7rem;
    border-radius: 999px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: var(--raise-sm);
}

.badge--fisherman { background: var(--night); }
.badge--inner    { background: var(--sage-deep); }
.badge--author   { background: var(--sage-deep); }
.badge--martyr   { background: var(--clay-deep); }
.badge--tax      { background: var(--cocoa-2); }
.badge--zealot   { background: var(--clay); }
.badge--betrayer { background: var(--night-deep); }
.badge--replaced { background: #9d7fb0; }

/* Expanded Content */
.apostle-card__expanded {
    display: none;
    padding: clamp(1.3rem, 3.4vw, 2rem);
    background: var(--paper-2);
    box-shadow: var(--press);
    border-top: 2px dashed var(--paper-3);
}

.apostle-card.expanded .apostle-card__expanded { display: block; }

.apostle-card__expanded h4 {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    color: var(--ink);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    font-size: 1.2rem;
}

.apostle-card__expanded h4:first-child { margin-top: 0; }

.apostle-card__expanded p {
    color: var(--ink-light);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.apostle-card__expanded ul {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

.apostle-card__expanded li {
    color: var(--ink-light);
    margin-bottom: var(--space-sm);
}

/* =========================================================
   SCRIPTURE QUOTE (in-card) — pressed clay well
   ========================================================= */
.scripture-quote {
    background: var(--paper-2);
    border: none;
    border-left: 5px solid var(--clay);
    padding: var(--space-lg);
    margin: var(--space-md) 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: var(--soft);
    border-radius: var(--r-sm);
    box-shadow: var(--press);
    position: relative;
}

.scripture-quote::before {
    content: '\201C';
    position: absolute;
    left: var(--space-md);
    top: .1em;
    font-size: 3rem;
    color: var(--wheat);
    font-family: var(--font-display);
    line-height: 1;
    opacity: 0.7;
}

.scripture-quote__text {
    color: var(--ink);
    line-height: 1.9;
    padding-left: var(--space-lg);
}

.scripture-quote__ref {
    display: block;
    text-align: right;
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--clay-deep);
    margin-top: var(--space-md);
}

/* =========================================================
   SCRIPTURE CARDS
   ========================================================= */
.scripture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.4rem;
    margin-bottom: var(--space-xl);
}

.scripture-card {
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--raise);
    transition: transform 0.25s ease;
}

.scripture-card:hover { transform: translateY(-4px); }

.scripture-card__header {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    font-size: 1.15rem;
    padding: 1.2rem 1.3rem;
    background: linear-gradient(160deg, var(--clay-soft), var(--clay-deep));
    color: #fdf3e7;
    letter-spacing: 0.02em;
}

.scripture-card__body { padding: 1.3rem; }

.scripture-card__text {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: var(--soft);
    line-height: 1.9;
    color: var(--ink);
    margin-bottom: var(--space-md);
    position: relative;
    padding-left: var(--space-lg);
}

.scripture-card__text::before {
    content: '\201C';
    position: absolute;
    left: 0;
    top: -10px;
    font-size: 3rem;
    color: var(--wheat);
    font-family: var(--font-display);
    line-height: 1;
}

.scripture-card__ref {
    text-align: right;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--clay-deep);
}

/* =========================================================
   COMPARISON TABLE
   ========================================================= */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-xl);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--raise);
    background: var(--paper);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.comparison-table th {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    padding: var(--space-lg);
    text-align: left;
    background: linear-gradient(160deg, var(--clay-soft), var(--clay-deep));
    color: #fdf3e7;
    border-bottom: 2px solid var(--clay-deep);
}

.comparison-table td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px dashed var(--paper-3);
    color: var(--ink-light);
}

.comparison-table tr:nth-child(even) { background: rgba(231,212,186,.35); }

.comparison-table tr:hover { background: rgba(224,162,74,.12); }

.comparison-table tr:last-child td { border-bottom: none; }

.comparison-table strong { color: var(--ink); }

/* =========================================================
   MARTYRDOM GRID
   ========================================================= */
.martyrdom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.martyrdom-card {
    background: var(--paper);
    border: none;
    border-left: 5px solid var(--clay);
    border-radius: var(--r-md);
    box-shadow: var(--raise-sm);
    padding: var(--space-lg);
    transition: transform 0.25s ease;
}

.martyrdom-card:hover { transform: translateY(-3px); }

.martyrdom-card__name {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: var(--space-sm);
}

.martyrdom-card__location {
    color: var(--night);
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.martyrdom-card__method {
    color: var(--ink-light);
    font-style: italic;
    line-height: 1.6;
}

/* =========================================================
   QUIZ — clay cards + clay option states
   ========================================================= */
.quiz {
    background: var(--paper);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--raise);
    padding: clamp(1.6rem, 4vw, 2.6rem);
    max-width: 680px;
    margin: 0 auto;
}

.quiz__header {
    text-align: center;
    padding-bottom: var(--space-lg);
    border-bottom: 1px dashed var(--paper-3);
    margin-bottom: var(--space-xl);
}

.quiz__header h2 {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-sm);
}

.quiz__progress {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.quiz__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--paper-2);
    box-shadow: var(--press);
    transition: all 0.3s ease;
}

.quiz__dot--current {
    background: var(--clay);
    transform: scale(1.3);
    box-shadow: var(--raise-sm);
}

.quiz__dot--correct { background: var(--sage-deep); }
.quiz__dot--incorrect { background: var(--clay-deep); }

.quiz__question-num {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink-faded);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.quiz__question-text {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-weight: 600;
    font-size: 1.4rem;
    text-align: center;
    color: var(--ink);
    margin-bottom: var(--space-xl);
    line-height: 1.4;
}

.quiz__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.quiz__option {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    min-height: var(--touch-min);
    padding: .95rem 1.1rem;
    background: var(--paper);
    border: none;
    border-radius: var(--r-md);
    box-shadow: var(--raise-sm);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.14s, background 0.14s, color 0.14s;
    text-align: left;
}

.quiz__option:hover:not(:disabled),
.quiz__option:focus {
    transform: translateY(-1px);
}

.quiz__option:active { box-shadow: var(--press); }

.quiz__option--correct {
    background: linear-gradient(160deg, #aebb86, var(--sage-deep)) !important;
    color: #fff !important;
    box-shadow: var(--press) !important;
}

.quiz__option--incorrect {
    background: linear-gradient(160deg, var(--clay-soft), var(--clay-deep)) !important;
    color: #fff !important;
    box-shadow: var(--press) !important;
}

.quiz__option:disabled { cursor: not-allowed; }

.quiz__feedback {
    display: none;
    padding: 1rem 1.1rem;
    border-radius: var(--r-md);
    margin-bottom: var(--space-lg);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
}

.quiz__feedback--visible { display: block; }

.quiz__feedback--correct {
    background: rgba(132,147,95,.16);
    color: var(--sage-deep);
    box-shadow: var(--press);
}

.quiz__feedback--incorrect {
    background: rgba(176,96,60,.14);
    color: var(--clay-deep);
    box-shadow: var(--press);
}

.quiz__controls { text-align: center; }

.quiz__btn {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .02em;
    min-height: var(--touch-min);
    padding: .8rem 1.5rem;
    background: var(--clay);
    border: none;
    border-radius: 999px;
    color: #fdf3e7;
    cursor: pointer;
    box-shadow: var(--raise-sm);
    transition: transform 0.12s ease, box-shadow 0.14s, opacity 0.14s;
}

.quiz__btn:hover:not(:disabled),
.quiz__btn:focus { transform: translateY(-1px); }

.quiz__btn:active:not(:disabled) { box-shadow: var(--press); }

.quiz__btn:disabled { opacity: 0.45; cursor: not-allowed; }

.quiz__result {
    text-align: center;
    padding: var(--space-2xl) 0;
}

.quiz__score {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 55, "WONK" 1;
    font-weight: 700;
    font-size: 4.4rem;
    line-height: 1;
    color: var(--clay);
    margin-bottom: var(--space-md);
}

.quiz__message {
    font-family: var(--font-display);
    font-variation-settings: var(--soft);
    font-size: 1.2rem;
    color: var(--ink-light);
    margin-bottom: var(--space-xl);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    text-align: center;
    padding: clamp(2.4rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
    background: transparent;
    border-top: 1px solid rgba(120,66,38,.16);
}

.footer__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: .9rem;
    color: var(--clay-deep);
    text-decoration: none;
    background: var(--paper);
    padding: .7rem 1.3rem;
    border: none;
    border-radius: 999px;
    box-shadow: var(--raise-sm);
    min-height: var(--touch-min);
    transition: transform 0.14s ease;
}

.footer__back:hover,
.footer__back:focus { transform: translateY(-1px); }

.footer__credit {
    margin-top: 1.2rem;
    font-size: 0.85rem;
    color: var(--ink-faded);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .timeline::before { left: 32px; }

    .timeline__event,
    .timeline__event:nth-child(even) {
        flex-direction: row;
        align-items: flex-start;
    }

    .timeline__content,
    .timeline__event:nth-child(odd) .timeline__content,
    .timeline__event:nth-child(even) .timeline__content {
        width: calc(100% - 80px);
        margin: 0 0 0 70px !important;
    }

    .timeline__marker {
        left: 32px;
        width: 54px;
        height: 54px;
        font-size: 1.4rem;
    }

    .timeline__content::after { display: none; }

    .apostle-grid { grid-template-columns: 1fr; }
    .scripture-grid { grid-template-columns: 1fr; }
    .martyrdom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .page-frame { padding: var(--space-md); }
    .hero { padding: var(--space-xl) var(--space-md); }
    .hero__title { font-size: clamp(2.4rem, 12vw, 3.4rem); }

    .nav-scroll__btn {
        font-size: 0.78rem;
        padding: .42rem .8rem;
    }

    .apostle-card__icon {
        width: 52px;
        height: 52px;
        font-size: 1.9rem;
    }

    .comparison-table { font-size: 0.9rem; }

    .comparison-table th,
    .comparison-table td { padding: var(--space-sm) var(--space-md); }
}

/* =========================================================
   SCROLL ANIMATIONS
   ========================================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll { opacity: 0; }

.animate-on-scroll.animated { animation: fadeInUp 0.6s ease forwards; }

/* =========================================================
   COMPREHENSIVE MOBILE FIX — NO HORIZONTAL SCROLL
   Target: 375px viewport with ZERO overflow
   ========================================================= */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    *, *::before, *::after {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .page-frame {
        padding: var(--space-md) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero {
        padding: var(--space-xl) var(--space-sm) !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero__verse {
        padding: var(--space-md) !important;
        width: calc(100% - 16px) !important;
    }

    .nav-scroll {
        padding: var(--space-sm) !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .nav-scroll__btn {
        font-size: 0.75rem !important;
        padding: .42rem .7rem !important;
        min-width: auto !important;
        flex: 0 1 auto !important;
    }

    .section {
        padding: var(--space-xl) 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ===== TIMELINE FIXES ===== */
    .timeline {
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--space-lg) 0 !important;
    }

    .timeline::before { display: none !important; }

    .timeline__event {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: var(--space-lg) !important;
    }

    .timeline__marker {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto var(--space-md) auto !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.8rem !important;
    }

    .timeline__content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: var(--space-md) !important;
    }

    .timeline__content::after { display: none !important; }

    /* ===== GRID FIXES — Force single column ===== */
    .apostle-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .apostle-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-md) !important;
        display: block !important;
    }

    .apostle-card.expanded { grid-column: auto !important; }

    .apostle-card__header { padding: var(--space-md) !important; }
    .apostle-card__body { padding: var(--space-md) !important; }
    .apostle-card__expanded { padding: var(--space-md) !important; }

    .scripture-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .scripture-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-md) !important;
    }

    .martyrdom-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .martyrdom-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--space-md) !important;
    }

    /* ===== TABLE FIXES — Full responsive ===== */
    .table-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: var(--space-md) !important;
    }

    .comparison-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        font-size: 0.7rem !important;
        min-width: 100% !important;
    }

    .comparison-table thead { display: block !important; width: 100% !important; }
    .comparison-table tbody { display: block !important; width: 100% !important; }

    .comparison-table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: var(--space-sm) !important;
        border: 1px solid var(--paper-3) !important;
        border-radius: var(--r-sm) !important;
    }

    .comparison-table th,
    .comparison-table td {
        display: block !important;
        width: 100% !important;
        padding: var(--space-xs) var(--space-sm) !important;
        text-align: left !important;
        border: none !important;
    }

    .comparison-table th {
        background: var(--clay-deep) !important;
        font-size: 0.7rem !important;
    }

    /* ===== INFO BOX FIXES ===== */
    .info-box {
        padding: var(--space-md) !important;
        width: 100% !important;
        margin-bottom: var(--space-md) !important;
    }

    .info-box ul { padding-left: var(--space-md) !important; }

    /* ===== SCRIPTURE QUOTE FIXES ===== */
    .scripture-quote {
        padding: var(--space-md) !important;
        margin: var(--space-sm) 0 !important;
    }

    .scripture-quote__text {
        padding-left: var(--space-md) !important;
        font-size: 0.95rem !important;
    }

    /* ===== QUIZ FIXES ===== */
    .quiz {
        padding: var(--space-lg) var(--space-sm) !important;
        width: 100% !important;
    }

    .quiz__question-text {
        font-size: 1.2rem !important;
        padding: 0 var(--space-xs) !important;
    }

    .quiz__option {
        padding: var(--space-md) !important;
        font-size: 0.95rem !important;
    }

    .quiz__btn {
        width: 100% !important;
        padding: var(--space-md) !important;
    }

    /* ===== FOOTER FIXES ===== */
    .footer { padding: var(--space-lg) var(--space-sm) !important; }

    .footer__back {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
        padding: var(--space-md) !important;
    }

    /* ===== BADGE FIXES ===== */
    .apostle-card__badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: var(--space-xs) !important;
    }

    .badge {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }
}

/* =========================================================
   UNIVERSAL TOPIC PAGE ENHANCEMENT (kept, re-themed to clay)
   ========================================================= */

/* Scroll progress bar */
.tp-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(67,41,27,0.08); z-index: 999; }
.tp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--wheat), var(--clay)); width: 0%; transition: width 0.1s linear; }

/* Section entrance animations */
.content-section, .topic-section {
    animation: tpRise 0.45s ease both;
}
@keyframes tpRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Card hover effects */
.card, .topic-card, .item-card, .info-card, .fact-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.card:hover, .topic-card:hover, .item-card:hover, .info-card:hover, .fact-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--raise) !important;
}

/* Verse/scripture hover */
blockquote, .verse, .scripture-text, .quote-block {
    transition: all 0.3s ease;
    border-radius: var(--r-sm);
}
blockquote:hover, .verse:hover, .scripture-text:hover, .quote-block:hover {
    background: rgba(224,162,74,0.10) !important;
    transform: translateX(4px);
}

/* Table row hover */
table tr { transition: background 0.2s ease; }
table tr:hover { background: rgba(224,162,74,0.10) !important; }

/* Button shine */
a.btn, .btn, button.action-btn {
    position: relative; overflow: hidden;
    transition: all 0.3s ease !important;
}
a.btn::after, .btn::after {
    content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
    background: rgba(255,255,255,0.18); transform: rotate(30deg);
    transition: left 0.4s ease;
}
a.btn:hover::after, .btn:hover::after { left: 110%; }

/* Heading icon injection */
h2.tp-enhanced, h3.tp-enhanced {
    display: flex; align-items: center; gap: 0.6rem;
}
h2.tp-enhanced i, h3.tp-enhanced i { color: var(--wheat); font-size: 0.85em; }

/* Confetti */
.tp-confetti-box { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.tp-confetti-piece { position: absolute; width: 8px; height: 8px; top: -16px; animation: tpFall 3s linear forwards; }
@keyframes tpFall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* Toast */
.tp-toast {
    position: fixed; bottom: 2rem; right: 2rem;
    background: linear-gradient(135deg, var(--cocoa), #2f2018); color: #fdf3e7;
    border-radius: 14px; padding: 1rem 1.5rem;
    display: flex; align-items: center; gap: 0.75rem;
    transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 100; box-shadow: 0 8px 32px rgba(67,41,27,0.35);
    border-left: 4px solid var(--wheat);
    font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
    max-width: 300px;
}
.tp-toast.show { transform: translateX(0); }

/* Responsive (kept) */
@media (max-width: 768px) {
    .card, .topic-card, .item-card, .info-card { padding: 1rem !important; }
    table { font-size: 0.9rem; }
}
@media (max-width: 480px) {
    h1 { font-size: 1.7rem !important; } h2 { font-size: 1.35rem !important; }
    .container { padding: 1rem !important; }
    table { font-size: 0.85rem; }
}
@media (max-width: 375px) {
    h1 { font-size: 1.5rem !important; }
    body { font-size: 0.95rem; }
}
@media (hover: none) and (pointer: coarse) {
    a, button { min-height: 44px; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .nav-scroll__btn:hover,
    .apostle-card:hover,
    .scripture-card:hover,
    .martyrdom-card:hover,
    .timeline__event:hover .timeline__marker,
    .timeline__content:hover,
    .quiz__option:hover,
    .quiz__btn:hover { transform: none !important; }
}