:root {
  --ink: #f4f1e9;
  --muted: #b8b7b2;
  --dim: #8e9296;
  --void: #020304;
  --glass: rgba(4, 7, 9, .82);
  --line: rgba(238, 240, 235, .21);
  --faint-line: rgba(238, 240, 235, .09);
  --teal: #59ead4;
  --violet: #9b7cff;
  --gold: #e8bc65;
  --display: 'Unbounded', sans-serif;
  --mono: 'Space Mono', monospace;
  --pad: clamp(1rem, 3.1vw, 3.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--void);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.7;
  overflow-x: clip;
  font-variant-numeric: lining-nums tabular-nums;
  font-optical-sizing: auto;
  scrollbar-color: rgba(89, 234, 212, .62) #020304;
  scrollbar-width: thin;
}
::selection { color: var(--void); background: var(--teal); }
::-webkit-scrollbar { width: 9px; background: #020304; }
::-webkit-scrollbar-thumb { border: 3px solid #020304; border-radius: 99px; background: linear-gradient(var(--teal), var(--violet), var(--gold)); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(2, 3, 4, .82);
}

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -6rem;
  padding: .85rem 1rem;
  background: var(--ink);
  color: var(--void);
}
.skip-link:focus { top: 1rem; }

.void {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at 58% 46%, #081416 0, #030607 42%, #020304 76%);
  pointer-events: none;
}
#fractal {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  filter: saturate(1.1) contrast(1.08);
  animation: canvas-in 2.2s .1s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes canvas-in { to { opacity: 1; } }
.spectral-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(89, 234, 212, .1), transparent 23%),
    radial-gradient(circle at 12% 72%, rgba(155, 124, 255, .09), transparent 27%),
    linear-gradient(115deg, transparent 35%, rgba(232, 188, 101, .035), transparent 64%);
  mix-blend-mode: screen;
}
.depth-grid {
  position: absolute;
  inset: 0;
  opacity: .26;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.edge-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .12) 65%, rgba(0, 0, 0, .65) 112%);
}
.grain {
  position: absolute;
  inset: -45%;
  opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  animation: grain 2.4s steps(3) infinite;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  33% { transform: translate3d(1.5%, -1%, 0); }
  66% { transform: translate3d(-1%, 1.5%, 0); }
}
.reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  opacity: .55;
  transition: width .8s cubic-bezier(.16, 1, .3, 1), height .8s cubic-bezier(.16, 1, .3, 1);
}
.reticle::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(89, 234, 212, .1);
}
.reticle span { position: absolute; background: rgba(255, 255, 255, .38); }
.reticle span:first-child { width: 100%; height: 1px; top: 50%; }
.reticle span:last-child { height: 100%; width: 1px; left: 50%; }

.accession-echo {
  position: fixed;
  z-index: 1;
  inset: 76px 0 0;
  display: grid;
  place-content: center;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  text-align: center;
  transform: scale(.985);
  transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.accession-echo::before {
  content: "";
  position: absolute;
  inset: 20% -10%;
  background: linear-gradient(90deg, transparent 8%, rgba(2, 3, 4, .82) 28%, rgba(7, 13, 15, .72) 50%, rgba(2, 3, 4, .82) 72%, transparent 92%);
  border-top: 1px solid rgba(89, 234, 212, .16);
  border-bottom: 1px solid rgba(232, 188, 101, .12);
  transform: skewY(-3deg) scaleY(.68);
}
.accession-echo::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), var(--violet), var(--gold), transparent);
  box-shadow: 0 0 34px rgba(89, 234, 212, .38);
  transform: scaleX(0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.accession-echo > * { position: relative; z-index: 1; }
.echo-index, .accession-echo i {
  color: var(--gold);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .2em;
}
.echo-name {
  max-width: 96vw;
  margin: .15em 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 233, .2);
  font: 260 clamp(5rem, 15vw, 15rem)/.84 var(--display);
  letter-spacing: -.08em;
  text-wrap: balance;
}
.accession-echo i { color: var(--teal); }
.accession-echo.is-active { opacity: 1; transform: none; }
.accession-echo.is-active::after { transform: scaleX(1); }
body.inspecting-work .reticle { width: 92px!important; height: 92px!important; opacity: .9; }
body.inspecting-work .spectral-wash { opacity: .72; }

.masthead {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(2, 3, 4, .94), rgba(2, 3, 4, .38));
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  animation: masthead-in 1s .05s both cubic-bezier(.16, 1, .3, 1);
}
@keyframes masthead-in { from { opacity: 0; transform: translateY(-18px); } }
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 550;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal);
  font-size: 13px;
  box-shadow: 0 0 26px rgba(89, 234, 212, .25), inset 0 0 14px rgba(89, 234, 212, .06);
  transition: color .35s, border-color .35s, transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.brand:hover .brand-mark { color: var(--void); border-color: var(--ink); background: var(--teal); transform: rotate(1turn); box-shadow: 0 0 34px rgba(89, 234, 212, .45); }
.masthead nav { display: flex; gap: 2rem; }
.masthead nav a, footer nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.masthead nav a::after, footer nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--gold));
  transition: right .4s cubic-bezier(.16, 1, .3, 1);
}
.masthead nav a:hover::after, footer nav a:hover::after { right: 0; }
.depth {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
}
.depth span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depth b { color: var(--gold); font-weight: 400; min-width: 49px; }

.equation-rail {
  position: fixed;
  z-index: 25;
  right: 14px;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateY(-45%);
  transition: opacity .35s, transform .35s;
}
.rail-equation {
  margin: 0 8px 9px 0;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .14em;
}
.equation-rail a {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  color: var(--dim);
}
.equation-rail a span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--faint-line);
  border-radius: 50%;
  background: rgba(2, 3, 4, .58);
  font-size: 8px;
  transition: color .35s, border-color .35s, box-shadow .35s, transform .35s;
}
.equation-rail a b {
  opacity: 0;
  color: var(--ink);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: translateX(8px);
  transition: opacity .3s, transform .3s;
}
.equation-rail a:hover b, .equation-rail a:focus-visible b { opacity: 1; transform: none; }
.equation-rail a.is-current span {
  color: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 22px rgba(89, 234, 212, .27);
  transform: scale(1.08);
}
body.at-end .equation-rail { opacity: 0; pointer-events: none; transform: translateY(-40%); }

main, footer { position: relative; z-index: 2; }
.chapter {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 156vh;
  padding: 120px max(5rem, var(--pad)) 100px var(--pad);
}
.chapter[data-bookmark="0"] { min-height: 122vh; }
.kicker {
  margin: 0 0 1.3rem;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.kicker span { color: var(--teal); }
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 380;
  line-height: .92;
  letter-spacing: -.067em;
  text-wrap: balance;
}
h1 i, h2 i, .title-outline {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 233, .68);
}
h2 { font-size: clamp(2.6rem, 5.25vw, 6.2rem); }

.threshold { align-items: flex-end; }
.threshold-copy { width: min(1120px, 89vw); padding-bottom: 9vh; }
.threshold-copy h1 { font-size: clamp(4rem, 9.4vw, 9rem); }
.threshold-copy h1 span { display: block; width: max-content; max-width: 100%; }
.title-outline { margin: -.07em 0 0 13%; }
.threshold .kicker { width: max-content; border-bottom: 1px solid rgba(89, 234, 212, .45); padding-bottom: .65rem; }
.lede {
  max-width: 630px;
  margin: 2.1rem 0 0 20%;
  padding-left: 1.4rem;
  border-left: 1px solid var(--violet);
  color: #d8d6d0;
  font-size: clamp(.93rem, 1.15vw, 1.08rem);
  text-wrap: pretty;
}
.enter {
  width: 242px;
  min-height: 58px;
  margin: 2.5rem 0 0 20%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .14em;
  transition: color .35s, padding .55s cubic-bezier(.16, 1, .3, 1), border-color .35s;
}
.enter b { color: var(--teal); font-size: 20px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.enter:hover { padding-inline: .7rem; color: var(--teal); border-color: rgba(89, 234, 212, .58); }
.enter:hover b { transform: translateY(6px); }
.threshold-note {
  position: absolute;
  right: max(5rem, var(--pad));
  bottom: 9vh;
  width: 295px;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-top-color: var(--gold);
  background: rgba(2, 4, 5, .76);
  backdrop-filter: blur(13px);
  color: var(--muted);
  font-size: 10px;
}
.threshold-note span { color: var(--gold); font-size: 9px; letter-spacing: .14em; }
.threshold-note p { margin: .8rem 0 0; }
.hero-coordinate {
  position: absolute;
  right: max(5rem, var(--pad));
  top: 19vh;
  display: flex;
  gap: 1.2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--teal);
  color: var(--dim);
  font-size: 8px;
  letter-spacing: .12em;
}
.hero-coordinate b { color: var(--teal); font-weight: 400; line-height: 1.65; }
.orbit-label {
  position: absolute;
  right: 3vw;
  top: 18vh;
  z-index: -1;
  font-family: var(--display);
  font-size: clamp(13rem, 31vw, 34rem);
  font-weight: 200;
  line-height: .75;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
}

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .95s ease, transform 1.05s cubic-bezier(.16, 1, .3, 1);
}
.reveal.visible { opacity: 1; transform: none; }
.threshold-copy { animation: threshold-in 1.2s .2s both cubic-bezier(.16, 1, .3, 1); }
.threshold-copy .title-solid { animation: title-in 1.15s .28s both cubic-bezier(.16, 1, .3, 1); }
.threshold-copy .title-outline { animation: title-in 1.15s .43s both cubic-bezier(.16, 1, .3, 1); }
.threshold-copy .lede { animation: hero-detail-in 1s .68s both cubic-bezier(.16, 1, .3, 1); }
.threshold-copy .enter { animation: hero-detail-in 1s .82s both cubic-bezier(.16, 1, .3, 1); }
@keyframes threshold-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes title-in { from { opacity: 0; transform: translateY(54px); filter: blur(7px); } }
@keyframes hero-detail-in { from { opacity: 0; transform: translateY(20px); } }

.prologue { justify-content: flex-end; }
.prologue-card {
  position: relative;
  width: min(880px, 82vw);
  padding: clamp(2rem, 4vw, 4.4rem);
  border-left: 1px solid var(--teal);
  background: linear-gradient(108deg, rgba(3, 7, 8, .91), rgba(7, 7, 11, .45) 73%, transparent);
  box-shadow: -42px 50px 120px rgba(0, 0, 0, .38);
  backdrop-filter: blur(16px);
}
.prologue-card::after {
  content: "01";
  position: absolute;
  right: 2rem;
  top: -3.4rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155, 124, 255, .22);
  font: 200 clamp(5rem, 10vw, 9rem)/1 var(--display);
}
.prologue-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 8vw, 8rem);
  margin-top: 3.2rem;
  color: #cecdc7;
}
.prologue-grid dl { margin: 0; }
.prologue-grid dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
}
.prologue-grid dt { color: var(--dim); }
.prologue-grid dd { margin: 0; color: var(--teal); text-align: right; }
.equation-specimen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--faint-line);
  color: var(--dim);
  font-size: 10px;
}
.equation-specimen i { color: var(--violet); font-style: normal; }
.equation-specimen strong { color: var(--gold); font: 300 1.4rem var(--display); }

.gallery { align-items: center; }
.gallery-shell {
  position: relative;
  width: min(1180px, 91vw);
  margin-left: auto;
  padding: clamp(1.4rem, 3vw, 3rem) 0 clamp(1.4rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3.3rem);
  border-left: 1px solid rgba(89, 234, 212, .55);
  background: linear-gradient(90deg, rgba(3, 6, 7, .91), rgba(7, 7, 11, .67) 54%, rgba(2, 3, 4, .18));
  box-shadow: -40px 40px 120px rgba(0, 0, 0, .33);
  backdrop-filter: blur(15px);
}
.gallery-shell::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 23%;
  background: linear-gradient(var(--teal), var(--violet), var(--gold));
  box-shadow: 0 0 24px rgba(89, 234, 212, .36);
  animation: seam-scan 5s ease-in-out infinite alternate;
}
@keyframes seam-scan { to { transform: translateY(335%); } }
.reverse .gallery-shell {
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(1.5rem, 3vw, 3.3rem);
}
.gallery-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: 0 clamp(1.2rem, 2vw, 2.2rem) 1.8rem 0;
  border-bottom: 1px solid var(--line);
}
.gallery-head h2 { max-width: 970px; font-size: clamp(2.35rem, 4.55vw, 5rem); }
.coordinate {
  padding-bottom: .35rem;
  text-align: right;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .09em;
  line-height: 1.75;
}
.plaque-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  margin: 2.2rem clamp(1.2rem, 2vw, 2.2rem) 0 0;
  background: rgba(255, 255, 255, .11);
}
.plaque {
  position: relative;
  grid-column: span 4;
  min-height: 142px;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: rgba(2, 4, 5, .88);
  transition: background .38s, transform .48s cubic-bezier(.16, 1, .3, 1), box-shadow .38s;
}
.plaque:nth-child(1), .plaque:nth-child(5) { grid-column: span 5; }
.plaque:nth-child(2), .plaque:nth-child(4) { grid-column: span 3; }
.plaque:nth-child(3), .plaque:nth-child(6) { grid-column: span 4; }
.plaque:nth-child(n+7) { grid-column: span 3; min-height: 132px; }
.plaque::before {
  content: attr(data-no);
  position: absolute;
  right: .55rem;
  top: -.25rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .055);
  font: 250 3.4rem/1 var(--display);
  transition: transform .45s, -webkit-text-stroke-color .45s;
}
.plaque::after {
  content: "";
  position: absolute;
  inset: auto 100% 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--violet), var(--gold));
  transition: right .55s cubic-bezier(.16, 1, .3, 1);
}
.plaque:nth-child(3n+2) { background: rgba(5, 4, 9, .9); }
.plaque:nth-child(4n) { background: rgba(4, 8, 8, .9); }
.plaque:hover {
  z-index: 2;
  background: rgba(11, 15, 16, .96);
  transform: translateY(-7px) scale(1.012);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .42);
}
.plaque:hover::before, .plaque:focus-visible::before { transform: translateY(8px); -webkit-text-stroke-color: rgba(89, 234, 212, .18); }
.plaque:hover::after, .plaque:focus-visible::after { right: 0; }
.plaque:focus-visible { z-index: 3; background: rgba(11, 15, 16, .98); transform: translateY(-5px); }
.plaque-no { position: relative; z-index: 1; color: #969a9d; font-size: 9px; }
.plaque h3 {
  position: relative;
  z-index: 1;
  margin: 1rem 0 .42rem;
  font-family: var(--display);
  font-size: clamp(.68rem, .88vw, .82rem);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.035em;
}
.plaque p { position: relative; z-index: 1; max-width: 90%; margin: 0; color: #d2d1cc; font-size: 10.5px; line-height: 1.58; }
.plaque-arrow { position: absolute; z-index: 1; right: 1rem; bottom: .85rem; color: var(--teal); }
.plaque:nth-child(3n) .plaque-arrow { color: var(--violet); }
.plaque:nth-child(3n+2) .plaque-arrow { color: var(--gold); }
.room-note {
  width: min(620px, 80%);
  margin: 1.8rem 2rem 0 auto;
  color: var(--muted);
  text-align: right;
  font-size: 10px;
}
.reverse .room-note { margin-left: 0; text-align: left; }

.epilogue {
  min-height: 116vh;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.epilogue::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 234, 212, .1), rgba(155, 124, 255, .045) 37%, transparent 68%);
  filter: blur(12px);
}
.epilogue-copy { position: relative; z-index: 1; width: min(900px, 90vw); }
.epilogue-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.8rem -4rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(2, 3, 4, .9), rgba(2, 3, 4, .66) 54%, transparent 78%);
  filter: blur(10px);
}
.epilogue-copy h2 { font-size: clamp(4rem, 9vw, 9rem); }
.epilogue-copy p { max-width: 590px; margin: 2.2rem auto; color: #dfddd6; }
.epilogue-copy strong { display: block; color: var(--gold); font-size: 11px; letter-spacing: .18em; }
.final-coordinate { display: block; margin-top: 1rem; color: var(--teal); font-size: 8px; letter-spacing: .1em; }
.epilogue-ring {
  position: absolute;
  width: min(76vw, 780px);
  aspect-ratio: 1;
  border: 1px solid rgba(89, 234, 212, .25);
  border-radius: 50%;
  box-shadow: 0 0 130px rgba(155, 124, 255, .12), inset 0 0 100px rgba(89, 234, 212, .065);
}
.epilogue-ring::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(232, 188, 101, .38) 0 .18deg, transparent .18deg 8deg);
  mask: radial-gradient(transparent 69%, #000 69.3% 70%, transparent 70.3%);
  animation: turn 70s linear infinite reverse;
}
.epilogue-ring::after {
  content: "z² + c / ∞";
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  color: rgba(232, 188, 101, .63);
  font-size: 9px;
  letter-spacing: .22em;
}
.epilogue-ring span {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(232, 188, 101, .2);
  border-radius: 50%;
  animation: turn 36s linear infinite;
}
.epilogue-ring span:nth-child(2) { inset: 21%; border-style: solid; border-color: rgba(155, 124, 255, .24); animation-duration: 54s; animation-direction: reverse; }
.epilogue-ring span:nth-child(3) { inset: 34%; border-color: rgba(89, 234, 212, .3); animation-duration: 24s; }
.epilogue-ring span:nth-child(4) { inset: 44%; border-style: solid; border-color: rgba(244, 241, 233, .3); box-shadow: 0 0 32px rgba(89, 234, 212, .14); animation-duration: 18s; animation-direction: reverse; }
.epilogue-ring, .epilogue-ring span { opacity: 0; transform: scale(.58); transition: opacity 1s ease, transform 1.45s cubic-bezier(.16, 1, .3, 1); }
.epilogue.is-awake .epilogue-ring { opacity: 1; transform: scale(1); }
.epilogue.is-awake .epilogue-ring span { opacity: 1; transform: scale(1); }
.epilogue.is-awake .epilogue-ring span:nth-child(1) { transition-delay: .16s; }
.epilogue.is-awake .epilogue-ring span:nth-child(2) { transition-delay: .3s; }
.epilogue.is-awake .epilogue-ring span:nth-child(3) { transition-delay: .44s; }
.epilogue.is-awake .epilogue-ring span:nth-child(4) { transition-delay: .58s; }
@keyframes turn { to { transform: rotate(360deg); } }
.return-link {
  position: absolute;
  bottom: 7vh;
  min-height: 44px;
  padding: 12px 0;
  border-bottom: 1px solid var(--teal);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
  transition: color .3s, letter-spacing .5s cubic-bezier(.16, 1, .3, 1), border-color .3s;
}
.return-link:hover, .return-link:focus-visible { color: var(--teal); letter-spacing: .2em; border-color: var(--gold); }

footer {
  min-height: 190px;
  padding: 3rem var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  background: #020304;
  color: var(--dim);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
footer nav { display: flex; gap: 2rem; }
footer a { color: #cdccc7; }
.noscript { position: fixed; z-index: 50; inset: auto 0 0; padding: 1rem; background: #111; color: white; text-align: center; }

@media (max-width: 1100px) {
  .chapter { padding-right: 4.7rem; }
  .plaque-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plaque, .plaque:nth-child(n) { grid-column: span 1; min-height: 146px; }
  .plaque:last-child:nth-child(odd) { grid-column: span 2; }
  .threshold-note { right: 4.7rem; }
  .hero-coordinate { right: 4.7rem; }
}

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr auto auto; gap: 1rem; }
  .primary-nav a:not(:last-child) { display: none; }
  .primary-nav { justify-self: end; }
  .chapter { min-height: 145vh; padding-right: var(--pad); }
  .gallery-shell { width: 94vw; }
  .threshold-note { right: var(--pad); bottom: 8vh; }
  .hero-coordinate { right: var(--pad); }
  .prologue-grid { grid-template-columns: 1fr; }
  .equation-rail {
    inset: auto auto 10px 50%;
    width: min(560px, calc(100% - 20px));
    height: 52px;
    padding: 4px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(2, 3, 4, .88);
    backdrop-filter: blur(14px);
  }
  .rail-equation { display: none; }
  .equation-rail a { min-width: 44px; min-height: 44px; flex: 1; justify-content: center; }
  .equation-rail a span { width: 29px; height: 29px; }
  .equation-rail a b { display: none; }
  body.at-end .equation-rail { transform: translate(-50%, 16px); }
}

@media (max-width: 560px) {
  body { font-size: 13px; padding-bottom: 60px; }
  .masthead { height: 64px; grid-template-columns: 1fr auto auto; padding: 0 1rem; gap: .65rem; }
  .brand { font-size: 8px; letter-spacing: .1em; }
  .brand-mark { width: 30px; height: 30px; }
  .primary-nav a { font-size: 8px; }
  .depth span { display: none; }
  .depth b { min-width: 39px; font-size: 8px; }
  .chapter { min-height: 164vh; padding: 88px 1rem 78px; }
  .chapter[data-bookmark="0"] { min-height: 146vh; }
  .threshold { align-items: flex-start; justify-content: center; flex-direction: column; }
  .threshold-copy { width: 100%; padding: 0; }
  .threshold-copy h1 { font-size: clamp(3rem, 13vw, 4rem); line-height: .98; }
  .title-outline { margin: .04em 0 0; }
  .threshold .kicker { width: 100%; max-width: 310px; }
  .lede, .enter { margin-left: 0; }
  .lede { margin-top: 1.8rem; font-size: .88rem; }
  .threshold-note { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 2rem; }
  .hero-coordinate { top: 88px; right: 1rem; display: none; }
  .orbit-label { right: 0; top: 14vh; font-size: 21rem; }
  .prologue { justify-content: center; }
  .prologue-card { width: 100%; padding: 1.35rem; }
  .prologue-card::after { top: -2.4rem; right: .5rem; font-size: 5rem; }
  .prologue-grid { gap: 1rem; margin-top: 2rem; }
  .equation-specimen { gap: .35rem; font-size: 8px; }
  .gallery { padding-left: .65rem; padding-right: .65rem; }
  .gallery-shell, .reverse .gallery-shell { width: 100%; padding: 1.1rem 0 1.1rem 1rem; }
  .gallery-head { grid-template-columns: 1fr; align-items: start; gap: .7rem; padding-right: 1rem; }
  .gallery-head h2 { max-width: 315px; font-size: 2.15rem; }
  .coordinate { text-align: left; font-size: 7.5px; }
  .plaque-grid { grid-template-columns: 1fr; margin: 1.35rem 1rem 0 0; }
  .plaque, .plaque:nth-child(n), .plaque:last-child:nth-child(odd) { grid-column: auto; min-height: 119px; padding: .9rem 1rem; }
  .plaque:nth-child(even) { margin-left: 1rem; }
  .plaque h3 { margin: .55rem 0 .3rem; font-size: .74rem; }
  .plaque p { max-width: 88%; font-size: 9.8px; }
  .plaque::before { font-size: 2.8rem; }
  .room-note { width: auto; margin: 1.4rem 1rem 0 auto; }
  .epilogue { min-height: 130vh; }
  .epilogue-copy h2 { font-size: 3.45rem; }
  .epilogue-copy p { margin: 1.8rem auto; font-size: .86rem; }
  .epilogue-ring { width: 112vw; }
  .return-link { bottom: 10vh; }
  footer { min-height: 310px; padding: 2.5rem 1rem 5rem; align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  footer nav { flex-direction: column; gap: 0; }
  .equation-rail { width: calc(100% - 16px); bottom: 8px; }
  .equation-rail a span { width: 28px; height: 28px; }
  .accession-echo { display: none; }
}

@media (min-width: 901px) {
  .epilogue-copy.reveal.visible { transform: translateY(72px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #fractal { opacity: 1; animation: none; }
  .grain, .epilogue-ring::before, .epilogue-ring span, .gallery-shell::before,
  .threshold-copy, .threshold-copy .title-solid, .threshold-copy .title-outline, .threshold-copy .lede, .threshold-copy .enter, .masthead { animation: none; }
  .reveal, .plaque, .plaque::before, .plaque::after, .equation-rail a span, .epilogue-ring, .epilogue-ring span, .accession-echo, .accession-echo::after { transition: none; }
  .epilogue-ring, .epilogue-ring span { opacity: 1; transform: none; }
}

@media (hover: none) {
  .plaque:hover { transform: none; box-shadow: none; }
}