/* ============================================
   bable.pro v2 — A Probability Salon
   Single-column scholarly monograph
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background: #F5F0E8;
}

:root {
    --c-parchment: #F5F0E8;
    --c-cream: #EDE7DC;
    --c-dust:    #DDD5C8;
    --c-mist:    #B8BCC8;
    --c-stormlight: #7A8DA6;
    --c-twilight:   #4A6078;
    --c-slate:      #2C3E5A;

    --c-walnut: #2A2520;
    --c-umber:  #6B5E50;
    --c-sepia-dark: #3D2B1F;
    --c-sepia-line: #8B7355;
    --c-hairline:   #C2B8A3;

    --c-prussian: #1A5276;
    --c-gold:     #C0844A;

    --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-body:    "Spectral", "Cormorant Garamond", Georgia, serif;
    --font-margin:  "Alegreya Sans", "Inter", system-ui, sans-serif;

    --measure: 60ch;
    --margin-w: 220px;
    --rail-w: 2px;

    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.75;
    color: var(--c-walnut);
    background: var(--c-parchment);
    overflow-x: hidden;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p { hyphens: auto; }
em { font-style: italic; color: var(--c-prussian); }

/* ============================================
   PROGRESS RAIL (left edge, fixed)
   ============================================ */
.progress-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rail-w);
    height: 100vh;
    background: var(--c-hairline);
    z-index: 100;
    cursor: pointer;
}

.progress-rail::before {
    content: "";
    position: absolute;
    inset: -16px -10px -16px -10px;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--c-prussian);
    transition: background 600ms ease;
}

.progress-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.progress-ticks span {
    position: absolute;
    left: 0;
    width: 8px;
    height: 1px;
    background: var(--c-umber);
    opacity: 0.5;
    transform: translateX(0);
}

/* ============================================
   INK STAIN LAYER (full-page, marginalia)
   ============================================ */
.ink-stain-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ink-stain {
    position: absolute;
    fill: var(--c-sepia-dark);
    opacity: 0;
    transition: opacity 1800ms var(--ease-out);
    will-change: opacity;
}

.ink-stain.is-visible {
    opacity: 1;
}

/* ============================================
   DOCUMENT (single column)
   ============================================ */
.document {
    position: relative;
    z-index: 1;
}

.section {
    position: relative;
    padding: 15vh 4vw 20vh;
    transition: background-color 1200ms ease;
    overflow: hidden;
}

/* Backgrounds across descent */
.section[data-bg="parchment"]  { background-color: var(--c-parchment); color: var(--c-walnut); }
.section[data-bg="cream"]      { background-color: var(--c-cream);     color: var(--c-walnut); }
.section[data-bg="cream-2"]    { background-color: var(--c-dust);      color: var(--c-walnut); }
.section[data-bg="dust"]       { background-color: var(--c-dust);      color: var(--c-walnut); }
.section[data-bg="dust-2"]     { background-color: var(--c-mist);      color: var(--c-walnut); }
.section[data-bg="slate-mid"]  { background-color: var(--c-stormlight); color: var(--c-parchment); }
.section[data-bg="slate"]      { background-color: var(--c-twilight);   color: var(--c-parchment); }
.section[data-bg="slate-deep"] { background-color: var(--c-slate);      color: var(--c-parchment); }

/* In darker sections, italic accent reverts to gold */
.section[data-bg="slate-mid"] em,
.section[data-bg="slate"] em,
.section[data-bg="slate-deep"] em { color: var(--c-gold); }

/* ============================================
   OPENING SECTION
   ============================================ */
.section--opening {
    height: 100vh;
    min-height: 720px;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    scroll-snap-align: start;
}

.opening-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.opening-mast {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    width: 100%;
    padding: 28vh 0 0 8vw;
    pointer-events: none;
}

.logotype {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(80px, 14vw, 200px);
    line-height: 1.0;
    letter-spacing: 0.08em;
    color: var(--c-walnut);
    margin: 0;
}

.logotype-main {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}

.logotype.is-revealed .logotype-main {
    opacity: 1;
    transform: translateY(0);
}

.logotype-sub {
    margin-top: 1.4rem;
    font-family: var(--font-margin);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--c-umber);
    min-height: 1.2em;
}

.typewriter::after {
    content: "▌";
    color: var(--c-prussian);
    margin-left: 2px;
    animation: blink 1s steps(2, start) infinite;
}

.typewriter.is-done::after { display: none; }

@keyframes blink {
    to { visibility: hidden; }
}

.scroll-cue {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 1500ms ease 4500ms;
    pointer-events: none;
}

.section--opening.is-revealed .scroll-cue { opacity: 1; }

.scroll-cue-line {
    width: 1px;
    height: 50px;
    background: var(--c-umber);
    animation: scroll-glide 2.4s ease-in-out infinite;
    transform-origin: top;
}

.scroll-cue-label {
    font-family: var(--font-margin);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-umber);
}

@keyframes scroll-glide {
    0%   { transform: scaleY(0.2); opacity: 0; transform-origin: top; }
    50%  { transform: scaleY(1);   opacity: 1; transform-origin: top; }
    51%  { transform: scaleY(1);   opacity: 1; transform-origin: bottom; }
    100% { transform: scaleY(0.2); opacity: 0; transform-origin: bottom; }
}

/* ============================================
   DIVIDERS (probability distributions as SVG curves)
   ============================================ */
.divider {
    position: relative;
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background-color 1200ms ease;
}

.divider-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.divider-path {
    fill: none;
    stroke: var(--c-sepia-line);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2000ms ease;
}

.divider.is-revealed .divider-path {
    stroke-dashoffset: 0;
}

.divider--inverted .divider-path { stroke: var(--c-mist); }

.divider-label {
    position: absolute;
    bottom: 20px;
    right: 6vw;
    font-family: var(--font-margin);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-umber);
    font-style: italic;
    opacity: 0;
    transition: opacity 1200ms ease 800ms;
}

.section[data-bg="slate-mid"] + .divider .divider-label,
.section[data-bg="slate"] + .divider .divider-label,
.section[data-bg="slate-deep"] + .divider .divider-label {
    color: var(--c-mist);
}

.divider.is-revealed .divider-label { opacity: 1; }

/* ============================================
   THESIS SECTIONS (text columns + marginalia)
   ============================================ */
.thesis-shell {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}

@media (min-width: 1200px) {
    .thesis-shell {
        grid-template-columns: minmax(0, 60ch) var(--margin-w);
        gap: 4rem;
        padding-left: 12vw;
    }
}

.thesis-column {
    max-width: 60ch;
}

.thesis-column p + p {
    margin-top: 1.4em;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.1;
    letter-spacing: 0.04em;
    margin-bottom: 1em;
    color: inherit;
}

.dropcap {
    position: relative;
}

.dropcap-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 4.6em;
    line-height: 0.85;
    float: left;
    margin: 0.04em 0.12em -0.05em 0;
    color: var(--c-prussian);
    letter-spacing: 0;
}

.section[data-bg="slate-mid"] .dropcap-letter,
.section[data-bg="slate"] .dropcap-letter,
.section[data-bg="slate-deep"] .dropcap-letter { color: var(--c-gold); }

/* ============================================
   MARGINALIA
   ============================================ */
.margin-column {
    display: none;
}

@media (min-width: 1200px) {
    .margin-column {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding-top: 6rem;
    }
}

.margin-note {
    position: relative;
    font-family: var(--font-margin);
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-umber);
    padding-left: 1rem;
    border-left: 0.5px solid var(--c-hairline);
}

.section[data-bg="slate-mid"] .margin-note,
.section[data-bg="slate"] .margin-note,
.section[data-bg="slate-deep"] .margin-note {
    color: var(--c-mist);
    border-left-color: rgba(194, 184, 163, 0.4);
}

.margin-em {
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--c-prussian);
    display: block;
    margin-bottom: 0.4em;
}

.section[data-bg="slate-mid"] .margin-em,
.section[data-bg="slate"] .margin-em,
.section[data-bg="slate-deep"] .margin-em { color: var(--c-gold); }

.margin-thumb {
    width: 80px;
    height: 60px;
    margin-bottom: 0.6rem;
    display: block;
}

.margin-curve {
    fill: none;
    stroke: var(--c-prussian);
    stroke-width: 1px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section[data-bg="slate-mid"] .margin-curve,
.section[data-bg="slate"] .margin-curve,
.section[data-bg="slate-deep"] .margin-curve { stroke: var(--c-gold); }

/* ============================================
   ENGRAVINGS (line illustrations)
   ============================================ */
.engravings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem 1.5rem;
    margin: 3rem 0 2.5rem;
    padding: 2rem 0;
    border-top: 0.5px solid var(--c-hairline);
    border-bottom: 0.5px solid var(--c-hairline);
}

.engraving {
    text-align: center;
}

.engraving-svg {
    width: 100%;
    max-width: 110px;
    height: auto;
    display: block;
    margin: 0 auto 0.8rem;
}

.engraving-strokes {
    fill: none;
    stroke: var(--c-sepia-dark);
    stroke-width: 0.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.engraving figcaption {
    font-family: var(--font-margin);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-umber);
    line-height: 1.5;
}

/* ============================================
   DEMONSTRATION SECTIONS
   ============================================ */
.section--demo {
    min-height: 100vh;
    padding: 12vh 4vw;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
}

.demo-shell {
    position: relative;
    width: min(1100px, 92vw);
    margin: 0 auto;
    text-align: center;
}

.demo-caption {
    margin-bottom: 4vh;
}

.demo-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 42px);
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 0.6em;
}

.demo-sub {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--c-umber);
    letter-spacing: 0.02em;
}

.section[data-bg="slate-mid"] .demo-sub { color: var(--c-mist); }

.demo-canvas {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 56vh;
    min-height: 320px;
    margin: 0 auto;
    background: transparent;
}

.demo-canvas--circular {
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 480px;
}

.demo-axis {
    font-family: var(--font-margin);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-umber);
    margin-top: 1rem;
    font-style: italic;
}

.demo-axis--y {
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotate(-90deg) translateX(50%);
    transform-origin: left top;
}

.section[data-bg="slate-mid"] .demo-axis { color: var(--c-mist); }

.legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    list-style: none;
    margin-top: 2rem;
    font-family: var(--font-margin);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: inherit;
    justify-content: center;
}

.legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* ============================================
   FINALE — MONTE CARLO PI
   ============================================ */
.section--finale {
    min-height: 100vh;
    padding: 12vh 4vw 16vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    background-color: var(--c-slate);
    color: var(--c-parchment);
}

.finale-shell {
    width: min(960px, 92vw);
    text-align: center;
    position: relative;
}

.finale-prelude {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 26px);
    color: var(--c-mist);
    margin-bottom: 1.2em;
    letter-spacing: 0.04em;
}

.pi-readout {
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--c-parchment);
    line-height: 1;
    margin-bottom: 1.2rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
}

.pi-label {
    font-size: clamp(28px, 4vw, 56px);
    color: var(--c-gold);
    font-style: italic;
}

.pi-value {
    font-size: clamp(60px, 10vw, 120px);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.finale-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    font-family: var(--font-margin);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-mist);
    margin-bottom: 3rem;
}

.finale-stats em {
    font-style: normal;
    font-weight: 700;
    color: var(--c-gold);
    font-variant-numeric: tabular-nums;
    margin-right: 0.4em;
}

.finale-canvas {
    display: block;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    margin: 0 auto 1.6rem;
    background: rgba(245, 240, 232, 0.04);
    border: 0.5px solid rgba(194, 184, 163, 0.4);
    cursor: crosshair;
}

.finale-hint {
    font-family: var(--font-margin);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-mist);
    opacity: 0.7;
    margin-bottom: 4rem;
}

.finale-coda {
    max-width: 60ch;
    margin: 0 auto 3rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.6;
    color: var(--c-mist);
    letter-spacing: 0.02em;
}

.finale-mark {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 14px;
    color: var(--c-mist);
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal,
.reveal-margin,
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.reveal-margin {
    transform: translateX(30px);
}

.reveal.is-revealed,
.reveal-margin.is-revealed,
.reveal-stagger.is-revealed > * {
    opacity: 1;
    transform: translate(0, 0);
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 240ms; }

/* Stagger paragraphs in thesis */
.thesis-column .reveal:nth-of-type(1) { transition-delay: 0ms; }
.thesis-column .reveal:nth-of-type(2) { transition-delay: 100ms; }
.thesis-column .reveal:nth-of-type(3) { transition-delay: 200ms; }
.thesis-column .reveal:nth-of-type(4) { transition-delay: 300ms; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1199px) {
    .opening-mast { padding: 24vh 0 0 6vw; }
    .section { padding: 12vh 5vw 16vh; }
}

@media (max-width: 768px) {
    body { font-size: 17px; }
    .opening-mast { padding: 22vh 0 0 5vw; }
    .logotype { font-size: clamp(56px, 14vw, 110px); }
    .section { padding: 10vh 6vw 14vh; }
    .demo-canvas { height: 50vh; min-height: 280px; }
    .finale-stats { gap: 1rem; font-size: 11px; }
    .engravings { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .engraving-svg { max-width: 80px; }
}

@media (max-width: 480px) {
    .logotype-sub { font-size: 12px; letter-spacing: 0.28em; }
    .pi-readout { flex-direction: column; gap: 0; }
    .pi-value { font-size: clamp(48px, 14vw, 90px); }
}