:root {
  color-scheme: dark;
  --void: oklch(3.5% 0.012 255);
  --void-raised: oklch(8% 0.025 255);
  --surface: oklch(11% 0.035 252);
  --ink: oklch(97% 0.01 88);
  --body: oklch(86% 0.01 88);
  --muted: oklch(70% 0.01 88);
  --faint: oklch(55% 0.01 88);
  --line: oklch(32% 0.01 255 / .7);
  --signal: #42e0c1;
  --signal-hot: #ff6bb7;
  --signal-pink: #ff6bb7;
  --cool: #8ee9dc;
  --isef-orange: #ef5f20;
  --isef-yellow: #ffd022;
  --isef-pink: #dd2f7d;
  --isef-blue: #2191ca;
  --isef-gradient: linear-gradient(115deg, var(--isef-orange) 0%, var(--isef-yellow) 35%, var(--isef-pink) 68%, var(--isef-blue) 100%);
  --isef-gradient-soft: linear-gradient(115deg, rgb(239 95 32 / .28) 0%, rgb(255 208 34 / .24) 35%, rgb(221 47 125 / .24) 68%, rgb(33 145 202 / .24) 100%);
  --selection-ink: var(--void);
  --header-bg: oklch(5% .025 255 / .9);
  --header-line: oklch(89% .11 67 / .16);
  --control-track-border: rgb(255 255 255 / .58);
  --control-track: rgb(255 255 255 / .16);
  --control-ring: rgb(255 255 255 / .48);
  --control-focus: rgb(255 255 255 / .22);
  --control-output: rgb(255 255 255 / .62);
  --portrait-dots: oklch(96% .02 278 / .42);
  --portrait-dot-blend: screen;
  --portrait-filter: grayscale(1) contrast(1.18) brightness(.88);
  --trajectory-stroke: rgb(255 208 34 / .28);
  --record-active: rgb(66 224 193 / .45);
  --contact-border: rgb(255 255 255 / .42);
  --contact-bg: oklch(97% .01 88 / .025);
  --input-bg: oklch(8% .04 252 / .46);
  --atlas-stroke: oklch(82% .025 275 / .16);
  --font: "Fragment Mono", "SFMono-Regular", "Cascadia Code", "Roboto Mono", monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --z-field: 0;
  --z-content: 2;
  --z-nav: 10;
}

:root[data-theme="light"] {
  color-scheme: light;
  --void: oklch(98% .006 255);
  --void-raised: oklch(93.5% .012 252);
  --surface: oklch(91% .018 252);
  --ink: oklch(17% .025 255);
  --body: oklch(28% .02 255);
  --muted: oklch(38% .018 255);
  --faint: oklch(47% .015 255);
  --line: oklch(78% .015 255 / .88);
  --signal: #007d6b;
  --signal-hot: #c52672;
  --signal-pink: #c52672;
  --cool: #087e89;
  --selection-ink: oklch(12% .02 255);
  --header-bg: oklch(98% .006 255 / .92);
  --header-line: oklch(20% .02 255 / .14);
  --control-track-border: oklch(34% .02 255 / .58);
  --control-track: oklch(34% .02 255 / .14);
  --control-ring: oklch(34% .02 255 / .35);
  --control-focus: oklch(34% .02 255 / .18);
  --control-output: oklch(34% .02 255 / .78);
  --portrait-dots: oklch(22% .025 255 / .34);
  --portrait-dot-blend: multiply;
  --portrait-filter: grayscale(1) contrast(1.12) brightness(.98);
  --trajectory-stroke: rgb(174 127 0 / .32);
  --record-active: rgb(0 125 107 / .48);
  --contact-border: oklch(28% .02 255 / .34);
  --contact-bg: oklch(100% 0 0 / .62);
  --input-bg: oklch(94.5% .012 252 / .82);
  --atlas-stroke: oklch(28% .025 255 / .18);
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--void);
}

#overview,
#contact { scroll-margin-top: 5.25rem; }

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea { font: inherit; }

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

a { color: inherit; }

::selection {
  background: var(--isef-pink);
  color: var(--selection-ink);
}

.wordmark span,
.version-link span,
.overview-intro > div > p,
.about-heading > p,
.contact-copy > p:first-child,
.atlas-heading > p,
.field-instructions p span,
.atlas-instruction span,
.record h3 a span,
.site-footer a:hover,
.site-footer a:focus-visible,
.hero-links a:hover,
.hero-links a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
.record-links a:hover,
.record-links a:focus-visible {
  color: var(--ink);
}

.ambient-field {
  position: fixed;
  z-index: var(--z-field);
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#halftone-canvas {
  /* The field is a viewport overlay; it must not inherit document scrolling. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#halftone-canvas { opacity: .94; }
.atlas-page #halftone-canvas { opacity: .72; }

.skip-link {
  position: fixed;
  z-index: 30;
  top: 1rem;
  left: 1rem;
  transform: translateY(-180%);
  padding: .7rem 1rem;
  background: var(--ink);
  color: var(--void);
  text-decoration: none;
  transition: transform .2s var(--ease);
}

.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: var(--z-nav);
  top: 0;
  left: 0;
  right: 0;
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: clamp(1.1rem, 4.5vw, 4.5rem);
  border-bottom: 1px solid transparent;
  background: oklch(5% .025 255 / 0);
  transition: background-color .3s, border-color .3s;
}

.site-header.is-scrolled {
  border-color: var(--header-line);
  background: var(--header-bg);
}

.wordmark {
  justify-self: start;
  font-size: .78rem;
  letter-spacing: .08em;
  text-decoration: none;
}

.wordmark span { color: var(--signal); }

.site-header > p {
  margin: 0;
  color: var(--faint);
  font-size: .57rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-header nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2.1vw, 2.2rem);
}

.site-header nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: .61rem;
  text-decoration: none;
  transition: color .2s;
}

.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--signal-hot); }
.site-header nav a:focus-visible { outline: 1px solid var(--signal); outline-offset: .35rem; }
.site-header .version-link { color: var(--ink); }
.version-link span { margin-left: .35rem; color: var(--signal); }

.nav-tools {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.dot-control {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  margin-left: .15rem;
  padding-left: clamp(.7rem, 2.1vw, 2.2rem);
  border-left: 1px solid var(--line);
}

.dot-control input {
  width: clamp(3.8rem, 6vw, 5.5rem);
  height: 1.25rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.dot-control input::-webkit-slider-runnable-track {
  height: 2px;
  border: 1px solid var(--control-track-border);
  border-radius: 999px;
  background: var(--control-track);
}

.dot-control input::-moz-range-track {
  height: 2px;
  border: 1px solid var(--control-track-border);
  border-radius: 999px;
  background: var(--control-track);
}

.dot-control input::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  margin-top: -5px;
  border: 1px solid var(--void);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--control-ring);
  -webkit-appearance: none;
}

.dot-control input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 1px solid var(--void);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--control-ring);
}

.dot-control input:focus-visible {
  outline: none;
}

.dot-control input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--control-focus), 0 0 0 1px var(--ink);
}

.dot-control input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--control-focus), 0 0 0 1px var(--ink);
}

.dot-control output {
  min-width: 2.2rem;
  color: var(--control-output);
  font-size: .5rem;
  letter-spacing: .03em;
}

.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s, background-color .25s var(--ease);
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .2s, background-color .25s var(--ease), transform .35s var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--ink); }
.theme-toggle:hover::before { background: var(--void-raised); border-color: var(--faint); transform: rotate(18deg); }
.theme-toggle:focus-visible { outline: 1px solid var(--signal); outline-offset: .15rem; }

.theme-icon {
  position: absolute;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .22s, transform .35s var(--ease);
}

.theme-icon-moon { opacity: 0; transform: rotate(-35deg) scale(.65); }
:root[data-theme="light"] .theme-icon-sun { opacity: 0; transform: rotate(35deg) scale(.65); }
:root[data-theme="light"] .theme-icon-moon { opacity: 1; transform: none; }

main,
.site-footer {
  position: relative;
  z-index: var(--z-content);
}

.copy-surface {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative;
  min-height: 62svh;
  display: grid;
  align-items: start;
  padding: clamp(5.8rem, 10vh, 7rem) clamp(1.1rem, 4.5vw, 4.5rem) clamp(3rem, 6vh, 4rem);
}

.hero-copy {
  width: min(52rem, 100%);
  margin-top: clamp(.75rem, 3vh, 2rem);
}

/*
 * Keep the rest of the page at its normal reading scale while giving the
 * opening composition the room it has at roughly 80% browser zoom. A
 * transform changes only the hero's visual scale; navigation and overview
 * records retain their intentional size and hit areas.
 */
@media (min-width: 701px) {
  .hero-copy {
    transform: scale(.8);
    transform-origin: top left;
    width: min(65rem, 125%);
  }
}

.hero-identity {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.4rem, 3.8vw, 3.2rem);
}

.hero-portrait {
  position: relative;
  flex: 0 0 clamp(7rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  margin: 0 0 .3rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--void);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}

.hero-portrait::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: url("images/pfps/monishMainPFP2.webp") center / cover no-repeat;
  opacity: 0;
  filter: saturate(1.8) contrast(1.2) brightness(1.04);
  transition: opacity .2s ease;
  clip-path: circle(3.2rem at var(--pointer-x, 50%) var(--pointer-y, 50%));
  -webkit-mask-image: radial-gradient(circle, #000 0 .72px, transparent .98px);
  mask-image: radial-gradient(circle, #000 0 .72px, transparent .98px);
  -webkit-mask-size: 3px 3px;
  mask-size: 3px 3px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

.hero-portrait::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--portrait-dots) 0 1px, transparent 1.2px);
  background-size: 3px 3px;
  mix-blend-mode: var(--portrait-dot-blend);
  opacity: .5;
  transition: opacity .25s ease;
}

.hero-portrait:hover::before,
.hero-portrait:focus-within::before {
  opacity: 1;
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--portrait-filter);
  mix-blend-mode: luminosity;
  transition: transform .22s var(--ease);
}

.hero-portrait:hover img,
.hero-portrait:focus-within img {
  transform: scale(1.08);
}

.current-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.55rem;
  color: var(--muted);
  font-size: .65rem;
}

.current-line i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--ink);
}

.hero h1,
.atlas-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 6.1vw, 5.9rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .96;
  text-wrap: balance;
}

.hero-thesis,
.atlas-identity > p {
  max-width: 66ch;
  margin: 2rem 0 0;
  color: var(--body);
  font-size: clamp(.86rem, 1.12vw, 1.04rem);
  line-height: 1.78;
  text-wrap: pretty;
}

.hero-links,
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  margin-top: 2.2rem;
}

.hero-links a,
.contact-links a,
.record-links a {
  color: var(--muted);
  font-size: .63rem;
  text-decoration: none;
  transition: color .2s;
}

/* The hero itself is deliberately scaled down on desktop, so its social
   links get a modest compensating increase without affecting the rest. */
.hero-links a { font-size: .78rem; }

.hero-links a:hover,
.hero-links a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
.record-links a:hover,
.record-links a:focus-visible { color: var(--signal); }

.hero-links a:focus-visible,
.contact-links a:focus-visible,
.record-links a:focus-visible { outline: 1px solid var(--signal); outline-offset: .3rem; }

.field-instructions {
  align-self: end;
  justify-self: end;
  width: min(23rem, 100%);
  margin-bottom: clamp(1rem, 5vh, 4rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.field-instructions p {
  margin: 0;
  font-size: .62rem;
  line-height: 1.9;
}

.field-instructions p span {
  display: inline-block;
  margin-right: .9rem;
  color: var(--signal);
}

.field-instructions div {
  display: flex;
  gap: 1rem;
  margin-top: .85rem;
}

.field-instructions button,
.atlas-instruction button {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--faint);
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-size: .56rem;
}

.field-instructions button:hover,
.field-instructions button:focus-visible,
.atlas-instruction button:hover,
.atlas-instruction button:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
  outline: none;
}

.scroll-cue {
  position: absolute;
  left: clamp(1.1rem, 4.5vw, 4.5rem);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--faint);
  font-size: .55rem;
  text-decoration: none;
}

.scroll-cue i {
  width: 3.2rem;
  height: 1px;
  overflow: hidden;
  background: var(--line);
}

.scroll-cue i::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  background: var(--ink);
  animation: scanLine 2.8s var(--ease) infinite;
}

@keyframes scanLine {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(270%); }
}

.overview {
  min-height: 0;
  overflow-x: clip;
  padding: clamp(1.2rem, 2.2vh, 2rem) clamp(1.1rem, 4.5vw, 4.5rem) clamp(4.5rem, 7vh, 6rem);
}

.overview-intro {
  max-width: 82rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.4vw, 3.6rem);
  align-items: end;
  margin: 0 auto clamp(2rem, 3.5vh, 3rem);
}

.overview-intro > div > p,
.about-heading > p,
.contact-copy > p:first-child,
.atlas-heading > p {
  margin: 0 0 1.1rem;
  color: var(--signal);
  font-size: .58rem;
}

.overview-intro > div {
  grid-column: 1;
  display: grid;
  gap: 0;
}

.overview h2,
.about-band h2,
.contact h2,
.atlas-heading h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-wrap: balance;
}

.overview h2 { font-size: clamp(2.2rem, 3.6vw, 3.8rem); }

.overview-intro > p {
  grid-column: 2 / -1;
  max-width: none;
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.trajectory {
  position: relative;
  width: min(82rem, 100%);
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem clamp(1.8rem, 3.4vw, 3.6rem);
  margin: 0 auto;
}

.trajectory-line {
  display: none;
}

.trajectory-line path {
  fill: none;
  stroke: var(--trajectory-stroke);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
}

.record {
  --record-shift: 0;
  position: relative;
  z-index: 1;
  width: auto;
  min-height: 8rem;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(6rem, .75fr);
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: .9rem 0 1.05rem;
  border-top: 1px solid var(--line);
  transition: transform .2s var(--ease), border-color .14s;
}

.record + .record { margin-top: 0; }
.record-left,
.record-right { margin: 0; transform: none; }
.record:nth-of-type(2) { --record-shift: .8rem; }
.record:nth-of-type(3) { --record-shift: 1.6rem; }
.record:nth-of-type(4) { --record-shift: 0rem; }
.record:nth-of-type(5) { --record-shift: 1rem; }
.record:nth-of-type(6) { --record-shift: 1.8rem; }
.record:nth-of-type(7) { --record-shift: .4rem; }

.record::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--signal-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}

.record:hover,
.record:focus-within,
.record.is-active { border-color: var(--record-active); }
.record:hover::after,
.record:focus-within::after,
.record.is-active::after { transform: scaleX(1); }
.record-left:hover,
.record-left:focus-within,
.record-left.is-active { transform: translateY(-.25rem); }
.record-right:hover,
.record-right:focus-within,
.record-right.is-active { transform: translateY(-.25rem); }

.current-orbit {
  position: absolute;
  z-index: -1;
  inset: -.8rem;
  width: calc(100% + 1.6rem);
  height: calc(100% + 1.6rem);
  overflow: visible;
  pointer-events: none;
  opacity: .72;
}

.current-orbit rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.2;
  stroke-dasharray: 1 11;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: orbitSignal 8s linear infinite;
}

@keyframes orbitSignal {
  to { stroke-dashoffset: -72; }
}

.record-topline {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--faint);
  padding-right: 0;
  font-size: .62rem;
}

.record-topline span { color: var(--cool); }
.record h3 {
  grid-column: 1 / -1;
  margin: .9rem 0 .55rem;
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.16;
  text-wrap: balance;
}

.record h3 a { text-decoration: none; }
.record h3 a span { display: inline-block; color: var(--signal); font-size: .65em; opacity: 0; transform: translateX(0); transition: opacity .12s, transform .2s var(--ease); }
.record:hover h3 a span,
.record:focus-within h3 a span { opacity: 1; transform: translateX(.3rem); }
.record h3 a:focus-visible { outline: 1px solid var(--signal); outline-offset: .4rem; }

.record > p {
  grid-column: 1 / -1;
  max-width: 54ch;
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.record-links {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
}

.record--with-links > p {
  grid-column: 1;
  min-width: 0;
}

.about-band {
  width: min(82rem, calc(100% - 2.2rem));
  min-height: 58svh;
  display: grid;
  grid-template-columns: .8fr 1.1fr;
  gap: clamp(3rem, 12vw, 12rem);
  align-items: center;
  margin: 0 auto;
  padding-block: clamp(6rem, 14vh, 11rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-copy {
  max-width: 58ch;
  color: var(--body);
  font-size: clamp(.86rem, 1.1vw, 1rem);
}

.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 1.6rem; color: var(--muted); }

.contact {
  width: min(82rem, calc(100% - 2.2rem));
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(17rem, .82fr) minmax(20rem, 1.1fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5.5rem) clamp(1.25rem, 3.2vw, 3.5rem);
  border: 1px dotted var(--contact-border);
  background: var(--contact-bg);
}

.contact-copy > p:not(:first-child) {
  max-width: 50ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.contact-form { display: grid; gap: 1.1rem; }

.contact-form label {
  color: var(--muted);
  font-size: .57rem;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: var(--input-bg);
  color: var(--ink);
  font-size: .82rem;
  resize: vertical;
  transition: border-color .2s, background-color .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ink);
  background: var(--void-raised);
}

.contact-form button {
  justify-self: stretch;
  min-height: 3.2rem;
  margin-top: .45rem;
  border: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--void);
  cursor: pointer;
  font-weight: 400;
  transition: background-color .38s var(--ease), color .28s var(--ease);
}

.contact-form button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, var(--signal) 0%, oklch(79% .16 230) 44%, var(--signal-hot) 100%);
  background-size: 180% 100%;
  background-position: 100% 0;
  -webkit-mask-image: radial-gradient(circle, #000 0 1.25px, transparent 1.5px);
  -webkit-mask-size: 10px 10px;
  -webkit-mask-repeat: repeat;
  mask-image: radial-gradient(circle, #000 0 1.25px, transparent 1.5px);
  mask-size: 10px 10px;
  mask-repeat: repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .34s var(--ease), transform .48s var(--ease), background-position .7s var(--ease);
}

.contact-form button > span { position: relative; z-index: 1; }
.contact-form button .button-arrow { display: inline-block; transition: transform .35s var(--ease); }

.contact-form button:hover,
.contact-form button:focus-visible {
  background: var(--void-raised);
  color: var(--ink);
}

.contact-form button:hover::before,
.contact-form button:focus-visible::before {
  background-position: 0 0;
  opacity: 1;
  transform: scale(1);
}

.contact-form button:hover .button-arrow,
.contact-form button:focus-visible .button-arrow { transform: translateX(.6rem); }
.contact-form button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .contact-form button,
  .contact-form button::before,
  .contact-form button .button-arrow { transition: none; }
}

.site-footer {
  min-height: 5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-inline: clamp(1.1rem, 4.5vw, 4.5rem);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .52rem;
}

.site-footer a { justify-self: end; color: var(--muted); text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--signal); }

/* Alternate: a quieter, spatial field rather than the main trajectory. */
.atlas-hero {
  min-height: 78svh;
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(14rem, 1fr);
  align-items: center;
  padding: clamp(8rem, 18vh, 13rem) clamp(1.1rem, 5vw, 5.5rem) 5rem;
}

.atlas-identity { max-width: 43rem; }
.atlas-hero h1 { font-size: clamp(2.8rem, 5vw, 5.1rem); }
.atlas-instruction {
  align-self: end;
  justify-self: end;
  margin-bottom: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .58rem;
}
.atlas-instruction span { color: var(--signal); }
.atlas-instruction p { margin: .6rem 0 .3rem; }

.atlas {
  position: relative;
  width: min(88rem, calc(100% - 2.2rem));
  min-height: 82rem;
  margin: 0 auto;
  padding: 7rem 0;
  border-top: 1px solid var(--line);
}

.atlas-heading { max-width: 44rem; }
.atlas-heading h2 { font-size: clamp(2rem, 3.7vw, 4rem); }

.atlas-lines {
  position: absolute;
  top: 17rem;
  left: 0;
  width: 100%;
  height: 58rem;
  overflow: visible;
}

.atlas-lines path {
  fill: none;
  stroke: var(--atlas-stroke);
  stroke-width: 1;
  stroke-dasharray: 1 8;
  vector-effect: non-scaling-stroke;
}

.atlas-records {
  position: relative;
  min-height: 60rem;
  margin-top: 5rem;
}

.atlas-record {
  position: absolute;
  width: min(24rem, 31vw);
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .25s, opacity .25s;
}

.atlas-record::before {
  content: "";
  position: absolute;
  top: -.28rem;
  left: 0;
  width: .48rem;
  height: .48rem;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: var(--void);
  transition: background-color .2s, box-shadow .2s, transform .4s var(--ease);
}

.atlas-record:hover,
.atlas-record:focus-within,
.atlas-record.is-active {
  z-index: 2;
  border-color: var(--signal);
  transform: translateY(-.45rem);
}

.atlas-record:hover::before,
.atlas-record:focus-within::before,
.atlas-record.is-active::before {
  background: var(--signal-hot);
  transform: scale(1.4);
}

.atlas-record > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--faint);
  font-size: .5rem;
}

.atlas-record > div span { color: var(--cool); }
.atlas-record h3 { margin: 1rem 0 .55rem; font-size: clamp(1rem, 1.6vw, 1.45rem); font-weight: 400; line-height: 1.3; }
.atlas-record h3 a,
.atlas-record p a { text-decoration: none; }
.atlas-record h3 a:hover,
.atlas-record h3 a:focus-visible,
.atlas-record p a:hover,
.atlas-record p a:focus-visible { color: var(--signal); }
.atlas-record p { margin: 0; color: var(--muted); font-size: .62rem; }

.atlas-a { left: 4%; top: 2rem; }
.atlas-b { right: 3%; top: 6rem; }
.atlas-c { left: 13%; top: 19rem; }
.atlas-d { right: 12%; top: 23rem; }
.atlas-e { left: 4%; top: 38rem; }
.atlas-f { right: 4%; top: 42rem; }
.atlas-g { left: 39%; top: 54rem; }

.atlas-contact { border-top: 1px solid var(--line); }

.wordmark span,
.version-link span,
.overview-intro > div > p,
.about-heading > p,
.contact-copy > p:first-child,
.atlas-heading > p,
.field-instructions p span,
.atlas-instruction span,
.record h3 a span,
.record-topline span,
.atlas-record > div span,
.site-footer a:hover,
.site-footer a:focus-visible,
.hero-links a:hover,
.hero-links a:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible,
.record-links a:hover,
.record-links a:focus-visible,
.atlas-record h3 a:hover,
.atlas-record h3 a:focus-visible,
.atlas-record p a:hover,
.atlas-record p a:focus-visible {
  color: var(--ink);
}

@media (min-width: 800px) {
  .hero { grid-template-columns: minmax(22rem, 1fr) minmax(18rem, .72fr); gap: 3rem; }
}

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header > p { display: none; }
  .site-header nav a:not(.version-link):nth-child(2) { display: none; }
  .about-band,
  .contact,
  .atlas-hero { grid-template-columns: 1fr; }
  .field-instructions { justify-self: start; margin-top: 3rem; }
  .about-band,
  .contact { gap: 3.5rem; }
  .atlas-instruction { justify-self: start; }
  .atlas-record { width: min(23rem, 39vw); }
  .atlas-g { left: 32%; }
  .trajectory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-intro > p { grid-column: 2; }
}

@media (max-width: 700px) {
  .site-header {
    min-height: 4rem;
    display: flex;
    justify-content: space-between;
    padding-inline: 1rem;
  }
  .site-header nav { gap: .8rem; }
  .site-header nav a { font-size: .7rem; }
  .site-header nav a:nth-child(2) { display: none; }
  .dot-control { display: none; }
  .ambient-field { opacity: .72; }
  .hero { min-height: 31rem; display: block; padding: 6.4rem 1.1rem 2.1rem; }
  .hero h1 { min-width: 0; font-size: clamp(2.9rem, 12vw, 4.3rem); }
  .hero-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(4.75rem, 20vw, 6rem);
    gap: .85rem;
  }
  .hero-portrait { width: 100%; margin-bottom: .15rem; }
  .hero-portrait::before,
  .hero-portrait::after { display: none; }
  .hero-thesis { max-width: 45ch; font-size: .82rem; }
  .hero-links,
  .contact-links,
  .record-links { gap: .2rem 1rem; }
  .hero-links a,
  .contact-links a,
  .record-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: .72rem;
  }
  .scroll-cue { left: 1.1rem; }
  .overview { padding: 2.1rem 1.1rem 4rem; }
  .overview-intro { display: block; margin-bottom: 2.5rem; }
  .overview-intro > p { margin-top: 1.7rem; }
  .trajectory { min-height: auto; grid-template-columns: 1fr; gap: 0; padding-left: 1.25rem; }
  .trajectory-line { left: .2rem; width: .8rem; }
  .record,
  .record-left,
  .record-right,
  .record-left:hover,
  .record-left:focus-within,
  .record-left.is-active,
  .record-right:hover,
  .record-right:focus-within,
  .record-right.is-active {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 1.15rem 0 1.65rem 1rem;
    transform: none;
  }
  .record { display: block; }
  .record + .record { margin-top: 0; }
  .record h3 { font-size: 1.18rem; }
  .record h3 a span { opacity: 1; }
  .record-topline { padding-right: 0; font-size: .68rem; }
  .record > p { font-size: .76rem; line-height: 1.72; }
  .record-links { margin-top: .3rem; }
  .current-orbit {
    inset: .35rem -.4rem .55rem .25rem;
    width: calc(100% + .15rem);
    height: calc(100% - .9rem);
    opacity: .62;
  }
  .about-band,
  .contact { width: calc(100% - 2.2rem); min-height: auto; padding: 3.5rem 1.2rem; }
  .contact h2,
  .about-band h2 { font-size: clamp(2rem, 10vw, 3.2rem); }
  .contact-copy > p:not(:first-child) { font-size: .82rem; line-height: 1.72; }
  .contact-form { gap: 1.35rem; }
  .contact-form label { font-size: .68rem; }
  .contact-form input,
  .contact-form textarea { min-height: 2.9rem; font-size: 1rem; }
  .contact-form button { min-height: 3.45rem; font-size: .82rem; }
  .site-footer { grid-template-columns: 1fr auto; min-height: 6rem; }
  .site-footer { font-size: .62rem; }
  .site-footer span:nth-child(2) { display: none; }

  .atlas-hero { min-height: 42rem; display: block; padding: 8rem 1.1rem 5rem; }
  .atlas-hero h1 { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .atlas-instruction { margin-top: 5rem; }
  .atlas { min-height: auto; padding-block: 5rem; }
  .atlas-heading { padding-inline: .1rem; }
  .atlas-lines { display: none; }
  .atlas-records { min-height: 0; display: grid; gap: 2.4rem; margin-top: 4rem; padding-left: 1rem; }
  .atlas-record,
  .atlas-a,
  .atlas-b,
  .atlas-c,
  .atlas-d,
  .atlas-e,
  .atlas-f,
  .atlas-g {
    position: relative;
    inset: auto;
    width: 100%;
  }
}

@media (pointer: coarse) {
  .field-instructions button,
  .atlas-instruction button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .ambient-field,
  .field-instructions,
  .scroll-cue,
  .version-link { display: none; }
  body { background: #fff; color: #111; }
  .site-header { position: static; }
  .hero,
  .overview,
  .about-band,
  .contact { min-height: auto; }
}