/* The manifesto. Loaded after style.css and pages.css: the text below the fold is the
   reading shell, but the page opens on one full-viewport band that is the site turned
   inside out (white ground, black type), with MANIFESTO set as large as the width will
   take. Section headings are set big under hairlines, so it reads as a statement, not
   as one more article. */

body.page-manifesto { background: #000; color: #fff; overflow-x: clip; }
/* One white for every paper surface: the exhibits' own ground, so a chart's edge never shows. */
:root { --pad: clamp(1.5rem, 5vw, 3rem); --mf-paper: #fcfcfb; }

/* The nav sits over the white band, so it blends: the white logo reads black on paper
   and white on the black text below. */
.page-manifesto .nav { mix-blend-mode: difference; }
.page-manifesto .nav::before { display: none; }

.mf-band {
    position: relative; clip-path: inset(0);
    min-height: 100vh; min-height: 100svh;
    padding: clamp(7rem, 14vw, 10rem) 0 clamp(1rem, 2.5vw, 2rem);
}
.mf-band--paper { color: #000; }
/* Same effect as the chapter numbers below: the paper and MANIFESTO are a fixed layer
   clipped to the band, so the word stays pinned to the foot of the screen and the band's
   bottom edge cuts it away as the reader scrolls on, while the title scrolls normally. */
.mf-band-bg { position: fixed; inset: 0; background: var(--mf-paper); }
.mf-band-bg .mf-word { position: absolute; left: 0; bottom: clamp(1rem, 2.5vw, 2rem); }

.mf-head { position: relative; padding-inline: var(--pad); max-width: 46rem; }
.mf-kicker {
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--dawn-mid); margin: 0 0 1.25rem;
}
.mf-title {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em;
    margin: 0; text-wrap: balance; color: #000;
}

/* Sized in vw so the word fills the width at every viewport. */
.mf-word {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    text-transform: uppercase; white-space: nowrap;
    font-size: 17vw; line-height: 0.82; letter-spacing: -0.03em;
    margin: 0; padding-inline: 1.5vw; max-width: none;
}
.mf-clip { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mf-slide { display: inline-block; }

/* ── Below the band ── */
.mf-art > .pg-inner { padding: clamp(3.5rem, 8vw, 6rem) var(--pad) 0; }
.mf-dek {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.25; letter-spacing: -0.01em;
    color: var(--bone); text-wrap: balance; margin: 0;
}

.mf-toc { margin: 3rem 0 1rem; padding: 1.5rem 0; border-block: 1px solid var(--border-d); }
.mf-toc ol { margin: 0; padding-left: 1.5rem; columns: 2 16rem; column-gap: 2.5rem; }
.mf-toc li { font-size: 0.95rem; line-height: 1.5; color: var(--t3); break-inside: avoid; padding: 0.3rem 0; }
.mf-toc a { color: var(--t2); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.mf-toc a:hover, .mf-toc a:focus-visible { color: var(--bone); border-color: var(--bone); outline: none; }

/* ── Chapters ──
   Each numbered section opens on a full-width paper band. The paper and the section's
   huge number are one fixed layer clipped to the band (clip-path clips fixed
   descendants): the number is pinned to the bottom right of the screen, and the band
   wipes over it like a window passing, while the title scrolls at reading speed. A flat
   colour alone would look no different from scrolling; the pinned number is what shows
   the two layers moving apart. */
.mf-art .prose > .mf-chap {
    position: relative; clip-path: inset(0);
    width: 100vw; margin: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 4.5rem) calc(50% - 50vw);
    min-height: 80vh; min-height: 80svh;
    display: flex; color: #000;
}
.mf-chap-bg { position: fixed; inset: 0; background: var(--mf-paper); }
.mf-chap-num {
    position: absolute; right: 1.5vw; bottom: clamp(0.5rem, 1.5vw, 1rem);
    font-family: 'Red Hat Display', sans-serif; font-weight: 800; color: #000;
    font-size: clamp(9rem, 34vw, 32rem); line-height: 0.78; letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}
.mf-chap-in { position: relative; width: 100%; padding: clamp(5rem, 9vw, 7rem) var(--pad) 2rem; }
.mf-art .prose .mf-chap h2 {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800; color: #000;
    font-size: clamp(2.1rem, 5.5vw, 4.2rem); line-height: 0.98; letter-spacing: -0.025em;
    margin: 0; max-width: 16ch; text-wrap: balance; scroll-margin-top: 0;
}

/* Exhibits sit on a paper strip, full width, so the charts' light ground belongs to the page. */
.mf-art .prose > figure {
    width: 100vw; margin-left: calc(50% - 50vw);
    background: var(--mf-paper); padding: clamp(1.5rem, 4vw, 3rem) var(--pad);
}
.mf-art .prose > figure img { max-width: 1000px; margin-inline: auto; }

/* A quote reads as someone speaking, not as a heading: body-sized type on a dark grey
   card, set in from the text column. */
.mf-art .prose blockquote {
    border-top: 0; margin: 2rem 0 2rem clamp(0.75rem, 3vw, 2rem);
    padding: 1.4rem 1.6rem; background: var(--night-card);
}
.mf-art .prose blockquote p {
    font-family: inherit; font-weight: 400; font-style: normal;
    font-size: 1rem; line-height: 1.75; color: var(--t2);
}

/* MANIFESTO rises into place as the band arrives. The hidden start is only applied when
   manifesto.js is running (.mf-js) and motion is allowed, so it can never leave the
   page blank. */
@media (prefers-reduced-motion: no-preference) {
    .mf-js .mf-slide { transform: translateY(105%); transition: transform 0.9s var(--ease); }
    .mf-js .mf-band.on .mf-slide { transform: none; }
}

/* ── /publications/: the manifesto above the list ──
   Not a row and not a pinned post: the page opens on a paper band, black on white like the
   manifesto's own opening. Only "Read the manifesto" is a link. Short enough that
   "Publications." shows below it on the first screen. The nav blends over it as on /manifesto/. */
.page-publications .nav { mix-blend-mode: difference; }
.page-publications .nav::before { display: none; }

.mf-feature {
    padding: clamp(5.5rem, 9vw, 7rem) var(--pad) clamp(2.25rem, 4vw, 3rem);
    background: var(--mf-paper); color: #000;
}
/* the same column as the list below (.pg-inner) */
.mf-feature-head { display: flex; flex-direction: column; max-width: 1180px; margin: 0 auto; }
.mf-feature-title {
    font-family: 'Red Hat Display', sans-serif; font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.0; letter-spacing: -0.02em;
    text-wrap: balance; max-width: 16ch;
}
.mf-feature-sum {
    margin-top: 1.25rem; max-width: 42ch;
    font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; color: #3a3a3a;
}
/* The one link: underlined text, as quiet as the rest of the band. On hover the rule
   thickens. */
.mf-feature-cta {
    align-self: flex-start; margin-top: 1.75rem; padding-bottom: 0.25rem;
    font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: #000; text-decoration: none;
    background: linear-gradient(#000, #000) left bottom / 100% 1px no-repeat;
    transition: background-size 0.25s;
}
.mf-feature-cta span { margin-left: 0.2em; }
.mf-feature-cta:hover, .mf-feature-cta:focus-visible { background-size: 100% 2px; outline: none; }
.mf-feature .mf-kicker { color: #6b6b6b; }
.pg-head--after-mf { padding-top: clamp(2.5rem, 5vw, 3.5rem); }