/* StratfordX Hyperstudio — site stylesheet */

/* ---------- tokens ---------- */
:root {
  --carbon: #0A0C0D;
  --ink-2: #0D1012;
  --paper: #EDEDE8;
  --ink: #1A1D1E;
  --white: #F4F5F2;
  --pure: #FFFFFF;
  --ti: #A8AA9F;
  --ti-light: #CFD1C9;
  --acid: #C7FF18;
  --coral: #FF5A3D;
  --blue: #9CC3DE;
  --red: #D9432B;
  --grey: #5C5F58;
  --slate: #3C403B;

  --hair: rgba(168, 170, 159, .14);
  --hair-2: rgba(168, 170, 159, .18);
  --hair-3: rgba(168, 170, 159, .20);
  --hair-4: rgba(168, 170, 159, .16);
  --hair-dark: rgba(26, 29, 30, .16);
  --hair-dark-2: rgba(26, 29, 30, .25);

  --cond: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;

  --pad-x: clamp(24px, 6vw, 120px);
  --pad-y: clamp(80px, 12vh, 160px);
  --pad-y-lg: clamp(90px, 14vh, 180px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html {
  background: var(--carbon);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--carbon);
  color: var(--ti);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--coral); }
a:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 400; margin: 0; }
::selection { background: var(--acid); color: var(--carbon); }

/* ---------- animation ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sweep { 0% { transform: translateY(-8%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(108%); opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.anim-fade { animation: fade 1.6s ease both; }
.anim-rise { animation: rise 1.4s .3s ease both; }
.anim-rise-2 { animation: rise 1.4s .55s ease both; }
.anim-rise-3 { animation: rise 1.4s .8s ease both; }
.anim-pulse { animation: pulse 2.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim-fade, .anim-rise, .anim-rise-2, .anim-rise-3, .anim-pulse, .sweep { animation: none; }
}

/* ---------- masthead ---------- */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  padding: 18px clamp(20px, 4vw, 56px);
  background: linear-gradient(var(--carbon) 60%, rgba(10, 12, 13, 0));
  pointer-events: none;
}

.masthead a { pointer-events: auto; }

.wordmark {
  font-family: var(--cond);
  font-size: 19px;
  letter-spacing: .22em;
  color: var(--white);
  white-space: nowrap;
}

.wordmark span { color: var(--coral); }

.masthead-spacer { margin-left: auto; }

.masthead-label {
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--ti);
  opacity: .7;
  white-space: nowrap;
}

.navlink {
  font-family: var(--cond);
  font-size: 12px;
  letter-spacing: .3em;
  white-space: nowrap;
  color: var(--ti);
}

.navlink:hover { color: var(--coral); }
.navlink[aria-current="page"] { color: var(--white); }

/* ---------- sections ---------- */
.section {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--hair);
}

.section--lg { padding: var(--pad-y-lg) var(--pad-x); }
.section--flush { padding-left: 0; padding-right: 0; }
.section--ink-2 { background: var(--ink-2); }
.section--carbon { background: var(--carbon); }
.section--gradient { background: linear-gradient(#111517, #3A3E3C); }
.section--top { border-top: 0; }

.section--paper {
  background: var(--paper);
  color: var(--ink);
  border-top-color: var(--hair-dark);
}

.section--paper h1,
.section--paper h2,
.section--paper h3 { color: var(--ink); }

.inset { padding: 0 var(--pad-x); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-top: 0;
}

.hero--left {
  min-height: 96vh;
  place-items: stretch;
  align-items: center;
  padding: clamp(90px, 14vh, 160px) var(--pad-x);
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(105% 70% at 50% 58%, #23282A 0%, #14181A 38%, var(--carbon) 78%);
}

.hero-bg--left { background: radial-gradient(100% 70% at 38% 54%, #23282A 0%, #14181A 40%, var(--carbon) 80%); }
.hero-bg--studio { background: radial-gradient(100% 72% at 42% 56%, #23282A 0%, #14181A 40%, var(--carbon) 80%); }

.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(168, 170, 159, .06) 0%, rgba(168, 170, 159, 0) 40%);
}

.hero-cap {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(var(--carbon), rgba(10, 12, 13, 0));
}

.hero-body {
  position: relative;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
}

.hero-body--left { padding: 0; text-align: left; }

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--acid);
}

.scroll-cue--left {
  left: var(--pad-x);
  right: auto;
  text-align: left;
  white-space: nowrap;
}

.scroll-cue--coral { color: var(--coral); }

/* ---------- type ---------- */
.display {
  font-family: var(--cond);
  font-size: clamp(34px, 6.4vw, 110px);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--white);
}

.display--origin { font-size: clamp(34px, 6.6vw, 120px); line-height: .96; max-width: 16ch; }
.display--studio { font-size: clamp(34px, 7vw, 130px); line-height: .94; max-width: 17ch; }

.h1 {
  font-family: var(--cond);
  font-size: clamp(34px, 7vw, 130px);
  line-height: .92;
  color: var(--white);
  max-width: 18ch;
}

.h1--xl {
  font-size: clamp(44px, 11vw, 200px);
  line-height: .88;
  letter-spacing: -.02em;
  max-width: none;
}

.h2 {
  font-family: var(--cond);
  font-size: clamp(30px, 5vw, 84px);
  line-height: .95;
  color: var(--white);
}

.h2--era { font-size: clamp(28px, 4.4vw, 72px); line-height: .98; }
.h2--pillar { font-size: clamp(34px, 6vw, 104px); line-height: .92; }
.h2--box { font-size: clamp(30px, 5.6vw, 100px); line-height: .96; max-width: 15ch; }

.h3 {
  font-family: var(--cond);
  font-size: clamp(26px, 4vw, 64px);
  line-height: 1.02;
  color: var(--white);
}

.h3--wide { font-size: clamp(28px, 4.6vw, 78px); }

.kicker {
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ti);
}

.kicker--lg { font-size: clamp(12px, 1.1vw, 14px); letter-spacing: .42em; }
.kicker--blue { color: var(--blue); }
.kicker--coral { color: var(--coral); }
.kicker--red { color: var(--red); }
.kicker--grey { color: var(--grey); }
.kicker--space { letter-spacing: .34em; font-size: 11px; }

.lede {
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--ti);
  max-width: 56ch;
  text-wrap: pretty;
}

.lede--lg { font-size: clamp(15px, 1.7vw, 22px); max-width: 62ch; }
.lede--dark { color: var(--slate); }
.lede--light { color: var(--ti-light); }

.body-copy {
  font-size: clamp(15px, 1.6vw, 21px);
  color: var(--ti);
  max-width: 50ch;
  text-wrap: pretty;
}

.note {
  font-size: 12px;
  color: var(--ti);
  opacity: .6;
  max-width: 80ch;
}

.acid { color: var(--acid); }
.coral { color: var(--coral); }
.blue { color: var(--blue); }
.red { color: var(--red); }
.white { color: var(--white); }
.ti { color: var(--ti); }

/* ---------- spacing utilities ---------- */
.mt-xs { margin-top: 10px; }
.mt-s { margin-top: 18px; }
.mt-m { margin-top: clamp(22px, 3vh, 38px); }
.mt-l { margin-top: clamp(40px, 6vh, 80px); }
.mt-xl { margin-top: clamp(70px, 11vh, 150px); }

/* ---------- grids ---------- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.cols--narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cols--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 44px); }
.cols--end { align-items: end; }
.cols--center { align-items: center; }

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(30px, 5vw, 90px);
  align-items: flex-start;
}

.split > .split-text { flex: 1 1 320px; }
.split > .split-list { flex: 1 1 300px; max-width: 52ch; }
.split > .split-copy { flex: 1 1 340px; }
.split > .split-plate { flex: 1.7 1 380px; }
.split > .split-bio { flex: 1 1 300px; max-width: 46ch; }

/* ---------- chamber headings ---------- */
.chamber-head {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(40px, 6vh, 72px);
}

.era-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(20px, 3vh, 36px);
}

.numeral {
  font-family: var(--cond);
  font-size: clamp(40px, 7vw, 120px);
  line-height: .8;
}

.numeral--era { font-size: clamp(36px, 6vw, 96px); }

/* ---------- blueprint frame ---------- */
.frame {
  position: relative;
  border: 1px solid var(--hair-3);
  color: var(--blue);
}

.frame--dark { border-color: var(--hair-dark-2); }
.frame--coral { color: var(--coral); }
.frame--acid { color: var(--acid); }
.frame--red { color: var(--red); }
.frame--carbon { color: var(--carbon); }

.frame > .mark {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}

.frame > .mark::before,
.frame > .mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.frame > .mark::before { left: 0; right: 0; top: 5px; height: 1px; }
.frame > .mark::after { top: 0; bottom: 0; left: 5px; width: 1px; }

.mark.tl { left: -6px; top: -6px; }
.mark.tr { right: -6px; top: -6px; }
.mark.bl { left: -6px; bottom: -6px; }
.mark.br { right: -6px; bottom: -6px; }

.frame--pad { padding: clamp(24px, 4vw, 56px); overflow: hidden; }
.frame--pad-s { padding: clamp(20px, 2.4vw, 34px); }
.frame--pad-m { padding: clamp(22px, 3vw, 40px); }

/* ---------- plates ---------- */
.plate {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plate--contain img { object-fit: contain; }

.ar-evidence { aspect-ratio: 827 / 469; }
.ar-bleed { aspect-ratio: 1663 / 700; }
.ar-roundtrip { aspect-ratio: 1536 / 1024; }
.ar-array { aspect-ratio: 760 / 505; }
.ar-subject { height: clamp(120px, 16vh, 190px); }

/* ---------- gauges ---------- */
.sweep {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(156, 195, 222, 0), var(--blue), rgba(156, 195, 222, 0));
  animation: sweep 4.2s linear infinite;
}

.gauge-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--cond);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--ti);
  margin-bottom: clamp(28px, 4vh, 48px);
}

.gauges { display: grid; gap: clamp(26px, 4vh, 44px); }

.gauge-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.gauge-name {
  font-family: var(--cond);
  font-size: clamp(18px, 2.4vw, 34px);
  letter-spacing: .06em;
  color: var(--white);
}

.gauge-value {
  font-family: var(--cond);
  font-size: clamp(28px, 4vw, 62px);
  line-height: 1;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.track {
  height: 3px;
  background: var(--hair-2);
  margin: 12px 0 10px;
}

.track > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .18s linear;
}

.track--coral > span { background: var(--coral); }

.gauge-note {
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--ti);
  max-width: 72ch;
  text-wrap: pretty;
}

.readout {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: clamp(280px, 42vh, 460px);
  padding: clamp(32px, 6vw, 90px) clamp(24px, 4vw, 56px);
}

.readout-figure {
  font-family: var(--cond);
  font-size: clamp(56px, 14vw, 220px);
  line-height: .82;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  margin: 14px 0 0;
}

.readout-figure.resolved { color: var(--acid); }

.index-figure {
  font-family: var(--cond);
  font-size: clamp(64px, 12vw, 190px);
  line-height: .85;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 16px;
}

/* ---------- cards ---------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-role {
  font-family: var(--cond);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  color: var(--white);
}

.card-note {
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--ti);
  text-wrap: pretty;
}

/* ---------- hairline cells ---------- */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--carbon);
}

.cells--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cells--quad { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cells--steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); background: var(--paper); }

.cell {
  box-shadow: 0 0 0 1px var(--hair-4);
  padding: clamp(18px, 2vw, 28px);
  font-family: var(--cond);
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .04em;
  color: var(--white);
}

.cell--lg { padding: clamp(22px, 3vw, 40px); }
.cell--converge { font-size: clamp(16px, 1.9vw, 26px); letter-spacing: .05em; }
.cell--step { box-shadow: 0 0 0 1px var(--hair-dark); padding: clamp(16px, 2vw, 26px); font-size: clamp(14px, 1.5vw, 20px); letter-spacing: .06em; color: var(--ink); }

.cell-title {
  font-family: var(--cond);
  font-size: clamp(22px, 3vw, 46px);
  line-height: 1;
  letter-spacing: .04em;
}

/* ---------- hairline rows ---------- */
.rows { display: grid; gap: 0; }
.rows--measure { max-width: 60ch; }

.rows > li,
.rows > div {
  border-top: 1px solid var(--hair-2);
  padding: clamp(12px, 1.8vh, 18px) 0;
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--white);
  list-style: none;
}

.rows > li:last-child,
.rows > div:last-child { border-bottom: 1px solid var(--hair-2); }

.rows--tall > li,
.rows--tall > div { padding: clamp(14px, 2vh, 22px) 0; font-size: clamp(15px, 1.6vw, 21px); }

.rows--paper > div { border-top-color: var(--hair-dark); color: var(--ink); padding: clamp(16px, 2.4vh, 26px) 0; }
.rows--paper > div:last-child { border-bottom-color: var(--hair-dark); }

.rows--voice > div {
  border-top-color: var(--hair-dark);
  font-family: var(--cond);
  font-size: clamp(20px, 2.8vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  padding: clamp(12px, 1.8vh, 20px) 0;
}

.rows--voice > div:last-child { border-bottom-color: var(--hair-dark); color: var(--red); }

.row-term {
  font-family: var(--cond);
  font-size: clamp(19px, 2.4vw, 34px);
  letter-spacing: .06em;
  color: var(--ink);
}

.row-gloss { font-size: clamp(14px, 1.4vw, 18px); color: var(--slate); margin-top: 8px; }

ul.rows { margin: 0; padding: 0; }

/* ---------- word runs ---------- */
.run {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(18px, 3vw, 44px);
  font-family: var(--cond);
  font-size: clamp(14px, 1.6vw, 24px);
  letter-spacing: .12em;
  color: var(--ti);
}

.run > span { white-space: nowrap; }

.run--eras {
  gap: 0 clamp(16px, 3vw, 44px);
  font-size: clamp(13px, 1.5vw, 21px);
  letter-spacing: .14em;
  border-top: 1px solid var(--hair);
  margin-top: clamp(40px, 6vh, 86px);
  padding-top: clamp(24px, 3.5vh, 40px);
}

.run--caps {
  gap: 0 clamp(18px, 3vw, 40px);
  font-size: clamp(14px, 1.5vw, 20px);
  color: var(--grey);
  margin-top: clamp(24px, 4vh, 40px);
}

.statement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  font-family: var(--cond);
  font-size: clamp(22px, 3.4vw, 56px);
  letter-spacing: .02em;
}

.statement--rule {
  border-top: 1px solid var(--hair);
  padding-top: clamp(28px, 4vh, 56px);
  gap: clamp(12px, 3vw, 40px);
  font-size: clamp(20px, 3vw, 48px);
}

.couplet {
  font-family: var(--cond);
  font-size: clamp(28px, 5.4vw, 96px);
  line-height: 1.02;
  color: var(--white);
  max-width: 24ch;
}

/* ---------- credit roll ---------- */
.credits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 4vw, 64px);
  margin-bottom: clamp(44px, 7vh, 96px);
  font-family: var(--cond);
  font-size: clamp(15px, 2vw, 30px);
  letter-spacing: .26em;
  color: var(--grey);
}

.credits > span {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s ease;
}

.credits > span.lit { opacity: 1; }

/* ---------- convergence ---------- */
.converge { text-align: center; overflow: hidden; padding: clamp(90px, 15vh, 200px) var(--pad-x); }

.converge-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(20px, 6vw, 96px);
  font-family: var(--cond);
  font-size: clamp(14px, 2vw, 30px);
  letter-spacing: .18em;
  color: var(--ti);
  transition: gap 1.5s cubic-bezier(.4, 0, .2, 1), opacity 1.5s ease;
}

.converge-words > span { white-space: nowrap; }

.converge.is-converged .converge-words { gap: 0 14px; opacity: .32; }

.converge-result {
  font-family: var(--cond);
  font-size: clamp(40px, 11vw, 200px);
  line-height: .9;
  letter-spacing: -.01em;
  color: var(--acid);
  margin-top: clamp(34px, 5vh, 70px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s ease 1s, transform 1.2s cubic-bezier(.4, 0, .2, 1) 1s;
}

.converge.is-converged .converge-result { opacity: 1; transform: translateY(0); }

.centered { display: grid; place-items: center; text-align: center; }

.lockup {
  font-family: var(--cond);
  font-size: clamp(26px, 4.6vw, 86px);
  line-height: 1;
  letter-spacing: .1em;
  color: var(--white);
}

.lockup span { color: var(--coral); }

.triad {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px);
  margin-top: clamp(22px, 3.5vh, 40px);
  font-family: var(--cond);
  font-size: clamp(13px, 1.6vw, 22px);
  letter-spacing: .3em;
  color: var(--acid);
}

.triad > span { white-space: nowrap; }
.triad > .sep { color: var(--blue); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(168, 170, 159, .4);
  color: var(--white);
  font-family: var(--cond);
  font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: .2em;
  padding: 16px 28px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.btn:hover { border-color: var(--coral); color: var(--coral); }

.btn--solid { background: var(--white); border-color: var(--white); color: var(--carbon); }
.btn--solid:hover { background: var(--coral); border-color: var(--coral); color: var(--carbon); }

.btn--dark { background: var(--carbon); border-color: var(--carbon); color: var(--paper); font-size: clamp(16px, 1.8vw, 22px); }
.btn--dark:hover { background: var(--coral); border-color: var(--coral); color: var(--carbon); }

.doors { flex: 1 1 340px; display: grid; gap: 12px; }

.door {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(168, 170, 159, .35);
  color: var(--white);
  font-family: var(--cond);
  font-size: clamp(17px, 2vw, 28px);
  letter-spacing: .16em;
  padding: clamp(18px, 2.4vh, 26px) clamp(20px, 2.4vw, 30px);
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}

.door:hover { border-color: var(--coral); color: var(--coral); }
.door span { color: var(--coral); }

/* ---------- colophon ---------- */
.colophon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(44px, 7vh, 90px);
  align-items: start;
}

.colophon-mark {
  font-family: var(--cond);
  font-size: clamp(20px, 2.4vw, 34px);
  letter-spacing: .14em;
  color: var(--carbon);
}

.colophon-mark span { color: var(--coral); }

.colophon-process {
  font-family: var(--cond);
  font-size: clamp(16px, 1.8vw, 24px);
  letter-spacing: .2em;
  color: var(--grey);
  margin-top: 10px;
}

.colophon-copy {
  font-size: clamp(15px, 1.6vw, 20px);
  color: #2C2F2B;
  max-width: 54ch;
  text-wrap: pretty;
}

.promise {
  font-family: var(--cond);
  font-size: clamp(20px, 3vw, 52px);
  line-height: 1.1;
  color: #2C2F2B;
  margin-top: clamp(24px, 3.5vh, 44px);
  max-width: 22ch;
}

/* ---------- intro statement ---------- */
.intro-lead {
  font-family: var(--cond);
  font-size: clamp(24px, 3.7vw, 60px);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--pure);
  max-width: none;
  text-wrap: pretty;
  margin: 0;
}

.intro-body {
  font-family: var(--body);
  font-size: clamp(16px, 1.8vw, 25px);
  line-height: 1.45;
  color: var(--ti);
  max-width: 78ch;
  text-wrap: pretty;
  margin: clamp(24px, 3.5vh, 44px) 0 0;
}

.intro-turn {
  font-family: var(--body);
  font-size: clamp(17px, 2vw, 27px);
  line-height: 1.4;
  color: var(--ti);
  max-width: 62ch;
  text-wrap: pretty;
  margin: clamp(26px, 4vh, 46px) 0 0;
}

/* ---------- roles (text only, no plates) ---------- */
.roles > div { padding: clamp(18px, 2.6vh, 30px) 0; }
.role-name { font-family: var(--cond); font-size: clamp(19px, 2.3vw, 32px); letter-spacing: .1em; color: var(--white); line-height: 1; }
.role-note { font-family: var(--body); font-size: clamp(14px, 1.5vw, 19px); line-height: 1.5; color: var(--ti); max-width: 58ch; margin-top: 10px; text-wrap: pretty; }

.duality {
  font-family: var(--cond);
  font-size: clamp(14px, 1.9vw, 26px);
  letter-spacing: .2em;
  line-height: 1.3;
  color: var(--ti);
  margin: clamp(20px, 3vh, 34px) 0 0;
}

/* grid children must be allowed to shrink, and long display words must break
   rather than overlap if the condensed webfont fails to load */
.cols > *, .split > * { min-width: 0; }
.h2--era, .h2--pillar, .display, .h1 { overflow-wrap: break-word; }

.ar-wide { aspect-ratio: 1900 / 812; }