/* public/css/pages/history.css
 *
 * Long-form history page. Magazine-style layout: oversized hero,
 * 3-column essay grid (year rail / column / margin asides), full-bleed
 * climax image, black-paper intermission. Drops in under the project's
 * normal site header & footer — no masthead/colophon of its own.
 *
 * Source design: provided index.html, with masthead/footer/lightbox
 * styling stripped (we use the project's chrome + PhotoSwipe-shape
 * lightbox).
 */

.history-page {
    /* Scoped tokens — keep the design's editorial palette and type scale
       without polluting the global tokens. */
    --paper: #ffffff;
    --paper-2: #f4f3ef;
    --ink: #0d0d0c;
    --ink-soft: #1f1d1b;
    --mute: #8a8680;
    --rule: #111110;
    --red: #d6132a;
    --red-deep: #a3001a;
    --black: #0a0908;
    --paper-on-black: #f3ede0;

    --serif: 'Roboto', 'Helvetica Neue', sans-serif;
    --display: 'Roboto', 'Helvetica Neue', sans-serif;
    --display-cond: 'Roboto Condensed', 'Roboto', sans-serif;
    --ui: 'Roboto', system-ui, sans-serif;

    /* Fluid type — hero & intermission ceilings pulled in so each section
       comfortably fits inside one viewport height (see the 100vh caps on
       .history-hero and .history-intermission). */
    --fs-hero:      clamp(72px,  11vw,  180px);
    --fs-years:     clamp(40px,  5.5vw, 96px);
    --fs-h2:        clamp(64px,  9vw,   160px);
    --fs-h2-bigger: clamp(72px,  11vw,  180px);
    --fs-chapter:   clamp(28px,  3.4vw, 54px);
    --fs-year:      clamp(44px,  5.4vw, 88px);
    --fs-dek:       clamp(14px,  2.1vw, 34px);
    --fs-lede:      clamp(18px,  1.9vw, 30px);
    --fs-body:      clamp(16px,  1.45vw, 22px);
    --fs-pull:      clamp(30px,  3.7vw, 58px);
    --fs-bleed-cap: clamp(24px,  2.6vw, 40px);
    --fs-stat:      clamp(32px,  3.8vw, 60px);
    --fs-cap:       clamp(11px,  0.95vw, 14px);
    --fs-meta:      clamp(10px,  0.85vw, 13px);

    --pad-x:    clamp(28px,  3.4vw, 56px);
    --gutter:   clamp(36px,  4.2vw, 60px);
    --rail-w:   clamp(150px, 14vw,  210px);
    --aside-w:  clamp(280px, 26vw,  400px);

    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
}

.history-page ::selection { background: var(--red); color: var(--paper); }

/* ─── Hero ────────────────────────────────────────────────────────── */

.history-hero {
    position: relative;
    /* Black "magazine cover" treatment — mirrors the intermission
       palette. Capped at one viewport tall so it never exceeds a
       single screen, but no longer forced to fill it (min-height
       removed) — collapses to its content height. */
    background: var(--black);
    color: var(--paper-on-black);
    padding: clamp(20px, 2.6vw, 44px) clamp(20px, 2.6vw, 44px);
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3vw, 40px);
    border-bottom: none;
}

.history-hero-title {
    font-family: var(--display);
    font-weight: 900;
    font-size: var(--fs-hero);
    line-height: .82;
    letter-spacing: -0.06em;
    /* Light type on the black background — matches the intermission. */
    color: var(--paper-on-black);
    /* Vertical breathing room — pushes the title down off the chrome
       and leaves a long runway before the dek/facts row below. */
    margin: 4rem 0 12rem;
    margin-left: -0.04em;
    position: relative;
    white-space: nowrap;
}
.history-hero-title .dot {
    display: inline-block;
    width: clamp(18px, 2.2vw, 34px);
    height: clamp(18px, 2.2vw, 34px);
    background: var(--red);
    border-radius: 50%;
    margin-left: 18px;
    /* Lifted just above the cap-line — the original -0.58 popped the dot
       far above the title and bled into the page header. -0.45 keeps it
       visually inside the title's own line box at every clamp size. */
    transform: translateY(calc(var(--fs-hero) * -0.45));
}
/* Hero grid — three columns: title+years, dek, facts. All bottom-
   aligned so the year-range hugs the title's baseline and the facts
   ladder lines up with the bottom of the dek block. */
.history-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 2.8vw, 44px);
    align-items: end;
}
.history-hero-lead {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.6vw, 24px);
}
.history-hero-grid .years {
    font-family: var(--display);
    font-weight: 500;
    font-size: var(--fs-years);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--paper-on-black);
    white-space: nowrap;
}
.history-hero-grid .years em { font-style: normal; color: var(--red); }
.history-hero-grid .dek {
    font-family: var(--display);
    font-size: var(--fs-dek);
    line-height: 1.28;
    color: var(--paper-on-black);
    font-weight: 300;
    letter-spacing: -.015em;
}
.history-hero-grid .facts {
    font-family: var(--ui);
    font-size: var(--fs-cap);
    letter-spacing: .04em;
    color: rgba(243, 237, 224, .85);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(14px, 1.5vw, 22px) clamp(18px, 2vw, 30px);
    font-weight: 500;
}
.history-hero-grid .facts div b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 32px);
    letter-spacing: -.02em;
    color: var(--paper-on-black);
    margin-bottom: 4px;
    line-height: 1;
}
.history-hero-grid .facts div small {
    display: block;
    color: rgba(243, 237, 224, .55);
    font-size: var(--fs-meta);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
}

/* ─── Article body ───────────────────────────────────────────────── */

.history-movement {
    position: relative;
    padding: clamp(48px, 5.5vw, 80px) 0 0;
}
.history-movement-title {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr var(--aside-w);
    align-items: end;
    gap: var(--gutter);
    padding: 0 var(--pad-x) clamp(40px, 4.2vw, 60px);
    border-bottom: 1px solid rgba(13, 13, 12, .18);
}
.history-movement-title .mark {
    font-family: var(--display);
    font-size: var(--fs-cap);
    letter-spacing: .3em;
    color: var(--red);
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--red);
    display: inline-block;
}
.history-movement-title h2 {
    font-family: var(--display);
    font-weight: 900;
    font-size: var(--fs-h2);
    line-height: .92;
    letter-spacing: -.04em;
}
.history-movement-title .lede {
    font-family: var(--display);
    font-size: var(--fs-lede);
    line-height: 1.34;
    color: var(--ink);
    font-weight: 300;
    letter-spacing: -.01em;
}

.history-essay {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr var(--aside-w);
    gap: var(--gutter);
    padding: 0 var(--pad-x);
}

.history-rail {
    /* Sticks below the page's own sticky chapter nav so the two don't
       overlap. Offset matches the nav's outer height: nav padding
       clamp(12, 1.4vw, 18)px × 2 + the cap-line text + the 1px border
       + a small visual gap. */
    position: sticky;
    top: clamp(56px, 5.6vw, 76px);
    align-self: start;
    font-family: var(--ui);
    font-size: var(--fs-meta);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: grid;
    gap: 22px;
    padding-top: 8px;
    border-top: 1px solid var(--ink);
    font-weight: 500;
}
.history-rail .y { display: flex; flex-direction: column; gap: 2px; }
.history-rail .y b {
    font-family: var(--display);
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: -.02em;
    color: var(--ink);
    font-weight: 700;
}
.history-rail .y a { color: var(--ink-soft); text-decoration: none; }
.history-rail .y a:hover { color: var(--red); }
.history-rail .y.active b { color: var(--red); }

.history-column {
    display: grid;
    gap: clamp(36px, 4vw, 50px);
    padding-bottom: clamp(56px, 6vw, 80px);
}
.history-aside {
    display: grid;
    /* Tightened from clamp(26, 3vw, 36) — the original gap, combined
       with each marginalia's own border+padding, gave each card a 60px+
       cushion which read as airy emptiness in narrow aside columns. */
    gap: clamp(16px, 1.8vw, 22px);
    padding-top: 4px;
}
.history-aside .marginalia {
    font-family: var(--ui);
    font-size: var(--fs-cap);
    line-height: 1.55;
    color: var(--ink-soft);
    /* 20/22 → 12/14: still distinct above/below the borders but no longer
       generating two-line-of-blank-space per card. */
    padding: 12px 0 14px;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid rgba(13, 13, 12, .18);
    font-weight: 400;
}
.history-aside .marginalia em {
    font-family: var(--display);
    font-style: normal;
    font-size: clamp(15px, 1.3vw, 18px);
    color: var(--ink);
    line-height: 1.28;
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: -.005em;
}
.history-aside .marginalia b {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: .22em;
    color: var(--red);
    display: block;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* Chapter blocks */
.history-chapter { display: grid; gap: 22px; }
/* Chapter head: 2 rows × 2 cols.
 *   Row 1: "Глава XX" sub-label, spanning both columns.
 *   Row 2: year digits | chapter title.
 * Row-2 items are vertically centered so the single-line year sits on
 * the same optical line as the centre of the multi-line h3 — baseline
 * alignment dropped the year to the h3's first-line baseline and made
 * it look low next to a two-line title. */
.history-chapter-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: clamp(16px, 2vw, 24px);
    row-gap: clamp(6px, 0.8vw, 12px);
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--ink);
}
.history-chapter-head .sub {
    grid-column: 1 / -1;
    font-family: var(--ui);
    font-size: var(--fs-meta);
    letter-spacing: .22em;
    color: var(--mute);
    font-weight: 500;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}
.history-chapter-head .year {
    font-family: var(--display);
    font-weight: 900;
    font-size: var(--fs-year);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
}
.history-chapter-head h3 {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-chapter);
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--ink);
    flex: 1;
    padding-bottom: 6px;
}

.history-chapter p {
    font-family: var(--serif);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--ink);
    text-wrap: pretty;
    max-width: 78ch;
    font-weight: 400;
}
.history-chapter p + p { margin-top: 18px; }
.history-chapter p.dropcap::first-letter {
    font-family: var(--display);
    font-weight: 900;
    float: left;
    font-size: clamp(72px, 7.5vw, 104px);
    line-height: .85;
    padding: 8px 14px 0 0;
    color: var(--ink);
}
.history-chapter p b { font-weight: 700; }
.history-chapter p em { font-style: italic; font-weight: 500; }

/* Pull quote */
.history-pull {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-pull);
    line-height: 1.08;
    letter-spacing: -.025em;
    color: var(--ink);
    padding: 24px 0 24px 32px;
    border-left: 3px solid var(--red);
    max-width: 22ch;
}
.history-pull .red { color: var(--red); }
.history-pull cite {
    display: block;
    font-family: var(--ui);
    font-style: normal;
    font-size: var(--fs-meta);
    letter-spacing: .22em;
    color: var(--mute);
    text-transform: uppercase;
    margin-top: 18px;
    font-weight: 500;
}

/* Figures
 *
 * Holders containing an actual image take the photo's own aspect ratio
 * — no fixed height, no object-fit: cover crop. The image sets the
 * holder's height via `height: auto` from its natural aspect, with a
 * `max-height: 40vh` cap so a wide viewport on a tall image doesn't
 * eat the screen. When the cap engages the image is letterboxed
 * (object-fit: contain) so the aspect ratio survives intact.
 *
 * Empty/striped placeholders have no image to size them — they get an
 * explicit fallback height so the layout rhythm still works when a
 * given slot has no photo attached. */

/* Figures: plain block flow. Earlier this used `display: grid` and the
   implicit row tracks (one for the holder, one for the figcaption)
   ended up stretching the holder track in some layouts, which is why
   tall holders kept appearing around small images. Block flow makes
   the holder height exactly equal to the image's rendered height. */
.history-page figure { margin: 0; padding: 0; } /* override UA defaults */
.history-fig-inline { margin: 6px 0; position: relative; }
.history-fig-margin { position: relative; }

.history-fig-inline .holder,
.history-fig-margin .holder,
.history-bleed .holder {
    /* The holder is a passive wrapper: block-level, content-sized,
       relative for the corner/stamp absolute spans. line-height: 0
       removes the inline baseline gap that would otherwise leak a
       few px of "descender" space below the image.
       Paper-on-black background fills any space around an image that
       doesn't perfectly fill the holder — reads as intentional paper
       stock rather than an accidental gap. */
    display: block;
    position: relative;
    line-height: 0;
    font-size: 0;
    min-height: 0;
    height: auto;
    background: var(--paper-on-black);
}
.history-fig-inline .holder.history-holder-empty,
.history-fig-margin .holder.history-holder-empty,
.history-bleed .holder.history-holder-empty {
    /* Empty placeholder needs explicit dims since there's no image
       to shape it. Heights for size variants are below. */
    width: 100%;
}

/* Image sizing: max-* with auto on both width/height so BOTH dimensions
   scale proportionally when either cap engages. The img element box
   ends up exactly the rendered pixel size — no letterbox padding, no
   extra holder height. `margin: 0 auto` keeps a narrower-than-column
   image visually centered. */
.history-fig-inline img,
.history-fig-margin img,
.history-bleed img {
    display: block;
    max-width: 100%;
    max-height: 40vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    transition: transform .8s ease, filter .4s ease;
}
.history-fig-inline:hover img,
.history-fig-margin:hover img { transform: scale(1.02); }

/* Empty placeholder — striped print-photo look from the source design.
   Needs explicit heights because there's no image to dictate them. */
.history-holder-empty {
    background:
        repeating-linear-gradient(45deg, #1a1816, #1a1816 2px, #211e1b 2px, #211e1b 4px),
        #1a1816;
    height: clamp(280px, 28vw, 420px);
}
.history-fig-margin.tall .history-holder-empty  { height: clamp(360px, 36vw, 520px); }
.history-fig-margin.short .history-holder-empty { height: clamp(200px, 20vw, 300px); }
.history-bleed .history-holder-empty            { height: clamp(380px, 38vw, 560px); }

/* Caption block */
.history-fig-inline figcaption {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--ui);
    font-size: var(--fs-meta);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    padding-top: 10px;
    font-weight: 500;
}
.history-fig-inline figcaption b { color: var(--ink); font-weight: 700; letter-spacing: .14em; }
.history-fig-inline figcaption .credit { color: var(--red); }

.history-fig-margin figcaption {
    display: block;
    height: auto;
    min-height: 0;
    font-family: var(--ui);
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--ink-soft);
    letter-spacing: .02em;
    padding-top: 6px;
    font-weight: 400;
}
.history-fig-margin figcaption b {
    display: block;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* Stamp / corner labels on figures */
.history-fig-corner {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .85);
    background: rgba(214, 19, 42, .92);
    padding: 4px 8px;
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
}
.history-fig-stamp {
    position: absolute;
    right: 14px;
    top: 14px;
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 4px 8px;
    z-index: 2;
    pointer-events: none;
    text-transform: uppercase;
}
.history-fig-inline, .history-fig-margin, .history-bleed { cursor: zoom-in; }
.history-fig-inline.history-fig-empty,
.history-fig-margin.history-fig-empty,
.history-bleed.history-fig-empty { cursor: default; }

/* Full-bleed
 *
 * Stretches edge-to-edge across the document. We use `width: 100%`
 * (not `100vw`) because `100vw` includes the scrollbar gutter on
 * Windows/Linux and overflows the document body horizontally. The
 * bleed is a direct child of `.history-movement`, which has no
 * horizontal padding, so 100% of its parent IS the page width.
 *
 * `object-fit: cover` on the img below crops slightly rather than
 * letterboxing — full-bleed wants edge-to-edge fill, not paper-2
 * pillarboxes.
 */
.history-bleed {
    width: 100%;
    margin-top: clamp(28px, 3.4vw, 48px);
    margin-bottom: clamp(28px, 3.4vw, 48px);
    max-width: 100%;
}
.history-bleed-inner { position: relative; }
.history-bleed img {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 80vh;
    object-fit: cover;
    margin: 0;
    display: block;
}
.history-bleed .holder { width: 100%; }
.history-bleed .cap {
    position: absolute;
    left: var(--pad-x);
    bottom: 24px;
    right: var(--pad-x);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: var(--paper-on-black);
    font-family: var(--ui);
    font-size: var(--fs-cap);
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
    text-shadow: 0 1px 30px rgba(0, 0, 0, .8);
    font-weight: 500;
}
.history-bleed .cap em {
    font-family: var(--display);
    font-style: normal;
    font-size: var(--fs-bleed-cap);
    text-transform: none;
    letter-spacing: -.02em;
    max-width: 60%;
    line-height: 1.1;
    font-weight: 300;
}

/* ─── Black intermission ─────────────────────────────────────────── */

.history-intermission {
    background: var(--black);
    color: var(--paper-on-black);
    /* Mirrors the hero shape: capped at one viewport but no min-height,
       so the section is exactly as tall as its content needs. */
    padding: clamp(20px, 2.6vw, 44px) clamp(20px, 2.6vw, 44px);
    position: relative;
    margin-top: clamp(28px, 3.5vw, 48px);
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Intermission grid — same two-column shape as the hero: left column
   holds the ribbon + headline, right column holds the editorial intro
   plus the timeline stat ladder. */
.history-intermission-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(36px, 4.2vw, 64px);
    align-items: end;
}
.history-intermission-lead {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.6vw, 24px);
}
.history-intermission-content {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.2vw, 32px);
}
.history-intermission .ribbon {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: .4em;
    color: var(--red);
}
.history-intermission h2 {
    font-family: var(--display);
    font-weight: 900;
    font-size: var(--fs-h2-bigger);
    line-height: .85;
    letter-spacing: -.05em;
}
.history-intermission h2 em {
    font-family: var(--display);
    font-style: normal;
    color: var(--red);
    font-weight: 300;
    letter-spacing: -.04em;
}
.history-intermission-lead p {
    font-family: var(--display);
    font-size: clamp(20px, 2.1vw, 28px);
    line-height: 1.28;
    color: var(--paper-on-black);
    font-weight: 300;
    max-width: 38ch;
    letter-spacing: -.015em;
}
.history-intermission .stat { display: grid; gap: 22px; }
.history-intermission .stat .row {
    display: grid;
    grid-template-columns: clamp(80px, 7vw, 110px) 1fr;
    align-items: baseline;
    gap: clamp(18px, 2vw, 28px);
    border-top: 1px solid rgba(243, 237, 224, .2);
    padding-top: 14px;
}
.history-intermission .stat .row b {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-stat);
    letter-spacing: -.02em;
    color: var(--paper-on-black);
}
.history-intermission .stat .row span {
    font-family: var(--ui);
    /* Bumped from var(--fs-cap) (~11–14px) — the descriptive text
       beside each year is now closer to body size and reads as actual
       editorial copy rather than a caption gloss. */
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: .02em;
    color: rgba(243, 237, 224, .82);
    line-height: 1.4;
    padding-left: 1rem;
}

/* ─── Reveal animation ───────────────────────────────────────────── */

.history-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
    transition-delay: var(--d, 0s);
}
.history-reveal.in {
    opacity: 1;
    transform: translateY(0);
}
.history-hero-title .reveal-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.history-hero-title .reveal-letter.in {
    opacity: 1;
    transform: translateY(0);
}

.history-page section[id] { scroll-margin-top: 72px; }

/* Sticky chapter nav — now uses the shared component (see
   components/sticky-nav.css + partials/sticky-nav.twig). The page
   originally defined its own with the same palette, hence the visual
   continuity. */