:root {
  --canvas: #f2f3f5;
  --ink: #0f1013;
  --muted: #6d7178;
  --rule: rgba(15, 16, 19, 0.16);
  --soft: #e3e5e9;
  --trace: rgba(15, 16, 19, 0.32);
  --warm: #8a5a26;
  --warm-trace: rgba(138, 90, 38, 0.4);
  --warm-soft: #eae3d6;
  --gutter: clamp(1rem, 2.25vw, 2rem);
  --header-space: clamp(8rem, 15vh, 10rem);
  --font-sans: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.3, 1.22, 0.42, 1);
  --motion-fast: 180ms;
  --motion-base: 520ms;
  --motion-slow: 880ms;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  background: var(--canvas);
  animation-duration: 620ms;
}

::view-transition-old(root),
::view-transition-new(root) {
  background: var(--canvas);
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(page-content) {
  animation-duration: 620ms;
}

::view-transition-old(page-content) {
  animation: route-content-out 260ms var(--ease-in-out) both;
}

::view-transition-new(page-content) {
  animation: route-content-in 580ms var(--ease-out) 70ms both;
}

/* Clicked project media travels between pages as a shared element: site.js
   names the clicked image, the detail hero carries the same name statically.
   Orphan captures (arriving from elsewhere) replay the route motion. */
::view-transition-group(shared-project-media) {
  animation-duration: 620ms;
  animation-timing-function: var(--ease-in-out);
}

::view-transition-old(shared-project-media):only-child {
  animation: route-content-out 260ms var(--ease-in-out) both;
}

::view-transition-new(shared-project-media):only-child {
  animation: route-content-in 580ms var(--ease-out) 70ms both;
}

::view-transition-group(site-header),
::view-transition-group(site-signal) {
  animation-duration: 520ms;
  animation-timing-function: var(--ease-out);
}

@keyframes route-content-out {
  to {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    filter: blur(5px) saturate(1.35);
    transform: translateY(-1rem) skewY(-0.35deg);
  }
}

@keyframes route-content-in {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    filter: blur(8px) saturate(1.5);
    transform: translateY(1.4rem) skewY(0.55deg) scale(1.015);
  }

  to {
    opacity: 1;
    clip-path: inset(0);
    filter: none;
    transform: none;
  }
}

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

html {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background:
    radial-gradient(circle at 82% 9%, rgba(138, 90, 38, 0.05), transparent 30rem), var(--canvas);
  background-attachment: fixed;
}

::selection {
  background: var(--warm);
  color: var(--canvas);
}

body,
h1,
h2,
p,
ol,
ul,
dl,
dd,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--warm);
}

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

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--canvas);
  transform: translateY(-200%);
}

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

.route-transition {
  position: fixed;
  z-index: 90;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-mono);
}

.route-transition__line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ink) 30%, var(--warm) 70%, transparent);
  box-shadow: 0 0 1.5rem rgba(138, 90, 38, 0.28);
  transform: scaleX(0);
  transform-origin: left;
}

.route-transition__label {
  position: absolute;
  top: calc(50% + 0.8rem);
  right: var(--gutter);
  color: var(--warm);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  opacity: 0;
}

.motion-enhanced .route-transition.is-active {
  visibility: visible;
}

.motion-enhanced .route-transition.is-active .route-transition__line {
  animation: route-signal 240ms var(--ease-in-out) both;
}

.motion-enhanced .route-transition.is-active .route-transition__label {
  opacity: 1;
  transition: opacity 80ms ease;
}

@keyframes route-signal {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }

  52% {
    transform: scaleX(1);
    transform-origin: left;
  }

  53% {
    transform-origin: right;
  }

  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.motion-enhanced main {
  transition:
    opacity 180ms ease,
    filter 220ms ease,
    transform 240ms var(--ease-in-out);
}

.motion-enhanced body.is-leaving main {
  opacity: 0.68;
  filter: saturate(1.3);
  transform: translateY(-0.4rem) skewY(-0.2deg);
}

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--gutter);
  pointer-events: none;
  view-transition-name: site-header;
}

.site-header a {
  pointer-events: auto;
}

.site-identity {
  display: grid;
  gap: 0.3rem;
  width: max-content;
  max-width: min(70vw, 30rem);
}

.site-name {
  width: max-content;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.site-role,
.site-footer,
.navigation-number,
.eyebrow,
.project-facts dt,
.project-media figcaption,
.project-pagination span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.site-navigation__list {
  display: grid;
  gap: 0.05rem;
  min-width: 8.5rem;
}

.site-navigation li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  align-items: center;
}

.site-navigation a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2rem;
  font-size: 0.85rem;
  text-decoration: none;
}

.navigation-label {
  display: inline-flex;
  line-height: 1;
}

.link-letter {
  --link-letter-shift: 0em;
  --link-letter-tilt: 0deg;

  display: inline-block;
  transform: translateY(var(--link-letter-shift)) rotate(var(--link-letter-tilt));
  transform-origin: 50% 70%;
  transition: transform 300ms var(--ease-spring);
  will-change: transform;
}

.site-navigation a[aria-current="page"]::before {
  position: absolute;
  left: -0.85rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 0 0.18rem rgba(138, 90, 38, 0.16);
  content: "";
}

.site-navigation a[aria-current="page"] .navigation-label {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.14rem;
}

.site-navigation li:has(a[aria-current="page"]) .navigation-number {
  color: var(--ink);
}

.site-footer {
  position: fixed;
  z-index: 10;
  right: var(--gutter);
  bottom: var(--gutter);
  left: var(--gutter);
  display: flex;
  justify-content: space-between;
  padding-top: 1.6rem;
  background: linear-gradient(transparent, var(--canvas) 70%);
  pointer-events: none;
}

.site-signal {
  position: fixed;
  z-index: 11;
  bottom: var(--gutter);
  left: 50%;
  display: grid;
  grid-template-columns: auto 1.5rem auto;
  gap: 0.65rem;
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  view-transition-name: site-signal;
}

.site-signal__grid {
  display: grid;
  grid-template-columns: repeat(3, 0.34rem);
  gap: 0.16rem;
}

.site-signal__grid i {
  width: 0.34rem;
  height: 0.34rem;
  background: var(--rule);
  transition:
    background-color var(--motion-fast) ease,
    transform 280ms var(--ease-spring);
}

.site-signal[data-cell="1"] i:nth-child(1),
.site-signal[data-cell="2"] i:nth-child(2),
.site-signal[data-cell="3"] i:nth-child(3),
.site-signal[data-cell="4"] i:nth-child(4),
.site-signal[data-cell="5"] i:nth-child(5),
.site-signal[data-cell="6"] i:nth-child(6),
.site-signal[data-cell="7"] i:nth-child(7),
.site-signal[data-cell="8"] i:nth-child(8),
.site-signal[data-cell="9"] i:nth-child(9) {
  background: var(--warm);
  transform: scale(1.35);
}

main {
  min-height: 100vh;
  min-height: 100svh;
  view-transition-name: page-content;
}

.page-frame {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-space) var(--gutter) 5rem;
  overflow: hidden;
  scroll-margin-top: var(--header-space);
}

.page-frame::before {
  position: absolute;
  inset: 0 var(--gutter) auto;
  border-top: 1px solid var(--rule);
  content: "";
}

.section-number {
  position: absolute;
  z-index: 0;
  top: 27%;
  right: 14%;
  color: var(--warm-soft);
  font-size: clamp(7rem, 18vw, 18rem);
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 0.8;
  user-select: none;
}

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

.page-heading h1,
.page-heading h2,
.project-detail__header h1,
.system-page h1 {
  font-size: clamp(3.75rem, 9vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.eyebrow {
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* With the auxiliary instruments hidden, About and Contact share one desktop
   viewport. Each remains a real section and anchor; only their vertical
   footprint and content measure are compacted. */
.page-frame--about {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 2rem;
  min-height: 65vh;
  min-height: 65svh;
  padding-bottom: 2rem;
  scroll-margin-top: 0;
}

.page-frame--about .page-heading {
  grid-row: 1;
  grid-column: 1 / 6;
}

.page-frame--about .page-heading h2,
.page-frame--contact .page-heading h2 {
  font-size: clamp(3.75rem, 7vw, 6rem);
}

/* Portrait and copy stay close enough to read as one biography unit. */
.about-portrait {
  grid-row: 2;
}

.about-role {
  grid-row: 2;
}

.editorial-copy {
  grid-row: 2;
}

.profile-console {
  grid-row: 3;
}

.about-role {
  z-index: 1;
  grid-column: 4 / 11;
  align-self: center;
  max-width: 15ch;
  font-size: clamp(2.25rem, 5.2vw, 5.5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.editorial-copy {
  z-index: 1;
  grid-column: 3 / 8;
  align-self: center;
  max-width: 32rem;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.35;
}

.editorial-copy p + p {
  margin-top: 1em;
}

/* The owner's portrait anchors the about band's left edge: kept small beside
   the role statement, never stretched — the frame reserves the image's own
   square ratio and only overscans for the shared media glide. */
.about-portrait {
  z-index: 1;
  grid-column: 1 / 3;
  align-self: center;
  width: min(100%, 12rem);
  overflow: hidden;
  background: var(--soft);
}

.about-portrait img {
  width: 100%;
}

.about-portrait:hover img {
  --media-zoom: 1.14;
  --media-tilt: 0.35deg;

  filter: saturate(0.82) contrast(1.04);
}

.page-frame--projects {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: 2rem;
  overflow: visible;
}

.page-heading--projects {
  z-index: 1;
  grid-column: 1 / 7;
}

/* Media carries the orbit's glide everywhere: the image overscans its frame
   and drifts toward the pointer (site.js writes --media-drift-*), while hover
   and focus settle into a slightly larger, tilted zoom on the same spring. */
[data-motion-media] img {
  transform:
    translate3d(var(--media-drift-x, 0rem), var(--media-drift-y, 0rem), 0)
    scale(var(--media-zoom, 1.001))
    rotate(var(--media-tilt, 0deg));
  transition:
    transform var(--motion-slow) var(--ease-spring),
    filter var(--motion-base) ease;
}

/* Overscan only where the pointer can actually drive the drift; touch and
   coarse pointers keep the full, uncropped frame. */
@media (hover: hover) and (pointer: fine) {
  .motion-enhanced [data-motion-media] img {
    --media-zoom: 1.07;
  }
}

.project-empty {
  z-index: 1;
  grid-column: 4 / 11;
  align-self: center;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: end;
  min-height: 14rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.project-empty__count {
  color: var(--warm);
  font-size: clamp(5rem, 13vw, 13rem);
  letter-spacing: -0.09em;
  line-height: 0.68;
}

.project-empty p {
  max-width: 20ch;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
}

.page-frame--contact {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 2rem;
  min-height: 35vh;
  min-height: 35svh;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.page-frame--contact .page-heading {
  grid-row: 1;
  grid-column: 1 / 5;
  align-self: center;
}

.contact-primary {
  z-index: 1;
  grid-row: 1;
  grid-column: 5 / 11;
  align-self: center;
  font-size: clamp(2rem, 4vw, 4.5rem);
  letter-spacing: -0.065em;
  line-height: 0.95;
  overflow-wrap: anywhere;
}

.contact-primary a {
  position: relative;
  display: inline;
  text-decoration: none;
  background-image: linear-gradient(var(--warm), var(--warm));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 0.08em;
  transition: background-size var(--motion-base) var(--ease-out);
}

.contact-primary a:hover,
.contact-primary a:focus-visible {
  background-size: 100% 0.08em;
}

.contact-primary p {
  color: var(--ink);
}

.contact-links {
  z-index: 1;
  grid-row: 1;
  grid-column: 11 / 13;
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  font-size: 1rem;
}

.project-detail {
  padding: var(--header-space) var(--gutter) 7rem;
}

.project-detail__header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  min-height: 70vh;
  align-content: start;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.project-detail__header .eyebrow {
  grid-column: 1 / 4;
}

.project-detail__header h1 {
  grid-column: 1 / 11;
  margin-top: 6vh;
}

.project-facts {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-self: end;
}

.project-facts div {
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

.project-facts dd {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.project-media {
  grid-column: 2 / 10;
  background: var(--soft);
  overflow: hidden;
}

.project-media:nth-child(even) {
  grid-column: 4 / 12;
}

.project-media img {
  width: 100%;
}

.project-media:hover img {
  --media-zoom: 1.14;
  --media-tilt: 0.35deg;

  filter: saturate(0.82) contrast(1.04);
}

/* The first gallery image is the shared route element: media clicked on the
   projects page receives the same view-transition-name from site.js. */
.project-gallery .project-media:first-child img {
  view-transition-name: shared-project-media;
}

.project-media figcaption {
  padding: 0.6rem 0 1rem;
  background: var(--canvas);
}

.project-feature {
  margin-top: clamp(4rem, 9vh, 7rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.project-feature__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}

.project-feature__header h2 {
  max-width: 16ch;
  font-size: clamp(2rem, 4.4vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.project-feature__state {
  padding-bottom: 0.35rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.project-feature__readout {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.sortie-stage {
  position: relative;
  height: clamp(13rem, 26vw, 20rem);
  margin-top: 1.5rem;
  touch-action: pan-y;
}

@media (hover: hover) and (pointer: fine) {
  .motion-enhanced .sortie-stage {
    cursor: crosshair;
  }
}

.sortie-stage__skyline {
  position: absolute;
  right: 0;
  bottom: 20%;
  left: 0;
  height: 1px;
  background: var(--rule);
}

.sortie-stage__skyline i,
.sortie-stage__skyline b {
  position: absolute;
  top: 0;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--trace);
  transform: translateY(-50%);
}

.sortie-stage__skyline i {
  left: 0;
}

.sortie-stage__skyline b {
  right: 0;
}

.sortie-stage__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sortie-stage__trail path {
  stroke: var(--trace);
  stroke-width: 1;
}

.sortie-stage__plane {
  position: absolute;
  bottom: 20%;
  left: 8%;
  width: clamp(5rem, 9vw, 7.5rem);
  transform: rotate(var(--plane-bank, 0deg)) scaleX(var(--plane-flip, 1));
}

.markdown-console {
  position: relative;
  margin-top: 1.5rem;
}

.markdown-console__slider {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  touch-action: pan-y;
}

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

.markdown-list li {
  --markdown-progress: 1;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.8rem 0 0.8rem 1.35rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--motion-fast) ease;
}

.markdown-list li[data-marking] {
  border-bottom-color: var(--warm-trace);
}

.markdown-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.34rem;
  height: 0.34rem;
  border: 1px solid var(--rule);
  transform: translateY(-50%);
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.markdown-list li[data-marking]::before {
  border-color: var(--warm);
}

.markdown-list li[data-scanned]::before {
  border-color: var(--warm);
  background: var(--warm);
}

.markdown-list__name {
  font-size: 0.9rem;
}

.markdown-list__cut {
  padding: 0.16rem 0.28rem;
  border: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateX(0.3rem);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out),
    color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease;
}

.markdown-list li[data-marking] .markdown-list__cut,
.markdown-list li[data-scanned] .markdown-list__cut {
  opacity: 1;
  transform: none;
}

.markdown-list li[data-marking] .markdown-list__cut {
  border-color: var(--warm);
  color: var(--warm);
}

.markdown-list li[data-scanned] .markdown-list__cut {
  border-color: var(--warm);
  background: var(--warm);
  color: var(--canvas);
}

.markdown-list__prices {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.markdown-list__prices b {
  font-size: 0.82rem;
  font-weight: 600;
}

.markdown-list__prices s {
  position: relative;
  color: var(--muted);
  font-size: 0.65rem;
  text-decoration: none;
}

.markdown-list__prices s::after {
  content: "";
  position: absolute;
  top: 55%;
  left: -2%;
  width: 104%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(var(--markdown-progress));
  transform-origin: left;
}

.markdown-console__scanline {
  position: absolute;
  z-index: 1;
  top: -0.4rem;
  bottom: -0.4rem;
  left: 100%;
  width: 1px;
  background: var(--warm);
  box-shadow: 0 0 0.6rem var(--warm-trace);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) ease;
}

.markdown-console__scanline::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 7rem);
  background: linear-gradient(90deg, transparent, rgba(138, 90, 38, 0.16));
  content: "";
}

.markdown-console__scanline::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--warm);
  background: var(--canvas);
  content: "";
  transform: translate(-50%, 25%);
}

.markdown-console__scanline i {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--warm);
  background: var(--warm);
  transform: translate(-50%, -25%);
  transition: transform var(--motion-fast) var(--ease-spring);
}

.markdown-console__scanline[data-moving] i {
  transform: translate(-50%, -25%) scale(1.35);
}

.markdown-console__scanline b {
  position: absolute;
  top: 0.8rem;
  right: 0.5rem;
  color: var(--warm);
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

.sounding-stage {
  --particle-clip: 100%;

  position: relative;
  height: clamp(15rem, 30vw, 22rem);
  margin-top: 1.5rem;
  touch-action: pan-y;
  user-select: none;
}

.sounding-stage__particles {
  position: absolute;
  top: 22%;
  right: 0;
  bottom: 4%;
  left: 0;
  width: 100%;
  height: 74%;
  clip-path: inset(0 0 var(--particle-clip) 0);
  pointer-events: none;
  transition: clip-path 90ms linear;
}

.sounding-stage__particles-fine,
.sounding-stage__particles-medium,
.sounding-stage__particles-fragments {
  fill: var(--trace);
}

.sounding-stage__particles-fine {
  opacity: 0.42;
}

.sounding-stage__particles-medium {
  opacity: 0.64;
}

.sounding-stage__particles-fragments {
  opacity: 0.78;
}

.sounding-stage__sea {
  position: absolute;
  top: 22%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rule);
}

.sounding-stage__sea b {
  position: absolute;
  right: 0;
  bottom: 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.sounding-stage__ticks i {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  padding-top: 0.3rem;
  background: var(--rule);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-style: normal;
  letter-spacing: 0.06em;
  opacity: 0.45;
}

.sounding-stage__ticks i:nth-child(1) {
  top: 47%;
}

.sounding-stage__ticks i:nth-child(2) {
  top: 71%;
}

.sounding-stage__ticks i:nth-child(3) {
  top: 96%;
}

.sounding-stage__plumb {
  position: absolute;
  top: 22%;
  left: 30%;
  width: 1px;
  height: 0;
  background: var(--trace);
}

.sounding-stage__probe {
  position: absolute;
  top: 22%;
  left: 30%;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--ink);
  background: var(--canvas);
  transform: translate(-50%, -50%);
}

.sounding-stage__ripple {
  position: absolute;
  top: 22%;
  left: 30%;
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid var(--warm);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  pointer-events: none;
}

.sounding-stage.is-rippling .sounding-stage__ripple {
  animation: sounding-ripple 900ms var(--ease-out) 1 both;
}

@keyframes sounding-ripple {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
}

.project-narrative {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  padding: clamp(5rem, 12vh, 10rem) 0;
}

.project-summary {
  grid-column: 5 / 10;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.project-summary p + p {
  margin-top: 1em;
}

.project-outcome {
  grid-column: 10 / 13;
  font-size: 0.9rem;
  line-height: 1.45;
}

.project-outcome h2 {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
}

.project-narrative > .text-link {
  grid-column: 5 / 10;
  justify-self: start;
}

.project-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.project-pagination a {
  display: grid;
  gap: 0.4rem;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  text-decoration: none;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-spring);
}

.project-pagination a:first-child {
  --pagination-shift: -0.45rem;
}

.project-pagination a:last-child {
  justify-self: end;
  text-align: right;
}

.project-pagination a:hover,
.project-pagination a:focus-visible {
  transform: translateX(var(--pagination-shift, 0.45rem));
}

.text-link {
  font-size: 0.9rem;
}

/* Text links share the contact email's underline draw instead of the plain
   browser underline. */
.text-link,
.contact-links a {
  text-decoration: none;
  background-image: linear-gradient(var(--warm), var(--warm));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 0.07em;
  transition: background-size var(--motion-base) var(--ease-out);
}

.text-link:hover,
.text-link:focus-visible,
.contact-links a:hover,
.contact-links a:focus-visible {
  background-size: 100% 0.07em;
}

.system-page {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--header-space) var(--gutter) 5rem;
}

.system-page h1 {
  max-width: 10ch;
}

.system-page .text-link {
  justify-self: start;
  margin-top: 3rem;
}

.motion-token {
  display: inline-block;
  white-space: pre;
}

.motion-enhanced .motion-token {
  opacity: 0;
  filter: blur(5px) saturate(1.5);
  transform: translateY(0.72em) rotate(2deg);
  transform-origin: 0 100%;
  transition:
    opacity var(--motion-base) ease,
    filter var(--motion-base) ease,
    transform var(--motion-slow) var(--ease-out);
  transition-delay: calc(60ms + (var(--motion-order, 0) * 34ms));
}

.motion-enhanced.motion-ready .motion-token {
  opacity: 1;
  filter: none;
  transform: translateY(0) rotate(0);
}

.motion-delay-0 {
  --motion-order: 0;
}

.motion-delay-1 {
  --motion-order: 1;
}

.motion-delay-2 {
  --motion-order: 2;
}

.motion-delay-3 {
  --motion-order: 3;
}

.motion-delay-4 {
  --motion-order: 4;
}

.motion-delay-5 {
  --motion-order: 5;
}

.motion-delay-6 {
  --motion-order: 6;
}

.motion-delay-7 {
  --motion-order: 7;
}

.motion-delay-8 {
  --motion-order: 8;
}

.motion-delay-9 {
  --motion-order: 9;
}

.motion-delay-10 {
  --motion-order: 10;
}

.motion-delay-11 {
  --motion-order: 11;
}

.motion-delay-12 {
  --motion-order: 12;
}

.motion-delay-13 {
  --motion-order: 13;
}

.motion-delay-14 {
  --motion-order: 14;
}

.motion-delay-15 {
  --motion-order: 15;
}

.motion-delay-16 {
  --motion-order: 16;
}

.motion-delay-17 {
  --motion-order: 17;
}

.motion-delay-18 {
  --motion-order: 18;
}

.motion-delay-19 {
  --motion-order: 19;
}

.motion-delay-20 {
  --motion-order: 20;
}

.motion-enhanced [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity var(--motion-base) ease,
    transform var(--motion-slow) var(--ease-out);
}

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

.motion-enhanced .section-number[data-reveal] {
  transform: translateY(3rem) rotate(2deg);
}

.motion-enhanced .section-number[data-reveal].is-visible {
  transform: translateY(0) rotate(0);
}

.composition-lab {
  --scroll-progress: 0;

  z-index: 2;
  grid-column: 1 / 13;
  margin-top: clamp(7rem, 15vh, 12rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.composition-scroll {
  margin-top: clamp(2.5rem, 6vw, 5rem);
}

.composition-sticky {
  position: relative;
}

.composition-progress {
  display: none;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  gap: 1rem;
  align-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

.composition-progress__rail {
  height: 1px;
  overflow: hidden;
  background: var(--rule);
}

.composition-progress__rail i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--ink), var(--warm));
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
}

.motion-enhanced .composition-lab.is-scroll-driven .composition-scroll {
  height: 300svh;
}

.motion-enhanced .composition-lab.is-scroll-driven .composition-sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100svh;
  padding: clamp(6.5rem, 11vh, 8.5rem) 0 clamp(3.4rem, 7vh, 5rem);
}

.motion-enhanced .composition-lab.is-scroll-driven .composition-progress {
  display: grid;
}

.motion-enhanced .composition-lab.is-scroll-driven .composition-stage {
  height: auto;
  min-height: 0;
  margin-top: 1rem;
}

/* Orbit positions are written per animation frame from scroll progress;
   transitions would lag the scrub and break the 1:1 tracking. */
.motion-enhanced .composition-lab.is-scroll-driven .composition-card {
  transition: none;
}

.composition-stage {
  --pointer-x: 0deg;
  --pointer-y: 0deg;
  --pointer-shift-x: 0;
  --pointer-shift-y: 0;

  position: relative;
  height: clamp(34rem, 64vw, 52rem);
  margin-top: 0;
  perspective: 75rem;
  isolation: isolate;
}

/* Pointer tilt values are written continuously per frame from site.js. The
   stage is a drag surface in enhanced mode: horizontal drags rotate the orbit
   while vertical touch panning keeps scrolling the page natively. */
.motion-enhanced .composition-lab.is-scroll-driven .composition-stage {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.motion-enhanced .composition-lab.is-scroll-driven .composition-stage[data-dragging="true"],
.motion-enhanced .composition-lab.is-scroll-driven .composition-stage[data-dragging="true"] * {
  cursor: grabbing;
}

.composition-stage a,
.composition-stage img {
  -webkit-user-drag: none;
}

.composition-card {
  --card-rotation: 0deg;
  --card-scale: 1;
  --card-stretch: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  transform:
    translate(-50%, -50%)
    translate3d(var(--pointer-shift-x), var(--pointer-shift-y), 0)
    rotateX(var(--pointer-y))
    rotateY(var(--pointer-x))
    rotate(var(--card-rotation))
    scale(var(--card-scale))
    scaleX(var(--card-stretch));
  transform-style: preserve-3d;
  cursor: default;
  transition:
    top var(--motion-slow) var(--ease-in-out),
    left var(--motion-slow) var(--ease-in-out),
    width var(--motion-slow) var(--ease-in-out),
    opacity var(--motion-base) ease,
    filter var(--motion-base) ease,
    transform var(--motion-base) var(--ease-out);
}

.composition-card[href] {
  cursor: pointer;
  text-decoration: none;
}

.composition-card img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  box-shadow: 0 1.5rem 4rem rgba(10, 13, 18, 0.14);
  transition:
    filter var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.composition-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  opacity: 0.55;
  font-size: 0.72rem;
  line-height: 1.35;
  transition: opacity var(--motion-fast) ease;
}

.composition-card b {
  font-weight: 500;
}

.composition-card small {
  color: var(--muted);
  font: inherit;
}

.composition-card__placeholder {
  display: flex;
  aspect-ratio: 8 / 5;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 2rem);
  background:
    linear-gradient(90deg, transparent 49.8%, var(--rule) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, var(--rule) 50%, transparent 50.2%), var(--soft);
  background-size: 3rem 3rem;
  font-family: var(--font-mono);
}

.composition-card__placeholder i {
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 5rem);
  font-style: normal;
}

.composition-card:hover,
.composition-card:focus-visible,
.composition-card[data-active] {
  --card-scale: 1.025;

  z-index: 10 !important;
}

.composition-card:hover img,
.composition-card:focus-visible img,
.composition-card[data-active] img {
  filter: saturate(1.04) contrast(1.02);
  box-shadow: 0 2rem 5rem rgba(10, 13, 18, 0.2);
}

.composition-card:hover .composition-card__meta,
.composition-card:focus-visible .composition-card__meta,
.composition-card[data-active] .composition-card__meta {
  opacity: 1;
}

.composition-card[data-orbit-slot="active"] {
  top: 76%;
  left: 50%;
  z-index: 6;
  width: 40%;
  opacity: 1;
  filter: none;
  --card-rotation: -1deg;
}

.composition-card[data-orbit-slot="next"] {
  top: 37%;
  left: 78%;
  z-index: 4;
  width: 30%;
  opacity: 0.68;
  filter: saturate(0.82);
  --card-rotation: 4deg;
}

.composition-card[data-orbit-slot="previous"] {
  top: 37%;
  left: 22%;
  z-index: 4;
  width: 30%;
  opacity: 0.68;
  filter: saturate(0.82);
  --card-rotation: -4deg;
}

.composition-card[data-orbit-slot="next-far"] {
  top: 29%;
  left: 69%;
  z-index: 2;
  width: 27%;
  opacity: 0.62;
  filter: saturate(0.78);
  --card-rotation: 2deg;
}

.composition-card[data-orbit-slot="previous-far"] {
  top: 29%;
  left: 31%;
  z-index: 2;
  width: 27%;
  opacity: 0.62;
  filter: saturate(0.78);
  --card-rotation: -2deg;
}

.composition-card[data-orbit-slot="back"] {
  top: 24%;
  left: 50%;
  z-index: 1;
  width: 26%;
  opacity: 0.58;
  filter: saturate(0.75);
  --card-rotation: 0deg;
}

.profile-console {
  position: relative;
  z-index: 2;
  grid-column: 1 / 13;
  margin-top: clamp(1.75rem, 3vh, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.profile-console__header,
.contact-channel__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}

.profile-console__header h3,
.contact-channel__header h3 {
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

/* The console runs compact so the whole about page holds one viewport: the
   heading steps down from headline to title scale and sheds its UA margins. */
.profile-console__header h3 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
}

.profile-console__header > span,
.contact-channel__header > span {
  color: var(--warm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

/* Clean instrument frame: plain surface, hairline border, and eight corner
   ticks marking the bounds — no grid, no glow, no connector lines. */
.profile-console__map {
  position: relative;
  height: clamp(10rem, 17vh, 14rem);
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  background-image:
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace)),
    linear-gradient(var(--trace), var(--trace));
  background-repeat: no-repeat;
  background-size:
    0.9rem 1px,
    1px 0.9rem;
  background-position:
    0.7rem 0.7rem,
    0.7rem 0.7rem,
    right 0.7rem top 0.7rem,
    right 0.7rem top 0.7rem,
    0.7rem calc(100% - 0.7rem),
    0.7rem calc(100% - 0.7rem),
    right 0.7rem bottom 0.7rem,
    right 0.7rem bottom 0.7rem;
}

.profile-console__map::after {
  position: absolute;
  z-index: 0;
  inset: -8% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15, 16, 19, 0.45), transparent);
  content: "";
  opacity: 0;
}

.motion-enhanced .profile-console.is-scanning .profile-console__map::after {
  animation: profile-scan 1.6s var(--ease-out) 240ms 1 both;
}

@keyframes profile-scan {
  0% {
    top: -8%;
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    top: 108%;
    opacity: 0;
  }
}

.profile-node {
  position: absolute;
  z-index: 3;
  min-width: 8rem;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-spring);
}

.profile-node:disabled {
  cursor: default;
}

.profile-node span {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--muted);
}

.profile-node:hover,
.profile-node:focus-visible,
.profile-node[aria-pressed="true"] {
  border-color: var(--warm);
  background: var(--warm);
  color: var(--canvas);
  transform: translateY(-0.28rem);
}

.profile-node:hover span,
.profile-node:focus-visible span,
.profile-node[aria-pressed="true"] span {
  color: var(--canvas);
}

.profile-node--role {
  top: 12%;
  left: 8%;
}

.profile-node--profile {
  top: 54%;
  right: 8%;
}

.profile-node--archive {
  bottom: 8%;
  left: 31%;
}

.profile-console__core {
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 49%;
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  border: 1px solid var(--ink);
  transform: translate(-50%, -50%);
  transition:
    top var(--motion-slow) var(--ease-in-out),
    left var(--motion-slow) var(--ease-in-out),
    border-color var(--motion-fast) ease,
    transform var(--motion-slow) var(--ease-in-out);
}

.profile-console__core i {
  position: absolute;
  inset: 36%;
  background: var(--warm);
  transition: transform var(--motion-base) var(--ease-out);
}

.profile-console[data-mode="profile"] .profile-console__core {
  top: 43%;
  left: 62%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.profile-console[data-mode="archive"] .profile-console__core {
  top: 64%;
  left: 41%;
  border-color: var(--ink);
  transform: translate(-50%, -50%) scale(0.82);
}

.profile-console[data-mode="profile"] .profile-console__core i {
  transform: scale(1.7);
}

.profile-console[data-mode="archive"] .profile-console__core i {
  transform: scale(0.52);
}

/* The trail is a wider, fainter ring that chases the core with extra lag —
   its position is written per frame from site.js, so the motion reads as
   liquid with no static connector lines. */
.profile-console__trail {
  position: absolute;
  z-index: 1;
  top: 48%;
  left: 49%;
  width: clamp(4.6rem, 9vw, 8rem);
  aspect-ratio: 1;
  border: 1px solid var(--warm-trace);
  transform: translate(-50%, -50%);
}

/* Physics mode (is-live): the core and trail positions are written per frame
   from site.js, so geometry transitions would lag the spring. */
.motion-enhanced .profile-console.is-live .profile-console__core {
  transition:
    border-color var(--motion-fast) ease,
    transform var(--motion-slow) var(--ease-in-out);
}

.motion-enhanced .profile-console.is-live .profile-console__trail {
  transition: none;
}

.profile-console__core u {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--warm);
  opacity: 0;
  pointer-events: none;
}

.profile-console__core.is-pulsing u {
  animation: core-pulse 620ms var(--ease-out) 1 both;
}

@keyframes core-pulse {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }

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

.profile-node:active {
  transform: translateY(-0.28rem) scale(0.94);
}

.profile-node.is-committed {
  animation: node-commit 340ms var(--ease-out) 1;
}

@keyframes node-commit {
  0% {
    transform: translateY(-0.28rem) scale(1);
  }

  45% {
    transform: translateY(-0.42rem) scale(1.06);
  }

  100% {
    transform: translateY(-0.28rem) scale(1);
  }
}

.profile-console__readout.is-swapping {
  animation: readout-swap 280ms var(--ease-out) 1 both;
}

@keyframes readout-swap {
  0% {
    opacity: 0;
    transform: translateY(0.4em);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.profile-console__readout {
  min-height: 1.2em;
  margin-top: 0.5rem;
  font-size: clamp(1.1rem, 1.6vw, 1.7rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.contact-channel {
  position: relative;
  z-index: 2;
  grid-column: 1 / 13;
  margin-top: clamp(8rem, 18vh, 14rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.contact-dial {
  display: grid;
  grid-template-columns: minmax(12rem, 24rem) auto;
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  margin: clamp(3rem, 8vh, 7rem) auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-align: left;
  cursor: pointer;
}

.contact-dial:disabled {
  cursor: default;
}

.contact-dial__visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.contact-dial__visual svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-dial__track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  transition: stroke var(--motion-fast) ease;
}

/* site.js writes stroke-dashoffset per frame from the charge spring, so the
   frame's edge draws itself while the dial is held and drains when released. */
.contact-dial__charge {
  fill: none;
  stroke: var(--warm);
  stroke-width: 1.5;
  stroke-dasharray: 416;
  stroke-dashoffset: 416;
}

.contact-dial__visual b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10%;
  aspect-ratio: 1;
  background: var(--warm);
  transform: translate(-50%, -50%);
  transition: transform var(--motion-base) var(--ease-spring);
}

.contact-dial__visual i {
  position: absolute;
  inset: 2.5%;
  border: 1px solid var(--warm);
  opacity: 0;
  pointer-events: none;
}

.contact-dial:hover .contact-dial__track,
.contact-dial:focus-visible .contact-dial__track,
.contact-channel[data-state="charging"] .contact-dial__track {
  stroke: var(--trace);
}

.contact-dial:hover .contact-dial__visual b,
.contact-dial:focus-visible .contact-dial__visual b {
  transform: translate(-50%, -50%) scale(1.3);
}

.contact-channel[data-state="charging"] .contact-dial__visual b {
  animation: dial-breathe 900ms var(--ease-in-out) infinite alternate;
}

.contact-channel.is-rippling .contact-dial__visual i {
  animation: dial-ripple 900ms var(--ease-out) 1 both;
}

@keyframes dial-breathe {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes dial-ripple {
  0% {
    opacity: 0.9;
    transform: scale(0.96);
  }

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

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

.contact-channel__facts div {
  min-height: 5rem;
  padding: 0.8rem;
}

.contact-channel__facts div + div {
  border-left: 1px solid var(--rule);
}

.contact-channel__facts dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.contact-channel__facts dd {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.system-diagnostic {
  display: flex;
  justify-content: space-between;
  width: min(100%, 42rem);
  margin-top: 5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

/* Tiny Aces explainer — the project's own page, composed from the same
   instrument grammar: hairline rules, numeric beats, one warm status line,
   and a scroll-drawn route hairline in the left gutter (CSS scroll-timeline,
   no JavaScript; unsupported browsers keep the quiet rule line). */
.ta-page {
  position: relative;
  padding: var(--header-space) var(--gutter) 7rem;
}

.ta-route {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) * 0.55);
  width: 1px;
  background: var(--rule);
}

.ta-route::before,
.ta-route::after {
  position: absolute;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid var(--trace);
  content: "";
  transform: translateX(-50%);
}

.ta-route::before {
  top: 0;
}

.ta-route::after {
  bottom: 0;
}

.ta-route i {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes ta-route-draw {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ta-route i {
      background: var(--ink);
      transform: scaleY(0);
      transform-origin: top;
      animation: ta-route-draw linear both;
      animation-timeline: scroll(root);
    }
  }
}

.ta-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.ta-hero__eyebrow {
  grid-column: 1 / 7;
}

.ta-hero__title {
  position: relative;
  z-index: 2;
  grid-column: 1 / 12;
  grid-row: 2;
  margin-top: 6vh;
  font-size: clamp(3.75rem, 9vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.ta-hero__lede {
  grid-column: 1 / 6;
  grid-row: 3;
  max-width: 24ch;
  margin-top: 4vh;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.25;
}

/* The cover rides up under the title's tail; the title paints over the sky. */
.ta-hero__media {
  position: relative;
  z-index: 1;
  grid-column: 7 / 13;
  grid-row: 3 / 5;
  align-self: start;
  margin-top: calc(-1 * clamp(1.5rem, 6vh, 5rem));
  background: var(--soft);
  overflow: hidden;
}

.ta-hero__media img {
  width: 100%;
}

.ta-hero__media figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0 1rem;
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.ta-hero__media:hover img {
  --media-zoom: 1.14;
  --media-tilt: 0.35deg;

  filter: saturate(0.82) contrast(1.04);
}

.ta-facts {
  display: grid;
  grid-column: 1 / 13;
  grid-row: 5;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.ta-facts div {
  min-height: 5rem;
  padding: 0.8rem;
}

.ta-facts div + div {
  border-left: 1px solid var(--rule);
}

.ta-facts dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.ta-facts dd {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.ta-premise,
.ta-flight {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem;
  margin-top: clamp(6rem, 14vh, 11rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.ta-premise .eyebrow,
.ta-flight .eyebrow {
  grid-column: 1 / 7;
}

.ta-premise h2,
.ta-flight h2 {
  grid-column: 1 / 8;
  grid-row: 2;
  max-width: 13ch;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.ta-premise__copy {
  grid-column: 8 / 13;
  grid-row: 2;
  align-self: end;
  max-width: 36rem;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.35;
}

.ta-premise__copy p + p {
  margin-top: 1em;
}

.ta-beats {
  grid-column: 1 / 13;
  margin-top: clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--rule);
}

.ta-beats li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(8rem, 20rem);
  gap: 1rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}

.ta-beats__number {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.ta-beats__title {
  font-size: clamp(1.5rem, 3.4vw, 3.6rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.ta-beats__line {
  max-width: 30ch;
  font-size: 0.9rem;
  line-height: 1.45;
}

.ta-manual-note {
  grid-column: 1 / 13;
  margin-top: 2rem;
  color: var(--warm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ta-return {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(4rem, 9vh, 7rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 50rem) {
  :root {
    --header-space: 10.5rem;
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    background: linear-gradient(var(--canvas) 75%, transparent);
  }

  .site-identity {
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: baseline;
    width: 100%;
    max-width: none;
  }

  .site-role {
    justify-self: end;
    text-align: right;
  }

  .site-navigation__list {
    grid-template-columns: repeat(3, 1fr);
    min-width: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .site-navigation li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
  }

  .site-navigation a {
    min-height: 2.75rem;
    justify-content: center;
  }

  .site-navigation li + li {
    border-left: 1px solid var(--rule);
  }

  .site-navigation a[aria-current="page"]::before {
    top: 0.45rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer {
    display: none;
  }

  .page-frame {
    min-height: 100svh;
    padding-bottom: 2rem;
  }

  .section-number {
    top: 12rem;
    right: var(--gutter);
    font-size: clamp(6rem, 32vw, 9rem);
  }

  .page-heading h1,
  .page-heading h2,
  .project-detail__header h1,
  .system-page h1 {
    font-size: clamp(3.7rem, 18vw, 6rem);
  }

  .project-detail__header h1 {
    font-size: clamp(3rem, 15vw, 6rem);
  }

  .page-frame--about,
  .page-frame--contact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: auto;
    padding-bottom: 3rem;
  }

  .page-frame--contact {
    padding-top: 3rem;
    scroll-margin-top: var(--header-space);
  }

  .page-frame--about .page-heading,
  .page-frame--contact .page-heading {
    grid-column: 1 / 6;
  }

  .about-portrait,
  .about-role,
  .editorial-copy,
  .profile-console,
  .page-frame--about .page-heading,
  .page-frame--contact .page-heading,
  .contact-primary,
  .contact-links {
    grid-row: auto;
  }

  .about-role {
    grid-column: 1 / 7;
    align-self: center;
    font-size: clamp(2.5rem, 13vw, 4.5rem);
  }

  .editorial-copy {
    grid-column: 2 / 7;
  }

  .about-portrait {
    grid-column: 1 / 4;
    width: min(42vw, 9.5rem);
  }

  .page-frame--projects {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-heading--projects {
    grid-column: 1 / 6;
  }

  .project-empty {
    grid-column: 1 / 7;
    align-self: center;
  }

  .contact-primary {
    grid-column: 1 / 7;
    font-size: clamp(2.3rem, 12vw, 4.5rem);
  }

  .contact-links {
    grid-column: 2 / 7;
  }

  .project-detail {
    padding-top: var(--header-space);
    padding-bottom: 3rem;
  }

  .project-media,
  .project-media:nth-child(even) {
    grid-column: 1 / 13;
  }

  .project-detail__header {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 65vh;
  }

  .project-detail__header .eyebrow,
  .project-detail__header h1 {
    grid-column: 1 / 7;
  }

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

  .project-narrative {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .project-summary,
  .project-outcome,
  .project-narrative > .text-link {
    grid-column: 1 / 7;
  }

  .composition-lab {
    grid-column: 1 / 7;
    margin-top: 7rem;
  }

  .composition-stage {
    height: 38rem;
    margin-top: 2rem;
  }

  .motion-enhanced .composition-lab.is-scroll-driven .composition-sticky {
    padding: 11.5rem 0 2rem;
  }

  .composition-progress {
    grid-template-columns: auto minmax(3rem, 1fr) auto;
    gap: 0.6rem;
    font-size: 0.54rem;
  }

  .composition-card[data-orbit-slot="active"] {
    top: 77%;
    left: 50%;
    width: 68%;
  }

  .composition-card[data-orbit-slot="next"] {
    top: 37%;
    left: 69%;
    width: 47%;
  }

  .composition-card[data-orbit-slot="previous"] {
    top: 37%;
    left: 31%;
    width: 47%;
  }

  .composition-card[data-orbit-slot="next-far"] {
    top: 32%;
    left: 63%;
    width: 43%;
  }

  .composition-card[data-orbit-slot="previous-far"] {
    top: 32%;
    left: 37%;
    width: 43%;
  }

  .composition-card[data-orbit-slot="back"] {
    width: 40%;
  }

  .site-signal {
    display: none;
  }

  .page-frame--about,
  .page-frame--contact {
    grid-template-rows: auto 1fr auto auto;
  }

  .profile-console,
  .contact-channel {
    grid-column: 1 / 7;
    margin-top: 7rem;
  }

  .profile-console__header,
  .contact-channel__header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .profile-console__map {
    height: 31rem;
  }

  .profile-node {
    min-width: 7.5rem;
  }

  .profile-node--role {
    top: 9%;
    left: 4%;
  }

  .profile-node--profile {
    top: 46%;
    right: 4%;
  }

  .profile-node--archive {
    bottom: 6%;
    left: 8%;
  }

  .profile-console__core,
  .profile-console__trail {
    top: 51%;
    left: 42%;
  }

  .profile-console[data-mode="profile"] .profile-console__core {
    top: 40%;
    left: 58%;
  }

  .profile-console[data-mode="archive"] .profile-console__core {
    top: 68%;
    left: 45%;
  }

  .contact-dial {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    margin: 3rem 0;
    text-align: center;
  }

  .contact-dial__visual {
    width: min(76vw, 19rem);
  }

  .contact-channel__facts {
    grid-template-columns: 1fr;
  }

  .contact-channel__facts div + div {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .ta-page {
    padding-top: var(--header-space);
    padding-bottom: 3rem;
  }

  .ta-route {
    display: none;
  }

  .ta-hero,
  .ta-premise,
  .ta-flight {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ta-hero__eyebrow,
  .ta-hero__title,
  .ta-hero__lede,
  .ta-hero__media,
  .ta-facts,
  .ta-premise .eyebrow,
  .ta-premise h2,
  .ta-premise__copy,
  .ta-flight .eyebrow,
  .ta-flight h2,
  .ta-beats,
  .ta-manual-note {
    grid-column: 1 / 7;
  }

  .ta-hero__title {
    font-size: clamp(3.7rem, 18vw, 6rem);
  }

  .ta-hero__lede {
    grid-row: 3;
  }

  .ta-hero__media {
    grid-row: auto;
    margin-top: 3rem;
  }

  .ta-facts {
    grid-row: auto;
    grid-template-columns: 1fr;
  }

  .ta-facts div + div {
    border-top: 1px solid var(--rule);
    border-left: 0;
  }

  .ta-premise h2,
  .ta-flight h2 {
    font-size: clamp(2.25rem, 11vw, 4rem);
  }

  .ta-premise__copy {
    grid-row: auto;
    align-self: start;
    margin-top: 2rem;
  }

  .ta-beats li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
  }

  .ta-beats__line {
    grid-column: 2 / 3;
    max-width: none;
  }
}

@media (max-width: 30rem) {
  .composition-stage {
    height: 32rem;
  }

  .composition-card__meta {
    font-size: 0.66rem;
  }

  .composition-card small {
    display: none;
  }

  .profile-console__map {
    height: 27rem;
  }

  .profile-node {
    min-width: 6.7rem;
    padding-inline: 0.65rem;
    font-size: 0.62rem;
  }

  .contact-dial__visual {
    width: min(72vw, 16rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

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

  .motion-enhanced .motion-token,
  .motion-enhanced [data-reveal],
  .motion-enhanced .section-number[data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .route-transition {
    display: none !important;
  }

  .link-letter {
    transform: none !important;
  }

  .composition-stage {
    --pointer-x: 0deg !important;
    --pointer-y: 0deg !important;
    --pointer-shift-x: 0 !important;
    --pointer-shift-y: 0 !important;
  }

  .motion-enhanced .composition-lab.is-scroll-driven .composition-scroll {
    height: auto;
  }

  .motion-enhanced .composition-lab.is-scroll-driven .composition-sticky {
    position: relative;
    display: block;
    height: auto;
    padding: 0;
  }

  .motion-enhanced .composition-lab.is-scroll-driven .composition-progress {
    display: none;
  }

  .motion-enhanced .composition-lab.is-scroll-driven .composition-stage {
    height: clamp(34rem, 64vw, 52rem);
    margin-top: 2rem;
  }

  .profile-console__map::after {
    display: none;
  }
}

@media print {
  .site-navigation,
  .site-footer,
  .site-signal,
  .skip-link,
  .route-transition,
  .profile-console__map,
  .contact-dial {
    display: none;
  }

  .site-header {
    position: static;
    padding: 0 0 2rem;
  }

  .page-frame,
  .project-detail,
  .ta-page {
    min-height: 0;
    padding: 2rem 0;
  }
}