/* =====================================================================
   economic.wiki  —  stylesheet
   A digitised mid-twentieth-century economics treatise.
   Palette is high-contrast and deliberately restrained.
   No gradients. No transparency. No box-shadows.
   ===================================================================== */

:root {
    /* palette */
    --c-text-near-black: #0A0A0A;
    --c-text-soft-black: #1A1A1A;
    --c-text-warm-gray:  #555555;
    --c-text-medium-gray:#777777;
    --c-text-caption:    #444444;
    --c-text-ink-gray:   #333333;
    --c-text-faded:      #999999;
    --c-rule-silver:     #C0C0C0;
    --c-bg-ivory:        #F5F0E6;
    --c-bg-charcoal:     #1B1B1B;
    --c-accent:          #8B2500;
    --c-accent-hover:    #6B1D00;

    /* type */
    --f-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
    --f-body:    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --f-margin:  "IBM Plex Sans", "Inter", system-ui, -apple-system, sans-serif;
    --f-mono:    "IBM Plex Mono", "Space Mono", ui-monospace, Menlo, monospace;

    /* rhythm */
    --baseline: 1.5rem;

    /* timing */
    --ease-scholar: cubic-bezier(0.25, 0.10, 0.25, 1.00);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg-ivory);
    color: var(--c-text-soft-black);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

body {
    overflow-x: hidden;
}

main#treatise {
    scroll-snap-type: y proximity;
}

/* ---------- typographic primitives ---------- */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    color: var(--c-text-near-black);
    margin: 0 0 var(--baseline) 0;
}

p { margin: 0 0 var(--baseline) 0; }

em { font-style: italic; }
strong { font-weight: 600; }

a {
    color: var(--c-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--c-accent);
    transition: color 240ms var(--ease-scholar), border-color 240ms var(--ease-scholar);
}
a:hover { color: var(--c-accent-hover); border-bottom-color: var(--c-accent-hover); }

.smallcaps {
    font-family: var(--f-margin);
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 0.75rem;
    letter-spacing: 0.10em;
    color: var(--c-text-ink-gray);
    font-weight: 500;
}

.folio {
    font-family: var(--f-margin);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--c-text-warm-gray);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.folio-bottom { margin: 1.25rem 0 0 0; }

/* ---------- horizontal rules (drawn in) ---------- */
hr.rule {
    border: 0;
    height: 1px;
    background: var(--c-rule-silver);
    width: 100%;
    margin: var(--baseline) 0;
    transform-origin: left center;
    transform: scaleX(1);
}

hr.rule[data-animate="rule"] {
    transform: scaleX(0);
    transition: transform 600ms var(--ease-scholar);
}
hr.rule[data-animate="rule"].is-revealed { transform: scaleX(1); }

hr.rule-light { background: rgba(245, 240, 230, 0.35); }

/* ---------- spread frame ---------- */
.spread {
    min-height: 100vh;
    width: 100vw;
    padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    scroll-snap-align: start;
    border-bottom: 1px solid var(--c-rule-silver);
}

.spread:last-child { border-bottom: 0; }

/* =====================================================================
   SPREAD 1 — THESIS
   ===================================================================== */
.spread-thesis {
    background: var(--c-bg-ivory);
    justify-content: flex-start;
}

.thesis-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.thesis-header { margin-bottom: 1.25rem; }

.title-h1 {
    font-family: var(--f-display);
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--c-text-near-black);
    margin: 0.25rem 0 1.25rem 0;
}

.thesis-subtitle {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.2vw, 1.875rem);
    line-height: 1.35;
    color: var(--c-text-soft-black);
    max-width: 56ch;
    margin: 0 0 var(--baseline) 0;
}

.thesis-twocol {
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 4rem);
    column-rule: 1px solid var(--c-rule-silver);
    margin: var(--baseline) 0;
}

.thesis-twocol p {
    font-family: var(--f-body);
    font-size: clamp(1rem, 1.05vw, 1.0625rem);
    line-height: 1.65;
    color: var(--c-text-soft-black);
    break-inside: avoid;
}

@media (max-width: 720px) {
    .thesis-twocol { column-count: 1; column-rule: 0; }
}

/* =====================================================================
   SPREAD 2 & 5 — ANALYTICAL (asymmetric two-column)
   ===================================================================== */
.spread-analytical {
    background: var(--c-bg-ivory);
}

.spread-head {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto var(--baseline) auto;
}

.analytical-grid {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 65fr) 1px minmax(0, 35fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.analytical-grid::before {
    content: "";
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 1px;
    background: var(--c-rule-silver);
    align-self: stretch;
    justify-self: center;
}

.primary-column {
    grid-column: 1 / 2;
    max-width: 640px;
}

.margin-column {
    grid-column: 3 / 4;
    max-width: 280px;
    padding-top: 0.25rem;
}

.section-h2 {
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--c-text-near-black);
    margin: 0 0 1.25rem 0;
}

.primary-column p {
    font-family: var(--f-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.005em;
    color: var(--c-text-soft-black);
}

/* drop cap */
.dropcap {
    font-family: var(--f-display);
    font-size: 4.5rem;
    font-weight: 600;
    line-height: 0.9;
    color: var(--c-text-near-black);
    float: left;
    margin: 0.35rem 0.75rem 0 0;
    padding: 0;
    transform: scale(0.8);
    opacity: 0;
    transition: transform 500ms var(--ease-scholar), opacity 500ms var(--ease-scholar);
    display: inline-block;
}
.is-revealed .dropcap { transform: scale(1); opacity: 1; }

/* footnote refs in primary column */
.footnote-ref {
    font-family: var(--f-margin);
    font-size: 0.6875rem;
    font-weight: 600;
    vertical-align: super;
    color: var(--c-accent);
    border-bottom: 0;
    padding: 0 0.1em;
}
.footnote-ref:hover { color: var(--c-accent-hover); }

/* margin column */
.margin-heading {
    font-family: var(--f-margin);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-text-medium-gray);
    margin: 0 0 1rem 0;
    font-weight: 600;
    border-bottom: 1px solid var(--c-rule-silver);
    padding-bottom: 0.5rem;
}

.margin-note {
    font-family: var(--f-margin);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-text-warm-gray);
    margin: 0 0 1.1rem 0;
    padding-left: 1.25rem;
    text-indent: -1.25rem;
}

.margin-mark {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--c-accent);
    margin-right: 0.4rem;
}

.margin-xref {
    border-top: 1px solid var(--c-rule-silver);
    padding-top: 0.85rem;
    margin-top: 1.25rem;
    color: var(--c-text-medium-gray);
    padding-left: 0;
    text-indent: 0;
}

@media (max-width: 860px) {
    .analytical-grid {
        grid-template-columns: 1fr;
    }
    .analytical-grid::before { display: none; }
    .primary-column, .margin-column {
        grid-column: 1 / -1;
        max-width: 100%;
    }
    .margin-column {
        margin-top: var(--baseline);
        padding-top: var(--baseline);
        border-top: 1px solid var(--c-rule-silver);
    }
}

/* =====================================================================
   SPREAD 3 — PROPOSITION (inverted)
   ===================================================================== */
.spread-proposition {
    background: var(--c-bg-charcoal);
    color: var(--c-bg-ivory);
    align-items: center;
    justify-content: center;
}

.proposition-inner {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
}

.proposition-tag {
    font-family: var(--f-margin);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--c-text-faded);
    margin: 0 0 1.5rem 0;
    font-weight: 500;
}

.proposition {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(2rem, 5vw, 4.5rem);
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--c-bg-ivory);
    margin: 2rem 0;
    padding: 0;
    quotes: none;
    text-wrap: balance;
}

.proposition[data-animate="reveal-up"] {
    transform: translateY(60px);
    opacity: 0;
    transition: transform 1000ms var(--ease-scholar), opacity 1000ms var(--ease-scholar);
}
.proposition[data-animate="reveal-up"].is-revealed { transform: translateY(0); opacity: 1; }

.proposition-cite {
    font-family: var(--f-margin);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--c-text-faded);
    margin: 1.25rem 0 0 0;
}

/* =====================================================================
   SPREAD 4 — DIAGRAM
   ===================================================================== */
.spread-diagram {
    background: var(--c-bg-ivory);
}

.diagram-head {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 1rem auto;
}

.diagram-figure {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--c-rule-silver);
    background: var(--c-bg-ivory);
}

.diagram-svg {
    width: 100%;
    height: auto;
    display: block;
}

.diagram-svg .axis {
    stroke: var(--c-text-ink-gray);
    stroke-width: 1.5;
    fill: none;
}
.diagram-svg .grid {
    stroke: var(--c-text-faded);
    stroke-width: 0.5;
    stroke-dasharray: 2 4;
    fill: none;
}
.diagram-svg .curve {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.diagram-svg .curve-demand { stroke: var(--c-text-ink-gray); }
.diagram-svg .curve-supply { stroke: var(--c-text-ink-gray); }

.diagram-svg .eq-point {
    fill: var(--c-accent);
    stroke: var(--c-accent);
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity 500ms var(--ease-scholar) 1500ms;
}
.diagram-svg.is-revealed .eq-point { opacity: 1; }

.diagram-svg .eq-guide {
    stroke: var(--c-accent);
    stroke-width: 0.75;
    stroke-dasharray: 3 3;
    opacity: 0;
    transition: opacity 500ms var(--ease-scholar) 1500ms;
}
.diagram-svg.is-revealed .eq-guide { opacity: 1; }

.diagram-svg .diagram-label {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    fill: var(--c-text-ink-gray);
}
.diagram-svg .diagram-label-accent { fill: var(--c-accent); font-weight: 600; }

.figure-caption {
    font-family: var(--f-margin);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.55;
    color: var(--c-text-caption);
    max-width: 680px;
    margin: 1.25rem auto 0 auto;
    text-align: left;
    padding: 0 1rem;
}

.fig-num {
    font-style: normal;
    font-weight: 600;
    color: var(--c-text-ink-gray);
    margin-right: 0.35rem;
}

/* =====================================================================
   SPREAD 6 — INDEX
   ===================================================================== */
.spread-index {
    background: var(--c-bg-ivory);
    justify-content: flex-start;
}

.index-title {
    font-style: italic;
    font-weight: 500;
    margin: 0 0 1rem 0;
    max-width: 1280px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.index-grid {
    max-width: 1280px;
    width: 100%;
    margin: var(--baseline) auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
}

.index-col {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--c-rule-silver);
}

.index-col li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--c-rule-silver);
    font-family: var(--f-margin);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-text-ink-gray);
}

.ix-term { color: var(--c-text-ink-gray); }
.ix-locator { color: var(--c-accent); font-weight: 500; }

@media (max-width: 720px) {
    .index-grid { grid-template-columns: 1fr; }
}

.colophon {
    max-width: 1280px;
    width: 100%;
    margin: var(--baseline) auto 0 auto;
}

.colophon-line {
    font-family: var(--f-margin);
    font-size: 0.8125rem;
    color: var(--c-text-warm-gray);
    line-height: 1.55;
    margin: 0 0 0.5rem 0;
}

.colophon-imprint {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--c-text-medium-gray);
    margin-top: 0.75rem;
}

/* =====================================================================
   GENERIC REVEAL ANIMATIONS
   ===================================================================== */
[data-animate="reveal-left"] {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 800ms var(--ease-scholar),
        transform 800ms var(--ease-scholar);
}
[data-animate="reveal-left"].is-revealed { opacity: 1; transform: translateX(0); }

[data-animate="reveal-right"] {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity 800ms var(--ease-scholar) 200ms,
        transform 800ms var(--ease-scholar) 200ms;
}
[data-animate="reveal-right"].is-revealed { opacity: 1; transform: translateX(0); }

[data-animate="reveal-up"] {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 700ms var(--ease-scholar),
        transform 700ms var(--ease-scholar);
}
[data-animate="reveal-up"].is-revealed { opacity: 1; transform: translateY(0); }

/* SVG path drawing */
.diagram-svg .curve[data-draw="curve"] {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1500ms var(--ease-scholar);
}
.diagram-svg.is-revealed .curve[data-draw="curve"] { stroke-dashoffset: 0; }

/* =====================================================================
   PROGRESS RULE — a thin reading line in burnt red
   ===================================================================== */
.progress-rule {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--c-accent);
    z-index: 1000;
    transition: width 120ms linear;
    pointer-events: none;
}