:root {
  color-scheme: dark;
  --ink-950: #050a09;
  --ink-900: #08110f;
  --ink-850: #0c1714;
  --ink-800: #101e1a;
  --ink-700: #193029;
  --mist-50: #f4f0e3;
  --mist-100: #e6e6d9;
  --mist-300: #b9c7bf;
  --mist-500: #7f9b90;
  --aether: #62c5b4;
  --aether-soft: #9ed9cc;
  --gold: #d7bc75;
  --gold-soft: #eee0b6;
  --danger: #dc8c72;
  --red: #b93b36;
  --orange: #d17232;
  --yellow: #d9b938;
  --green: #4f9b58;
  --turquoise: #31a7a3;
  --blue: #3979b7;
  --indigo: #4b4d9e;
  --border: rgba(178, 207, 195, 0.18);
  --border-strong: rgba(215, 188, 117, 0.42);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Inter, Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --container: 1180px;
}

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

html {
  scroll-behavior: smooth;
  background: var(--ink-950);
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  color: var(--mist-100);
  background:
    radial-gradient(circle at 10% 15%, rgba(35, 92, 80, 0.16), transparent 28rem),
    radial-gradient(circle at 90% 45%, rgba(99, 74, 35, 0.12), transparent 25rem),
    var(--ink-950);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--aether-soft);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: var(--mist-50);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

::selection {
  color: var(--ink-950);
  background: var(--aether-soft);
}

h1,
h2,
h3 {
  margin: 0 0 0.65em;
  color: var(--mist-50);
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.7rem, 6vw, 6rem);
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.55rem);
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.28rem, 2vw, 1.65rem);
}

p,
ul,
ol {
  margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-160%);
  padding: 0.75rem 1rem;
  color: var(--ink-950);
  background: var(--gold-soft);
  border-radius: 0.35rem;
  font-weight: 700;
}

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

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2.5rem, 780px);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.8rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.lede {
  max-width: 46rem;
  color: var(--mist-300);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.6;
}

.microcopy {
  color: var(--mist-500);
  font-size: 0.88rem;
}

.status-pill,
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.68rem;
  border: 1px solid var(--border);
  border-radius: 99rem;
  color: var(--mist-300);
  background: rgba(8, 17, 15, 0.62);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-pill::before {
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.5rem;
  content: "";
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(215, 188, 117, 0.26);
}

.spectrum-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: min(100%, 24rem);
  height: 0.34rem;
  margin-bottom: 1.4rem;
  overflow: hidden;
  border-radius: 99rem;
}

.spectrum-rail span:nth-child(1) { background: var(--red); }
.spectrum-rail span:nth-child(2) { background: var(--orange); }
.spectrum-rail span:nth-child(3) { background: var(--yellow); }
.spectrum-rail span:nth-child(4) { background: var(--green); }
.spectrum-rail span:nth-child(5) { background: var(--turquoise); }
.spectrum-rail span:nth-child(6) { background: var(--blue); }
.spectrum-rail span:nth-child(7) { background: var(--indigo); }

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 10, 9, 0.9);
  backdrop-filter: blur(18px);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  gap: 1rem;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
  color: var(--mist-50);
  text-decoration: none;
}

.brand-link img {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border: 1px solid rgba(215, 188, 117, 0.35);
  border-radius: 50%;
}

.brand-name {
  display: grid;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.05;
}

.brand-name small {
  margin-top: 0.25rem;
  color: var(--mist-500);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.site-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.35rem;
  color: var(--mist-300);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--mist-50);
  background: rgba(129, 173, 157, 0.1);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--gold);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  color: var(--mist-100);
  background: var(--ink-850);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  width: 1.25rem;
  height: 2px;
  content: "";
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-toggle {
  flex-direction: column;
  gap: 0.28rem;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: min(820px, calc(100svh - 4.75rem));
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero-media,
.hero-media::after {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% center;
}

.hero-media::after {
  z-index: 1;
  content: "";
  background:
    linear-gradient(90deg, rgba(4, 10, 9, 0.96) 0%, rgba(4, 10, 9, 0.78) 42%, rgba(4, 10, 9, 0.22) 72%, rgba(4, 10, 9, 0.4) 100%),
    linear-gradient(0deg, rgba(4, 10, 9, 0.82) 0%, transparent 35%);
}

.hero-inner {
  display: flex;
  align-items: center;
  min-height: 100%;
  padding-block: clamp(5rem, 10vw, 8rem);
}

.hero-copy {
  width: min(100%, 47rem);
}

.hero h1 {
  margin-bottom: 0.2em;
  color: var(--gold-soft);
  text-shadow: 0 4px 36px rgba(0, 0, 0, 0.6);
}

.hero-kicker {
  margin-bottom: 1.25rem;
  color: var(--aether-soft);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-text {
  max-width: 39rem;
  color: #d7e0db;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
}

.hero-actions,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.35rem;
  color: var(--ink-950);
  background: var(--gold-soft);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, color 160ms ease, background-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
  color: var(--ink-950);
  background: var(--mist-50);
}

.button.secondary {
  color: var(--mist-50);
  background: rgba(8, 17, 15, 0.68);
  border-color: var(--border);
}

.button.secondary:hover {
  color: var(--mist-50);
  background: var(--ink-700);
}

.hero-caption {
  position: absolute;
  right: max(1.25rem, calc((100vw - var(--container)) / 2));
  bottom: 1rem;
  max-width: 20rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 0.25rem;
  color: rgba(230, 230, 217, 0.82);
  background: rgba(4, 10, 9, 0.72);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: right;
}

.section {
  position: relative;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section + .section {
  border-top: 1px solid var(--border);
}

.section-alt {
  background: rgba(15, 29, 25, 0.45);
}

.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
  align-items: end;
  margin-bottom: 2.5rem;
  gap: 2rem;
}

.section-header > :last-child {
  justify-self: end;
}

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

.card {
  position: relative;
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background:
    linear-gradient(145deg, rgba(22, 45, 38, 0.62), rgba(9, 18, 16, 0.88)),
    var(--ink-850);
}

.card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  content: "";
  background: var(--gold);
}

.card p,
.card li {
  color: var(--mist-300);
}

.card .tag {
  margin-bottom: 1rem;
}

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

.system-card {
  min-height: 15rem;
  padding: 1.45rem;
}

.system-card .number {
  display: block;
  margin-bottom: 2rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.system-card h3 {
  font-size: 1.2rem;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.75fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
}

.creator-profile {
  display: grid;
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
}

.creator-portrait {
  width: min(100%, 29rem);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 0.45rem;
  background: var(--mist-100);
  box-shadow: var(--shadow);
}

.creator-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.creator-copy {
  max-width: 46rem;
}

.identity-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--mist-500);
  font-size: 0.88rem;
}

.fact-list,
.check-list,
.plain-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.fact-list li,
.check-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.7rem;
  border-bottom: 1px solid var(--border);
  color: var(--mist-300);
}

.fact-list li::before,
.check-list li::before {
  position: absolute;
  top: 1.35rem;
  left: 0.1rem;
  width: 0.48rem;
  height: 0.48rem;
  content: "";
  transform: rotate(45deg);
  border: 1px solid var(--aether);
}

.fact-list strong,
.check-list strong {
  color: var(--mist-100);
}

.callout {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 0.45rem;
  background: rgba(11, 25, 21, 0.84);
  box-shadow: var(--shadow);
}

.callout-watermark::after {
  position: absolute;
  z-index: 0;
  right: -7rem;
  bottom: -8rem;
  width: 28rem;
  height: 28rem;
  content: "";
  opacity: 0.18;
  background: url("assets/brand/aethercell-emblem-watermark.webp") center / contain no-repeat;
  pointer-events: none;
}

.callout > * {
  position: relative;
  z-index: 1;
}

.media-preview-grid,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.media-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--ink-850);
}

.media-card figure {
  margin: 0;
}

.media-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.media-card.square img {
  aspect-ratio: 1 / 1;
}

.media-card-content {
  display: grid;
  align-content: start;
  flex: 1;
  padding: 1.25rem;
}

.media-card h3 {
  margin-bottom: 0.45rem;
}

.media-card p {
  color: var(--mist-300);
}

.media-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1rem;
  gap: 0.45rem;
}

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 8rem);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(5, 10, 9, 0.96), rgba(5, 10, 9, 0.66)),
    url("assets/brand/aethercell-emblem-watermark.webp") 94% 50% / min(42vw, 34rem) no-repeat,
    var(--ink-850);
}

.page-hero h1 {
  max-width: 58rem;
  color: var(--gold-soft);
}

.page-hero .lede {
  max-width: 48rem;
}

.definition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.definition-card {
  min-height: 20rem;
}

.definition-card.wide {
  grid-column: 1 / -1;
  min-height: auto;
}

.pullquote {
  margin: 0;
  padding: clamp(2rem, 6vw, 4rem);
  border-left: 2px solid var(--gold);
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.65rem);
  line-height: 1.35;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: 8.2rem;
  width: 1px;
  content: "";
  background: var(--border-strong);
}

.timeline-item {
  display: grid;
  grid-template-columns: 6.7rem minmax(0, 1fr);
  padding-bottom: 2.25rem;
  gap: 3rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-date {
  padding-top: 0.28rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.timeline-content {
  position: relative;
  padding: 0 0 0 0.15rem;
}

.timeline-content::before {
  position: absolute;
  top: 0.45rem;
  left: -1.55rem;
  width: 0.7rem;
  height: 0.7rem;
  content: "";
  transform: rotate(45deg);
  border: 1px solid var(--gold);
  background: var(--ink-950);
}

.timeline-content p {
  max-width: 46rem;
  color: var(--mist-300);
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 0;
  padding: 0;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--border);
}

.project-facts div {
  padding: 1.35rem;
  background: var(--ink-850);
}

.project-facts dt {
  color: var(--mist-500);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-facts dd {
  margin: 0.4rem 0 0;
  color: var(--mist-100);
  font-family: var(--serif);
  font-size: 1.25rem;
}

.video-placeholder {
  display: grid;
  min-height: 22rem;
  place-items: center;
  padding: 2rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.45rem;
  background:
    linear-gradient(rgba(5, 10, 9, 0.86), rgba(5, 10, 9, 0.86)),
    url("assets/brand/aethercell-channel-artwork-640.webp") center / cover no-repeat;
  text-align: center;
}

.video-placeholder > div {
  max-width: 34rem;
}

.draft-warning {
  margin-bottom: 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(220, 140, 114, 0.6);
  border-radius: 0.35rem;
  color: #f4d6cb;
  background: rgba(85, 31, 25, 0.34);
  font-weight: 700;
}

.legal-content h2 {
  margin-top: 2.4rem;
  font-size: 1.65rem;
}

.legal-content address {
  color: var(--mist-300);
  font-style: normal;
}

.legal-content h3 {
  margin-top: 1.8rem;
  font-family: var(--sans);
  font-size: 1.1rem;
}

.placeholder {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border: 1px dashed rgba(220, 140, 114, 0.7);
  color: #f2bba8;
  background: rgba(85, 31, 25, 0.28);
  font-family: var(--mono);
  font-size: 0.9em;
}

.error-page {
  display: grid;
  min-height: calc(100svh - 4.75rem);
  place-items: center;
  padding-block: 4rem;
}

.error-code {
  margin: 0;
  color: var(--aether);
  font-family: var(--mono);
  font-size: clamp(4.8rem, 18vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.9;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: #050908;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(10rem, 0.55fr));
  padding-block: 3.5rem;
  gap: 2rem;
}

.footer-brand {
  max-width: 27rem;
}

.footer-brand .brand-link {
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--mist-500);
}

.footer-heading {
  margin-bottom: 0.8rem;
  color: var(--mist-100);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: 0.45rem;
}

.footer-links a {
  color: var(--mist-300);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--mist-50);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  padding-block: 1.1rem;
  border-top: 1px solid var(--border);
  color: var(--mist-500);
  font-size: 0.78rem;
  gap: 1rem;
}

@media (max-width: 1020px) {
  .system-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 820px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .site-nav {
    flex: 1 1 100%;
  }

  .js .nav-toggle {
    display: flex;
  }

  .js .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    padding: 0.6rem;
    border: 1px solid var(--border);
    background: rgba(5, 10, 9, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }

  .js .site-header.nav-open .site-nav {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .js .site-header.nav-open .nav-toggle span {
    opacity: 0;
  }

  .js .site-header.nav-open .nav-toggle::before {
    transform: translateY(0.36rem) rotate(45deg);
  }

  .js .site-header.nav-open .nav-toggle::after {
    transform: translateY(-0.36rem) rotate(-45deg);
  }

  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav a {
    width: 100%;
    min-height: 3rem;
  }

  .section-header,
  .split,
  .creator-profile {
    grid-template-columns: 1fr;
  }

  .creator-portrait {
    width: min(100%, 24rem);
  }

  .section-header > :last-child {
    justify-self: start;
  }

  .project-facts {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .container,
  .narrow {
    width: min(100% - 1.5rem, var(--container));
  }

  h1 {
    font-size: clamp(2.45rem, 14vw, 4.25rem);
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-name small {
    letter-spacing: 0.08em;
  }

  .hero {
    min-height: max(620px, calc(100svh - 4.75rem));
  }

  .hero-media img {
    object-position: 58% center;
  }

  .hero-media::after {
    background:
      linear-gradient(90deg, rgba(4, 10, 9, 0.94), rgba(4, 10, 9, 0.58)),
      linear-gradient(0deg, rgba(4, 10, 9, 0.9), transparent 48%);
  }

  .hero-caption {
    position: static;
    width: fit-content;
    max-width: 100%;
    margin-top: 1rem;
    text-align: left;
  }

  .hero-actions,
  .button-row {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .card-grid,
  .system-grid,
  .media-preview-grid,
  .gallery-grid,
  .definition-grid {
    grid-template-columns: 1fr;
  }

  .definition-card.wide {
    grid-column: auto;
  }

  .system-card {
    min-height: auto;
  }

  .system-card .number {
    margin-bottom: 1rem;
  }

  .timeline::before {
    left: 0.35rem;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    padding-left: 2rem;
    gap: 0.35rem;
  }

  .timeline-date {
    text-align: left;
  }

  .timeline-content::before {
    left: -2rem;
  }

  .footer-main,
  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-main {
    display: grid;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    display: grid;
  }
}

@media (max-width: 360px) {
  .brand-link img {
    width: 2.35rem;
    height: 2.35rem;
  }

  .brand-name small {
    display: none;
  }

  .site-nav ul {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .spectrum-rail,
  .card::before,
  .eyebrow::before {
    border: 1px solid CanvasText;
  }
}

/* Public visual system: living fantasy, natural light and controlled resonance. */

:root {
  color-scheme: light;
  --paper: #fffaf0;
  --paper-warm: #f8edda;
  --sky-pale: #e8f5fb;
  --sky: #bfe3f2;
  --water: #2c8da5;
  --water-deep: #17677a;
  --night-blue: #12364f;
  --night-indigo: #26375f;
  --forest: #285a49;
  --forest-deep: #153f38;
  --moss: #607e4a;
  --sun: #d69a39;
  --sun-pale: #f2d795;
  --terracotta: #b85d3e;
  --coral: #d46370;
  --violet: #7556a4;
  --text: #193a3a;
  --text-soft: #4e6b67;
  --light-border: rgba(31, 92, 88, 0.18);
  --light-border-strong: rgba(25, 91, 105, 0.34);
  --light-shadow: 0 24px 55px rgba(32, 72, 76, 0.15);
}

html {
  background: var(--night-blue);
}

body {
  color: var(--text);
  background: var(--paper);
}

h1,
h2,
h3 {
  color: #153b42;
}

a {
  color: #126a7d;
}

a:hover {
  color: #8a432f;
}

::selection {
  color: #102f3d;
  background: #f4ca70;
}

.lede {
  color: var(--text-soft);
}

.microcopy {
  color: #647b76;
}

.eyebrow {
  color: #9a582d;
}

.site-header {
  border-bottom-color: rgba(220, 242, 242, 0.18);
  background: rgba(16, 49, 68, 0.94);
  box-shadow: 0 8px 30px rgba(13, 45, 63, 0.12);
}

.site-header .brand-link,
.site-header .site-nav a {
  color: #f7f4e9;
}

.site-header .site-nav a:hover,
.site-header .site-nav a[aria-current="page"] {
  color: #fff0b4;
  background: rgba(255, 255, 255, 0.09);
}

.nav-toggle {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.nav-toggle::before,
.nav-toggle::after,
.nav-toggle span {
  background: #fff;
}

.button {
  border-color: var(--water-deep);
  color: #fff;
  background: var(--water-deep);
  box-shadow: 0 9px 22px rgba(23, 103, 122, 0.18);
}

.button:hover {
  border-color: #0e4f5f;
  color: #fff;
  background: #0e4f5f;
}

.button.secondary {
  border-color: rgba(20, 87, 96, 0.42);
  color: #174f58;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.button.secondary:hover {
  border-color: #174f58;
  color: #103e47;
  background: #fff;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #17677a;
  font-weight: 750;
  gap: 0.45rem;
}

.section {
  position: relative;
  padding-block: clamp(4.75rem, 8vw, 7.5rem);
  color: var(--text);
  background:
    radial-gradient(circle at 8% 12%, rgba(242, 215, 149, 0.2), transparent 22rem),
    var(--paper);
}

.section-alt {
  border-block: 1px solid rgba(34, 103, 108, 0.11);
  background:
    linear-gradient(135deg, rgba(194, 231, 241, 0.72), rgba(239, 247, 231, 0.76)),
    var(--sky-pale);
}

.split-balanced {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.prose-stack > * + * {
  margin-top: 1.25rem;
}

.hero-color {
  min-height: auto;
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(252, 204, 126, 0.55), transparent 25rem),
    linear-gradient(135deg, #eef9fd 0%, #d9f0f5 48%, #f8edce 100%);
}

.hero-color::before {
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  content: "";
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--turquoise), var(--blue), var(--indigo));
}

.hero-color-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.7fr) minmax(32rem, 1.35fr);
  width: min(100% - 3rem, 1480px);
  margin-inline: auto;
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.hero-color .hero-copy {
  min-width: 0;
  max-width: 37rem;
  padding-block: 1rem;
}

.hero-color h1 {
  color: #153b57;
  font-size: clamp(3.4rem, 6.4vw, 6.8rem);
  text-shadow: none;
}

.hero-color .hero-kicker {
  color: #9f4f34;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
}

.hero-color .hero-text {
  max-width: 35rem;
  color: #365b5d;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
}

.hero-color .hero-caption {
  position: static;
  right: auto;
  bottom: auto;
  max-width: 100%;
  margin-top: 1rem;
  padding: 0;
  color: #4c6b68;
  background: transparent;
  border: 0;
  text-align: left;
}

.hero-key-art {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 80, 88, 0.24);
  border-radius: 1.35rem;
  background: var(--night-blue);
  box-shadow: 0 30px 70px rgba(26, 73, 83, 0.23);
}

.hero-key-art picture,
.hero-key-art img {
  display: block;
  width: 100%;
}

.hero-key-art img {
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  background: #9fd3ea;
}

.hero-key-art figcaption {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  color: #dcecf0;
  background: linear-gradient(90deg, #153e55, #214a68);
  font-size: 0.78rem;
  line-height: 1.35;
  gap: 1rem;
}

.hero-key-art figcaption strong {
  color: #fff0b4;
  font-weight: 750;
}

.status-bar {
  position: relative;
  z-index: 2;
  color: #d9edf0;
  background: linear-gradient(90deg, #163d55, #155f6c 52%, #25486a);
}

.status-bar-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.status-bar-inner > span {
  min-width: 0;
  padding: 1.05rem 1.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem;
}

.status-bar-inner > span:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.status-bar-inner strong {
  display: block;
  margin-bottom: 0.2rem;
  color: #fff3c4;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.85rem;
  margin-bottom: 1rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 99rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}

.status-prototype {
  color: #176d5d;
  background: #e1f5ea;
}

.status-development {
  color: #9a5425;
  background: #fff0cc;
}

.status-vision {
  color: #57498d;
  background: #eeeafb;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.activity-card {
  position: relative;
  min-height: 14.5rem;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 35px rgba(48, 99, 96, 0.08);
}

.activity-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.3rem;
  content: "";
  background: var(--water);
}

.activity-card:nth-child(7n + 1)::before { background: var(--red); }
.activity-card:nth-child(7n + 2)::before { background: var(--orange); }
.activity-card:nth-child(7n + 3)::before { background: var(--yellow); }
.activity-card:nth-child(7n + 4)::before { background: var(--green); }
.activity-card:nth-child(7n + 5)::before { background: var(--turquoise); }
.activity-card:nth-child(7n + 6)::before { background: var(--blue); }
.activity-card:nth-child(7n + 7)::before { background: var(--indigo); }

.activity-index {
  display: block;
  margin-bottom: 2.2rem;
  color: #78928d;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.activity-card p {
  color: var(--text-soft);
}

.nova-section,
.autonomy-section {
  color: #d8ebe5;
  background:
    radial-gradient(circle at 18% 48%, rgba(84, 184, 157, 0.25), transparent 25rem),
    radial-gradient(circle at 88% 10%, rgba(75, 91, 158, 0.23), transparent 28rem),
    linear-gradient(135deg, var(--forest-deep), #163f4b 58%, #24385b);
}

.nova-section h2,
.nova-section h3,
.autonomy-section h2,
.autonomy-section h3 {
  color: #fbf5df;
}

.nova-section .lede,
.autonomy-section .lede {
  color: #c7dfd9;
}

.nova-section .eyebrow,
.autonomy-section .eyebrow {
  color: #f1cb78;
}

.nova-section .status-vision,
.autonomy-section .status-vision {
  color: #e7ddff;
  background: rgba(89, 65, 132, 0.42);
}

.nova-section .text-link,
.autonomy-section .text-link {
  color: #9ee3d4;
}

.nova-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.nova-copy {
  max-width: 44rem;
}

.orbital-mark {
  position: relative;
  width: min(100%, 28rem);
  aspect-ratio: 1;
  margin-inline: auto;
  filter: drop-shadow(0 24px 35px rgba(4, 21, 23, 0.28));
}

.orbital-mark .orbit {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(151, 225, 207, 0.46);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbital-mark .orbit::before,
.orbital-mark .orbit::after {
  position: absolute;
  width: 0.8rem;
  aspect-ratio: 1;
  content: "";
  border: 2px solid rgba(255, 242, 187, 0.82);
  border-radius: 50%;
  background: #309c92;
  box-shadow: 0 0 0 0.45rem rgba(48, 156, 146, 0.13);
}

.orbital-mark .orbit::before {
  top: 12%;
  left: 14%;
}

.orbital-mark .orbit::after {
  right: 8%;
  bottom: 18%;
}

.orbit-one { width: 92%; height: 92%; }
.orbit-two { width: 66%; height: 66%; transform: translate(-50%, -50%) rotate(32deg) !important; }
.orbit-three { width: 42%; height: 42%; transform: translate(-50%, -50%) rotate(68deg) !important; }

.orbit-core {
  position: absolute;
  inset: 50%;
  width: 18%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 248, 210, 0.75);
  border-radius: 44% 56% 52% 48%;
  background:
    radial-gradient(circle at 35% 32%, #ddfff3 0 8%, transparent 9%),
    radial-gradient(circle, #58cbb6, #1d7f83 70%);
  box-shadow: 0 0 3rem rgba(91, 214, 190, 0.46);
  transform: translate(-50%, -50%);
}

.orbital-mark.compact {
  width: min(100%, 22rem);
}

.principle-list {
  display: grid;
  margin: 2rem 0;
  padding: 0;
  border-top: 1px solid rgba(218, 240, 232, 0.17);
  list-style: none;
}

.principle-list li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(218, 240, 232, 0.17);
  gap: 1rem;
}

.principle-list strong {
  color: #f2d893;
}

.principle-list span {
  color: #c1d7d2;
}

.resonance-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.resonance-wheel {
  position: relative;
  width: min(100%, 27rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(39, 105, 112, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 25%, transparent 26%),
    repeating-radial-gradient(circle, transparent 0 17%, rgba(36, 119, 124, 0.08) 18% 18.5%, transparent 19% 25%);
}

.resonance-wheel::before,
.resonance-wheel::after {
  position: absolute;
  inset: 10%;
  content: "";
  border: 1px dashed rgba(42, 107, 113, 0.2);
  border-radius: 50%;
}

.resonance-wheel::after {
  inset: 24%;
}

.resonance-node,
.resonance-center {
  position: absolute;
  width: 1.35rem;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(33, 69, 71, 0.2);
  transform: translate(-50%, -50%);
}

.node-red { top: 8%; left: 50%; background: var(--red); }
.node-orange { top: 23%; left: 83%; background: var(--orange); }
.node-yellow { top: 60%; left: 94%; background: var(--yellow); }
.node-green { top: 90%; left: 71%; background: var(--green); }
.node-turquoise { top: 90%; left: 29%; background: var(--turquoise); }
.node-blue { top: 60%; left: 6%; background: var(--blue); }
.node-indigo { top: 23%; left: 17%; background: var(--indigo); }

.resonance-center {
  top: 50%;
  left: 50%;
  width: 4.5rem;
  border-color: #fff;
  background:
    radial-gradient(circle at 36% 30%, #fff 0 7%, transparent 8%),
    linear-gradient(135deg, #73d4c3, #287f91);
  box-shadow: 0 0 0 1rem rgba(47, 153, 153, 0.09), 0 12px 25px rgba(31, 91, 93, 0.22);
}

.resonance-statement {
  color: #234d50;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.45;
}

.resonance-key {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.8rem 0;
  padding: 0;
  list-style: none;
  gap: 0.65rem;
}

.resonance-key li {
  display: flex;
  align-items: center;
  color: #476964;
  font-size: 0.82rem;
  gap: 0.5rem;
}

.swatch {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.swatch-red { background: var(--red); }
.swatch-orange { background: var(--orange); }
.swatch-yellow { background: var(--yellow); }
.swatch-green { background: var(--green); }
.swatch-turquoise { background: var(--turquoise); }
.swatch-blue { background: var(--blue); }
.swatch-indigo { background: var(--indigo); }
.swatch-clear { border: 1px solid #74918c; background: rgba(255, 255, 255, 0.72); }

.day-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgba(111, 150, 73, 0.22), transparent 20rem),
    linear-gradient(135deg, #f7e3b8, #faedd8 48%, #e7efcf);
}

.day-section::before {
  position: absolute;
  top: -12rem;
  right: -9rem;
  width: 28rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(184, 93, 62, 0.16);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(213, 154, 57, 0.05), 0 0 0 8rem rgba(96, 126, 74, 0.045);
}

.narrative-wrap {
  position: relative;
  z-index: 1;
}

.day-narrative {
  margin: 2.2rem 0 1.25rem;
  padding: 2rem 2.25rem;
  border: 1px solid rgba(140, 86, 48, 0.2);
  border-left: 0.35rem solid var(--terracotta);
  border-radius: 0.4rem 1rem 1rem 0.4rem;
  color: #415b4b;
  background: rgba(255, 253, 245, 0.76);
  box-shadow: 0 18px 42px rgba(108, 83, 52, 0.1);
}

.day-narrative p {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.6;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.pillar-card {
  position: relative;
  min-height: 19rem;
  padding: 1.75rem;
  overflow: hidden;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 16px 35px rgba(48, 91, 94, 0.08);
}

.pillar-card:nth-child(1) { border-top: 0.3rem solid var(--terracotta); }
.pillar-card:nth-child(2) { border-top: 0.3rem solid var(--violet); }
.pillar-card:nth-child(3) { border-top: 0.3rem solid var(--moss); }

.pillar-symbol {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  color: rgba(32, 94, 99, 0.1);
  font-family: var(--serif);
  font-size: 4rem;
  line-height: 1;
}

.pillar-card p {
  color: var(--text-soft);
}

.dual-ring-note {
  display: grid;
  grid-template-columns: 9rem 1fr;
  margin-top: 1.25rem;
  padding: 1.75rem;
  border-radius: 1rem;
  color: #d8e9e8;
  background: linear-gradient(110deg, #173d55, #205a67 65%, #3d4f75);
  gap: 2rem;
}

.dual-ring-note h3 {
  color: #fff1be;
}

.dual-ring-icon {
  position: relative;
  width: 7rem;
  aspect-ratio: 1;
  margin: auto;
}

.dual-ring-icon span {
  position: absolute;
  inset: 0;
  border: 0.3rem solid #e1ad50;
  border-radius: 50%;
}

.dual-ring-icon span:last-child {
  inset: 22%;
  border-color: #65c7c2;
}

.time-section {
  background:
    linear-gradient(90deg, rgba(237, 246, 222, 0.8), rgba(231, 246, 244, 0.82)),
    var(--paper);
}

.time-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--light-border);
  border-left: 1px solid var(--light-border);
}

.time-list article {
  min-height: 13rem;
  padding: 1.4rem;
  border-right: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
  background: rgba(255, 255, 255, 0.52);
}

.time-list article > span {
  display: block;
  margin-bottom: 1.2rem;
  color: #8b6b2e;
  font-family: var(--mono);
  font-size: 0.72rem;
}

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

.status-card {
  padding: 1.6rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
}

.status-card.prototype { border-top: 0.3rem solid #2c8b69; }
.status-card.development { border-top: 0.3rem solid var(--sun); }
.status-card.vision { border-top: 0.3rem solid var(--violet); }

.status-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-soft);
}

.status-card li + li {
  margin-top: 0.45rem;
}

.status-disclaimer {
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 0.25rem solid var(--sun);
  color: #536e68;
  background: rgba(255, 255, 255, 0.55);
}

.journal-section {
  color: #d9e9e8;
  background:
    radial-gradient(circle at 20% 20%, rgba(78, 167, 151, 0.2), transparent 24rem),
    linear-gradient(125deg, #193f49, #2d3c68);
}

.journal-section h2 {
  color: #fff5d4;
}

.journal-section .lede {
  color: #c8dcda;
}

.journal-section .eyebrow {
  color: #f0c36c;
}

.journal-section .button.secondary,
.open-questions .button.secondary {
  border-color: rgba(255, 255, 255, 0.44);
  color: #edf8f6;
  background: rgba(255, 255, 255, 0.08);
}

.journal-section .button.secondary:hover,
.open-questions .button.secondary:hover {
  color: #173c48;
  background: #fff;
}

.closing-section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--paper);
}

.closing-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 1.55fr);
  align-items: center;
  min-height: 22rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid rgba(20, 96, 109, 0.25);
  border-radius: 1.3rem;
  color: #dff0ef;
  background:
    radial-gradient(circle at 10% 50%, rgba(122, 215, 191, 0.3), transparent 17rem),
    linear-gradient(105deg, #175669, #2d7690 58%, #496293);
  box-shadow: var(--light-shadow);
  gap: clamp(2rem, 5vw, 5rem);
}

.closing-panel img {
  width: min(100%, 15rem);
  opacity: 0.78;
}

.closing-panel h2 {
  color: #fff7dd;
}

.closing-panel .lede {
  color: #d8eaeb;
}

.closing-panel .eyebrow {
  color: #ffdb86;
}

.closing-panel .button.secondary {
  border-color: rgba(255, 255, 255, 0.46);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.page-hero {
  padding-block: clamp(4.75rem, 9vw, 8rem);
  border-bottom: 1px solid rgba(38, 102, 109, 0.16);
  color: var(--text);
  background:
    radial-gradient(circle at 82% 18%, rgba(114, 190, 213, 0.42), transparent 25rem),
    radial-gradient(circle at 12% 0%, rgba(239, 191, 108, 0.35), transparent 20rem),
    linear-gradient(135deg, #eef8f6, #e3f1f7 60%, #f8edd8);
}

.page-hero h1 {
  color: #173e52;
}

.page-hero .lede {
  color: #456664;
}

.vision-hero {
  background:
    radial-gradient(circle at 86% 18%, rgba(95, 178, 213, 0.5), transparent 26rem),
    linear-gradient(135deg, #edf8f2, #d9edf6 55%, #f7e8ca);
}

.development-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(111, 184, 146, 0.4), transparent 23rem),
    linear-gradient(135deg, #eef7ea, #e4f2f1 58%, #f7e6c8);
}

.media-hero {
  background:
    radial-gradient(circle at 75% 20%, rgba(120, 91, 169, 0.2), transparent 22rem),
    linear-gradient(135deg, #eef7fb, #f5eada 58%, #ecedf8);
}

.about-hero {
  background:
    radial-gradient(circle at 82% 15%, rgba(219, 148, 65, 0.35), transparent 22rem),
    linear-gradient(135deg, #f1f7e9, #e0f0ed 56%, #fae8cf);
}

.legal-hero {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.project-facts {
  border-color: var(--light-border);
}

.project-facts div {
  border-color: var(--light-border);
  background: rgba(255, 255, 255, 0.52);
}

.project-facts dt {
  color: #6d796f;
}

.project-facts dd {
  color: #214d4b;
}

.section-nav {
  position: sticky;
  z-index: 60;
  top: 4.75rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(35, 101, 106, 0.18);
  background: rgba(255, 250, 240, 0.94);
  backdrop-filter: blur(16px);
}

.section-nav-inner {
  display: flex;
  min-width: max-content;
  align-items: center;
  gap: 0.2rem;
}

.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.65rem 0.8rem;
  color: #365f5c;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.section-nav a:hover {
  color: #8e4c2d;
  background: rgba(229, 188, 102, 0.13);
}

.behind-note {
  display: grid;
  margin-top: 1.8rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--light-border);
  border-left: 0.28rem solid var(--water);
  border-radius: 0.35rem 0.8rem 0.8rem 0.35rem;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.55);
  gap: 0.35rem;
}

.behind-note strong {
  color: #24575d;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shared-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.shared-rules-grid article,
.compact-card-grid article,
.time-vision-grid article {
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.65);
}

.shared-rules-grid article > span {
  display: block;
  margin-bottom: 1.3rem;
  color: #9a6830;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.mini-spectrum {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: min(100%, 24rem);
  height: 0.6rem;
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 99rem;
}

.mini-spectrum span:nth-child(1) { background: var(--red); }
.mini-spectrum span:nth-child(2) { background: var(--orange); }
.mini-spectrum span:nth-child(3) { background: var(--yellow); }
.mini-spectrum span:nth-child(4) { background: var(--green); }
.mini-spectrum span:nth-child(5) { background: var(--turquoise); }
.mini-spectrum span:nth-child(6) { background: var(--blue); }
.mini-spectrum span:nth-child(7) { background: var(--indigo); }

.combat-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
}

.dual-ring-large {
  position: relative;
  width: min(100%, 25rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 251, 248, 0.9) 0 14%, transparent 15%);
}

.dual-ring-large > span {
  position: absolute;
  inset: 4%;
  border: 0.5rem solid var(--terracotta);
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
}

.dual-ring-large .ring-magical {
  inset: 23%;
  border-color: var(--water);
  border-left-color: transparent;
  transform: rotate(38deg);
}

.dual-ring-large .ring-center {
  inset: 43%;
  border: 0;
  background: #f1c763;
  box-shadow: 0 0 0 1rem rgba(44, 141, 165, 0.11);
}

.compact-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.8rem 0 1.2rem;
  gap: 0.8rem;
}

.compact-card-grid article {
  padding: 1.2rem;
  background: #f7f4e8;
}

.compact-card-grid h3 {
  font-size: 1.18rem;
}

.compact-card-grid p {
  color: var(--text-soft);
  font-size: 0.92rem;
}

.synthesis-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--light-border);
  list-style: none;
}

.synthesis-steps li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--light-border);
  gap: 1.5rem;
}

.synthesis-steps span {
  color: #95612e;
  font-family: var(--serif);
  font-weight: 700;
}

.time-vision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.time-marker {
  display: inline-flex;
  margin-bottom: 1.5rem;
  color: #1d6470;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.consequence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.consequence-grid > article {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.68);
}

.open-questions {
  color: #d9e9e6;
  background:
    radial-gradient(circle at 75% 20%, rgba(143, 100, 181, 0.22), transparent 24rem),
    linear-gradient(120deg, #193f49, #29375e);
}

.open-questions h2 {
  color: #fff3d0;
}

.open-questions .lede {
  color: #c9ddda;
}

.open-questions .eyebrow {
  color: #f0c56e;
}

.feature-ledger {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--light-border);
  list-style: none;
}

.feature-ledger li {
  display: grid;
  grid-template-columns: minmax(9rem, 0.72fr) minmax(0, 1.28fr);
  padding: 1rem 0;
  border-bottom: 1px solid var(--light-border);
  gap: 1rem;
}

.feature-ledger strong {
  color: #1e5555;
}

.feature-ledger span {
  color: var(--text-soft);
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.focus-card {
  min-height: 15rem;
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: #fffdf7;
  box-shadow: 0 14px 35px rgba(43, 82, 82, 0.07);
}

.focus-card > span {
  display: block;
  margin-bottom: 2rem;
  color: #b36e37;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.focus-card:nth-child(2n) > span {
  color: #2a7d89;
}

.timeline-section {
  background:
    linear-gradient(105deg, rgba(243, 232, 207, 0.86), rgba(232, 245, 239, 0.9)),
    var(--paper);
}

.timeline-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: clamp(3rem, 7vw, 7rem);
}

.timeline-intro {
  position: sticky;
  top: 10rem;
}

.development-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.development-timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  padding-bottom: 2.5rem;
  gap: 1.4rem;
}

.development-timeline > li::before {
  position: absolute;
  top: 1rem;
  bottom: -1rem;
  left: 0.45rem;
  width: 1px;
  content: "";
  background: rgba(37, 109, 105, 0.28);
}

.development-timeline > li:last-child::before {
  display: none;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.35rem;
  border: 0.2rem solid #f7edda;
  border-radius: 50%;
  background: var(--water);
  box-shadow: 0 0 0 1px var(--water);
}

.development-timeline article {
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 35px rgba(51, 89, 84, 0.07);
}

.timeline-date {
  margin-bottom: 0.65rem;
  color: #9a6331;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.milestone-details {
  margin: 1.2rem 0 0;
}

.milestone-details > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  padding: 0.65rem 0;
  border-top: 1px solid var(--light-border);
  gap: 1rem;
}

.milestone-details dt {
  color: #2c6970;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.milestone-details dd {
  margin: 0;
  color: var(--text-soft);
}

.revision-list {
  display: grid;
  gap: 0.8rem;
}

.revision-list article {
  padding: 1.35rem;
  border-left: 0.3rem solid var(--terracotta);
  border-radius: 0.35rem 0.9rem 0.9rem 0.35rem;
  background: rgba(255, 255, 255, 0.6);
}

.revision-list article:nth-child(2) { border-left-color: var(--water); }
.revision-list article:nth-child(3) { border-left-color: var(--violet); }

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.method-grid article {
  padding: 1.4rem 1.2rem;
  border-top: 0.25rem solid var(--water);
  background: #f7f3e7;
}

.method-grid article > span {
  display: block;
  margin-bottom: 1.4rem;
  color: #a06b36;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.open-problems {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: linear-gradient(100deg, #e3f2ed, #edf2dd);
}

.curated-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.media-card {
  overflow: hidden;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  color: var(--text);
  background: #fffdf7;
  box-shadow: 0 16px 40px rgba(47, 87, 88, 0.09);
}

.media-card.media-feature {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  align-items: stretch;
}

.media-card.key-art-feature {
  grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 0.6fr);
  border-color: rgba(40, 119, 132, 0.32);
}

.media-card figure {
  min-height: 100%;
  margin: 0;
  background: #d2ebef;
}

.media-card figure a {
  display: block;
  height: 100%;
}

.media-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card.key-art-feature figure img,
.media-card.media-feature figure img {
  aspect-ratio: 16 / 9;
}

.media-card-content {
  padding: 1.5rem;
}

.media-card-content p {
  color: var(--text-soft);
}

.media-kicker {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  color: #8d6036;
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  gap: 0.4rem 1rem;
}

.media-details {
  margin: 1.3rem 0 0;
  border-top: 1px solid var(--light-border);
}

.media-details > div {
  display: grid;
  grid-template-columns: 4rem 1fr;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--light-border);
  gap: 0.8rem;
}

.media-details dt {
  color: #6a7772;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.media-details dd {
  margin: 0;
  color: #2b5958;
  font-size: 0.82rem;
}

.prototype-media-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(82, 154, 115, 0.2), transparent 20rem),
    linear-gradient(120deg, #edf5e5, #dff0f1);
}

.media-policy {
  padding: 1.6rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.62);
}

.media-policy .check-list {
  color: var(--text-soft);
}

.video-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(14rem, 0.75fr);
  align-items: center;
  min-height: 25rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid rgba(41, 102, 112, 0.24);
  border-radius: 1rem;
  color: #dcebea;
  background:
    radial-gradient(circle at 80% 30%, rgba(85, 179, 176, 0.24), transparent 20rem),
    linear-gradient(110deg, #173d55, #235f6d 65%, #3b4e78);
  gap: 3rem;
}

.video-panel h2 {
  color: #fff0bf;
}

.video-panel p {
  color: #c9dedd;
}

.video-panel .eyebrow {
  color: #f1c76f;
}

.video-panel .button.secondary {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.video-orbit,
.about-orbit,
.error-orbit {
  position: relative;
  width: min(100%, 17rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(190, 234, 224, 0.35);
  border-radius: 50%;
}

.video-orbit span,
.about-orbit span,
.error-orbit span {
  position: absolute;
  inset: 37%;
  border-radius: 48% 52% 43% 57%;
  background: #65c9bd;
  box-shadow: 0 0 2.5rem rgba(99, 207, 190, 0.45);
}

.video-orbit i,
.about-orbit i,
.error-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.65rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e9b958;
  transform-origin: 0 0;
}

.video-orbit i:nth-of-type(1),
.about-orbit i:nth-of-type(1),
.error-orbit i:nth-of-type(1) { transform: rotate(0deg) translate(7.8rem); }
.video-orbit i:nth-of-type(2),
.about-orbit i:nth-of-type(2),
.error-orbit i:nth-of-type(2) { transform: rotate(51deg) translate(7.8rem); background: var(--green); }
.video-orbit i:nth-of-type(3),
.about-orbit i:nth-of-type(3),
.error-orbit i:nth-of-type(3) { transform: rotate(102deg) translate(7.8rem); background: var(--turquoise); }
.video-orbit i:nth-of-type(4),
.about-orbit i:nth-of-type(4),
.error-orbit i:nth-of-type(4) { transform: rotate(153deg) translate(7.8rem); background: var(--blue); }
.video-orbit i:nth-of-type(5),
.about-orbit i:nth-of-type(5),
.error-orbit i:nth-of-type(5) { transform: rotate(204deg) translate(7.8rem); background: var(--indigo); }
.video-orbit i:nth-of-type(6),
.about-orbit i:nth-of-type(6),
.error-orbit i:nth-of-type(6) { transform: rotate(255deg) translate(7.8rem); background: var(--red); }
.video-orbit i:nth-of-type(7),
.about-orbit i:nth-of-type(7),
.error-orbit i:nth-of-type(7) { transform: rotate(306deg) translate(7.8rem); background: var(--orange); }

.creator-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.creator-portrait {
  width: min(100%, 27rem);
  margin: 0 auto;
}

.creator-portrait img {
  width: 100%;
  aspect-ratio: 1;
  border: 0.65rem solid rgba(255, 255, 255, 0.8);
  border-radius: 48% 52% 48% 52%;
  object-fit: cover;
  box-shadow: var(--light-shadow);
}

.creator-portrait figcaption {
  margin-top: 0.85rem;
  color: #5d766e;
  font-size: 0.78rem;
  text-align: center;
}

.signature {
  margin-top: 1.75rem;
  color: #8f5734;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.identity-grid article {
  padding: 1.5rem;
  border: 1px solid var(--light-border);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.66);
}

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.principles-grid article {
  padding: 1.5rem;
  border-top: 0.25rem solid var(--moss);
  background: #f7f4e8;
}

.principles-grid article:nth-child(2) { border-top-color: var(--water); }
.principles-grid article:nth-child(3) { border-top-color: var(--sun); }
.principles-grid article:nth-child(4) { border-top-color: var(--violet); }

.principles-grid article > span {
  display: block;
  margin-bottom: 1.5rem;
  color: #2c7880;
  font-size: 1.7rem;
}

.about-world-section {
  color: #d9ebe3;
  background:
    radial-gradient(circle at 25% 50%, rgba(91, 189, 154, 0.24), transparent 23rem),
    linear-gradient(115deg, #184237, #1e5d55 60%, #25456b);
}

.about-world-section h2 {
  color: #fff2c5;
}

.about-world-section .lede {
  color: #c6dfd6;
}

.about-world-section .eyebrow {
  color: #f0c46b;
}

.about-world-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.about-orbit {
  border-color: rgba(202, 239, 219, 0.36);
}

.legal-content {
  color: #365552;
}

.legal-content h2 {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--light-border);
  color: #1e5050;
}

.legal-content address {
  color: #41625e;
}

.site-footer {
  border-top: 0.35rem solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--turquoise), var(--blue), var(--indigo)) 1;
  color: #cbdedc;
  background:
    radial-gradient(circle at 12% 25%, rgba(52, 138, 128, 0.22), transparent 22rem),
    linear-gradient(115deg, #102f43, #173b55 60%, #26385f);
}

.site-footer .brand-link {
  color: #fff8e5;
}

.footer-brand p,
.site-footer .footer-bottom {
  color: #a9c3c1;
}

.footer-heading {
  color: #f3d58c;
}

.footer-links a {
  color: #c9dedd;
}

.footer-links a:hover {
  color: #fff3c5;
}

.footer-status {
  display: inline-flex;
  width: fit-content;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(141, 211, 195, 0.35);
  border-radius: 99rem;
  color: #a9ded2;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.error-page {
  position: relative;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 40%, rgba(57, 145, 170, 0.3), transparent 25rem),
    linear-gradient(130deg, #edf7ef, #e3f2f5 55%, #f8e7ca);
}

.error-page h1 {
  color: #153e52;
}

.error-code {
  color: rgba(30, 100, 110, 0.17);
}

.error-orbit {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 22rem;
  border-color: rgba(28, 105, 118, 0.2);
  transform: translateY(-50%);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slow-orbit {
  to { transform: rotate(360deg); }
}

.orbital-mark,
.video-orbit,
.about-orbit {
  animation: slow-orbit 80s linear infinite;
}

.orbital-mark .orbit-core,
.video-orbit span,
.about-orbit span {
  animation: slow-orbit 80s linear infinite reverse;
}

@media (max-width: 1080px) {
  .hero-color-grid {
    grid-template-columns: 1fr;
    width: min(100% - 3rem, 940px);
  }

  .hero-color .hero-copy {
    max-width: 44rem;
  }

  .hero-key-art {
    width: 100%;
  }

  .activity-grid,
  .focus-grid,
  .shared-rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .time-vision-grid,
  .method-grid,
  .principles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-card.media-feature,
  .media-card.key-art-feature {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  }
}

@media (max-width: 820px) {
  .js .site-nav {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(16, 49, 68, 0.99);
  }

  .split-balanced,
  .nova-layout,
  .resonance-layout,
  .combat-layout,
  .timeline-layout,
  .creator-layout,
  .about-world-grid {
    grid-template-columns: 1fr;
  }

  .orbital-mark,
  .dual-ring-large {
    width: min(75vw, 23rem);
  }

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

  .status-bar-inner > span:nth-child(2) {
    border-right: 0;
  }

  .status-bar-inner > span:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .pillar-grid,
  .status-grid {
    grid-template-columns: 1fr;
  }

  .pillar-card {
    min-height: auto;
  }

  .dual-ring-note {
    grid-template-columns: 7rem 1fr;
  }

  .time-list,
  .compact-card-grid,
  .consequence-grid,
  .identity-grid {
    grid-template-columns: 1fr;
  }

  .timeline-intro {
    position: static;
  }

  .media-card.media-feature,
  .media-card.key-art-feature {
    grid-template-columns: 1fr;
  }

  .media-card.media-feature figure,
  .media-card.key-art-feature figure {
    min-height: auto;
  }

  .video-panel {
    grid-template-columns: 1fr;
  }

  .closing-panel {
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1.65fr);
  }

  .section-nav {
    top: 4.75rem;
  }
}

@media (max-width: 640px) {
  .hero-color {
    min-height: auto;
    padding-top: 1.5rem;
  }

  .hero-color-grid {
    width: min(100% - 1.5rem, 940px);
    gap: 1.25rem;
  }

  .hero-color .hero-copy {
    padding-block: 0.5rem;
  }

  .hero-color h1 {
    font-size: clamp(2.85rem, 14vw, 4.2rem);
  }

  .hero-key-art {
    border-radius: 0.8rem;
  }

  .hero-key-art figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .status-bar-inner,
  .activity-grid,
  .focus-grid,
  .shared-rules-grid,
  .time-vision-grid,
  .method-grid,
  .principles-grid,
  .curated-gallery {
    grid-template-columns: 1fr;
  }

  .status-bar-inner > span {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 0;
    border-left: 0;
  }

  .status-bar-inner > span:first-child {
    border-top: 0;
    border-left: 0;
  }

  .section {
    padding-block: 4.25rem;
  }

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

  .resonance-wheel {
    width: min(82vw, 23rem);
  }

  .principle-list li,
  .synthesis-steps li,
  .feature-ledger li,
  .milestone-details > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .day-narrative {
    padding: 1.4rem;
  }

  .dual-ring-note,
  .closing-panel {
    grid-template-columns: 1fr;
  }

  .closing-panel img {
    width: 8rem;
  }

  .video-orbit,
  .about-orbit {
    width: min(72vw, 15rem);
  }

  .video-orbit i:nth-of-type(1),
  .about-orbit i:nth-of-type(1) { transform: rotate(0deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(2),
  .about-orbit i:nth-of-type(2) { transform: rotate(51deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(3),
  .about-orbit i:nth-of-type(3) { transform: rotate(102deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(4),
  .about-orbit i:nth-of-type(4) { transform: rotate(153deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(5),
  .about-orbit i:nth-of-type(5) { transform: rotate(204deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(6),
  .about-orbit i:nth-of-type(6) { transform: rotate(255deg) translate(min(31vw, 6.8rem)); }
  .video-orbit i:nth-of-type(7),
  .about-orbit i:nth-of-type(7) { transform: rotate(306deg) translate(min(31vw, 6.8rem)); }

  .section-nav {
    position: static;
  }

  .error-orbit {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .orbital-mark,
  .orbital-mark .orbit-core,
  .video-orbit,
  .video-orbit span,
  .about-orbit,
  .about-orbit span {
    animation: none;
  }
}

@media (forced-colors: active) {
  .hero-color::before,
  .spectrum-rail,
  .mini-spectrum {
    border: 1px solid CanvasText;
  }

  .status-label,
  .activity-card,
  .pillar-card,
  .status-card,
  .focus-card,
  .media-card {
    forced-color-adjust: auto;
  }
}