:root {
  color-scheme: light;
  --paper: #f3f0e8;
  --paper-bright: #fbfaf6;
  --ink: #14211e;
  --ink-soft: #52605b;
  --line: #c9cdc5;
  --night: #101b19;
  --night-soft: #1b2c28;
  --acid: #dfff64;
  --cobalt: #526dff;
  --coral: #ff735f;
  --aqua: #75d6c5;
  --gold: #d7a84f;
  --measure: 42rem;
  --wide: 80rem;
  --radius-sm: 0.65rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --shadow: 0 1.25rem 3rem rgb(20 33 30 / 0.11);
  --sans: Inter, Aptos, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #121a18;
    --paper-bright: #19231f;
    --ink: #edf3ed;
    --ink-soft: #afbbb5;
    --line: #3b4843;
    --night: #080f0d;
    --night-soft: #13201d;
    --shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.28);
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background:
    linear-gradient(90deg, transparent 49.9%, rgb(82 109 255 / 0.035) 50%, transparent 50.1%),
    var(--paper);
  color: var(--ink);
  font: 400 1rem/1.7 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(circle, rgb(20 33 30 / 0.11) 0.8px, transparent 0.8px);
  background-size: 1.4rem 1.4rem;
  mask-image: linear-gradient(to bottom, transparent, #000 22rem, transparent 70rem);
  content: "";
  pointer-events: none;
}
button,
input,
select {
  font: inherit;
}
a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-color: var(--cobalt);
}
:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--night);
}
::selection {
  background: var(--acid);
  color: #101b19;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--acid);
  color: #101b19;
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}
.skip-link:focus {
  transform: translateY(0);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 25%);
  background: color-mix(in srgb, var(--paper), transparent 6%);
  backdrop-filter: blur(18px);
}
.site-header__inner {
  display: grid;
  width: min(calc(100% - 2.5rem), var(--wide));
  min-height: 6rem;
  margin-inline: auto;
  align-items: center;
  gap: 2rem;
  grid-template-columns: minmax(15rem, 1fr) auto;
}
.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.brand__mark {
  position: relative;
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.brand__mark i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--ink);
}
.brand__mark i:nth-child(1) {
  top: 0.38rem;
  left: 1.05rem;
  width: 0.48rem;
  height: 0.48rem;
  background: var(--cobalt);
}
.brand__mark i:nth-child(2) {
  right: 0.38rem;
  bottom: 0.55rem;
  width: 0.68rem;
  height: 0.68rem;
  background: var(--coral);
}
.brand__mark i:nth-child(3) {
  bottom: 0.43rem;
  left: 0.45rem;
  width: 0.36rem;
  height: 0.36rem;
  background: var(--ink);
}
.brand__mark::before,
.brand__mark::after {
  position: absolute;
  height: 1px;
  background: var(--ink);
  content: "";
  transform-origin: left center;
}
.brand__mark::before {
  top: 1.1rem;
  left: 0.72rem;
  width: 1.35rem;
  transform: rotate(34deg);
}
.brand__mark::after {
  top: 1.75rem;
  left: 0.66rem;
  width: 1.1rem;
  transform: rotate(-34deg);
}
.brand__name,
.brand__descriptor {
  display: block;
}
.brand__name {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand__descriptor {
  margin-top: 0.18rem;
  color: var(--ink-soft);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.primary-nav {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
}
.primary-nav a {
  position: relative;
  display: grid;
  min-height: 3.1rem;
  padding: 0.52rem 0.75rem;
  align-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.primary-nav a span {
  color: var(--ink-soft);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.primary-nav a:hover {
  background: var(--paper-bright);
  color: var(--cobalt);
  transform: translateY(-2px);
}
.primary-nav a[aria-current="page"] {
  background: var(--night);
  color: #f5f7f2;
}
.primary-nav a[aria-current="page"] span {
  color: var(--acid);
}
main {
  min-height: 65vh;
}
.section-shell,
.site-footer__inner,
.ledger-strip__inner,
.correction-band__inner {
  width: min(calc(100% - 2.5rem), var(--wide));
  margin-inline: auto;
}
.section-shell {
  padding-block: clamp(3.75rem, 6vw, 6.5rem);
}
.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1,
h2,
h3,
h4 {
  line-height: 1.08;
  text-wrap: balance;
}
h1,
h2 {
  font-family: var(--serif);
  font-weight: 650;
  letter-spacing: -0.045em;
}
h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(1.9rem, 3.5vw, 3.6rem);
}
h3,
h4 {
  letter-spacing: -0.025em;
}
em {
  font-weight: 400;
}
code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--paper-bright);
  font: 0.86em/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-heading > p:not(.eyebrow) {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.72;
}
.section-heading--split {
  display: grid;
  max-width: none;
  align-items: end;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 0.7fr);
}
.section-heading--split > p,
.section-heading--split > a {
  justify-self: end;
}
.button {
  display: inline-flex;
  min-height: 3.3rem;
  padding: 0.78rem 1.1rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.18);
}
.button--primary {
  border-color: var(--acid);
  background: var(--acid);
  color: #101b19;
}
.button--quiet {
  border-color: rgb(255 255 255 / 0.4);
  color: #f5f7f2;
}
.button--light {
  border-color: var(--acid);
  color: var(--acid);
}
.button--dark {
  border-color: var(--night);
  background: var(--night);
  color: #fff;
}
.text-link,
.card-link {
  width: fit-content;
  font-size: 0.84rem;
  font-weight: 850;
  text-decoration: none;
}
.text-link span,
.card-link span {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 180ms ease;
}
.text-link:hover span,
.card-link:hover span {
  transform: translateX(0.28rem);
}
.text-link--light {
  color: var(--acid);
}
.hero {
  position: relative;
  display: grid;
  min-height: min(44rem, calc(100svh - 6rem));
  padding: clamp(3.75rem, 6vw, 6.5rem) max(1.25rem, calc((100vw - var(--wide)) / 2));
  overflow: hidden;
  align-items: end;
  gap: 2.5rem;
  background:
    radial-gradient(circle at var(--pointer-x, 72%) var(--pointer-y, 35%), rgb(82 109 255 / 0.34), transparent 24rem),
    linear-gradient(126deg, #0b1512 0%, #142723 52%, #0e1917 100%);
  color: #f3f7f1;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.6fr);
  isolation: isolate;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  content: "";
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
}
.hero__eyebrow {
  color: var(--acid);
}
.hero h1 {
  max-width: 58rem;
  margin-bottom: 1.6rem;
  font-size: clamp(3rem, 5.5vw, 6rem);
  line-height: 0.91;
  letter-spacing: -0.06em;
}
.hero h1 em {
  color: var(--aqua);
}
.hero__lede {
  max-width: 42rem;
  margin-bottom: 2rem;
  color: #cbd7d1;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.65;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.hero__index {
  position: relative;
  z-index: 2;
  display: grid;
  margin: 0;
  border-top: 1px solid rgb(255 255 255 / 0.28);
  grid-template-columns: 1fr 1fr;
}
.hero__index div {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
}
.hero__index div:nth-child(odd) {
  border-right: 1px solid rgb(255 255 255 / 0.2);
}
.hero__index dt {
  color: #aebdb6;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__index dd {
  margin: 0.18rem 0 0;
  font-family: var(--serif);
  font-size: 2.15rem;
  line-height: 1;
}
.hero__field,
.orbit {
  position: absolute;
  pointer-events: none;
}
.hero__field {
  z-index: 0;
  inset: 0;
}
.orbit {
  border: 1px solid rgb(223 255 100 / 0.28);
  border-radius: 50%;
}
.orbit--one {
  top: -12rem;
  right: -8rem;
  width: 42rem;
  height: 42rem;
  animation: orbit-drift 18s ease-in-out infinite alternate;
}
.orbit--two {
  top: 5rem;
  right: 7rem;
  width: 22rem;
  height: 22rem;
  border-color: rgb(117 214 197 / 0.35);
  animation: orbit-drift 13s ease-in-out 1s infinite alternate-reverse;
}
.orbit--three {
  right: 17rem;
  bottom: -9rem;
  width: 28rem;
  height: 28rem;
  border-style: dashed;
  border-color: rgb(255 115 95 / 0.35);
  animation: slow-spin 34s linear infinite;
}
.hero__node {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.7rem rgb(223 255 100 / 0.08), 0 0 2rem var(--acid);
  background: var(--acid);
  animation: node-pulse 4s ease-in-out infinite;
}
.hero__node--one {
  top: 18%;
  right: 14%;
}
.hero__node--two {
  top: 42%;
  right: 31%;
  background: var(--aqua);
  animation-delay: 1.3s;
}
.hero__node--three {
  right: 9%;
  bottom: 18%;
  background: var(--coral);
  animation-delay: 2.4s;
}
.orientation {
  border-bottom: 1px solid var(--line);
}
.signal-grid {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.signal-card {
  --card-accent: var(--cobalt);
  position: relative;
  min-height: 16rem;
  padding: 1.35rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.signal-card::after {
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: var(--card-accent);
  content: "";
  opacity: 0.16;
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.signal-card:hover::after {
  transform: scale(1.35) translate(-0.5rem, -0.5rem);
}
.signal-card:nth-child(2) { --card-accent: var(--coral); }
.signal-card:nth-child(3) { --card-accent: var(--gold); }
.signal-card:nth-child(4) { --card-accent: var(--aqua); }
.signal-card__index {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 3.8rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.3rem;
}
.signal-card h3 {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
}
.signal-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.featured {
  border-bottom: 1px solid var(--line);
}
.concept-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.concept-card {
  position: relative;
  display: flex;
  min-height: 20rem;
  padding: 1.4rem;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  box-shadow: 0 0 0 transparent;
  transition: border-color 180ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.concept-card:hover {
  z-index: 1;
  border-color: var(--cobalt);
  box-shadow: var(--shadow);
  transform: translateY(-0.45rem) rotate(-0.3deg);
}
.concept-card:nth-child(3n + 2):hover {
  transform: translateY(-0.45rem) rotate(0.3deg);
}
.concept-card h3,
.concept-card h4 {
  margin-bottom: 0.85rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 2rem);
}
.concept-card h3 a,
.concept-card h4 a {
  text-decoration: none;
}
.concept-card h3 a::after,
.concept-card h4 a::after {
  position: absolute;
  inset: 0;
  content: "";
}
.concept-card > p {
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
}
.concept-card > .concept-card__lenses {
  margin: -0.35rem 0 1.35rem 0.7rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--cobalt);
  color: var(--cobalt);
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.45;
}
.concept-card .card-link {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.tension-preview {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
}
.tension-preview .section-heading {
  position: sticky;
  top: 2rem;
  align-self: start;
}
.tension-preview > p {
  grid-column: 2;
}
.tension-preview__grid {
  display: grid;
  gap: 1.2rem;
}
.tension-card {
  padding: clamp(1.5rem, 4vw, 2.7rem);
  border-radius: var(--radius-lg);
  background: var(--night);
  color: #eef5ef;
}
.tension-card:nth-child(even) {
  background: var(--cobalt);
}
.tension-card__status {
  display: flex;
  margin-bottom: 2.5rem;
  align-items: center;
  justify-content: space-between;
  color: #c7d1cc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tension-card__poles {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
.tension-card__poles > div + div {
  padding-left: 1.5rem;
  border-left: 1px solid rgb(255 255 255 / 0.3);
}
.tension-card__poles p {
  margin: 0;
  color: #e4ebe7;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.45;
}
.pole-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--acid);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.correction-band,
.ledger-strip {
  background: var(--night);
  color: #f0f5f0;
}
.correction-band__inner {
  display: grid;
  padding-block: clamp(3.75rem, 6vw, 6rem);
  gap: 3rem;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
}
.correction-band .eyebrow,
.ledger-strip .eyebrow {
  color: var(--acid);
}
.correction-band h2,
.ledger-strip h2 {
  font-size: clamp(2rem, 3.8vw, 3.8rem);
}
.correction-band__record {
  padding: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.35);
  border-bottom: 1px solid rgb(255 255 255 / 0.35);
}
.correction-band__record > span {
  display: block;
  margin-bottom: 2rem;
  color: #aebcb5;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.correction-band__record s {
  color: #cba49d;
}
.source-note {
  max-width: 65rem;
  text-align: center;
}
.source-note p:not(.eyebrow) {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--ink-soft);
}
.page-hero {
  padding-top: clamp(3.75rem, 6vw, 6rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero__side {
  display: grid;
  align-content: end;
  gap: 1.4rem;
}
.page-hero__grid {
  display: grid;
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
}
.page-hero h1 {
  margin-bottom: 0;
  font-size: clamp(3rem, 5.3vw, 5.75rem);
  line-height: 0.94;
}
.page-hero h1 em {
  color: var(--cobalt);
}
.page-hero__lede {
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.75;
}
.explorer__heading {
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-columns: 1fr auto;
}
.explorer__heading h2 {
  margin-bottom: 0;
}
.filter-bar {
  display: flex;
  padding: 0.3rem;
  gap: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-bright);
}
.filter-bar button {
  min-height: 2.5rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}
.filter-bar button:hover {
  color: var(--cobalt);
}
.filter-bar button[aria-pressed="true"] {
  background: var(--night);
  color: var(--acid);
}
.filter-status {
  min-height: 1.6rem;
  margin: 1rem 0 4rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.explorer__section {
  margin-bottom: clamp(2.75rem, 4vw, 3.75rem);
}
.explorer__section[hidden],
[data-explorer-item][hidden] {
  display: none !important;
}
.explorer__label {
  display: grid;
  margin-bottom: 2rem;
  gap: 1rem;
  grid-template-columns: 3rem 1fr;
}
.explorer__label > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 850;
}
.explorer__label h3 {
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.8rem;
}
.explorer__label p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.tension-list {
  border-top: 1px solid var(--ink);
}
.tension-disclosure {
  border-bottom: 1px solid var(--line);
}
.tension-disclosure summary {
  display: grid;
  min-height: 5rem;
  padding: 1rem 0;
  align-items: center;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 650;
  list-style: none;
}
.tension-disclosure summary::-webkit-details-marker {
  display: none;
}
.disclosure-action {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-soft);
  font: 0.68rem/1 var(--sans);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.disclosure-action i {
  position: relative;
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.disclosure-action i::before,
.disclosure-action i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transition: transform 180ms ease;
}
.disclosure-action i::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.tension-disclosure[open] .disclosure-action i::after {
  transform: translate(-50%, -50%) rotate(0);
}
.tension-disclosure__body {
  display: grid;
  padding: 1rem 0 2.5rem 4rem;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}
.tension-disclosure__body > div {
  padding: 1.3rem;
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.tension-disclosure__body p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
}
.silence-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.silence-card {
  display: grid;
  min-height: 20rem;
  padding: 1.4rem;
  gap: 1.2rem;
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-md);
  grid-template-columns: auto 1fr;
}
.silence-card__mark {
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  place-items: center;
  border: 1px dashed var(--ink-soft);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.3rem;
}
.silence-card h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
}
.silence-card summary {
  width: fit-content;
  color: var(--cobalt);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}
.silence-card details p {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.instrument-control {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.ledger-strip__inner {
  display: grid;
  padding-block: clamp(3.75rem, 6vw, 6rem);
  gap: 3rem;
  grid-template-columns: 1fr 1fr;
}
.ledger-strip__inner > div > p:not(.eyebrow) {
  max-width: 34rem;
  color: #b7c2bc;
}
.ledger-strip ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ledger-strip li {
  display: grid;
  padding: 1rem 0;
  gap: 1rem;
  border-top: 1px solid rgb(255 255 255 / 0.24);
  grid-template-columns: 5rem 1fr;
}
.ledger-strip li span {
  color: var(--acid);
  font: 0.72rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.ledger-strip li p {
  margin: 0;
  color: #dbe3de;
}
.ledger-strip .button {
  align-self: end;
  justify-self: start;
}
.concept-detail__header {
  padding-bottom: 1.9rem;
  border-bottom: 1px solid var(--line);
}
.breadcrumbs ol {
  display: flex;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  padding: 0;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
  list-style: none;
}
.breadcrumbs li + li::before {
  margin-right: 0.6rem;
  content: "/";
}
.concept-detail__title {
  display: grid;
  align-items: end;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
}
.concept-detail__title--single {
  display: block;
}
.concept-detail h1 {
  max-width: 54rem;
  margin: 0;
  font-size: clamp(2.9rem, 5.2vw, 5.75rem);
  line-height: 0.93;
}
.concept-detail__lineage {
  max-width: 62rem;
  margin: 0.85rem 0 0;
  padding-left: 0.8rem;
  color: color-mix(in srgb, var(--cobalt), var(--ink) 28%);
  font-family: var(--serif);
  font-size: clamp(0.78rem, 1.05vw, 0.92rem);
  line-height: 1.55;
}
.concept-detail__body {
  display: grid;
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(14rem, 0.5fr) minmax(0, 1.5fr);
}
.concept-detail__body--solo {
  grid-template-columns: minmax(0, 1fr);
}
.concept-detail__header {
  padding-top: clamp(2rem, 3.5vw, 3.25rem);
}
.concept-detail__body {
  padding-top: 0;
}
.detail-reading > section:first-child h2 {
  margin-top: 0;
}
.detail-rail {
  position: sticky;
  top: 2rem;
}
.detail-rail > div {
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
}
.detail-rail p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.62;
}
.detail-rail code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  font-size: 0.68rem;
}
.detail-reading {
  max-width: 46rem;
}
.detail-reading > section:first-child h2 {
  max-width: none;
  font-size: clamp(1.3rem, 1.95vw, 1.85rem);
  line-height: 1.22;
}
.prose {
  font-family: var(--serif);
}
.prose--large {
  max-width: var(--measure);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.68;
}
.prose--large p:first-child::first-letter {
  float: left;
  margin: 0.1em 0.12em 0 0;
  color: var(--cobalt);
  font-size: 4.2em;
  line-height: 0.77;
}
.bridge-note {
  margin: 3rem 0;
  padding: 1.5rem;
  border-left: 0.35rem solid var(--coral);
  background: var(--paper-bright);
}
.bridge-note p:last-child {
  margin-bottom: 0;
}
.deep-reading-section {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.deep-reading-section h2 {
  max-width: none;
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.1;
}
.deep-reading-section > p:not(.eyebrow) {
  max-width: var(--measure);
  font-size: 1.02rem;
  line-height: 1.7;
}
.lineage-tags,
.failure-list {
  display: flex;
  margin: 1.5rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.lineage-tags li {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.72rem;
}
.failure-list {
  display: grid;
  margin-bottom: 1.5rem;
}
.failure-list li {
  padding: 0.85rem 1rem;
  border-left: 0.25rem solid var(--coral);
  background: var(--paper-bright);
}
.framework-reading-list,
.tension-link-list {
  display: grid;
  margin-top: 1.5rem;
  gap: 0.8rem;
}
.framework-reading-list article,
.tension-link-list article {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.framework-reading-list h3,
.tension-link-list h3 {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.35rem;
}
.framework-reading-list p,
.tension-link-list p {
  margin: 0.4rem 0;
  font-size: 0.86rem;
}
.relationship-map {
  padding-top: clamp(3rem, 5vw, 5rem);
}
.relationship-map h2 {
  max-width: none;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
}
.relationship-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.relationship-list li {
  display: grid;
  min-height: 8rem;
  gap: 1.5rem;
  grid-template-columns: 5rem 1fr;
}
.relationship-list__line {
  position: relative;
}
.relationship-list__line::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: var(--line);
  content: "";
}
.relationship-list__line i {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  border: 3px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--cobalt);
  background: var(--cobalt);
  transform: translateX(-50%);
}
.relationship-list li > div:last-child {
  padding-bottom: 2.5rem;
}
.relationship-list__meta {
  display: flex;
  margin-bottom: 0.7rem;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
}
.relationship-list h3 {
  margin-bottom: 0.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
}
.relationship-list li > div:last-child > p:last-child {
  max-width: var(--measure);
  color: var(--ink-soft);
}
.honest-empty {
  padding: 2rem;
  border: 1px dashed var(--ink-soft);
  border-radius: var(--radius-md);
}
.honest-empty span {
  margin-right: 0.5rem;
  font-family: var(--serif);
  font-size: 1.5rem;
}
.concept-correction {
  display: grid;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  align-items: end;
  gap: 2rem;
  border-radius: var(--radius-lg);
  background: var(--coral);
  color: #121b19;
  grid-template-columns: 1fr auto;
}
.concept-correction .eyebrow {
  color: #3e2823;
}
.concept-correction h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}
.concept-correction p:last-child {
  max-width: var(--measure);
  margin-bottom: 0;
}
.concept-pagination {
  display: grid;
  padding-top: 0;
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 1fr;
}
.concept-pagination a {
  display: grid;
  min-height: 7.5rem;
  padding: 1.5rem;
  align-content: center;
  text-decoration: none;
}
.concept-pagination a:last-child {
  border-left: 1px solid var(--line);
  text-align: right;
}
.concept-pagination a span {
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.concept-pagination a strong {
  font-family: var(--serif);
  font-size: 1.1rem;
}
main > :is(h1, h2, h3, p, article, .grid, .census, dl, form, ul, ol):not([class*="hero"]):not([class*="section"]) {
  width: min(calc(100% - 2.5rem), 68rem);
  margin-inline: auto;
}
main > :is(h1, h2, h3, p, form, ul, ol):not([class*="hero"]):not([class*="section"]),
main > .lede {
  width: min(calc(100% - 2.5rem), var(--measure));
}
main > p,
article > p {
  max-width: var(--measure);
}
main > h1:first-child {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  margin-bottom: 1rem;
  font-size: clamp(2.6rem, 4.5vw, 4.25rem);
  line-height: 0.98;
}
main > h2 {
  margin-top: 3.25rem;
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  line-height: 1.08;
}
main > .lede {
  margin-bottom: 2rem;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.62;
}
main > p:last-child,
main > article:last-child,
main > .grid:last-child,
main > dl:last-child {
  margin-bottom: 7rem;
}
article.card {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
article.card h2,
main > article:not([class]) h2,
.grid .card h2 {
  max-width: none;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.12;
}
main > article:not([class]) {
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--line);
}
.grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.ref {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: none;
}
.poles {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  grid-template-columns: 1fr 1fr;
}
.pole {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.pole + .pole {
  border-left: 1px solid var(--line);
}
.pole p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  line-height: 1.5;
}
[data-silence] {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-silence] > h2 {
  grid-column: 1 / -1;
}
[data-silence] > section {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
}
.scrub {
  display: flex;
  padding: 1rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.scrub select,
.scrub button {
  min-height: 2.65rem;
  padding-inline: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
}
.scrub button {
  background: var(--ink);
  color: var(--paper);
  font-weight: 750;
}
[data-d="del"] {
  color: var(--coral);
  text-decoration: line-through;
}
[data-d="ins"] {
  color: #31826e;
  text-decoration: underline dotted;
}
dl.census {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
dl.census div {
  padding-top: 0.6rem;
  border-top: 2px solid var(--line);
}
dl.census dt {
  color: var(--ink-soft);
  font-size: 0.7rem;
  text-transform: uppercase;
}
dl.census dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-bright);
}
.site-footer__inner {
  display: grid;
  padding-block: 3rem;
  gap: 2.5rem;
  grid-template-columns: 1fr 1fr auto;
}
.site-footer__statement {
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.footer-nav {
  display: flex;
  max-width: 24rem;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.footer-nav a {
  font-size: 0.8rem;
  font-weight: 750;
}
.build-stamp {
  margin: 0;
  align-self: end;
  color: var(--ink-soft);
  font: 0.68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}
[data-reveal] {
  animation: reveal-in 650ms both cubic-bezier(0.16, 1, 0.3, 1);
  animation-timeline: view();
  animation-range: entry 5% cover 25%;
}
@keyframes reveal-in {
  from { opacity: 0.3; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes orbit-drift {
  from { transform: translate3d(-1rem, 0, 0) scale(0.97); }
  to { transform: translate3d(1.5rem, 1rem, 0) scale(1.03); }
}
@keyframes slow-spin {
  to { transform: rotate(360deg); }
}
@keyframes node-pulse {
  0%, 100% { opacity: 0.65; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}
.corpus-inventory,
.commitment-system,
.declaration-section,
.principle-section,
.facet-section,
.practice-section,
.genealogy-section,
.bounds-section {
  padding-block: clamp(4rem, 5.5vw, 5.5rem);
}
.life-making-group__heading h3,
.life-making-group__heading p {
  margin: 0;
}
.life-making-group__heading div > p {
  color: var(--ink-soft);
  line-height: 1.65;
}
.life-making-section + .life-making-section {
  margin-top: clamp(2.5rem, 3.5vw, 3.25rem);
  padding-top: clamp(1.75rem, 2.25vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.life-making-section[hidden],
.life-making-group[hidden] {
  display: none;
}
.life-making-group__heading {
  display: grid;
  margin-bottom: 1.5rem;
  align-items: end;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
.life-making-group__heading div {
  max-width: 48rem;
}
.life-making-group__heading > p {
  color: var(--cobalt);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.life-making-group + .life-making-group {
  margin-top: clamp(3rem, 5vw, 5rem);
}
.life-making-group__heading h3 {
  margin-bottom: 0.45rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  letter-spacing: -0.035em;
}
.claim-controls {
  display: grid;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
  align-content: center;
  gap: 0.65rem;
}
.claim-controls label > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.claim-controls select {
  width: 100%;
  min-height: 2.85rem;
  padding-inline: 0.75rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  color: var(--ink);
}
.claim-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.45;
}
.corpus-claim-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.corpus-claim {
  position: relative;
  min-height: 31rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  cursor: pointer;
  transition:
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.corpus-claim::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 0.24rem;
  background: linear-gradient(90deg, var(--cobalt), var(--acid));
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: left;
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.corpus-claim::after {
  position: absolute;
  right: -2.2rem;
  bottom: -2.2rem;
  width: 7rem;
  height: 7rem;
  border: 1px solid color-mix(in srgb, var(--cobalt), transparent 45%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transition:
    background-color 240ms ease,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.corpus-claim[hidden] {
  display: none;
}
.corpus-claim:hover,
.corpus-claim:focus-within {
  border-color: color-mix(in srgb, var(--cobalt), var(--line) 38%);
  box-shadow: 0 1.25rem 3rem rgb(24 38 65 / 0.14);
  transform: translateY(-0.38rem);
}
.corpus-claim:hover::before,
.corpus-claim:focus-within::before {
  opacity: 1;
  transform: scaleX(1);
}
.corpus-claim:hover::after,
.corpus-claim:focus-within::after {
  background: color-mix(in srgb, var(--cobalt), transparent 92%);
  transform: translate(-0.65rem, -0.65rem) scale(1.18);
}
.corpus-claim__surface {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 31rem;
  padding: 1.65rem;
  color: inherit;
  flex-direction: column;
  text-decoration: none;
}
.corpus-claim__surface:focus-visible {
  outline: 0.18rem solid var(--cobalt);
  outline-offset: -0.3rem;
}
.corpus-claim h3 {
  max-width: none;
  width: 100%;
  margin: 0 0 0.55rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.65vw, 1.75rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.corpus-claim__lineage,
.corpus-claim__reading,
.corpus-claim__reading p {
  margin: 0;
}
.corpus-claim__lineage {
  padding: 0 0 1rem 0.65rem;
  border-bottom: 1px solid var(--line);
  color: color-mix(in srgb, var(--cobalt), var(--ink) 28%);
  font-family: var(--serif);
  font-size: 0.73rem;
  font-style: italic;
  line-height: 1.5;
}
.corpus-claim__reading {
  padding-top: 1.1rem;
}
.corpus-claim__reading p {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.62;
}
.corpus-claim__reading p:first-child {
  color: var(--ink);
  font-size: 0.91rem;
}
.corpus-claim__reading p + p {
  margin-top: 0.9rem;
}
.framework-chip-list {
  display: flex;
  margin: auto 0 0;
  padding: 1.2rem 0 0;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}
.framework-chip-list li {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.67rem;
}

body.claim-dialog-open {
  overflow: hidden;
}
.claim-dialog {
  width: min(calc(100% - 2rem), 84rem);
  height: calc(100dvh - 2rem);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cobalt), var(--line) 55%);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 8%, rgb(45 92 246 / 0.11), transparent 22rem),
    var(--paper-bright);
  color: var(--ink);
  box-shadow: 0 2rem 6rem rgb(8 18 40 / 0.32);
}
.claim-dialog::backdrop {
  background: rgb(9 17 31 / 0.72);
  backdrop-filter: blur(0.35rem);
}
.claim-dialog[open] {
  animation: claim-dialog-enter 220ms ease-out both;
}
@keyframes claim-dialog-enter {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.claim-dialog__frame {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}
.claim-dialog__header,
.claim-dialog__footer {
  display: flex;
  padding: 1rem clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}
.claim-dialog__header {
  border-bottom: 1px solid var(--line);
}
.claim-dialog__header .eyebrow {
  margin: 0;
}
.claim-dialog__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper-bright), transparent 12%);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.35rem;
  place-items: center;
}
.claim-dialog__close:hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}
.claim-dialog__body {
  display: grid;
  min-height: 0;
  padding: clamp(1.5rem, 4vw, 4.5rem) clamp(1.25rem, 4vw, 4rem);
  overflow-y: auto;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(15rem, 0.65fr);
}
.claim-dialog__lead h2 {
  max-width: none;
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 4.25rem);
  letter-spacing: -0.06em;
  line-height: 0.94;
}
.claim-dialog__lead p {
  max-width: 46rem;
  margin: 0 0 1rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.65;
}
.claim-dialog__reading {
  display: grid;
  gap: 1.75rem;
}
.claim-dialog__reading section {
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}
.claim-dialog__reading h3,
.claim-dialog__connections h3 {
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.claim-dialog__reading p,
.claim-dialog__connections p,
.claim-dialog__footer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}
.claim-dialog__reading p + p {
  margin-top: 0.8rem;
}
.claim-dialog__risks {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.6rem;
  list-style: none;
}
.claim-dialog__risks li {
  padding-left: 0.8rem;
  border-left: 2px solid var(--coral);
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}
.claim-dialog__rail {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.claim-dialog__connections {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper), transparent 30%);
}
.claim-dialog__connections p + p {
  margin-top: 0.9rem;
}
.claim-dialog__connections a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--cobalt), transparent 35%);
  text-underline-offset: 0.16em;
}
.claim-dialog__footer {
  border-top: 1px solid var(--line);
}
.claim-dialog__footer p {
  max-width: 46rem;
}
.claim-dialog__footer .button {
  flex: 0 0 auto;
}
.boundary-note {
  padding-left: 0.8rem;
  border-left: 2px solid var(--acid);
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.change-band {
  padding-block: 6rem;
  background: var(--night);
  color: #f4f7f1;
}
.change-band__inner {
  display: grid;
  width: min(calc(100% - 3rem), var(--wide));
  margin-inline: auto;
  gap: 4rem;
  grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr);
}
.change-band h2 {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  letter-spacing: -0.055em;
  line-height: 0.92;
}
.change-band ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.change-band li {
  display: grid;
  padding: 1.25rem 0;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  gap: 1rem;
  grid-template-columns: 2rem 1fr;
}
.change-band li > span {
  color: var(--acid);
  font-size: 1.2rem;
}
.change-band h3,
.change-band p {
  margin: 0;
}
.change-band h3 {
  font-size: 1rem;
}
.change-band p {
  margin-top: 0.35rem;
  color: rgb(244 247 241 / 0.72);
  font-size: 0.85rem;
}
.cluster-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cluster-card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper-bright), transparent 10%);
}
.cluster-card > header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.cluster-card > header > span {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  place-items: center;
  font-weight: 850;
}
.cluster-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
}
.cluster-card > p {
  color: var(--ink-soft);
}
.cluster-card ol {
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.cluster-card li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.cluster-card li p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.attributed-observation {
  max-width: 44rem;
  margin: 2rem 0 0 auto;
  padding: 1.3rem 1.5rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}
.attributed-observation h3,
.attributed-observation > p:last-child {
  margin: 0;
}
.attributed-observation h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
}
.attributed-observation > p:last-child {
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.declaration-movements {
  display: flex;
  margin: 2.2rem 0 0;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.declaration-movements a {
  display: inline-flex;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--paper-bright), transparent 18%);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.declaration-movements a:hover {
  border-color: color-mix(in srgb, var(--cobalt), transparent 55%);
  color: var(--cobalt);
}
.declaration-movements span {
  color: var(--cobalt);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}
.declaration-movement {
  margin-top: 3.2rem;
}
.declaration-movement__label {
  display: grid;
  margin-bottom: 0.4rem;
  gap: 1rem;
  grid-template-columns: 3rem 1fr;
}
.declaration-movement__label > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 850;
}
.declaration-movement__label h3 {
  margin: 0 0 0.2rem;
  font-family: var(--serif);
  font-size: 1.8rem;
}
.declaration-movement__label p {
  margin: 0;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.declaration-movement .declaration-grid {
  margin-top: 1rem;
}
.declaration-grid,
.principle-grid {
  display: grid;
  margin: 2.5rem 0 0;
  padding: 0;
  gap: 0.8rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
}
.declaration-grid li,
.principle-grid article {
  min-height: 20rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
.declaration-grid li > span,
.principle-grid article > span {
  color: var(--cobalt);
  font-size: 0.7rem;
  font-weight: 850;
}
.declaration-grid blockquote {
  margin: 3rem 0 1.2rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.declaration-grid p,
.principle-grid p {
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.principle-grid h3 {
  margin-top: 3rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.facet-list,
.practice-list,
.bounds-list {
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.facet-list > li,
.bounds-list > li {
  display: grid;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  gap: 2rem;
  grid-template-columns: 3rem minmax(0, 1fr);
}
.facet-list > li > span,
.practice-list > li > span,
.bounds-list > li > span {
  color: var(--cobalt);
  font-size: 0.72rem;
  font-weight: 850;
}
.facet-list h3,
.practice-list h3,
.bounds-list h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
}
.facet-list p,
.bounds-list p {
  max-width: 46rem;
}
.facet-principles {
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.practice-list {
  display: grid;
  border-left: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.practice-list > li {
  display: grid;
  min-height: 9rem;
  padding: 1.2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: 0.8rem;
  grid-template-columns: 2rem 1fr auto;
}
.practice-list p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.practice-list em {
  color: var(--coral);
  font-size: 0.68rem;
}
.framework-chip-list {
  margin-top: 2rem;
  padding: 0;
}
.framework-chip-list li {
  padding: 0.55rem 0.8rem;
  background: var(--paper-bright);
}
.support-links {
  display: grid;
  margin-top: 2.5rem;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.support-links a {
  display: flex;
  min-height: 8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  flex-direction: column;
  font-weight: 750;
  text-decoration: none;
}
.support-links span {
  margin-bottom: auto;
  color: var(--cobalt);
  font-family: var(--serif);
  font-size: 2.4rem;
}
.bounds-list small {
  color: var(--ink-soft);
  font-weight: 750;
}
@media (max-width: 68rem) {
  .corpus-claim-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .claim-controls {
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .claim-dialog__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .claim-dialog__rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
  .declaration-grid,
  .principle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-header__inner {
    padding-block: 1rem;
    grid-template-columns: 1fr;
  }
  .primary-nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }
  .primary-nav a {
    flex: 0 0 auto;
  }
  .hero,
  .page-hero__grid,
  .tension-preview,
  .correction-band__inner,
  .ledger-strip__inner,
  .concept-detail__title,
  .concept-detail__body {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: auto;
  }
  .hero__index {
    max-width: 28rem;
  }
  .signal-grid,
  .concept-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tension-preview .section-heading,
  .detail-rail {
    position: static;
  }
  .tension-preview > p {
    grid-column: 1;
  }
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .build-stamp {
    grid-column: 1 / -1;
  }
}
@media (max-width: 44rem) {
  .site-header__inner,
  .section-shell,
  .site-footer__inner,
  .ledger-strip__inner,
  .correction-band__inner {
    width: min(calc(100% - 1.5rem), var(--wide));
  }
  .site-header__inner {
    min-height: auto;
    padding-block: 0.9rem;
    gap: 0.8rem;
  }
  .primary-nav {
    display: flex;
    margin-inline: 0;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    gap: 0.25rem;
    scrollbar-width: thin;
  }
  .cluster-grid,
  .declaration-grid,
  .principle-grid,
  .practice-list,
  .support-links,
  .change-band__inner {
    grid-template-columns: 1fr;
  }
  .life-making-group__heading {
    align-items: start;
    gap: 0.65rem;
    grid-template-columns: 1fr;
  }
  .corpus-inventory,
  .commitment-system,
  .declaration-section,
  .principle-section,
  .facet-section,
  .practice-section,
  .genealogy-section,
  .bounds-section {
    padding-block: 4rem;
  }
  .corpus-claim {
    min-height: 0;
  }
  .corpus-claim__surface {
    min-height: 24rem;
  }
  .claim-dialog {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .claim-dialog__body {
    grid-template-columns: 1fr;
  }
  .claim-dialog__rail {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
  .claim-dialog__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .claim-dialog__footer .button {
    width: 100%;
    justify-content: center;
  }
  .change-band__inner {
    width: min(calc(100% - 2rem), var(--wide));
    gap: 1rem;
  }
  .declaration-grid li,
  .principle-grid article {
    min-height: 0;
  }
  .primary-nav a {
    min-width: 0;
    padding-inline: 0.55rem;
    flex: 0 0 auto;
  }
  .hero {
    padding: 3.25rem 1rem;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 9vw, 3.75rem);
    line-height: 0.95;
  }
  .section-heading--split,
  .explorer__heading,
  .concept-correction {
    grid-template-columns: 1fr;
  }
  .section-heading--split > p,
  .section-heading--split > a {
    justify-self: start;
  }
  .signal-grid,
  .concept-grid,
  .silence-grid,
  .tension-card__poles,
  .tension-disclosure__body {
    grid-template-columns: 1fr;
  }
  .signal-card {
    min-height: 15rem;
  }
  .signal-card__index {
    margin-bottom: 3rem;
  }
  .concept-card {
    min-height: 18rem;
  }
  .tension-card__poles > div + div {
    padding: 1.5rem 0 0;
    border-top: 1px solid rgb(255 255 255 / 0.3);
    border-left: 0;
  }
  .filter-bar {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-sm);
  }
  .filter-bar button {
    flex: 0 0 auto;
  }
  .tension-disclosure summary {
    grid-template-columns: auto 1fr;
  }
  .disclosure-action {
    grid-column: 2;
    justify-self: start;
  }
  .tension-disclosure__body {
    padding-left: 0;
  }
  .concept-detail h1,
  .page-hero h1 {
    font-size: clamp(2.5rem, 9vw, 3.75rem);
  }
  .page-hero {
    padding-top: 3rem;
  }
  .page-hero__grid {
    gap: 1.5rem;
  }
  .concept-detail__body {
    gap: 2.25rem;
  }
  .breadcrumbs ol {
    margin-bottom: 2.5rem;
  }
  .poles,
  [data-silence] {
    grid-template-columns: 1fr;
  }
  .pole + .pole {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  [data-silence] > section {
    grid-column: 1;
  }
  .relationship-list li {
    gap: 0.5rem;
    grid-template-columns: 2rem 1fr;
  }
  .concept-pagination {
    grid-template-columns: 1fr;
  }
  .concept-pagination a:last-child {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .build-stamp {
    grid-column: auto;
  }
}
@media (max-width: 32rem) {
  .corpus-claim-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .hero__node {
    box-shadow: 0 0 0 0.45rem rgb(223 255 100 / 0.14);
  }
}
@media (forced-colors: active) {
  .brand__mark i,
  .hero__node,
  .relationship-list__line i {
    forced-color-adjust: none;
    background: CanvasText;
  }
  .button,
  .filter-bar button[aria-pressed="true"] {
    border: 2px solid currentColor;
  }
}

/* The system is nine routes now. The nav repeats on every one of them because splitting a
   single scroll only helps if each page still shows the whole shape — otherwise a reader who
   arrives at one layer has no way to learn the others exist. */
.ethics-section-nav {
  display: flex;
  padding-block: 1rem;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.ethics-section-nav a {
  display: inline-flex;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
  gap: 0.45rem;
  background: color-mix(in srgb, var(--paper-bright), transparent 20%);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}
.ethics-section-nav a:hover {
  border-color: color-mix(in srgb, var(--cobalt), transparent 55%);
  color: var(--cobalt);
}
.ethics-section-nav a[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
}
.ethics-section-nav span {
  color: var(--cobalt);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}
.ethics-section-nav a[aria-current="page"] span { color: var(--acid); }
.section-hero {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(1.25rem, 2vw, 2rem);
}
.section-hero h1 {
  margin-block: 0.35rem 0.8rem;
  font-size: clamp(2.2rem, 4.4vw, 4.25rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.section-hero__lede {
  max-width: 46rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
}
.ethics-index { padding-block: clamp(2.5rem, 4vw, 4rem); }
.ethics-index__grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ethics-index__card {
  display: grid;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  align-content: start;
  gap: 0.45rem;
  background: var(--paper-bright);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.ethics-index__card:hover {
  border-color: color-mix(in srgb, var(--cobalt), var(--line) 40%);
  box-shadow: 0 1rem 2.5rem rgb(24 38 65 / 0.10);
  transform: translateY(-0.25rem);
}
.ethics-index__card > span {
  color: var(--cobalt);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}
.ethics-index__card h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.035em;
}
.ethics-index__card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}
.orientation-jump {
  display: flex;
  padding-block: 1.1rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.orientation-jump a {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
}
.orientation-part { padding-block: clamp(2.5rem, 4vw, 4rem); }
.orientation-part + .orientation-part { border-top: 1px solid var(--line); }
@media (max-width: 68rem) {
  .ethics-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .ethics-index__grid { grid-template-columns: 1fr; }
  .ethics-section-nav { overflow-x: auto; flex-wrap: nowrap; }
  .ethics-section-nav a { flex: 0 0 auto; }
}

/* The domain filter moved onto the core-ideas page when the browse menu became the section
   nav. It is a standalone control there rather than a panel column, so it needs no divider. */
.claim-controls--section {
  padding: 1.25rem 0 0;
  border-left: 0;
  gap: 0.5rem;
}
.claim-controls--section label > span { margin-bottom: 0.3rem; }
.claim-controls--section select { max-width: 26rem; }

/* ── The shell ───────────────────────────────────────────────────────────────────────────
   A masthead that stays quiet while reading, and one Browse control that opens the whole
   system. Desktop gets a panel anchored under the trigger; narrow screens get a full sheet
   with real touch targets, because the previous rail was a desktop row squeezed sideways
   until a native scrollbar showed through it. */
.masthead {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper), transparent 12%);
  backdrop-filter: blur(0.5rem);
}
.masthead__bar {
  display: flex;
  width: min(calc(100% - 3rem), var(--wide));
  min-height: 4.5rem;
  margin-inline: auto;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}
.browse > summary {
  display: inline-flex;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper-bright);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  list-style: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.browse > summary::-webkit-details-marker { display: none; }
.browse > summary:hover { border-color: color-mix(in srgb, var(--cobalt), transparent 45%); }
.browse > summary:focus-visible { outline: 0.16rem solid var(--cobalt); outline-offset: 0.2rem; }
.browse__bars { display: grid; width: 1rem; gap: 0.24rem; }
.browse__bars i {
  display: block;
  height: 0.09rem;
  background: currentColor;
  transition: transform 200ms ease;
}
.browse[open] .browse__bars i:first-child { transform: translateY(0.165rem) rotate(45deg); }
.browse[open] .browse__bars i:last-child { transform: translateY(-0.165rem) rotate(-45deg); }
.browse__sheet {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.6rem);
  right: max(1.5rem, calc(50vw - var(--wide) / 2));
  width: min(46rem, calc(100vw - 3rem));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  box-shadow: var(--shadow);
  animation: browse-in 180ms ease-out both;
}
@keyframes browse-in {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}
.browse__inner { padding: 1.4rem; }
.browse__heading {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.browse__heading--quiet { margin-top: 1.4rem; }
.browse__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.15rem;
  grid-template-columns: 1fr 1fr;
  list-style: none;
}
.browse__list a {
  display: grid;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  gap: 0.7rem;
  grid-template-columns: 1.6rem 1fr;
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease;
}
.browse__list a:hover { background: color-mix(in srgb, var(--cobalt), transparent 92%); }
.browse__list a[aria-current="page"] { background: var(--ink); color: var(--paper-bright); }
.browse__list a[aria-current="page"] .browse__index { color: var(--acid); }
.browse__index {
  color: var(--cobalt);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.browse__list strong { display: block; font-size: 0.95rem; letter-spacing: -0.01em; }
.browse__list small {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.45;
}
.browse__list a[aria-current="page"] small { color: color-mix(in srgb, var(--paper-bright), transparent 35%); }
.browse__aside { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.browse__index-link { font-size: 0.85rem; font-weight: 750; }
.browse__rooms { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.browse__rooms a {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 0.76rem;
  text-decoration: none;
}
.browse__rooms a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* ── Where am I ──────────────────────────────────────────────────────────────────────────
   Position and the two adjacent moves, instead of ten equal destinations that told a reader
   nothing about which one they were standing on. */
.whereami {
  display: flex;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.whereami__up { font-size: 0.8rem; font-weight: 750; text-decoration: none; }
.whereami__place {
  margin: 0;
  margin-right: auto;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.whereami__count {
  margin-right: 0.5rem;
  color: var(--cobalt);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}
.whereami__move { display: flex; flex-wrap: wrap; gap: 1rem; }
.whereami__move a { font-size: 0.8rem; font-weight: 750; text-decoration: none; }
.whereami__move a:hover { color: var(--cobalt); }

@media (max-width: 60rem) {
  .masthead__bar { width: min(calc(100% - 1.5rem), var(--wide)); min-height: 3.9rem; }
  .browse__sheet {
    position: fixed;
    top: 3.9rem;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    animation: none;
  }
  .browse__inner { padding: 1.25rem 1.25rem 3rem; }
  .browse__list { grid-template-columns: 1fr; gap: 0.2rem; }
  .browse__list a { min-height: 3.4rem; padding: 0.8rem 0.75rem; align-items: center; }
  .browse__list strong { font-size: 1.02rem; }
  .whereami { padding-block: 0.85rem; gap: 0.4rem 1rem; }
  .whereami__place { width: 100%; margin-right: 0; }
}

/* ── The front door ──────────────────────────────────────────────────────────────────────
   Typographic rather than decorative. The old hero spent its attention on orbiting nodes and
   a counts strip; a stranger needs the claim, the disclaimer, and two ways forward. */
.doorway {
  padding-block: clamp(4rem, 11vw, 9rem) clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.doorway__inner {
  width: min(calc(100% - 3rem), var(--wide));
  max-width: 62rem;
  margin-inline: auto;
}
.doorway h1 {
  margin-block: 0.6rem 1.6rem;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.doorway h1 em { color: var(--cobalt); }
.doorway__lede {
  max-width: 44rem;
  margin: 0 0 1.1rem;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.65;
}
.doorway__caveat {
  max-width: 44rem;
  margin: 0 0 2.2rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}
.doorway__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* One real idea, shown rather than described. */
.specimen {
  display: grid;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}
.specimen__label h2 {
  margin: 0.3rem 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.specimen__label p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.specimen__card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
  box-shadow: var(--shadow);
}
.specimen__card h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.045em; line-height: 1.05; }
.specimen__card h3 a { color: inherit; text-decoration: none; }
.specimen__card h3 a:hover { color: var(--cobalt); }
.specimen__cues {
  margin: 0.55rem 0 1.2rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  color: color-mix(in srgb, var(--cobalt), var(--ink) 28%);
  font-family: var(--serif);
  font-size: 0.82rem;
}
.specimen__card p { color: var(--ink-soft); line-height: 1.68; }
.specimen__card p:first-of-type { color: var(--ink); }

.ways { padding-block: clamp(3rem, 6vw, 5rem); }
.ways__grid {
  display: grid;
  margin-top: 2.2rem;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ways__card {
  display: grid;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  align-content: start;
  gap: 0.55rem;
  background: var(--paper-bright);
  color: inherit;
  text-decoration: none;
  transition: border-color 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
}
.ways__card:hover {
  border-color: color-mix(in srgb, var(--cobalt), var(--line) 40%);
  box-shadow: var(--shadow);
  transform: translateY(-0.3rem);
}
.ways__mark { color: var(--cobalt); font-size: 1.1rem; }
.ways__card h3 { margin: 0; font-family: var(--serif); font-size: 1.4rem; letter-spacing: -0.03em; }
.ways__card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }

.closing { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--night); color: #f4f7f1; }
.closing__inner { width: min(calc(100% - 3rem), var(--wide)); max-width: 52rem; margin-inline: auto; }
.closing h2 { margin: 0.4rem 0 1rem; font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.12; }
.closing p { margin: 0; color: color-mix(in srgb, #f4f7f1, transparent 22%); line-height: 1.7; }
.closing .eyebrow { color: var(--acid); }

/* ── Contents ────────────────────────────────────────────────────────────────────────────
   A book's table of contents at reading scale, not nine equal tiles. Each row can say what
   its part actually offers, and the numbering restores the order the work moves in. */
.contents-head { padding-block: clamp(3rem, 6vw, 5rem) 1.5rem; }
.contents-head h1 {
  margin-block: 0.5rem 1rem;
  font-size: clamp(2.3rem, 5.5vw, 4.25rem);
  letter-spacing: -0.05em;
  line-height: 1;
}
.contents-head__lede { max-width: 46rem; margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.7; }
.contents {
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.contents__row { border-bottom: 1px solid var(--line); }
.contents__row a {
  display: grid;
  padding: clamp(1.15rem, 2vw, 1.7rem) 0.25rem;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  grid-template-columns: 3rem minmax(0, 1fr) 2rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 180ms ease, padding-inline 180ms ease;
}
.contents__row a:hover { background: color-mix(in srgb, var(--cobalt), transparent 94%); padding-inline: 0.85rem 0.25rem; }
.contents__index { color: var(--cobalt); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.09em; }
.contents__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.contents__blurb { display: block; margin-top: 0.3rem; max-width: 44rem; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.contents__go { color: var(--cobalt); font-size: 1.2rem; opacity: 0; transition: opacity 180ms ease, transform 180ms ease; }
.contents__row a:hover .contents__go { opacity: 1; transform: translateX(0.2rem); }

@media (max-width: 68rem) {
  .specimen { grid-template-columns: 1fr; }
  .ways__grid { grid-template-columns: 1fr; }
}
@media (max-width: 44rem) {
  .doorway__inner, .closing__inner { width: min(calc(100% - 1.5rem), var(--wide)); }
  .contents__row a { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.25rem 0.9rem; }
  .contents__go { display: none; }
  .doorway__actions .button { width: 100%; justify-content: center; }
}

/* ── Atmosphere ──────────────────────────────────────────────────────────────────────────
   The work is a piece of writing, so the page should feel like paper that someone lit well
   rather than a dashboard. Everything here is decorative and sits behind the text: it must
   never cost legibility, and it disappears entirely for reduced motion and forced colours. */
.doorway {
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.doorway::before {
  position: absolute;
  z-index: -2;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(58% 48% at 18% 8%, color-mix(in srgb, var(--cobalt), transparent 86%), transparent 70%),
    radial-gradient(46% 42% at 88% 22%, color-mix(in srgb, var(--aqua), transparent 86%), transparent 72%),
    radial-gradient(38% 40% at 62% 92%, color-mix(in srgb, var(--acid), transparent 90%), transparent 70%);
  content: "";
  animation: doorway-drift 34s ease-in-out infinite alternate;
}
@keyframes doorway-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
/* A hairline horizon under the display type — the one piece of ornament that earns its place,
   because it gives the enormous serif something to sit on instead of floating. */
.doorway__inner::after {
  display: block;
  width: min(100%, 22rem);
  height: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(90deg, var(--cobalt), color-mix(in srgb, var(--acid), transparent 30%), transparent);
  content: "";
}
.doorway h1 { text-wrap: balance; }
.doorway h1 em {
  background: linear-gradient(96deg, var(--cobalt), color-mix(in srgb, var(--aqua), var(--cobalt) 45%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Depth on the specimen: a lit edge and an accent rule, so the one idea on the page reads as
   an object worth picking up rather than another bordered box. */
.specimen__card {
  position: relative;
  overflow: clip;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--cobalt), transparent 96%), transparent 42%),
    var(--paper-bright);
}
.specimen__card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.22rem;
  background: linear-gradient(90deg, var(--cobalt), var(--aqua) 45%, var(--acid));
  content: "";
}
.specimen__card h3 a {
  background-image: linear-gradient(var(--cobalt), var(--cobalt));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0 0.1em;
  transition: background-size 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.specimen__card h3 a:hover { background-size: 100% 0.1em; }

/* The three entrances get their own light so the row does not read as three grey rectangles. */
.ways__card { position: relative; overflow: clip; }
.ways__card::after {
  position: absolute;
  z-index: -1;
  inset: auto -40% -60% auto;
  width: 16rem;
  height: 16rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cobalt), transparent 88%), transparent 68%);
  content: "";
  opacity: 0;
  transition: opacity 260ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ways__card:hover::after { opacity: 1; transform: translate(-1.5rem, -2rem); }
.ways__mark { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.ways__card:hover .ways__mark { transform: translateX(0.35rem); }

/* Contents: the index numeral is the moment of colour, and the row lifts rather than fills. */
.contents__row a { position: relative; }
.contents__row a::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cobalt), var(--aqua));
  content: "";
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contents__row a:hover::before { transform: scaleY(1); }
.contents__name { transition: color 200ms ease; }
.contents__row a:hover .contents__name { color: var(--cobalt); }

.closing { position: relative; overflow: clip; }
.closing::before {
  position: absolute;
  inset: -50% -20% auto -20%;
  height: 160%;
  background: radial-gradient(50% 46% at 24% 20%, rgb(82 109 255 / 0.22), transparent 70%),
              radial-gradient(42% 40% at 82% 74%, rgb(117 214 197 / 0.16), transparent 72%);
  content: "";
}
.closing__inner { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .doorway::before { animation: none; }
  .ways__card, .ways__mark, .contents__row a, .contents__row a::before,
  .contents__go, .specimen__card h3 a { transition: none; }
}
@media (forced-colors: active) {
  .doorway::before, .closing::before, .ways__card::after, .doorway__inner::after,
  .specimen__card::before { display: none; }
  .doorway h1 em { background: none; color: LinkText; }
}

/* The quiet button was authored for the old dark hero and kept near-white text; on the light
   front door it read as an empty outline. It takes its colour from the surface now. */
.doorway .button--quiet {
  border-color: color-mix(in srgb, var(--ink), transparent 72%);
  color: var(--ink);
}
.doorway .button--quiet:hover {
  border-color: var(--cobalt);
  color: var(--cobalt);
}
/* .section-shell centres itself with margin-inline: auto; the contents list had re-declared
   margin wholesale and silently lost that, so the rows escaped the column the heading sits in. */
.contents { margin-inline: auto; }

/* backdrop-filter makes an element a containing block for its position:fixed descendants, so
   the full-screen mobile sheet was being clipped inside the masthead bar and never appeared.
   The blur is a nicety; the menu opening is not. It is dropped where the sheet is fixed. */
@media (max-width: 60rem) {
  .masthead { backdrop-filter: none; background: var(--paper); }
  /* A predictable bar height: the descriptor wrapped to three lines on a 390px screen, which
     pushed the sheet's top edge off the value it was positioned against. */
  .brand__descriptor { display: none; }
  .browse__sheet { top: 3.6rem; }
}

/* ── Going deep ──────────────────────────────────────────────────────────────────────────
   The modal title was clamped to 13ch at up to 4.25rem, so a three-word idea filled the panel
   and a longer one broke into a narrow stack of fragments. A title should be able to use the
   width it has, at a size that still lets the reading beneath it be the point. */
.claim-dialog__lead h2 {
  max-width: none;
  font-size: clamp(1.9rem, 2.9vw, 3rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
}
/* Give the reading a spine: each movement of the argument gets air and a quiet rule, so a long
   panel reads as a sequence of thoughts rather than one undifferentiated column. */
.claim-dialog__reading section { border-top-width: 1px; }
.claim-dialog__reading h3 {
  color: var(--cobalt);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.claim-dialog__lead p:first-of-type {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
}
.claim-dialog__frame { scrollbar-width: thin; }

/* The deep reading is the destination, so it should feel composed rather than administrative. */
.concept-detail__header { position: relative; }
.detail-reading > section + section { margin-top: clamp(2.5rem, 5vw, 4rem); }
.deep-reading-section > .eyebrow { color: var(--cobalt); }
.detail-reading h2 {
  font-family: var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.failure-list li { border-left: 2px solid var(--coral); padding-left: 0.9rem; }
.lineage-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; list-style: none; }

/* A reading should end by offering somewhere to go, not by stopping. */
.concept-pagination {
  display: grid;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
.concept-pagination a {
  display: grid;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  gap: 0.25rem;
  background: var(--paper-bright);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.concept-pagination a:hover {
  border-color: color-mix(in srgb, var(--cobalt), var(--line) 40%);
  transform: translateY(-0.15rem);
}
.concept-pagination a:last-child { text-align: right; }
.concept-pagination span {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.concept-pagination strong { font-family: var(--serif); font-size: 1.15rem; letter-spacing: -0.02em; }
@media (max-width: 44rem) {
  .concept-pagination { grid-template-columns: 1fr; }
  .concept-pagination a:last-child { text-align: left; }
}

@media (max-width: 60rem) {
  /* Measured on a phone: the position strip's links were 22px tall and the footer's 32px, well
     under a fingertip. The text stays the same size — only the hit area grows, so nothing about
     the composition changes while the targets become reachable. */
  .whereami__up,
  .whereami__move a,
  .footer-nav a,
  .browse__rooms a,
  .browse__index-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
  .whereami { gap: 0 1rem; }
  .whereami__move { gap: 0 1.25rem; }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  .browse__rooms a { padding-block: 0.55rem; }
}

@media (max-width: 60rem) {
  /* Standalone controls a thumb has to find: card links, and the disclosure toggles that open a
     tension or an absence. Links sitting inside a sentence are deliberately left alone — growing
     them would space the prose out to make room for a hit area, which trades the reading for the
     tapping. Inline links in running text are the recognised exception to the target-size rule. */
  .card-link,
  .tension-disclosure > summary,
  .silence-card summary,
  .text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
  .tension-disclosure > summary { padding-block: 0.9rem; }
  .silence-card summary { padding-block: 0.6rem; }
}

@media (max-width: 60rem) {
  /* The movement chips and the orientation jump list came in at 35-38px — close enough to look
     right and still short of a reliable tap. */
  .declaration-movements a,
  .orientation-jump a {
    min-height: 2.75rem;
    align-items: center;
  }
}

/* ── Measure ─────────────────────────────────────────────────────────────────────────────
   Prose was running the full width of the column at half-window and above — on one page
   thirty-five paragraphs crossed 760px, which is past the line length where the eye starts
   losing its place on the return sweep. The reading surfaces get a measure; card blurbs and
   grid cells already have one from their container, so they are left alone. */
.orientation-part > p,
.facet-list p,
.bounds-list p,
.practice-list p,
.declaration-grid p,
.detail-reading > section > p,
.deep-reading-section > p,
.specimen__card > p,
.section-heading > p,
.contents-head__lede,
.closing p,
.doorway__lede,
.doorway__caveat {
  max-width: 46rem;
}
/* The lens readings sit in a narrower column already; hold them to a comfortable measure too. */
.relationship-list p { max-width: 44rem; }

/* Chasing this container by container kept missing one. A measure on every paragraph in the
   reading area is the honest rule: where a card or grid cell is already narrower the cap does
   nothing, and where prose had the whole column it now stops at a line length the eye can
   return from. Anything that genuinely wants full width can opt out explicitly. */
main p { max-width: 46rem; }
main .poles p,
main .claim-dialog__risks li,
main .contents__blurb { max-width: none; }

/* One reading measure, not eight. These caps were set independently over time — 48rem here,
   56 there, 64 on the movement labels — so the same page could measure its paragraphs three
   different ways depending on which component happened to own them. */
.claim-dialog__lead p,
.claim-dialog__footer p,
.declaration-movement__label p,
.facet-list p,
.bounds-list p { max-width: 46rem; }

@media (max-width: 60rem) {
  /* A card's title is one of its two tap targets; at 32px it was the smaller of them. */
  .concept-card h4 a { display: inline-flex; min-height: 2.75rem; align-items: center; }
}

/* ── Composition fixes ───────────────────────────────────────────────────────────────────
   Two defects the Principal named, both mine. The ordinal sat in its own block and the text
   beneath it was pushed down by a hard 3rem margin, so every card had its number stranded at
   the top with a hole under it; and a min-height meant a short declaration left the rest of
   its card empty. The numeral is now part of the card's first line and the card is as tall as
   what it holds, with the grid keeping the row even. */
.declaration-grid li,
.principle-grid article {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ord title" ".   body";
  column-gap: 0.85rem;
}
.declaration-grid li > span,
.principle-grid article > span {
  grid-area: ord;
  padding-top: 0.32rem;
  font-variant-numeric: tabular-nums;
}
.declaration-grid blockquote,
.principle-grid h3 { grid-area: title; margin: 0; }
.declaration-grid p,
.principle-grid p { grid-area: body; margin: 0; }
.declaration-grid blockquote { font-size: 1.12rem; line-height: 1.3; }
.principle-grid h3 { font-size: 1.3rem; line-height: 1.1; }

/* Six movements were a flex row that wrapped four-then-two, leaving an orphan pair and a
   ragged gap. Six equal columns is a decision; wrapping is what happens when nobody made one. */
.declaration-movements {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}
.declaration-movements a {
  justify-content: center;
  padding-inline: 0.5rem;
  text-align: center;
}
@media (max-width: 68rem) {
  .declaration-movements { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .declaration-movements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The landing lays the work out ───────────────────────────────────────────────────────
   One label per band instead of a heading and a paragraph explaining what the band contains.
   A reader can see what a tension is by reading one; being told first only delays them. */
.hero { padding-block: clamp(4.5rem, 12vw, 10rem) clamp(2.5rem, 6vw, 5rem); }
.hero__content { width: min(calc(100% - 3rem), var(--wide)); margin-inline: auto; }
.hero h1 {
  margin-block: 0.5rem 1.4rem;
  font-size: clamp(2.6rem, 7.2vw, 5.75rem);
  letter-spacing: -0.055em;
  line-height: 0.97;
  text-wrap: balance;
}
.hero h1 em {
  background: linear-gradient(96deg, var(--cobalt), color-mix(in srgb, var(--aqua), var(--cobalt) 45%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede { max-width: 46rem; margin: 0; font-size: clamp(1.02rem, 1.45vw, 1.22rem); line-height: 1.65; }

.lay { padding-block: clamp(2.75rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.lay__label {
  margin: 0 0 1.6rem;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lay__more {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: 1.6rem;
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
}
.lay__more:hover { color: var(--cobalt); }

.lay__claims { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: clip; }
.laid-claim { background: var(--paper-bright); transition: background-color 200ms ease; }
.laid-claim:hover { background: color-mix(in srgb, var(--cobalt), var(--paper-bright) 94%); }
.laid-claim a { display: block; padding: 1.4rem; color: inherit; text-decoration: none; }
.laid-claim h2 { margin: 0; font-family: var(--serif); font-size: 1.42rem; letter-spacing: -0.035em; line-height: 1.08; }
.laid-claim__cues { margin: 0.4rem 0 0.8rem; color: color-mix(in srgb, var(--cobalt), var(--ink) 30%); font-family: var(--serif); font-size: 0.78rem; }
.laid-claim p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }

.lay__declarations { display: grid; margin: 0; padding: 0; gap: 0.9rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
.lay__declarations li { display: grid; gap: 0 0.85rem; grid-template-columns: auto 1fr; align-items: baseline; }
.lay__ord { color: var(--cobalt); font-size: 0.7rem; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.lay__declarations blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.3; letter-spacing: -0.02em; }

.lay__tensions { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.laid-tension { display: grid; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-md); gap: 0.55rem; background: var(--paper-bright); }
.laid-tension__pole { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.laid-tension__and { margin: 0; color: var(--cobalt); font-family: var(--serif); font-size: 0.82rem; font-style: italic; }

.lay--corrections { background: var(--night); color: #f4f7f1; border-top: 0; }
.lay--corrections .lay__label { color: var(--acid); }
.lay__corrections-inner { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.lay__corrections { display: grid; margin: 0; padding: 0; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
.lay__corrections li { display: grid; gap: 0.3rem; }
.lay--corrections .lay__ord { color: var(--acid); }
.lay__corrections p { margin: 0; color: color-mix(in srgb, #f4f7f1, transparent 26%); font-size: 0.9rem; line-height: 1.6; }
.lay__more--light { color: var(--acid); }
.closing { border-top: 0; }
.closing h2 { margin-top: 0; }

@media (max-width: 68rem) {
  .lay__claims, .lay__tensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .hero__content { width: min(calc(100% - 1.5rem), var(--wide)); }
  .lay__claims, .lay__tensions, .lay__declarations, .lay__corrections { grid-template-columns: 1fr; }
}
.hero__through {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
}
.hero__through:hover { color: var(--cobalt); }

/* ── App-wide: clear the stage, then dress it ────────────────────────────────────────────
   Space reduction first. Bands were padded as if each were the only thing on its page, so a
   reader scrolled through emptiness between things worth reading. Then the supporting rooms,
   which had been left as an unstyled h1 and a list while the ethics pages were composed —
   they get the same language, because a room that looks unfinished reads as less trustworthy
   than the work it holds. */
.section-shell > h1,
.page-room h1 {
  margin-block: 0 0.6rem;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1;
}
main > h1 { width: min(calc(100% - 3rem), var(--wide)); margin-inline: auto; padding-top: clamp(2.5rem, 5vw, 4rem); }
main > .lede,
main > .ref,
main > article,
main > section[data-state],
main > p {
  width: min(calc(100% - 3rem), var(--wide));
  margin-inline: auto;
}
main > .lede {
  max-width: 46rem;
  margin-block: 0 2rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.65;
}
main > .ref { max-width: 46rem; color: var(--ink-soft); font-size: 0.85rem; }
main > article {
  margin-block: 0 1rem;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper-bright);
}
main > article h2 { margin-top: 0; font-family: var(--serif); letter-spacing: -0.03em; }

/* ── Flair that serves the composition ───────────────────────────────────────────────────
   One motif, used consistently: a hairline that carries colour, and a numeral set in the
   accent. It gives every surface the same signature without decorating any of them. */
.lay__label,
.browse__heading,
.eyebrow { position: relative; }
.lay__label::after {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.55rem;
  background: linear-gradient(90deg, var(--cobalt), color-mix(in srgb, var(--aqua), transparent 20%));
  content: "";
}
.hero { position: relative; overflow: clip; isolation: isolate; }
.hero::before {
  position: absolute;
  z-index: -2;
  inset: -40% -15% auto -15%;
  height: 150%;
  background:
    radial-gradient(54% 46% at 16% 6%, color-mix(in srgb, var(--cobalt), transparent 88%), transparent 70%),
    radial-gradient(44% 40% at 86% 26%, color-mix(in srgb, var(--aqua), transparent 88%), transparent 72%);
  content: "";
  animation: doorway-drift 38s ease-in-out infinite alternate;
}
.laid-claim { position: relative; }
.laid-claim::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--aqua));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.laid-claim:hover::before { transform: scaleX(1); }
.laid-tension { position: relative; overflow: clip; }
.laid-tension::after {
  position: absolute;
  inset: auto -30% -50% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cobalt), transparent 78%);
  content: "";
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .laid-claim::before { transition: none; }
}
@media (forced-colors: active) {
  .hero::before, .laid-tension::after, .lay__label::after, .laid-claim::before { display: none; }
}
@media (max-width: 44rem) {
  main > h1, main > .lede, main > .ref, main > article, main > p {
    width: min(calc(100% - 1.5rem), var(--wide));
  }
}
/* inline-flex collapses the whitespace before the arrow, and the band was leaving a hole under
   its own link. Both are the same kind of accident as the ones the Principal named. */
.lay__more, .hero__through { gap: 0.45rem; margin-top: 1.1rem; }
.lay { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

/* The reveal's faded initial state belongs only to engines that can drive it from scroll
   position. Without the guard, a browser that ignores animation-timeline could leave content
   sitting at the from-state — content hidden by a decoration is the one failure an entrance
   animation must never have. Applied as a guard rather than trusted to fallback behaviour. */
[data-reveal] { animation: none; opacity: 1; }
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal-in 650ms both cubic-bezier(0.16, 1, 0.3, 1);
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none; opacity: 1; }
}

/* Checkpoint 17, stated accurately this time: ONE measure token, referenced rather than
   re-typed. My earlier claim that the measures were unified was overstated — I had replaced
   several literals with 46rem but left others, so the page still measured itself unevenly. */
:root { --read: 46rem; }
main p,
.hero__lede,
.lay__label + *,
.contents-head__lede,
.closing p,
.detail-reading > section > p,
.claim-dialog__lead p,
.claim-dialog__footer p,
.declaration-movement__label p,
.facet-list p,
.bounds-list p,
.orientation-part > p { max-width: var(--read); }
main .poles p,
main .contents__blurb,
.laid-tension__pole,
.lay__corrections p { max-width: none; }

/* Headings are no longer measured in characters. A clamp on a title is a title being told how
   much it may say; prose keeps its measure because a long LINE is hard to read, but a long
   heading is just a heading. The detail page also loses the single-column rail it had, so the
   reading now runs the width it was always meant to. */
.detail-reading h2, .detail-reading h3, .claim-dialog__lead h2,
.concept-detail__title h1, .section-hero h1 { max-width: none; }
.concept-detail__body { grid-template-columns: minmax(0, 1fr); }
.detail-reading > section + section { margin-top: clamp(2rem, 3.5vw, 3rem); }
.detail-reading p + p { margin-top: 0.85rem; }

/* Measured, not guessed: 121px between sections of a reading, 115px between claim groups, 91px
   inside the orientation page. A gap that size stops reading as separation and starts reading as
   an absence — the reader wonders whether something failed to load. Tightened to a rhythm that
   still separates. */
.detail-reading > section + section { margin-top: clamp(1.75rem, 2.6vw, 2.4rem); }
.life-making-group + .life-making-group { margin-top: clamp(2rem, 3vw, 2.75rem); }
.orientation-part { padding-block: clamp(2rem, 3.2vw, 3rem); }
.detail-reading > section > .eyebrow { margin-bottom: 0.35rem; }

/* The one plain sentence at the head of an ethic. Sized between the title and the reading so a
   reader who stops here still leaves understanding the whole idea. */
.concept-detail__plain {
  max-width: 40rem;
  margin: clamp(1.5rem, 2.4vw, 2.1rem) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 1.3;
  text-wrap: pretty;
}