/* Seeds of Renaissance components
   Extracted from the home and manifesto mockups (v7) and the four-page mockup (v2).
   GENERATED from components.src.css; edit that, then run build-css.py. Source: 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}
: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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); 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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 7.5 L7 8.5 L12 4.0 L28 4.3 L44 3.8 L60 6.0 L65 9.1 L70 6.4 L86 8.9 L102 4.7 L109 11.8 L125 16.3 L141 11.2 L146 16.7 L151 10.8 L158 7.1 L165 10.6 L181 7.3 L188 4.4 L204 11.9 L213 4.4 L218 10.9 L234 5.9 L250 9.0 L259 9.5 L271 8.1 L278 14.1 L285 4.1 L294 10.4 L303 13.2 L312 11.5 L317 4.7 L329 5.3 L338 5.1 L350 8.9 L355 13.7 L371 14.0 L380 7.8 L389 11.3 L405 14.2 L410 14.8 L419 9.6 L424 3.8 L433 12.1 L445 7.0 L457 15.4 L466 3.3 L478 8.0 L494 4.6 L499 6.1 L508 4.8 L515 8.6 L527 4.1 L539 8.6 L548 15.4 L560 15.1 L569 12.9 L578 12.6 L590 16.4 L597 4.2 L604 6.2 L611 3.2 L627 5.6 L636 3.1 L648 10.5 L664 10.9 L671 12.7 L687 16.3 L692 9.4 L708 8.5 L720 8.5 L732 11.9 L737 5.7 L744 9.2 L749 7.8 L754 4.4 L770 5.1 L775 16.3 L791 3.4 L798 11.6 L805 11.9 L814 11.4 L826 4.7 L838 16.9 L850 9.7 L859 4.2 L864 13.5 L873 9.7 L880 10.2 L887 16.3 L903 8.1 L919 15.8 L935 7.2 L940 12.7 L949 10.3 L956 8.0 L963 10.5 L979 7.6 L986 11.6 L993 14.3 L1005 13.4 L1012 5.8 L1024 8.0 L1029 16.9 L1038 9.6 L1045 12.7 L1054 9.3 L1063 16.4 L1072 4.1 L1077 6.2 L1084 7.7 L1096 11.7 L1112 14.8 L1124 15.7 L1133 14.2 L1138 14.7 L1143 15.7 L1150 9.7 L1157 9.1 L1166 4.2 L1178 9.5 L1183 13.1 L1190 16.9 L1195 5.1 L1200 24 Z'/%3E%3C/svg%3E") 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 }