:root {
  color-scheme: dark;
  --color-bg: #191b1d;
  --color-surface: #222529;
  --color-surface-alt: #292d31;
  --color-text: #eee9df;
  --color-muted: #b9b2a7;
  --color-border: #3c4145;
  --color-accent: #8d8b84;
  --color-accent-soft: #c2beb4;
  --color-highlight: #c9a554;
  --font-display: Constantia, Cambria, Georgia, serif;
  --font-body: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --content-text: 44rem;
  --content-wide: 72rem;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --radius-control: 0.375rem;
  --radius-content: 0.25rem;
  --border: 1px solid var(--color-border);
}

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

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

body {
  margin: 0;
  min-width: 20rem;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent-soft);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 0.18rem solid var(--color-accent-soft);
  outline-offset: 0.22rem;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: 0.65rem 0.9rem;
  background: var(--color-text);
  color: var(--color-bg);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  width: min(100% - 2rem, var(--content-wide));
  margin-inline: auto;
}

.site-header {
  border-bottom: var(--border);
}

.site-header__inner {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.site-identity {
  display: inline-flex;
  width: fit-content;
  flex-direction: column;
  gap: 0.05rem;
  text-decoration: none;
}

.site-identity__name {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: 0.015em;
}

.site-identity__label {
  color: var(--color-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-toggle {
  display: none;
  width: fit-content;
  padding: 0.65rem 0.85rem;
  border: var(--border);
  border-radius: var(--radius-control);
  background: transparent;
  cursor: pointer;
}

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-nav a {
  display: block;
  padding: 0.6rem 0;
  color: var(--color-muted);
  text-decoration: none;
}

.site-nav a[aria-current="page"],
.site-nav a:hover {
  color: var(--color-text);
}

.site-nav__cross {
  margin-top: var(--space-2);
  color: var(--color-accent-soft) !important;
}

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.js .site-nav[data-collapsible="true"] {
  display: none;
}

.js .site-nav[data-collapsible="true"][data-open="true"] {
  display: flex;
}

.hero {
  padding-block: var(--space-7);
}

.hero__inner {
  display: grid;
  gap: var(--space-5);
}

.hero__content,
.hero__media {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-accent-soft);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1,
.page-title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.lede {
  max-width: 38rem;
  margin: var(--space-5) 0 0;
  color: var(--color-muted);
  font-size: clamp(1.05rem, 3vw, 1.28rem);
}

.hero__support {
  max-width: 43rem;
  margin-block: var(--space-3) 0;
  color: var(--color-muted);
  font-size: 1rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.button {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: var(--border);
  border-radius: var(--radius-control);
  text-decoration: none;
}

.button--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
}

.button--primary:hover {
  color: var(--color-bg);
  filter: brightness(1.08);
}

.section {
  padding-block: var(--space-7);
  border-top: var(--border);
}

.section__inner {
  display: grid;
  gap: var(--space-5);
}

.section__body--split {
  display: grid;
  gap: var(--space-5);
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.section__intro {
  max-width: var(--content-text);
}

.section h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--color-highlight);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section p {
  margin-block: var(--space-3) 0;
  color: var(--color-muted);
}

.image-placeholder {
  display: grid;
  min-height: 18rem;
  place-items: center;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-content);
  background:
    linear-gradient(135deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    linear-gradient(45deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    var(--color-surface);
  color: var(--color-muted);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.image-placeholder--wide {
  min-height: 22rem;
}

.image-placeholder--hero {
  min-height: 16rem;
}

.image-placeholder--card {
  min-height: 9rem;
  margin-top: var(--space-3);
  aspect-ratio: 16 / 10;
}

.image-placeholder--article-thumb {
  width: min(10rem, 42vw);
  min-height: 0;
  aspect-ratio: 1;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-align: center;
}

.flow {
  display: grid;
  gap: var(--space-2);
}

.flow__item {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.flow__arrow {
  color: var(--color-highlight);
  text-align: center;
}

.card-grid {
  display: grid;
  gap: var(--space-3);
}

.card {
  min-height: 11rem;
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.card--system {
  display: flex;
  flex-direction: column;
}

.card--system p {
  margin-bottom: 0;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--space-4);
}

.card__note {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.section__closing {
  max-width: 58rem;
  margin: 0;
  color: var(--color-accent-soft);
}

.selected-writing__header {
  max-width: 46rem;
}

.selected-writing__header h2 {
  max-width: 22ch;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
}

.selected-writing__list {
  border-top: var(--border);
}

.selected-writing__item {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border);
}

.selected-writing__rail {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.selected-writing__number {
  color: var(--color-highlight);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.selected-writing__rail .article-item__meta {
  margin: 0;
  line-height: 1.65;
}

.selected-writing__content h3 {
  max-width: 28ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.selected-writing__content h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.selected-writing__content h3 a:hover,
.selected-writing__content h3 a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.selected-writing__content p {
  max-width: 50rem;
  margin-top: var(--space-3);
}

.selected-writing__link {
  width: fit-content;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.selected-writing__link:hover,
.selected-writing__link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

.personal-closer__header {
  max-width: 42rem;
}

.personal-closer__copy {
  max-width: var(--content-text);
}

.personal-closer__copy > :first-child {
  margin-top: 0;
}

.personal-closer .image-placeholder--wide {
  align-self: start;
}

.personal-closer__statement {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4);
  border-top: var(--border);
  color: var(--color-text) !important;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  line-height: 1.45;
}

.personal-closer__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.card__label,
.status__label,
.article-item__meta {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card h3,
.article-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.status-grid {
  display: grid;
  gap: var(--space-3);
}

.status {
  padding: var(--space-4);
  border-radius: var(--radius-content);
  border-left: 0.22rem solid var(--color-accent);
  background: var(--color-surface);
}

.operating-model-column {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
}

.operating-model {
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.operating-model h3 {
  margin: 0;
  padding: var(--space-4);
  border-bottom: var(--border);
  color: var(--color-highlight);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

.operating-model__list {
  margin: 0;
}

.operating-model__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: var(--border);
}

.operating-model__row:last-child {
  border-bottom: 0;
}

.operating-model dt {
  color: var(--color-highlight);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.operating-model dd {
  margin: 0;
  color: var(--color-text);
}

.timeline {
  display: grid;
  gap: 0;
  border-top: var(--border);
}

.timeline__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--border);
}

.timeline__date {
  color: var(--color-accent-soft);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-list {
  border-top: var(--border);
}

.article-item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: var(--border);
}

.article-item a {
  text-decoration: none;
}

.contact-box {
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.contact-box a {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 2rem);
}

.article-hero .page-title {
  max-width: 18ch;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 0.82rem;
}

.article-meta span {
  padding-top: var(--space-2);
  border-top: var(--border);
}

.article-body {
  width: min(100% - 2rem, 50rem);
  margin-inline: auto;
  padding-block: var(--space-7);
}

.article-body p,
.article-body li,
.article-body dd {
  color: var(--color-muted);
}

.article-body a {
  color: var(--color-text);
}

.article-section {
  padding-block: var(--space-6);
  border-top: var(--border);
}

.article-section:first-of-type {
  border-top: 0;
}

.article-section h2 {
  max-width: 22ch;
  margin: 0 0 var(--space-4);
  color: var(--color-highlight);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.article-section h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

.article-section p {
  margin-block: var(--space-3) 0;
}

.article-section ul,
.article-section ol {
  margin-block: var(--space-4) 0;
  padding-left: 1.35rem;
}

.article-section li + li {
  margin-top: var(--space-2);
}

.article-section blockquote {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border-left: 0.22rem solid var(--color-accent);
  background: var(--color-surface);
}

.article-section blockquote p {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
}

.claim-note {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.claim-note p {
  margin: 0;
}

.claim-note__label {
  margin-bottom: var(--space-2) !important;
  color: var(--color-accent-soft) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-question,
.article-emphasis {
  color: var(--color-text) !important;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.4;
}

.analogy-map {
  margin: var(--space-5) 0 0;
  border-top: var(--border);
}

.analogy-map > div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: var(--border);
}

.analogy-map dt {
  color: var(--color-highlight);
  font-weight: 700;
}

.analogy-map dd {
  margin: 0;
}

.principle-grid,
.boundary-grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.principle,
.boundary-grid > section {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.principle p,
.boundary-grid p {
  margin-top: var(--space-2);
}

.boundary-grid ul {
  margin-top: var(--space-3);
}

.resolution-list {
  padding: 0;
  list-style: none;
  counter-reset: resolution;
}

.resolution-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 3rem;
  border-bottom: var(--border);
  counter-increment: resolution;
}

.resolution-list li::before {
  position: absolute;
  top: var(--space-3);
  left: 0;
  color: var(--color-highlight);
  content: counter(resolution, decimal-leading-zero);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.article-loop {
  margin-top: var(--space-5);
}

.article-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.site-footer {
  padding-block: var(--space-6);
  border-top: var(--border);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-4);
}

.site-footer p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-links a {
  color: var(--color-muted);
}

@media (min-width: 42rem) {
  .site-shell {
    width: min(100% - 3rem, var(--content-wide));
  }

  .hero {
    padding-block: var(--space-8);
  }

  .image-placeholder--hero {
    min-height: 20rem;
  }

  .section {
    padding-block: var(--space-8);
  }

  .card-grid,
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operating-model__row {
    grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1.35fr);
    align-items: start;
  }

  .analogy-map > div {
    grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
  }

  .principle-grid,
  .boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
  }

  .flow__arrow {
    transform: rotate(-90deg);
  }

  .flow--five {
    grid-template-columns: 1fr;
  }

  .flow--five .flow__arrow {
    transform: none;
  }
}

@media (min-width: 64rem) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(20rem, 0.85fr);
    align-items: center;
    gap: var(--space-6);
  }

  .image-placeholder--hero {
    min-height: 24rem;
  }

  .nav-toggle {
    display: none !important;
  }

  .site-nav,
  .js .site-nav[data-collapsible="true"] {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
  }

  .site-nav a {
    padding: 0.4rem 0;
  }

  .site-nav__cross {
    margin-top: 0;
    margin-left: var(--space-2);
    padding-left: var(--space-4) !important;
    border-left: var(--border);
  }

  .section__inner--split {
    grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
    align-items: start;
  }

  .section__body--split {
    grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
    align-items: start;
  }

  .section__inner--about-studio {
    grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 0.95fr);
    align-items: start;
    gap: var(--space-6);
  }

  .section__inner--about-studio .section__intro {
    order: 2;
    max-width: 40rem;
    justify-self: stretch;
    padding-left: 1vw;
  }

  .section__inner--about-studio .operating-model {
    order: 1;
  }

  .selected-writing__item {
    grid-template-columns: minmax(8rem, 0.38fr) 8.5rem minmax(0, 1.62fr) auto;
    align-items: start;
    column-gap: var(--space-5);
  }

  .image-placeholder--article-thumb {
    width: 8.5rem;
  }

  .selected-writing__rail {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .selected-writing__link {
    padding-top: 0.35rem;
    white-space: nowrap;
  }

  .card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timeline__item {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .flow--five {
    grid-template-columns:
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr) auto
      minmax(0, 1fr);
  }

  .flow--five .flow__arrow {
    transform: rotate(-90deg);
  }
}

/* ================================================================
   MYRIUNA WORLDS DEVELOPMENT PAGE
   Right-hand surfaces begin on the h1/h2 row, never the eyebrow.
   ================================================================ */

.development-hero__inner,
.development-section__inner {
  display: grid;
  gap: 0;
}

.development-hero__media {
  margin-top: var(--space-5);
}

.development-section__copy {
  max-width: var(--content-text);
}

.development-section__content {
  margin-top: var(--space-5);
}

.development-disclosure {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
}

.development-disclosure h3 {
  margin: 0;
  color: var(--color-highlight);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
}

.development-disclosure details {
  margin-top: auto;
  padding-top: var(--space-4);
}

.development-disclosure summary {
  display: inline-flex;
  width: fit-content;
  min-height: 2.7rem;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.9rem;
  border: var(--border);
  border-radius: var(--radius-control);
  color: var(--color-accent-soft);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.development-disclosure summary::-webkit-details-marker {
  display: none;
}

.development-disclosure summary:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.development-disclosure__open {
  display: none;
}

.development-disclosure details[open] .development-disclosure__closed {
  display: none;
}

.development-disclosure details[open] .development-disclosure__open {
  display: inline;
}

.development-disclosure__body {
  padding-top: var(--space-3);
}

.development-disclosure__body p:first-child {
  margin-top: 0;
}

.development-page .section--tone-high .card,
.development-page .section--tone-high .status {
  background: var(--color-surface-alt);
}

@media (min-width: 64rem) {
  .development-hero__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
    grid-template-areas:
      "eyebrow ."
      "title media"
      "lede media"
      "actions media";
    column-gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
  }

  .development-hero__eyebrow {
    grid-area: eyebrow;
  }

  .development-hero__title {
    grid-area: title;
  }

  .development-hero__lede {
    grid-area: lede;
  }

  .development-hero__actions {
    grid-area: actions;
  }

  .development-hero__media {
    grid-area: media;
    margin-top: 0;
  }

  .development-section__inner {
    grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1.2fr);
    grid-template-areas:
      "eyebrow ."
      "title content"
      "copy content";
    column-gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
  }

  .development-section__eyebrow {
    grid-area: eyebrow;
  }

  .development-section__title {
    grid-area: title;
  }

  .development-section__copy {
    grid-area: copy;
  }

  .development-section__content {
    grid-area: content;
    margin-top: 0;
  }
}

/* Development card independence and hero action alignment */
.development-card-grid {
  align-items: start;
}

.development-disclosure {
  min-height: 0;
  align-self: start;
}

.development-hero__actions {
  display: grid;
  width: fit-content;
  gap: var(--space-3);
}

.development-hero__actions .button {
  width: 100%;
  min-width: 18rem;
  justify-content: center;
}

@media (max-width: 30rem) {
  .development-hero__actions {
    width: 100%;
  }

  .development-hero__actions .button {
    min-width: 0;
  }
}

/* Development closed-card baseline alignment */
@media (min-width: 48rem) {
  .development-card-grid .development-disclosure:not(:has(details[open])) {
    min-height: 18rem;
  }

  .development-card-grid .development-disclosure:has(details[open]) {
    min-height: 0;
  }
}

/* Myriuna Worlds Development final locked pass */
.development-village-banner {
  padding-top: 0;
}

.development-village-banner__placeholder {
  width: 100%;
  min-height: 16rem;
  aspect-ratio: 3 / 1;
}

#next-milestones .development-section__copy--strong {
  margin-top: var(--space-4);
  color: var(--color-text);
  font-weight: 500;
}

@media (min-width: 64rem) {
  #next-milestones .development-section__inner {
    grid-template-areas:
      "eyebrow ."
      "heading content";
  }

  #next-milestones .development-section__heading-group {
    grid-area: heading;
  }

  #next-milestones .development-section__content {
    grid-area: content;
  }
}

/* Myriuna Worlds Development subtle tonal gradients */
.development-page {
  --tone-base-low-midpoint: #1a1c1e;
  --tone-low-mid-midpoint: #1d1f1f;
  --tone-mid-high-midpoint: #20211f;
  --tone-low-base-midpoint: #1a1c1e;
}

.development-page .development-hero {
  background:
    linear-gradient(
      180deg,
      var(--tone-base) 0%,
      var(--tone-base-low-midpoint) 100%
    );
}

.development-page #current-development {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-low-mid-midpoint) 100%
    );
}

.development-page #verified-milestones {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-mid-high-midpoint) 100%
    );
}

.development-page #active-work {
  background:
    linear-gradient(
      180deg,
      var(--tone-high) 0%,
      var(--tone-mid-high-midpoint) 100%
    );
}

.development-page #next-milestones {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-low-mid-midpoint) 100%
    );
}

.development-page #first-world {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-low-base-midpoint) 100%
    );
}

.development-page .development-village-banner--gradient-end {
  background: var(--tone-low-base-midpoint);
}

/* ================================================================
   SHARED MYRIUNA WORLDS TONAL GRADIENTS
   Each existing surface fades only halfway toward the next surface.
   ================================================================ */

:root {
  --tone-midpoint-base-low: #1a1c1e;
  --tone-midpoint-low-mid: #1d1f1f;
  --tone-midpoint-low-high: #1e201f;
  --tone-midpoint-low-base: #1a1c1e;
  --tone-midpoint-mid-high: #20211f;
  --tone-midpoint-mid-low: #1d1f1f;
  --tone-midpoint-mid-base: #1c1e1e;
  --tone-midpoint-high-mid: #20211f;
  --tone-midpoint-high-low: #1e201f;
  --tone-midpoint-high-base: #1d1f1e;
}

/* Base heroes normally begin the page's base → low tonal movement. */
.hero--home,
.hero--tone-base {
  background:
    linear-gradient(
      180deg,
      var(--tone-base) 0%,
      var(--tone-midpoint-base-low) 100%
    );
}

/* A single standalone hero returns directly to the base-tone footer. */
main > .hero--tone-base:only-child {
  background: var(--tone-base);
}

/* Default terminal behaviour returns each section toward the base footer. */
.section--roles,
.section--tone-low,
.section--personal-closer {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-midpoint-low-base) 100%
    );
}

.section--inverse,
.section--writing,
.section--tone-mid {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-midpoint-mid-base) 100%
    );
}

.section--systems,
.section--tone-high {
  background:
    linear-gradient(
      180deg,
      var(--tone-high) 0%,
      var(--tone-midpoint-high-base) 100%
    );
}

/* Infer the actual next tone from the existing page sequence. */
.section--roles:has(+ .section--inverse),
.section--tone-low:has(+ .section--tone-mid) {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-midpoint-low-mid) 100%
    );
}

.section--tone-low:has(+ .section--tone-high) {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-midpoint-low-high) 100%
    );
}

.section--inverse:has(+ .section--systems),
.section--writing:has(+ .section--systems),
.section--tone-mid:has(+ .section--tone-high) {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-midpoint-mid-high) 100%
    );
}

.section--inverse:has(+ .section--roles),
.section--writing:has(+ .section--roles),
.section--tone-mid:has(+ .section--tone-low),
.section--writing:has(+ .section--personal-closer) {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-midpoint-mid-low) 100%
    );
}

.section--systems:has(+ .section--inverse),
.section--systems:has(+ .section--writing),
.section--tone-high:has(+ .section--tone-mid) {
  background:
    linear-gradient(
      180deg,
      var(--tone-high) 0%,
      var(--tone-midpoint-high-mid) 100%
    );
}

.section--tone-high:has(+ .section--tone-low) {
  background:
    linear-gradient(
      180deg,
      var(--tone-high) 0%,
      var(--tone-midpoint-high-low) 100%
    );
}

/* Long-form Writing bands receive the same treatment without changing markup. */
.article-body--tonal .article-section:nth-of-type(6n + 1)::before,
.article-body--tonal .article-section:nth-of-type(6n + 5)::before {
  background:
    linear-gradient(
      180deg,
      var(--tone-low) 0%,
      var(--tone-midpoint-low-mid) 100%
    );
}

.article-body--tonal .article-section:nth-of-type(6n + 2)::before {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-midpoint-mid-high) 100%
    );
}

.article-body--tonal .article-section:nth-of-type(6n + 3)::before {
  background:
    linear-gradient(
      180deg,
      var(--tone-high) 0%,
      var(--tone-midpoint-high-mid) 100%
    );
}

.article-body--tonal .article-section:nth-of-type(6n + 4)::before,
.article-body--tonal .article-section:nth-of-type(6n + 6)::before {
  background:
    linear-gradient(
      180deg,
      var(--tone-mid) 0%,
      var(--tone-midpoint-mid-low) 100%
    );
}

/* About remains deliberately compact. */
.about-channel-grid {
  display: grid;
  gap: var(--space-3);
}

.about-channel-card {
  display: flex;
  flex-direction: column;
}

.about-channel-card h3 {
  color: var(--color-highlight);
}

.about-channel-status {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.about-channel-card .card__actions {
  margin-top: 0;
}

@media (min-width: 48rem) {
  .about-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Myriuna Worlds About channel and contact icons */
.about-icon-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.about-icon-heading h3,
.about-icon-heading .eyebrow {
  margin: 0;
}

.about-icon {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
}

.about-icon::before {
  width: 1.5rem;
  height: 1.5rem;
  background: currentColor;
  content: "";
  opacity: 0.94;
  -webkit-mask: var(--about-icon-source) center / contain no-repeat;
  mask: var(--about-icon-source) center / contain no-repeat;
}

.about-icon--youtube {
  --about-icon-source: url("/assets/icons/about/youtube.svg");
}

.about-icon--twitch {
  --about-icon-source: url("/assets/icons/about/twitch.svg");
}

.about-icon--email {
  --about-icon-source: url("/assets/icons/about/email.svg");
}

.about-icon-heading--contact {
  margin-bottom: var(--space-3);
}

/* Myriuna Worlds Writing image placeholders */
.image-placeholder--writing-main {
  width: 100%;
  min-height: 0;
  margin-top: var(--space-6);
  aspect-ratio: 16 / 9;
}

.article-item--with-image {
  grid-template-columns: 4.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
}

.image-placeholder--writing-preview {
  grid-column: 1;
  grid-row: 1;
  width: 4.75rem;
  min-height: 0;
  aspect-ratio: 1;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.article-item__content {
  grid-column: 2;
  min-width: 0;
}

@media (min-width: 48rem) {
  .article-item--with-image {
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .image-placeholder--writing-preview {
    width: 6rem;
  }
}

/* Writing index external development-notes handoff */
.article-item__actions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.article-item--external .article-item__content > p {
  max-width: 48rem;
}

/* Author and publication identity */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 0.86rem;
}

.article-byline a {
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none;
}

.article-byline a:hover,
.article-byline a:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}

.contact-box__name {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.contact-box__profile {
  margin: var(--space-3) 0 0;
  font-size: 0.9rem;
}

.contact-box__profile a {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: inherit;
}

/* Myriuna local continuity covenant */
.continuity-section__inner {
  gap: clamp(3.5rem, 8vw, 7rem);
}

.continuity-section__intro {
  max-width: 64rem;
}

.continuity-section__intro h2 {
  max-width: 15ch;
}

.continuity-section__intro p {
  max-width: 52rem;
}

.continuity-covenant {
  max-width: 30ch;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3.5rem) 0;
  border-block: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.continuity-grid {
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.continuity-card {
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.continuity-card h3 {
  max-width: 22ch;
}

.continuity-reference-note {
  max-width: 48rem;
  margin: calc(-1 * var(--space-4)) 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (min-width: 52rem) {
  .continuity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .continuity-covenant {
    margin-left: min(8vw, 7rem);
  }
}

/* Myriuna first real playtest chapter */
.playtest-section__inner {
  gap: clamp(3.5rem, 8vw, 7rem);
}

.playtest-header {
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: end;
}

.playtest-section__intro {
  max-width: 64rem;
}

.playtest-section__intro h2 {
  max-width: 16ch;
}

.playtest-section__intro p {
  max-width: 52rem;
}

.playtest-count {
  display: grid;
  width: min(100%, 20rem);
  gap: var(--space-2);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-surface) 74%, transparent);
}

.playtest-count__number {
  color: var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 0.86;
}

.playtest-count__label {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
}

.playtest-count p {
  max-width: 18rem;
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.playtest-statement {
  max-width: 36ch;
  margin: 0;
  padding: clamp(1.75rem, 4vw, 3.5rem) 0;
  border-block: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.8vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.playtest-grid {
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.playtest-card {
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.playtest-card h3 {
  max-width: 24ch;
}

.playtest-closing {
  max-width: 42rem;
  margin: 0;
  color: var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.35;
}

@media (min-width: 52rem) {
  .playtest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .playtest-header {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  }

  .playtest-count {
    justify-self: end;
  }

  .playtest-statement {
    margin-left: min(8vw, 7rem);
  }
}

/* Myriuna relational frames and density pass */
.section-actions {
  margin: var(--space-5) 0 0;
}

.section-statement,
.frame-statement {
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0;
  border-block: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.section-statement--compact {
  max-width: 38ch;
}

.frame-statement {
  max-width: 18ch;
  margin-top: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.16;
}

.module-section__inner,
.text-lineage-section__inner {
  gap: clamp(3rem, 7vw, 6rem);
}

.module-section__top {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.module-section__intro,
.text-lineage-section__intro {
  max-width: 62rem;
}

.module-grid,
.text-lineage-grid {
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.text-lineage-section__intro h2 {
  max-width: 15ch;
}

.playtest-boundaries {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-surface-alt) 76%, transparent);
}

.playtest-boundaries__intro {
  max-width: 42rem;
}

.playtest-boundaries__intro h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  line-height: 1.2;
}

.playtest-boundaries__grid {
  display: grid;
  gap: var(--space-5);
}

.playtest-boundary {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.playtest-boundary p:last-child {
  margin-bottom: 0;
}

@media (min-width: 52rem) {
  .module-grid,
  .text-lineage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .playtest-boundaries__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .module-section__top {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.9fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Warm studio heading hierarchy */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: var(--color-highlight);
}

/* Twentieth pass: reverse emphasis in selected overview components */
.card__label {
  color: var(--color-highlight);
}

.card--system h3 {
  color: var(--color-text);
}

/* Selected writing rail: metadata gets the warmth, row numbers fall back */
.selected-writing__number {
  color: var(--color-text);
}

.selected-writing__rail .article-item__meta {
  color: var(--color-highlight);
}

/* Current status: keep the section heading warm, row labels neutral */
.operating-model dt {
  color: var(--color-text);
}

/* ================================================================
   SHARED STUDIO TONAL PROGRESSION
   The homepage remains the visual source of truth. Internal pages use
   reusable tone classes while preserving their page-specific layouts.
   ================================================================ */

:root {
  --tone-base: #191b1d;
  --tone-low: #1b1d1e;
  --tone-mid: #1e201f;
  --tone-high: #21221f;
}

.hero--home,
.hero--tone-base {
  background: var(--tone-base);
}

.section--roles,
.section--tone-low {
  background: var(--tone-low);
}

.section--inverse,
.section--writing,
.section--tone-mid {
  background: var(--tone-mid);
}

.section--systems,
.section--tone-high {
  background: var(--tone-high);
}

.section--personal-closer {
  background: var(--tone-low);
}

.site-header,
.site-footer {
  background: var(--tone-base);
}

/* Long-form articles use the same tonal rhythm as full-width sections
   without changing their readable text measure or article layout. */
.article-body--tonal {
  overflow: clip;
}

.article-body--tonal .article-section {
  position: relative;
  isolation: isolate;
}

.article-body--tonal .article-section::before {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  background: var(--tone-low);
  content: "";
  transform: translateX(-50%);
}

.article-body--tonal .article-section:nth-of-type(6n + 2)::before,
.article-body--tonal .article-section:nth-of-type(6n + 4)::before,
.article-body--tonal .article-section:nth-of-type(6n + 6)::before {
  background: var(--tone-mid);
}

.article-body--tonal .article-section:nth-of-type(6n + 3)::before {
  background: var(--tone-high);
}

/* ================================================================
   AMBER SEPARATOR PALETTE
   Edit this single block to tune structural line colors site-wide.

   These values are tuned independently from the current heading highlight
   so structural lines remain restrained across the existing section tones.
   ================================================================ */

:root {
  --separator-on-base: #4c4432;       /* over #191b1d */
  --separator-on-roles: #4d4533;      /* over #1b1d1e */
  --separator-on-inverse: #504834;    /* over #1e201f */
  --separator-on-systems: #524934;    /* over #21221f */
  --separator-on-surface: #534b3b;    /* over #222529 */
}

/* Site frame and default page-section separators */
.site-header {
  border-bottom-color: var(--separator-on-base);
}

.section {
  border-top-color: var(--separator-on-base);
}

.site-footer {
  border-top-color: var(--separator-on-base);
}

/* Section separators matched to their destination tone */
.section--roles,
.section--tone-low {
  border-top-color: var(--separator-on-roles);
}

.section--inverse,
.section--writing,
.section--tone-mid {
  border-top-color: var(--separator-on-inverse);
}

.section--systems,
.section--tone-high {
  border-top-color: var(--separator-on-systems);
}

.section--personal-closer {
  border-top-color: var(--separator-on-roles);
}

/* Article bands use matching amber separators. */
.article-body--tonal .article-section:nth-of-type(6n + 1),
.article-body--tonal .article-section:nth-of-type(6n + 5) {
  border-top-color: var(--separator-on-roles);
}

.article-body--tonal .article-section:nth-of-type(6n + 2),
.article-body--tonal .article-section:nth-of-type(6n + 4),
.article-body--tonal .article-section:nth-of-type(6n + 6) {
  border-top-color: var(--separator-on-inverse);
}

.article-body--tonal .article-section:nth-of-type(6n + 3) {
  border-top-color: var(--separator-on-systems);
}

/* Homepage internal separators */
.selected-writing__list,
.selected-writing__item {
  border-color: var(--separator-on-inverse);
}

.personal-closer__statement {
  border-top-color: var(--separator-on-roles);
}

/* Surface-panel table separators */
.operating-model h3,
.operating-model__row {
  border-color: var(--separator-on-surface);
}

/* General editorial and overview separators */
.timeline,
.timeline__item,
.article-list,
.article-item,
.article-meta span,
.article-section,
.analogy-map,
.analogy-map > div,
.resolution-list li {
  border-color: var(--separator-on-base);
}

/* ================================================================
   SUBTLE DEPTH SYSTEM
   Ambient separation only: no floating-card or 3D treatment.
   ================================================================ */

:root {
  --shadow-surface:
    0 1px 0 rgba(255, 255, 255, 0.018) inset,
    0 2px 5px rgba(0, 0, 0, 0.20),
    0 10px 28px rgba(0, 0, 0, 0.10);

  --shadow-control:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 2px 6px rgba(0, 0, 0, 0.16);

  --shadow-display-text:
    0 1px 0 rgba(255, 255, 255, 0.025),
    0 2px 4px rgba(0, 0, 0, 0.28);
}

/* Framed surfaces */
.flow__item,
.card,
.status,
.operating-model,
.contact-box,
.claim-note,
.principle,
.boundary-grid > section,
.article-section blockquote,
.image-placeholder {
  box-shadow: var(--shadow-surface);
}

/* Controls */
.button,
.nav-toggle {
  box-shadow: var(--shadow-control);
}

/* Display typography only */
main h1,
main h2,
main h3,
.page-title {
  text-shadow: var(--shadow-display-text);
}


/* ================================================================
   INVERSE ORGANIZATION PAGE — EDITORIAL FLOW
   Page-specific hero and compact organization summary.
   ================================================================ */

/* Inverse Organization summary — compact count | description rows */
.operating-model--summary .operating-model__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.operating-model--summary dt {
  flex: 0 0 12rem;
  white-space: nowrap;
}

.operating-model--summary dd {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  min-width: 0;
}

.operating-model__count {
  color: var(--color-highlight);
  font-size: 1rem;
  font-weight: 750;
}

.operating-model__divider {
  flex: 0 0 auto;
  color: var(--color-highlight);
}

@media (max-width: 42rem) {
  .operating-model--summary .operating-model__row {
    display: grid;
    gap: var(--space-2);
  }

  .operating-model--summary dt {
    white-space: normal;
  }

  .operating-model--summary dd {
    display: block;
  }

  .operating-model--summary .operating-model__divider {
    display: none;
  }
}


/* Inverse Organization: responsive basic-model reading order */
.basic-model__inner {
  grid-template-areas:
    "heading"
    "copy"
    "flow";
}

.basic-model__heading {
  grid-area: heading;
}

.basic-model__copy {
  grid-area: copy;
  max-width: 58rem;
}

.basic-model__flow {
  grid-area: flow;
}

@media (min-width: 64rem) {
  .basic-model__inner {
    grid-template-areas:
      "heading"
      "flow"
      "copy";
  }
}


/* Inverse Organization: align split-column content with the H2, not the eyebrow */
@media (min-width: 64rem) {
  .inverse-organization-page .section__inner--split > :not(.section__intro) {
    margin-top: 2.25rem;
  }
}

/* ================================================================
   FULL MODEL — ROLE EXPLORER V2
   Spacious domain chapters, local Phosphor badges, and composed
   expanded-role documents.
   ================================================================ */

.full-model-summary {
  align-self: stretch;
}

.full-model-summary h2 {
  padding: var(--space-4);
  font-size: clamp(1.45rem, 3vw, 2rem);
}

.role-explorer-intro {
  max-width: 58rem;
}

.role-explorer-section {
  padding-bottom: clamp(4.5rem, 7vw, 7rem);
}

.domain-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.domain-index__link,
.domain-index__loading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3);
  border: var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-control);
}

.domain-index__link {
  color: var(--color-text);
  text-decoration: none;
}

.domain-index__link:hover,
.domain-index__link:focus-visible {
  border-color: var(--color-highlight);
  color: var(--color-text);
}

.domain-index__name {
  font-weight: 650;
}

.domain-index__count {
  color: var(--color-highlight);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.role-explorer-status {
  margin-top: var(--space-5);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.role-explorer-status[data-state="ready"] {
  color: var(--color-accent-soft);
}

.role-explorer-status[data-state="error"] {
  max-width: 58rem;
  color: var(--color-text);
}

.role-explorer {
  display: block;
}

.role-domain {
  scroll-margin-top: 6rem;
  padding-block: clamp(4.75rem, 8vw, 8rem);
  border-top: 1px solid var(--separator-on-surface);
}

.role-domain--tone-a {
  background: #1b1d1e;
}

.role-domain--tone-b {
  background: #1e201f;
}

.role-domain--tone-c {
  background: #21221f;
}

.role-domain__header {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.role-domain__heading .eyebrow {
  margin-bottom: var(--space-3);
}

.role-domain__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.role-domain__copy {
  display: grid;
  align-content: start;
  gap: 1.15rem;
  max-width: 58rem;
}

.role-domain__copy p {
  margin: 0;
}

.role-domain__count-label {
  color: var(--color-highlight);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-grid {
  display: grid;
  gap: 1.5rem;
}

.role-card {
  min-width: 0;
  scroll-margin-top: 6rem;
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
  box-shadow: var(--shadow-surface);
  overflow: clip;
}

.role-card[open] {
  grid-column: 1 / -1;
  background: var(--color-surface-alt);
}

.role-card__summary {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 15rem;
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.role-card__summary::-webkit-details-marker {
  display: none;
}

.role-card__summary:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: -2px;
}

.role-card[open] .role-card__summary {
  min-height: 0;
  border-bottom: var(--border);
}

.role-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.role-card__type {
  color: var(--color-highlight);
  font-weight: 700;
}

.role-card__identity {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.role-card:not([open]) .role-card__identity {
  align-items: start;
}

.role-card:not([open]) .role-icon {
  margin-top: 0.2rem;
}

.role-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #1b1d1e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 3px 10px rgba(0, 0, 0, 0.18);
  color: var(--color-text);
}

.role-icon__glyph {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  background: currentColor;
  -webkit-mask: var(--role-icon-url) center / contain no-repeat;
  mask: var(--role-icon-url) center / contain no-repeat;
}

.role-card__title {
  margin: 0;
  color: var(--color-highlight);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.role-card__summary-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.role-card[open] .role-card__summary-text {
  display: none;
}

.role-card__toggle {
  align-self: end;
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--color-accent-soft);
  font-size: 0.88rem;
  font-weight: 650;
}

.role-card__toggle::after {
  content: " +";
  color: var(--color-highlight);
}

.role-card[open] .role-card__toggle::after {
  content: " −";
}

.role-card[open] .role-card__summary {
  padding: clamp(1.75rem, 3vw, 2.75rem);
}

.role-card[open] .role-card__identity {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem;
}

.role-card[open] .role-icon {
  width: 4.5rem;
  height: 4.5rem;
}

.role-card[open] .role-icon__glyph {
  width: 2.15rem;
  height: 2.15rem;
}

.role-profile {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.role-card[open] .role-profile {
  row-gap: clamp(2.75rem, 5vw, 4.5rem);
  column-gap: clamp(3rem, 6vw, 6rem);
  padding: clamp(2.5rem, 5vw, 5rem);
}

.role-profile__field {
  min-width: 0;
}

.role-profile__label {
  margin: 0 0 1rem;
  color: var(--color-highlight);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: none;
}

.role-profile__field p {
  margin: 0;
  line-height: 1.78;
}

.role-profile__field--wide p {
  max-width: 86ch;
}

.role-profile__field:not(.role-profile__field--wide) p {
  max-width: 62ch;
}

.role-profile__principle-list {
  max-width: 82ch;
  margin: 0;
  padding-left: 1.2rem;
}

.role-profile__principle-list li + li {
  margin-top: 0.75rem;
}

.role-profile__source {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding-top: 1.75rem;
  border-top: var(--border);
  color: var(--color-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.role-profile__source code {
  color: var(--color-accent-soft);
}

@media (min-width: 42rem) {
  .domain-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-profile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-profile__field--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .domain-index {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .role-domain__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
    column-gap: clamp(4rem, 8vw, 8rem);
    align-items: start;
  }

  .role-domain__header {
    display: contents;
  }

  .role-domain__heading {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .role-domain__copy {
    grid-column: 2;
    grid-row: 1;
    padding-top: 2.45rem;
  }

  .role-grid {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(3rem, 5vw, 4.5rem);
  }

  .role-domain__inner:has(.role-card[open]) .role-grid {
    grid-column: 1 / -1;
  }

  .role-card[open] {
    width: min(80vw, 100%);
    justify-self: center;
  }

  .role-card__meta {
    display: grid;
    grid-template-columns: max-content minmax(12rem, 1fr);
    align-items: start;
    gap: 1rem;
    min-height: 2.7rem;
  }

  .role-card__status {
    justify-self: end;
    max-width: 26ch;
    text-align: right;
    line-height: 1.35;
  }

  .role-card[open] .role-card__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .role-card[open] .role-card__meta {
    grid-column: 1 / -1;
  }

  .role-card[open] .role-card__identity {
    grid-column: 1;
    grid-row: 2;
  }

  .role-card[open] .role-card__toggle {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 72rem) {
  .role-card[open] .role-profile__field p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }
}

@media (max-width: 41.999rem) {
  .role-domain {
    padding-block: 4rem;
  }

  .role-domain__header {
    margin-bottom: 3rem;
  }

  .role-card[open] .role-profile {
    padding: 2rem 1.5rem 2.5rem;
  }
}

@media (min-width: 64rem) {
  .writing-page .article-list {
    padding-left: 1vw;
  }
}

/* ================================================================
   MYRIUNA PRODUCT IDENTITY
   Shared structural baseline with Myriuna Worlds; product palette,
   tonal progression, and cross-site accent remain distinct.
   ================================================================ */

:root {
  /* Image-frame palette: the interface holds the world rather than depicting it. */
  --color-bg: #101512;
  --color-surface: #1a1f1b;
  --color-surface-alt: #222722;
  --color-text: #eee9df;
  --color-muted: #b8b3aa;
  --color-border: #3f463f;
  --color-accent: #8f9c85;
  --color-accent-soft: #bcc5b6;
  --color-highlight: #c8c4ae;
  --color-accent-secondary: #687068;
  --color-accent-secondary-soft: #b8beb7;
  --color-on-accent: #101512;

  /* Chronicle prose above a restrained text-first interface layer. */
  --font-display:
    "Bookman Old Style",
    "URW Bookman L",
    "Palatino Linotype",
    Palatino,
    Georgia,
    serif;
  --font-body:
    Charter,
    "Bitstream Charter",
    Georgia,
    "Times New Roman",
    serif;
  --font-interface:
    "Cascadia Mono",
    Consolas,
    "Lucida Console",
    "Courier New",
    monospace;

  /* Broad surfaces remain restrained green-grey frames. */
  --tone-base: #101512;
  --tone-low: #141a16;
  --tone-mid: #181e1a;
  --tone-high: #1d241f;

  --tone-base-low-midpoint: #121814;
  --tone-low-mid-midpoint: #161c18;
  --tone-mid-high-midpoint: #1b211d;
  --tone-low-base-midpoint: #121814;

  --tone-midpoint-base-low: #121814;
  --tone-midpoint-low-mid: #161c18;
  --tone-midpoint-low-high: #181f1a;
  --tone-midpoint-low-base: #121814;
  --tone-midpoint-mid-high: #1b211d;
  --tone-midpoint-mid-low: #161c18;
  --tone-midpoint-mid-base: #151b17;
  --tone-midpoint-high-mid: #1b211d;
  --tone-midpoint-high-low: #181f1a;
  --tone-midpoint-high-base: #171d19;

  /* Quiet stone-and-foliage separators; no obvious timber wash. */
  --separator-on-base: #394139;
  --separator-on-roles: #3d453d;
  --separator-on-inverse: #424a42;
  --separator-on-systems: #474f47;
  --separator-on-surface: #4c554c;
}

/* Preserve clear reading on the lighter sage primary accent. */
.button--primary,
.button--primary:hover,
.button--primary:focus-visible {
  color: var(--color-on-accent);
}


.site-identity__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-nav__cross {
  color: var(--color-accent-secondary-soft) !important;
}

.button--secondary {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary-soft);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-accent-secondary-soft);
  color: var(--color-text);
}

.product-hero-placeholder {
  min-height: 18rem;
}

@media (min-width: 64rem) {
  .product-hero-placeholder {
    min-height: 24rem;
  }
}

/* Myriuna homepage copy pass */
.hero__note {
  max-width: 42rem;
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-accent-soft);
  font-size: 0.88rem;
}

.proof-statement {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.5;
}

.status__note {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Myriuna product definition, FAQ, and contact pass */
.definition-wide-intro {
  max-width: 62rem;
}

.definition-pair,
.record-links {
  display: grid;
  gap: var(--space-3);
}

.definition-card {
  min-height: 0;
}

.definition-statement {
  max-width: 36ch;
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0;
  border-block: var(--border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.definition-statement--top,
.definition-large-statement--top {
  margin-top: 0;
}

.definition-closing {
  max-width: 54rem;
  color: var(--color-accent-soft) !important;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
}

.definition-flow {
  margin-top: var(--space-5);
}

.question-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.question-field span {
  padding: 0.7rem 0.9rem;
  border: var(--border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-accent-soft);
  font-size: 0.9rem;
}

.definition-large-statement {
  max-width: 32ch;
  margin: var(--space-6) 0 0;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border-block: var(--border);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: 1.18;
}

.authority-ledger {
  display: grid;
  gap: 0;
  border-top: var(--border);
}

.authority-ledger > div {
  padding-block: var(--space-4);
  border-bottom: var(--border);
}

.authority-ledger h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.authority-ledger p {
  margin-top: var(--space-2);
}

.authority-ledger blockquote {
  margin: var(--space-5) 0 0;
  color: var(--color-accent-soft);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.2;
}

.simulation-tiers {
  display: grid;
  gap: 0;
  margin-top: var(--space-5);
  border-top: var(--border);
}

.simulation-tiers > div {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: var(--border);
}

.simulation-tiers span {
  color: var(--color-accent-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.simulation-tiers p {
  margin: 0;
}

.definition-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.faq-hero__note {
  align-self: end;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.faq-hero__note h2 {
  max-width: none;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.faq-layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.faq-index {
  height: fit-content;
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.faq-index p:not(.eyebrow) {
  margin: 0;
  padding-block: var(--space-2);
  border-top: var(--border);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.faq-list {
  border-top: var(--border);
}

.faq-item {
  border-bottom: var(--border);
}

.faq-item summary {
  position: relative;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 3rem var(--space-4) 0;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  line-height: 1.25;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  position: absolute;
  right: 0;
  color: var(--color-accent-soft);
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item__answer {
  max-width: 52rem;
  padding: 0 0 var(--space-5);
}

.faq-item__answer > :first-child {
  margin-top: 0;
}

.faq-item__answer p,
.faq-item__answer li {
  color: var(--color-muted);
}

.faq-item__answer blockquote {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.faq-hardware-grid {
  display: grid;
  gap: var(--space-4);
}

.faq-hardware-grid article {
  padding: var(--space-4);
  border: var(--border);
  border-radius: var(--radius-content);
  background: var(--color-surface);
}

.faq-hardware-grid h3 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.faq-hardware-grid ul {
  padding-left: 1.2rem;
}

.contact-box--hero {
  align-self: end;
}

.contact-topic-card {
  display: flex;
  min-height: 20rem;
  flex-direction: column;
}

.contact-topic-card .card__actions {
  margin-top: auto;
}

.record-links .card {
  min-height: 0;
}

@media (min-width: 48rem) {
  .definition-pair,
  .record-links,
  .faq-hardware-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .definition-pair .definition-statement {
    grid-column: 1 / -1;
  }

  .simulation-tiers > div {
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: start;
  }
}

@media (min-width: 64rem) {
  .site-nav,
  .js .site-nav[data-collapsible="true"] {
    gap: 1rem;
  }

  .site-nav a {
    font-size: 0.88rem;
  }

  .site-nav__cross {
    margin-left: 0;
    padding-left: 1rem !important;
  }

  .faq-layout {
    grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 0.72fr);
    align-items: start;
  }

  .faq-index {
    position: sticky;
    top: var(--space-4);
  }

  .definition-reaction-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .record-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Myriuna product heading-line alignment pass
   On desktop, the right column begins at the H1/H2 line rather than
   at the eyebrow label above the heading. The 2.25rem offset equals
   the current eyebrow line box plus its bottom spacing. */
@media (min-width: 64rem) {
  .hero__inner {
    align-items: start;
  }

  .hero__inner > :not(.hero__content),
  .section__inner--split > :not(.section__intro) {
    align-self: start;
    margin-top: 2.25rem;
  }
}

/* Myriuna homepage final spacing pass */

/* Centre the Continuity Promise content column itself.
   Text remains left-aligned inside the centred column. */
.continuity-section__intro {
  width: min(100%, 64rem);
  margin-inline: auto;
}

/* Give the two narrative-rendering prose blocks clearer separation
   without changing the established heading-line alignment. */
@media (min-width: 64rem) {
  .home-frame-section .section__intro {
    padding-right: clamp(1rem, 2vw, 2rem);
  }

  .home-frame-section .section__inner--split > :last-child {
    padding-left: clamp(1rem, 2vw, 2rem);
  }
}

/* Myriuna desktop structure final pass */

/* Final homepage visual note before the footer. */
.home-final-village-banner {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
}

.home-final-village-banner__image {
  width: 100%;
  min-height: clamp(12rem, 28vw, 24rem);
}

/* Player-agency flow: deliberate vertical sequence with no wrapping. */
.definition-flow--vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  margin-top: var(--space-5);
}

.definition-flow--vertical .definition-flow__item {
  width: 100%;
  min-height: 0;
  padding: 1rem 1.1rem;
  text-align: left;
}

.definition-flow--vertical .definition-flow__arrow {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  font-size: 1rem;
  line-height: 1;
}

/* Myriuna chronicle typography with terminal reference reserved for footer.
   Bookman headings and Charter/Georgia prose remain active through variables. */

.site-footer {
  font-family: var(--font-interface);
  letter-spacing: 0.035em;
}

/* Bookman is broader and heavier than Georgia; keep large headings composed. */
h1,
h2,
h3,
.display-text,
.statement {
  line-height: 1.04;
}

/* Myriuna Continuity Promise centre-axis correction
   Centre the actual prose column and covenant on one page axis.
   Text remains left-aligned; the wider card grid is unchanged. */

.continuity-section__intro {
  width: min(100%, 48rem);
  max-width: none;
  margin-inline: auto;
}

.continuity-section__intro p {
  max-width: none;
}

.continuity-covenant {
  margin-inline: auto;
}

@media (min-width: 72rem) {
  .continuity-covenant {
    margin-left: auto;
  }
}

/* Myriuna Continuity Promise final anchor correction
   The intro and covenant now occupy the same physical 48rem column.
   The covenant border spans that column; its text keeps a readable measure. */

.continuity-covenant {
  width: min(100%, 48rem);
  max-width: none;
  margin-inline: auto;
}

@media (min-width: 48rem) {
  .continuity-covenant {
    padding-right: clamp(8rem, 18vw, 14rem);
  }
}

/* ================================================================
   MYRIUNA PRODUCT GOLD + STONE RESTORATION
   Forest-black remains the frame. Deep aged yellow carries emphasis;
   warm stone tints carry controls and contained backpanels.
   ================================================================ */

:root {
  --color-bg: #101512;
  --color-surface: #1f211d;
  --color-surface-alt: #282923;
  --color-text: #eee9df;
  --color-muted: #bbb5aa;
  --color-border: #494a41;

  /* Aged manuscript yellow: emphasis rather than broad fill. */
  --color-accent: #b6953f;
  --color-accent-soft: #d8c47c;
  --color-highlight: #c9aa59;

  /* Stone is the physical interface material. */
  --color-stone: #9e9a8a;
  --color-stone-soft: #c6c0ae;
  --color-stone-dark: #6c6a60;
  --color-on-stone: #111511;

  --color-accent-secondary: #6c6a60;
  --color-accent-secondary-soft: #c6c0ae;
  --color-on-accent: #111511;

  --tone-base: #101512;
  --tone-low: #151815;
  --tone-mid: #1a1c18;
  --tone-high: #20211c;

  --tone-base-low-midpoint: #131713;
  --tone-low-mid-midpoint: #181a16;
  --tone-mid-high-midpoint: #1d1f1a;
  --tone-low-base-midpoint: #131713;

  --tone-midpoint-base-low: #131713;
  --tone-midpoint-low-mid: #181a16;
  --tone-midpoint-low-high: #1b1d18;
  --tone-midpoint-low-base: #131713;
  --tone-midpoint-mid-high: #1d1f1a;
  --tone-midpoint-mid-low: #181a16;
  --tone-midpoint-mid-base: #161915;
  --tone-midpoint-high-mid: #1d1f1a;
  --tone-midpoint-high-low: #1b1d18;
  --tone-midpoint-high-base: #181b17;

  --separator-on-base: #3d4038;
  --separator-on-roles: #42443b;
  --separator-on-inverse: #474940;
  --separator-on-systems: #4c4e44;
  --separator-on-surface: #525349;
}

/* Primary actions are stone slabs; yellow remains the signal colour. */
.button--primary,
.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--color-stone-soft);
  background: var(--color-stone);
  color: var(--color-on-stone);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-stone-soft);
  filter: none;
}

.button--secondary {
  border-color: var(--color-stone-dark);
  color: var(--color-stone-soft);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

.site-nav__cross {
  color: var(--color-stone-soft) !important;
}

/* Contained UI surfaces read as warm stone panels, not green cards. */
.flow__item,
.card,
.status,
.operating-model,
.contact-box,
.question-field span,
.faq-hero__note,
.faq-index,
.faq-hardware-grid article,
.image-placeholder {
  background-color: var(--color-surface);
  background-blend-mode: normal;
}

.card,
.status,
.flow__item,
.operating-model,
.contact-box,
.faq-hero__note,
.faq-index,
.faq-hardware-grid article {
  box-shadow: inset 0 1px 0 rgba(216, 196, 124, 0.035);
}

/* Preserve the placeholder cross while moving its backplate to stone. */
.image-placeholder {
  background:
    linear-gradient(135deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    linear-gradient(45deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    var(--color-surface);
}

/* Yellow identifies hierarchy; stone supports it. */
.eyebrow,
.card__label,
.status__label,
.simulation-tiers span,
.timeline__date,
.faq-item summary::after {
  color: var(--color-accent-soft);
}

.proof-statement,
.faq-item__answer blockquote,
.status {
  border-color: var(--color-accent);
}

.hero__note,
.definition-closing,
.authority-ledger blockquote,
.section__closing {
  color: var(--color-accent-soft) !important;
}

/* ================================================================
   MYRIUNA PRODUCT HIERARCHY CORRECTION
   Light stone carries major headings and labels. Aged yellow is
   reserved for actions and H3-level emphasis. Cards sit on darker,
   neutral stone-grey backpanels inside the forest-black frame.
   ================================================================ */

:root {
  --color-heading-stone: #d0cbbb;
  --color-panel-stone: #242622;
  --color-panel-stone-alt: #2a2c27;
  --color-action-gold: #c6a34b;
  --color-action-gold-soft: #dec775;
}

/* Major editorial hierarchy: warm light stone, not yellow. */
main h1,
main h2,
.page-title,
.display-text,
.statement {
  color: var(--color-heading-stone);
}

/* Small structural headers follow the stone hierarchy. */
.eyebrow,
.card__label,
.status__label,
.article-item__meta,
.simulation-tiers span,
.timeline__date {
  color: var(--color-stone-soft);
}

/* H3 is the concentrated gold signal inside sections and cards. */
main h3,
.card h3,
.article-item h3,
.card--system h3 {
  color: var(--color-action-gold);
}

/* Actions use aged yellow; stone is no longer the button fill. */
.button--primary,
.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--color-action-gold-soft);
  background: var(--color-action-gold);
  color: var(--color-on-accent);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-action-gold-soft);
}

.button--secondary {
  border-color: var(--color-action-gold);
  color: var(--color-action-gold-soft);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-action-gold-soft);
  color: var(--color-action-gold-soft);
}

/* Dark neutral stone-grey panels, visibly separate from the green-black page. */
.flow__item,
.card,
.status,
.operating-model,
.contact-box,
.question-field span,
.faq-hero__note,
.faq-index,
.faq-hardware-grid article {
  background-color: var(--color-panel-stone);
}

.card--system,
.status,
.operating-model,
.faq-hardware-grid article {
  background-color: var(--color-panel-stone-alt);
}

.image-placeholder {
  background:
    linear-gradient(135deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    linear-gradient(45deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    var(--color-panel-stone);
}

/* ================================================================
   MYRIUNA / MYRIUNA WORLDS COLOUR MIRROR
   Foreground hierarchy, accents, controls, borders, and interactive
   states now follow Myriuna Worlds exactly. Myriuna retains its own
   page and contained-panel backgrounds.
   ================================================================ */

:root {
  /* Exact Myriuna Worlds foreground and accent tokens. */
  --color-text: #eee9df;
  --color-muted: #b9b2a7;
  --color-border: #3c4145;
  --color-accent: #8d8b84;
  --color-accent-soft: #c2beb4;
  --color-highlight: #c9a554;

  /* Product backgrounds remain intentionally distinct. */
  --color-bg: #101512;
  --color-surface: #242622;
  --color-surface-alt: #2a2c27;
  --color-panel-stone: #242622;
  --color-panel-stone-alt: #2a2c27;
}

/* Match the studio's warm heading hierarchy exactly. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.page-title,
.display-text,
.statement {
  color: var(--color-highlight);
}

/* Match structural and metadata colour treatment. */
.eyebrow,
.status__label,
.article-item__meta,
.simulation-tiers span,
.timeline__date {
  color: var(--color-accent-soft);
}

.card__label {
  color: var(--color-highlight);
}

.card--system h3 {
  color: var(--color-text);
}

/* Match Myriuna Worlds controls exactly. */
.button--primary,
.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.button--primary:hover,
.button--primary:focus-visible {
  color: var(--color-bg);
  filter: brightness(1.08);
}

.button--secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

.site-nav__cross {
  color: var(--color-accent-soft) !important;
}

/* Keep product-specific backgrounds, but use studio border language. */
.flow__item,
.card,
.status,
.operating-model,
.contact-box,
.question-field span,
.faq-hero__note,
.faq-index,
.faq-hardware-grid article {
  border-color: var(--color-border);
}

.proof-statement,
.faq-item__answer blockquote,
.status {
  border-color: var(--color-highlight);
}

.hero__note,
.definition-closing,
.authority-ledger blockquote,
.section__closing {
  color: var(--color-highlight) !important;
}

/* ================================================================
   MYRIUNA FINAL HEADING + DEPTH ADJUSTMENT
   H1 and H2 return to the warm white studio text colour. Broad page
   and tonal-gradient backgrounds are darkened slightly while cards,
   controls, H3 accents, copy, and Myriuna Worlds remain unchanged.
   ================================================================ */

:root {
  --color-bg: #0e1210;

  --tone-base: #0e1210;
  --tone-low: #121512;
  --tone-mid: #171915;
  --tone-high: #1c1d19;

  --tone-base-low-midpoint: #101410;
  --tone-low-mid-midpoint: #141713;
  --tone-mid-high-midpoint: #1a1b17;
  --tone-low-base-midpoint: #101410;

  --tone-midpoint-base-low: #101410;
  --tone-midpoint-low-mid: #141713;
  --tone-midpoint-low-high: #171915;
  --tone-midpoint-low-base: #101410;
  --tone-midpoint-mid-high: #1a1b17;
  --tone-midpoint-mid-low: #141713;
  --tone-midpoint-mid-base: #131612;
  --tone-midpoint-high-mid: #1a1b17;
  --tone-midpoint-high-low: #171915;
  --tone-midpoint-high-base: #151713;
}

main h1,
main h2 {
  color: var(--color-text);
}

/* ================================================================
   MYRIUNA H1/H2 PARAGRAPH-TONE CORRECTION
   Major headings use the same warm muted tone as the product copy.
   Specific selectors are needed because earlier section rules are
   more specific than a bare main h2 override.
   ================================================================ */

main h1,
main h2,
.hero h1,
.page-title,
.section h2,
.selected-writing__header h2,
.article-hero .page-title,
.article-section h2,
.faq-hero__note h2,
.continuity-section__intro h2,
.playtest-section__intro h2,
.text-lineage-section__intro h2,
.full-model-summary h2 {
  color: var(--color-muted);
}

/* ================================================================
   MYRIUNA FULL COLOUR ALIGNMENT WITH MYRIUNA WORLDS
   Product layout and typography remain unchanged. The complete colour
   system now uses the studio site's palette, section tones, separators,
   panels, hierarchy, controls, and interaction states.
   ================================================================ */

:root {
  --color-bg: #191b1d;
  --color-surface: #222529;
  --color-surface-alt: #292d31;
  --color-text: #eee9df;
  --color-muted: #b9b2a7;
  --color-border: #3c4145;
  --color-accent: #8d8b84;
  --color-accent-soft: #c2beb4;
  --color-highlight: #c9a554;

  /* Product-only aliases now resolve to the shared studio palette. */
  --color-accent-secondary: #8d8b84;
  --color-accent-secondary-soft: #c2beb4;
  --color-on-accent: #191b1d;
  --color-stone: #8d8b84;
  --color-stone-soft: #c2beb4;
  --color-stone-dark: #3c4145;
  --color-on-stone: #191b1d;
  --color-heading-stone: #c9a554;
  --color-panel-stone: #222529;
  --color-panel-stone-alt: #292d31;
  --color-action-gold: #8d8b84;
  --color-action-gold-soft: #c2beb4;

  --tone-base: #191b1d;
  --tone-low: #1b1d1e;
  --tone-mid: #1e201f;
  --tone-high: #21221f;

  --tone-base-low-midpoint: #1a1c1e;
  --tone-low-mid-midpoint: #1d1f1f;
  --tone-mid-high-midpoint: #20211f;
  --tone-low-base-midpoint: #1a1c1e;

  --tone-midpoint-base-low: #1a1c1e;
  --tone-midpoint-low-mid: #1d1f1f;
  --tone-midpoint-low-high: #1e201f;
  --tone-midpoint-low-base: #1a1c1e;
  --tone-midpoint-mid-high: #20211f;
  --tone-midpoint-mid-low: #1d1f1f;
  --tone-midpoint-mid-base: #1c1e1e;
  --tone-midpoint-high-mid: #20211f;
  --tone-midpoint-high-low: #1e201f;
  --tone-midpoint-high-base: #1d1f1e;

  --separator-on-base: #4c4432;
  --separator-on-roles: #4d4533;
  --separator-on-inverse: #504834;
  --separator-on-systems: #524934;
  --separator-on-surface: #534b3b;
}

/* Restore the studio heading hierarchy across product-specific layouts. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.hero h1,
.page-title,
.section h2,
.selected-writing__header h2,
.article-hero .page-title,
.article-section h2,
.faq-hero__note h2,
.continuity-section__intro h2,
.playtest-section__intro h2,
.text-lineage-section__intro h2,
.full-model-summary h2,
.display-text,
.statement {
  color: var(--color-highlight);
}

.card__label {
  color: var(--color-highlight);
}

.card--system h3 {
  color: var(--color-text);
}

.eyebrow,
.status__label,
.article-item__meta,
.simulation-tiers span,
.timeline__date {
  color: var(--color-accent-soft);
}

.selected-writing__rail .article-item__meta {
  color: var(--color-highlight);
}

/* Match the studio control treatment. */
.button--primary,
.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

.button--primary:hover,
.button--primary:focus-visible {
  color: var(--color-bg);
  filter: brightness(1.08);
}

.button--secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

.site-nav__cross {
  color: var(--color-accent-soft) !important;
}

/* Product components now use the same studio surfaces and border language. */
.flow__item,
.card,
.card--system,
.status,
.operating-model,
.contact-box,
.question-field span,
.faq-hero__note,
.faq-index,
.faq-hardware-grid article {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

.image-placeholder {
  background:
    linear-gradient(135deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    linear-gradient(45deg, transparent 0 48%, var(--color-border) 49% 51%, transparent 52%),
    var(--color-surface);
}

.proof-statement,
.faq-item__answer blockquote,
.status {
  border-color: var(--color-accent);
}

.hero__note,
.definition-closing,
.authority-ledger blockquote,
.section__closing,
.playtest-closing {
  color: var(--color-accent-soft) !important;
}