/* =====================================================================
   History / Central Figures pages — shared elevated design
   Each page sets its own palette via --h-* variables in a tiny inline
   <style> block. All layout, rhythm and ornamentation live here.
   ===================================================================== */

body { background: #fdfbf8; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.page-header {
    position: relative;
    padding: clamp(96px, 15vh, 140px) 0 clamp(88px, 13vh, 120px);
    background:
        radial-gradient(ellipse 70% 60% at 50% -10%, var(--h-glow, rgba(111,78,55,.14)), transparent 70%),
        linear-gradient(180deg, #fffdfa 0%, var(--h-bg, #faf7f2) 100%);
    text-align: center;
    overflow: hidden;
}

.page-header .container { position: relative; z-index: 2; }

.h-eyebrow {
    margin-bottom: 1.4rem;
}
.h-eyebrow a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--h-accent, #6F4E37);
    text-decoration: none;
    opacity: .85;
    transition: opacity .25s ease, letter-spacing .25s ease;
}
.h-eyebrow a:hover { opacity: 1; letter-spacing: .32em; }
.h-eyebrow a::before,
.h-eyebrow a::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--h-accent-soft, #b89a6a);
    opacity: .7;
}

.page-header h1 {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    letter-spacing: -.01em;
    color: #2e2418;
    margin-bottom: 1.1rem;
}

.page-header .lead {
    font-family: 'Lora', serif;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-style: italic;
    color: #5c5347;
    max-width: 640px;
    margin: 0 auto 1.6rem;
    line-height: 1.7;
}

.page-quote {
    max-width: 680px;
    margin: 0 auto;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--h-accent, #6F4E37);
    padding: 1.3rem 2rem 0;
    border-top: 1px solid var(--h-accent-soft, #b89a6a);
    position: relative;
}
.page-quote::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: var(--h-accent-soft, #b89a6a);
}

/* ── Ornamental divider ───────────────────────────────────────────── */
.h-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 2.4rem;
}
.h-ornament::before,
.h-ornament::after {
    content: '';
    height: 1px;
    width: clamp(48px, 9vw, 120px);
}
.h-ornament::before { background: linear-gradient(90deg, transparent, var(--h-accent-soft, #b89a6a)); }
.h-ornament::after  { background: linear-gradient(270deg, transparent, var(--h-accent-soft, #b89a6a)); }
.h-ornament i {
    position: relative;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border: 1.5px solid var(--h-accent, #6F4E37);
    flex: 0 0 auto;
}
.h-ornament i::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--h-accent-soft, #b89a6a);
}

/* ── Intro ────────────────────────────────────────────────────────── */
.history-intro {
    font-family: 'Lora', serif;
    font-size: clamp(1.15rem, 1.6vw, 1.3rem);
    color: #4a3b2c;
    line-height: 1.95;
    text-align: justify;
}
.history-intro::first-letter {
    font-size: 3.1em;
    float: left;
    line-height: .82;
    padding: .06em .14em 0 0;
    font-weight: 600;
    color: var(--h-accent, #6F4E37);
}

/* ── Narrative sections ───────────────────────────────────────────── */
.history-section { padding: 4.2rem 0; position: relative; }
.history-section:nth-of-type(even) { background: var(--h-bg, #faf7f2); }
.history-section:nth-of-type(even)::before,
.history-section:nth-of-type(even)::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--h-accent-soft, #b89a6a), transparent);
    opacity: .35;
}
.history-section:nth-of-type(even)::before { top: 0; }
.history-section:nth-of-type(even)::after  { bottom: 0; }

.history-heading {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    color: var(--h-accent, #6F4E37);
    margin-bottom: 1.4rem;
    display: flex;
    align-items: baseline;
    gap: .65rem;
}
.history-heading::before {
    content: '';
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    transform: rotate(45deg) translateY(-1px);
    background: var(--h-accent-soft, #b89a6a);
}

.history-section p {
    font-size: 1.06rem;
    line-height: 1.9;
    color: #46403a;
    text-align: justify;
}
.history-section p:last-child { margin-bottom: 0; }

/* ── Figures ──────────────────────────────────────────────────────── */
.history-figure {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--h-fig1, #efe6d8), var(--h-fig2, #e2d2ba));
    box-shadow: 0 18px 44px rgba(30, 22, 14, .12), 0 2px 8px rgba(30,22,14,.06);
    border: 1px solid rgba(255,255,255,.6);
    position: relative;
    transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.history-figure:hover { transform: translateY(-5px); box-shadow: 0 26px 56px rgba(30,22,14,.16); }

.history-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 280px;
}

.history-figure .fig-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    height: 100%;
    color: var(--h-ph, #a98d64);
    flex-direction: column;
    gap: .6rem;
    text-align: center;
    padding: 1.5rem;
    font-family: 'Lora', serif;
    font-style: italic;
}
.history-figure .fig-placeholder i { font-size: 2.8rem; opacity: .5; }

.history-figure figcaption {
    background: linear-gradient(180deg, transparent 0%, var(--h-cap-bg, rgba(60,42,25,.88)) 45%);
    color: var(--h-cap-tx, #f4ead8);
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: .92rem;
    line-height: 1.55;
    padding: 2.6rem 1.4rem 1rem;
    position: absolute;
    bottom: 0; left: 0; right: 0;
}

/* ── Timeline ─────────────────────────────────────────────────────── */
.timeline-strip { overflow-x: auto; padding: 1rem 0 1.2rem; scrollbar-width: thin; }
.timeline-track { display: flex; gap: 1.1rem; min-width: max-content; padding: 0 .25rem; }
.tl-item {
    min-width: 180px;
    max-width: 210px;
    background: #fff;
    border: 1px solid var(--h-tl-border, #e5d9c5);
    border-radius: 14px;
    padding: 1.1rem 1rem 1rem;
    box-shadow: 0 6px 18px rgba(30,22,14,.05);
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.tl-item::before {
    content: '';
    position: absolute;
    top: 0; left: 16%; right: 16%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--h-tl-top, #8B6B42);
}
.tl-item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30,22,14,.1); }
.tl-year {
    font-family: 'Lora', serif;
    font-weight: 600;
    color: var(--h-year, #6F4E37);
    font-size: 1.15rem;
    margin-bottom: .3rem;
}
.tl-text { font-size: .86rem; color: #5c5347; line-height: 1.55; }

@media (max-width: 767.98px) {
    .history-section { padding: 3rem 0; }
    .history-intro::first-letter { font-size: 2.6em; }
}

/* ===================================================================
   Long-form article layout (editorial, not card-grid)
   Used by all history/figure pages.
   =================================================================== */

.hf-article { padding: 1rem 0 0; }

.hf-col { max-width: 46rem; margin: 0 auto; }
.hf-col::after { content: ''; display: block; clear: both; }

.hf-sec { padding: 2.6rem 0; }
.hf-sec + .hf-sec { border-top: 1px solid var(--h-tl-border, #e5d9c5); }

.hf-h {
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: clamp(1.45rem, 2.2vw, 1.75rem);
    color: var(--h-accent, #6F4E37);
    margin-bottom: 1.3rem;
    padding-left: 1.1rem;
    position: relative;
}
.hf-h::before {
    content: '';
    position: absolute;
    left: 0;
    top: .3em;
    bottom: .3em;
    width: 3px;
    border-radius: 3px;
    background: var(--h-accent-soft, #b89a6a);
}

.hf-sec p {
    font-size: 1.04rem;
    line-height: 1.92;
    color: #46403a;
    text-align: justify;
    margin-bottom: 1.15rem;
}
.hf-sec p:last-child { margin-bottom: 0; }

/* Figures woven into the prose */
.hf-fig { margin: 0 0 1.4rem; }
.hf-fig img {
    width: 100%;
    display: block;
    border-radius: 6px;
    min-height: 0;
}
.hf-fig figcaption {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: .84rem;
    line-height: 1.55;
    color: #8a8178;
    margin-top: .55rem;
    padding-left: .65rem;
    border-left: 2px solid var(--h-accent-soft, #b89a6a);
}
.hf-fig .fig-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    padding: 1rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--h-fig1, #efe6d8), var(--h-fig2, #e2d2ba));
    color: var(--h-ph, #a98d64);
    font-family: 'Lora', serif;
    font-style: italic;
}
.hf-fig .fig-placeholder i { font-size: 2.2rem; opacity: .5; }

/* Side-floated figures — text wraps around them like a magazine */
.fig-float { width: min(46%, 320px); }
.fig-right { float: right; margin: .3rem 0 1.3rem 1.8rem; }
.fig-left  { float: left;  margin: .3rem 1.8rem 1.3rem 0; }

/* Wide figures span the reading column */
.fig-wide img { max-height: 420px; object-fit: cover; }
.fig-wide .fig-placeholder { min-height: 320px; }

/* Vertical timeline — hairline rail with dots */
.hf-tl-sec { background: var(--h-bg, #faf7f2); }
.hf-tl {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .2rem;
    border-left: 2px solid var(--h-tl-border, #e5d9c5);
    margin-left: .35rem;
}
.htl-item { position: relative; padding: .55rem 0 .55rem 1.7rem; }
.htl-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 1.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--h-tl-top, #8B6B42);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--h-tl-border, #e5d9c5);
}
.htl-item:first-child::before { box-shadow: 0 0 0 3px var(--h-tl-top, #8B6B42); }
.htl-year {
    display: block;
    font-family: 'Lora', serif;
    font-weight: 600;
    color: var(--h-year, #6F4E37);
    font-size: 1.1rem;
}
.htl-text { font-size: .92rem; color: #5c5347; line-height: 1.55; }

@media (max-width: 767.98px) {
    .fig-float { float: none; width: 100%; margin: 0 0 1.3rem; }
    .hf-sec { padding: 2.2rem 0; }
}