/* Elwood Research v3.3.1: page styles on top of the scrollcraft floor.
   Tokens first; the engine's device selectors are never restyled here. */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans.woff2") format("woff2-variations"), url("/assets/fonts/mona-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono.woff2") format("woff2-variations"), url("/assets/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas: #0b0d0f;
  --sc-surface: #13171a;
  --sc-ink: #edeeea;
  --sc-ink-soft: #9aa3a8;
  --sc-accent: #ff6b2c;
  --sc-accent-ink: #0b0d0f;
  --sc-font-display: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;
  --sc-shadow-color: 210 30% 3%;

  /* for the canvas, as rgb triplets */
  --field-ink: 237,238,234;
  --field-accent: 255,107,44;
  --field-ground: 11,13,15;

  --el-ink-faint: #6d777d;
  --el-bar: 64px;
  --el-accent-hover: #ff8246;
  --el-display-stretch: 112%;
}

html { background: var(--sc-canvas); }
body { font-weight: 420; letter-spacing: 0.002em; line-height: 1.64; }
.sc-display { font-weight: 560; font-stretch: var(--el-display-stretch); letter-spacing: -0.038em; }
.sc-display--md { letter-spacing: -0.03em; }
.sc-body { color: var(--sc-ink-soft); }
.sc-lede { font-weight: 440; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--sc-gutter); top: -100px; z-index: 100; background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6rem 1rem; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------ the field -- */
.field {
  position: fixed; inset: 0;
  width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none;
}

/* Smooth wheel scrolling (Lenis). The engine sets scroll-behavior: smooth,
   which must be off while Lenis drives the position every frame. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* ------------------------------------------------------------- the bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--el-bar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding-inline: var(--sc-gutter);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.bar.is-solid { background-color: color-mix(in oklab, var(--sc-canvas) 92%, transparent); box-shadow: 0 1px 0 var(--sc-hairline); }
.mark { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--sc-ink); }
.mark svg { width: 26px; height: 26px; flex: none; }
.mark__word { font-stretch: 122%; font-weight: 640; font-size: 0.95rem; letter-spacing: 0.015em; line-height: 1; white-space: nowrap; }
.mark__word span { color: var(--sc-ink-soft); font-weight: 480; }
.bar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.bar__link { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none; padding-block: 0.4rem; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar__link:hover { color: var(--sc-ink); }
.bar__link[aria-current="page"] { color: var(--sc-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-weight: 600; font-stretch: 106%; font-size: var(--sc-t-sm); letter-spacing: 0.005em; line-height: 1;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  padding: 0.95rem 1.25rem; border-radius: var(--sc-r-sm);
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: var(--el-accent-hover); }
.btn:active { transform: scale(0.97); }
.btn--sm { padding: 0.7rem 0.95rem; font-size: 0.8125rem; }
.btn--lg { padding: 1.15rem 1.6rem; font-size: var(--sc-t-base); }
.btn:focus-visible { outline-offset: 4px; }

.link { color: var(--sc-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent); text-underline-offset: 0.25em; transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out); }
.link:hover { text-decoration-color: var(--sc-accent); }

.data { font-family: var(--sc-font-mono); font-stretch: 87.5%; font-size: var(--sc-t-xs); letter-spacing: 0.02em; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- hero -- */
.hero .sc-copy { bottom: clamp(3.5rem, 13vh, 9.5rem); max-width: min(52rem, 64vw); }
.hero__title { font-size: clamp(3rem, 1.1rem + 6.1vw, 7.4rem); max-width: 11ch; }
.hero__sub { margin-top: var(--sc-6); max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.hero__act { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }
.hero__note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.shade {
  position: absolute; pointer-events: none; z-index: 1;
  inset: auto auto 0 0; width: min(62rem, 78vw); height: 78%;
  background: radial-gradient(90% 80% at 0% 100%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 45%, transparent 75%);
}

/* ------------------------------------------------------------- signal -- */
.signal__line { position: absolute; z-index: var(--sc-z-copy); }
.signal__loud { left: var(--sc-gutter); top: 50%; translate: 0 -50%; font-size: clamp(3rem, 1rem + 6.4vw, 7.6rem); max-width: 9ch; }
.signal__quiet { left: var(--sc-gutter); top: calc(var(--el-bar) + 7vh); font-size: var(--sc-t-3xl); max-width: 12ch; }
.signal__why { right: var(--sc-gutter); bottom: clamp(3rem, 11vh, 8rem); max-width: 30rem; }
.signal__why p { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); text-wrap: pretty; }
.signal__why .data { display: block; margin-top: var(--sc-5); }

/* ----------------------------------------------------------- mandates -- */
.mandates { position: relative; z-index: 2; padding-block: clamp(3rem, 6vw, 6rem) var(--sc-section); }
.mandates__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); align-items: end; }
.mandates__head h2 { grid-column: 1 / span 8; font-size: var(--sc-t-3xl); }
.mandates__head p { grid-column: 9 / span 4; }
.mandates__grid { margin-top: clamp(4rem, 9vw, 9rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.mandate { border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-6); }
.mandate--a { grid-column: 1 / span 6; }
.mandate--b { grid-column: 7 / span 6; margin-top: clamp(6rem, 14vw, 13rem); }
.mandate__name { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.6rem); padding-bottom: 0.12em; line-height: 1; }
.mandate__kicker { margin-top: var(--sc-4); font-size: var(--sc-t-lg); color: var(--sc-ink); font-weight: 460; font-style: normal; }
.mandate__text { margin-top: var(--sc-5); max-width: 40ch; }
.cover__head { margin-top: var(--sc-7); padding-bottom: 0.8rem; border-bottom: 1px solid var(--sc-hairline); }
.cover li { padding-block: 0.8rem; border-bottom: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink); }

/* -------------------------------------------------------------- rules -- */
.rules .sc-stage { display: flex; align-items: center; }
.rail { gap: clamp(3rem, 7vw, 8rem); padding-inline: var(--sc-gutter) 12vw; align-items: stretch; }
.rail > * { flex: none; }
.rail__lead { width: min(30rem, 80vw); display: flex; flex-direction: column; justify-content: center; }
.rail__lead h2 { font-size: var(--sc-t-3xl); }
.rail__lead p { margin-top: var(--sc-5); max-width: 30ch; }
.rule { width: min(27rem, 78vw); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-6); display: flex; flex-direction: column; }
.rule h3 { font-size: var(--sc-t-2xl); max-width: 11ch; }
.rule p { margin-top: auto; padding-top: var(--sc-8); max-width: 36ch; }
.rail__end { width: min(28rem, 80vw); display: flex; flex-direction: column; justify-content: center; }
.rail__end p { font-size: var(--sc-t-2xl); line-height: 1.08; font-stretch: var(--el-display-stretch); font-weight: 540; letter-spacing: -0.03em; max-width: 13ch; }
.rail__end a { margin-top: var(--sc-6); align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .rules .rule, .rules .rail__end {
    --settle: clamp(0.5, calc(var(--sc-p, 0) * 7 - var(--i) + 2.4), 1);
    opacity: var(--settle);
    translate: 0 calc((1 - var(--settle)) * 40px);
  }
}

/* -------------------------------------------------------------- close -- */
.close .sc-copy { bottom: auto; top: 50%; translate: 0 -46%; max-width: min(46rem, 60vw); }
.close__lens { position: absolute; z-index: 0; right: 0; top: 50%; translate: 0 -46%; width: min(66vw, 1120px); height: auto; max-width: none; pointer-events: none; }
.close__title { font-size: var(--sc-t-4xl); max-width: 10ch; }
.close__text { margin-top: var(--sc-6); max-width: 38ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.close__act { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }

/* -------------------------------------------------------------- footer -- */
.foot { position: relative; z-index: 2; background: var(--sc-canvas); border-top: 1px solid var(--sc-hairline); padding: clamp(3rem, 6vw, 5rem) var(--sc-gutter) var(--sc-7); }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.foot__brand { grid-column: 1 / span 5; }
.foot__brand p { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 30ch; font-size: var(--sc-t-sm); }
.foot__nav { grid-column: 7 / span 3; display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--sc-t-sm); }
.foot__nav a, .foot__contact a { color: var(--sc-ink-soft); text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.foot__nav a:hover, .foot__contact a:hover { color: var(--sc-ink); }
.foot__contact { grid-column: 10 / span 3; font-size: var(--sc-t-sm); display: flex; flex-direction: column; gap: 0.55rem; }
.foot__legal { margin-top: clamp(3rem, 6vw, 5rem); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.foot__legal-text { grid-column: 1 / span 8; }
.foot__legal p { font-size: var(--sc-t-xs); line-height: 1.7; color: var(--el-ink-faint); max-width: 96ch; }
.foot__legal p + p { margin-top: var(--sc-3); }
.foot__legal .data { grid-column: 10 / span 3; align-self: end; color: var(--el-ink-faint); text-align: right; }

/* ============================================================ advisory == */
.page { position: relative; z-index: 2; }
.intro { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--el-bar) + 4rem) var(--sc-gutter) clamp(3.5rem, 12vh, 9rem); }
.intro__copy { position: relative; z-index: 2; max-width: min(50rem, 62vw); }
.intro__title { font-size: clamp(3rem, 1.1rem + 6.1vw, 7.4rem); max-width: 9ch; }
.intro__sub { margin-top: var(--sc-6); max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.intro__act { margin-top: var(--sc-7); }

.chapter { position: relative; padding-block: var(--sc-section); }
.chapter--tight { padding-top: clamp(3rem, 6vw, 5rem); }

.letter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.letter__side { grid-column: 1 / span 4; }
.letter__side h2 { font-size: var(--sc-t-2xl); max-width: 9ch; }
.letter__meta { margin-top: var(--sc-6); display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.letter__body { grid-column: 6 / span 7; }
.letter__body p { font-size: var(--sc-t-lg); line-height: 1.6; color: var(--sc-ink); max-width: 36em; }
.letter__body p + p { margin-top: var(--sc-5); }
.letter__sign { margin-top: var(--sc-7); display: flex; align-items: baseline; gap: var(--sc-4); flex-wrap: wrap; }
.letter__sign strong { font-weight: 600; font-stretch: 110%; font-size: var(--sc-t-lg); }
.letter__book { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: flex; justify-content: space-between; gap: var(--sc-6); align-items: baseline; flex-wrap: wrap; }
.letter__book p { font-size: var(--sc-t-base); color: var(--sc-ink-soft); max-width: 44ch; }

.theses h2 { font-size: var(--sc-t-3xl); max-width: 12ch; }
.theses__pair { margin-top: clamp(3rem, 7vw, 7rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--sc-hairline-strong); }
.thesis { padding: var(--sc-7) var(--sc-7) 0 0; }
.thesis + .thesis { padding-left: var(--sc-7); border-left: 1px solid var(--sc-hairline); }
.thesis h3 { font-size: var(--sc-t-2xl); max-width: 12ch; padding-bottom: 0.12em; line-height: 1.02; }
.thesis .data { display: block; margin-bottom: var(--sc-5); }
.thesis p { margin-top: var(--sc-5); max-width: 44ch; }

/* the ten-lens dial */
.lenses .sc-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); align-items: center; padding: calc(var(--el-bar) + 2rem) var(--sc-gutter) 2rem; }
.lenses__intro { grid-column: 1 / span 4; }
.lenses__intro h2 { font-size: var(--sc-t-2xl); max-width: 11ch; }
.lenses__intro p { margin-top: var(--sc-5); max-width: 32ch; }
.lenses__index { margin-top: var(--sc-6); display: grid; gap: 0; }
.lenses__index button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 0.8rem;
  font-size: var(--sc-t-sm); color: var(--el-ink-faint); padding: 0.2rem 0; border-radius: var(--sc-r-sm);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.lenses__index button::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width var(--sc-d-base) var(--sc-ease-out); }
.lenses__index button:hover { color: var(--sc-ink-soft); }
.lenses__index button[aria-current="true"] { color: var(--sc-ink); }
.lenses__index button[aria-current="true"]::before { width: 28px; background: var(--sc-accent); }
.lenses__index button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.dial { grid-column: 6 / span 7; position: relative; width: min(100%, 38rem); aspect-ratio: 1; justify-self: center; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial__read { position: absolute; inset: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dial__count { font-family: var(--sc-font-mono); font-stretch: 87.5%; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.dial__name { margin-top: var(--sc-4); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.6rem); font-stretch: var(--el-display-stretch); font-weight: 560; letter-spacing: -0.03em; line-height: 1.04; text-wrap: balance; }
.dial__q { margin-top: var(--sc-4); color: var(--sc-ink-soft); max-width: 24ch; font-size: var(--sc-t-base); line-height: 1.5; text-wrap: balance; }
.dial__foot { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--sc-4); text-align: center; font-size: var(--sc-t-sm); }

.discipline__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); align-items: end; }
.discipline__head h2 { grid-column: 1 / span 7; font-size: var(--sc-t-3xl); max-width: 10ch; }
.discipline__head p { grid-column: 9 / span 4; }
.discipline__list { margin-top: clamp(3rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--sc-6); }
.discipline__list > div { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-6); padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.discipline__list dt { font-size: var(--sc-t-xl); font-weight: 560; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; }
.discipline__list dd { color: var(--sc-ink-soft); }

.record h2 { font-size: var(--sc-t-3xl); max-width: 9ch; }
.record__wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.record__wrap > header { grid-column: 1 / span 4; }
.record__wrap > header p { margin-top: var(--sc-5); max-width: 30ch; }
.ledger { grid-column: 6 / span 7; width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; font-weight: 400; padding: 0 0 0.9rem; border-bottom: 1px solid var(--sc-hairline-strong); }
.ledger td { padding: 1.4rem 0; border-bottom: 1px solid var(--sc-hairline); vertical-align: baseline; }
.ledger .num { text-align: right; }
.ledger__asset { font-size: var(--sc-t-lg); font-weight: 520; }
.ledger__tick { margin-left: 0.6rem; }
.ledger__mult { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); font-weight: 560; font-stretch: 108%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.ledger__x { font-size: 0.5em; color: var(--sc-ink-soft); margin-left: 0.08em; }
.thesis__kicker { font-size: var(--sc-t-sm); margin-bottom: var(--sc-5); }

.dial__arc { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 16%, transparent); stroke-width: 2.5; stroke-linecap: butt; transition: stroke var(--sc-d-base) var(--sc-ease-out), stroke-width var(--sc-d-base) var(--sc-ease-out); }
.dial__arc[data-state="done"] { stroke: color-mix(in oklab, var(--sc-ink) 55%, transparent); }
.dial__arc[data-state="now"] { stroke: var(--sc-accent); stroke-width: 4.5; }
.dial__hit { fill: none; stroke: transparent; stroke-width: 30; pointer-events: stroke; cursor: pointer; }
.dial__ticks { position: absolute; inset: 0; will-change: transform; transform-origin: 50% 50%; }
.record__note { grid-column: 6 / span 7; margin-top: var(--sc-5); font-size: var(--sc-t-xs); line-height: 1.7; color: var(--el-ink-faint); max-width: 70ch; }

.desk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.desk__head { grid-column: 1 / span 5; }
.desk__head h2 { font-size: var(--sc-t-3xl); max-width: 9ch; }
.desk__head p { margin-top: var(--sc-5); max-width: 32ch; }
.desk__list { grid-column: 7 / span 6; }
.desk__list li { padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-6); }
.desk__list h3 { font-size: var(--sc-t-xl); font-weight: 560; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.1; }
.desk__list p { color: var(--sc-ink-soft); }
.terms { grid-column: 7 / span 6; margin-top: var(--sc-4); padding: var(--sc-6); background: var(--sc-surface); box-shadow: var(--sc-edge), var(--sc-e2); display: flex; align-items: center; justify-content: space-between; gap: var(--sc-6); flex-wrap: wrap; }
.terms p { color: var(--sc-ink); font-size: var(--sc-t-base); max-width: 34ch; }
.terms .data { display: block; margin-top: 0.5rem; }

.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-6); }
.faq > h2 { grid-column: 1 / span 4; font-size: var(--sc-t-3xl); max-width: 8ch; }
.faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--sc-hairline-strong); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-6);
  padding: 1.4rem 0; font-size: var(--sc-t-lg); font-weight: 520; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.faq details p { padding: 0 0 1.6rem; max-width: 60ch; color: var(--sc-ink-soft); }

.coda { position: relative; min-height: 88svh; display: flex; align-items: center; padding: var(--sc-section) var(--sc-gutter); }
.coda__copy { position: relative; z-index: 2; max-width: min(46rem, 60vw); }
.coda__title { font-size: var(--sc-t-4xl); max-width: 9ch; }
.coda p { margin-top: var(--sc-6); max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.coda__act { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }

/* ------------------------------------------------------------ 404 page -- */
.lost { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--el-bar) + 4rem) var(--sc-gutter) clamp(3.5rem, 12vh, 9rem); }
.lost__copy { position: relative; z-index: 2; max-width: 40rem; }
.lost h1 { font-size: var(--sc-t-3xl); max-width: 12ch; }
.lost p { margin-top: var(--sc-5); color: var(--sc-ink-soft); max-width: 36ch; }
.lost .btn { margin-top: var(--sc-7); }

/* ------------------------------------------------------------- desktop -- */
@media (min-width: 861px) {
  /* The homepage's first screen: the hero's own buttons are the ask, so the bar's
     Advisory and Request access wait and return as soon as the page moves. */
  .bar__nav { transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 0s; }
  .bar.bar--rest .bar__nav { opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
    transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 180ms; }
}

/* -------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  /* One ask at a time: the bar's button steps aside while a big one is on screen. */
  .bar .btn { transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 0s, background-color var(--sc-d-fast) var(--sc-ease-out); }
  .bar.bar--quiet .btn { opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
    transition: opacity 180ms var(--sc-ease-out), transform 180ms var(--sc-ease-out), visibility 0s linear 180ms; }
  /* Twelve columns with 2rem gaps need ~352px before any content, which is
     wider than most phones. On phones every grid is one column. */
  .mandates__head, .mandates__grid, .foot__top, .foot__legal, .letter, .discipline__head,
  .discipline__list, .record__wrap, .desk, .faq { grid-template-columns: minmax(0, 1fr); }
  .hero .sc-copy, .close .sc-copy { max-width: none; }
  .hero__title { font-size: clamp(2.7rem, 1.4rem + 7vw, 4.2rem); }
  .shade { width: 100%; height: 70%; background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 60%, transparent) 50%, transparent 100%); }
  .signal__loud { font-size: clamp(2.8rem, 1.2rem + 8vw, 4.6rem); top: auto; bottom: 14vh; translate: none; }
  .signal__quiet { font-size: var(--sc-t-2xl); top: calc(var(--el-bar) + 3vh); }
  .signal__why { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 7vh; max-width: none; }
  .mandates__head h2, .mandates__head p { grid-column: 1 / -1; }
  .mandate--a, .mandate--b { grid-column: 1 / -1; margin-top: 0; }
  .mandate--b { margin-top: var(--sc-8); }
  .cover { grid-template-columns: 1fr; }
  .close .sc-copy { top: auto; bottom: 9vh; translate: none; }
  .close__lens { top: calc(var(--el-bar) + 1vh); right: -11vw; width: 130vw; translate: none; }
  .close__title { font-size: var(--sc-t-3xl); }
  .foot__brand, .foot__nav, .foot__contact, .foot__legal-text, .foot__legal .data { grid-column: 1 / -1; }
  .foot__legal .data { text-align: left; }
  .intro__copy, .coda__copy { max-width: none; }
  .intro__title { font-size: clamp(2.7rem, 1.4rem + 7vw, 4.2rem); }
  .letter__side, .letter__body, .record__wrap > header, .ledger, .record__note, .desk__head, .desk__list, .terms, .faq > h2, .faq__list, .discipline__head h2, .discipline__head p { grid-column: 1 / -1; }
  .letter__body { margin-top: var(--sc-6); }
  .theses__pair { grid-template-columns: 1fr; }
  .thesis, .thesis + .thesis { padding: var(--sc-7) 0 0; border-left: 0; }
  .thesis + .thesis { margin-top: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
  .discipline__list > div { grid-column: 1 / -1; grid-template-columns: 1fr; gap: var(--sc-3); }
  .desk__list li { grid-template-columns: 1fr; gap: var(--sc-3); }
  .lenses .sc-stage { grid-template-columns: 1fr; align-content: start; gap: var(--sc-5); padding-top: calc(var(--el-bar) + 1rem); }
  .lenses__intro, .dial { grid-column: 1 / -1; }
  .lenses__intro h2 { font-size: var(--sc-t-2xl); max-width: none; }
  .lenses__intro p { margin-top: var(--sc-3); }
  .lenses__index { display: none; }
  .dial { width: min(100%, 23rem); }
  .dial__read { inset: 17%; }
  .dial__q { font-size: var(--sc-t-sm); }
  .coda__title { font-size: var(--sc-t-3xl); }
}
@media (max-width: 560px) {
  .bar__link { display: none; }
  .bar { gap: var(--sc-3); }
  .mark { gap: 0.55rem; }
  .mark svg { width: 22px; height: 22px; }
  .mark__word { font-size: 0.875rem; font-stretch: 112%; }
}
@media (max-width: 350px) {
  .bar .btn--sm { padding: 0.65rem 0.7rem; font-size: 0.75rem; }
  .mark__word { font-size: 0.8125rem; font-stretch: 104%; }
}
@media (max-height: 700px) and (min-width: 861px) {
  .lenses__index { display: none; }
}