:root {
  --ink: #17212a;
  --navy: #163f63;
  --gold: #aa8129;
  --sage: #6e8071;
  --plum: #7b6aa6;
  --rust: #9a6543;
  --teal: #4e7f86;
  --olive: #7a8756;
  --muted: #6f736f;
  --page: #fbf8ef;
  --rule: rgba(170, 129, 41, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(170,129,41,.025), transparent 28%),
    radial-gradient(circle at 80% 80%, rgba(22,63,99,.018), transparent 26%),
    var(--page);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.005em;
}

body::before {
  content: "";
  position: fixed;
  inset: 7px;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 1000;
}

[hidden] {
  display: none !important;
}

.site-header {
  position: relative;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 30px 0;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(170,129,41,.22) 12%,
    rgba(170,129,41,.22) 88%,
    transparent
  );
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: 0.015em;
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  filter: contrast(1.02);
}

.nav {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  font-size: 16px;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 42px;
  padding: 0 6px 13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: color 120ms ease;
}

.nav a:hover {
  color: var(--navy);
}

.nav a.active {
  color: var(--navy);
}

.nav a.active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 5px;
  height: 2px;
  background: var(--gold);
  pointer-events: none;
}

main {
  position: relative;
  opacity: 1;
  transition: opacity 110ms ease;
}

main.page-fade {
  opacity: 0.08;
}

main::before {
  content: "";
  position: fixed;
  top: 108px;
  left: 31px;
  width: 9px;
  height: 62px;
  border-top: 1px solid rgba(170,129,41,.45);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(170,129,41,.68) 0 2px, transparent 2.3px)
      center 13px / 5px 14px repeat-y;
  opacity: .55;
  pointer-events: none;
}

main::after {
  content: "";
  position: fixed;
  top: 112px;
  right: 31px;
  width: 34px;
  height: 43px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(22,63,99,.16) 0 1px,
      transparent 1px 8px
    );
  opacity: .65;
  pointer-events: none;
}

.page {
  position: relative;
  min-height: calc(100vh - 72px);
  text-align: center;
  background-image:
    linear-gradient(rgba(23,33,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,33,42,.035) 1px, transparent 1px);
  background-size: 90px 90px;
  background-position: center center;
}

.page p,
.page ul,
.page li,
.page section,
.page a,
.page span {
  text-align: center;
}

.page p {
  margin: 0;
  text-shadow:
    0 0 8px rgba(251,248,239,.98),
    0 0 16px rgba(251,248,239,.92);
}

/* Background rosettes */
.page::before,
.page::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at center,
      rgba(170,129,41,.55) 0 4px,
      transparent 4px 22px,
      rgba(22,63,99,.30) 22px 23px,
      transparent 23px 48px,
      rgba(170,129,41,.30) 48px 49px,
      transparent 49px 79px,
      rgba(110,128,113,.28) 79px 80px,
      transparent 80px 112px,
      rgba(22,63,99,.22) 112px 113px,
      transparent 113px 100%),
    conic-gradient(
      from 0deg,
      transparent 0 12deg,
      rgba(22,63,99,.36) 12deg 13deg,
      transparent 13deg 42deg,
      rgba(170,129,41,.34) 42deg 43deg,
      transparent 43deg 72deg,
      rgba(110,128,113,.32) 72deg 73deg,
      transparent 73deg 102deg,
      rgba(22,63,99,.30) 102deg 103deg,
      transparent 103deg 132deg,
      rgba(170,129,41,.30) 132deg 133deg,
      transparent 133deg 162deg,
      rgba(110,128,113,.28) 162deg 163deg,
      transparent 163deg 192deg,
      rgba(22,63,99,.28) 192deg 193deg,
      transparent 193deg 222deg,
      rgba(170,129,41,.28) 222deg 223deg,
      transparent 223deg 252deg,
      rgba(110,128,113,.26) 252deg 253deg,
      transparent 253deg 282deg,
      rgba(22,63,99,.26) 282deg 283deg,
      transparent 283deg 312deg,
      rgba(170,129,41,.26) 312deg 313deg,
      transparent 313deg 342deg,
      rgba(110,128,113,.26) 342deg 343deg,
      transparent 343deg 360deg
    );
  opacity: .60;
}

.page::before {
  left: 5.5vw;
  bottom: 6vh;
  box-shadow:
    0 -68px 0 -64px rgba(170,129,41,.95),
    59px -34px 0 -64px rgba(22,63,99,.90),
    59px 34px 0 -64px rgba(110,128,113,.90),
    0 68px 0 -64px rgba(170,129,41,.85),
    -59px 34px 0 -64px rgba(22,63,99,.85),
    -59px -34px 0 -64px rgba(110,128,113,.85);
}

.page::after {
  right: 5.5vw;
  top: 12vh;
  transform: scale(.82) rotate(15deg);
  opacity: .44;
}

.origins::before { transform: rotate(8deg); }
.origins::after { transform: scale(.72) rotate(-18deg); opacity: .42; }
.music::before { transform: scale(.88) rotate(30deg); opacity: .44; }
.music::after { transform: scale(.66) rotate(7deg); opacity: .32; }
.about::before { transform: scale(.80) rotate(-25deg); opacity: .34; }
.about::after { transform: scale(.92) rotate(18deg); opacity: .40; }
.apps::before { transform: scale(.90) rotate(14deg); opacity: .38; }
.apps::after { transform: scale(.74) rotate(-16deg); opacity: .42; }

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

/* Shared diagram language */
.diagram-layer,
.about-map,
.apps-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.route-diagram,
.about-routes,
.apps-routes {
  position: absolute;
  inset: 2.5% 3.5% 3.5%;
  width: 93%;
  height: 92%;
  overflow: visible;
  opacity: .66;
}

.route-diagram .orbit,
.about-routes .orbit,
.apps-routes .orbit {
  fill: none;
  stroke: rgba(23,33,42,.19);
  stroke-width: 1.25;
}

.route-diagram .orbit-b,
.about-routes .orbit-b,
.apps-routes .orbit-b {
  stroke-dasharray: 3 5;
}

.route-diagram .orbit-c,
.about-routes .orbit-c,
.apps-routes .orbit-c {
  stroke: rgba(170,129,41,.25);
}

.route-diagram .axis,
.about-routes .axis,
.apps-routes .axis {
  fill: none;
  stroke: rgba(23,33,42,.26);
  stroke-width: 1.25;
  stroke-dasharray: 2 7;
}

.route-diagram .route,
.about-routes .route,
.apps-routes .route {
  fill: none;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.route-diagram .dashed,
.about-routes .dashed,
.apps-routes .dashed {
  stroke-dasharray: 7 6;
}

.route-diagram .dotted,
.about-routes .dotted,
.apps-routes .dotted {
  stroke-dasharray: 2 6;
}

.navy-line { stroke: rgba(22,63,99,.58); }
.gold-line { stroke: rgba(170,129,41,.62); }
.sage-line { stroke: rgba(110,128,113,.58); }
.plum-line { stroke: rgba(123,106,166,.54); }

.navy-fill { fill: var(--navy); }
.gold-fill { fill: var(--gold); }
.sage-fill { fill: var(--sage); }
.plum-fill { fill: var(--plum); }

.section-index {
  position: absolute;
  left: 54px;
  top: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(23,33,42,.58);
  pointer-events: none;
}

.section-index span {
  color: var(--gold);
}

.section-index::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin-left: 2px;
  background: rgba(170,129,41,.46);
}

.pivot-label {
  position: absolute;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(23,33,42,.92);
  color: var(--page);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .17em;
  box-shadow: 0 0 0 5px rgba(251,248,239,.72), 0 0 0 6px rgba(23,33,42,.17);
  opacity: .92;
}

.music .pivot-label {
  left: 79%;
  top: 26%;
}

.note-node {
  position: absolute;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  font-weight: 500;
  color: #fbf8ef;
  border: 2px solid rgba(251,248,239,.88);
  box-shadow:
    0 0 0 1px rgba(23,33,42,.24),
    0 0 0 5px rgba(251,248,239,.66),
    0 0 0 6px rgba(23,33,42,.12),
    0 3px 14px rgba(23,33,42,.11);
  opacity: .96;
}

.note-node::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 1px;
  background: rgba(23,33,42,.18);
  z-index: -1;
}

.note-node::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 74px;
  background: rgba(23,33,42,.14);
  z-index: -1;
}

.note-node.navy { background: rgba(22,63,99,.92); }
.note-node.gold { background: rgba(170,129,41,.90); }
.note-node.sage { background: rgba(110,128,113,.90); }
.note-node.plum { background: rgba(123,106,166,.88); }

.origins .n1 { top: 19%; right: 20%; }
.origins .n2 { bottom: 23%; left: 17%; }
.origins .n3 { top: 58%; right: 11%; }
.origins .n4 { bottom: 14%; right: 28%; }

/* Origins: almost imperceptible drifting note circles.
   Uses transform-only animation for broad browser support and smooth rendering. */
.origins .note-node {
  will-change: transform;
}

.origins .n1 {
  animation: origin-drift-a 24s ease-in-out infinite alternate;
}

.origins .n2 {
  animation: origin-drift-b 29s ease-in-out -7s infinite alternate;
}

.origins .n3 {
  animation: origin-drift-c 22s ease-in-out -13s infinite alternate;
}

.origins .n4 {
  animation: origin-drift-d 31s ease-in-out -5s infinite alternate;
}

@keyframes origin-drift-a {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(5px, -7px, 0); }
  70%  { transform: translate3d(-4px, 4px, 0); }
  100% { transform: translate3d(3px, 7px, 0); }
}

@keyframes origin-drift-b {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(-6px, -4px, 0); }
  65%  { transform: translate3d(4px, 6px, 0); }
  100% { transform: translate3d(7px, -3px, 0); }
}

@keyframes origin-drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(4px, 6px, 0); }
  75%  { transform: translate3d(-6px, 1px, 0); }
  100% { transform: translate3d(2px, -6px, 0); }
}

@keyframes origin-drift-d {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(6px, 3px, 0); }
  60%  { transform: translate3d(-3px, -6px, 0); }
  100% { transform: translate3d(-6px, 5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  main {
    transition: none !important;
  }

  .origins .note-node {
    animation: none !important;
    transform: none !important;
  }
}

.music .n1 { top: 18%; right: 22%; }
.music .n2 { top: 43%; left: 13%; }
.music .n3 { bottom: 18%; left: 16%; }
.music .n4 { bottom: 27%; right: 14%; }
.music .n5 { bottom: 12%; right: 28%; }

/* Music: the note circles drift slowly, like Origins. */
.music .note-node {
  will-change: transform;
}

.music .n1 {
  animation: music-drift-a 26s ease-in-out infinite alternate;
}

.music .n2 {
  animation: music-drift-b 30s ease-in-out -8s infinite alternate;
}

.music .n3 {
  animation: music-drift-c 24s ease-in-out -13s infinite alternate;
}

.music .n4 {
  animation: music-drift-d 28s ease-in-out -5s infinite alternate;
}

.music .n5 {
  animation: music-drift-e 33s ease-in-out -11s infinite alternate;
}

@keyframes music-drift-a {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(5px, -6px, 0); }
  70%  { transform: translate3d(-4px, 3px, 0); }
  100% { transform: translate3d(3px, 6px, 0); }
}

@keyframes music-drift-b {
  0%   { transform: translate3d(0, 0, 0); }
  32%  { transform: translate3d(-6px, -3px, 0); }
  66%  { transform: translate3d(4px, 5px, 0); }
  100% { transform: translate3d(6px, -2px, 0); }
}

@keyframes music-drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  38%  { transform: translate3d(4px, 5px, 0); }
  74%  { transform: translate3d(-5px, 1px, 0); }
  100% { transform: translate3d(2px, -5px, 0); }
}

@keyframes music-drift-d {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(6px, 2px, 0); }
  67%  { transform: translate3d(-3px, -5px, 0); }
  100% { transform: translate3d(-5px, 4px, 0); }
}

@keyframes music-drift-e {
  0%   { transform: translate3d(0, 0, 0); }
  36%  { transform: translate3d(-4px, 6px, 0); }
  72%  { transform: translate3d(5px, -2px, 0); }
  100% { transform: translate3d(3px, 5px, 0); }
}

/* Apps: only the satellite circles drift, while PRACTICE stays anchored. */
.app-station .station-marker {
  will-change: transform;
}

.shift-station .station-marker {
  animation: app-drift-a 29s ease-in-out infinite alternate;
}

.pathforge-station .station-marker {
  animation: app-drift-b 34s ease-in-out -10s infinite alternate;
}

.zene-station .station-marker {
  animation: app-drift-c 27s ease-in-out -14s infinite alternate;
}

.compass-station .station-marker {
  animation: app-drift-d 31s ease-in-out -6s infinite alternate;
}

@keyframes app-drift-a {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(4px, -5px, 0); }
  72%  { transform: translate3d(-3px, 3px, 0); }
  100% { transform: translate3d(3px, 5px, 0); }
}

@keyframes app-drift-b {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(-5px, -3px, 0); }
  76%  { transform: translate3d(4px, 4px, 0); }
  100% { transform: translate3d(5px, -2px, 0); }
}

@keyframes app-drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(4px, 5px, 0); }
  69%  { transform: translate3d(-4px, 2px, 0); }
  100% { transform: translate3d(2px, -4px, 0); }
}

@keyframes app-drift-d {
  0%   { transform: translate3d(0, 0, 0); }
  37%  { transform: translate3d(5px, 2px, 0); }
  73%  { transform: translate3d(-3px, -4px, 0); }
  100% { transform: translate3d(-4px, 4px, 0); }
}

/* Origins */
.origins .quote-one,
.origins .quote-two {
  color: #222a31;
  font-weight: 300;
}

.origins .quote-one {
  position: absolute;
  top: 24%;
  left: 5%;
  right: 5%;
}

.origins .quote-two {
  position: absolute;
  top: 49%;
  left: 5%;
  right: 5%;
}

/* Music */
.music .music-block {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 90vw);
  line-height: 1.45;
}

.music .section-title {
  margin-bottom: 17px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .025em;
  color: var(--navy);
}

.music .section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin: 12px auto 0;
  background: rgba(170,129,41,.55);
}

.music .release-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.music .release-list li {
  margin: 5px 0;
}

.music .release-list a,
.music .single-release a,
.music .netlabel a,
.about .contact a {
  color: #68747b;
  text-decoration-color: rgba(22,63,99,.46);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}

.music .release-list a:hover,
.music .single-release a:hover,
.music .netlabel a:hover,
.about .contact a:hover {
  color: var(--navy);
  text-decoration-color: var(--gold);
}

.music .single-release {
  margin-top: 51px;
}

.music .single-release + .single-release {
  margin-top: 43px;
}

.music .netlabel {
  margin-top: 78px;
  color: var(--muted);
}

/* About page redesign */
.about-map {
  inset: 4% 4% 4%;
}

.about-routes {
  inset: 7% 8% 10%;
  width: 84%;
  height: 78%;
  opacity: .68;
}

.center-core {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  width: 174px;
  height: 174px;
  border-radius: 50%;
  background: rgba(23,33,42,.93);
  color: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(251,248,239,.72),
    0 0 0 9px rgba(23,33,42,.14);
}

.core-title {
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: .08em;
  font-weight: 500;
}

.core-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .24em;
  color: rgba(251,248,239,.78);
}

.center-core .core-title {
  transform: translateY(2px);
}

.about-node {
  position: absolute;
  width: 200px;
  text-align: center;
}

.node-kicker {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(23,33,42,.58);
}

.node-bubble {
  width: 70px;
  height: 70px;
  margin: 0 auto 9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--page);
  border: 2px solid rgba(251,248,239,.88);
  box-shadow:
    0 0 0 1px rgba(23,33,42,.24),
    0 0 0 5px rgba(251,248,239,.66),
    0 0 0 6px rgba(23,33,42,.12);
}

.node-bubble.small {
  width: 60px;
  height: 60px;
}

.node-bubble.tight {
  font-size: 11px;
  letter-spacing: .045em;
  padding: 0 6px;
}

.about .place .node-bubble.tight {
  font-size: 10px;
  letter-spacing: .015em;
  padding: 0 7px;
}

.node-bubble.navy,
.app-icon.navy { background: rgba(22,63,99,.92); }
.node-bubble.gold,
.app-icon.gold { background: rgba(170,129,41,.90); }
.node-bubble.sage,
.app-icon.sage { background: rgba(110,128,113,.90); }
.node-bubble.plum,
.app-icon.plum { background: rgba(123,106,166,.88); }

.node-bubble.rust { background: rgba(154,101,67,.91); }
.node-bubble.teal { background: rgba(78,127,134,.91); }
.node-bubble.olive { background: rgba(122,135,86,.91); }

.about-node p {
  font-size: 15px;
  line-height: 1.45;
  color: #293039;
}

.about .place { left: 41%; top: 6%; transform: translateX(-50%); }
.about .ritual { left: 10%; top: 34%; }
.about .input { right: 7%; top: 12%; }
.about .mode { right: 14%; top: 60%; }
.about .process { left: 8%; top: 62%; }
.about .condition { right: 38%; top: 79%; transform: translateX(50%); }
.about .contact { left: 50%; top: 83%; transform: translateX(-50%); width: 320px; }

/* About: subtle independent drift on the personal-cartography circles only.
   Text and route geometry remain fixed for readability. */
.about .node-bubble {
  will-change: transform;
}


.about .place .node-bubble {
  animation: about-drift-a 27s ease-in-out infinite alternate;
}

.about .ritual .node-bubble {
  animation: about-drift-b 31s ease-in-out -8s infinite alternate;
}

.about .input .node-bubble {
  animation: about-drift-c 24s ease-in-out -12s infinite alternate;
}

.about .mode .node-bubble {
  animation: about-drift-d 29s ease-in-out -5s infinite alternate;
}

.about .process .node-bubble {
  animation: about-drift-e 33s ease-in-out -15s infinite alternate;
}

.about .condition .node-bubble {
  animation: about-drift-f 26s ease-in-out -9s infinite alternate;
}

.about .contact .node-bubble {
  animation: about-drift-g 35s ease-in-out -18s infinite alternate;
}

@keyframes about-drift-a {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(5px, -6px, 0); }
  75%  { transform: translate3d(-3px, 4px, 0); }
  100% { transform: translate3d(4px, 6px, 0); }
}

@keyframes about-drift-b {
  0%   { transform: translate3d(0, 0, 0); }
  35%  { transform: translate3d(-5px, -4px, 0); }
  70%  { transform: translate3d(4px, 5px, 0); }
  100% { transform: translate3d(6px, -2px, 0); }
}

@keyframes about-drift-c {
  0%   { transform: translate3d(0, 0, 0); }
  30%  { transform: translate3d(4px, 5px, 0); }
  65%  { transform: translate3d(-5px, 2px, 0); }
  100% { transform: translate3d(2px, -5px, 0); }
}

@keyframes about-drift-d {
  0%   { transform: translate3d(0, 0, 0); }
  38%  { transform: translate3d(6px, 2px, 0); }
  72%  { transform: translate3d(-3px, -5px, 0); }
  100% { transform: translate3d(-5px, 4px, 0); }
}

@keyframes about-drift-e {
  0%   { transform: translate3d(0, 0, 0); }
  32%  { transform: translate3d(-4px, 6px, 0); }
  68%  { transform: translate3d(5px, -3px, 0); }
  100% { transform: translate3d(3px, 5px, 0); }
}

@keyframes about-drift-f {
  0%   { transform: translate3d(0, 0, 0); }
  42%  { transform: translate3d(5px, 4px, 0); }
  77%  { transform: translate3d(-4px, -5px, 0); }
  100% { transform: translate3d(2px, 6px, 0); }
}

@keyframes about-drift-g {
  0%   { transform: translate3d(0, 0, 0); }
  40%  { transform: translate3d(-3px, -4px, 0); }
  78%  { transform: translate3d(4px, 3px, 0); }
  100% { transform: translate3d(-2px, 5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .about .node-bubble,
  .origins .note-node,
  .music .note-node,
  .app-station .station-marker {
    animation: none !important;
    transform: none !important;
  }
}

/* Apps page — slightly more mystical / atmospheric */
.apps-map {
  inset: 0;
}

.apps-map::before,
.apps-map::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.apps-map::before {
  left: 4.5%;
  top: 26%;
  width: 250px;
  height: 250px;
  background:
    radial-gradient(circle at center,
      transparent 0 76px,
      rgba(22,63,99,.10) 76px 77px,
      transparent 77px 104px,
      rgba(170,129,41,.09) 104px 105px,
      transparent 105px 100%),
    conic-gradient(
      from 10deg,
      transparent 0 22deg,
      rgba(22,63,99,.13) 22deg 23deg,
      transparent 23deg 88deg,
      rgba(170,129,41,.12) 88deg 89deg,
      transparent 89deg 150deg,
      rgba(110,128,113,.12) 150deg 151deg,
      transparent 151deg 214deg,
      rgba(22,63,99,.10) 214deg 215deg,
      transparent 215deg 278deg,
      rgba(170,129,41,.10) 278deg 279deg,
      transparent 279deg 342deg,
      rgba(110,128,113,.11) 342deg 343deg,
      transparent 343deg 360deg
    );
  opacity: .26;
  transform: rotate(-18deg);
}

.apps-map::after {
  right: 4.5%;
  bottom: 14%;
  width: 230px;
  height: 230px;
  background:
    radial-gradient(circle at center,
      transparent 0 64px,
      rgba(123,106,166,.10) 64px 65px,
      transparent 65px 96px,
      rgba(170,129,41,.09) 96px 97px,
      transparent 97px 100%),
    conic-gradient(
      from 0deg,
      transparent 0 30deg,
      rgba(123,106,166,.12) 30deg 31deg,
      transparent 31deg 93deg,
      rgba(170,129,41,.11) 93deg 94deg,
      transparent 94deg 154deg,
      rgba(22,63,99,.09) 154deg 155deg,
      transparent 155deg 215deg,
      rgba(110,128,113,.10) 215deg 216deg,
      transparent 216deg 276deg,
      rgba(123,106,166,.10) 276deg 277deg,
      transparent 277deg 338deg,
      rgba(170,129,41,.10) 338deg 339deg,
      transparent 339deg 360deg
    );
  opacity: .20;
  transform: rotate(14deg);
}

.apps-routes {
  inset: 18% 13% 17%;
  width: 74%;
  height: 60%;
  opacity: .66;
  filter: saturate(.92);
}

.apps-intro {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: min(620px, 88vw);
  text-align: center;
}

.apps-kicker {
  font-size: 13px;
  letter-spacing: .32em;
  color: var(--gold);
  margin-bottom: 10px;
}

.apps-intro h2 {
  margin: 0 0 14px;
  font-size: 82px;
  line-height: .98;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--navy);
  text-shadow: 0 0 18px rgba(22,63,99,.05);
}

.apps-subtitle {
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: .18em;
  color: var(--gold);
}

.apps-subtitle::before,
.apps-subtitle::after {
  content: "";
  display: inline-block;
  width: 64px;
  height: 1px;
  margin: 0 16px 5px;
  background: rgba(170,129,41,.58);
  vertical-align: middle;
}

.apps-copy {
  width: min(520px, 92%);
  margin: 18px auto 0;
  line-height: 1.5;
  color: #293039;
}

.apps-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(36,52,69,.98), rgba(23,33,42,.96));
  color: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 8px rgba(251,248,239,.74),
    0 0 0 9px rgba(23,33,42,.14),
    0 0 30px rgba(22,63,99,.09),
    0 0 56px rgba(170,129,41,.035);
  z-index: 2;
}

.apps-core::before,
.apps-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.apps-core::before {
  inset: -17px;
  border: 1px dashed rgba(170,129,41,.22);
  opacity: .7;
}

.apps-core::after {
  inset: -40px;
  background:
    radial-gradient(circle at center,
      transparent 0 79px,
      rgba(22,63,99,.05) 79px 80px,
      transparent 80px 100%);
  opacity: .75;
}

.apps-core-title {
  font-size: 19px;
  line-height: 1;
  letter-spacing: .10em;
  font-weight: 500;
}

.apps-core-lines {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.38;
  letter-spacing: .09em;
  color: rgba(251,248,239,.86);
}

.app-station {
  position: absolute;
  width: 290px;
  text-align: center;
}

.app-station::before,
.app-station::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(170,129,41,.42);
}

.app-station::before {
  top: 78px;
}

.app-station::after {
  bottom: -3px;
  opacity: .65;
}

.station-marker {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--page);
  font-size: 28px;
  font-weight: 500;
  border: 2px solid rgba(251,248,239,.88);
  box-shadow:
    0 0 0 1px rgba(23,33,42,.24),
    0 0 0 5px rgba(251,248,239,.66),
    0 0 0 6px rgba(23,33,42,.12);
  z-index: 1;
}

.station-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      transparent 0 41px,
      rgba(23,33,42,.08) 41px 42px,
      transparent 42px 52px,
      rgba(170,129,41,.09) 52px 53px,
      transparent 53px 100%),
    conic-gradient(
      from 0deg,
      transparent 0 44deg,
      rgba(22,63,99,.10) 44deg 45deg,
      transparent 45deg 134deg,
      rgba(170,129,41,.10) 134deg 135deg,
      transparent 135deg 224deg,
      rgba(110,128,113,.10) 224deg 225deg,
      transparent 225deg 314deg,
      rgba(123,106,166,.10) 314deg 315deg,
      transparent 315deg 360deg
    );
  opacity: .24;
  z-index: -1;
  pointer-events: none;
}

.station-marker.navy { background: rgba(22,63,99,.92); }
.station-marker.gold { background: rgba(170,129,41,.90); }
.station-marker.sage { background: rgba(110,128,113,.90); }
.station-marker.plum { background: rgba(123,106,166,.88); }

.station-count {
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--gold);
  margin-bottom: 3px;
}

.app-station h3 {
  margin: 0;
  font-size: 27px;
  line-height: 1.12;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
}

.station-tag {
  margin-top: 5px;
  color: var(--gold);
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.35;
}

.station-copy {
  max-width: 250px;
  margin: 16px auto 0;
  line-height: 1.5;
  color: #293039;
}

.shift-station { left: 9%; top: 22%; }
.pathforge-station { right: 9%; top: 22%; }
.zene-station { left: 9%; bottom: 16%; }
.compass-station { right: 9%; bottom: 16%; }

.apps-footer-note {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  font-size: 14px;
  letter-spacing: .24em;
  color: rgba(23,33,42,.76);
}


/* A final, very light mystical layer: constellations and symbolic marks. */
.apps .mystic-constellation {
  display: none;
}

.apps-map {
  --mystic-dot: rgba(170,129,41,.30);
}

.apps-map .apps-footer-note::before,
.apps-map .apps-footer-note::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 72px;
  height: 18px;
  transform: translateY(-50%);
  opacity: .34;
  background:
    radial-gradient(circle at 8px 9px, var(--mystic-dot) 0 2px, transparent 2.5px),
    radial-gradient(circle at 31px 5px, rgba(22,63,99,.26) 0 2px, transparent 2.5px),
    radial-gradient(circle at 54px 12px, rgba(123,106,166,.24) 0 2px, transparent 2.5px),
    linear-gradient(18deg, transparent 48%, rgba(23,33,42,.10) 49% 51%, transparent 52%);
  background-repeat: no-repeat;
}

.apps-map .apps-footer-note::before {
  right: calc(100% + 22px);
}

.apps-map .apps-footer-note::after {
  left: calc(100% + 22px);
  transform: translateY(-50%) scaleX(-1);
}

.apps-intro::after {
  content: "◌  ·  ✦  ·  ◌";
  display: block;
  margin-top: 11px;
  font-size: 12px;
  letter-spacing: .55em;
  color: rgba(170,129,41,.36);
}

.shift-station::after,
.pathforge-station::after,
.zene-station::after,
.compass-station::after {
  bottom: -3px;
}

.shift-station .station-count::before,
.pathforge-station .station-count::before,
.zene-station .station-count::before,
.compass-station .station-count::before {
  content: "·";
  margin-right: 8px;
  color: rgba(23,33,42,.25);
}

.shift-station .station-count::after,
.pathforge-station .station-count::after,
.zene-station .station-count::after,
.compass-station .station-count::after {
  content: "·";
  margin-left: 8px;
  color: rgba(23,33,42,.25);
}

/* Mobile */
@media (max-width: 900px) {
  .nav {
    gap: 10px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  body::before {
    inset: 4px;
  }

  .site-header {
    min-height: 68px;
    height: auto;
    padding: 14px 14px 0;
    gap: 10px;
  }

  .site-header::after {
    left: 14px;
    right: 14px;
  }

  .brand {
    font-size: 17px;
    gap: 8px;
  }

  .brand-logo {
    width: 28px;
    height: 28px;
  }

  .nav {
    gap: 3px;
    font-size: 13px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 54vw;
  }

  .nav a {
    min-width: 40px;
    min-height: 40px;
    padding: 0 5px 10px;
  }

  .nav a.active::after {
    left: 5px;
    right: 5px;
    bottom: 5px;
    height: 2px;
  }

  main::before,
  main::after {
    display: none;
  }

  .page::before,
  .page::after {
    display: block;
    width: 180px;
    height: 180px;
    opacity: .22;
  }

  .apps-map::before,
  .apps-map::after {
    width: 150px;
    height: 150px;
    opacity: .14;
  }

  .apps-intro::after {
    font-size: 10px;
    letter-spacing: .35em;
    opacity: .75;
  }

  .apps-map .apps-footer-note::before,
  .apps-map .apps-footer-note::after {
    display: none;
  }

  .station-marker::before {
    width: 88px;
    height: 88px;
    opacity: .18;
  }

  .page::before {
    left: -58px;
    bottom: 24px;
  }

  .page::after {
    right: -62px;
    top: 92px;
    opacity: .18;
  }

  .route-diagram,
  .about-routes,
  .apps-routes {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .34;
  }

  .section-index {
    left: 20px;
    top: 22px;
    font-size: 8px;
    gap: 8px;
  }

  .section-index::after {
    width: 32px;
  }

  .pivot-label {
    display: none;
  }

  .note-node {
    width: 42px;
    height: 42px;
    font-size: 18px;
    border-width: 1.5px;
    opacity: .90;
  }

  .note-node::after {
    width: 54px;
  }

  .note-node::before {
    height: 54px;
  }

  .origins .n1 { top: 7%; right: 6%; }
  .origins .n2 { bottom: 12%; left: 2%; }
  .origins .n3 { top: 46%; right: -2%; }
  .origins .n4 { bottom: 24%; right: 16%; }

  .music .n1 { top: 4%; right: 4%; }
  .music .n2 { top: 34%; left: -2%; }
  .music .n3 { bottom: 11%; left: 1%; }
  .music .n4 { bottom: 19%; right: -1%; }
  .music .n5 { bottom: 4%; right: 18%; }

  .page {
    min-height: calc(100vh - 68px);
    padding: 80px 22px 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .origins .quote-one,
  .origins .quote-two,
  .music .music-block {
    position: static;
    transform: none;
    width: auto;
    left: auto;
    right: auto;
    top: auto;
  }

  .origins {
    gap: 110px;
  }

  .music .music-block {
    line-height: 1.55;
  }

  .music .single-release {
    margin-top: 42px;
  }

  .music .single-release + .single-release {
    margin-top: 34px;
  }

  .music .netlabel {
    margin-top: 58px;
  }

  /* About on mobile becomes stacked but still diagrammatic */
  .about-map,
  .apps-map {
    position: static;
    inset: auto;
    width: 100%;
    min-height: auto;
    overflow: visible;
  }

  .center-core,
  .apps-core {
    position: static;
    transform: none;
    width: 132px;
    height: 132px;
    margin: 18px auto 28px;
  }

  .core-title {
    font-size: 20px;
  }

  .apps-core-title {
    font-size: 18px;
  }

  .core-sub {
    font-size: 10px;
  }

  .apps-core-lines {
    font-size: 10px;
  }

  .about-node,
  .apps-intro,
  .app-station,
  .apps-footer-note {
    position: static;
    transform: none !important;
  }

  .about {
    gap: 16px;
  }

  .about-node {
    width: min(100%, 330px);
    margin: 0 auto 18px;
  }

  .node-bubble {
    width: 60px;
    height: 60px;
    font-size: 12px;
  }

  .node-bubble.small {
    width: 54px;
    height: 54px;
  }

  .about .contact {
    width: auto;
  }

  .apps {
    gap: 16px;
  }

  .apps-intro {
    width: 100%;
    margin: 0 auto 10px;
  }

  .apps-intro h2 {
    font-size: 58px;
  }

  .apps-subtitle {
    font-size: 12px;
    letter-spacing: .12em;
  }

  .apps-subtitle::before,
  .apps-subtitle::after {
    width: 28px;
    margin: 0 8px 4px;
  }

  .apps-copy {
    font-size: 14px;
    width: 100%;
  }

  .app-station {
    width: min(100%, 340px);
    margin: 0 auto 24px;
  }

  .app-station::before {
    top: 72px;
  }

  .station-marker {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .app-station h3 {
    font-size: 23px;
  }

  .station-tag {
    font-size: 12px;
  }

  .station-copy {
    font-size: 14px;
  }

  .apps-footer-note {
    margin-top: 8px;
    font-size: 13px;
  }
}