/* Shared viewport layout and timeline. Each archive retains its visual design. */
html { width: 100%; height: 100%; overflow: clip; }

body {
  width: auto;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  box-sizing: border-box;
  padding-block: clamp(12px, 4svh, 48px);
  overflow: clip;
  transition: background-color 180ms ease, color 180ms ease;
}

body::before, body::after {
  position: fixed;
  transition: background-color 180ms ease;
}

body .content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  row-gap: clamp(12px, 3svh, 32px);
}

.content .bio, .content .introduction { margin-block: 0; }
.content > .bio { align-self: center; }
.content .introduction { min-height: 0; align-self: stretch; }
.content .introduction:not(:has(.ambient-art)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content .introduction:has(.ambient-art) {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.content .intro-copy { min-width: 0; }
.content .ambient-art {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  transform: none;
}
.content .ambient-art svg { width: 100%; height: 100%; }

@media (max-width: 899px) {
  .content .introduction:has(.ambient-art) {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }
  /* Let the drawing inhabit the page, fading beneath the reading column. */
  .content .ambient-art {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -30vw;
    width: min(125vw, 850px);
    height: min(125vw, 850px);
    max-width: none;
    max-height: none;
    transform: translateY(-35%);
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%), linear-gradient(transparent, #000 18%, #000 78%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 48%), linear-gradient(transparent, #000 18%, #000 78%, transparent);
    mask-composite: intersect;
  }
}

@media (max-height: 700px) {
  .content .bio { font-size: min(var(--headline-size, 48px), clamp(28px, 7svh, 48px)); }
  .content:has(.ambient-art) .bio { font-size: clamp(34px, 8svh, 64px); }
  .content .page-header { padding-bottom: 0; gap: 8px; }
  .content:has(.eyebrow) .page-header { padding-bottom: 12px; }
  .content .eyebrow { margin-bottom: 12px; font-size: 9px; }
  .content .intro-note {
    margin-top: 12px;
    font-size: clamp(12px, 2.3svh, 15px);
    line-height: 1.45;
  }
  .content .site-footer { padding-top: 12px; }
  .content .contact-prompt { font-size: 20px; }
}

@media (max-width: 599px) {
  body { padding-right: max(18vw, 64px); }
}

@media (max-width: 599px) and (max-height: 700px) {
  .content .bio { font-size: min(var(--headline-size, 36px), clamp(28px, 6svh, 36px)); }
  .content:has(.ambient-art) .bio { font-size: clamp(32px, 7svh, 48px); }
}

@media (max-width: 359px) and (max-height: 700px) {
  .content:has(.ambient-art) .bio { font-size: clamp(32px, 6.5svh, 42px); }
}

@media (max-height: 500px) and (min-aspect-ratio: 4/3) {
  body { padding-block: clamp(12px, 4svh, 20px); }
  body .content { row-gap: clamp(8px, 2.5svh, 12px); }
  .content .page-header { flex-direction: row; align-items: baseline; padding-bottom: 10px; }
  .content .title { font-size: clamp(18px, 5svh, 24px); }
  .content .intro-place { margin-top: 0; font-size: 9px; }
  .content .bio, .content:has(.ambient-art) .bio { font-size: clamp(24px, 8svh, 40px); }
  .content .introduction:has(.ambient-art) {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
  }
  .content .ambient-art {
    position: relative;
    z-index: auto;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: none;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .content .eyebrow { margin-bottom: 8px; font-size: 8px; }
  .content .intro-note { margin-top: 8px; max-width: 42ch; font-size: 12px; line-height: 1.4; }
  .content .site-footer { padding-top: 10px; }
  .content .links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    font-size: 12px;
  }
  .content .links__item { display: block; margin: 0; }
  .content .links__item:first-child { flex-basis: auto; margin-right: auto; }
  .content .links__item::after { display: none; }
  .content .contact-prompt { display: inline; margin-bottom: 0; margin-right: 8px; font-size: 18px; }
}

.site-footer { padding-right: 5vw; }

/* Progressive enhancement keeps static artwork and CSS motion as fallbacks. */
.ambient-art[data-motion-field] .art-drift,
.ambient-art[data-motion-field] .art-orbit { animation: none; transform: none; }
.ambient-art[data-motion-study] .art-drift { animation: none; transform: none; }
.ambient-art[data-motion-study] .contours { stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.study-point { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ambient-art[data-motion-study]:not([data-motion-field]) .contours { animation: study-fallback 12s ease-in-out infinite alternate; }
}
@keyframes study-fallback { from { opacity: .88; } to { opacity: 1; } }
.intro-copy[data-motion-wave]::after { display: none; }
.wave-thread { display: block; width: 96px; height: 16px; margin-top: 18px; overflow: visible; }
.wave-thread path { fill: none; stroke: currentColor; stroke-width: .8; }
.wave-thread path:nth-child(1) { opacity: .65; }
.wave-thread path:nth-child(2) { opacity: .35; }
.wave-thread path:nth-child(3) { opacity: .2; }
body[data-motion-circles]::before {
  animation: none;
  transform: translate3d(var(--circle-x, 0%), var(--circle-y, 0%), 0);
}
body[data-motion-circles]::after {
  animation: none;
  transform: translate3d(var(--circle-other-x, 0%), var(--circle-other-y, 0%), 0);
}

.version-timeline {
  --tick-step: min(24px, calc((min(500px, 60svh) - 8px) / var(--version-count, 15)));
  position: fixed;
  top: 50%;
  right: 24px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 64px;
  max-height: calc(100svh - 48px);
  transform: translateY(-50%);
  color: var(--timeline-ink, #252222);
  font: 400 11px/1.5 Nunito Sans, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.version-timeline, .version-timeline * { box-sizing: border-box; }

.timeline-heading {
  margin-bottom: 12px;
  font-size: 9px;
  letter-spacing: .06em;
  opacity: .72;
}

.timeline-track {
  width: 100%;
  max-height: min(500px, 60svh);
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  list-style: none;
  touch-action: none;
  cursor: ns-resize;
}

.timeline-track::-webkit-scrollbar { display: none; }

.timeline-tick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: var(--tick-step);
  padding-inline: 4px;
  text-decoration: none;
  transition: none;
  cursor: pointer;
  -webkit-user-drag: none;
}

.tick-line {
  width: 42px;
  height: 1px;
  background: currentColor;
  opacity: var(--tick-opacity);
  transform: scaleX(var(--tick-scale));
  transform-origin: right center;
  transition: transform 130ms ease, opacity 130ms ease;
  pointer-events: none;
}

.timeline-tick.is-selected .tick-line { height: 2px; }

.tick-label {
  position: fixed;
  right: 64px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 112px);
  padding: 4px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease;
}

.tick-number, .timeline-position { font-variant-numeric: tabular-nums; }
.tick-name { display: none; }
.timeline-tick.is-selected .tick-label { opacity: .75; }
.timeline-tick:hover .tick-label, .timeline-tick:focus-visible .tick-label { opacity: 1; }
.timeline-track:hover .is-selected:not(:hover) .tick-label { opacity: 0; }

.version-timeline:is(:hover, :focus-within, [data-interacting="true"]) .is-selected .tick-name,
.timeline-tick:hover .tick-name,
.timeline-tick:focus-visible .tick-name { display: inline; }

.version-timeline:is(:hover, :focus-within, [data-interacting="true"]) .is-selected .tick-label,
.timeline-tick:hover .tick-label,
.timeline-tick:focus-visible .tick-label { background: var(--timeline-paper, #fbf9f6ed); }

.version-timeline[data-dragging="true"] { cursor: grabbing; }
.version-timeline[data-dragging="true"] .timeline-tick { cursor: grabbing; }

.timeline-position {
  margin-top: 12px;
  font-size: 10px;
  opacity: .72;
}

.version-timeline a::after { content: none; }
.version-timeline a:focus-visible { outline: 1px solid currentColor; outline-offset: -1px; }

@media (max-width: 599px) {
  .site-footer { padding-right: 0; }
  .version-timeline { right: 8px; width: 40px; }
  .tick-line { width: 30px; }
  .tick-label { right: 44px; max-width: calc(100vw - 80px); }
  .timeline-heading { font-size: 8px; }
  .timeline-tick.is-selected .tick-label { opacity: 0; }
  .version-timeline:is(:hover, :focus-within, [data-interacting="true"]) .is-selected .tick-label { opacity: 1; }
}

@media (min-width: 600px) and (max-width: 700px) {
  .content { box-sizing: border-box; padding-right: 128px; }
}

@media (max-width: 359px) {
  .content { box-sizing: border-box; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { -webkit-animation: none; animation: none; }
  body, body::before, body::after, .tick-line, .tick-label { transition: none; }
}