:root {
  --ink: #101210;
  --ink-soft: #171a17;
  --paper: #eee9de;
  --paper-muted: #aaa79e;
  --paper-faint: rgba(238, 233, 222, 0.055);
  --line: rgba(238, 233, 222, 0.16);
  --accent: #d9794a;
  --accent-soft: rgba(217, 121, 74, 0.13);
  --signal: #c6ff63;
  --signal-soft: rgba(198, 255, 99, 0.14);
  --ember: #d26d49;
  --panel: rgba(16, 18, 16, 0.9);
  --atmosphere-line: rgba(238, 233, 222, 0.05);
  --atmosphere-point: rgba(238, 233, 222, 0.08);
  --page: min(92rem, calc(100vw - 5rem));
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #e9e2d5;
    --ink-soft: #ded5c5;
    --paper: #171816;
    --paper-muted: #626159;
    --paper-faint: rgba(23, 24, 22, 0.055);
    --line: rgba(23, 24, 22, 0.18);
    --accent: #b84a32;
    --accent-soft: rgba(184, 74, 50, 0.11);
    --signal: #587838;
    --signal-soft: rgba(88, 120, 56, 0.12);
    --panel: rgba(233, 226, 213, 0.92);
    --atmosphere-line: rgba(23, 24, 22, 0.055);
    --atmosphere-point: rgba(23, 24, 22, 0.07);
  }
}

:root[data-theme="day"] {
  --ink: #e9e2d5;
  --ink-soft: #ded5c5;
  --paper: #171816;
  --paper-muted: #626159;
  --paper-faint: rgba(23, 24, 22, 0.055);
  --line: rgba(23, 24, 22, 0.18);
  --accent: #b84a32;
  --accent-soft: rgba(184, 74, 50, 0.11);
  --signal: #587838;
  --signal-soft: rgba(88, 120, 56, 0.12);
  --panel: rgba(233, 226, 213, 0.92);
  --atmosphere-line: rgba(23, 24, 22, 0.055);
  --atmosphere-point: rgba(23, 24, 22, 0.07);
}

:root[data-theme="night"] {
  --ink: #10171b;
  --ink-soft: #171e21;
  --paper: #eee8dd;
  --paper-muted: #aaa79e;
  --paper-faint: rgba(238, 232, 221, 0.055);
  --line: rgba(238, 232, 221, 0.16);
  --accent: #d9794a;
  --accent-soft: rgba(217, 121, 74, 0.13);
  --signal: #c6ff63;
  --signal-soft: rgba(198, 255, 99, 0.14);
  --panel: rgba(16, 23, 27, 0.9);
  --atmosphere-line: rgba(238, 232, 221, 0.05);
  --atmosphere-point: rgba(238, 232, 221, 0.08);
}

* {
  box-sizing: border-box;
}

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

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  background:
    radial-gradient(circle at 80% 9%, var(--accent-soft), transparent 29rem),
    linear-gradient(var(--ink), var(--ink));
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.theme-ready body,
.theme-ready .site-header,
.theme-ready .pattern-field,
.theme-ready .field-node,
.theme-ready .journey-canvas,
.theme-ready .journey-node,
.theme-ready .site-footer {
  transition:
    color 420ms ease,
    background-color 420ms ease,
    border-color 420ms ease;
}

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

a {
  color: inherit;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  overflow: clip;
}

.site-intro {
  display: none;
  position: fixed;
  z-index: 10000;
  inset: 0;
  padding: clamp(1rem, 2.5vw, 2.5rem);
  overflow: hidden;
  --intro-ink: #0b1015;
  --intro-paper: #f1e8d8;
  --intro-muted: #a8a399;
  --intro-line: rgba(241, 232, 216, 0.17);
  --intro-collapse-x: -40vw;
  --intro-collapse-y: 0px;
  --intro-mark-home-x: -6vw;
  --intro-mark-home-y: -40vh;
  --intro-mark-home-scale: 0.34;
  color: var(--intro-paper);
  background:
    radial-gradient(circle at 76% 28%, rgba(219, 71, 124, 0.11), transparent 28rem),
    linear-gradient(var(--intro-ink), var(--intro-ink));
  cursor: progress;
  isolation: isolate;
}

.intro-pending {
  overflow: hidden;
}

.intro-pending .site-intro {
  display: grid;
}

.intro-pending .site-intro.intro-release {
  animation: site-intro-curtain 800ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

.site-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.52;
  background:
    linear-gradient(rgba(241, 232, 216, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 232, 216, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
}

.site-intro::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 0;
  left: 0;
  top: 0;
  height: 2px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 4%, var(--miami-pink) 28%, rgba(238, 232, 221, 0.94) 50%, var(--miami-cyan) 72%, transparent 96%);
  filter: blur(0.45px);
  animation: site-intro-scan 1120ms steps(12, end) 420ms both;
}

.site-intro-frame {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--intro-line);
}

.intro-registration,
.intro-status {
  min-height: 3.25rem;
  padding: 0 clamp(1rem, 2.2vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--intro-muted);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro-registration {
  border-bottom: 1px solid var(--intro-line);
}

.intro-status {
  border-top: 1px solid var(--intro-line);
}

.intro-status i {
  width: 5px;
  height: 5px;
  background: var(--miami-pink);
  box-shadow: 8px 0 var(--miami-cyan);
}

.intro-status strong {
  margin-left: auto;
  color: var(--intro-muted);
  font-weight: 400;
}

.intro-assembly {
  width: min(94rem, 91vw);
  margin: auto;
  display: grid;
  grid-template-columns: clamp(5.5rem, 10vw, 9rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
}

.intro-mark {
  opacity: 0;
  transform: translate(-1rem, 0.5rem);
  animation: intro-mark-lock 760ms steps(6, end) 160ms both;
}

.intro-mark img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
}

.intro-wordmark {
  min-width: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  transition: opacity 420ms ease, filter 420ms ease;
}

.intro-wordmark-wrap {
  position: relative;
  min-width: 0;
  min-height: clamp(14rem, 27vw, 27rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.intro-field-warp {
  position: absolute;
  z-index: 0;
  inset: 7% 2%;
  overflow: hidden;
  pointer-events: none;
}

.intro-field-warp span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 94%;
  height: 58%;
  border: 1px solid rgba(241, 232, 216, 0.1);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.48);
  box-shadow: inset 0 0 2rem rgba(36, 183, 191, 0.025), 0 0 2rem rgba(217, 72, 120, 0.025);
}

.intro-field-warp span:nth-child(2) {
  width: 76%;
  height: 48%;
}

.intro-field-warp span:nth-child(3) {
  width: 58%;
  height: 38%;
}

.intro-scene-stage {
  --intro-scene-x: 0px;
  --intro-scene-y: 0px;
  --intro-scene-rx: 0deg;
  --intro-scene-ry: 0deg;
  position: absolute;
  z-index: 1;
  inset: -8% -3%;
  opacity: 0;
  overflow: hidden;
  transform:
    translate3d(var(--intro-scene-x), var(--intro-scene-y), 0)
    perspective(80rem)
    rotateX(var(--intro-scene-rx))
    rotateY(var(--intro-scene-ry));
  transform-origin: 50% 50%;
  transition: opacity 520ms ease, transform 180ms ease-out;
}

.intro-scene-stage::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 16% 10%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse,
    transparent 0 46%,
    rgba(217, 72, 120, 0.04) 48%,
    rgba(255, 249, 235, 0.2) 49.5%,
    rgba(36, 183, 191, 0.05) 51%,
    transparent 54%
  );
  mix-blend-mode: screen;
  filter: blur(5px);
  transform: scale(0.24);
  will-change: transform, opacity;
}

.intro-choreography .intro-field-warp span {
  animation: intro-field-collapse 3350ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.intro-choreography .intro-field-warp span:nth-child(2) {
  animation-delay: 90ms;
}

.intro-choreography .intro-field-warp span:nth-child(3) {
  animation-delay: 170ms;
}

.intro-choreography .intro-scene-stage {
  animation: intro-field-settle 4500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.intro-choreography .intro-scene-stage::after {
  animation: intro-field-refraction 4500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.intro-collapse .intro-scene-stage {
  animation: intro-scene-into-mark 860ms cubic-bezier(0.58, 0.04, 0.24, 1) both;
  transform-origin: 50% 50%;
}

.intro-collapse .intro-field-warp {
  animation: intro-warp-into-mark 860ms cubic-bezier(0.58, 0.04, 0.24, 1) both;
  transform-origin: 50% 50%;
}

.intro-collapse .intro-mark {
  z-index: 7;
  animation: intro-mark-to-home 880ms cubic-bezier(0.16, 1, 0.3, 1) 740ms both;
  transform-origin: 50% 50%;
}

.intro-collapse .intro-registration,
.intro-collapse .intro-status {
  animation: intro-metadata-quiet 520ms ease-out both;
}

.site-intro.intro-collapse::before {
  opacity: 0.18;
  transition: opacity 900ms ease;
}

.intro-scene-stage > *,
.intro-scene-stage [data-gosx-engine],
.intro-scene-stage canvas {
  width: 100% !important;
  height: 100% !important;
}

.intro-scene-stage canvas {
  display: block;
}

.intro-3d-ready .intro-scene-stage {
  opacity: 0.92;
}

.intro-3d-ready .intro-wordmark {
  opacity: 0;
  filter: blur(2px);
}

.intro-word {
  margin: 0;
  display: flex;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: clamp(3.2rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.085em;
  line-height: 0.76;
  text-transform: uppercase;
}

.intro-word-last {
  margin-left: clamp(0.5rem, 4vw, 4rem);
}

.intro-word span {
  display: inline-block;
  opacity: 0;
  transform: translate(-6px, 0.32em);
  color: transparent;
  background:
    linear-gradient(112deg, #b8aa91 0%, #fff8e9 38%, #d6c29e 55%, #fff7e8 72%, #a8977c 100%);
  background-size: 240% 100%;
  background-position: 135% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.35px rgba(255, 252, 244, 0.72);
  text-shadow: -2px 0 color-mix(in srgb, var(--miami-pink) 52%, transparent), 2px 0 color-mix(in srgb, var(--miami-cyan) 48%, transparent);
  animation:
    intro-glyph-assemble 520ms steps(5, end) calc(180ms + var(--i) * 38ms) both,
    intro-metal-pass 1280ms cubic-bezier(0.16, 1, 0.3, 1) 920ms both;
}

@keyframes intro-glyph-assemble {
  0% { opacity: 0; transform: translate(-8px, 0.32em); }
  38% { opacity: 0.58; transform: translate(5px, -0.08em); }
  68% { opacity: 1; transform: translate(-2px, 0); }
  100% { opacity: 1; transform: translate(0, 0); text-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
}

@keyframes intro-metal-pass {
  0% { background-position: 135% 0; }
  100% { background-position: -35% 0; }
}

@keyframes intro-mark-lock {
  0% { opacity: 0; transform: translate(-1rem, 0.5rem); filter: none; }
  35% { opacity: 0.72; transform: translate(0.35rem, -0.15rem); filter: drop-shadow(-5px 2px 0 rgba(237, 75, 121, 0.44)); }
  68% { opacity: 1; transform: translate(-0.15rem, 0.08rem); filter: drop-shadow(5px -2px 0 rgba(0, 170, 181, 0.42)); }
  100% { opacity: 1; transform: translate(0, 0); filter: none; }
}

@keyframes intro-field-collapse {
  0%, 18% {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(1.48);
  }
  38% { opacity: 0.2; }
  68% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.28);
  }
  77%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
}

@keyframes intro-field-settle {
  0%, 59% { scale: 1; }
  65% { scale: 0.995; }
  71% { scale: 1.004; }
  80%, 100% { scale: 1; }
}

@keyframes intro-field-refraction {
  0%, 66% { opacity: 0; transform: scale(0.24); }
  71% { opacity: 0.035; }
  77% { opacity: 0.115; transform: scale(0.46); }
  85% { opacity: 0.085; transform: scale(0.78); }
  93% { opacity: 0.035; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes intro-scene-into-mark {
  0% { translate: 0 0; scale: 1; opacity: 0.92; filter: none; }
  22% { scale: 0.96; opacity: 0.92; filter: none; }
  58% { scale: 0.5; opacity: 0.86; filter: none; }
  84% { opacity: 0.62; }
  100% {
    translate: var(--intro-collapse-x) var(--intro-collapse-y);
    scale: 0.035;
    opacity: 0;
    filter: blur(1px);
  }
}

@keyframes intro-warp-into-mark {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  100% {
    translate: var(--intro-collapse-x) var(--intro-collapse-y);
    scale: 0.02;
    opacity: 0;
  }
}

@keyframes intro-fallback-into-mark {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  100% {
    translate: var(--intro-collapse-x) var(--intro-collapse-y);
    scale: 0.035;
    opacity: 0;
  }
}

@keyframes intro-mark-to-home {
  0% { translate: 0 0; scale: 1; opacity: 1; filter: none; }
  16% { scale: 1.025; filter: drop-shadow(0 0 1rem rgba(241, 232, 216, 0.14)); }
  100% {
    translate: var(--intro-mark-home-x) var(--intro-mark-home-y);
    scale: var(--intro-mark-home-scale);
    opacity: 1;
    filter: none;
  }
}

@keyframes intro-metadata-quiet {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes atmosphere-field-handoff {
  0% { filter: blur(3px) brightness(0.88) saturate(0.92); transform: scale(0.992); }
  52% { filter: blur(0) brightness(1.04) saturate(1.035); transform: scale(1.003); }
  100% { filter: none; transform: scale(1); }
}

.intro-field-handoff .atmosphere,
.intro-field-handoff .hydrographic-weather {
  animation: atmosphere-field-handoff 1800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.intro-pending .site-header .brand-mark {
  opacity: 0;
}

.intro-pending.intro-field-handoff .site-header .brand-mark {
  opacity: 1;
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes site-intro-scan {
  0% { top: 8%; opacity: 0; }
  14%, 84% { opacity: 0.48; }
  100% { top: 92%; opacity: 0; }
}

@keyframes site-intro-curtain {
  0% { opacity: 1; clip-path: inset(0); visibility: visible; }
  100% { opacity: 0; clip-path: inset(0 0 100% 0); visibility: hidden; }
}

@keyframes intro-mobile-reticle {
  0%, 100% { opacity: 0.14; rotate: 0deg; scale: 0.94; }
  50% { opacity: 0.34; rotate: 90deg; scale: 1; }
}

@keyframes intro-mobile-progress {
  0% { opacity: 0.18; transform: scaleX(0.06); }
  18% { opacity: 0.55; transform: scaleX(0.18); }
  68% { opacity: 0.72; transform: scaleX(0.82); }
  100% { opacity: 0.26; transform: scaleX(1); }
}

@keyframes intro-status-signal {
  0%, 100% { color: var(--intro-muted); }
  18%, 52% { color: var(--intro-paper); }
}

@keyframes intro-mark-lock-mobile {
  0% { opacity: 0; transform: translateY(0.7rem) scale(0.965); filter: blur(1px); }
  68% { opacity: 1; transform: translateY(-0.06rem) scale(1.008); filter: none; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}

@keyframes intro-glyph-assemble-mobile {
  0% { opacity: 0; transform: translateY(0.22em) scale(0.985); }
  72% { opacity: 1; transform: translateY(-0.025em) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); text-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
}

@keyframes site-intro-scan-mobile {
  0% { top: 10%; opacity: 0; transform: scaleX(0.72); }
  18% { opacity: 0.3; }
  76% { opacity: 0.22; }
  100% { top: 90%; opacity: 0; transform: scaleX(1); }
}

@keyframes site-intro-curtain-mobile {
  0% { opacity: 1; visibility: visible; }
  24% { opacity: 0.985; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes intro-mark-to-home-mobile {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: none; }
  16% { transform: translate3d(0, 0, 0) scale(1.018); filter: drop-shadow(0 0 1rem rgba(241, 232, 216, 0.1)); }
  70% {
    transform: translate3d(var(--intro-mark-home-x), var(--intro-mark-home-y), 0) scale(var(--intro-mark-home-scale));
    opacity: 1;
    filter: none;
  }
  100% {
    transform: translate3d(var(--intro-mark-home-x), var(--intro-mark-home-y), 0) scale(var(--intro-mark-home-scale));
    opacity: 1;
    filter: none;
  }
}

@keyframes intro-scene-into-mark-mobile {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: none; }
  24% { transform: translate3d(0, 0, 0) scale(0.985); opacity: 1; filter: none; }
  78% {
    transform: translate3d(var(--intro-collapse-x), var(--intro-collapse-y), 0) scale(0.04);
    opacity: 0.72;
    filter: none;
  }
  100% {
    transform: translate3d(var(--intro-collapse-x), var(--intro-collapse-y), 0) scale(0.028);
    opacity: 0;
    filter: blur(0.5px);
  }
}

@media (max-width: 680px) {
  .site-intro {
    padding: 0.65rem;
    background:
      radial-gradient(circle at 50% 44%, rgba(36, 183, 191, 0.075), transparent 18rem),
      radial-gradient(circle at 78% 20%, rgba(219, 71, 124, 0.1), transparent 24rem),
      linear-gradient(var(--intro-ink), var(--intro-ink));
  }

  .intro-pending .site-intro.intro-release {
    will-change: opacity;
    animation: site-intro-curtain-mobile 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-intro::before {
    opacity: 0.42;
    background-size: 2rem 2rem;
  }

  .site-intro::after {
    animation: site-intro-scan-mobile 1350ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both;
  }

  .site-intro-frame {
    grid-template-rows: 3.45rem minmax(0, 1fr) 5.15rem;
  }

  .intro-registration {
    min-height: 0;
    padding: 0 0.85rem;
    gap: 0.65rem;
    font-size: 0.37rem;
    letter-spacing: 0.1em;
  }

  .intro-registration span:last-child {
    display: inline;
    color: color-mix(in srgb, var(--miami-cyan) 72%, var(--intro-muted));
  }

  .intro-assembly {
    position: relative;
    width: calc(100vw - 2.6rem);
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0;
  }

  .intro-assembly::before {
    content: "Magnetic assembly / live field";
    position: absolute;
    z-index: 5;
    top: calc(50% - 10.8rem);
    left: 0;
    color: var(--intro-muted);
    font-family: var(--pixel);
    font-size: 0.34rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .intro-assembly::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: calc(50% + 8.9rem);
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--miami-pink) 18%, var(--intro-paper) 50%, var(--miami-cyan) 82%, transparent);
    opacity: 0.2;
    transform: scaleX(0.06);
    transform-origin: left;
  }

  .intro-choreography .intro-assembly::after {
    animation: intro-mobile-progress 4100ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .intro-wordmark-wrap {
    width: 100%;
    min-height: clamp(16rem, 58vw, 18rem);
    overflow: visible;
  }

  .intro-wordmark-wrap::before,
  .intro-wordmark-wrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .intro-wordmark-wrap::before {
    width: min(75vw, 17rem);
    aspect-ratio: 1;
    border: 1px solid rgba(241, 232, 216, 0.09);
    border-radius: 50%;
    box-shadow:
      0 0 0 2.25rem rgba(36, 183, 191, 0.018),
      0 0 0 4.5rem rgba(217, 72, 120, 0.016);
    animation: intro-mobile-reticle 8s linear infinite;
  }

  .intro-wordmark-wrap::after {
    width: min(88vw, 21rem);
    height: min(88vw, 21rem);
    opacity: 0.24;
    background:
      linear-gradient(90deg, transparent calc(50% - 0.5px), var(--intro-line) 50%, transparent calc(50% + 0.5px)),
      linear-gradient(transparent calc(50% - 0.5px), var(--intro-line) 50%, transparent calc(50% + 0.5px));
  }

  .intro-scene-stage {
    display: block;
    inset: 6% -2%;
    opacity: 0;
    overflow: visible;
    will-change: opacity, transform;
  }

  .intro-scene-stage::after {
    display: none;
  }

  .intro-scene-stage canvas {
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .intro-3d-ready .intro-scene-stage {
    opacity: 1;
  }

  .intro-3d-ready .intro-wordmark {
    transition: none;
    opacity: 0;
    filter: blur(2px);
    visibility: hidden;
  }

  .intro-collapse:not(.intro-3d-ready) .intro-wordmark {
    animation: intro-fallback-into-mark 860ms cubic-bezier(0.58, 0.04, 0.24, 1) both;
    transform-origin: 50% 50%;
  }

  .intro-collapse.intro-3d-ready .intro-wordmark {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .intro-mark {
    position: absolute;
    z-index: 6;
    top: calc(50% - 8.4rem);
    left: calc(50% - 2.25rem);
    width: 4.5rem;
    padding: 0.35rem;
    border: 1px solid rgba(241, 232, 216, 0.14);
    background: rgba(11, 16, 21, 0.58);
    box-shadow: 0 0 2.5rem rgba(36, 183, 191, 0.035);
    animation: intro-mark-lock-mobile 820ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  }

  .intro-collapse .intro-mark {
    animation: intro-mark-to-home-mobile 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 900ms both;
  }

  .intro-collapse .intro-scene-stage {
    animation: intro-scene-into-mark-mobile 900ms cubic-bezier(0.45, 0, 0.2, 1) both;
    transform-origin: 50% 50%;
  }

  .intro-collapse .intro-field-warp {
    animation-duration: 900ms;
  }

  .intro-field-handoff .intro-scene-stage {
    opacity: 0;
    visibility: hidden;
  }

  .intro-pending.intro-field-handoff .site-header .brand-mark {
    transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .intro-field-handoff .atmosphere,
  .intro-field-handoff .hydrographic-weather {
    animation: none;
  }

  .intro-wordmark {
    width: 100%;
    display: grid;
    justify-items: center;
    opacity: 0;
    visibility: hidden;
  }

  .intro-fallback-active:not(.intro-3d-ready) .intro-wordmark {
    opacity: 1;
    visibility: visible;
  }

  .intro-word span {
    animation:
      intro-glyph-assemble-mobile 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(150ms + var(--i) * 32ms) both,
      intro-metal-pass 1280ms cubic-bezier(0.16, 1, 0.3, 1) 920ms both;
  }

  .intro-word {
    justify-content: center;
    line-height: 0.82;
  }

  .intro-word-first {
    font-size: clamp(3.5rem, 17.5vw, 4.65rem);
  }

  .intro-word-last {
    margin-left: 0;
    font-size: clamp(1.75rem, 8.1vw, 2.35rem);
    letter-spacing: -0.065em;
  }

  .intro-status {
    position: relative;
    min-height: 0;
    padding: 0.75rem 0.85rem 0.6rem;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    grid-template-rows: auto auto;
    justify-content: stretch;
    gap: 0.55rem 0.45rem;
    font-size: 0.35rem;
  }

  .intro-status i {
    width: 4px;
    height: 4px;
    justify-self: center;
    align-self: center;
    box-shadow: 7px 0 var(--miami-cyan);
  }

  .intro-status strong {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 0.5rem;
    display: block;
    border-top: 1px solid var(--intro-line);
    color: color-mix(in srgb, var(--intro-muted) 72%, transparent);
    font-size: 0.31rem;
    letter-spacing: 0.11em;
    text-align: right;
  }

  .intro-choreography .intro-status span:nth-of-type(1) {
    animation: intro-status-signal 900ms ease 250ms both;
  }

  .intro-choreography .intro-status span:nth-of-type(2) {
    animation: intro-status-signal 900ms ease 1550ms both;
  }

  .intro-choreography .intro-status span:nth-of-type(3) {
    animation: intro-status-signal 900ms ease 2950ms both;
  }

  .intro-collapse .intro-wordmark-wrap::before,
  .intro-collapse .intro-wordmark-wrap::after,
  .intro-collapse .intro-assembly::before,
  .intro-collapse .intro-assembly::after {
    opacity: 0;
    transition: opacity 480ms ease;
  }
}

/* A phone in landscape is wider than the portrait breakpoint, but it still
   needs the same atomic renderer handoff. Keep the wide composition while the
   Scene3D surface initializes; reveal the DOM wordmark only after fallback is
   explicitly selected. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 540px) {
  .intro-wordmark {
    opacity: 0;
    visibility: hidden;
  }

  .intro-fallback-active:not(.intro-3d-ready) .intro-wordmark {
    opacity: 1;
    visibility: visible;
  }

  .intro-3d-ready .intro-wordmark,
  .intro-collapse.intro-3d-ready .intro-wordmark {
    transition: none;
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-intro,
  .intro-pending .site-intro {
    display: none !important;
    animation: none !important;
  }

  .intro-pending {
    overflow: auto;
  }
}

.atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hydrographic-weather {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hydrographic-canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.92;
  mix-blend-mode: multiply;
}

:root[data-theme="night"] .hydrographic-canvas {
  opacity: 0.88;
  mix-blend-mode: screen;
}

.hydrographic-ready .atmosphere {
  opacity: 0.22;
  transition: opacity 900ms ease;
}

.atmosphere::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image:
    radial-gradient(circle, var(--atmosphere-point) 0 1px, transparent 1.4px),
    linear-gradient(112deg, transparent 49.65%, var(--atmosphere-line) 49.9%, transparent 50.15%);
  background-position: 1rem 3rem, 0 0;
  background-size: 7.25rem 9.5rem, 18rem 29rem;
  opacity: 0.48;
  transform: translate3d(-4%, -4%, 0);
  animation: rainfall-drift 46s linear infinite;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse at 18% 24%, var(--accent-soft), transparent 28%),
    radial-gradient(ellipse at 82% 72%, var(--signal-soft), transparent 25%);
  opacity: 0.2;
  filter: blur(4rem);
  animation: atmosphere-breathe 24s ease-in-out infinite alternate;
}

.ripple {
  position: absolute;
  width: clamp(18rem, 36vw, 40rem);
  aspect-ratio: 2 / 1;
  border: 1px solid var(--atmosphere-line);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.35);
  animation: surface-ripple 22s ease-out infinite;
}

.ripple::before,
.ripple::after {
  content: "";
  position: absolute;
  border: 1px solid var(--atmosphere-line);
  border-radius: inherit;
}

.ripple::before {
  inset: 11%;
}

.ripple::after {
  inset: 23%;
}

.ripple-one {
  top: 16%;
  left: 8%;
}

.ripple-two {
  right: 3%;
  bottom: 18%;
  width: clamp(16rem, 30vw, 34rem);
  animation-delay: -8s;
}

.ripple-three {
  top: 48%;
  left: 42%;
  width: clamp(13rem, 24vw, 27rem);
  animation-delay: -15s;
}

.site-header,
#main-content,
.site-footer {
  position: relative;
  z-index: 1;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--signal);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

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

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: var(--page);
  min-height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}

.brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: -0.08em;
}

.brand-name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.75rem);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.4vw, 4rem);
}

.site-link {
  position: relative;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.site-link::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: var(--accent);
  transition: right 220ms ease;
}

.site-link:hover,
.site-link:focus-visible {
  color: var(--paper);
}

.site-link:hover::after,
.site-link:focus-visible::after {
  right: 0;
}

.theme-toggle {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  border: 0;
  color: var(--paper);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.theme-option {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 240ms ease;
}

.theme-track {
  position: relative;
  width: 2.15rem;
  height: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-faint);
}

.theme-track span {
  position: absolute;
  top: 50%;
  left: 0.25rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  transition: left 320ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms ease;
}

:root[data-theme="night"] .theme-track span {
  left: 1.28rem;
}

:root[data-theme="day"] .theme-option-day,
:root:not([data-theme]) .theme-option-night,
:root[data-theme="night"] .theme-option-night {
  color: var(--paper);
}

.hero {
  width: var(--page);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(10rem, 17vh, 13rem) 0 2rem;
  display: grid;
  grid-template-rows: 1fr auto;
}

.hero-copy {
  align-self: center;
  padding: 4vh 0 8vh;
}

.kicker,
.overline,
.work-tag {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 12ch;
  margin: 1.6rem 0 0;
  font-size: clamp(4.5rem, 10vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -0.085em;
  line-height: 0.82;
}

.hero h1 em {
  display: block;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-weight: 400;
}

.hero-intro {
  max-width: 65rem;
  margin: clamp(3rem, 7vh, 5.5rem) 0 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 0.55fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.hero-intro p {
  margin: 0;
  font-size: clamp(1.12rem, 1.65vw, 1.55rem);
  line-height: 1.55;
}

.hero-intro .hero-aside {
  padding-left: 1.15rem;
  border-left: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  font-style: italic;
  line-height: 1.65;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.42rem;
  border-bottom: 1px solid var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease;
}

.text-link span {
  color: var(--accent);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--accent);
}

.hero-footnote {
  min-height: 5.5rem;
  padding-top: 1.4rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 1rem;
  border-top: 1px solid var(--line);
}

.hero-footnote p {
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.035em;
}

.hero-footnote span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--paper);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-pad {
  width: var(--page);
  margin: 0 auto;
  padding: clamp(7rem, 12vw, 12rem) 0;
  border-top: 1px solid var(--line);
}

.section-index {
  color: var(--paper-muted);
}

.pattern-intro {
  margin-bottom: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.pattern-intro h2,
.section-heading h2,
.ideas-lead h2,
.about-heading h2,
.engagement h2 {
  margin: 1.2rem 0 0;
  font-size: clamp(3.1rem, 6.3vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.91;
}

.pattern-intro h2 {
  max-width: 12ch;
  font-family: var(--serif);
}

.pattern-intro > p {
  max-width: 30rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.7;
}

.pattern-field {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.field-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.field-toolbar {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.field-toolbar > p,
.field-control {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field-toolbar > p {
  color: var(--paper-muted);
}

.field-control {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--paper);
  cursor: pointer;
  user-select: none;
}

.field-control strong {
  color: var(--signal);
  font-size: 0.9rem;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.control-active {
  display: none;
}

.field-toggle:checked ~ .field-toolbar .control-rest {
  display: none;
}

.field-toggle:checked ~ .field-toolbar .control-active {
  display: inline;
}

.field-toggle:checked ~ .field-toolbar strong {
  transform: rotate(180deg);
}

.field-toggle:focus-visible ~ .field-toolbar .field-control {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}

.field-canvas {
  position: relative;
  height: clamp(38rem, 56vw, 50rem);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(238, 233, 222, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 233, 222, 0.028) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}

.field-canvas::before {
  content: "";
  position: absolute;
  inset: 12% 24%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(198, 255, 99, 0.045);
  filter: blur(5rem);
}

.field-column {
  position: absolute;
  top: 0;
  bottom: 5rem;
  width: 25%;
  border-right: 1px solid var(--line);
  opacity: 0;
  transition: opacity 900ms ease 300ms;
}

.field-column span {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.column-a { left: 0; }
.column-b { left: 25%; }
.column-c { left: 50%; }
.column-d { left: 75%; border-right: 0; }

.flow-line {
  position: absolute;
  left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 14%, var(--signal) 86%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 700ms ease 450ms, transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 450ms;
}

.line-a { top: 25%; }
.line-b { top: 50%; }
.line-c { top: 75%; }

.field-node {
  --x: 50%;
  --y: 50%;
  --rx: 50%;
  --ry: 50%;
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  min-width: 6rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(238, 233, 222, 0.2);
  border-radius: 999px;
  color: var(--paper-muted);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  transition:
    left 1300ms cubic-bezier(0.2, 0.75, 0.15, 1),
    top 1300ms cubic-bezier(0.2, 0.75, 0.15, 1),
    color 600ms ease,
    border-color 600ms ease,
    box-shadow 600ms ease,
    transform 1300ms cubic-bezier(0.2, 0.75, 0.15, 1);
}

.field-node::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.23rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.45;
  transform: translateY(-50%);
}

.node-01 { --x: 12%; --y: 16%; --rx: 12%; --ry: 25%; --r: -8deg; }
.node-02 { --x: 42%; --y: 12%; --rx: 12%; --ry: 50%; --r: 5deg; }
.node-03 { --x: 72%; --y: 19%; --rx: 12%; --ry: 75%; --r: -4deg; }
.node-04 { --x: 25%; --y: 39%; --rx: 37%; --ry: 25%; --r: 6deg; }
.node-05 { --x: 84%; --y: 36%; --rx: 37%; --ry: 50%; --r: -7deg; }
.node-06 { --x: 56%; --y: 31%; --rx: 37%; --ry: 75%; --r: 3deg; }
.node-07 { --x: 9%; --y: 63%; --rx: 63%; --ry: 25%; --r: 4deg; }
.node-08 { --x: 37%; --y: 58%; --rx: 63%; --ry: 50%; --r: -5deg; }
.node-09 { --x: 70%; --y: 67%; --rx: 63%; --ry: 75%; --r: 8deg; }
.node-10 { --x: 92%; --y: 59%; --rx: 88%; --ry: 25%; --r: -4deg; }
.node-11 { --x: 23%; --y: 82%; --rx: 88%; --ry: 50%; --r: 6deg; }
.node-12 { --x: 61%; --y: 84%; --rx: 88%; --ry: 75%; --r: -6deg; }

.field-toggle:checked ~ .field-canvas .field-column {
  opacity: 0.65;
}

.field-toggle:checked ~ .field-canvas .flow-line {
  opacity: 0.42;
  transform: scaleX(1);
}

.field-toggle:checked ~ .field-canvas .field-node {
  left: var(--rx);
  top: var(--ry);
  color: var(--paper);
  border-color: rgba(198, 255, 99, 0.55);
  box-shadow: 0 0 1.8rem rgba(198, 255, 99, 0.07);
  transform: translate(-50%, -50%) rotate(0);
}

.field-canvas figcaption {
  position: absolute;
  right: 0;
  bottom: 1.5rem;
  left: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

.section-heading {
  margin-bottom: clamp(3rem, 7vw, 7rem);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3rem;
}

.section-heading h2 {
  max-width: 12ch;
}

.section-heading > p {
  max-width: 23rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.65;
  text-align: right;
}

.work-list {
  border-top: 1px solid var(--line);
}

.work-item {
  position: relative;
  padding: clamp(2.5rem, 5vw, 5rem) 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.45fr) minmax(12rem, 0.55fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: start;
  border-bottom: 1px solid var(--line);
}

.work-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--accent-soft), transparent 58%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.work-item:hover::before {
  opacity: 1;
}

.work-number,
.work-outcome {
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.work-body h3 {
  max-width: 22ch;
  margin: 0.8rem 0 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.work-body > p:not(.work-tag) {
  max-width: 47rem;
  margin: 0;
  color: var(--paper-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.work-case-link {
  display: inline-flex;
  margin-top: 1.6rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, transform 180ms ease;
}

.work-case-link:hover,
.work-case-link:focus-visible {
  color: var(--paper-ink);
  transform: translateX(0.35rem);
}

.work-outcome {
  padding-top: 0.25rem;
  line-height: 1.6;
  text-align: right;
}

.ideas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
  gap: clamp(4rem, 10vw, 11rem);
}

.ideas-lead {
  position: sticky;
  top: 4rem;
  align-self: start;
}

.ideas-lead .overline {
  margin-top: 2rem;
}

.ideas-lead h2 {
  max-width: 12ch;
  font-family: var(--serif);
}

.ideas-list {
  border-top: 1px solid var(--line);
}

.ideas-list article {
  padding: 2.7rem 0;
  border-bottom: 1px solid var(--line);
}

.ideas-list article > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ideas-list article > div span:last-child {
  color: var(--accent);
}

.ideas-list h3 {
  margin: 1.3rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.ideas-list p {
  max-width: 35rem;
  margin: 0;
  color: var(--paper-muted);
  line-height: 1.7;
}

.sound {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(4rem, 11vw, 12rem);
  align-items: center;
}

.sound-object {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, rgba(238, 233, 222, 0.04) 10px 11px),
    radial-gradient(circle, rgba(198, 255, 99, 0.085), transparent 60%);
  animation: turn 42s linear infinite;
}

.sound-groove {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.groove-a { inset: 17%; }
.groove-b { inset: 34%; border-color: var(--accent); }

.sound-axis {
  position: absolute;
  width: 42%;
  height: 1px;
  right: -7%;
  top: 50%;
  background: linear-gradient(90deg, var(--signal), transparent);
  transform-origin: left;
}

.sound-label {
  width: 4.5rem;
  height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--accent);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: -0.08em;
  animation: counter-turn 42s linear infinite;
}

.sound-copy .overline {
  margin-top: 1.8rem;
}

.sound-copy h2 {
  max-width: 11ch;
  margin: 1.2rem 0 2rem;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6.4vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.91;
}

.sound-copy > p:not(.section-index):not(.overline) {
  max-width: 39rem;
  margin: 0 0 2.5rem;
  color: var(--paper-muted);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.75;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 0.8fr) minmax(19rem, 0.6fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.about-heading h2 {
  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 6.3rem);
}

.about-copy p {
  margin: 0 0 1.6rem;
  color: var(--paper-muted);
  line-height: 1.75;
}

.about-copy .about-lead {
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.connected-practice > p {
  margin: 0 0 1.2rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.venture-lines {
  border-top: 1px solid var(--line);
}

.venture-lines a,
.venture-lines .practice-line {
  padding: 1.25rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.venture-lines a span,
.venture-lines .practice-line span {
  font-family: var(--serif);
  font-size: 1.2rem;
}

.venture-lines a small,
.venture-lines .practice-line small {
  grid-column: 1;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
}

.venture-lines a strong,
.venture-lines .practice-line strong {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--accent);
  font-weight: 400;
  transition: transform 180ms ease;
}

.venture-lines a:hover strong,
.venture-lines a:focus-visible strong {
  transform: translate(0.22rem, -0.22rem);
}

.engagement {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr);
  gap: clamp(4rem, 10vw, 11rem);
  align-items: end;
}

.engagement h2 {
  max-width: 15ch;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.6vw, 6.3rem);
}

.engagement-copy p {
  max-width: 31rem;
  margin: 0 0 2.5rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.7;
}

.site-footer {
  width: var(--page);
  min-height: 15rem;
  margin: 0 auto;
  padding: 3rem 0;
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.8fr;
  gap: 2rem;
  align-items: start;
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: 0;
  color: var(--paper-muted);
  font-size: 0.78rem;
  line-height: 1.65;
}

.site-footer .footer-name {
  margin-bottom: 0.4rem;
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.4rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.footer-links a,
.footer-meta a {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-meta a:hover,
.footer-meta a:focus-visible {
  color: var(--accent);
}

.footer-meta {
  text-align: right;
}

.footer-disclaimer {
  grid-column: 1 / -1;
  max-width: 68rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.55rem !important;
  letter-spacing: 0.04em;
}

.journey-page {
  padding-top: 0;
}

.journey-hero {
  width: var(--page);
  min-height: min(48rem, 82svh);
  margin: 0 auto;
  padding: clamp(10rem, 17vh, 13rem) 0 clamp(5rem, 10vh, 8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
  gap: clamp(4rem, 10vw, 12rem);
  align-items: end;
}

.journey-hero h1 {
  max-width: 12ch;
  margin: 1.6rem 0 0;
  font-size: clamp(3.8rem, 7.6vw, 8.6rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.88;
}

.journey-hero h1 em {
  display: block;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-weight: 400;
}

.journey-hero-note {
  padding-left: 1.3rem;
  border-left: 1px solid var(--accent);
}

.journey-hero-note p {
  margin: 0 0 1.5rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.72;
}

.journey-hero-note span,
.public-safe-note {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-map-intro {
  margin-bottom: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.journey-map-intro h2,
.current-anchor h2 {
  max-width: 13ch;
  margin: 1.2rem 0 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.8vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.journey-map-intro > p {
  max-width: 32rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.7;
}

.journey-field {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journey-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.journey-toolbar {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.journey-state,
.journey-control {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-state {
  color: var(--paper-muted);
}

.state-lived {
  color: var(--accent);
}

.state-understood {
  transition: color 500ms ease;
}

.journey-control {
  color: var(--paper);
  cursor: pointer;
  user-select: none;
}

.journey-control strong {
  color: var(--signal);
  font-size: 1rem;
  transition: transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journey-release {
  display: none;
}

.journey-toggle:checked ~ .journey-toolbar .state-lived {
  color: var(--paper-muted);
}

.journey-toggle:checked ~ .journey-toolbar .state-understood {
  color: var(--signal);
}

.journey-toggle:checked ~ .journey-toolbar .journey-resolve {
  display: none;
}

.journey-toggle:checked ~ .journey-toolbar .journey-release {
  display: inline;
}

.journey-toggle:checked ~ .journey-toolbar strong {
  transform: rotate(180deg);
}

.journey-toggle:focus-visible ~ .journey-toolbar .journey-control {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}

.journey-canvas {
  position: relative;
  height: clamp(54rem, 68vw, 64rem);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(var(--paper-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-faint) 1px, transparent 1px),
    radial-gradient(circle at 78% 25%, var(--accent-soft), transparent 28rem),
    radial-gradient(circle at 30% 70%, var(--signal-soft), transparent 32rem);
  background-size: 4rem 4rem, 4rem 4rem, auto, auto;
}

.journey-canvas::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, var(--paper-faint) 50%, transparent 80%);
  opacity: 0.45;
  transform: translateX(-35%);
  transition: transform 1500ms cubic-bezier(0.2, 0.75, 0.15, 1), opacity 900ms ease;
}

.journey-toggle:checked ~ .journey-canvas::before {
  opacity: 0.85;
  transform: translateX(35%);
}

.journey-mode-note {
  position: absolute;
  z-index: 5;
  top: 1.5rem;
  left: 1.5rem;
  max-width: 31rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 0.88rem;
  font-style: italic;
  transition: opacity 600ms ease, transform 800ms ease;
}

.understood-note {
  opacity: 0;
  transform: translateY(0.5rem);
}

.journey-toggle:checked ~ .journey-canvas .lived-note {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.journey-toggle:checked ~ .journey-canvas .understood-note {
  opacity: 1;
  transform: translateY(0);
}

.journey-spine {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  transition: opacity 700ms ease;
}

.spine-segment {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--paper-muted));
  transform-origin: left;
}

.segment-01 { left: 13%; top: 27%; width: 16%; transform: rotate(16deg); }
.segment-02 { left: 26%; top: 40%; width: 17%; transform: rotate(-27deg); }
.segment-03 { left: 39%; top: 27%; width: 19%; transform: rotate(33deg); }
.segment-04 { left: 52%; top: 51%; width: 18%; transform: rotate(-25deg); }
.segment-05 { left: 65%; top: 34%; width: 18%; transform: rotate(31deg); }
.segment-06 { left: 78%; top: 54%; width: 15%; transform: rotate(-39deg); }

.journey-toggle:checked ~ .journey-canvas .journey-spine {
  opacity: 0.08;
}

.journey-thread {
  position: absolute;
  right: 6%;
  left: 6%;
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal) 12%, var(--signal) 88%, transparent);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 700ms ease 250ms, transform 1300ms cubic-bezier(0.2, 0.75, 0.15, 1) 200ms;
}

.journey-thread span {
  position: absolute;
  top: -1.35rem;
  left: 0;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.thread-risk { top: 18%; }
.thread-product { top: 38%; }
.thread-systems { top: 58%; }
.thread-creative { top: 78%; }

.journey-toggle:checked ~ .journey-canvas .journey-thread {
  opacity: 0.38;
  transform: scaleX(1);
}

.journey-node {
  position: absolute;
  z-index: 2;
  left: var(--lx);
  top: var(--ly);
  width: clamp(12.5rem, 16vw, 16.5rem);
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--panel);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.04);
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  transition:
    left 1350ms cubic-bezier(0.2, 0.75, 0.15, 1),
    top 1350ms cubic-bezier(0.2, 0.75, 0.15, 1),
    width 900ms ease,
    border-color 700ms ease,
    box-shadow 700ms ease,
    transform 1350ms cubic-bezier(0.2, 0.75, 0.15, 1);
}

.journey-node::before {
  content: "";
  position: absolute;
  top: -0.22rem;
  right: 1rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
}

.journey-node-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.journey-node-meta span:last-child {
  color: var(--accent);
}

.journey-node h3 {
  margin: 1rem 0 0.8rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.65vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.journey-node-copy {
  display: grid;
}

.journey-node-copy p {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--paper-muted);
  font-size: 0.7rem;
  line-height: 1.55;
  transition: opacity 550ms ease 150ms, transform 650ms ease 100ms;
}

.copy-understood {
  opacity: 0;
  transform: translateY(0.35rem);
}

.journey-toggle:checked ~ .journey-canvas .journey-node {
  left: var(--rx);
  top: var(--ry);
  border-color: color-mix(in srgb, var(--signal) 46%, transparent);
  box-shadow: 0 0 2.5rem var(--signal-soft);
  transform: translate(-50%, -50%) rotate(0deg);
}

.journey-toggle:checked ~ .journey-canvas .journey-node::before {
  background: var(--signal);
}

.journey-toggle:checked ~ .journey-canvas .copy-lived {
  opacity: 0;
  transform: translateY(-0.35rem);
}

.journey-toggle:checked ~ .journey-canvas .copy-understood {
  opacity: 1;
  transform: translateY(0);
}

.chapter-01 { --lx: 12%; --ly: 23%; --rx: 17%; --ry: 58%; --tilt: -4deg; }
.chapter-02 { --lx: 25%; --ly: 41%; --rx: 31%; --ry: 38%; --tilt: 3deg; }
.chapter-03 { --lx: 39%; --ly: 23%; --rx: 31%; --ry: 18%; --tilt: -3deg; }
.chapter-04 { --lx: 52%; --ly: 50%; --rx: 48%; --ry: 58%; --tilt: 4deg; }
.chapter-05 { --lx: 65%; --ly: 30%; --rx: 59%; --ry: 38%; --tilt: -4deg; }
.chapter-06 { --lx: 78%; --ly: 52%; --rx: 73%; --ry: 58%; --tilt: 3deg; }
.chapter-07 { --lx: 89%; --ly: 23%; --rx: 86%; --ry: 28%; --tilt: -2deg; }
.side-music { --lx: 18%; --ly: 79%; --rx: 20%; --ry: 79%; --tilt: 3deg; }
.side-writing { --lx: 54%; --ly: 83%; --rx: 52%; --ry: 79%; --tilt: -3deg; }
.side-ventures { --lx: 80%; --ly: 75%; --rx: 80%; --ry: 79%; --tilt: 2deg; }

.side-node {
  border-style: dashed;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.current-chapter {
  width: clamp(14rem, 18vw, 18rem);
  border-color: var(--accent);
  box-shadow: 0 0 2.8rem var(--accent-soft);
}

.current-chapter::before {
  width: 0.55rem;
  height: 0.55rem;
}

.journey-canvas figcaption {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
}

.current-anchor {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.75fr);
  gap: clamp(4rem, 10vw, 11rem);
  align-items: start;
}

.current-anchor-copy p {
  max-width: 35rem;
  margin: 0 0 1.5rem;
  color: var(--paper-muted);
  line-height: 1.75;
}

.current-anchor-copy .anchor-lead {
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.current-anchor-copy .public-safe-note {
  max-width: 29rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}

.status-page {
  width: var(--page);
  min-height: 100svh;
  margin: 0 auto;
  padding: 11rem 0 5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.status-page h1 {
  max-width: 14ch;
  margin: 1.5rem 0 2rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.status-page > p:not(.kicker) {
  max-width: 34rem;
  margin: 0 0 2.5rem;
  color: var(--paper-muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@keyframes turn {
  to { transform: rotate(360deg); }
}

@keyframes counter-turn {
  to { transform: rotate(-360deg); }
}

@keyframes rainfall-drift {
  to {
    background-position: 16rem 32rem, 18rem 29rem;
    transform: translate3d(4%, 4%, 0);
  }
}

@keyframes atmosphere-breathe {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(0.98);
  }

  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@keyframes surface-ripple {
  0%,
  64% {
    opacity: 0;
    transform: scale(0.35);
  }

  72% {
    opacity: 0.42;
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media (max-width: 980px) {
  :root {
    --page: min(100% - 2.5rem, 58rem);
  }

  .site-header {
    min-height: 5.5rem;
  }

  .brand-name {
    display: none;
  }

  .hero {
    padding-top: 8.5rem;
  }

  .hero h1 {
    font-size: clamp(4rem, 13vw, 7.5rem);
  }

  .pattern-intro,
  .ideas-grid,
  .sound,
  .engagement,
  .journey-hero,
  .journey-map-intro,
  .current-anchor {
    grid-template-columns: 1fr;
  }

  .journey-hero {
    min-height: auto;
  }

  .journey-hero-note {
    max-width: 42rem;
  }

  .journey-canvas {
    height: auto;
    padding: 5.5rem 1rem 1.5rem;
    display: grid;
    gap: 1rem;
  }

  .journey-spine,
  .journey-thread {
    display: none;
  }

  .journey-node,
  .journey-toggle:checked ~ .journey-canvas .journey-node {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  .journey-canvas figcaption {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 1.5rem 1rem 0;
  }

  .pattern-intro > p {
    max-width: 40rem;
  }

  .field-canvas {
    height: 40rem;
  }

  .work-item {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .work-outcome {
    grid-column: 2;
    text-align: left;
  }

  .ideas-lead {
    position: static;
  }

  .sound-object {
    width: min(75vw, 30rem);
    margin: 0 auto;
  }

  .about {
    grid-template-columns: 1fr 1fr;
  }

  .connected-practice {
    grid-column: 2;
  }
}

@media (max-width: 680px) {
  :root {
    --page: calc(100% - 2rem);
  }

  .site-header {
    min-height: 7.25rem;
    padding: 1rem 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-content: center;
  }

  .header-actions {
    display: contents;
  }

  .site-nav {
    grid-column: 1 / 4;
    grid-row: 2;
    padding-top: 0.9rem;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .theme-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .site-link {
    font-size: 0.58rem;
  }

  .hero {
    padding-top: 9.5rem;
  }

  .journey-hero {
    padding-top: 10rem;
  }

  .journey-hero h1 {
    font-size: clamp(3.3rem, 15vw, 5.5rem);
  }

  .hero h1 {
    font-size: clamp(3.6rem, 17vw, 5.7rem);
  }

  .hero-intro,
  .hero-footnote,
  .about {
    grid-template-columns: 1fr;
  }

  .hero-footnote p:nth-child(2) {
    display: none;
  }

  .hero-footnote p:last-child {
    text-align: right;
  }

  .section-pad {
    padding: 6.5rem 0;
  }

  .pattern-intro {
    gap: 2.5rem;
  }

  .field-toolbar {
    min-height: 4rem;
  }

  .journey-toolbar {
    min-height: 4.5rem;
  }

  .journey-state {
    gap: 0.45rem;
    font-size: 0.52rem;
  }

  .journey-control {
    gap: 0.55rem;
    font-size: 0.54rem;
  }

  .field-toolbar > p {
    display: none;
  }

  .field-control {
    margin-left: auto;
  }

  .field-canvas {
    height: 42rem;
    background-size: 2.5rem 2.5rem;
  }

  .field-column {
    bottom: 4.5rem;
  }

  .field-column span {
    top: 1rem;
    left: 0.6rem;
    font-size: 0.45rem;
  }

  .field-node {
    min-width: 4.6rem;
    padding: 0.55rem 0.5rem;
    font-size: 0.47rem;
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-top: 2rem;
    text-align: left;
  }

  .work-item {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .ideas-grid {
    gap: 3.5rem;
  }

  .sound-object {
    width: 86vw;
  }

  .connected-practice {
    grid-column: 1;
  }

  .engagement {
    gap: 3rem;
  }

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

  .footer-meta {
    text-align: left;
  }
}

/* Signal motion language — shared selection and resolution cues. */
.artifact-card.is-selected::before {
  background: linear-gradient(90deg, var(--miami-pink), rgba(238, 232, 221, 0.94), var(--miami-cyan));
  animation: artifact-signal-lock 720ms steps(6, end) both;
}

.chronology-chapter.is-selected .chronology-node {
  animation: chronology-signal-lock 620ms steps(5, end) both;
}

.journey-toolbar {
  position: relative;
  overflow: hidden;
}

.journey-toolbar::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--miami-pink), rgba(238, 232, 221, 0.94), var(--miami-cyan), transparent) -45% 100% / 34% 100% no-repeat;
}

.journey-field.is-resolved .journey-toolbar::after {
  animation: journey-signal-resolve 940ms steps(9, end) both;
}

.journey-field.is-lived .journey-toolbar::after {
  animation: journey-signal-release 940ms steps(9, end) both;
}

@keyframes artifact-signal-lock {
  0% { width: calc(var(--pixel-unit) * 2); opacity: 0.35; }
  38% { width: calc(var(--pixel-unit) * 9); opacity: 1; }
  70% { width: calc(var(--pixel-unit) * 4); opacity: 0.72; }
  100% { width: calc(var(--pixel-unit) * 5); opacity: 1; }
}

@keyframes chronology-signal-lock {
  0% { transform: translate(0, 0); box-shadow: none; }
  22% { transform: translate(2px, -1px); box-shadow: -3px 2px 0 color-mix(in srgb, var(--miami-pink) 62%, transparent); }
  46% { transform: translate(-1px, 1px); box-shadow: 3px -2px 0 color-mix(in srgb, var(--miami-cyan) 62%, transparent); }
  70% { transform: translate(1px, 0); box-shadow: -1px 0 0 color-mix(in srgb, var(--paper) 46%, transparent); }
  100% { transform: translate(0, 0); box-shadow: none; }
}

@keyframes journey-signal-resolve {
  0% { opacity: 0; background-position: -45% 100%; }
  14%, 84% { opacity: 0.86; }
  100% { opacity: 0; background-position: 145% 100%; }
}

@keyframes journey-signal-release {
  0% { opacity: 0; background-position: 145% 100%; }
  14%, 84% { opacity: 0.72; }
  100% { opacity: 0; background-position: -45% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-card.is-selected::before,
  .chronology-chapter.is-selected .chronology-node,
  .journey-field.is-resolved .journey-toolbar::after,
  .journey-field.is-lived .journey-toolbar::after {
    animation: none;
  }
}

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

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

  .hydrographic-weather {
    display: none;
  }

  .hydrographic-ready .atmosphere {
    opacity: 0.5;
  }
}

/* Signal Archive v0.1 — environmental low-resolution grammar. */
:root {
  --miami-pink: #ff5c7a;
  --miami-cyan: #43d9d1;
  --miami-yellow: #ffd166;
  --miami-violet: #8f7cff;
  --pixel-unit: 8px;
  --pixel: "SFMono-Regular", "IBM Plex Mono", Consolas, monospace;
}

:root[data-theme="day"] {
  --ink: #f1e7d3;
  --ink-soft: #e8dbc2;
  --paper: #17191e;
  --paper-muted: #676159;
  --paper-faint: rgba(23, 25, 30, 0.052);
  --line: rgba(23, 25, 30, 0.18);
  --accent: #d93f61;
  --accent-soft: rgba(217, 63, 97, 0.105);
  --signal: #007f89;
  --signal-soft: rgba(0, 127, 137, 0.1);
  --panel: rgba(241, 231, 211, 0.94);
  --atmosphere-line: rgba(23, 25, 30, 0.058);
  --atmosphere-point: rgba(23, 25, 30, 0.08);
}

:root[data-theme="night"] {
  --ink: #10141e;
  --ink-soft: #171c28;
  --paper: #f0e7d7;
  --paper-muted: #aaa59c;
  --paper-faint: rgba(240, 231, 215, 0.05);
  --line: rgba(240, 231, 215, 0.17);
  --accent: #ff5c7a;
  --accent-soft: rgba(255, 92, 122, 0.12);
  --signal: #43d9d1;
  --signal-soft: rgba(67, 217, 209, 0.11);
  --panel: rgba(16, 20, 30, 0.93);
  --atmosphere-line: rgba(240, 231, 215, 0.05);
  --atmosphere-point: rgba(240, 231, 215, 0.075);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #f1e7d3;
    --ink-soft: #e8dbc2;
    --paper: #17191e;
    --paper-muted: #676159;
    --paper-faint: rgba(23, 25, 30, 0.052);
    --line: rgba(23, 25, 30, 0.18);
    --accent: #d93f61;
    --accent-soft: rgba(217, 63, 97, 0.105);
    --signal: #007f89;
    --signal-soft: rgba(0, 127, 137, 0.1);
    --panel: rgba(241, 231, 211, 0.94);
  }
}

body {
  background:
    linear-gradient(135deg, transparent 0 74%, var(--accent-soft) 74% 78%, transparent 78%) top right / 26rem 26rem no-repeat,
    radial-gradient(circle at 8% 82%, var(--signal-soft), transparent 24rem),
    var(--ink);
}

.site-shell::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--paper-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-faint) 1px, transparent 1px);
  background-size: calc(var(--pixel-unit) * 4) calc(var(--pixel-unit) * 4);
  opacity: 0.3;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent 42%, rgba(0, 0, 0, 0.38));
}

.archive-chrome {
  position: fixed;
  z-index: 12;
  inset: var(--pixel-unit);
  pointer-events: none;
}

.archive-corner {
  position: absolute;
  width: calc(var(--pixel-unit) * 2);
  height: calc(var(--pixel-unit) * 2);
  border-color: var(--accent);
  opacity: 0.58;
}

.corner-nw { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.corner-ne { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.corner-sw { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.corner-se { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }

.site-header {
  min-height: 7rem;
}

.site-brand {
  gap: 0.9rem;
}

.brand-mark {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-faint);
}

.brand-mark .pixel {
  position: absolute;
  width: 0.35rem;
  height: 0.35rem;
  background: var(--accent);
}

.brand-mark .p01 { top: 0.45rem; left: 0.45rem; }
.brand-mark .p02 { top: 0.45rem; left: 1rem; }
.brand-mark .p03 { top: 1rem; left: 1rem; }
.brand-mark .p04 { top: 1.55rem; left: 0.45rem; }
.brand-mark .p05 { top: 1.55rem; left: 1rem; }
.brand-mark .p06 { top: 1rem; left: 1.55rem; background: var(--signal); }
.brand-mark .p07 { top: 1.55rem; left: 1.55rem; background: var(--signal); }

.brand-lockup {
  display: grid;
  gap: 0.22rem;
}

.brand-name {
  font-family: var(--sans);
  font-size: 0.69rem;
  font-weight: 700;
}

.brand-system,
.footer-record {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.42rem;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-system::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.35rem;
  display: inline-block;
  background: var(--signal);
  animation: pixel-blink 2.4s steps(1, end) infinite;
}

.site-link {
  font-family: var(--pixel);
  font-size: 0.57rem;
}

.site-link::before {
  margin-right: 0.36rem;
  color: var(--accent);
  font-size: 0.42rem;
}

.site-link:nth-child(1)::before { content: "00"; }
.site-link:nth-child(2)::before { content: "01"; }
.site-link:nth-child(3)::before { content: "02"; }
.site-link:nth-child(4)::before { content: "03"; }
.site-link:nth-child(5)::before { content: "04"; }
.site-link:nth-child(6)::before { content: "05"; }

.theme-track {
  border-radius: 0;
}

.theme-track span {
  border-radius: 0;
}

.hero-copy {
  position: relative;
}

.hero-record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.hero-record > p:last-child {
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero h1 {
  position: relative;
  z-index: 2;
  color: var(--paper);
}

.hero-intro > p:first-child,
.brand-name,
.text-link {
  color: var(--paper);
}

.hero h1::after {
  content: "";
  position: absolute;
  right: 9%;
  bottom: -1.4rem;
  width: 5rem;
  height: 0.55rem;
  background: repeating-linear-gradient(90deg, var(--accent) 0 0.55rem, transparent 0.55rem 0.8rem);
}

.hero-signal-glyph {
  position: absolute;
  z-index: 1;
  top: 10%;
  right: 1%;
  width: clamp(7rem, 11vw, 10rem);
  color: var(--paper-muted);
  opacity: 0.62;
}

.hero-signal-glyph svg {
  width: 100%;
  display: block;
  overflow: visible;
}

.hero-signal-glyph .glyph-block {
  fill: var(--paper-faint);
  stroke: var(--paper-muted);
  stroke-width: 1;
}

.hero-signal-glyph .glyph-core {
  fill: var(--accent);
  animation: glyph-shift 3.2s steps(4, end) infinite;
}

.hero-signal-glyph path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 2;
}

.hero-signal-glyph > span {
  display: block;
  font-family: var(--pixel);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

.hero-footnote {
  border-top-style: dashed;
}

.section-index,
.kicker,
.overline,
.work-tag {
  font-family: var(--pixel);
}

.section-index::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.65rem;
  display: inline-block;
  background: var(--accent);
}

.pattern-field,
.journey-field {
  box-shadow: inset 0 0 0 1px var(--paper-faint);
}

.field-toolbar,
.journey-toolbar {
  padding: 0 var(--pixel-unit);
  background: linear-gradient(90deg, var(--paper-faint), transparent 38%);
}

.field-node {
  border-radius: 0;
  clip-path: polygon(0.35rem 0, 100% 0, 100% calc(100% - 0.35rem), calc(100% - 0.35rem) 100%, 0 100%, 0 0.35rem);
}

.field-node::after {
  border-radius: 0;
}

.work-item {
  padding-left: calc(var(--pixel-unit) * 2);
}

.work-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--pixel-unit);
  height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 320ms steps(4, end);
}

.work-item:hover::after {
  height: calc(100% - var(--pixel-unit) * 4);
}

.work-number,
.work-outcome,
.ideas-list article > div,
.connected-practice > p {
  font-family: var(--pixel);
}

.ideas-list article {
  position: relative;
  padding-left: calc(var(--pixel-unit) * 2);
}

.ideas-list article::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  border: 1px solid var(--signal);
}

.sound-object {
  border-radius: 0;
  clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 84%, 84% 100%, 16% 100%, 0 84%, 0 16%);
  background:
    repeating-radial-gradient(circle, transparent 0 10px, var(--paper-faint) 10px 11px),
    conic-gradient(from 45deg, var(--accent-soft), transparent 22%, var(--signal-soft) 50%, transparent 72%, var(--accent-soft));
}

.sound-label {
  border-radius: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}

.text-link {
  font-family: var(--pixel);
}

.text-link::before {
  content: "[";
  color: var(--accent);
}

.text-link::after {
  content: "]";
  color: var(--accent);
}

.journey-hero::after {
  content: "JV / ARTIFACT 01 / JOURNEY FIELD";
  position: absolute;
  right: 4%;
  bottom: 3rem;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  letter-spacing: 0.12em;
}

.journey-hero {
  position: relative;
}

.journey-node,
.is-resolved .journey-node {
  clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem);
}

.is-resolved .journey-node-index,
.journey-thread-label span {
  border-radius: 0;
}

.is-resolved .journey-node-index {
  clip-path: polygon(0.3rem 0, 100% 0, 100% calc(100% - 0.3rem), calc(100% - 0.3rem) 100%, 0 100%, 0 0.3rem);
}

.footer-record {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent);
}

@keyframes pixel-blink {
  0%, 68% { opacity: 1; }
  69%, 82% { opacity: 0.18; }
  83%, 100% { opacity: 1; }
}

@keyframes glyph-shift {
  0%, 100% { transform: translate(0, 0); fill: var(--accent); }
  25% { transform: translate(8px, 0); fill: var(--miami-yellow); }
  50% { transform: translate(8px, 8px); fill: var(--signal); }
  75% { transform: translate(0, 8px); fill: var(--miami-violet); }
}

@media (max-width: 980px) {
  .hero-signal-glyph {
    top: 4%;
    right: 0;
    opacity: 0.38;
  }

  .brand-system {
    display: none;
  }

  .brand-lockup {
    display: none;
  }
}

@media (max-width: 680px) {
  .archive-chrome {
    display: none;
  }

  .hero-record > p:last-child,
  .hero-signal-glyph {
    display: none;
  }

  .site-link::before {
    display: none;
  }

  .work-item,
  .ideas-list article {
    padding-left: var(--pixel-unit);
  }

  .journey-hero::after {
    right: 1rem;
    bottom: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-system::before,
  .hero-signal-glyph .glyph-core {
    animation: none;
  }
}

/* Journey v2: one evidence set, two deliberately different visual languages. */
.journey-field {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journey-toolbar {
  min-height: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.journey-state,
.journey-control {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-state {
  color: var(--paper-muted);
}

.journey-state span:not([aria-hidden]) {
  transition: color 360ms ease;
}

.journey-state .is-active {
  color: var(--accent);
}

.is-resolved .journey-state .is-active {
  color: var(--signal);
}

.journey-control {
  padding: 0;
  border: 0;
  color: var(--paper);
  background: transparent;
  cursor: pointer;
}

.journey-control strong {
  color: var(--signal);
  font-size: 1rem;
  font-weight: 400;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.is-resolved .journey-control strong {
  transform: rotate(180deg);
}

.journey-control .is-hidden {
  display: none;
}

.journey-control .journey-release:not(.is-hidden) {
  display: inline;
}

.journey-mode-header {
  position: relative;
  min-height: 7.5rem;
  padding: 1.7rem 0 1.4rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.mode-copy {
  display: grid;
  gap: 0.45rem;
  transition: opacity 460ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mode-copy span {
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mode-copy strong {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.understood-mode-copy {
  position: absolute;
  left: 0;
  bottom: 1.4rem;
  opacity: 0;
  transform: translateY(0.6rem);
}

.is-resolved .lived-mode-copy {
  opacity: 0;
  transform: translateY(-0.6rem);
}

.is-resolved .understood-mode-copy {
  opacity: 1;
  transform: translateY(0);
}

.journey-scale {
  width: min(34rem, 45%);
  padding-top: 0.65rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  transition: opacity 400ms ease;
}

.is-resolved .journey-scale {
  opacity: 0;
}

.journey-canvas {
  position: relative;
  height: 100rem;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  transition: height 1150ms cubic-bezier(0.16, 1, 0.3, 1), background 700ms ease;
}

.journey-canvas::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(var(--paper-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-faint) 1px, transparent 1px),
    radial-gradient(circle at 78% 30%, var(--accent-soft), transparent 28rem),
    radial-gradient(circle at 34% 72%, var(--signal-soft), transparent 31rem);
  background-size: 4rem 4rem, 4rem 4rem, auto, auto;
  opacity: 0;
  transition: opacity 850ms ease 180ms;
}

.is-resolved .journey-canvas {
  height: 62rem;
}

.is-resolved .journey-canvas::before {
  opacity: 0.72;
}

.working-rail {
  position: absolute;
  top: 2.2rem;
  bottom: 4.5rem;
  left: 4.5%;
  width: 1px;
  color: var(--paper-muted);
  background: var(--line);
  transition: opacity 450ms ease;
}

.working-rail::before,
.working-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.working-rail::before { top: 0; }
.working-rail::after { bottom: 0; }

.working-rail span {
  position: absolute;
  top: 0;
  left: 1.2rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.is-resolved .working-rail {
  opacity: 0;
}

.journey-side-label {
  position: absolute;
  top: 66%;
  left: 8%;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 450ms ease;
}

.is-resolved .journey-side-label {
  opacity: 0;
}

.journey-connectors {
  position: absolute;
  inset: 7% 2% auto;
  z-index: 0;
  width: 96%;
  height: 78%;
  overflow: visible;
  opacity: 0;
  transition: opacity 750ms ease 250ms;
}

.journey-connectors path {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transform: scaleX(0.18);
  transform-origin: center;
  transition: transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) 220ms;
}

.journey-connectors .current-risk {
  stroke: var(--accent);
}

.journey-connectors .current-product {
  stroke-dasharray: 7 8;
}

.journey-connectors .current-systems {
  stroke-dasharray: 2 7;
}

.journey-connectors .current-creative {
  stroke: var(--accent);
  stroke-dasharray: 1 11;
  stroke-linecap: round;
  stroke-width: 2;
}

.journey-connectors .convergence-line {
  stroke: var(--paper-muted);
  stroke-dasharray: 4 8;
}

.journey-connectors circle {
  fill: var(--panel);
  stroke: var(--signal);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.is-resolved .journey-connectors {
  opacity: 0.55;
}

.is-resolved .journey-connectors path {
  transform: scaleX(1);
}

.journey-thread-label {
  position: absolute;
  z-index: 1;
  left: 1.2%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.49rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-0.8rem);
  transition: opacity 550ms ease 400ms, transform 800ms cubic-bezier(0.16, 1, 0.3, 1) 380ms;
}

.journey-thread-label span {
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--paper);
  font-size: 0.42rem;
}

.thread-risk { top: 14%; }
.thread-product { top: 34%; }
.thread-systems { top: 54%; }
.thread-creative { top: 74%; }

.is-resolved .journey-thread-label {
  opacity: 1;
  transform: translateX(0);
}

.journey-node {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--cy);
  width: 88%;
  min-height: 6.8rem;
  padding: 1rem 0;
  display: grid;
  grid-template-columns: 2.75rem 8.5rem minmax(15rem, 1.05fr) minmax(17rem, 1fr) minmax(12rem, 0.55fr);
  gap: clamp(1rem, 2vw, 2.5rem);
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  transition:
    left 1300ms cubic-bezier(0.16, 1, 0.3, 1),
    top 1300ms cubic-bezier(0.16, 1, 0.3, 1),
    width 1050ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 900ms ease,
    padding 900ms ease,
    border-color 650ms ease,
    background-color 650ms ease,
    box-shadow 650ms ease,
    transform 1300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-node::before {
  display: none;
}

.journey-node-index {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.journey-node-meta {
  display: grid;
  justify-content: initial;
  gap: 0.3rem;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-node-meta span:last-child {
  color: var(--paper);
}

.journey-node h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.journey-node-copy {
  display: block;
}

.journey-node-copy p {
  margin: 0;
  color: var(--paper-muted);
  font-size: 0.72rem;
  line-height: 1.58;
  transition: opacity 380ms ease;
}

.journey-node-copy .copy-understood {
  display: none;
}

.journey-carry {
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.035em;
  line-height: 1.5;
}

.journey-carry span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent);
  font-size: 0.44rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chapter-01 { --cy: 8%; --rx: 19%; --ry: 55%; }
.chapter-02 { --cy: 16%; --rx: 28%; --ry: 35%; }
.chapter-03 { --cy: 24%; --rx: 33%; --ry: 15%; }
.chapter-04 { --cy: 32%; --rx: 46%; --ry: 55%; }
.chapter-05 { --cy: 40%; --rx: 55%; --ry: 35%; }
.chapter-06 { --cy: 48%; --rx: 70%; --ry: 55%; }
.chapter-07 { --cy: 56%; --rx: 85%; --ry: 31%; }
.side-music { --cy: 72%; --rx: 20%; --ry: 76%; }
.side-writing { --cy: 80%; --rx: 48%; --ry: 78%; }
.side-ventures { --cy: 88%; --rx: 76%; --ry: 76%; }

.side-node {
  border-style: solid;
  background: transparent;
}

.current-chapter {
  width: 88%;
  border-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-soft), transparent 60%);
  box-shadow: none;
}

.is-resolved .journey-node {
  left: var(--rx);
  top: var(--ry);
  width: clamp(12.5rem, 16vw, 15.25rem);
  min-height: 0;
  padding: 1rem 1.05rem 1.15rem;
  display: block;
  border: 1px solid color-mix(in srgb, var(--signal) 34%, var(--line));
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, 0.08);
  transform: translate(-50%, -50%);
}

.is-resolved .journey-node-index {
  position: absolute;
  top: -0.72rem;
  right: 0.85rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--signal);
  border-radius: 50%;
  color: var(--signal);
  background: var(--ink);
  font-size: 0.45rem;
}

.is-resolved .journey-node-meta {
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.42rem;
}

.is-resolved .journey-node h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
}

.is-resolved .journey-node-copy .copy-lived {
  display: none;
}

.is-resolved .journey-node-copy .copy-understood {
  display: block;
  opacity: 1;
  transform: none;
}

.is-resolved .journey-carry {
  display: none;
}

.is-resolved .side-node {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.is-resolved .side-node .journey-node-index {
  border-color: var(--accent);
  color: var(--accent);
}

.is-resolved .current-chapter {
  width: clamp(15rem, 19vw, 18rem);
  border-color: var(--accent);
  background:
    linear-gradient(145deg, var(--accent-soft), transparent 68%),
    var(--panel);
  box-shadow: 0 0 3.5rem var(--accent-soft);
}

.journey-canvas figcaption {
  position: absolute;
  right: 2rem;
  bottom: 1.6rem;
  left: 2rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
}

@media (max-width: 1180px) {
  .journey-node {
    grid-template-columns: 2rem 7rem minmax(13rem, 1fr) minmax(15rem, 1fr);
  }

  .journey-carry {
    display: none;
  }
}

@media (max-width: 980px) {
  .journey-mode-header {
    min-height: 8.5rem;
  }

  .journey-scale {
    display: none;
  }

  .journey-canvas,
  .is-resolved .journey-canvas {
    height: auto;
    padding: 3rem 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible;
  }

  .journey-canvas::before {
    opacity: 0;
  }

  .is-resolved .journey-canvas::before {
    opacity: 0.52;
  }

  .working-rail,
  .journey-side-label,
  .journey-connectors,
  .journey-thread-label {
    display: none;
  }

  .journey-node,
  .is-resolved .journey-node,
  .is-resolved .current-chapter {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
    padding: 1.25rem 0;
    display: grid;
    grid-template-columns: 2.25rem 7.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .journey-node h3 {
    padding-right: 1rem;
  }

  .journey-node-copy {
    grid-column: 3;
  }

  .journey-carry {
    display: none;
  }

  .is-resolved .journey-node {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
  }

  .is-resolved .journey-node:last-of-type {
    border-bottom: 1px solid var(--line);
  }

  .is-resolved .journey-node-index {
    position: static;
    width: auto;
    height: auto;
    display: block;
    border: 0;
    background: transparent;
  }

  .is-resolved .journey-node-meta {
    margin: 0;
    display: grid;
    justify-content: initial;
  }

  .journey-canvas figcaption {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    padding: 2rem 1rem 0;
  }
}

@media (max-width: 680px) {
  .journey-toolbar {
    min-height: 6.3rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
  }

  .journey-mode-header {
    min-height: 9.5rem;
    align-items: start;
  }

  .understood-mode-copy {
    bottom: auto;
    top: 1.7rem;
  }

  .journey-node,
  .is-resolved .journey-node,
  .is-resolved .current-chapter {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.6rem 0.8rem;
  }

  .journey-node-meta {
    grid-column: 2;
  }

  .journey-node h3,
  .journey-node-copy {
    grid-column: 2;
  }

  .journey-node h3 {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-canvas,
  .journey-canvas::before,
  .journey-node,
  .journey-connectors,
  .journey-connectors path,
  .journey-thread-label,
  .mode-copy,
  .journey-control strong {
    transition: none !important;
  }
}

/* Signal Archive v0.2 — Miami daylight and artifact color routing. */
:root[data-theme="day"] {
  --ink: #f5e7cf;
  --ink-soft: #ecd8b9;
  --paper: #15233a;
  --paper-muted: #675d63;
  --paper-faint: rgba(21, 35, 58, 0.052);
  --line: rgba(21, 35, 58, 0.19);
  --accent: #e74770;
  --accent-soft: rgba(231, 71, 112, 0.12);
  --signal: #008d9a;
  --signal-soft: rgba(0, 141, 154, 0.115);
  --panel: rgba(245, 231, 207, 0.95);
  --miami-pink: #ed4b79;
  --miami-cyan: #00aab5;
  --miami-yellow: #f2ad3d;
  --miami-violet: #745ec2;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --ink: #f5e7cf;
    --ink-soft: #ecd8b9;
    --paper: #15233a;
    --paper-muted: #675d63;
    --paper-faint: rgba(21, 35, 58, 0.052);
    --line: rgba(21, 35, 58, 0.19);
    --accent: #e74770;
    --accent-soft: rgba(231, 71, 112, 0.12);
    --signal: #008d9a;
    --signal-soft: rgba(0, 141, 154, 0.115);
    --panel: rgba(245, 231, 207, 0.95);
  }
}

:root[data-theme="day"] body {
  background:
    linear-gradient(135deg, transparent 0 73%, rgba(237, 75, 121, 0.11) 73% 77%, transparent 77%) top right / 30rem 30rem no-repeat,
    radial-gradient(circle at 4% 84%, rgba(0, 170, 181, 0.13), transparent 25rem),
    radial-gradient(circle at 82% 66%, rgba(242, 173, 61, 0.09), transparent 22rem),
    var(--ink);
}

:root[data-theme="day"] .site-shell::after {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 170, 181, 0.11) 0 2rem, transparent 2rem) 8% 18% / 9rem 2rem no-repeat,
    linear-gradient(rgba(242, 173, 61, 0.12) 0 100%) 92% 43% / 4rem 4rem no-repeat,
    linear-gradient(135deg, rgba(116, 94, 194, 0.09) 0 50%, transparent 50%) 88% 86% / 13rem 13rem no-repeat,
    radial-gradient(circle, rgba(237, 75, 121, 0.14) 0 34%, transparent 36%) 14% 62% / 6rem 6rem no-repeat;
}

:root[data-theme="day"] .corner-ne { border-color: var(--miami-cyan); }
:root[data-theme="day"] .corner-sw { border-color: var(--miami-yellow); }
:root[data-theme="day"] .corner-se { border-color: var(--miami-violet); }

:root[data-theme="day"] .brand-mark {
  background:
    linear-gradient(135deg, rgba(237, 75, 121, 0.1) 0 50%, rgba(0, 170, 181, 0.1) 50%);
}

:root[data-theme="day"] .brand-mark .p03,
:root[data-theme="day"] .brand-mark .p05 {
  background: var(--miami-yellow);
}

:root[data-theme="day"] .brand-mark .p07 {
  background: var(--miami-violet);
}

:root[data-theme="day"] .hero h1 em,
:root[data-theme="day"] .journey-hero h1 em {
  color: #506875;
}

:root[data-theme="day"] .hero-signal-glyph {
  opacity: 0.82;
}

:root[data-theme="day"] .hero-signal-glyph .glyph-a { fill: rgba(0, 170, 181, 0.16); stroke: var(--miami-cyan); }
:root[data-theme="day"] .hero-signal-glyph .glyph-b { fill: rgba(242, 173, 61, 0.16); stroke: var(--miami-yellow); }
:root[data-theme="day"] .hero-signal-glyph .glyph-c { fill: rgba(116, 94, 194, 0.14); stroke: var(--miami-violet); }
:root[data-theme="day"] .hero-signal-glyph .glyph-d { fill: rgba(237, 75, 121, 0.15); stroke: var(--miami-pink); }

.pattern-section { --artifact-color: var(--miami-cyan); }
.work { --artifact-color: var(--miami-pink); }
.ideas { --artifact-color: var(--miami-yellow); }
.sound { --artifact-color: var(--miami-violet); }
.about { --artifact-color: var(--miami-cyan); }
.engagement { --artifact-color: var(--miami-pink); }
.journey-map-section { --artifact-color: var(--miami-cyan); }
.current-anchor { --artifact-color: var(--miami-yellow); }

.section-index::before {
  background: var(--artifact-color, var(--accent));
}

:root[data-theme="day"] .pattern-field,
:root[data-theme="day"] .journey-field {
  background:
    linear-gradient(135deg, rgba(0, 170, 181, 0.045), transparent 33%),
    linear-gradient(315deg, rgba(237, 75, 121, 0.04), transparent 30%);
}

.work-item:nth-child(1) { --row-color: var(--miami-pink); }
.work-item:nth-child(2) { --row-color: var(--miami-cyan); }
.work-item:nth-child(3) { --row-color: var(--miami-violet); }
.work-item:nth-child(4) { --row-color: var(--miami-yellow); }

.work-item::after {
  background: var(--row-color, var(--accent));
}

.work-item .work-tag,
.work-item .work-number {
  color: var(--row-color, var(--accent));
}

.ideas-list article:nth-child(1) { --note-color: var(--miami-cyan); }
.ideas-list article:nth-child(2) { --note-color: var(--miami-violet); }
.ideas-list article:nth-child(3) { --note-color: var(--miami-yellow); }

.ideas-list article::before {
  border-color: var(--note-color, var(--signal));
  box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--note-color, var(--signal));
}

.ideas-list article > div span:last-child {
  color: var(--note-color, var(--accent));
}

:root[data-theme="day"] .sound-object {
  border-color: rgba(116, 94, 194, 0.42);
  background:
    repeating-radial-gradient(circle, transparent 0 10px, rgba(21, 35, 58, 0.055) 10px 11px),
    conic-gradient(from 45deg, rgba(237, 75, 121, 0.16), transparent 22%, rgba(0, 170, 181, 0.15) 48%, rgba(242, 173, 61, 0.14) 68%, rgba(116, 94, 194, 0.16));
}

:root[data-theme="day"] .sound-label {
  background: var(--miami-pink);
}

/* Keep the low-resolution artifact silhouette after Journey's layout rules. */
.journey-node,
.is-resolved .journey-node {
  clip-path: polygon(0.45rem 0, 100% 0, 100% calc(100% - 0.45rem), calc(100% - 0.45rem) 100%, 0 100%, 0 0.45rem);
}

.is-resolved .journey-node-index,
.journey-thread-label span {
  border-radius: 0;
}

.thread-risk span { border-color: var(--miami-pink); color: var(--miami-pink); }
.thread-product span { border-color: var(--miami-cyan); color: var(--miami-cyan); }
.thread-systems span { border-color: var(--miami-yellow); color: var(--miami-yellow); }
.thread-creative span { border-color: var(--miami-violet); color: var(--miami-violet); }

:root[data-theme="day"] .journey-connectors .current-risk { stroke: var(--miami-pink); }
:root[data-theme="day"] .journey-connectors .current-product { stroke: var(--miami-cyan); }
:root[data-theme="day"] .journey-connectors .current-systems { stroke: var(--miami-yellow); }
:root[data-theme="day"] .journey-connectors .current-creative { stroke: var(--miami-violet); }

@media (max-width: 680px) {
  :root[data-theme="day"] .site-shell::after {
    opacity: 0.45;
    background-size: 6rem 2rem, 3rem 3rem, 9rem 9rem, 4rem 4rem;
  }
}

/* Artifact system v0.1 — a navigable archive rail. */
.artifact-index {
  --artifact-card-width: clamp(20rem, 29vw, 27rem);
  --artifact-gap: 1rem;
  margin-bottom: clamp(8rem, 13vw, 13rem);
}

.artifact-heading {
  margin-bottom: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.6fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.artifact-heading h2 {
  max-width: 13ch;
  margin: 1.2rem 0 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.8vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.artifact-heading > p {
  max-width: 30rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.7;
}

.artifact-browser {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.artifact-browser:focus-visible {
  outline: 1px solid var(--miami-cyan);
  outline-offset: 8px;
}

.artifact-controls {
  min-height: 5rem;
  padding: 0 var(--pixel-unit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--paper-faint), transparent 42%);
}

.artifact-controls p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--pixel);
  text-transform: uppercase;
}

.artifact-controls p span {
  color: var(--paper-muted);
  font-size: 0.48rem;
  letter-spacing: 0.11em;
}

.artifact-controls p strong {
  color: var(--paper);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.artifact-controls > div {
  display: flex;
  gap: var(--pixel-unit);
}

.artifact-controls button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--paper-faint);
  font-family: var(--pixel);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms steps(2, end);
}

.artifact-controls button:hover,
.artifact-controls button:focus-visible {
  border-color: var(--signal);
  color: var(--ink);
  background: var(--signal);
  transform: translate(-2px, -2px);
}

.artifact-viewport {
  position: relative;
  padding: calc(var(--pixel-unit) * 5) 0 calc(var(--pixel-unit) * 4);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0 92%, transparent 100%);
}

.artifact-viewport::-webkit-scrollbar {
  display: none;
}

.artifact-viewport::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: calc(var(--pixel-unit) * 2);
  left: 0;
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  background: var(--accent);
  box-shadow:
    var(--pixel-unit) 0 var(--accent),
    calc(var(--pixel-unit) * 2) calc(var(--pixel-unit) * -1) var(--miami-yellow),
    calc(var(--pixel-unit) * 2) var(--pixel-unit) var(--signal);
  animation: archive-runner 18s steps(14, end) infinite alternate;
}

.artifact-viewport::after {
  content: "";
  position: absolute;
  top: calc(var(--pixel-unit) * 2.5);
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--signal) 50%, var(--miami-violet));
  opacity: 0.32;
}

.artifact-track {
  display: flex;
  gap: var(--artifact-gap);
  width: max-content;
  transform: translateX(0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.artifact-browser[data-position="1"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -1)); }
.artifact-browser[data-position="2"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -2)); }
.artifact-browser[data-position="3"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -3)); }
.artifact-browser[data-position="4"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -4)); }
.artifact-browser[data-position="5"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -5)); }
.artifact-browser[data-position="6"] .artifact-track { transform: translateX(calc((var(--artifact-card-width) + var(--artifact-gap)) * -6)); }

.artifact-card {
  --artifact-color: var(--accent);
  position: relative;
  width: var(--artifact-card-width);
  min-height: 31rem;
  padding: clamp(1.5rem, 2.7vw, 2.4rem);
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  border: 1px solid color-mix(in srgb, var(--artifact-color) 46%, var(--line));
  color: var(--paper);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--artifact-color) 10%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel) 94%, transparent);
  clip-path: polygon(1rem 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%, 0 1rem);
  scroll-snap-align: start;
  text-decoration: none;
  transition: border-color 240ms ease, transform 260ms steps(3, end), box-shadow 240ms ease;
}

.artifact-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  width: calc(var(--pixel-unit) * 5);
  height: calc(var(--pixel-unit) / 2);
  background: var(--artifact-color);
}

.artifact-card::after {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  color: color-mix(in srgb, var(--artifact-color) 16%, transparent);
  font-family: var(--pixel);
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.12em;
  line-height: 0.8;
  pointer-events: none;
}

.artifact-card:nth-child(1)::after { content: "01"; }
.artifact-card:nth-child(2)::after { content: "02"; }
.artifact-card:nth-child(3)::after { content: "03"; }
.artifact-card:nth-child(4)::after { content: "04"; }
.artifact-card:nth-child(5)::after { content: "05"; }
.artifact-card:nth-child(6)::after { content: "06"; }
.artifact-card:nth-child(7)::after { content: "07"; }

.artifact-card:hover,
.artifact-card:focus-visible {
  border-color: var(--artifact-color);
  box-shadow: 0.8rem 0.8rem 0 color-mix(in srgb, var(--artifact-color) 15%, transparent);
  transform: translate(-0.25rem, -0.25rem);
}

.artifact-card.is-selected {
  border-color: var(--artifact-color);
  box-shadow: inset 0 -4px 0 var(--artifact-color);
}

.artifact-field { --artifact-color: var(--miami-cyan); }
.artifact-work { --artifact-color: var(--miami-pink); }
.artifact-system { --artifact-color: var(--miami-yellow); }
.artifact-ai { --artifact-color: var(--miami-violet); }
.artifact-note { --artifact-color: var(--miami-cyan); }
.artifact-sound { --artifact-color: var(--miami-violet); }
.artifact-prototype { --artifact-color: var(--miami-pink); }

.artifact-card-top,
.artifact-relations {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.artifact-card-top {
  color: var(--paper-muted);
}

.artifact-card-top span:first-child {
  color: var(--artifact-color);
}

.artifact-type {
  margin: clamp(3.5rem, 6vw, 6rem) 0 0.75rem;
  color: var(--artifact-color);
  font-family: var(--pixel);
  font-size: 0.52rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.artifact-card h3 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.artifact-summary {
  max-width: 31rem;
  margin: 2rem 0;
  color: var(--paper-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.artifact-relations {
  position: relative;
  z-index: 1;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  line-height: 1.5;
}

.artifact-open {
  position: relative;
  z-index: 1;
  margin-top: 1.5rem;
  color: var(--paper);
  font-family: var(--pixel);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artifact-instruction {
  margin: 0;
  padding: 1.1rem var(--pixel-unit);
  border-top: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.artifact-key-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.artifact-key-cue kbd {
  min-width: 24px;
  padding: 3px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 11%, transparent);
  color: var(--ink);
  font: inherit;
  line-height: 1;
  text-align: center;
}

.artifact-reader {
  position: relative;
  scroll-margin-top: 6rem;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--miami-cyan) 5%, transparent), transparent 35%),
    linear-gradient(315deg, color-mix(in srgb, var(--miami-pink) 5%, transparent), transparent 38%);
}

.artifact-reader::before {
  content: "READ / RELATE / RETURN";
  position: absolute;
  top: 9rem;
  right: calc(var(--pixel-unit) * -2);
  color: color-mix(in srgb, var(--paper) 22%, transparent);
  font-family: var(--pixel);
  font-size: 0.42rem;
  letter-spacing: 0.16em;
  transform: rotate(90deg);
  transform-origin: right top;
}

.artifact-reader-head {
  padding: clamp(3rem, 6vw, 6rem) var(--pixel-unit) clamp(2rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
}

.artifact-reader-head p {
  max-width: 30rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.65;
}

.artifact-reader-head > div > p {
  margin-bottom: 1rem;
  color: var(--miami-cyan);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.artifact-reader-head h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.87;
}

.artifact-dossier-stack {
  border-top: 1px solid var(--line);
}

.artifact-dossier {
  --dossier-color: var(--miami-cyan);
  display: none;
}

.artifact-dossier.is-active {
  display: block;
  animation: dossier-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dossier-field { --dossier-color: var(--miami-cyan); }
.dossier-work { --dossier-color: var(--miami-pink); }
.dossier-system { --dossier-color: var(--miami-yellow); }
.dossier-ai { --dossier-color: var(--miami-violet); }
.dossier-note { --dossier-color: var(--miami-cyan); }
.dossier-sound { --dossier-color: var(--miami-violet); }
.dossier-prototype { --dossier-color: var(--miami-pink); }

.dossier-signal {
  min-height: 3rem;
  padding: 0 var(--pixel-unit);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dossier-signal span:first-child {
  color: var(--dossier-color);
}

.dossier-signal span:nth-child(2) {
  text-align: center;
}

.dossier-signal span:last-child {
  text-align: right;
}

.dossier-title {
  min-height: clamp(24rem, 39vw, 37rem);
  padding: clamp(3rem, 7vw, 7rem) clamp(var(--pixel-unit), 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1.3fr) minmax(15rem, 0.55fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 6rem);
}

.dossier-title > p:first-child {
  margin: 0;
  color: var(--dossier-color);
  font-family: var(--pixel);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.dossier-title h3 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 7.2vw, 8.2rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.85;
}

.dossier-title > p:last-child {
  max-width: 29rem;
  margin: 0;
  padding-top: 0.5rem;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.65;
}

.dossier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dossier-grid > div {
  min-height: 17rem;
  padding: clamp(2rem, 4vw, 4rem);
}

.dossier-grid > div + div {
  border-left: 1px solid var(--line);
}

.dossier-grid span,
.dossier-actions > span {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--dossier-color);
  font-family: var(--pixel);
  font-size: 0.47rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dossier-grid p,
.dossier-grid li {
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
}

.dossier-grid p {
  max-width: 33rem;
  margin: 0;
}

.dossier-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-grid li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.dossier-grid li::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 0;
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  background: var(--dossier-color);
}

.dossier-footer {
  padding: clamp(2rem, 4vw, 4rem) var(--pixel-unit);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, auto);
  align-items: end;
  gap: 2rem;
}

.dossier-capabilities,
.dossier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.dossier-capabilities span {
  position: relative;
  padding-left: 1rem;
  color: var(--paper);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dossier-capabilities span::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--dossier-color);
}

.dossier-actions {
  justify-content: flex-end;
  align-items: center;
}

.dossier-actions > span {
  width: 100%;
  margin: 0;
  text-align: right;
}

.dossier-actions a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.47rem;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}

.dossier-actions a:hover,
.dossier-actions a:focus-visible {
  border-color: var(--dossier-color);
  color: var(--paper);
}

@keyframes dossier-enter {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
    clip-path: inset(0 0 20% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}

.artifact-index + .section-heading {
  padding-top: clamp(7rem, 11vw, 11rem);
  border-top: 1px solid var(--line);
}

@keyframes archive-runner {
  from { transform: translateX(0); }
  to { transform: translateX(min(75vw, 64rem)); }
}

@media (max-width: 980px) {
  .artifact-index {
    --artifact-card-width: min(72vw, 25rem);
  }

  .artifact-heading {
    grid-template-columns: 1fr;
  }

  .artifact-reader-head,
  .dossier-title {
    grid-template-columns: 1fr;
  }

  .dossier-title {
    min-height: auto;
  }

  .dossier-title h3 {
    max-width: 12ch;
  }

  .dossier-grid {
    grid-template-columns: 1fr;
  }

  .dossier-grid > div {
    min-height: auto;
  }

  .dossier-grid > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 680px) {
  .artifact-index {
    --artifact-card-width: min(82vw, 22rem);
  }

  .artifact-controls > div {
    display: none;
  }

  .artifact-track,
  .artifact-browser[data-position] .artifact-track {
    transform: none;
  }

  .artifact-card {
    min-height: 28rem;
  }

  .artifact-card h3 {
    font-size: 2rem;
  }

  .artifact-key-cue {
    display: none;
  }

  .artifact-reader-head {
    grid-template-columns: 1fr;
  }

  .artifact-reader-head h2 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .dossier-title {
    padding-right: var(--pixel-unit);
    padding-left: var(--pixel-unit);
  }

  .dossier-title h3 {
    font-size: clamp(3.2rem, 16vw, 5.2rem);
  }

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

  .dossier-actions {
    justify-content: flex-start;
  }

  .dossier-actions > span {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artifact-track,
  .artifact-card {
    transition: none !important;
  }

  .artifact-viewport::before {
    animation: none;
  }

  .artifact-dossier.is-active {
    animation: none;
  }
}

/* Journey chronology — sequential evidence with resolved chapter readouts. */
.journey-chronology-section {
  --artifact-color: var(--miami-yellow);
  border-top: 1px solid var(--line);
}

.journey-chronology-intro {
  padding-bottom: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 8vw, 9rem);
}

.journey-chronology-intro h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 7vw, 7.8rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.87;
}

.journey-chronology-intro > p {
  max-width: 31rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.7;
}

.journey-chronology {
  --chapter-width: clamp(16rem, 22vw, 20rem);
  --chapter-gap: clamp(0.65rem, 1vw, 1rem);
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.journey-chronology:focus-visible {
  outline: 1px solid var(--miami-yellow);
  outline-offset: 8px;
}

.chronology-controls {
  min-height: 5rem;
  padding: 0 var(--pixel-unit);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--miami-yellow) 7%, transparent), transparent 48%);
}

.chronology-controls > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--pixel);
  text-transform: uppercase;
}

.chronology-controls > div:first-child span,
.chronology-controls > div:first-child strong,
.chronology-controls > p {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.47rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chronology-controls > div:first-child strong {
  color: var(--paper);
}

.chronology-controls > p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.chronology-controls kbd {
  min-width: 24px;
  padding: 3px 6px 2px;
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--paper);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--paper) 10%, transparent);
  font: inherit;
  line-height: 1;
  text-align: center;
}

.chronology-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--pixel-unit);
}

.chronology-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.chronology-lens {
  min-height: 2.5rem;
  padding: 0.65rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid var(--line);
  color: var(--paper-muted);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  font-family: var(--pixel);
  font-size: 0.44rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.chronology-lens:hover,
.chronology-lens:focus-visible,
.chronology-lens[aria-pressed="true"] {
  border-color: var(--miami-violet);
  color: var(--paper);
  background: color-mix(in srgb, var(--miami-violet) 10%, var(--panel));
}

.chronology-lens i {
  color: var(--miami-violet);
  font-family: var(--pixel);
  font-size: 0.72rem;
  font-style: normal;
}

.chronology-lens .is-hidden {
  display: none;
}

.chronology-buttons button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--paper-faint);
  font-family: var(--pixel);
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms steps(2, end);
}

.chronology-buttons button:hover,
.chronology-buttons button:focus-visible {
  border-color: var(--miami-yellow);
  color: var(--ink);
  background: var(--miami-yellow);
  transform: translate(-2px, -2px);
}

.chronology-viewport {
  position: relative;
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2.5rem, 5vw, 5rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0 94%, transparent 100%);
}

.chronology-viewport::-webkit-scrollbar {
  display: none;
}

.chronology-viewport::before {
  content: "";
  position: absolute;
  top: calc(clamp(3rem, 6vw, 6rem) + 2.05rem);
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--miami-cyan), var(--miami-pink), var(--miami-yellow), var(--miami-violet));
  opacity: 0.48;
}

.chronology-track {
  position: relative;
  z-index: 1;
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: var(--chapter-gap);
  transform: translateX(0);
  transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.journey-chronology[data-chapter="1"] .chronology-track { transform: translateX(calc((var(--chapter-width) + var(--chapter-gap)) * -1)); }
.journey-chronology[data-chapter="2"] .chronology-track { transform: translateX(calc((var(--chapter-width) + var(--chapter-gap)) * -2)); }
.journey-chronology[data-chapter="3"] .chronology-track { transform: translateX(calc((var(--chapter-width) + var(--chapter-gap)) * -3)); }
.journey-chronology[data-chapter="4"] .chronology-track,
.journey-chronology[data-chapter="5"] .chronology-track,
.journey-chronology[data-chapter="6"] .chronology-track { transform: translateX(calc((var(--chapter-width) + var(--chapter-gap)) * -3)); }

.chronology-chapter {
  --chapter-color: var(--miami-cyan);
  position: relative;
  width: var(--chapter-width);
  min-height: 18rem;
  padding: 1.5rem;
  display: grid;
  grid-template-rows: 4.25rem auto 1fr auto 1.5rem;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--chapter-color) 28%, var(--line));
  color: var(--paper);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--chapter-color) 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--panel) 82%, transparent);
  font: inherit;
  text-align: left;
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  cursor: pointer;
  transition: transform 220ms steps(3, end), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.chronology-chapter:hover,
.chronology-chapter:focus-visible {
  border-color: var(--chapter-color);
  transform: translateY(-0.5rem);
}

.chronology-chapter.is-selected {
  border-color: var(--chapter-color);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--chapter-color) 15%, transparent), transparent 55%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: inset 0 -4px 0 var(--chapter-color);
}

.chapter-support { --chapter-color: var(--miami-cyan); }
.chapter-web { --chapter-color: var(--miami-yellow); }
.chapter-risk { --chapter-color: var(--miami-pink); }
.chapter-program { --chapter-color: var(--miami-violet); }
.chapter-operator { --chapter-color: var(--miami-yellow); }
.chapter-ai { --chapter-color: var(--miami-violet); }
.chapter-current { --chapter-color: var(--miami-cyan); }

.chronology-node {
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--chapter-color);
  color: var(--chapter-color);
  background: var(--panel);
  font-family: var(--pixel);
  font-size: 0.66rem;
  line-height: 1;
}

.chronology-chapter.is-selected .chronology-node {
  color: var(--ink);
  background: var(--chapter-color);
}

.chronology-chapter time,
.chronology-chapter small {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chronology-chapter time {
  margin-top: 1.5rem;
  color: var(--chapter-color);
}

.chronology-chapter strong {
  max-width: 12ch;
  margin: 0.75rem 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.chronology-chapter .duration {
  align-self: end;
  height: 4px;
  display: block;
  background: var(--chapter-color);
  opacity: 0.72;
}

.duration-1 { width: 22%; }
.duration-2 { width: 42%; }
.duration-3 { width: 62%; }
.duration-5 { width: 100%; }

.parallel-practice {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--miami-violet) 6%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 34%, transparent);
  transition:
    max-height 850ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease,
    visibility 0s linear 850ms;
}

.shows-parallel .parallel-practice {
  max-height: 44rem;
  border-top: 1px solid var(--line);
  opacity: 1;
  visibility: visible;
  transition:
    max-height 850ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease 120ms,
    visibility 0s;
}

.parallel-practice-head {
  padding: clamp(2.5rem, 5vw, 5rem) var(--pixel-unit);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
  border-bottom: 1px solid var(--line);
}

.parallel-practice-head > div > span {
  display: block;
  margin-bottom: 1rem;
  color: var(--miami-violet);
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.parallel-practice-head strong {
  max-width: 13ch;
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.92;
}

.parallel-practice-head > p {
  max-width: 30rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
}

.parallel-practice-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.parallel-practice-viewport::-webkit-scrollbar {
  display: none;
}

.parallel-timeline {
  position: relative;
  min-width: 70rem;
  padding: 1.5rem var(--pixel-unit) 2.5rem;
  display: grid;
  grid-template-columns: repeat(7, minmax(8rem, 1fr));
  grid-template-rows: 2.5rem repeat(3, minmax(4.5rem, auto));
  gap: var(--pixel-unit);
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(14.285% - 1px),
    var(--line) calc(14.285% - 1px),
    var(--line) 14.285%
  );
}

.parallel-scale {
  grid-column: 1 / 8;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.43rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.parallel-scale span:nth-child(2),
.parallel-scale span:nth-child(3) {
  text-align: center;
}

.parallel-scale span:last-child {
  text-align: right;
}

.practice-band {
  --practice-color: var(--miami-violet);
  position: relative;
  min-height: 4.5rem;
  padding: 1rem 1.25rem 1rem 1.75rem;
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid color-mix(in srgb, var(--practice-color) 42%, var(--line));
  color: var(--paper);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-color) 13%, transparent), transparent 72%),
    color-mix(in srgb, var(--panel) 83%, transparent);
  clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0.75rem 100%, 0 calc(100% - 0.75rem));
  text-decoration: none;
  transition: border-color 180ms ease, transform 180ms steps(2, end), background 180ms ease;
}

.practice-band::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.6rem;
  width: 6px;
  height: 6px;
  background: var(--practice-color);
  transform: translateY(-50%);
}

.practice-band:hover,
.practice-band:focus-visible {
  border-color: var(--practice-color);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--practice-color) 20%, transparent), transparent 78%),
    color-mix(in srgb, var(--panel) 90%, transparent);
  transform: translateX(0.35rem);
}

.practice-band > span,
.practice-band > small {
  color: var(--practice-color);
  font-family: var(--pixel);
  font-size: 0.44rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.practice-band > strong {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 400;
}

.practice-band > small {
  color: var(--paper-muted);
}

.practice-sound {
  --practice-color: var(--miami-violet);
  grid-column: 1 / 8;
  grid-row: 2;
}

.practice-writing {
  --practice-color: var(--miami-cyan);
  grid-column: 3 / 8;
  grid-row: 3;
}

.practice-ventures {
  --practice-color: var(--miami-pink);
  grid-column: 5 / 8;
  grid-row: 4;
}

.parallel-note {
  margin: 0;
  padding: 1.1rem var(--pixel-unit);
  border-top: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.chronology-readouts {
  border-top: 1px solid var(--line);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--miami-yellow) 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 52%, transparent);
}

.chronology-readout {
  display: none;
  min-height: 39rem;
}

.chronology-readout.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  animation: chronology-resolve 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.readout-meta {
  grid-column: 1 / -1;
  min-height: 3rem;
  padding: 0 var(--pixel-unit);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.readout-meta span:first-child {
  color: var(--miami-yellow);
}

.readout-meta span:nth-child(2) {
  text-align: center;
}

.readout-meta span:last-child {
  text-align: right;
}

.chronology-readout h3 {
  margin: 0;
  padding: clamp(3rem, 6vw, 6rem);
  border-right: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6.2vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.88;
}

.readout-reading {
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.readout-reading > div {
  padding: clamp(2.5rem, 4vw, 4rem);
}

.readout-reading > div + div {
  border-top: 1px solid var(--line);
}

.readout-reading span,
.chronology-readout footer > span {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--miami-yellow);
  font-family: var(--pixel);
  font-size: 0.47rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.readout-reading p {
  max-width: 34rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.72;
}

.chronology-readout footer {
  grid-column: 1 / -1;
  min-height: 7rem;
  padding: 2rem clamp(var(--pixel-unit), 4vw, 4rem);
  display: grid;
  grid-template-columns: auto minmax(14rem, 1fr) auto auto auto;
  align-items: center;
  gap: 1rem 2rem;
  border-top: 1px solid var(--line);
}

.chronology-readout footer > span {
  margin: 0;
}

.chronology-readout footer strong {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 400;
}

.chronology-readout footer i {
  padding-left: 1rem;
  position: relative;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.45rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chronology-readout footer i::before {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--miami-yellow);
}

.readout-evidence {
  min-width: 8.5rem;
  padding: 0.8rem 1rem;
  display: grid;
  gap: 0.3rem;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--miami-yellow) 42%, var(--line));
  color: var(--paper);
  background: color-mix(in srgb, var(--miami-yellow) 7%, transparent);
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms steps(2, end);
}

.readout-evidence span,
.readout-evidence strong {
  margin: 0;
  font-family: var(--pixel);
  font-size: 0.43rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.readout-evidence span {
  color: var(--paper-muted);
}

.readout-evidence strong {
  color: var(--miami-yellow);
}

.readout-evidence:hover,
.readout-evidence:focus-visible {
  border-color: var(--miami-yellow);
  background: color-mix(in srgb, var(--miami-yellow) 14%, transparent);
  transform: translate(-2px, -2px);
}

@keyframes chronology-resolve {
  from {
    opacity: 0;
    transform: translateY(1rem);
    clip-path: inset(0 0 18% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0);
  }
}

@media (max-width: 980px) {
  .journey-chronology-intro {
    grid-template-columns: 1fr;
  }

  .chronology-controls {
    grid-template-columns: 1fr auto;
  }

  .chronology-controls > p {
    display: none;
  }

  .chronology-readout.is-active {
    grid-template-columns: 1fr;
  }

  .chronology-readout h3 {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .readout-evidence {
    justify-self: start;
  }

  .parallel-practice-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .journey-chronology {
    --chapter-width: min(82vw, 20rem);
  }

  .chronology-buttons {
    display: none;
  }

  .chronology-lens {
    max-width: 10.5rem;
  }

  .chronology-track,
  .journey-chronology[data-chapter] .chronology-track {
    transform: none;
  }

  .journey-chronology-intro h2 {
    font-size: clamp(3.4rem, 15vw, 5rem);
  }

  .chronology-readout h3 {
    padding-right: var(--pixel-unit);
    padding-left: var(--pixel-unit);
    font-size: clamp(3.2rem, 15vw, 5rem);
  }

  .readout-reading > div {
    padding-right: var(--pixel-unit);
    padding-left: var(--pixel-unit);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chronology-track,
  .chronology-chapter {
    transition: none !important;
  }

  .chronology-readout.is-active {
    animation: none;
  }

  .parallel-practice,
  .practice-band {
    transition: none !important;
  }
}

/* Canonical artifact detail template. */
.artifact-detail-page {
  --detail-color: var(--miami-cyan);
  width: var(--page);
  margin: 0 auto;
  padding-top: 6.5rem;
}

.artifact-detail-page[data-kind="work"] {
  --detail-color: var(--miami-pink);
}

.artifact-detail-page[data-kind="sound"] {
  --detail-color: var(--miami-violet);
}

.artifact-detail-hero {
  min-height: min(58rem, 92vh);
  padding: clamp(3rem, 7vw, 7rem) 0 clamp(4rem, 8vw, 8rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-bottom: 1px solid var(--line);
}

.artifact-detail-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.artifact-back {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.artifact-back:hover,
.artifact-back:focus-visible {
  color: var(--detail-color);
}

.artifact-detail-nav p {
  margin: 0;
  display: flex;
  gap: clamp(1rem, 3vw, 3rem);
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.artifact-detail-nav p span:first-child {
  color: var(--detail-color);
}

.artifact-detail-heading {
  padding: clamp(5rem, 10vw, 10rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 10rem);
}

.artifact-detail-kind {
  margin: 0 0 1.5rem;
  color: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.artifact-detail-heading h1 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.6rem, 9vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.artifact-detail-dek {
  max-width: 34rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.65;
}

.artifact-detail-actions {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  border-top: 1px solid var(--line);
}

.artifact-copy-link,
.artifact-primary-link {
  min-height: 2.75rem;
  padding: 0.8rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  border: 1px solid var(--line);
  color: var(--paper);
  background: var(--paper-faint);
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms steps(2, end);
}

.artifact-copy-link:hover,
.artifact-copy-link:focus-visible,
.artifact-copy-link[data-copy-state="copied"],
.artifact-primary-link:hover,
.artifact-primary-link:focus-visible {
  border-color: var(--detail-color);
  color: var(--ink);
  background: var(--detail-color);
  transform: translate(-2px, -2px);
}

.artifact-copy-link strong,
.artifact-primary-link span {
  font-size: 0.8rem;
  font-weight: 400;
}

.artifact-copy-status {
  flex: 1;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.42rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.artifact-detail-visual {
  position: relative;
  min-height: clamp(34rem, 55vw, 58rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-color) 8%, transparent), transparent 44%),
    repeating-linear-gradient(0deg, transparent 0 47px, var(--line) 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--line) 48px);
}

.artifact-visual-caption {
  position: absolute;
  right: var(--pixel-unit);
  bottom: var(--pixel-unit);
  max-width: 36rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.43rem;
  letter-spacing: 0.07em;
  line-height: 1.6;
  text-align: right;
  text-transform: uppercase;
}

.work-system-map {
  position: relative;
  width: min(76rem, 92%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
}

.artifact-detail-page[data-kind="sound"] .work-system-map,
.artifact-detail-page[data-kind="work"] .sound-archive-object {
  display: none;
}

.system-axis {
  position: absolute;
  z-index: 0;
  top: 3rem;
  right: 2rem;
  left: 2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--miami-pink), var(--miami-yellow), var(--miami-cyan));
}

.system-stage {
  position: relative;
  z-index: 1;
  min-height: 20rem;
  padding: 1.5rem;
  display: grid;
  grid-template-rows: 3.25rem 1fr auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.system-stage > span {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--detail-color);
  color: var(--ink);
  background: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.52rem;
}

.system-stage strong {
  align-self: center;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.7vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.system-stage small {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.43rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.system-pulse {
  position: absolute;
  z-index: 3;
  top: calc(3rem - 4px);
  left: 2rem;
  width: 8px;
  height: 8px;
  background: var(--detail-color);
  animation: system-travel 9s steps(12, end) infinite;
}

.pulse-02 { animation-delay: -3s; }
.pulse-03 { animation-delay: -6s; }

@keyframes system-travel {
  from { transform: translateX(0); }
  to { transform: translateX(min(68rem, 78vw)); }
}

.sound-archive-object {
  width: min(72rem, 88%);
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.sound-disc {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--detail-color) 65%, var(--line));
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, color-mix(in srgb, var(--detail-color) 18%, transparent) 11px 12px),
    radial-gradient(circle, var(--panel) 0 13%, transparent 13.5%),
    color-mix(in srgb, var(--panel) 78%, transparent);
  animation: archive-disc-turn 22s linear infinite;
}

.sound-disc::before,
.sound-disc::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid color-mix(in srgb, var(--detail-color) 30%, transparent);
  border-radius: 50%;
}

.sound-disc::after {
  inset: 36%;
  background: var(--detail-color);
}

.sound-disc span {
  position: relative;
  z-index: 2;
  color: var(--ink);
  font-family: var(--pixel);
  font-size: clamp(1.2rem, 3vw, 2.4rem);
  letter-spacing: -0.08em;
}

.sound-disc i {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

@keyframes archive-disc-turn {
  to { transform: rotate(360deg); }
}

.sound-spectrum {
  height: clamp(14rem, 28vw, 27rem);
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1vw, 0.9rem);
}

.sound-spectrum i {
  flex: 1;
  height: 25%;
  background: linear-gradient(var(--miami-cyan), var(--detail-color), var(--miami-pink));
  transform-origin: center;
  animation: spectrum-breathe 3.6s steps(6, end) infinite alternate;
}

.sound-spectrum i:nth-child(2n) { height: 58%; animation-delay: -0.7s; }
.sound-spectrum i:nth-child(3n) { height: 88%; animation-delay: -1.3s; }
.sound-spectrum i:nth-child(4n) { height: 38%; animation-delay: -2.1s; }
.sound-spectrum i:nth-child(5n) { height: 72%; animation-delay: -2.8s; }

@keyframes spectrum-breathe {
  0% { transform: scaleY(0.42); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 0.95; }
}

.sound-archive-object > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

.artifact-detail-reading {
  min-height: 34rem;
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1.68fr);
  border-bottom: 1px solid var(--line);
}

.artifact-reading-index {
  padding: clamp(3rem, 6vw, 6rem) var(--pixel-unit);
  border-right: 1px solid var(--line);
}

.artifact-reading-index > span {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--detail-color);
  color: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.55rem;
}

.artifact-reading-index p {
  margin: 2rem 0 0;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.artifact-reading-copy {
  padding: clamp(3rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
}

.artifact-reading-copy h2 {
  max-width: 13ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6.4vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.88;
}

.artifact-reading-copy > p {
  max-width: 35rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.72;
}

.artifact-evidence {
  padding: clamp(6rem, 10vw, 10rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(24rem, 1.25fr);
  gap: clamp(4rem, 10vw, 12rem);
  border-bottom: 1px solid var(--line);
}

.artifact-evidence h2,
.artifact-provenance h2 {
  max-width: 11ch;
  margin: 1rem 0 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 5.7rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.artifact-evidence ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.artifact-evidence li {
  min-height: 8.5rem;
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.artifact-evidence li span {
  color: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.5rem;
}

.artifact-evidence li p {
  max-width: 42rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.65;
}

.artifact-capability-strip {
  min-height: 8rem;
  padding: 2rem var(--pixel-unit);
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.artifact-capability-strip > p {
  margin: 0;
  color: var(--detail-color);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.artifact-capability-strip > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem 2.5rem;
}

.artifact-capability-strip span {
  position: relative;
  padding-left: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.artifact-capability-strip span::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--detail-color);
}

.artifact-provenance {
  padding: clamp(6rem, 10vw, 10rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr);
  gap: clamp(4rem, 10vw, 12rem);
  border-bottom: 1px solid var(--line);
}

.artifact-provenance > div:last-child > p {
  max-width: 42rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.72;
}

.artifact-provenance .artifact-provisional {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--miami-yellow) 52%, var(--line));
  color: var(--paper);
  background: color-mix(in srgb, var(--miami-yellow) 7%, transparent);
  font-family: var(--pixel);
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: uppercase;
}

.artifact-related {
  padding: clamp(5rem, 8vw, 8rem) 0;
}

.artifact-related > p {
  margin: 0 0 2rem;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.47rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.artifact-related > a {
  min-height: 8rem;
  padding: 1.5rem var(--pixel-unit);
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: center;
  gap: 2rem;
  border-top: 1px solid var(--line);
  color: var(--paper);
  text-decoration: none;
  transition: color 160ms ease, padding 180ms steps(2, end), background 160ms ease;
}

.artifact-related > a:last-child {
  border-bottom: 1px solid var(--line);
}

.artifact-related > a:hover,
.artifact-related > a:focus-visible {
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  color: var(--detail-color);
  background: color-mix(in srgb, var(--detail-color) 6%, transparent);
}

.artifact-related a > span {
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
}

.artifact-related a > strong {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
}

.artifact-related a > i {
  font-family: var(--pixel);
  font-size: 1rem;
  font-style: normal;
}

@media (max-width: 980px) {
  .artifact-detail-heading,
  .artifact-reading-copy,
  .artifact-evidence,
  .artifact-provenance {
    grid-template-columns: 1fr;
  }

  .artifact-detail-heading h1 {
    max-width: 11ch;
  }

  .work-system-map {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-axis,
  .system-pulse {
    display: none;
  }

  .sound-archive-object {
    grid-template-columns: 1fr;
  }

  .sound-disc {
    width: min(28rem, 78vw);
    margin: 0 auto;
  }

  .sound-spectrum {
    height: 15rem;
  }
}

@media (max-width: 680px) {
  .artifact-detail-page {
    padding-top: 7.25rem;
  }

  .artifact-detail-hero {
    min-height: auto;
  }

  .artifact-detail-nav {
    align-items: flex-start;
  }

  .artifact-detail-nav p {
    display: grid;
    gap: 0.35rem;
    text-align: right;
  }

  .artifact-detail-heading {
    padding: 5rem 0;
  }

  .artifact-detail-heading h1 {
    font-size: clamp(4rem, 20vw, 6rem);
  }

  .artifact-detail-actions {
    padding: 1rem 0;
    flex-wrap: wrap;
  }

  .artifact-copy-status {
    flex-basis: 100%;
    order: 3;
  }

  .work-system-map {
    grid-template-columns: 1fr;
    padding: 3rem 0 6rem;
  }

  .system-stage {
    min-height: 15rem;
  }

  .artifact-detail-reading {
    grid-template-columns: 1fr;
  }

  .artifact-reading-index {
    padding: 2rem var(--pixel-unit);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .artifact-reading-copy {
    padding-right: var(--pixel-unit);
    padding-left: var(--pixel-unit);
  }

  .artifact-reading-copy h2 {
    font-size: clamp(3.2rem, 16vw, 5rem);
  }

  .artifact-evidence,
  .artifact-provenance {
    gap: 3rem;
  }

  .artifact-capability-strip {
    grid-template-columns: 1fr;
  }

  .artifact-capability-strip > div {
    justify-content: flex-start;
  }

  .artifact-related > a {
    grid-template-columns: 1fr auto;
  }

  .artifact-related a > span {
    grid-column: 1 / -1;
  }

  .artifact-visual-caption {
    right: var(--pixel-unit);
    left: var(--pixel-unit);
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-pulse,
  .sound-disc,
  .sound-spectrum i {
    animation: none;
  }
}

/* Orientation and input polish for the archive shell. */
#main-content:focus {
  outline: none;
}

.site-link {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
}

.theme-toggle {
  min-height: 2.5rem;
}

.site-link[aria-current] {
  color: var(--paper);
}

.site-link[aria-current]::before {
  color: var(--signal);
}

.site-link[aria-current]::after {
  right: 0;
  height: 2px;
  background: var(--signal);
}

@media (max-width: 680px) {
  .site-nav {
    scroll-padding-inline: 0.25rem;
    scroll-snap-type: inline proximity;
  }

  .site-link {
    flex: none;
    scroll-snap-align: start;
  }
}

@media (forced-colors: active) {
  .site-link[aria-current]::after {
    background: Highlight;
  }
}

/* jorgevillavicencio.com identity system. */
.brand-mark img {
  width: 100%;
  height: 100%;
  padding: 0.22rem;
  display: block;
  image-rendering: pixelated;
  object-fit: contain;
}

.brand-mark {
  overflow: hidden;
}

.brand-mark::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0.22rem;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(237, 75, 121, 0.22) 0%,
      #ff88ad 24%,
      rgba(238, 232, 221, 0.96) 50%,
      #61e4de 76%,
      rgba(0, 170, 181, 0.22) 100%
    ) center -0.35rem / 100% 0.22rem no-repeat;
  -webkit-mask: url("/brand/jv-monogram-scan-mask.svg") center / contain no-repeat;
  mask: url("/brand/jv-monogram-scan-mask.svg") center / contain no-repeat;
  mix-blend-mode: screen;
}

.site-brand:hover .brand-mark::after,
.site-brand:focus-visible .brand-mark::after {
  animation: brand-scanline 620ms steps(7, end) both;
}

.site-brand:hover .brand-mark img,
.site-brand:focus-visible .brand-mark img {
  animation: brand-pixel-nudge 620ms steps(3, end) both;
}

@keyframes brand-scanline {
  0% {
    opacity: 0;
    background-position: center -0.35rem;
  }
  14%, 82% { opacity: 0.92; }
  100% {
    opacity: 0;
    background-position: center calc(100% + 0.35rem);
  }
}

@keyframes brand-pixel-nudge {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(1px, 0); }
  66% { transform: translate(-1px, 1px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-brand:hover .brand-mark::after,
  .site-brand:focus-visible .brand-mark::after,
  .site-brand:hover .brand-mark img,
  .site-brand:focus-visible .brand-mark img {
    animation: none;
  }
}

.identity-page {
  width: var(--page);
  margin: 0 auto;
  padding-top: 7rem;
}

.identity-hero {
  min-height: min(52rem, 86vh);
  padding: clamp(3rem, 7vw, 7rem) 0 clamp(4rem, 8vw, 8rem);
  display: grid;
  grid-template-rows: auto 1fr;
  border-bottom: 1px solid var(--line);
}

.identity-record {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.identity-record p {
  margin: 0;
}

.identity-heading {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.5fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 10rem);
}

.identity-heading h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.82;
}

.identity-heading > p {
  max-width: 34rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.7;
}

.identity-primary {
  min-height: 48rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
  border-bottom: 1px solid var(--line);
}

.identity-stage {
  position: relative;
  min-height: 34rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    var(--paper-faint);
  background-size: 4rem 4rem;
}

.identity-stage::before,
.identity-stage::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-color: var(--miami-cyan);
  opacity: 0.72;
}

.identity-stage::before {
  top: 1rem;
  left: 1rem;
  border-top: 2px solid;
  border-left: 2px solid;
}

.identity-stage::after {
  right: 1rem;
  bottom: 1rem;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.identity-stage img {
  position: relative;
  z-index: 1;
  width: min(18rem, 48%);
  height: auto;
  filter: drop-shadow(1.5rem 1.5rem 0 var(--paper-faint));
  image-rendering: pixelated;
}

.identity-stage-primary img {
  width: min(25rem, 58%);
}

.identity-notes {
  padding: clamp(4rem, 8vw, 9rem) clamp(2rem, 6vw, 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line);
}

.identity-notes h2,
.identity-alternates > header h2 {
  margin: 1rem 0 2rem;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 6vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.93;
}

.identity-notes > p:not(.section-index) {
  max-width: 32rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.75;
}

.identity-use-line {
  margin-top: 4rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity-use-line span {
  color: var(--miami-pink);
}

.identity-use-line strong {
  font-weight: 400;
  text-align: right;
}

.identity-alternates {
  padding: clamp(6rem, 10vw, 12rem) 0;
  border-bottom: 1px solid var(--line);
}

.identity-alternates > header {
  max-width: 58rem;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.identity-alternate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.identity-alternate-grid article {
  background: var(--ink);
}

.identity-alternate-grid article > div:last-child {
  min-height: 20rem;
  padding: clamp(2rem, 4vw, 4rem);
}

.identity-alternate-grid span {
  color: var(--miami-cyan);
  font-family: var(--pixel);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.identity-refinements .identity-alternate-grid span {
  color: var(--miami-pink);
}

.identity-alternate-grid h3 {
  margin: 1.2rem 0 1.5rem;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.identity-alternate-grid p {
  max-width: 35rem;
  margin: 0;
  color: var(--paper-muted);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
}

.identity-wordmark {
  min-height: 54rem;
  padding: clamp(6rem, 11vw, 12rem) 0;
  display: grid;
  grid-template-columns: 0.35fr 1.4fr 0.5fr;
  align-items: end;
  gap: clamp(2rem, 5vw, 7rem);
}

.identity-wordmark > div {
  padding-left: clamp(1rem, 3vw, 3rem);
  border-left: 0.7rem solid var(--miami-pink);
}

.identity-wordmark h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(4rem, 9vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.78;
}

.identity-wordmark > div p,
.identity-wordmark > p:last-child {
  color: var(--paper-muted);
  font-family: var(--pixel);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: uppercase;
}

.identity-wordmark > div p {
  margin: 2rem 0 0;
  color: var(--miami-cyan);
}

.identity-wordmark > p:last-child {
  margin: 0;
}

@media (max-width: 980px) {
  .identity-heading,
  .identity-primary,
  .identity-wordmark {
    grid-template-columns: 1fr;
  }

  .identity-heading {
    align-content: end;
    align-items: start;
  }

  .identity-notes {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .identity-wordmark > .section-index {
    align-self: start;
  }
}

@media (max-width: 680px) {
  .identity-page {
    padding-top: 7.25rem;
  }

  .identity-hero {
    min-height: 42rem;
  }

  .identity-record {
    display: grid;
    gap: 0.4rem;
  }

  .identity-record p:last-child {
    color: var(--miami-cyan);
  }

  .identity-heading h1 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .identity-stage {
    min-height: 25rem;
  }

  .identity-alternate-grid {
    grid-template-columns: 1fr;
  }

  .identity-wordmark h2 {
    font-size: clamp(3.3rem, 17vw, 5.5rem);
  }
}

/* Mobile art direction — composed as a small-screen archive, not a stacked desktop. */
@media (max-width: 680px) {
  :root {
    --page: calc(100% - 2rem);
    --mobile-panel: color-mix(in srgb, var(--panel) 86%, transparent);
  }

  html {
    scroll-padding-top: 7.25rem;
  }

  body {
    overflow-x: hidden;
  }

  .site-header {
    width: 100%;
    min-height: 6.8rem;
    padding: 0.8rem 1rem 0;
    align-content: stretch;
    column-gap: 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--miami-cyan) 34%, var(--line));
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-pink) 7%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--ink) 90%, transparent), color-mix(in srgb, var(--ink) 72%, transparent));
    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--ink) 28%, transparent);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
  }

  :root[data-theme="day"] .site-header {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-pink) 9%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, transparent), color-mix(in srgb, var(--ink) 82%, transparent));
  }

  .site-brand,
  .theme-toggle {
    align-self: center;
  }

  .brand-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .theme-toggle {
    min-height: 2.55rem;
    padding-inline: 0.35rem;
  }

  .site-nav {
    position: relative;
    width: calc(100% + 2rem);
    min-height: 2.75rem;
    margin-left: -1rem;
    padding: 0.25rem 1rem 0;
    align-items: center;
    gap: 1.4rem;
    border-top: 1px solid var(--line);
    mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.25rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.25rem), transparent);
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .site-link {
    min-height: 2.45rem;
    font-family: var(--pixel);
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .hero {
    min-height: 100svh;
    padding-top: 8.4rem;
    padding-bottom: 1.25rem;
  }

  .hero-copy {
    padding: 3.5vh 0 3rem;
  }

  .hero-record {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
  }

  .hero h1 {
    max-width: 10ch;
    margin-top: 1.4rem;
    font-size: clamp(3.35rem, 15.4vw, 4.65rem);
    letter-spacing: -0.075em;
    line-height: 0.86;
  }

  .hero h1::after {
    right: 0;
    bottom: -1rem;
    width: 3.7rem;
    height: 0.4rem;
  }

  .hero-intro {
    margin: 2.7rem 0 2rem;
    gap: 1.35rem;
  }

  .hero-intro p {
    font-size: 1.05rem;
    line-height: 1.55;
  }

  .hero-intro .hero-aside {
    padding: 1rem 1rem 1.05rem 1.2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--miami-cyan);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--miami-cyan) 8%, transparent), transparent 70%),
      var(--mobile-panel);
    font-size: 0.94rem;
  }

  .hero-signal-glyph {
    position: relative;
    top: auto;
    right: auto;
    width: 6.25rem;
    margin: -0.2rem 0 0 auto;
    display: grid;
    opacity: 0.76;
  }

  .hero-signal-glyph > span {
    margin-top: -0.3rem;
    font-size: 0.37rem;
    line-height: 1.5;
  }

  .hero-footnote {
    min-height: auto;
    padding: 1rem 0 0;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 0.75rem;
  }

  .hero-footnote p {
    padding: 0.75rem;
    border: 1px solid var(--line);
    background: var(--mobile-panel);
    font-size: 0.46rem;
    line-height: 1.55;
  }

  .hero-footnote p:last-child {
    text-align: left;
  }

  .section-pad {
    padding: 5.25rem 0;
  }

  .section-index,
  .kicker,
  .overline,
  .work-tag {
    font-size: 0.53rem;
    line-height: 1.5;
  }

  .section-index {
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .section-index::before {
    background: var(--artifact-color, var(--accent));
  }

  .pattern-intro,
  .section-heading {
    margin-bottom: 3rem;
  }

  .pattern-intro {
    gap: 1.75rem;
  }

  .pattern-intro h2,
  .section-heading h2,
  .ideas-lead h2,
  .about-heading h2,
  .engagement h2,
  .sound-copy h2,
  .journey-map-intro h2,
  .current-anchor h2 {
    margin-top: 1.25rem;
    font-size: clamp(2.8rem, 12.5vw, 4rem);
    letter-spacing: -0.06em;
    line-height: 0.92;
  }

  .pattern-intro > p,
  .section-heading > p {
    font-size: 0.98rem;
    line-height: 1.65;
  }

  .field-toolbar {
    min-height: 4.65rem;
    padding: 0.55rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-cyan) 7%, transparent), transparent),
      var(--mobile-panel);
  }

  .field-control {
    width: 100%;
    min-height: 3.4rem;
    margin: 0;
    padding: 0 1rem;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--miami-cyan) 44%, var(--line));
    background: color-mix(in srgb, var(--miami-cyan) 5%, transparent);
    font-family: var(--pixel);
    font-size: 0.49rem;
  }

  .field-canvas {
    height: 36rem;
    background-size: 2rem 2rem;
  }

  .field-canvas::before {
    inset: 18% 4%;
    background:
      radial-gradient(circle at 28% 35%, color-mix(in srgb, var(--miami-pink) 16%, transparent), transparent 42%),
      radial-gradient(circle at 70% 65%, color-mix(in srgb, var(--miami-cyan) 19%, transparent), transparent 44%);
    filter: blur(2.75rem);
  }

  .field-column {
    bottom: 3.5rem;
  }

  .field-node {
    min-width: 4.25rem;
    font-size: 0.43rem;
  }

  .artifact-index {
    --artifact-card-width: calc(100vw - 3.5rem);
    --artifact-gap: 0.75rem;
  }

  .artifact-controls {
    min-height: 4.35rem;
    padding: 0 0.8rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-cyan) 8%, transparent), transparent 72%),
      var(--mobile-panel);
  }

  .artifact-controls p {
    width: 100%;
    justify-content: space-between;
  }

  .artifact-controls p::after {
    content: "Swipe to browse →";
    color: var(--miami-cyan);
    font-family: var(--pixel);
    font-size: 0.42rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  .artifact-viewport,
  .chronology-viewport {
    scroll-snap-type: inline mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 0 89%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0 89%, transparent 100%);
  }

  .artifact-viewport {
    padding: 3.25rem 0 2rem;
  }

  .artifact-card {
    min-height: 24.5rem;
    padding: 1.35rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .artifact-type {
    margin-top: 2.8rem;
  }

  .artifact-card h3 {
    font-size: clamp(1.85rem, 8.5vw, 2.35rem);
  }

  .artifact-summary {
    margin: 1.4rem 0;
  }

  .artifact-instruction {
    padding: 0.9rem 0.8rem;
    line-height: 1.5;
  }

  .artifact-reader::before {
    display: none;
  }

  .artifact-reader-head {
    padding: 3.5rem 0.8rem 2.5rem;
    gap: 1.5rem;
  }

  .artifact-reader-head h2 {
    max-width: 11ch;
    font-size: clamp(2.8rem, 12vw, 3.8rem);
  }

  .dossier-signal {
    padding: 0 0.8rem;
    font-size: 0.39rem;
  }

  .dossier-title {
    position: relative;
    padding: 3rem 1.15rem 3.25rem;
    gap: 1.25rem;
    border-left: 3px solid var(--dossier-color);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--dossier-color) 9%, transparent), transparent 58%),
      var(--mobile-panel);
  }

  .dossier-title h3 {
    max-width: 12ch;
    font-size: clamp(2.7rem, 12.2vw, 3.8rem);
    line-height: 0.89;
  }

  .dossier-title > p:last-child {
    padding-top: 0.25rem;
    font-size: 1rem;
  }

  .dossier-grid > div {
    min-height: auto;
    padding: 2.25rem 1.15rem;
  }

  .dossier-footer {
    padding: 2.25rem 1.15rem;
  }

  .work-item {
    padding: 2.5rem 0.25rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 1rem;
  }

  .work-item::after {
    width: 3px;
  }

  .work-body h3 {
    margin-top: 0.65rem;
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }

  .work-outcome {
    padding-top: 1rem;
    text-align: left;
  }

  .ideas-grid,
  .sound,
  .about,
  .engagement {
    gap: 3.25rem;
  }

  .ideas-lead {
    position: static;
  }

  .ideas-list article {
    padding: 2.25rem 0 2.25rem 0.7rem;
  }

  .ideas-list h3 {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem);
  }

  .sound-object {
    width: min(82vw, 21rem);
    justify-self: center;
  }

  .about-copy .about-lead {
    font-size: 1.4rem;
  }

  .engagement-copy {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--miami-pink);
    background: var(--mobile-panel);
  }

  .site-footer {
    min-height: auto;
    padding: 2.75rem 0 max(2.75rem, env(safe-area-inset-bottom));
    gap: 1.75rem;
  }

  .site-footer > div:first-child,
  .site-footer .footer-links,
  .site-footer .footer-meta {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line);
  }

  .footer-links {
    justify-content: space-between;
  }
}

@media (max-width: 680px) {
  /* The journey becomes a vertical signal diagram on mobile. */
  .journey-hero {
    min-height: auto;
    padding: 9.25rem 0 5.25rem;
    gap: 2.5rem;
  }

  .journey-hero h1 {
    max-width: 10.5ch;
    font-size: clamp(3.15rem, 14vw, 4.35rem);
    line-height: 0.9;
  }

  .journey-hero-note {
    padding: 1.1rem 1rem 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--miami-yellow);
    background: var(--mobile-panel);
  }

  .journey-toolbar {
    min-height: auto;
    padding: 0.75rem;
    gap: 0.65rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-yellow) 9%, transparent), transparent 70%),
      var(--mobile-panel);
  }

  .journey-state {
    width: 100%;
    padding: 0 0.25rem 0.6rem;
    border-bottom: 1px solid var(--line);
  }

  .journey-control {
    width: 100%;
    min-height: 3.35rem;
    padding: 0 0.9rem;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--miami-yellow) 45%, var(--line));
    background: color-mix(in srgb, var(--miami-yellow) 6%, transparent);
    font-family: var(--pixel);
    font-size: 0.48rem;
  }

  .journey-mode-header {
    min-height: 7rem;
    padding: 1.45rem 0 1.2rem;
    align-items: end;
  }

  .understood-mode-copy {
    top: auto;
    bottom: 1.2rem;
  }

  .mode-copy span {
    font-family: var(--pixel);
    font-size: 0.42rem;
  }

  .mode-copy strong {
    max-width: 16ch;
    font-size: 1.45rem;
    line-height: 1.06;
  }

  .journey-canvas,
  .is-resolved .journey-canvas {
    padding: 2.5rem 0 1.5rem 1.15rem;
    gap: 0.85rem;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--miami-cyan) 4%, transparent), transparent 60%),
      repeating-linear-gradient(0deg, transparent 0 2rem, var(--paper-faint) 2rem calc(2rem + 1px));
  }

  .journey-canvas::before,
  .is-resolved .journey-canvas::before {
    opacity: 0.44;
    background:
      radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--miami-pink) 13%, transparent), transparent 24rem),
      radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--miami-cyan) 12%, transparent), transparent 26rem);
  }

  .journey-canvas::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 2.5rem;
    bottom: 5rem;
    left: 0.5rem;
    width: 2px;
    background: linear-gradient(var(--miami-cyan), var(--miami-pink) 45%, var(--miami-yellow) 75%, var(--miami-violet));
    opacity: 0.7;
  }

  .journey-node,
  .is-resolved .journey-node,
  .is-resolved .current-chapter {
    position: relative;
    z-index: 1;
    width: calc(100% - 0.75rem);
    padding: 1.25rem 1rem 1.35rem;
    gap: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--miami-cyan);
    background:
      linear-gradient(110deg, color-mix(in srgb, var(--miami-cyan) 7%, transparent), transparent 60%),
      var(--mobile-panel);
    clip-path: polygon(0 0, calc(100% - 0.7rem) 0, 100% 0.7rem, 100% 100%, 0 100%);
    transition: margin 700ms cubic-bezier(0.16, 1, 0.3, 1), border-color 500ms ease, background 500ms ease;
  }

  .journey-node:nth-of-type(3n + 2) {
    width: calc(100% - 1.5rem);
    margin-left: 0.75rem;
    border-left-color: var(--miami-pink);
  }

  .journey-node:nth-of-type(3n) {
    width: calc(100% - 1.1rem);
    margin-left: 0.35rem;
    border-left-color: var(--miami-yellow);
  }

  .journey-node.side-node {
    border-left-color: var(--miami-violet);
  }

  .journey-node-index,
  .is-resolved .journey-node-index {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: var(--ink);
    font-size: 0.47rem;
  }

  .journey-node-index::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 1rem);
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid var(--ink);
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    transform: translateY(-50%);
  }

  .journey-node-meta,
  .is-resolved .journey-node-meta {
    align-self: center;
    font-size: 0.43rem;
    line-height: 1.45;
  }

  .journey-node h3,
  .is-resolved .journey-node h3 {
    margin: 0.35rem 0 0.15rem;
    font-size: 1.55rem;
    line-height: 1;
  }

  .journey-node-copy p {
    font-size: 0.76rem;
    line-height: 1.6;
  }

  .is-resolved .journey-node,
  .is-resolved .journey-node:nth-of-type(n),
  .is-resolved .current-chapter {
    width: calc(100% - 0.75rem);
    margin-left: 0;
    border-color: color-mix(in srgb, var(--signal) 44%, var(--line));
    border-left: 3px solid var(--signal);
    background:
      linear-gradient(120deg, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%),
      var(--mobile-panel);
  }

  .is-resolved .journey-node-index {
    border-color: var(--signal);
    color: var(--signal);
  }

  .is-resolved .journey-node-index::before {
    background: var(--signal);
    box-shadow: 0 0 0 1px var(--signal);
  }

  .journey-canvas figcaption {
    padding: 2.25rem 0.75rem 0 0;
    line-height: 1.55;
    text-align: left;
  }

  /* Sequential chapter browser keeps its controls and preview edge visible. */
  .journey-chronology {
    --chapter-width: calc(100vw - 3.5rem);
    --chapter-gap: 0.75rem;
  }

  .journey-chronology-intro h2 {
    font-size: clamp(2.9rem, 12.5vw, 4rem);
  }

  .chronology-controls {
    min-height: auto;
    padding: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .chronology-actions {
    gap: 0.5rem;
  }

  .chronology-lens {
    max-width: 9.6rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.38rem;
    line-height: 1.4;
  }

  .chronology-buttons {
    display: flex;
  }

  .chronology-buttons button {
    width: 2.75rem;
    height: 2.75rem;
  }

  .chronology-viewport {
    padding: 3.25rem 0 2.5rem;
  }

  .chronology-chapter {
    min-height: 16.5rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .parallel-practice-head {
    padding: 2.5rem 1rem;
    gap: 1.5rem;
  }

  .parallel-practice-head strong {
    font-size: clamp(2.25rem, 10.5vw, 3.2rem);
  }

  .chronology-readout h3 {
    padding: 3rem 1.15rem;
    font-size: clamp(2.75rem, 12.5vw, 3.9rem);
    line-height: 0.9;
  }

  .readout-reading > div {
    padding: 2.25rem 1.15rem;
  }

  .chronology-readout footer {
    padding: 2rem 1.15rem;
  }

  .artifact-detail-page,
  .identity-page {
    padding-top: 6.8rem;
  }

  .artifact-detail-heading {
    padding: 4.25rem 0;
  }

  .artifact-detail-heading h1,
  .identity-heading h1 {
    font-size: clamp(3rem, 14vw, 4.45rem);
    line-height: 0.87;
  }

  .artifact-reading-copy h2,
  .identity-wordmark h2 {
    font-size: clamp(2.7rem, 12.5vw, 4rem);
  }

  .artifact-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
  }

  .artifact-detail-actions a,
  .artifact-detail-actions button {
    min-height: 3rem;
    justify-content: center;
  }

  .artifact-copy-status {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: clamp(3.2rem, 15.4vw, 4rem);
  }

  .hero-footnote {
    grid-template-columns: 1fr;
  }

  .artifact-index {
    --artifact-card-width: calc(100vw - 3rem);
  }

  .journey-chronology {
    --chapter-width: calc(100vw - 3rem);
  }

  .dossier-signal span:nth-child(2),
  .readout-meta span:nth-child(2) {
    display: none;
  }

  .dossier-signal,
  .readout-meta {
    grid-template-columns: 1fr 1fr;
  }

  .chronology-controls {
    grid-template-columns: 1fr;
  }

  .chronology-actions {
    justify-content: space-between;
  }

  .chronology-lens {
    max-width: none;
    flex: 1;
    justify-content: space-between;
  }
}

@media (hover: none) and (pointer: coarse) {
  .artifact-card:hover,
  .chronology-chapter:hover,
  .practice-band:hover,
  .readout-evidence:hover {
    transform: none;
  }
}


/* Short-landscape art direction — wide like a systems record, compact like an instrument panel. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 540px) {
  :root {
    --page: min(calc(100% - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)), 72rem);
  }

  html {
    scroll-padding-top: 1rem;
  }

  .site-header {
    min-height: 4.25rem;
    padding: 0;
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    align-content: normal;
    gap: 1rem;
  }

  .header-actions {
    display: flex;
    gap: 1rem;
  }

  .site-nav {
    position: static;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    gap: clamp(0.65rem, 1.8vw, 1.15rem);
    border: 0;
    overflow: visible;
    scroll-snap-type: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .site-link {
    min-height: 2.2rem;
    font-size: 0.46rem;
  }

  .brand-mark {
    width: 2.15rem;
    height: 2.15rem;
  }

  .theme-toggle {
    min-height: 2.2rem;
  }

  .theme-option {
    display: none;
  }

  .archive-chrome {
    inset:
      max(0.65rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      max(0.65rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
  }

  .section-pad {
    padding: 3.75rem 0;
  }

  .journey-hero {
    min-height: 100svh;
    padding: 5.1rem 0 2rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: end;
  }

  .journey-hero h1 {
    max-width: 11ch;
    margin-top: 0.9rem;
    font-size: clamp(2.9rem, 6.5vw, 4.5rem);
    line-height: 0.88;
  }

  .journey-hero-note {
    padding-left: 1rem;
  }

  .journey-hero-note p {
    margin-bottom: 0.8rem;
    font-size: 0.84rem;
    line-height: 1.52;
  }

  .journey-hero::after {
    right: 1rem;
    bottom: 0.8rem;
  }

  .journey-chronology-intro,
  .journey-map-intro {
    margin-bottom: 0;
    padding-bottom: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
    gap: 2rem;
    align-items: end;
  }

  .journey-chronology-intro h2,
  .journey-map-intro h2 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 0.9;
  }

  .journey-chronology-intro > p,
  .journey-map-intro > p {
    font-size: 0.82rem;
    line-height: 1.55;
  }

  .journey-chronology {
    --chapter-width: min(35vw, 16rem);
    --chapter-gap: 0.65rem;
  }

  .chronology-controls {
    min-height: 3.8rem;
    padding: 0 0.75rem;
    gap: 1rem;
  }

  .chronology-viewport {
    padding: 1.6rem 0 1.5rem;
  }

  .chronology-viewport::before {
    top: 3.3rem;
  }

  .chronology-chapter {
    min-height: 13.5rem;
    padding: 1rem;
    grid-template-rows: 3.25rem auto 1fr auto 1rem;
  }

  .chronology-node {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 0.55rem;
  }

  .chronology-chapter time {
    margin-top: 0.8rem;
  }

  .chronology-chapter strong {
    margin: 0.55rem 0 0.85rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
  }

  .journey-field {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(14rem, 0.75fr);
  }

  .journey-toolbar {
    min-height: 5rem;
    padding: 0 1rem;
    gap: 0.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border-right: 1px solid var(--line);
  }

  .journey-state,
  .journey-control {
    gap: 0.45rem;
    font-size: 0.46rem;
  }

  .journey-control strong {
    font-size: 0.8rem;
  }

  .journey-mode-header {
    min-height: 5rem;
    padding: 0.85rem 1rem;
    align-items: end;
  }

  .mode-copy span {
    font-size: 0.42rem;
  }

  .mode-copy strong {
    max-width: 20ch;
    font-size: 1.16rem;
    line-height: 1.04;
  }

  .understood-mode-copy {
    left: 1rem;
    bottom: 0.85rem;
  }

  .journey-scale {
    display: none;
  }

  .journey-canvas,
  .is-resolved .journey-canvas {
    grid-column: 1 / -1;
    padding: 1rem 0 0.75rem;
    gap: 0;
  }

  .journey-node,
  .is-resolved .journey-node,
  .is-resolved .current-chapter {
    width: 100%;
    margin-left: 0;
    padding: 0.82rem 0;
    grid-template-columns: 1.75rem 6.4rem minmax(0, 1fr);
    gap: 0.35rem 0.8rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-left: 0;
    background: transparent;
    clip-path: none;
  }

  .is-resolved .journey-node,
  .is-resolved .current-chapter {
    padding: 0.82rem;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
  }

  .is-resolved .journey-node:last-of-type {
    border-bottom: 1px solid var(--line);
  }

  .journey-node-index,
  .is-resolved .journey-node-index {
    position: static;
    width: auto;
    height: auto;
    display: block;
    border: 0;
    color: var(--accent);
    background: transparent;
    font-size: 0.5rem;
  }

  .journey-node-index::before,
  .is-resolved .journey-node-index::before {
    display: none;
  }

  .journey-node-meta,
  .is-resolved .journey-node-meta {
    grid-column: 2;
    margin: 0;
    align-self: start;
    font-size: 0.42rem;
    line-height: 1.4;
  }

  .journey-node h3,
  .is-resolved .journey-node h3 {
    grid-column: 3;
    margin: 0;
    padding-right: 0.5rem;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    line-height: 1.03;
  }

  .journey-node-copy {
    grid-column: 3;
  }

  .journey-node-copy p {
    font-size: 0.68rem;
    line-height: 1.45;
  }

  .journey-canvas figcaption {
    padding: 1.25rem 0.75rem 0;
    font-size: 0.7rem;
  }

  .chronology-readout {
    min-height: 24rem;
  }

  .chronology-readout.is-active {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  }

  .chronology-readout h3 {
    padding: 2rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    font-size: clamp(2.4rem, 5vw, 4rem);
  }

  .readout-reading > div {
    padding: 1.4rem 1.6rem;
  }

  .readout-reading p {
    font-size: 0.82rem;
    line-height: 1.55;
  }
}


/* Landscape comparison lens — persistent controls and explicit mode states. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 540px) {
  .journey-toolbar,
  .journey-mode-header {
    position: sticky;
    top: 0;
    z-index: 14;
    min-height: 4.35rem;
    align-self: start;
    background: var(--ink);
    box-shadow: 0 0.75rem 2.25rem color-mix(in srgb, #000 16%, transparent);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    transition: background 420ms ease, border-color 420ms ease, box-shadow 420ms ease;
  }

  .journey-toolbar {
    min-width: 0;
    padding: 0.45rem 0.75rem;
  }

  .journey-mode-header {
    min-width: 0;
    padding: 0.6rem 0.85rem;
  }

  .journey-toolbar::before,
  .journey-mode-header::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--accent);
    transition: background 420ms ease;
  }

  .journey-field.is-lived .journey-toolbar,
  .journey-field.is-lived .journey-mode-header {
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 66%),
      var(--ink);
  }

  .journey-field.is-resolved .journey-toolbar,
  .journey-field.is-resolved .journey-mode-header {
    border-bottom-color: color-mix(in srgb, var(--signal) 52%, var(--line));
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--signal) 13%, transparent), transparent 66%),
      var(--ink);
    box-shadow: 0 0.75rem 2.5rem color-mix(in srgb, var(--signal) 10%, transparent);
  }

  .journey-field.is-resolved .journey-toolbar::before,
  .journey-field.is-resolved .journey-mode-header::before {
    background: var(--signal);
  }

  .journey-state {
    min-width: 0;
    gap: 0.28rem;
  }

  .journey-state span:not([aria-hidden]) {
    padding: 0.4rem 0.48rem 0.34rem;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: color 260ms ease, border-color 260ms ease, background 260ms ease;
  }

  .journey-field.is-lived .journey-state .state-lived.is-active {
    border-color: var(--accent);
    color: #10141e;
    background: var(--accent);
  }

  .journey-field.is-resolved .journey-state .state-understood.is-active {
    border-color: var(--signal);
    color: #10141e;
    background: var(--signal);
  }

  .journey-control {
    min-height: 2.45rem;
    padding: 0 0.7rem;
    gap: 0.55rem;
    border: 1px solid var(--signal);
    background: color-mix(in srgb, var(--signal) 8%, transparent);
    white-space: nowrap;
    transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
  }

  .journey-field.is-resolved .journey-control {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }

  .journey-control:active {
    transform: translateY(1px);
  }

  .mode-copy {
    gap: 0.3rem;
  }

  .mode-copy strong {
    font-size: 1.05rem;
  }

  .understood-mode-copy {
    bottom: 0.65rem;
  }

  .journey-node-copy::before {
    content: "Event record";
    margin-bottom: 0.28rem;
    display: block;
    color: var(--accent);
    font-family: var(--pixel);
    font-size: 0.37rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .journey-field.is-resolved .journey-node-copy::before {
    content: "Interpretation";
    color: var(--signal);
  }

  .journey-field.is-lived .journey-node {
    padding-left: 0.65rem;
    border-left: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
  }

  .journey-field.is-resolved .journey-node,
  .journey-field.is-resolved .current-chapter {
    border-left: 3px solid var(--signal);
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--signal) 10%, transparent), transparent 62%),
      color-mix(in srgb, var(--panel) 90%, transparent);
  }

  .journey-field.is-resolved .journey-node-index {
    color: var(--signal);
  }

  .journey-field.is-resolved .journey-node-copy p {
    color: color-mix(in srgb, var(--paper) 84%, var(--signal));
  }
}


/* Journey lens state key — consistent across desktop, tablet, portrait, and landscape. */
.journey-state span:not([aria-hidden]) {
  padding: 0.44rem 0.55rem 0.38rem;
  border: 1px solid transparent;
  color: var(--paper-muted);
  transition: color 260ms ease, border-color 260ms ease, background 260ms ease, box-shadow 320ms ease;
}

.journey-field.is-lived .journey-state .state-lived.is-active {
  border-color: var(--accent);
  color: #10141e;
  background: var(--accent);
  box-shadow: 0 0 1.5rem var(--accent-soft);
}

.journey-field.is-resolved .journey-state .state-understood.is-active {
  border-color: var(--signal);
  color: #10141e;
  background: var(--signal);
  box-shadow: 0 0 1.5rem var(--signal-soft);
}

@media (max-width: 680px) and (orientation: portrait) {
  .journey-state span:not([aria-hidden]) {
    padding: 0.42rem 0.48rem 0.36rem;
  }
}