/* cyberdelic.space: one typographic system, three atmospheres.
   Derived from the DEW LINE Studio design tokens. */

:root {
  --site-header-offset: 6.4rem;
  --canvas: #f6f7f4;
  --surface: #fcfcfa;
  --ink: #1e201d;
  --ink-2: #565b54;
  --line: #dde0da;
  --line-2: #c7cbc3;
  --signal: #7d5d18;
  --ok: #376d4b;
  --warn: #895f12;
  --danger: #9d382b;
  --font-sans: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, sans-serif;
  --font-editorial: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --tracking: 0.12em;
  --measure: 34rem;
  color-scheme: light;
}

/* Psychedelic is the default everywhere, whatever the operating system
   prefers. Light and dark are choices remembered on this device. */
:root[data-theme="dark"] {
  --canvas: #0b0d0b;
  --surface: #111411;
  --ink: #e4dfcf;
  --ink-2: #a09a88;
  --line: #232823;
  --line-2: #363d35;
  --signal: #d0a84f;
  --ok: #75b27d;
  --warn: #d5a950;
  --danger: #d87363;
  color-scheme: dark;
}

:root[data-theme="psychedelic"] {
  --canvas: rgba(255, 255, 255, .16);
  --surface: rgba(255, 255, 255, .5);
  --ink: #291a3a;
  --ink-2: #594865;
  --line: rgba(56, 35, 90, .15);
  --line-2: rgba(56, 35, 90, .28);
  --signal: #087b8a;
  --ok: #297f5a;
  --warn: #a74f19;
  --danger: #9d382b;
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 16px/1.6 var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

:root[data-theme="psychedelic"] {
  background: #f3fbff;
}

:root[data-theme="psychedelic"] body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background: transparent;
}

:root[data-theme="psychedelic"] body::before,
:root[data-theme="psychedelic"] body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

:root[data-theme="psychedelic"] body::before {
  inset: -22%;
  z-index: -2;
  background:
    radial-gradient(circle at 9% 6%, rgba(67, 224, 235, .88), transparent 38%),
    radial-gradient(circle at 72% 0%, rgba(130, 148, 255, .76), transparent 40%),
    radial-gradient(circle at 92% 34%, rgba(220, 128, 245, .69), transparent 36%),
    radial-gradient(circle at 72% 70%, rgba(255, 119, 190, .76), transparent 42%),
    radial-gradient(circle at 96% 96%, rgba(255, 180, 92, .76), transparent 38%),
    radial-gradient(circle at 24% 100%, rgba(111, 128, 255, .68), transparent 44%),
    #f3fbff;
  filter: saturate(.9);
  animation: psychedelic-field 28s ease-in-out infinite alternate;
}

:root[data-theme="psychedelic"] body::after {
  inset: -28%;
  z-index: -1;
  background:
    radial-gradient(circle at 35% 36%, rgba(255, 255, 255, .8), transparent 21%),
    radial-gradient(circle at 68% 62%, rgba(255, 255, 255, .58), transparent 18%),
    conic-gradient(from 50deg at 55% 45%,
      rgba(66, 220, 235, .28), rgba(150, 137, 250, .18),
      rgba(255, 131, 194, .24), rgba(255, 191, 107, .2),
      rgba(66, 220, 235, .28));
  filter: blur(52px);
  mix-blend-mode: soft-light;
  opacity: .7;
  animation: psychedelic-shimmer 36s linear infinite;
}

a { color: inherit; }
a:hover { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 9; background: var(--surface);
  padding: .7rem 1rem; border: 1px solid var(--line-2);
}

/* ------------------------------------------------------------- structure */

/* The rules span the full width; what sits on them does not. Header and
   footer contents share the page body's column, so one left edge runs the
   whole height of the page instead of the chrome starting 233px outside it. */
header.site {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
header.site .bar, footer.site .bar {
  max-width: 60rem; margin-inline: auto;
}
header.site .bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline;
  padding: 1.6rem clamp(1.2rem, 5vw, 4rem);
}
.wordmark {
  text-decoration: none; font-weight: 600; letter-spacing: var(--tracking);
  font-size: .8rem; display: grid; gap: .25rem; margin-right: auto;
}
.wordmark span {
  display: block; font-weight: 400; letter-spacing: .02em; font-size: .78rem;
  color: var(--ink-2); font-family: var(--font-editorial); font-style: italic;
}
header.site nav { display: flex; gap: 1.4rem; }
header.site nav a {
  text-decoration: none; font-size: .75rem; letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2);
}
header.site nav a:hover { color: var(--signal); }

.theme-toggle {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; cursor: pointer;
  background: none; color: var(--ink-2); border: 1px solid var(--line-2);
  padding: .5rem .7rem;
}
.theme-toggle:hover { color: var(--signal); border-color: var(--signal); }

/* Said where it matters, the library and the work, never as page furniture. */
.notice {
  font: .78rem/1.6 var(--font-mono); color: var(--warn); max-width: var(--measure);
  border-left: 2px solid var(--warn); padding-left: .9rem; margin: 1.2rem 0 0;
}

main {
  max-width: 60rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem) 5rem;
}
main:focus { outline: none; }

footer.site {
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: .8rem;
}
footer.site .bar { padding: 2rem clamp(1.2rem, 5vw, 4rem) 4rem; }
footer.site p { max-width: var(--measure); margin: .4rem 0; }

:root[data-theme="psychedelic"] header.site,
:root[data-theme="psychedelic"] footer.site {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(24px) saturate(1.05);
  backdrop-filter: blur(24px) saturate(1.05);
}

:root[data-theme="psychedelic"] main {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .16), rgba(255, 255, 255, .36));
  border-inline: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(26px) saturate(.94);
  backdrop-filter: blur(26px) saturate(.94);
}

:root[data-theme="psychedelic"] .theme-toggle {
  background: rgba(255, 255, 255, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

@keyframes psychedelic-field {
  0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  50% { transform: translate3d(1.5%, 1%, 0) scale(1.035); }
  100% { transform: translate3d(-.5%, 1.5%, 0) scale(1.015); }
}

@keyframes psychedelic-shimmer {
  from { transform: rotate(0deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1.05); }
}

/* ---------------------------------------------------------------- library */

.hero { margin-bottom: 3.5rem; }
.hero h1 {
  font: 400 clamp(2.4rem, 7vw, 4rem)/1.05 var(--font-editorial);
  margin: 0 0 1.2rem; letter-spacing: -0.01em;
}
.lede {
  font-family: var(--font-editorial); font-size: 1.15rem; line-height: 1.65;
  max-width: var(--measure); margin: 0 0 1rem;
}
.note, .line {
  color: var(--ink-2); font-size: .8rem; letter-spacing: .02em;
  max-width: var(--measure);
}

/* The facet rail: plain links to shelves; script turns them into filters.
   Within a facet, any selected term matches; across facets, all must. */
.rail { margin: 0 0 2rem; display: grid; gap: .7rem; }
.rail-group { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.rail-label {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); min-width: 4.6rem;
}
.chip {
  font: .72rem/1 var(--font-mono); letter-spacing: .04em; text-decoration: none;
  color: var(--ink-2); border: 1px solid var(--line-2); padding: .42rem .6rem;
  background: var(--surface);
}
.chip:hover { color: var(--signal); border-color: var(--signal); }
.js .chip { cursor: pointer; }
.chip.on { color: var(--signal); border-color: var(--signal);
  background: var(--canvas); }
.chip.on::before { content: "× "; }

.find { margin: 0 0 1rem; }
.find label {
  display: block; font-size: .7rem; letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem;
}
.find input {
  width: 100%; font: inherit; padding: .7rem .8rem; color: inherit;
  background: var(--surface); border: 1px solid var(--line-2);
}
.count {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  color: var(--ink-2); text-transform: uppercase; margin: 0 0 2rem;
}

/* ---------------------------------------------------------- Living Index */

.living-index {
  margin: 0 0 clamp(5rem, 10vw, 8rem);
  border-top: 1px solid var(--line);
}
.field-intro { max-width: 44rem; padding: 2.2rem 0 1.8rem; }
.instrument-label {
  margin: 0 0 .65rem; color: var(--ink-2);
  font: .66rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-intro h2, .catalog-head h2 {
  margin: 0 0 1rem;
  font: 400 clamp(2rem, 5.5vw, 3.8rem)/1.04 var(--font-editorial);
  letter-spacing: -.018em;
}
.field-intro > p:last-child {
  max-width: 38rem; margin: 0; color: var(--ink-2);
  font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.65;
}
.field-stage {
  position: relative; min-height: clamp(32rem, 61vw, 42rem);
  overflow: hidden; isolation: isolate;
  border-block: 1px solid var(--line);
}
.field-stage::before {
  content: ""; position: absolute; inset: 13% 18%; z-index: -1;
  border-radius: 50%; opacity: .22; filter: blur(45px);
  background: radial-gradient(circle, var(--surface), transparent 68%);
}
.field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.field-progress {
  position: absolute; z-index: 3; left: 0; top: 1rem; margin: 0;
  display: grid; gap: .25rem; pointer-events: none;
  font: .64rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2);
}
.field-progress [data-field-verb] { color: var(--signal); }
.field-mode {
  position: absolute; z-index: 4; right: 0; top: .75rem;
  display: flex; align-items: center; gap: .75rem;
  font: .56rem/1.2 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2);
}
.field-mode button {
  min-height: 2.25rem; padding: .35rem 0;
  border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.field-mode button:hover, .field-mode button[aria-pressed="true"] {
  color: var(--signal); border-color: var(--signal);
}
.field-nodes { position: absolute; inset: 0; z-index: 2; }
.field-node {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 7rem; min-height: 3.2rem; max-width: 13rem; padding: .5rem .7rem;
  display: grid; place-items: center; gap: .15rem;
  border: 0; border-bottom: 1px solid transparent;
  background: transparent; color: var(--ink); cursor: pointer;
  text-align: center; text-transform: lowercase;
  font: 400 clamp(1.05rem, 2.5vw, 1.55rem)/1.1 var(--font-editorial);
  transition: color .35s ease, border-color .35s ease, opacity .35s ease,
    filter .35s ease;
  animation: field-drift 8s ease-in-out infinite alternate;
}
.field-node small {
  color: var(--ink-2); opacity: .58;
  font: .52rem/1.2 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-node:hover { color: var(--signal); border-color: var(--signal); }
.field-node.selected {
  color: var(--signal); border-color: var(--signal);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--signal) 35%, transparent));
  animation: none;
}
.field-node.selected small { opacity: .9; }
.field-node[data-facet="form"] {
  font: .78rem/1.25 var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase;
}
.field-node[data-facet="register"] { font-style: italic; }
.field-node[data-facet="world"] {
  font: .7rem/1.25 var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase;
}
.field-node[data-facet="era"] {
  font: .72rem/1.25 var(--font-mono); letter-spacing: .08em;
}
.field-node[data-slot="0"] { left: 13%; top: 24%; animation-delay: -1s; }
.field-node[data-slot="1"] { left: 40%; top: 14%; animation-delay: -4s; }
.field-node[data-slot="2"] { left: 72%; top: 22%; animation-delay: -2s; }
.field-node[data-slot="3"] { left: 84%; top: 49%; animation-delay: -6s; }
.field-node[data-slot="4"] { left: 71%; top: 76%; animation-delay: -3s; }
.field-node[data-slot="5"] { left: 42%; top: 84%; animation-delay: -7s; }
.field-node[data-slot="6"] { left: 14%; top: 68%; animation-delay: -5s; }
.field-node[data-slot="7"] { left: 50%; top: 60%; animation-delay: -2.5s; }
.field-node[data-slot="8"] { left: 50%; top: 47%; }
.field-node[data-slot="9"] { left: 37%; top: 51%; }
.field-node[data-slot="10"] { left: 63%; top: 51%; }
.field-stage[data-projection="stone"] .field-node { animation: none; }
@keyframes field-drift {
  0% { margin: -5px 0 0 -3px; }
  100% { margin: 5px 0 0 3px; }
}

.field-chord {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.field-chord p { margin: 0; display: grid; gap: .25rem; }
.field-chord p span {
  color: var(--ink-2); font: .58rem/1.2 var(--font-mono);
  letter-spacing: var(--tracking); text-transform: uppercase;
}
.field-chord p strong { font: 400 1rem/1.35 var(--font-editorial); }
.field-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: flex-end; }
.field-actions button, .field-release {
  min-height: 2.75rem; padding: .5rem 0;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font: .62rem/1.3 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-actions button:hover, .field-release:hover {
  color: var(--signal); border-color: var(--signal);
}
.field-revelation { padding-top: 2.5rem; }
.field-results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.field-result { min-width: 0; padding: 1.5rem 1.5rem 1.8rem 0; }
.field-result + .field-result { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.field-result-kind {
  margin: 0 0 1.5rem; color: var(--ink-2);
  font: .55rem/1.3 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-result h3 {
  margin: 0 0 .7rem; font: 400 1.35rem/1.2 var(--font-editorial);
}
.field-result h3 a { text-decoration: none; }
.field-result > p:last-child { margin: 0; color: var(--ink-2); font-size: .82rem; }
.dark-region { background: transparent; }
.dark-region h3 { font-style: italic; }
.field-arithmetic, .field-no-script {
  max-width: 44rem; margin: 1rem 0 0; color: var(--ink-2);
  font: .64rem/1.6 var(--font-mono);
}
.field-marginalia {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.field-marginalia .instrument-label { margin: .15rem 0 0; }
.field-marginalia > p:last-child {
  max-width: 42rem; margin: 0; color: var(--ink-2);
  font-family: var(--font-editorial); line-height: 1.6;
}
.field-release { margin-top: 1rem; }
.catalog-head { padding-top: 0; margin-bottom: 2.2rem; }
.catalog-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0; }

.library-directory {
  margin: 0 0 clamp(5rem, 10vw, 8rem); padding-top: 2.4rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--site-header-offset) + 1rem);
}
.catalog-head > p:last-child {
  max-width: 44rem; margin: 1rem 0 0; color: var(--ink-2);
  font: 400 1rem/1.65 var(--font-editorial);
}
.directory-search { max-width: 52rem; margin: 0 0 1rem; }
.directory-search label {
  display: block; margin: 0 0 .55rem; color: var(--ink-2);
  font: .66rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.directory-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.directory-search input, .directory-search button {
  min-height: 3.2rem; border: 1px solid var(--line-2); border-radius: 0;
  background: var(--surface); color: var(--ink);
}
.directory-search input { min-width: 0; padding: .75rem .9rem; font: inherit; }
.directory-search button {
  margin-left: -1px; padding: .75rem 1rem; cursor: pointer;
  font: .65rem/1.2 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.directory-search button:hover { color: var(--signal); border-color: var(--signal); }
.directory-status {
  margin: 0 0 1.25rem; color: var(--ink-2);
  font: .64rem/1.5 var(--font-mono); letter-spacing: .03em;
}
.directory-results {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line);
}
.directory-results li {
  display: grid; grid-template-columns: minmax(13rem, .65fr) minmax(0, 1fr);
  gap: .75rem 2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line);
}
.directory-result-head { min-width: 0; }
.directory-result-kind {
  margin: 0 0 .45rem; color: var(--signal);
  font: .56rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
}
.directory-results h3 { margin: 0; font: 400 1.3rem/1.25 var(--font-editorial); }
.directory-results h3 a { text-decoration: none; }
.directory-results li > p { margin: 0; font-family: var(--font-editorial); line-height: 1.6; }
.directory-result-subjects {
  grid-column: 2; color: var(--ink-2);
  font: .6rem/1.5 var(--font-mono) !important; letter-spacing: .03em;
}
.directory-boundary {
  max-width: 52rem; margin: 1.25rem 0 0; color: var(--ink-2);
  font: .64rem/1.6 var(--font-mono);
}

:root[data-theme="psychedelic"] .field-stage::before {
  opacity: .6;
  background:
    radial-gradient(circle at 42% 44%, rgba(73, 226, 230, .24), transparent 34%),
    radial-gradient(circle at 64% 55%, rgba(244, 115, 196, .22), transparent 38%),
    radial-gradient(circle at 51% 63%, rgba(255, 181, 91, .16), transparent 43%);
}
:root[data-theme="psychedelic"] .field-node.selected {
  text-shadow: 0 0 16px rgba(255, 255, 255, .9);
}

.cards { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line); }
.card { background: transparent; border-bottom: 1px solid var(--line); }
.card a {
  display: block; text-decoration: none; padding: 1.8rem .2rem;
}
.card a:hover { color: inherit; }
.card h2 {
  font: 400 1.5rem/1.2 var(--font-editorial); margin: 0 0 .4rem;
}
.byline {
  font-size: .85rem; color: var(--ink-2); margin: 0 0 .6rem;
  font-family: var(--font-editorial); font-style: italic;
}
.excerpt {
  font-family: var(--font-editorial); margin: 0 0 .8rem;
  max-width: var(--measure); color: var(--ink);
}
.card .line { margin: 0; font: .7rem/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; }
.empty { color: var(--ink-2); font-family: var(--font-editorial);
  font-size: 1.1rem; }
.card[hidden] { display: none; }

/* -------------------------------------------------- quiet Library aperture */

.library-source[hidden] { display: none; }
.living-index {
  max-width: 58rem; margin: 0 auto clamp(4rem, 9vw, 7rem);
  border-top: 0;
}
.field-intro {
  max-width: none; padding: 0 0 1.35rem; text-align: center;
}
.field-intro h2 {
  margin: 0 0 .45rem; color: var(--ink-2);
  font: 400 clamp(1.05rem, 2vw, 1.35rem)/1.35 var(--font-editorial);
  letter-spacing: 0;
}
.field-intro > p:last-child {
  max-width: none; margin: 0; color: var(--ink-2);
  font: .62rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-choice { display: none; transition: opacity .5s ease, transform .5s ease,
  filter .5s ease; }
.js .field-choice { display: block; }
.field-choice[hidden] { display: none; }
.field-stage {
  position: relative; width: min(100%, 52rem);
  min-height: clamp(27rem, 48vw, 34rem); margin: 0 auto;
  overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); border-radius: 50% / 46%;
  background:
    radial-gradient(circle at 34% 30%, var(--surface), transparent 42%),
    radial-gradient(circle at 70% 67%, var(--canvas), transparent 52%);
  box-shadow: inset 0 0 5rem color-mix(in srgb, var(--surface) 48%, transparent);
}
.field-stage::before {
  content: ""; position: absolute; inset: 7%; z-index: -1;
  border: 1px solid var(--line); border-radius: inherit; opacity: .58;
  filter: none; background: transparent;
}
.field-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit; opacity: .34;
  background: radial-gradient(circle at 50% 48%, var(--surface), transparent 66%);
}
.field-nodes {
  position: absolute; inset: 14% 11%; z-index: 2;
  display: flex; flex-wrap: wrap; align-content: center;
  align-items: center; justify-content: center; gap: 1.15rem 1.35rem;
}
.field-node,
.field-node[data-facet] {
  --drift-x: 4px; --drift-y: -3px; --drift-delay: 0s;
  position: relative; left: auto; top: auto;
  transform: translate3d(0, 0, 0);
  min-width: 0; min-height: 2.8rem; max-width: none;
  padding: .65rem 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  color: var(--ink); cursor: pointer;
  text-align: center; text-transform: lowercase;
  font: 400 clamp(.95rem, 1.8vw, 1.2rem)/1.1 var(--font-editorial);
  font-style: normal; letter-spacing: 0;
  box-shadow: 0 .5rem 1.6rem color-mix(in srgb, var(--ink) 5%, transparent);
  backdrop-filter: blur(8px);
  transition: color .3s ease, border-color .3s ease, background .3s ease,
    box-shadow .3s ease, transform .3s ease;
  animation: none;
}
.field-node > span {
  display: block;
  animation: bubble-drift 7.5s ease-in-out var(--drift-delay) infinite alternate;
}
.field-node:hover {
  color: var(--signal); border-color: var(--signal);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 .7rem 2rem color-mix(in srgb, var(--signal) 12%, transparent);
}
.field-node:hover > span,
.field-node:focus-visible > span { animation-play-state: paused; }
.field-node.selected {
  color: var(--signal); border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 9%, var(--surface));
  filter: none; text-shadow: none;
  box-shadow: 0 .7rem 2rem color-mix(in srgb, var(--signal) 18%, transparent);
}
@keyframes bubble-drift {
  0% { transform: translate3d(calc(var(--drift-x) * -1), var(--drift-y), 0); }
  50% { transform: translate3d(0, calc(var(--drift-y) * -.5), 0); }
  100% { transform: translate3d(var(--drift-x), calc(var(--drift-y) * -1), 0); }
}
.field-understory {
  width: min(100%, 48rem); margin: .8rem auto 0;
  display: flex; align-items: center; justify-content: space-between;
}
.field-understory p {
  margin: 0; color: var(--ink-2);
  font: .58rem/1.3 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-understory button,
.field-reset {
  min-height: 2.6rem; padding: .45rem 0;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font: .58rem/1.3 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-understory button:hover,
.field-reset:hover { color: var(--signal); border-color: var(--signal); }
.living-index.is-resolving .field-choice {
  opacity: 0; transform: scale(.985); filter: blur(5px); pointer-events: none;
}
.field-revelation {
  padding: 1rem 0 0; animation: field-arrive .55s ease both;
}
.field-revelation[hidden] { display: none; }
.field-arrival {
  margin: 0 0 .4rem; color: var(--ink-2);
  font: .6rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.field-revelation > h2 {
  margin: 0 0 2.5rem; color: var(--ink);
  font: 400 clamp(1.15rem, 2.5vw, 1.6rem)/1.3 var(--font-editorial);
}
.field-revelation > h2:focus { outline-offset: .4rem; }
.field-results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem); border: 0;
}
.field-result {
  min-width: 0; padding: 1.25rem 0 0;
  border-top: 1px solid var(--line-2);
}
.field-result + .field-result { padding-left: 0; border-left: 0; }
.field-result-kind {
  margin: 0 0 1.35rem; color: var(--ink-2);
  font: .56rem/1.3 var(--font-mono); letter-spacing: var(--tracking);
}
.field-result h3 {
  margin: 0 0 .8rem; font: 400 1.3rem/1.2 var(--font-editorial);
}
.field-result h3 a { color: inherit; text-decoration: none; }
.field-result h3 a:hover { color: var(--signal); }
.field-result-excerpt {
  margin: 0 0 1rem; color: var(--ink-2);
  font: .92rem/1.55 var(--font-editorial);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; overflow: hidden;
}
.field-result-near {
  margin: 0; color: var(--ink-2);
  font: .55rem/1.5 var(--font-mono); letter-spacing: .05em;
  text-transform: lowercase;
}
.field-reset { margin-top: 2rem; }
.field-no-script {
  margin: 1rem auto; max-width: 32rem; text-align: center;
  color: var(--ink-2); font: .7rem/1.6 var(--font-mono);
}
@keyframes field-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
:root[data-theme="psychedelic"] .field-stage {
  background:
    radial-gradient(circle at 24% 28%, rgba(91, 226, 232, .23), transparent 38%),
    radial-gradient(circle at 72% 32%, rgba(143, 130, 244, .18), transparent 42%),
    radial-gradient(circle at 67% 72%, rgba(244, 119, 193, .2), transparent 40%),
    radial-gradient(circle at 34% 73%, rgba(255, 187, 109, .13), transparent 44%),
    color-mix(in srgb, var(--canvas) 68%, transparent);
  box-shadow:
    inset 0 0 6rem rgba(255, 255, 255, .2),
    0 2rem 6rem rgba(102, 118, 225, .08);
}
/* The field has no container. Each stable target holds one drifting aura. */
.field-stage {
  width: min(100%, 54rem); min-height: clamp(27rem, 47vw, 33rem);
  border: 0; border-radius: 0; overflow: visible;
  background: transparent; box-shadow: none;
}
.field-stage::before,
.field-stage::after { display: none; }
:root[data-theme="psychedelic"] .field-stage {
  background: transparent; box-shadow: none;
}
.field-nodes {
  position: absolute; inset: 0; display: block;
}
.field-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; pointer-events: none;
}
.field-nodes { z-index: 2; }
.field-node,
.field-node[data-facet] {
  --magnet-x: 0px; --magnet-y: 0px;
  position: absolute; transform: translate(-50%, -50%);
  translate: var(--magnet-x) var(--magnet-y);
  min-width: 8.5rem; min-height: 5rem; padding: 0;
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; backdrop-filter: none;
  opacity: 1; filter: none;
  transition:
    left .56s cubic-bezier(.2, .78, .18, 1),
    top .56s cubic-bezier(.2, .78, .18, 1),
    transform .56s cubic-bezier(.2, .78, .18, 1),
    opacity .38s ease, filter .46s ease, color .3s ease;
  will-change: left, top, transform, opacity, filter;
}
.field-node:hover,
.field-node.selected {
  border: 0; background: transparent; box-shadow: none;
}
.field-node-shape {
  position: relative; z-index: 0; display: inline-block; isolation: isolate;
  padding: .85rem 1rem; white-space: normal; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box;
  color: var(--ink);
  transition: color .35s ease, text-shadow .5s ease, filter .5s ease;
  will-change: transform, text-shadow, filter;
}
.field-node-shape::before,
.field-node-shape::after {
  content: attr(data-glow); position: absolute; inset: 0; z-index: 0;
  box-sizing: border-box; padding: inherit; white-space: normal; overflow-wrap: anywhere;
  font: inherit; line-height: inherit; letter-spacing: inherit;
  text-align: inherit; text-transform: inherit; pointer-events: none;
  color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(96deg,
    #b9ffff 0%, #dcd6ff 35%, #ffc9f0 67%, #ffe8b8 100%);
  background-size: 190% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text;
  mix-blend-mode: screen;
  opacity: 0; transform: translate3d(0, 0, 0);
  transition: opacity .4s ease, filter .5s ease;
}
.field-node-shape::after { z-index: 1; }
.field-node-text {
  position: relative; z-index: 2; display: inline-block;
  transition: filter .45s ease; will-change: filter;
}
.field-node:hover .field-node-shape { color: var(--signal); }
.field-node.selected .field-node-shape { color: var(--signal); }
.living-index.is-recomposing .field-choice { pointer-events: none; }
.field-nodes.is-retuning .field-node {
  transition: none;
  will-change: transform, opacity;
}
.field-nodes.is-retuning .field-node-shape,
.field-nodes.is-retuning .field-node-text,
.field-nodes.is-retuning .field-node-shape::before,
.field-nodes.is-retuning .field-node-shape::after {
  animation-play-state: paused !important;
}
.field-node.is-arriving,
.field-node.is-departing {
  pointer-events: none;
}
.field-node.is-retune-anchor {
  z-index: 4;
}
.field-nodes.is-gathering .field-node {
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) scale(.52);
  opacity: .12; filter: blur(5px) saturate(1.25);
}
.field-nodes.is-folded .field-node {
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) scale(.34);
  opacity: 0; filter: blur(9px) saturate(1.35);
}
.field-nodes.is-unfolding .field-node {
  transition-delay: var(--arrival-delay);
}
:root[data-theme="psychedelic"] .field-node-shape {
  text-shadow: 0 0 1.5px rgba(255, 255, 255, .9);
  animation: bubble-drift 7.5s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node-text {
  animation: glyph-edge-light 8.8s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node-shape::before {
  opacity: .58; filter: blur(4.2px) brightness(1.18) saturate(.88);
  animation: glyph-glow-spectrum 8.8s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node-shape::after {
  opacity: .5; filter: blur(1.6px) brightness(1.24) saturate(.82);
  animation: glyph-glow-core 7.6s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node:hover .field-node-shape,
:root[data-theme="psychedelic"] .field-node.selected .field-node-shape {
  text-shadow: 0 0 1.5px rgba(255, 255, 255, .96);
}
:root[data-theme="psychedelic"] .field-node:hover .field-node-text,
:root[data-theme="psychedelic"] .field-node.selected .field-node-text {
  animation: glyph-edge-selected 7.2s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node:hover .field-node-shape::before,
:root[data-theme="psychedelic"] .field-node.selected .field-node-shape::before {
  animation: glyph-glow-selected 7.4s ease-in-out var(--drift-delay) infinite alternate;
}
:root[data-theme="psychedelic"] .field-node:hover .field-node-shape::after,
:root[data-theme="psychedelic"] .field-node.selected .field-node-shape::after {
  animation: glyph-glow-core-selected 6.8s ease-in-out var(--drift-delay) infinite alternate;
}
@keyframes glyph-glow-spectrum {
  0% {
    opacity: .4; filter: blur(4.2px) brightness(1.12) saturate(.82);
    transform: translate3d(-1px, -.5px, 0); background-position: 0% 50%;
  }
  55% {
    opacity: .78; filter: blur(5.8px) brightness(1.3) saturate(.96);
    transform: translate3d(1px, 1.5px, 0); background-position: 78% 50%;
  }
  100% {
    opacity: .5; filter: blur(4.8px) brightness(1.2) saturate(.88);
    transform: translate3d(0, 2.5px, 0); background-position: 100% 50%;
  }
}
@keyframes glyph-glow-core {
  0% {
    opacity: .34; filter: blur(1.3px) brightness(1.16) saturate(.78);
    transform: translate3d(0, 0, 0); background-position: 100% 50%;
  }
  48% {
    opacity: .68; filter: blur(2.1px) brightness(1.34) saturate(.9);
    transform: translate3d(.5px, 1px, 0); background-position: 42% 50%;
  }
  100% {
    opacity: .42; filter: blur(1.6px) brightness(1.22) saturate(.82);
    transform: translate3d(0, 1.5px, 0); background-position: 0% 50%;
  }
}
@keyframes glyph-glow-selected {
  0% {
    opacity: .62; filter: blur(4.8px) brightness(1.24) saturate(.9);
    transform: translate3d(-1px, 0, 0); background-position: 0% 50%;
  }
  58% {
    opacity: 1; filter: blur(6.8px) brightness(1.48) saturate(1.02);
    transform: translate3d(1.5px, 2px, 0); background-position: 76% 50%;
  }
  100% {
    opacity: .72; filter: blur(5.5px) brightness(1.32) saturate(.94);
    transform: translate3d(0, 3px, 0); background-position: 100% 50%;
  }
}
@keyframes glyph-glow-core-selected {
  0% {
    opacity: .52; filter: blur(1.4px) brightness(1.24) saturate(.84);
    transform: translate3d(0, 0, 0); background-position: 100% 50%;
  }
  52% {
    opacity: .84; filter: blur(2.4px) brightness(1.46) saturate(.96);
    transform: translate3d(.5px, 1.2px, 0); background-position: 45% 50%;
  }
  100% {
    opacity: .6; filter: blur(1.8px) brightness(1.3) saturate(.88);
    transform: translate3d(0, 2px, 0); background-position: 0% 50%;
  }
}
@keyframes glyph-edge-light {
  0% {
    filter:
      drop-shadow(0 0 1px rgba(255, 255, 255, .9))
      drop-shadow(-1px 0 3px rgba(185, 255, 255, .36))
      drop-shadow(1px 0 3px rgba(255, 201, 240, .3));
  }
  54% {
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 1))
      drop-shadow(-1.5px 1px 4px rgba(185, 255, 255, .58))
      drop-shadow(1.5px 1px 4px rgba(255, 201, 240, .48));
  }
  100% {
    filter:
      drop-shadow(0 1px 1.5px rgba(255, 255, 255, .94))
      drop-shadow(-1px 2px 3.5px rgba(220, 214, 255, .48))
      drop-shadow(1px 2px 4px rgba(255, 232, 184, .4));
  }
}
@keyframes glyph-edge-selected {
  0% {
    filter:
      drop-shadow(0 0 2px rgba(255, 255, 255, 1))
      drop-shadow(-1.5px 0 4px rgba(185, 255, 255, .68))
      drop-shadow(1.5px 0 4px rgba(255, 201, 240, .58));
  }
  56% {
    filter:
      drop-shadow(0 0 3px rgba(255, 255, 255, 1))
      drop-shadow(-2px 1px 5px rgba(185, 255, 255, .86))
      drop-shadow(2px 1px 5px rgba(255, 201, 240, .76));
  }
  100% {
    filter:
      drop-shadow(0 1px 2px rgba(255, 255, 255, 1))
      drop-shadow(-1px 2px 4.5px rgba(220, 214, 255, .72))
      drop-shadow(1px 3px 5px rgba(255, 232, 184, .64));
  }
}
.field-node[data-slot="0"] { left: 18%; top: 30%; }
.field-node[data-slot="1"] { left: 47%; top: 20%; }
.field-node[data-slot="2"] { left: 77%; top: 31%; }
.field-node[data-slot="3"] { left: 82%; top: 61%; }
.field-node[data-slot="4"] { left: 63%; top: 79%; }
.field-node[data-slot="5"] { left: 33%; top: 79%; }
.field-node[data-slot="6"] { left: 15%; top: 61%; }
.field-node[data-slot="7"] { left: 49%; top: 51%; }
.field-node[data-slot="8"] { left: 35%; top: 49%; }

/* ------------------------------------------------------ shelves & ledger */

.shelf-head { margin-bottom: 2.5rem; }
.shelf-head h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 .8rem;
}
.shelf-kind {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--signal); margin: 0 0 1rem;
}
.shelf-head .count { margin: 1.2rem 0 0; }

.ledger h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 1rem;
}
.ledger-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ledger-list .era-rule {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--signal);
  border-bottom: 1px solid var(--line-2); padding: 2rem 0 .6rem; margin: 0;
}
.ledger-list .era-rule:first-child { padding-top: 0; }
.ledger-list .entry {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  border-bottom: 1px solid var(--line); padding: .8rem 0;
}
.ledger-list .height {
  font: .75rem/1.4 var(--font-mono); color: var(--ink-2); min-width: 5.2rem;
}
.ledger-list a {
  text-decoration: none; font-family: var(--font-editorial);
  font-size: 1.05rem;
}
.ledger-list .what, .ledger-list .when {
  font: .7rem/1.4 var(--font-mono); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2);
}
.ledger-list .when { margin-left: auto; }

.facet-links a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.facet-links a:hover { color: var(--signal); border-color: var(--signal); }
.facet-note { display: block; margin-top: .5rem; }

/* ------------------------------------------------------------------ work */

.crumb {
  position: sticky; top: calc(var(--site-header-offset) + .55rem); z-index: 14;
  width: max-content; max-width: 100%; margin: -.55rem 0 1.95rem -.65rem;
  padding: .55rem .65rem; box-sizing: border-box;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  font-size: .75rem; letter-spacing: var(--tracking); text-transform: uppercase;
}
.crumb a { text-decoration: none; color: var(--ink-2); }

.work-head { margin-bottom: 2.5rem; }
.work-head h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 .6rem;
}
.work-head .line { font: .75rem/1.5 var(--font-mono); letter-spacing: .05em;
  text-transform: uppercase; }

.status {
  font: .75rem/1.4 var(--font-mono); letter-spacing: .05em;
  color: var(--ink-2); margin: 1.2rem 0 0; padding-left: 1.2rem;
  position: relative; max-width: var(--measure);
}
.status::before {
  content: "·"; position: absolute; left: 0; font-size: 1.4rem; line-height: .7;
}
.status.ok { color: var(--ok); }
.status.ok::before { content: "✓"; font-size: .9rem; line-height: 1.4; }
.status.bad { color: var(--danger); }
.status.bad::before { content: "✕"; font-size: .9rem; line-height: 1.4; }

.views {
  display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}
.views button {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; background: none; color: var(--ink-2);
  border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  padding: .9rem 1.1rem .8rem; margin-bottom: -1px;
}
.views button:first-child { padding-left: 0; }
.views button:hover { color: var(--ink); }
.views button[aria-selected="true"] {
  color: var(--signal); border-bottom-color: var(--signal);
}

.panel { margin-bottom: 3.5rem; }
.panel-title {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 1.2rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
/* With JavaScript the panels become tabs and this heading is redundant. */
.js .panel-title { display: none; }
.js .panel { margin-bottom: 0; }

.reading {
  font: 1.2rem/1.85 var(--font-editorial); white-space: pre-wrap;
  overflow-wrap: anywhere; max-width: var(--measure); margin: 0;
}
.markdown-reading { white-space: normal; }
.markdown-reading .markdown-source {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
  font: inherit; color: inherit;
}
.markdown-body { font: inherit; color: inherit; overflow-wrap: anywhere; }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: var(--font-sans); color: var(--ink); line-height: 1.18;
  letter-spacing: -.015em; margin: 1.7em 0 .65em;
}
.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { font-size: 1.55rem; }
.markdown-body h3 { font-size: 1.22rem; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1rem; }
.markdown-body p { margin: 0 0 1.15em; }
.markdown-body ul, .markdown-body ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.markdown-body li { margin: .3em 0; padding-left: .2em; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.markdown-body blockquote { margin: 1.5em 0; padding: .15em 0 .15em 1.2em;
  border-left: 2px solid var(--line-2); color: var(--ink-2); }
.markdown-body code { font: .84em/1.5 var(--font-mono); padding: .08em .28em;
  border: 1px solid var(--line); background: var(--surface); }
.markdown-body pre { margin: 1.4em 0; padding: 1em; overflow-x: auto;
  white-space: pre; border: 1px solid var(--line); background: var(--surface); }
.markdown-body pre code { padding: 0; border: 0; background: none; }
.markdown-body table {
  display: block; width: 100%; margin: 1.5em 0; overflow-x: auto;
  border-collapse: collapse; font: .78rem/1.55 var(--font-sans);
}
.markdown-body th, .markdown-body td {
  min-width: 9rem; padding: .7rem .85rem; border: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.markdown-body th {
  background: var(--surface); font: .65rem/1.45 var(--font-mono);
  letter-spacing: .04em; text-transform: uppercase;
}
.markdown-body a { color: var(--signal); text-underline-offset: .18em; }
.markdown-body .markdown-photograph {
  display: block; width: 100%; max-width: 100%; height: auto;
  margin: 1.5em 0 .5em;
}
.markdown-center { text-align: center; margin: 2em 0; }
.markdown-image-reference { display: inline-block; padding: .2em .5em;
  border: 1px solid var(--line); color: var(--ink-2);
  font: .78em/1.4 var(--font-sans); }
.art img { max-width: 100%; height: auto; }
.art { margin: 0; }

pre.source, pre.hexdump {
  font: .8rem/1.65 var(--font-mono); background: var(--surface);
  border: 1px solid var(--line); padding: 1.2rem; overflow-x: auto;
  white-space: pre; margin: 0;
}
pre.source { white-space: pre-wrap; overflow-wrap: anywhere; }
pre.hexdump { max-height: 32rem; overflow-y: auto; }

.facts { width: 100%; border-collapse: collapse; font-size: .85rem; }
.facts th, .facts td {
  text-align: left; vertical-align: top; padding: .7rem 1rem .7rem 0;
  border-bottom: 1px solid var(--line); font-weight: 400;
}
.facts th {
  color: var(--ink-2); white-space: nowrap; font: .7rem/1.6 var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase; width: 1%;
}
.facts td { overflow-wrap: anywhere; }
code.id { font: .78rem/1.5 var(--font-mono); overflow-wrap: anywhere; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain .line { display: inline; font-size: .75rem; }

.out-row { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.5rem 0 0; }
.out {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; text-decoration: none; color: var(--ink-2);
}
.out:hover { color: var(--signal); }

.sub {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin: 3rem 0 .8rem;
}

.copy-block { margin: 1.8rem 0; }
.copy-label {
  font: .75rem/1.5 var(--font-mono); color: var(--ink-2); margin: 0 0 .5rem;
  max-width: var(--measure);
}
.copy-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line-2); background: var(--surface);
}
.copy-row pre {
  margin: 0; padding: .9rem 1rem; overflow-x: auto; flex: 1; min-width: 0;
  font: .8rem/1.5 var(--font-mono); white-space: pre;
}
.copy-row .copy {
  flex: none; border: 0; border-left: 1px solid var(--line-2);
  background: none; color: var(--ink-2); cursor: pointer; padding: 0 1rem;
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.copy-row .copy:hover { color: var(--signal); }
.copy-row .copy.done { color: var(--ok); }
.copy-block .line { margin: .6rem 0 0; }

.verify-box {
  margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--line-2);
  background: var(--surface);
}
.verify-box button, .interactive .run, .work-foot a {
  font: .72rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; padding: .8rem 1.1rem; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line-2);
  text-decoration: none; display: inline-block;
}
.verify-box button:hover, .interactive .run:hover, .work-foot a:hover {
  border-color: var(--signal); color: var(--signal);
}
.verify-box button[disabled] { opacity: .5; cursor: default; }
.verify-box .line { margin: 1rem 0 0; }

.verify-out { margin-top: 1.2rem; }
.verify-out ol { list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .5rem; }
.verify-out li {
  font: .78rem/1.5 var(--font-mono); padding-left: 1.4rem; position: relative;
  color: var(--ink-2);
}
.verify-out li::before { position: absolute; left: 0; }
.verify-out li.ok::before { content: "✓"; color: var(--ok); }
.verify-out li.bad::before { content: "✕"; color: var(--danger); }
.verify-out li.note::before { content: "·"; }
.verify-out li.bad { color: var(--danger); }
.verdict {
  font: 600 .85rem/1.4 var(--font-mono); letter-spacing: .04em; margin: 0;
}
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--danger); }
.verdict.working { color: var(--ink-2); }

/* A work that fills its own viewport needs room to be itself. */
.interactive .frame-host { display: block; }
.interactive iframe {
  display: block; width: 100%; height: min(72vh, 40rem); border: 0;
  background: var(--surface);
}
.interactive .frame-host:empty {
  height: min(72vh, 40rem); background: var(--surface);
  border: 1px dashed var(--line-2);
}
.frame-controls {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .8rem;
}
.frame-status {
  font: .7rem/1.4 var(--font-mono); letter-spacing: .05em;
  color: var(--ink-2); margin-right: auto;
}
.frame-buttons { display: flex; gap: .6rem; }
.frame-buttons button {
  font: .68rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; padding: .6rem .9rem; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line-2);
}
.frame-buttons button:hover { border-color: var(--signal); color: var(--signal); }
.frame-buttons button[disabled] { opacity: .4; cursor: default; }
.frame-buttons button[disabled]:hover {
  border-color: var(--line-2); color: var(--ink);
}

.work-foot {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem;
  padding-top: 2rem; border-top: 1px solid var(--line);
}

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

/* Essay pages read wider than the works: the works' narrow measure suits a
   poem, but About/Verify/Mirror are prose and were cramped at 34rem. */
.prose { max-width: 42rem; }
.prose h1 {
  font: 400 clamp(2rem, 5.5vw, 3rem)/1.1 var(--font-editorial);
  margin: 0 0 1.5rem;
}
.prose h2 {
  font: 400 1.4rem/1.3 var(--font-editorial); margin: 2.5rem 0 .8rem;
}
.prose p, .prose li {
  font-family: var(--font-editorial); font-size: 1.05rem; line-height: 1.75;
}
.prose code, .prose pre {
  font-family: var(--font-mono); font-size: .8rem;
}
.prose pre {
  background: var(--surface); border: 1px solid var(--line); padding: 1rem;
  overflow-x: auto;
}
.prose ol, .prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

.prose blockquote {
  margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid var(--signal);
}
.prose blockquote p {
  font-size: 1.15rem; line-height: 1.7; font-style: italic; margin: 0 0 .6rem;
}
.prose blockquote cite {
  font: .7rem/1 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); font-style: normal;
}

/* A definition, set like an entry in a field guide. */
.defn {
  margin: 1.6rem 0; padding: 1rem 1.2rem; background: var(--surface);
  border: 1px solid var(--line); font-family: var(--font-editorial);
  font-size: 1rem; line-height: 1.7;
}
.defn span {
  display: block; font: .68rem/1 var(--font-mono);
  letter-spacing: var(--tracking); text-transform: uppercase;
  color: var(--signal); margin-bottom: .5rem;
}

/* The first inscription, shown the way the genesis block is shown. */
.genesis { margin: 2rem 0; }
.genesis pre {
  font-size: .72rem; line-height: 1.7; max-height: none;
}
.genesis figcaption {
  font-size: .8rem; color: var(--ink-2); margin-top: .8rem;
  line-height: 1.6; max-width: 42rem;    /* matches the prose measure */
}

/* --------------------------------------------------------- living projects */
.project-cards, .living-list, .project-offices ul, .version-history {
  list-style: none; padding: 0; margin: 0;
}
.project-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.project-cards li { display: flex; }
.project-card {
  width: 100%; min-height: 14rem; padding: 1.6rem; display: grid;
  grid-template-rows: auto auto 1fr auto; align-content: start;
  gap: .8rem; color: var(--ink); border: 1px solid var(--line);
  background: var(--surface); text-decoration: none; box-sizing: border-box;
}
.project-card:hover { border-color: var(--signal); }
.project-card strong { font: 400 2rem/1.1 var(--font-editorial); }
.project-card small {
  margin-top: auto; font: .66rem/1.5 var(--font-mono); color: var(--ink-2);
}
.project-gate { max-width: 50rem; margin-bottom: 4rem; }
.project-gate h1 {
  overflow-wrap: anywhere;
  font: 400 clamp(3rem, 9vw, 6.5rem)/.95 var(--font-editorial);
  margin: .8rem 0 1.4rem;
}
.start-reading {
  display: inline-block; margin-top: 1rem; font: .72rem/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--tracking);
}
.aperture-invitation {
  position: relative; max-width: 58rem; margin: -1rem 0 4rem;
  padding: clamp(1.4rem, 3.5vw, 2.3rem);
  border: 1px solid var(--line-2); background: var(--surface);
  overflow: hidden;
}
.aperture-invitation::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(var(--signal), var(--warn));
}
.aperture-invitation-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem; align-items: end;
}
.aperture-invitation .shelf-kind { margin: 0 0 .8rem; color: var(--signal); }
.aperture-invitation h2 {
  margin: 0 0 .65rem; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--font-editorial);
}
.aperture-invitation-copy { max-width: 40rem; }
.aperture-invitation-copy > p:last-child {
  margin: 0; color: var(--ink-2); font: 400 1rem/1.65 var(--font-editorial);
}
.aperture-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.aperture-button, .aperture-link {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 2.8rem; padding: .75rem 1rem; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); cursor: pointer;
  font: .66rem/1.2 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; text-decoration: none;
}
.aperture-button:hover, .aperture-link:hover {
  border-color: var(--signal); color: var(--signal);
}
.aperture-button[disabled] { opacity: .52; cursor: wait; }
.aperture-button[data-copy-state="copied"] {
  border-color: var(--ok); color: var(--ok);
}
.aperture-status {
  grid-column: 1 / -1; min-height: 1.4em; margin: 0;
  color: var(--ink-2); font: .65rem/1.5 var(--font-mono);
}
.aperture-workbench {
  max-width: 58rem; margin: 0 0 4rem; padding: clamp(1.4rem, 3.5vw, 2.3rem);
  border: 1px solid var(--line-2); background: var(--surface);
}
.aperture-workbench-head { max-width: 44rem; }
.aperture-workbench-head h2 {
  margin: .6rem 0 .8rem; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1.1 var(--font-editorial);
}
.aperture-workbench-head > p:last-child {
  color: var(--ink-2); font: 400 1rem/1.65 var(--font-editorial);
}
.aperture-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; list-style: none; margin: 1.6rem 0; padding: 0;
  counter-reset: aperture-step;
}
.aperture-steps li {
  counter-increment: aperture-step; padding-top: .8rem;
  border-top: 1px solid var(--line);
}
.aperture-steps li::before {
  content: "0" counter(aperture-step); display: block; margin-bottom: .45rem;
  color: var(--signal); font: .62rem/1 var(--font-mono);
  letter-spacing: var(--tracking);
}
.aperture-prompt-label {
  display: block; margin: 1.4rem 0 .55rem; color: var(--ink-2);
  font: .65rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.aperture-prompt {
  display: block; width: 100%; min-height: 25rem; resize: vertical;
  padding: 1rem; border: 1px solid var(--line-2); border-radius: 0;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--ink); font: .76rem/1.6 var(--font-mono);
}
.aperture-workbench .aperture-actions { margin-top: 1rem; }
.aperture-workbench .aperture-status { margin-top: .75rem; }
.aperture-openers {
  margin: 1rem 0 0; color: var(--ink-2); font: .78rem/1.6 var(--font-sans);
}
.aperture-openers a { margin-right: .8rem; }
.aperture-boundary {
  margin: 1.3rem 0 0; padding-left: 1rem; border-left: 2px solid var(--line-2);
  color: var(--ink-2); font-size: .85rem;
}
.project-page section > h2, .living-aside h2 {
  font: .68rem/1.4 var(--font-mono); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 1rem;
}
.living-list { border-top: 1px solid var(--line); }
.living-row {
  display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: 1.5rem;
  align-items: center; padding: 1.2rem 0; color: var(--ink);
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.living-row:hover .living-title strong { color: var(--signal); }
.living-code, .living-title { display: grid; gap: .2rem; }
.living-code strong { font: .75rem/1.4 var(--font-mono); }
.living-code small, .living-title small { color: var(--ink-2); }
.living-title strong { font: 400 1.25rem/1.3 var(--font-editorial); }
.living-badges {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem;
}
.living-badge {
  padding: .25rem .45rem; border: 1px solid var(--line-2);
  font: .58rem/1 var(--font-mono); letter-spacing: .05em;
}
.living-badge.confirmed { color: var(--ok); border-color: var(--ok); }
.living-badge.pending { color: var(--warn); border-color: var(--warn); }
.living-badge.living { color: var(--ink-2); }
.project-offices { margin-top: 4rem; }
.project-offices-first { margin-top: 0; margin-bottom: 4rem; }
.project-offices ul {
  display: block; border-top: 1px solid var(--line); background: transparent;
}
.project-offices li {
  display: block; padding: 0; background: transparent;
  border-bottom: 1px solid var(--line);
}
.project-office-link {
  display: grid; grid-template-columns: minmax(12rem, .45fr) minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: center; padding: 1.2rem 0;
  color: var(--ink); text-decoration: none;
}
.project-office-link strong { font: 400 1.25rem/1.3 var(--font-editorial); }
.project-office-link span { color: var(--ink-2); }
.project-office-link::after {
  content: "\2192"; color: var(--ink-2); transition: transform .2s ease, color .2s ease;
}
.project-office-link:hover strong,
.project-office-link:hover::after { color: var(--signal); }
.project-office-link:hover::after { transform: translateX(.25rem); }
.field-notes-office .project-gate { margin-bottom: 3.25rem; }
.field-note-office-count {
  margin: 1.4rem 0 0; font: .66rem/1.4 var(--font-mono);
  color: var(--signal); letter-spacing: var(--tracking); text-transform: uppercase;
}
.field-note-release { margin-top: 3.5rem; }
.field-note-release-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .8rem;
}
.field-note-release-head h2,
.field-note-release-head p {
  margin: 0; font: .66rem/1.4 var(--font-mono);
  letter-spacing: var(--tracking); text-transform: uppercase;
}
.field-note-release-head h2 { color: var(--signal); }
.field-note-release-head p { color: var(--ink-2); }
.field-note-cards {
  list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line);
}
.field-note-cards li { margin: 0; border-bottom: 1px solid var(--line); }
.field-note-card {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: start; padding: 1.35rem 0;
  color: var(--ink); text-decoration: none;
}
.field-note-card-code {
  padding-top: .18rem; color: var(--signal); font: .62rem/1.4 var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.field-note-card-copy { display: grid; gap: .45rem; max-width: 48rem; }
.field-note-card-copy strong {
  font: 400 1.35rem/1.25 var(--font-editorial);
  transition: color .2s ease;
}
.field-note-card-copy span {
  color: var(--ink-2); font: 400 .94rem/1.55 var(--font-editorial);
}
.field-note-card-copy em {
  color: var(--ink-2); font: italic .78rem/1.45 var(--font-editorial);
}
.field-note-card-arrow {
  padding-top: .1rem; color: var(--ink-2); font: 1rem/1.4 var(--font-mono);
  transition: color .2s ease, transform .2s ease;
}
.field-note-card:hover .field-note-card-copy strong,
.field-note-card:hover .field-note-card-arrow { color: var(--signal); }
.field-note-card:hover .field-note-card-arrow { transform: translateX(.25rem); }
.field-note-reading-page .living-head { margin-bottom: 2.5rem; }
.field-note-themes { list-style: none; margin: .9rem 0 0; padding: 0; }
.field-note-themes li { margin: 0; border-bottom: 1px solid var(--line); }
.field-note-themes a,
.field-note-themes span {
  display: block; padding: .48rem 0; color: var(--ink-2);
  font: .65rem/1.4 var(--font-mono); text-transform: uppercase;
  letter-spacing: .05em;
}
.field-note-themes a { text-decoration: none; }
.field-note-themes a:hover { color: var(--signal); }
.living-head { max-width: 52rem; margin-bottom: 3rem; min-width: 0; }
.living-head h1 {
  overflow-wrap: anywhere;
  font: 400 clamp(2.8rem, 7vw, 5rem)/1 var(--font-editorial);
  margin: .8rem 0 1rem;
}
.living-head .living-badges { justify-content: flex-start; margin: 1.2rem 0; }
.stone {
  padding: 1rem 1.2rem; border-left: 2px solid var(--line-2);
  background: var(--surface);
}
.stone.verified { border-color: var(--ok); }
.stone.pending { border-color: var(--warn); }
.living-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem;
}
.living-reading { min-width: 0; max-width: 46rem; }
.living-meta { min-width: 0; overflow-wrap: anywhere; }
.living-meta code { white-space: normal; overflow-wrap: anywhere; }
.field-tended-context { margin-top: 1rem; font-size: .88rem; overflow-wrap: anywhere; }
.field-tended-context summary { cursor: pointer; color: var(--signal); }
.field-tended-context p { margin: .8rem 0; }
.tending-journal { margin: 3rem 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.tending-entry { margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); overflow-wrap: anywhere; }
.tending-entry h2, .tending-entry h3 { margin: .4rem 0 1rem; }
.tending-entry li { margin: .65rem 0; max-width: 65ch; }
.tending-status { font: .72rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--signal); }
.tending-links, .tending-pagination { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.tending-entry ul { padding-left: 1.2rem; }
.living-source {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font: .85rem/1.8 var(--font-mono);
}
.living-interactive iframe {
  width: 100%; min-height: 70vh; border: 1px solid var(--line);
  background: white;
}
.living-aside {
  min-width: 0; overflow-wrap: anywhere;
  border-left: 1px solid var(--line); padding-left: 1.5rem;
  color: var(--ink-2);
}
.field-note-anchor { scroll-margin-top: calc(var(--site-header-offset) + 4rem); }
.field-note-index {
  position: sticky; top: calc(var(--site-header-offset) + 1.5rem); z-index: 10;
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--site-header-offset) - 3rem);
  margin: 0 0 2.2rem; padding: .15rem 0 .8rem;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}
.field-note-index ol {
  list-style: none; min-height: 0; margin: 0; padding: 0 .65rem 0 0;
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 2rem;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.field-note-index ol::-webkit-scrollbar { width: 4px; }
.field-note-index ol::-webkit-scrollbar-thumb {
  border-radius: 999px; background: var(--line-2);
}
.field-note-index li { margin: 0; }
.field-note-index a {
  display: grid; grid-template-columns: 3.8rem minmax(0, 1fr); gap: .55rem;
  align-items: baseline; padding: .48rem .35rem .48rem .55rem;
  border-left: 1px solid transparent; color: var(--ink-2);
  text-decoration: none; transition: color .2s ease, border-color .2s ease;
}
.field-note-index code {
  padding: 0; border: 0; background: transparent;
  color: inherit; font: .6rem/1.4 var(--font-mono); letter-spacing: .05em;
}
.field-note-index span { font: .72rem/1.35 var(--font-sans); }
.field-note-index a:hover,
.field-note-index a[aria-current="location"] {
  color: var(--ink); border-left-color: var(--signal);
}
.field-note-index a[aria-current="location"] code { color: var(--signal); }
.version-history li { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.version-history a { display: block; color: inherit; text-decoration: none; }
.version-history a:hover strong { color: var(--signal); }
.version-history code {
  display: block; margin-top: .35rem; overflow-wrap: anywhere;
  font-size: .58rem;
}
.living-next {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 4rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.living-next a:last-child { text-align: right; }

/* ------------------------------------------------ correspondence */

.corr-lede{max-width:var(--measure);font:1.05rem/1.7 var(--font-editorial);}
.correspondence-page .living-head h1{font-size:clamp(2.25rem,7vw,5rem);}
.corr-lede p{margin:0 0 1.1rem;}
.corr-section{margin-top:4.5rem;}
.corr-section > h2{
  font:400 clamp(1.5rem,3.4vw,2.1rem)/1.2 var(--font-editorial);
  margin:0 0 .5rem;padding-bottom:.8rem;border-bottom:1px solid var(--line);}
.corr-section > .corr-note{max-width:var(--measure);color:var(--ink-2);
  font-size:.92rem;margin:.9rem 0 0;}

/* the braid */
.braid-wrap{margin:2rem 0 0;overflow-x:auto;}
table.braid{border-collapse:collapse;width:100%;min-width:34rem;
  font:.72rem/1.3 var(--font-mono);}
table.braid caption{text-align:left;color:var(--ink-2);font-size:.8rem;
  font-family:var(--font-sans);margin-bottom:1rem;max-width:var(--measure);}
table.braid th[scope=col]{font-weight:400;color:var(--ink-2);
  letter-spacing:.04em;text-align:center;padding:0 .2rem .7rem;
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:.62rem;}
table.braid th[scope=col].thread-col{text-align:left;}
table.braid th[scope=col].gpt{color:var(--warn);}
table.braid th[scope=col].claude{color:var(--signal);}
table.braid th[scope=row]{font-weight:400;text-align:left;
  padding:.42rem 1rem .42rem 0;color:var(--ink);white-space:nowrap;
  font-family:var(--font-sans);font-size:.78rem;}
table.braid th[scope=row] a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line-2);}
table.braid th[scope=row] a:hover{color:var(--signal);}
table.braid td{padding:.42rem .2rem;text-align:center;position:relative;}
table.braid tbody tr:hover th[scope=row]{color:var(--signal);}
table.braid tbody tr:hover td .mid::before{background:var(--line-2);}
.mark{display:inline-block;width:.72rem;height:.72rem;border-radius:50%;
  vertical-align:middle;}
.mark.gpt{background:var(--warn);}
.mark.claude{background:var(--signal);}
.mark.hollow{background:none;border:1.5px solid var(--danger);}
.mid{display:block;position:relative;height:.72rem;}
.mid::before{content:"";position:absolute;inset-inline:-50%;top:50%;
  height:1px;background:var(--line);}
.braid-key{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem;
  font:.72rem/1 var(--font-mono);color:var(--ink-2);align-items:center;}
.braid-key span{display:flex;align-items:center;gap:.45rem;}
.braid-key .key-line{width:1.4rem;overflow:hidden;}

/* threads */
.thread{margin:0 0 3.2rem;padding-top:2rem;border-top:1px solid var(--line);}
.thread:first-of-type{border-top:none;padding-top:0;}
.thread-head{max-width:var(--measure);}
.thread h3{font:400 1.35rem/1.25 var(--font-editorial);margin:.5rem 0 .6rem;}
.thread .stake{margin:0;color:var(--ink-2);font-size:.95rem;}
.chip{display:inline-block;padding:.22rem .5rem;border:1px solid var(--line-2);
  font:.58rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);vertical-align:middle;}
.chip.ratified{color:var(--ok);border-color:var(--ok);}
.chip.moved{color:var(--signal);border-color:var(--signal);}
.chip.open{color:var(--warn);border-color:var(--warn);}
.chip.dangling{color:var(--danger);border-color:var(--danger);}
.chip.turns{color:var(--ink-2);}

.turns{list-style:none;margin:1.6rem 0 0;padding:0;max-width:48rem;}
.turn{position:relative;padding:0 0 1.5rem 1.6rem;
  border-left:1px solid var(--line);}
.turn:last-child{border-left-color:transparent;padding-bottom:0;}
.turn::before{content:"";position:absolute;left:-.3rem;top:.42rem;
  width:.55rem;height:.55rem;border-radius:50%;background:var(--line-2);}
.turn.gpt::before{background:var(--warn);}
.turn.claude::before{background:var(--signal);}
.turn.silence::before{background:none;border:1.5px solid var(--danger);}
.turn-who{font:.62rem/1 var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .5rem;}
.turn-who a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--line-2);}
.turn-who a:hover{color:var(--signal);}
.turn-who .who-gpt{color:var(--warn);}
.turn-who .who-claude{color:var(--signal);}
.turn blockquote{margin:0 0 .6rem;padding:0;
  font:1.02rem/1.6 var(--font-editorial);}
.turn blockquote p{margin:0 0 .6rem;}
.turn blockquote p:last-child{margin-bottom:0;}
.turn .gloss{margin:0;color:var(--ink-2);font-size:.9rem;}
.lands{max-width:var(--measure);margin:1.4rem 0 0;padding:.9rem 1.1rem;
  border-left:2px solid var(--line-2);background:var(--surface);font-size:.92rem;}
.lands strong{font-weight:600;}
.lands.moved{border-left-color:var(--signal);}
.lands.dangling{border-left-color:var(--danger);}
.lands.ratified{border-left-color:var(--ok);}

/* spine treatment */
.spine{border:1px solid var(--line-2);padding:clamp(1.4rem,3.5vw,2.4rem);
  background:var(--surface);}
.spine .thread{border-top:none;padding-top:0;margin-bottom:0;}

/* letters table */
.letters{list-style:none;margin:1.5rem 0 0;padding:0;border-top:1px solid var(--line);}
.letters li{display:grid;grid-template-columns:7rem 1fr auto;gap:.4rem 1.2rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline;}
.letters .id{font:.72rem/1.3 var(--font-mono);letter-spacing:.05em;}
.letters .id.gpt{color:var(--warn);}
.letters .id.claude{color:var(--signal);}
.letters .what{min-width:0;}
.letters .what a{text-decoration:none;color:inherit;font-weight:600;}
.letters .what a:hover{color:var(--signal);}
.letters .what p{margin:.3rem 0 0;color:var(--ink-2);font-size:.88rem;}
.letters .when{font:.68rem/1.3 var(--font-mono);color:var(--ink-2);
  white-space:nowrap;}
@media (max-width:38rem){
  .letters li{grid-template-columns:1fr;}
  .letters .when{grid-row:1;justify-self:start;}
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="psychedelic"] body::before,
  :root[data-theme="psychedelic"] body::after { animation: none; }
  .field-node, .field-node > span,
  .field-node-shape::before,
  .field-node-shape::after,
  .field-node-text { animation: none; transition: none; }
  .field-node[data-facet],
  :root[data-theme="psychedelic"] .field-node-shape,
  :root[data-theme="psychedelic"] .field-node-text,
  :root[data-theme="psychedelic"] .field-node-shape::before,
  :root[data-theme="psychedelic"] .field-node-shape::after {
    animation: none; transition: none;
  }
  .field-node { translate: 0 0 !important; }
  html:focus-within { scroll-behavior: auto; }
}

@media (max-width: 40rem) {
  :root { --site-header-offset: 12.5rem; }
  header.site .bar { gap: .8rem 1.2rem; }
  header.site nav {
    flex-basis: 100%; flex-wrap: wrap; gap: .65rem 1rem;
  }
  .views button { padding: .8rem .7rem; }
  .views button:first-child { padding-left: 0; }
  .facts th { width: auto; white-space: normal; display: block;
    border: 0; padding-bottom: 0; }
  .facts td { display: block; padding-top: .2rem; }
  .project-cards, .living-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .aperture-invitation { margin-top: 0; }
  .aperture-invitation-grid { grid-template-columns: 1fr; align-items: start; }
  .aperture-actions { align-items: stretch; flex-direction: column; }
  .aperture-button, .aperture-link { width: 100%; }
  .aperture-steps { grid-template-columns: 1fr; }
  .aperture-prompt { min-height: 31rem; }
  .project-office-link { grid-template-columns: 1fr auto; gap: .4rem 1rem; }
  .project-office-link span { grid-column: 1; }
  .project-office-link::after { grid-column: 2; grid-row: 1 / span 2; }
  .field-note-release-head { display: block; }
  .field-note-release-head p { margin-top: .35rem; }
  .field-note-card { grid-template-columns: 1fr auto; gap: .45rem 1rem; }
  .field-note-card-code { grid-column: 1; }
  .field-note-card-copy { grid-column: 1; }
  .field-note-card-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .living-row { grid-template-columns: 1fr; gap: .6rem; }
  .directory-search-row { grid-template-columns: 1fr; }
  .directory-search button { margin: -1px 0 0; }
  .directory-results li { grid-template-columns: 1fr; gap: .65rem; }
  .directory-result-subjects { grid-column: 1; }
  .living-badges { justify-content: flex-start; }
  .living-aside {
    border-left: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0;
  }
  .field-note-index { position: static; display: block; max-height: none; }
  .field-note-index ol { overflow: visible; padding-right: 0; }
  .field-stage { min-height: 34rem; }
  .field-progress { top: .7rem; }
  .field-progress [data-field-instruction] { max-width: 17rem; }
  .field-mode { top: 3.7rem; left: 0; right: auto; }
  .field-node, .field-node[data-facet] { min-width: 0; width: 7.5rem; max-width: 38%; font-size: .95rem; }
  .field-node-shape { padding: .65rem .25rem; }
  .field-node[data-slot="0"] { left: 18%; top: 24%; }
  .field-node[data-slot="1"] { left: 54%; top: 16%; }
  .field-node[data-slot="2"] { left: 80%; top: 31%; }
  .field-node[data-slot="3"] { left: 75%; top: 57%; }
  .field-node[data-slot="4"] { left: 72%; top: 80%; }
  .field-node[data-slot="5"] { left: 36%; top: 84%; }
  .field-node[data-slot="6"] { left: 18%; top: 64%; }
  .field-node[data-slot="7"] { left: 42%; top: 50%; }
  .field-node[data-slot="8"] { left: 50%; top: 48%; }
  .field-node[data-slot="9"] { left: 31%; top: 49%; }
  .field-node[data-slot="10"] { left: 69%; top: 49%; }
  .field-stage[data-depth="2"] .field-node[data-slot="9"] { left: 25%; }
  .field-stage[data-depth="2"] .field-node[data-slot="10"] { left: 75%; }
  .field-stage[data-depth="3"] .field-node[data-slot="8"] {
    left: 50%; top: 40%;
  }
  .field-stage[data-depth="3"] .field-node[data-slot="9"] {
    left: 25%; top: 58%;
  }
  .field-stage[data-depth="3"] .field-node[data-slot="10"] {
    left: 75%; top: 58%;
  }
  .field-chord { align-items: flex-start; flex-direction: column; }
  .field-actions { justify-content: flex-start; }
  .field-results { grid-template-columns: 1fr; }
  .field-result { padding: 1.3rem 0; }
  .field-result + .field-result {
    padding-left: 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .field-marginalia { grid-template-columns: 1fr; gap: .4rem; }
}

@media print {
  header.site, .crumb { position: static; }
  header.site nav, .views, .verify-box, .work-foot, footer.site { display: none; }
  .panel { display: block !important; }
  .js .panel-title { display: block; }
}