/* ==========================================================================
   Between Tokens
   --------------------------------------------------------------------------
   Two devices carry the whole design, and everything else stays quiet:

   The token cell. A sentence set in cells, spaces included, the way this
   field draws a tokenized string. It is the wordmark, and it is the hero.

   The decode strip. One mark per essay a question plans, coloured by
   position along the colormap. Written parts are filled; parts still to come
   are outlines that shorten as they get further out, because an outline that
   far ahead is a guess.

   Tokens live in tokens.css. Nothing below invents a value.
   ========================================================================== */

/* --------------------------------------------------------------- reset --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ol,
ul,
figure,
blockquote {
  margin: 0;
}

ol[class],
ul[class] {
  list-style: none;
  padding: 0;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--field);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--link-hot);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -999px;
}

.skip:focus {
  left: var(--gutter);
  top: var(--s-2);
  z-index: 10;
  background: var(--panel);
  padding: var(--s-1) var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-label);
}

/* ---------------------------------------------------------------- type --- */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* A question's own title, used as a crumb above an essay and over the series
   rail. It is a sentence, not a label, so it keeps its case. */
.eyebrow--crumb {
  text-transform: none;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-size: var(--t-meta);
}

.meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.15;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.page-lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34rem;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

a:hover {
  text-decoration-color: var(--link-hot);
}

.quiet-link {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

/* --------------------------------------------------------- token cells ---
   A cell holds one token, leading space and all — which is why white-space
   is pre. Cells alternate two tints so boundaries are readable without a
   border on every one. */

.tokens {
  display: inline;
}

.tok {
  display: inline-block;
  white-space: pre;
  padding: 0.08em 0.1em;
  margin-right: 2px;
  border-radius: 2px;
  background: var(--tint-a);
  transition: background-color 140ms ease;
}

/* Parity comes from the token's index, not its position in the DOM — cells are
   grouped into nowrap runs, so nth-child would restart at every run. */
.tok--b {
  background: var(--tint-b);
}

.tok-run {
  white-space: nowrap;
}

/* Hovering a cell names the token it holds, in the readout below. The tint
   lifts to mark which one is being read — the readout carries the content. */
.tokenized {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: var(--s-2);
  justify-items: start;
}

.tokenized .tok:hover {
  background: var(--tint-hot);
}

.hero-readout {
  min-height: 1.5em;
}

/* ------------------------------------------------------------ masthead --- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
}

.wordmark {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* The name is the thesis: what a model knows sits in the interval between one
   token and the next. So the wordmark is two cells, and the interval between
   them opens on hover. The only playful gesture on the site. */
.wordmark-gap {
  display: inline-block;
  width: 0.4em;
  height: 1px;
  margin: 0 0.25em;
  background: var(--link);
  transition: width 340ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 340ms ease;
}

.wordmark:hover .wordmark-gap {
  width: 1.6em;
  background: var(--link-hot);
}

.masthead nav {
  display: flex;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
}

.masthead nav a {
  text-decoration: none;
  color: var(--ink-3);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.masthead nav a:hover {
  color: var(--ink);
}

.masthead nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--link);
}

/* --------------------------------------------------------------- shell --- */

main {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-6);
}

/* ------------------------------------------------------------- opening ---
   The hero is a tokenized sentence. On load the cells resolve left to right,
   one decode step at a time, then stop — the page does not animate again. */

.opening {
  padding: var(--s-6) 0 var(--s-5);
  max-width: 44rem;
}

.hero {
  width: 100%;
  min-width: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.9;
  letter-spacing: -0.045em;
  word-spacing: -0.1em;
}

@media (prefers-reduced-motion: no-preference) {
  .hero .tok {
    animation: resolve 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: calc(var(--i, 0) * 34ms);
  }
}

@keyframes resolve {
  from {
    opacity: 0;
    transform: translateY(0.14em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.opening-note {
  margin-top: var(--s-4);
  max-width: 34rem;
  color: var(--ink-2);
  font-size: var(--t-lede);
}

.opening--404 {
  padding-bottom: var(--s-6);
}

/* --------------------------------------------------------------- bands ---
   A band is a threshold: the dotted cell rule, a mono label in the rail, and
   the content beside it. */

.band {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--s-4);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.band-label {
  padding-top: 0.4rem;
}

.band-body {
  min-width: 0;
}

.band-more {
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
}

.band-more a {
  text-decoration: none;
  color: var(--link);
}

.band-more a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 46rem) {
  .band {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* ---------------------------------------------------------- the strip ---
   Each mark samples the colormap at its own position: a 4px window onto a
   60rem-wide ramp, slid by --depth. That is the same operation as reading a
   value off a colorbar, which is the point. */

.strip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mark {
  display: block;
  width: var(--mark-w);
  height: var(--mark-h);
  border-radius: 1px;
}

.is-written,
.depth-mark {
  background-image: var(--ramp);
  background-size: var(--ramp-len) 100%;
  background-position: calc(var(--depth, 0) * (var(--mark-w) - var(--ramp-len))) 0;
}

/* Planned parts shorten as they get further out. --tail runs 0 → 1 across
   whatever is left, so a long outline visibly tapers. */
.is-planned {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  height: calc(var(--mark-h) * (1 - 0.38 * var(--tail, 0)));
}

.is-current {
  height: var(--mark-h-current);
}

.depth-mark {
  display: block;
  width: var(--mark-w);
  height: var(--mark-h);
  border-radius: 1px;
  margin-top: 0.42rem;
}

/* ----------------------------------------------------------- questions --- */

.question-list {
  display: grid;
  gap: 0;
}

.question {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  display: grid;
  gap: var(--s-2);
}

.question:first-child {
  padding-top: 0;
}

.question:last-child {
  border-bottom: 0;
}

.question-link {
  text-decoration: none;
  display: grid;
  gap: 0.45rem;
}

.question-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}

.question-link:hover .question-title {
  color: var(--link);
}

.question-premise {
  color: var(--ink-2);
  max-width: 34rem;
  font-size: var(--t-small);
}

.question-meter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.question-meter--head {
  margin-top: var(--s-3);
}

.question-list--full .question {
  padding: var(--s-4) 0;
}

/* ------------------------------------------------------------- essays --- */

.essay-list {
  display: grid;
}

.essay-row {
  border-bottom: 1px solid var(--hair);
}

.essay-row:last-child {
  border-bottom: 0;
}

.essay-link {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--s-2);
  padding: var(--s-3) 0;
  text-decoration: none;
  align-items: baseline;
}

/* Across questions the ordinal means nothing, so the strip mark leads. */
.essay-link--mixed {
  grid-template-columns: 1.75rem 1fr;
  align-items: start;
}

.essay-question {
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}

.essay-part {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--link);
  letter-spacing: -0.02em;
}

.essay-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.essay-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.35;
  transition: color 160ms ease;
}

.essay-link:hover .essay-title,
.essay-link:hover .essay-part {
  color: var(--link);
}

.essay-summary {
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: 1.6;
  max-width: 34rem;
}

.essay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: 0.2rem;
}

.empty {
  color: var(--ink-3);
  font-size: var(--t-small);
}

.outline {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.outline-list {
  margin: var(--s-2) 0 0;
  padding-left: 1.1rem;
  color: var(--ink-3);
  font-size: var(--t-small);
  display: grid;
  gap: 0.4rem;
}

.outline-list li::marker {
  color: var(--hair-strong);
}

/* --------------------------------------------------------- consulting --- */

.consulting {
  display: grid;
  gap: var(--s-3);
}

.consulting-pitch {
  font-size: var(--t-lede);
  line-height: 1.6;
  max-width: 32rem;
  color: var(--ink-2);
}

.consulting-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.button {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--panel);
  background: var(--map-1);
  padding: 0.75rem 1.3rem;
  border-radius: 2px;
  transition: background 160ms ease;
}

.button:hover {
  background: var(--map-2);
}

@media (prefers-color-scheme: dark) {
  .button {
    color: var(--field);
    background: var(--link);
  }
  .button:hover {
    background: var(--link-hot);
  }
}

/* ---------------------------------------------------------- page heads --- */

.page-head {
  padding: var(--s-5) 0 var(--s-3);
  display: grid;
  gap: var(--s-2);
  max-width: 42rem;
}

.page-head .eyebrow + .page-title {
  margin-top: -0.3rem;
}

/* --------------------------------------------------------------- prose --- */

.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: var(--s-3);
}

.prose h2,
.prose h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
  position: relative;
}

.prose h2 {
  font-size: var(--t-h2);
  margin-top: var(--s-5);
}

.prose h3 {
  font-size: var(--t-h3);
  margin-top: var(--s-4);
}

.prose h4 {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-top: var(--s-4);
  position: relative;
}

.prose a {
  color: var(--link);
  text-decoration-color: color-mix(in oklab, var(--link) 45%, transparent);
}

.prose a:hover {
  text-decoration-color: var(--link);
}

.anchor {
  position: absolute;
  left: -1.1em;
  top: 0;
  font-family: var(--mono);
  font-size: 0.7em;
  line-height: inherit;
  color: var(--hair-strong);
  opacity: 0;
  text-decoration: none;
  transition: opacity 160ms ease;
}

.prose h2:hover .anchor,
.prose h3:hover .anchor,
.anchor:focus-visible {
  opacity: 1;
}

.prose blockquote {
  border-left: 1px solid var(--link);
  padding-left: var(--s-3);
  color: var(--ink-2);
  font-style: italic;
}

.prose ol,
.prose ul {
  padding-left: 1.3rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose li::marker {
  color: var(--hair-strong);
}

.prose hr {
  border: 0;
  height: 1px;
  background-image: var(--rule-dotted);
  margin: var(--s-5) 0;
}

.prose img {
  width: 100%;
  border: 1px solid var(--edge);
}

.prose figcaption,
.prose img + em {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-3);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.78em;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: 0.1em 0.3em;
}

.prose .code {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: var(--s-3);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.7;
  /* Code runs wider than the reading measure — it wants the full column. */
  width: min(calc(100vw - 2 * var(--gutter)), 46rem);
}

.prose .code code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--hair);
}

.prose th {
  font-weight: 500;
  font-size: var(--t-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose--intro {
  color: var(--ink-2);
  margin-top: var(--s-4);
}

/* Footnotes */
.footnotes {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.footnotes-sep {
  display: none;
}

.footnote-ref a {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.62em;
  vertical-align: super;
  color: var(--link);
}

/* Syntax highlighting — colormap positions only, no outside hues. */
.hljs-comment,
.hljs-quote {
  color: var(--ink-3);
  opacity: 0.85;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name {
  color: var(--link-hot);
}
.hljs-string,
.hljs-attr,
.hljs-number,
.hljs-literal {
  color: var(--map-3);
}
.hljs-title,
.hljs-function .hljs-title,
.hljs-type {
  color: var(--link);
  font-weight: 500;
}
.hljs-meta,
.hljs-symbol {
  color: var(--ink-3);
}

/* --------------------------------------------------------------- essay --- */

.essay-head {
  padding: var(--s-5) 0 var(--s-4);
  max-width: 42rem;
  display: grid;
  gap: var(--s-2);
  border-bottom: 1px solid var(--hair);
  margin-bottom: var(--s-4);
}

.essay-head .eyebrow a {
  text-decoration: none;
  color: inherit;
}

.essay-head .eyebrow a:hover {
  color: var(--link);
}

.essay-title-display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.016em;
  text-wrap: balance;
  margin-top: -0.2rem;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.byline a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--hair-strong);
}

.essay-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hair-strong);
  display: grid;
  gap: var(--s-4);
}

.series-rail ol {
  list-style: none;
  padding: 0;
  margin: var(--s-2) 0 0;
  display: grid;
}

.series-rail li a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-1);
  padding: 0.6rem 0;
  text-decoration: none;
  font-size: var(--t-small);
  color: var(--ink-2);
  border-bottom: 1px solid var(--hair);
}

.series-rail li:last-child a {
  border-bottom: 0;
}

.series-rail li a:hover {
  color: var(--link);
}

.series-rail li[aria-current='true'] a {
  color: var(--ink);
}

.rail-part {
  font-family: var(--mono);
  font-size: var(--t-meta);
  color: var(--ink-3);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.series-rail li[aria-current='true'] .rail-part {
  color: var(--link);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding-top: var(--s-3);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.pager-link {
  display: grid;
  gap: 0.4rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: var(--t-h3);
  line-height: 1.35;
  color: var(--ink-2);
}

.pager-link:hover {
  color: var(--link);
}

.pager-next {
  text-align: right;
}

@media (max-width: 34rem) {
  .pager {
    grid-template-columns: 1fr;
  }
  .pager-next {
    text-align: left;
  }
}

/* ------------------------------------------------- the decode progress ---
   The strip, one scale up: a rail in the left gutter that fills along the
   colormap as the essay is read. Same reading, same colours. */

.page-essay::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  width: 2px;
  height: 100vh;
  background: linear-gradient(180deg, var(--map-0), var(--map-2) 60%, var(--map-3));
  clip-path: inset(0 0 calc((1 - var(--decoded, 0)) * 100%) 0);
  pointer-events: none;
  z-index: 5;
}

/* ----------------------------------------------------------- scheduler --- */

.scheduler {
  margin-top: var(--s-5);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2px;
  padding: var(--s-4);
  max-width: var(--measure);
  display: grid;
  gap: var(--s-2);
}

.scheduler iframe {
  width: 100%;
  min-height: 42rem;
  border: 0;
}

.scheduler--placeholder p {
  color: var(--ink-2);
  font-size: var(--t-small);
}

/* ------------------------------------------------------------ colophon --- */

.colophon {
  margin-top: var(--s-6);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.colophon-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter) var(--s-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}

.colophon nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
}

.colophon nav a {
  text-decoration: none;
  color: var(--ink-3);
}

.colophon nav a:hover {
  color: var(--ink);
}

/* ------------------------------------------------------ design system ---
   The local reference uses the system to document itself. */

.ds-section {
  padding-top: var(--s-4);
  margin-top: var(--s-5);
  background-image: var(--rule-dotted);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.ds-section > .eyebrow {
  margin-bottom: var(--s-2);
}

.ds-note {
  max-width: 34rem;
  color: var(--ink-2);
  font-size: var(--t-lede);
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.ds-swatch {
  display: grid;
  gap: 0.4rem;
}

.ds-chip {
  height: 3.5rem;
  border-radius: 2px;
  border: 1px solid var(--edge);
}

.ds-colorbar {
  height: 1.5rem;
  border-radius: 2px;
  background-image: var(--ramp);
  margin-top: var(--s-2);
}

.ds-row {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}

.ds-row:last-child {
  border-bottom: 0;
}

.ds-row dt {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: -0.02em;
  color: var(--ink-3);
}

.ds-row dd {
  margin: 0;
  min-width: 0;
}

.ds-spec {
  display: block;
  margin-top: 0.3rem;
}

.ds-bar {
  display: block;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--tint-a);
  border-left: 1px solid var(--link);
}

.ds-do {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
  max-width: 36rem;
}

.ds-do p {
  font-size: var(--t-small);
  color: var(--ink-2);
  padding-left: var(--s-2);
  border-left: 2px solid var(--hair-strong);
}

.ds-do b {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}

.ds-demo {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 2px;
  display: grid;
  gap: var(--s-3);
}

.ds-demo-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

@media (max-width: 46rem) {
  .ds-row {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }
}

/* ------------------------------------------------------------- narrow --- */

@media (max-width: 40rem) {
  main {
    padding-bottom: var(--s-4);
  }

  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .masthead nav {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .opening {
    padding: 2.25rem 0 var(--s-4);
  }

  .band {
    margin-top: var(--s-4);
  }

  .hero {
    font-size: clamp(1.35rem, 6.15vw, 1.6rem);
    line-height: 1.6;
    letter-spacing: -0.05em;
  }

  .tokenized {
    gap: 0.75rem;
  }

  .opening-note {
    margin-top: 2.25rem;
    font-size: clamp(1.05rem, 4.7vw, 1.2rem);
    line-height: 1.6;
  }

  .colophon {
    margin-top: var(--s-4);
  }

  .colophon-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s-2);
    padding-bottom: var(--s-3);
  }

  .colophon nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem 0;
  }

  .essay-link {
    grid-template-columns: 2.25rem 1fr;
  }
}