/* Seeds of Renaissance components
   Extracted from the home and manifesto mockups (v7) and the four-page mockup (v2).
   Generated: components.css = this file with the tear and grain textures inlined (build-css.py).
   Needs tokens.css. Every section is a ground (white, paper, sunlight or night); dark and light meet at a torn edge. */

/* ── Base ─────────────────────────────────────────────────────── */
.sor, .sor *, .sor *::before, .sor *::after { box-sizing: border-box }
.sor {
  container-type: inline-size;
  position: relative; isolation: isolate;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body);
  color-scheme: light;
}
/* Paper grain over everything: the hand is our texture */
.sor::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9;
  opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("GRAIN");
}
:where(.sor) img { display: block; max-width: 100% }
:where(.sor) a { color: inherit }
.sor a:focus-visible, .sor button:focus-visible, .sor input:focus-visible, .sor [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px }
:where(.sor) :is(h1, h2, h3, h4) { margin: 0; font-weight: 400; text-wrap: balance }
:where(.sor) p { margin: 0 }

/* ── Type roles ───────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em }
.label { font-family: var(--font-label); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase }
.muted { color: var(--muted) }
.poem { font-family: var(--font-poem); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 100 }
.poem-strong { font-family: var(--font-poem); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 100 }
.link { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }

/* ── Buttons: always ink ──────────────────────────────────────── */
.btn {
  display: inline-block; padding: 13px 22px;
  font-family: var(--font-label); font-size: var(--t-button); font-weight: 700; letter-spacing: var(--track-button); text-transform: uppercase;
  text-decoration: none; color: var(--ink); background: transparent; border: 1px solid var(--ink); cursor: pointer;
}
.btn--solid { background: var(--ink); color: var(--paper) }
.btn:hover { background: var(--ink); color: var(--paper) }
.btn--solid:hover { background: transparent; color: var(--ink) }
.on-night .btn, .night .btn { color: var(--chalk); border-color: var(--chalk) }
.on-night .btn--solid, .night .btn--solid { background: var(--chalk); color: var(--night) }
.text-link { font-family: var(--font-label); font-size: var(--t-button); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-underline-offset: 4px }
.field { font-family: var(--font-body); font-size: 16px; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink); width: 100%; max-width: 300px }

/* ── Grounds and sections ─────────────────────────────────────── */
.gutter { padding-inline: var(--gutter) }
.section { padding-block: var(--section) }
.section > .label { display: block; margin-bottom: clamp(20px, 3.6cqi, 36px); color: var(--muted) }
.ground-white, .ground-paper, .ground-sun, .night { position: relative; z-index: 10 }
.ground-white { background: var(--white) }
.ground-paper { background: var(--paper) }
.ground-sun { background: var(--sunlight) }
.night { background: var(--night); color: var(--chalk); padding-block: clamp(44px, 6cqi, 88px) }
.night > .label { display: block; color: var(--night-muted); margin-bottom: clamp(22px, 4cqi, 40px) }
.night .muted, .night figcaption, .night .fig-no { color: var(--night-muted) }
.night .woodcut { color: var(--chalk) }

/* Torn edge. Give it the colour of the ground it tears out of.
   .tear--top sits at the top of a dark section; .tear--bottom follows one; .tear--overlay sits on a photo. */
.tear {
  display: block; height: var(--tear-height); position: relative; z-index: 11; margin-top: calc(1px - var(--tear-height));
  -webkit-mask: url("TEAR") 0 0 / 100% 100% no-repeat;
          mask: url("TEAR") 0 0 / 100% 100% no-repeat;
}
.tear--top { position: absolute; left: 0; right: 0; top: 0 }
.tear--bottom { transform: scaleY(-1); margin-top: 0; margin-bottom: calc(1px - var(--tear-height)) }
.tear--overlay { position: absolute; left: 0; right: 0; bottom: -1px; margin: 0 }
.night > .tear--top { background: var(--night) }

/* ── Figures: captioned like plates ───────────────────────────── */
:where(.sor) figure { margin: 0; display: grid; gap: 10px }
:where(.sor) figcaption { font-size: var(--t-caption); line-height: 1.45; color: var(--muted); font-style: italic }
.fig-no { font-family: var(--font-label); font-style: normal; font-size: var(--t-meta); font-weight: 700; letter-spacing: var(--track-meta); text-transform: uppercase; margin-right: 8px; color: var(--muted) }
/* Photographs sit flat: no mount, tilt or shadow. The postcard .print / .prints is retired (layout.md) */
.hero-split > figure img, .page-hero > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }

/* ── Woodcut graphics (symbols from graphics.js) ──────────────── */
.woodcut { color: var(--ink) }
.flock { position: absolute; pointer-events: none; z-index: 2; width: min(17cqi, 210px); height: auto }
.seed-icon { width: 34px; height: 34px; color: var(--ink); flex: none }
.seed-row { width: min(320px, 70%); height: auto; color: var(--ink); display: block }
.seal { width: 96px; color: var(--ink) }
.logo-disc { width: 52px; height: 52px; border-radius: 50%; background: var(--white); display: grid; place-items: center }
.logo-disc img { width: 85%; height: 85% }

/* ── Site header ──────────────────────────────────────────────── */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--rule); position: relative; z-index: 10; background: var(--paper) }
.site-header nav { display: flex; gap: 20px; flex-wrap: wrap }
.site-header nav a { text-decoration: none; padding-bottom: 3px }
.site-header nav a[aria-current] { border-bottom: 1px solid var(--ink) }
.site-header--centred { display: grid; grid-template-columns: 1fr auto 1fr }
.site-header--centred nav:last-child { justify-content: flex-end }
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none }
.wordmark img { width: 44px; height: 44px; mix-blend-mode: multiply }
.wordmark span { font-family: var(--font-display); font-size: clamp(20px, 2.4cqi, 27px); white-space: nowrap }
.wordmark em { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 300 }   /* "of": Fraunces italic, the one exception to four faces (logo.md) */

/* ── Heroes ───────────────────────────────────────────────────── */
/* Full-bleed photograph with centred statement (home) */
.hero-photo { position: relative; z-index: 10; color: #fff; background: var(--night); overflow: hidden }
.hero-photo > img { width: 100%; aspect-ratio: 16 / 8.4; object-fit: cover }
.hero-photo .overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; gap: 16px; padding: 24px 24px 48px; background: radial-gradient(ellipse at center, rgb(23 22 19 / .58), rgb(23 22 19 / .14) 72%) }
.hero-photo h1 { font-family: var(--font-display); font-size: var(--t-hero); line-height: .98; max-width: 14ch }
.hero-photo p { max-width: 40ch; font-size: clamp(16px, 1.8cqi, 20px) }
.hero-photo .label { color: #fff }
.hero-photo .flock { color: #fff; z-index: 3; right: 8%; top: 10% }

/* Split: statement beside a plain photograph */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--gap-l); align-items: center; padding-block: clamp(40px, 6cqi, 88px); overflow: hidden; position: relative }
.hero-split .text { display: grid; gap: 18px; justify-items: start; position: relative; z-index: 3 }
.hero-split h1 { font-family: var(--font-display); font-size: var(--t-hero); line-height: var(--lh-display) }
.hero-split p { font-size: var(--t-intro); max-width: 34ch }

/* Inner page title (manifesto) */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(24px, 5cqi, 64px); align-items: center; padding-block: clamp(40px, 6cqi, 80px); overflow: hidden; position: relative }
.page-hero h1 { font-family: var(--font-display); font-size: var(--t-title); line-height: .98; margin: 10px 0 18px }
.page-hero .dedication { font-size: clamp(20px, 2.2cqi, 26px); line-height: 1.35; max-width: 30ch }
.page-hero .spiral { position: absolute; right: -6%; top: -14%; width: clamp(200px, 34cqi, 440px); opacity: .9; z-index: 1; pointer-events: none }
.page-hero > * { position: relative; z-index: 2 }
.page-hero > .spiral { position: absolute; z-index: 1 }

/* ── Statement: a lead paragraph beside a plate ───────────────── */
.statement { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap-l); align-items: start }
.statement > div { display: grid; gap: 22px }
.statement p { font-size: var(--t-lead); line-height: 1.38; font-weight: 300; text-wrap: pretty }
.statement figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }

/* ── Pathways: four ways in ───────────────────────────────────── */
.pathways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-m) }
.pathway { display: grid; gap: 10px; align-content: start; text-decoration: none }
.pathway .photo { overflow: hidden }
.pathway img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s ease }
.pathway:hover img { transform: scale(1.03) }
.pathway .kind { display: flex; align-items: center; gap: 10px; font-family: var(--font-label); font-size: var(--t-meta); font-weight: 700; letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--muted) }
.pathway h3 { font-family: var(--font-display); font-size: var(--t-card); line-height: 1.05 }
.pathway p { font-size: 15.5px; color: var(--muted) }

/* ── Selected work (night): a list that changes the picture ───── */
.selected { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 5cqi, 64px); align-items: start }
.selected ul { list-style: none; margin: 0; padding: 0; display: grid }
.selected li { padding: 16px 0; border-top: 1px solid var(--night-rule); display: grid; gap: 4px; cursor: pointer }
.selected li:last-child { border-bottom: 1px solid var(--night-rule) }
.selected li .label { color: var(--night-muted) }
.selected li b { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.7cqi, 34px); line-height: 1.12; opacity: .62; transition: opacity .2s }
.selected li .by { color: var(--night-muted); font-size: 15.5px }
.selected li[aria-current] b, .selected li:hover b { opacity: 1 }
.selected .picture { position: sticky; top: 12px }
.selected .picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
/* Each item's own picture (.pic, added by sor.js from data-img): shown inline where there is no hover (narrow, touch) */
.selected li .pic { display: none }
.night .seal-corner { position: absolute; right: var(--gutter); top: clamp(28px, 4cqi, 56px); width: 84px }

/* ── Printed object (magazine, book) ──────────────────────────── */
.object-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-l); align-items: center }
.object-feature img { width: 100%; max-width: 400px; justify-self: center; box-shadow: var(--shadow-object) }
.object-feature h2 { font-family: var(--font-display); font-size: var(--t-section); line-height: 1; margin: 8px 0 14px }
.object-feature p { margin: 0 0 20px; max-width: 40ch }

/* ── Calendar ─────────────────────────────────────────────────── */
.calendar { display: grid }
.calendar .row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 18px; padding: 18px 0; border-top: 1px solid var(--rule); align-items: baseline }
.calendar .row:last-child { border-bottom: 1px solid var(--rule) }
.calendar .date { font-family: var(--font-label); font-weight: 700; font-size: 14px; letter-spacing: .06em; font-variant-numeric: tabular-nums }
.calendar b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-item); display: block; line-height: 1.2 }
.calendar small { font-size: 14.5px; color: var(--muted) }

/* ── Interlude: one poetic line, set alone ────────────────────── */
.interlude { display: grid; justify-items: center; gap: 18px; text-align: center; overflow: hidden }
.interlude svg { width: min(520px, 90%); height: auto; color: var(--ink) }
.interlude p { font-size: var(--t-interlude); line-height: 1.25; max-width: 26ch }

/* ── Three ways to engage ─────────────────────────────────────── */
.engage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3cqi, 40px) }
.engage > div { display: grid; gap: 12px; align-content: start; justify-items: start; padding-top: 18px; border-top: 2px solid var(--ink) }
.engage h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.1 }
.engage p { color: var(--muted); max-width: 30ch }

/* ── Long-form reading ────────────────────────────────────────── */
.reading { max-width: var(--measure); margin-inline: auto; padding-block: clamp(40px, 6cqi, 84px); display: grid; gap: 26px }
.reading.ground-white { box-shadow: 0 0 0 100vmax var(--white); clip-path: inset(0 -100vmax) }
.reading p { font-size: var(--t-reading); line-height: var(--lh-reading); text-wrap: pretty }
.reading h2 { font-family: var(--font-quote); font-size: 34px; line-height: 1.1; margin-top: 16px }
.drop::first-letter { font-family: var(--font-display); float: left; font-size: 4.6em; line-height: .8; padding: 6px 10px 0 0 }
.pull { padding: 28px 0; border-block: 1px solid var(--ink); font-family: var(--font-quote); font-size: var(--t-quote); line-height: 1.2; display: grid; gap: 8px }
.reading .verse { font-size: clamp(24px, 3cqi, 32px); line-height: 1.3; text-align: center }
.litany { list-style: none; margin: 0; padding: 0; counter-reset: l; display: grid }
.litany li { counter-increment: l; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 0; font-size: 18px; line-height: 1.55 }
/* Numbered like verses: the quote face (Restora) in light italic, large and muted, hanging in its own column. No rules between items. */
.litany li::before { content: counter(l); font-family: var(--font-quote); font-style: italic; font-weight: 300; font-size: 30px; line-height: 1; color: var(--muted); font-variation-settings: "SOFT" 100; padding-left: 8px }
.litany li:last-child { font-family: var(--font-display); font-size: 28px; line-height: 1.25 }

/* ── Footer (night) ───────────────────────────────────────────── */
.site-footer { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 44px 32px; background: var(--night); color: var(--chalk); position: relative; z-index: 10 }
.site-footer > .tear { background: var(--night); position: absolute; left: 0; right: 0; top: 0 }
.site-footer b { font-family: var(--font-display); font-weight: 400; font-size: 24px; display: block; margin-bottom: 8px }
.site-footer p { color: var(--night-muted); font-size: var(--t-small) }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-small) }
.site-footer .label { color: var(--night-muted); display: block; margin-bottom: 10px }
.site-footer .logo-disc { margin-bottom: 12px }

/* ── From the four-page mockup: events, steps, band, contents ── */
.events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-m) }
.event { display: grid; grid-template-rows: auto 1fr; border-top: 2px solid var(--ink); background: var(--white) }
.event img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }
.event .body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px 4px 6px }
.event .day { font-family: var(--font-display); font-size: 44px; line-height: .9; text-align: center }
.event .day small { display: block; font-family: var(--font-label); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; margin-top: 6px }
.event h3 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; margin-bottom: 4px }
.event p { font-size: var(--t-small); color: var(--muted) }
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--sunlight); padding-block: clamp(36px, 5cqi, 64px); position: relative; z-index: 10; overflow: hidden }
.band h2 { font-family: var(--font-display); font-size: var(--t-band); line-height: 1 }
.band p { margin-top: 8px; max-width: 46ch }
.contents { list-style: none; margin: 0; padding: 0; display: grid }
.contents li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule) }
.contents li:last-child { border-bottom: 1px solid var(--rule) }
.contents b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.15 }
.contents .by { display: block; font-size: 14.5px; color: var(--muted) }
.contents .page { font-family: var(--font-label); font-size: var(--t-button); font-variant-numeric: tabular-nums; color: var(--muted) }

/* ── From the four-page mockup (v2): gatherings, join, magazine, white paper ── */
/* A row of buttons */
.actions { display: flex; gap: 12px; flex-wrap: wrap }

/* Swallows rising across a split hero (place a .flock inside .hero-split) */
.hero-split .flock { left: 38%; top: 10%; width: min(22cqi, 260px) }
/* A small pair of swallows set inline, e.g. above an interlude line */
.swallows { display: block; width: 140px; height: auto; color: var(--ink) }
.interlude .swallows { width: 140px }

/* Places table: where groups meet */
.table-wrap { overflow-x: auto }
.hubs { width: 100%; border-collapse: collapse; font-size: 16px }
.hubs th { font-family: var(--font-label); font-size: var(--t-meta); font-weight: 700; letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ink) }
.hubs td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline }
.hubs td:first-child { font-family: var(--font-display); font-size: 22px }

/* Banner hero: full-bleed photograph, title set low on the left (join). Follow with .tear--bottom on night */
.hero-banner { position: relative; z-index: 10; background: var(--night); color: #fff; overflow: hidden }
.hero-banner > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; opacity: .92 }
.hero-banner .overlay { position: absolute; inset: 0; z-index: 2; display: grid; align-content: end; justify-items: start; gap: 10px; padding-block: clamp(20px, 5cqi, 64px) clamp(40px, 7cqi, 90px) }
.hero-banner h1 { font-family: var(--font-display); font-size: clamp(44px, 8cqi, 110px); line-height: .92 }
.hero-banner .label { color: var(--chalk) }

/* Steps: numbered ways in, each with a picture */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3cqi, 40px) }
.step { display: grid; gap: 12px; align-content: start }
.step .n { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 44px; line-height: 1 }
.step h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.08 }
.step p { color: var(--muted) }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }

/* Voices: short quotes from members */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3cqi, 40px) }
.voices blockquote { margin: 0; display: grid; gap: 12px; align-content: start; padding-top: 16px; border-top: 1px solid var(--ink) }
.voices blockquote p { font-size: 22px; line-height: 1.35 }
.voices cite { font-style: normal; color: var(--muted) }

/* Issue hero: a magazine cover beside its title, actions and contents */
.issue-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--gap-l); align-items: start; padding-block: clamp(40px, 6cqi, 84px) }
.issue-hero .cover img { width: 100%; box-shadow: var(--shadow-object) }
.issue-hero h1 { font-family: var(--font-display); font-size: clamp(56px, 9cqi, 128px); line-height: .9; margin: 8px 0 18px }
.issue-hero .intro { font-size: 20px; line-height: 1.5; margin-bottom: 22px; max-width: 40ch }
.issue-hero .contents { margin-top: 28px }

/* Poem block: a few lines set alone, with an optional .seal in the corner */
.poem-block { max-width: 640px; margin-inline: auto; display: grid; gap: 22px; position: relative }
.poem-block .lines { font-size: clamp(22px, 2.6cqi, 30px); line-height: 1.5 }
.poem-block > .seal { position: absolute; width: 120px; right: -60px; top: -30px; pointer-events: none }

/* Spread: two plates side by side, bottoms aligned */
.spread { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 3cqi, 40px); align-items: end }
.spread img { width: 100%; object-fit: cover; aspect-ratio: 1 / 1 }
.spread figure:first-child img { aspect-ratio: 4 / 5 }

/* White paper: head, meta line, then contents nav beside the article (abstract, numbered headings, footnotes) */
.whitepaper-head { padding-block: clamp(40px, 6cqi, 84px) 36px; display: grid; gap: 16px; justify-items: start; max-width: 980px }
.whitepaper-head h1 { font-family: var(--font-display); font-size: var(--t-title); line-height: .98 }
.whitepaper-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--t-small); color: var(--muted) }
.whitepaper-meta b { color: var(--ink); font-weight: 500 }
.whitepaper { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--gap-l); padding-block: clamp(36px, 5cqi, 64px) clamp(48px, 7cqi, 96px); border-top: 1px solid var(--ink) }
.whitepaper > nav { position: sticky; top: 16px; align-self: start; display: grid; gap: 4px }
.whitepaper > nav .label { color: var(--muted); margin-bottom: 8px }
.whitepaper > nav a { text-decoration: none; font-size: var(--t-small); padding: 6px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 28px minmax(0, 1fr) }
.whitepaper > nav a span { font-family: var(--font-label); font-size: var(--t-label); font-weight: 700; color: var(--muted); padding-top: 2px }
.whitepaper > nav a[aria-current] { font-weight: 600 }
.whitepaper article { max-width: var(--measure); display: grid; gap: 22px }
.whitepaper h2 { margin-top: 16px; font-family: var(--font-display); font-size: 34px; line-height: 1.1; display: flex; gap: 14px; align-items: baseline }
.whitepaper h2 small { font-family: var(--font-label); font-size: var(--t-button); font-weight: 700; color: var(--muted); letter-spacing: .1em }
.whitepaper article > p { font-size: 18px; line-height: 1.7; text-wrap: pretty }
.whitepaper figure img { mix-blend-mode: multiply; max-height: 440px; width: auto; margin-inline: auto }
.abstract { background: var(--paper); border-left: 2px solid var(--ink); padding: 18px 22px; font-size: var(--t-body) }
.abstract .label { display: block; color: var(--muted); margin-bottom: 6px }
/* Footnote marks are one of the two places red is allowed */
.fn { font-family: var(--font-label); font-size: var(--t-meta); font-weight: 700; margin-left: 1px; line-height: 0 }
.fn a { text-decoration: none; color: var(--red) }
.notes { font-size: 14.5px; color: var(--muted); margin: 0; padding: 16px 0 0 20px; display: grid; gap: 6px; border-top: 1px solid var(--rule) }

@container (max-width: 800px) {
  .hero-split .flock { left: auto; right: var(--gutter); top: 12px; width: 110px }
  .hero-banner > img { aspect-ratio: 4 / 3 }
  .steps, .voices, .issue-hero, .spread, .whitepaper { grid-template-columns: 1fr }
  .whitepaper > nav { position: static }
  .poem-block > .seal { right: 0; width: 80px }
  .hubs thead { display: none }
  .hubs tr { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule) }
  .hubs td { padding: 0; border: 0 }
}

/* ── Narrow ───────────────────────────────────────────────────── */
@container (max-width: 800px) {
  .site-header nav { display: none }
  .site-header--centred { grid-template-columns: 1fr; justify-items: center }
  .hero-photo > img { aspect-ratio: 4 / 5 }
  .hero-split, .page-hero, .statement, .selected, .object-feature, .engage, .band { grid-template-columns: 1fr }
  .pathways { grid-template-columns: 1fr 1fr }
  .events { grid-template-columns: 1fr }
  .night .seal-corner { display: none }
  .selected .picture { display: none }
  .selected li:has(> .pic) { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; align-items: start }
  .selected li:has(> .pic) > * { grid-column: 2 }
  .selected li > .pic { display: block; grid-column: 1; grid-row: 1 / span 3; width: 88px; aspect-ratio: 4 / 5; object-fit: cover }
  .selected li b { opacity: 1 }
  .calendar .row { grid-template-columns: 1fr; gap: 4px }
  .site-footer { grid-template-columns: 1fr 1fr }
  .contents li { grid-template-columns: 1fr auto }
  .contents li .label { grid-column: 1 / -1 }
}
@container (max-width: 480px) {
  .pathways, .site-footer { grid-template-columns: 1fr }
}
/* Touch screens of any width: no hover to swap the picture, so each item shows its own */
@media (hover: none) {
  .selected .picture { display: none }
  .selected li:has(> .pic) { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; align-items: start }
  .selected li:has(> .pic) > * { grid-column: 2 }
  .selected li > .pic { display: block; grid-column: 1; grid-row: 1 / span 3; width: 88px; aspect-ratio: 4 / 5; object-fit: cover }
  .selected li b { opacity: 1 }
  .selected { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .pathway img, .selected li b { transition: none }
}

/* ── Thumbnails (fixed 1280×720) ──────────────────────────────────
   YouTube thumbnails: a fixed artboard sized with the --thumb-* tokens, not the fluid scale.
   .thumb is the image itself (screenshot or export it at 1280×720); .thumb-frame scales it whole to fit a column.
   Variants: --gathering (photo, torn white strip), --podcast (paper page, photo torn in),
   --manifesto (the one night ground, a torn white foot), --talk (title on a photo over a warm-dark scrim).
   No red in the type: the logo brings its own. Keep titles to two to six words. */
.thumb, .thumb *, .thumb *::before, .thumb *::after { box-sizing: border-box }
.thumb {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  width: var(--thumb-w); height: var(--thumb-h);
  background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.2; text-align: left;
}
.thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("GRAIN"); background-size: 230px;
}
.thumb img { display: block; max-width: none }
.thumb__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.thumb__title { font-family: var(--font-display); font-weight: 400; line-height: .98; letter-spacing: -.01em; margin: 0; text-wrap: balance }
.thumb__label { display: block; font-family: var(--font-label); font-size: var(--thumb-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.2 }
.thumb__logo { width: var(--thumb-logo); height: var(--thumb-logo); mix-blend-mode: multiply }
.thumb__disc { position: absolute; right: var(--thumb-inset); top: var(--thumb-inset); z-index: 3; background: var(--white); border-radius: 50%; padding: 8px; display: grid; place-items: center }
.thumb__disc img { width: calc(var(--thumb-logo) - 14px); height: calc(var(--thumb-logo) - 14px) }
.thumb__flock { position: absolute; z-index: 1; width: 340px; height: auto; color: var(--white); pointer-events: none }
.thumb__flock--ink { color: var(--ink) }   /* for a pale sky */
/* Torn edges. Horizontal: sits on top of a panel and takes its colour. Vertical: the left edge of a photo, in the colour of the page. */
.thumb__tear {
  position: absolute; left: 0; right: 0; top: calc(2px - var(--thumb-tear)); height: var(--thumb-tear); background: inherit;
  -webkit-mask: url("TEAR") 0 0 / 100% 100% no-repeat;
          mask: url("TEAR") 0 0 / 100% 100% no-repeat;
}
.thumb__tear--v { right: auto; top: 0; left: calc(var(--thumb-tear) - 6px); width: var(--thumb-h); transform-origin: 0 0; transform: rotate(90deg); background: var(--paper) }

/* 1 · Gathering: a warm photo, a torn white strip, a short title */
.thumb--gathering .thumb__panel { position: absolute; left: 0; right: 0; bottom: 0; height: 37%; z-index: 2; background: var(--white); padding: 30px 220px 36px var(--thumb-pad); display: grid; align-content: center; gap: 16px }
.thumb--gathering .thumb__label { color: var(--muted) }
.thumb--gathering .thumb__title { font-size: var(--thumb-title) }
.thumb--gathering .thumb__logo { position: absolute; right: var(--thumb-inset); bottom: 44px; width: calc(var(--thumb-logo) * 1.2); height: calc(var(--thumb-logo) * 1.2) }
.thumb--gathering .thumb__flock { right: 7%; top: 8% }

/* 2 · Podcast: the paper page leads, the photo is torn in; the episode sits as a figure number */
.thumb--podcast { display: grid; grid-template-columns: 56% 44%; grid-template-rows: 100% }
.thumb--podcast .thumb__text { position: relative; z-index: 2; padding: var(--thumb-pad) 48px 52px var(--thumb-pad); display: grid; align-content: space-between }
.thumb--podcast .thumb__label { color: var(--muted) }
.thumb--podcast .thumb__title { font-size: var(--thumb-title-xl); margin-top: 20px }
.thumb--podcast .thumb__byline { font-family: var(--font-display); font-size: var(--thumb-byline); line-height: 1.1; margin-top: 26px; color: var(--muted) }
.thumb--podcast .thumb__foot { display: flex; align-items: center; gap: 20px }
.thumb--podcast .thumb__foot .thumb__label { font-size: var(--thumb-label-s) }
.thumb--podcast .thumb__pic { position: relative; min-width: 0 }
.thumb--podcast .thumb__pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40% }
.thumb--podcast .thumb__fig { position: absolute; right: 30px; bottom: 26px; z-index: 2; font-family: var(--font-label); font-size: var(--thumb-meta); font-weight: 700; letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--white) }

/* 3 · Manifesto and essays: the one night ground, words alone, a torn white foot */
.thumb--manifesto { background: var(--night); color: var(--chalk) }
.thumb--manifesto::after { mix-blend-mode: screen; opacity: .08 }
.thumb--manifesto .thumb__quote { position: absolute; left: var(--thumb-pad); right: 76px; top: 68px; display: grid; gap: 30px }
.thumb--manifesto .thumb__label { color: var(--night-muted) }
.thumb--manifesto .thumb__title { font-size: var(--thumb-title-m); line-height: 1.02 }
.thumb--manifesto .thumb__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; z-index: 2; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: space-between; padding: 0 48px 0 var(--thumb-pad) }
.thumb--manifesto .thumb__foot .thumb__label { color: var(--ink); font-size: var(--thumb-label-s) }
.thumb--manifesto .thumb__foot .thumb__logo { width: calc(var(--thumb-logo) * .92); height: calc(var(--thumb-logo) * .92) }

/* 4 · Talk: type directly on a photo, over a warm-dark scrim; the logo on a white disc */
.thumb--talk .thumb__photo { object-position: 50% 45% }
.thumb--talk .thumb__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(23 22 19 / .78) 0%, rgb(23 22 19 / .45) 42%, rgb(23 22 19 / 0) 70%) }
.thumb--talk .thumb__text { position: absolute; left: var(--thumb-pad); top: 0; bottom: 0; width: 52%; z-index: 2; display: grid; align-content: center; gap: 30px; color: var(--white) }
.thumb--talk .thumb__title { font-size: var(--thumb-title-l) }
.thumb--talk .thumb__label { color: var(--chalk) }

/* Preview frame: scales the fixed artboard to the frame's width (tan(atan2()) turns a length ratio into a number) */
.thumb-frame { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden }
.thumb-frame > .thumb { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(tan(atan2(100cqi, var(--thumb-w)))) }

/* 5 · Podcast guest (podcast episode cover): night ground with a mountain photo under a dark shade,
   the guest in greyscale on the right fading into it, title and name on the left, the logo on its white disc.
   Markup: .thumb.thumb--guest > img.thumb__photo, .thumb__scrim, img.thumb__guest, .thumb__text (label, title, byline, foot).
   The podcast name is the one label sized to read at feed size (--thumb-label-l); keep the bottom-right corner (duration badge) clear of type. */
.thumb--guest { background: var(--night); color: var(--chalk) }
.thumb--guest::after { mix-blend-mode: screen; opacity: .08 }
.thumb--guest .thumb__photo { object-position: 50% 40%; filter: saturate(.8) }
.thumb--guest .thumb__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgb(23 22 19 / .9) 0%, rgb(23 22 19 / .66) 42%, rgb(23 22 19 / .3) 70%, rgb(23 22 19 / .3) 100%), linear-gradient(0deg, rgb(23 22 19 / .72) 0%, rgb(23 22 19 / 0) 40%) }
.thumb__guest {
  position: absolute; right: 0; top: 0; z-index: 2; width: var(--thumb-guest-w); height: 100%;
  object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%), linear-gradient(0deg, transparent 0%, #000 34%); -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0%, #000 46%), linear-gradient(0deg, transparent 0%, #000 34%); mask-composite: intersect;
}
.thumb--guest .thumb__text { position: absolute; left: var(--thumb-pad); top: 56px; bottom: 46px; width: 720px; z-index: 3; display: flex; flex-direction: column }
.thumb--guest .thumb__label { font-size: var(--thumb-label-l); letter-spacing: .12em; color: var(--chalk) }
.thumb--guest .thumb__ep { color: var(--night-muted); margin-left: .4em }
.thumb--guest .thumb__title { font-size: var(--thumb-title-xl); color: var(--white); margin-top: 30px }
.thumb--guest .thumb__byline { font-size: var(--thumb-name); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; margin-top: 30px; color: var(--chalk) }
.thumb--guest .thumb__foot { margin-top: auto; display: flex; align-items: center; gap: 22px }
.thumb--guest .thumb__foot .thumb__label { font-size: var(--thumb-label-s); letter-spacing: var(--track-label) }
.thumb--guest .thumb__disc { position: static; width: var(--thumb-disc); height: var(--thumb-disc); padding: 0; overflow: hidden }
.thumb--guest .thumb__disc img { width: 112%; height: 112%; flex: none }

/* ── YouTube channel art (fixed artboards) ───────────────────────
   Banner, avatar, lower third and watermark, sized with the --yt-* tokens. Each is a fixed artboard;
   .chan-frame scales one to fit its column and can crop it to what a device shows:
   the default or --tv (whole 2560×1440 banner), --desktop (the 2560×423 strip), --mobile (the 1546×423 safe area),
   --video (a 1920×1080 frame), --avatar (800×800 in a circle). Add .show-guides on an ancestor to draw the
   strip and safe area as dashed lines. Woodcuts in ink on paper, chalk on night; no red but the logo's own. */
.chan-frame {
  --art-w: var(--yt-banner-w); --art-h: var(--yt-banner-h); --crop-w: var(--art-w); --crop-h: var(--art-h);
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
.chan-frame > * {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  /* --chan-scale, if a page script sets it (frame width ÷ --crop-w), wins: Chrome can keep a stale 100cqi inside transforms after a grid relayout */
  transform: scale(var(--chan-scale, tan(atan2(100cqi, var(--crop-w))))) translate(calc((var(--crop-w) - var(--art-w)) / 2), calc((var(--crop-h) - var(--art-h)) / 2));
}
.chan-frame--desktop { --crop-h: var(--yt-strip-h); aspect-ratio: 2560 / 423 }
.chan-frame--mobile { --crop-w: var(--yt-safe-w); --crop-h: var(--yt-strip-h); aspect-ratio: 1546 / 423 }
.chan-frame--video { --art-w: var(--yt-video-w); --art-h: var(--yt-video-h) }
.chan-frame--avatar { --art-w: var(--yt-avatar); --art-h: var(--yt-avatar); aspect-ratio: 1; border-radius: 50% }
:where(.chan-frame) img { max-width: none }

/* Banner: the lockup centred in the safe area; swallows and mountains sit outside it, seen on desktop and TV only */
.chan-banner { width: var(--yt-banner-w); height: var(--yt-banner-h); overflow: hidden; isolation: isolate; background: var(--paper); color: var(--ink) }
.chan-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: multiply; background-image: url("GRAIN"); background-size: 300px }
.chan-banner--night { background: var(--night); color: var(--chalk) }
.chan-banner--night::after { mix-blend-mode: screen; opacity: .08 }
.chan-banner__lockup { position: absolute; inset: 0; margin: auto; height: max-content; width: max-content; max-width: calc(var(--yt-safe-w) - 80px); display: flex; align-items: center; gap: 56px }
.chan-banner__logo { flex: none; width: var(--yt-banner-logo); height: var(--yt-banner-logo); mix-blend-mode: multiply }
.chan-banner--night .chan-banner__logo { mix-blend-mode: normal; background: var(--white); border-radius: 50%; padding: 10px }
.chan-banner__name { font-family: var(--font-display); font-size: var(--yt-wordmark); font-weight: 400; line-height: .95; letter-spacing: -.01em; margin: 0; white-space: nowrap }
.chan-banner__tagline { font-family: var(--font-poem); font-style: italic; font-variation-settings: "SOFT" 100; font-weight: 300; font-size: var(--yt-tagline); line-height: 1.2; margin: 22px 0 0; opacity: .82 }
.chan-banner__flock { position: absolute; left: 90px; top: calc(50% - 170px); width: 360px; height: auto; color: currentColor }
.chan-banner__range {
  position: absolute; right: 36px; top: calc(50% + var(--yt-strip-h) / 2 - 270px); width: 432px; height: 270px; background: currentColor;
  -webkit-mask: url("graphics/woodcuts/elements/mountain-range.svg") center bottom / contain no-repeat;
          mask: url("graphics/woodcuts/elements/mountain-range.svg") center bottom / contain no-repeat;
}
.chan-guides { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; font-family: var(--font-label); font-size: 30px; font-weight: 700; letter-spacing: var(--track-meta); text-transform: uppercase }
.show-guides .chan-guides { display: block }
.chan-guides i { position: absolute; top: calc(50% - var(--yt-strip-h) / 2); height: var(--yt-strip-h); border: 5px dashed currentColor; opacity: .55; font-style: normal; padding: 10px 16px }
.chan-guides__strip { left: 0; right: 0 }
.chan-guides__safe { left: calc(50% - var(--yt-safe-w) / 2); width: var(--yt-safe-w) }

/* Avatar: 800×800, shown as a circle. --logo is the current mark (fails below ~48px); --swallow and --seal are proposals */
.chan-avatar { width: var(--yt-avatar); height: var(--yt-avatar); display: grid; place-items: center; overflow: hidden; background: var(--white); color: var(--ink) }
.chan-avatar > img { width: 112%; height: 112% }
.chan-avatar > svg { width: 84%; height: auto; transform: translate(-1%, 4%) rotate(-20deg) }
.chan-avatar--paper { background: var(--paper) }
.chan-avatar--night { background: var(--night); color: var(--chalk) }
.chan-avatar--seal > svg { width: 94%; transform: none }

/* Lower third and watermark, drawn on a 1920×1080 video frame */
.chan-video { width: var(--yt-video-w); height: var(--yt-video-h); overflow: hidden; background: var(--night) }
.chan-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.chan-lower { position: absolute; left: 96px; bottom: 112px; z-index: 2; max-width: 1000px; background: var(--white); color: var(--ink); padding: 30px 72px 36px 52px; display: grid; gap: 8px }
.chan-lower::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(2px - var(--thumb-tear)); height: var(--thumb-tear); background: inherit;
  -webkit-mask: url("TEAR") 0 0 / 100% 100% no-repeat;
          mask: url("TEAR") 0 0 / 100% 100% no-repeat;
}
.chan-lower__label { font-family: var(--font-label); font-size: var(--yt-l3-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted) }
.chan-lower__name { font-family: var(--font-display); font-size: var(--yt-l3-name); font-weight: 400; line-height: 1; margin: 6px 0 0 }
.chan-lower__role { font-size: var(--yt-l3-role); font-weight: 300; line-height: 1.25; color: var(--muted) }
.chan-watermark { position: absolute; right: 56px; bottom: 56px; z-index: 2; width: var(--yt-watermark); opacity: .92 }