:root {
  --world-scale: 1.78;
  --world-x: -5.2vw;
  --world-y: 3vh;
  --world-saturate: 1.08;
  --world-brightness: 1;

  --front-opacity: 1;
  --front-scale: 1;
  --front-x: -50%;
  --front-y: 0vh;
  --front-blur: 0px;
  --front-light: 0.82;

  --back-opacity: 0;
  --back-scale: 0.78;
  --back-x: -50%;
  --back-y: 6vh;
  --back-blur: 7px;

  --vignette-opacity: 0.56;
  /* Where he starts. His hair's left edge sits at 36.7% of new-hero-bg.png
     (measured off the plate in the headline band), and the plate is 16:9 laid
     down with background-size: cover. On viewports narrower than 16:9 the crop
     is horizontal, which walks that edge left in viewport terms to
     50vw - 23.65vh; on wider ones the plate scales by width and it stays a
     flat 36.7vw. The earlier of the two is the one type has to respect. */
  --subject-x: min(36.7vw, calc(50vw - 23.65vh));
  --hero-opacity: 1;
  --hero-y: 0vh;
  --hero-scene-scale: 1;
  --hero-scene-x: 0vw;
  --hero-scene-y: 0vh;
  --hero-darken: 0;
  --chip-opacity: 0;

  /* The palette now lives in tokens.css, which /writing/ shares. It is linked
     before this file in index.html. Everything left in this block is
     animation state that app.js writes to, not design. */
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #eef7ed;
  scroll-snap-type: none;
}

/* Lenis keeps native document scrolling but gives wheel input and guided
   moves one continuous clock. The old mandatory snap was competing with both. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

html.is-guided-scroll {
  scroll-behavior: auto;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: transparent;
  color: var(--ink);
  /* Inter was named here but never loaded — no @font-face, no link — so it
     only rendered for visitors who happened to have it installed, and fell
     back silently for everyone else. tokens.css holds the one type identity
     the site and /writing/ share; use it. */
  font-family: var(--font-body);
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
canvas {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* One tall stage; a single sticky tree world pins while UI rides over it */
.stage {
  position: relative;
}

.pinned-layers {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 1;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: #eef7ed;
  pointer-events: none;
}

/* Pinned overlay layer, sits exactly over the sticky scene */
.stage-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

.snap-steps {
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}

.snap-step {
  height: 100vh;
  height: 100svh;
}

/* Give the seedling-to-forest handoff two full viewport heights. The remaining
   chapters keep their compact one-viewport rhythm once the visitor arrives. */
.snap-step[data-step="hero"] {
  height: 200vh;
  height: 200svh;
}

.stage-ui > * {
  position: absolute;
}

.hero-copy,
.tree-chips,
.journey-os,
.contact-layer {
  inset: 0;
}

.camera {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* Deep atmospheric fog behind the timeline and garden introduction. */
.camera::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 58% 92% at -4% 48%,
      rgba(0, 7, 5, 0.96) 0%,
      rgba(0, 9, 6, 0.88) 34%,
      rgba(1, 13, 9, 0.64) 58%,
      rgba(1, 13, 9, 0.28) 76%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 7, 5, 0.76) 0%,
      rgba(0, 8, 5, 0.58) 17%,
      rgba(1, 12, 8, 0.32) 31%,
      rgba(1, 12, 8, 0.1) 41%,
      transparent 49%
    );
}

.world {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform:
    translate3d(var(--world-x), var(--world-y), 0)
    scale(var(--world-scale));
  transform-origin: 68% 52%;
  filter:
    saturate(var(--world-saturate))
    brightness(var(--world-brightness))
    contrast(1.03);
  will-change: transform, filter;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.person {
  position: absolute;
  pointer-events: none;
  transform-origin: 50% 92%;
  will-change: opacity, transform, filter;
}

.person-back {
  z-index: 6;
  left: 43.5%;
  bottom: 1.8vh;
  width: clamp(190px, 16vw, 270px);
  opacity: var(--back-opacity);
  transform: translate3d(var(--back-x), var(--back-y), 84px) scale(var(--back-scale));
  filter: blur(var(--back-blur)) saturate(0.92);
}

.vignette {
  z-index: 11;
  opacity: var(--vignette-opacity);
  background:
    radial-gradient(circle at 66% 50%, transparent 24vw, rgba(4, 8, 6, 0.14) 63vw),
    linear-gradient(90deg, rgba(4, 7, 6, 0.2), transparent 24%, transparent 74%, rgba(4, 7, 6, 0.24)),
    linear-gradient(0deg, rgba(4, 7, 6, 0.22), transparent 19%, transparent 78%, rgba(255, 255, 255, 0.04));
}

/* Drifting greenhouse fog: soft gradient banks at three depths, kept on the
   compositor (transform/opacity only, no filters) so they stay cheap. */
.fog-layer {
  position: absolute;
  left: -35%;
  top: -12%;
  width: 170%;
  height: 124%;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}.particle-field {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.fog-deep {
  z-index: 3;
  opacity: 0.55;
  background:
    radial-gradient(ellipse 46% 30% at 26% 60%, rgba(255, 250, 229, 0.75), transparent 68%),
    radial-gradient(ellipse 54% 26% at 68% 72%, rgba(196, 255, 236, 0.5), transparent 70%),
    radial-gradient(ellipse 40% 22% at 48% 38%, rgba(255, 251, 232, 0.5), transparent 72%);
  animation: fog-drift-a 110s ease-in-out -20s infinite alternate;
}

.fog-mid {
  z-index: 7;
  opacity: 0.42;
  background:
    radial-gradient(ellipse 50% 24% at 60% 66%, rgba(255, 250, 229, 0.66), transparent 68%),
    radial-gradient(ellipse 38% 20% at 30% 50%, rgba(140, 240, 205, 0.42), transparent 70%),
    radial-gradient(ellipse 44% 18% at 82% 44%, rgba(255, 251, 232, 0.36), transparent 72%);
  animation: fog-drift-b 84s ease-in-out -48s infinite alternate;
}

/* Ground fog: dense banks rolling low across the floor - the layer that
   actually reads as "fog" at a glance. */
.fog-ground {
  z-index: 8;
  opacity: 0.6;
  background:
    radial-gradient(ellipse 58% 13% at 34% 92%, rgba(255, 252, 238, 0.85), transparent 64%),
    radial-gradient(ellipse 48% 11% at 72% 95%, rgba(214, 255, 240, 0.7), transparent 62%),
    radial-gradient(ellipse 70% 15% at 52% 99%, rgba(255, 250, 229, 0.6), transparent 68%);
  animation: fog-drift-d 46s ease-in-out -14s infinite alternate;
}

.fog-near {
  z-index: 9;
  opacity: 0.3;
  background:
    radial-gradient(ellipse 56% 28% at 42% 80%, rgba(255, 250, 229, 0.7), transparent 66%),
    radial-gradient(ellipse 44% 22% at 76% 60%, rgba(196, 255, 236, 0.48), transparent 68%);
  animation: fog-drift-c 62s ease-in-out -10s infinite alternate;
}

@keyframes fog-drift-a {
  0% { transform: translate3d(-2.5%, 0.6%, 0) scale(1); opacity: 0.5; }
  50% { transform: translate3d(0.5%, -0.4%, 0) scale(1.04); opacity: 0.62; }
  100% { transform: translate3d(3%, 0.8%, 0) scale(1.01); opacity: 0.52; }
}

@keyframes fog-drift-b {
  0% { transform: translate3d(2.6%, -0.5%, 0) scale(1.03); opacity: 0.38; }
  50% { transform: translate3d(-0.8%, 0.7%, 0) scale(1); opacity: 0.48; }
  100% { transform: translate3d(-3.2%, -0.3%, 0) scale(1.05); opacity: 0.4; }
}

@keyframes fog-drift-c {
  0% { transform: translate3d(-3.4%, -0.8%, 0) scale(1.02); opacity: 0.26; }
  50% { transform: translate3d(1%, 0.5%, 0) scale(1.06); opacity: 0.36; }
  100% { transform: translate3d(3.6%, -0.6%, 0) scale(1); opacity: 0.28; }
}

@keyframes fog-drift-d {
  0% { transform: translate3d(-4.5%, 0.4%, 0) scale(1.02); opacity: 0.52; }
  50% { transform: translate3d(0.8%, -0.5%, 0) scale(1.07); opacity: 0.68; }
  100% { transform: translate3d(4.8%, 0.3%, 0) scale(1); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .fog-layer {
    animation: none;
  }
}

/* Cursor-light displacement canvas: sits exactly over the world image and
   inherits its transform/filter vars via the shared .world class. */
/* Cursor-light displacement canvas: sits exactly over the world image and
   inherits its transform/filter vars via the shared .world class. */
.world-fx {
  z-index: 1;
  pointer-events: none;
}

.world.is-fx-hidden {
  visibility: hidden;
}

/* Arc titles materialize out of the mist, letter by letter. */
.t-letter {
  display: inline-block;
  white-space: pre;
}

.arc-detail.is-changing .t-letter {
  animation: letter-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 34ms);
}

@keyframes letter-in {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-detail.is-changing .t-letter {
    animation: none;
  }
}

/* Ambience toggle: quiet glass pill in the corner. */
.ambience-toggle {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(214, 255, 235, 0.32);
  border-radius: 999px;
  background: rgba(4, 24, 15, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(233, 255, 244, 0.82);
  font: 600 0.68rem/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.ambience-toggle:hover,
.ambience-toggle:focus-visible {
  color: #fff;
  border-color: rgba(174, 255, 196, 0.6);
  outline: none;
}

.ambience-toggle.is-on {
  color: #d9ffe9;
  border-color: rgba(120, 255, 190, 0.75);
  box-shadow: 0 0 16px rgba(83, 240, 200, 0.3);
}

/* Three glass chips resting on the tree, revealed with the garden */
.tree-chips {
  position: absolute;
  z-index: 12;
  inset: 0;
  opacity: var(--chip-opacity);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.projects-label {
  position: absolute;
  left: 77%;
  top: 20.5%;
  margin: 0;
  color: rgba(248, 255, 250, 0.9);
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 820;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(83, 240, 200, 0.18);
}

.tree-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: clamp(176px, 13.5vw, 250px);
  height: clamp(72px, 8.3vh, 92px);
  min-height: 0;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(174, 255, 196, 0.4);
  border-top-color: rgba(235, 255, 240, 0.62);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(37, 84, 59, 0.58), rgba(3, 22, 14, 0.84) 58%, rgba(9, 38, 24, 0.76)),
    rgba(2, 17, 11, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 1px 0 0 rgba(116, 255, 218, 0.14),
    inset 0 -18px 30px rgba(0, 10, 6, 0.24),
    0 12px 30px rgba(0, 10, 6, 0.38),
    0 0 14px rgba(83, 240, 200, 0.13);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  transform: translateY(6px) scale(0.98);
  transition:
    transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease,
    border-color 220ms ease;
  color: #e2f0d9;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.tree-chip:hover,
.tree-chip:focus-visible {
  border-color: rgba(174, 255, 196, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 1px 0 0 rgba(116, 255, 218, 0.24),
    0 16px 38px rgba(0, 12, 8, 0.4),
    0 0 24px rgba(83, 240, 200, 0.32);
  outline: none;
}

.tree-chip.is-dragging {
  z-index: 3;
  cursor: grabbing;
  transition: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 20px 44px rgba(0, 12, 8, 0.48),
    0 0 30px rgba(83, 240, 200, 0.4);
}

.chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(207, 255, 218, 0.24);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(32, 79, 52, 0.34), rgba(1, 18, 11, 0.5));
  color: #74ef99;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(74, 222, 128, 0.1);
}

.chip-icon svg {
  width: 23px;
  height: 23px;
}

.chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tree-chip strong {
  font-size: 0.92rem;
  line-height: 1.1;
}

.tree-chip small {
  color: rgba(230, 255, 246, 0.62);
  font-size: 0.7rem;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.tree-chips[data-visible] .tree-chip {
  transform: translateY(0) scale(1);
}

.tree-chip.is-rabbit-platform {
  cursor: not-allowed;
  border-color: rgba(255, 226, 151, 0.88);
  box-shadow: 0 0 26px rgba(245, 200, 93, 0.34);
}

/* Optional Tree Climb game. The two fixed platforms are the garden copy and journey dock. */
.tree-climb {
  position: absolute;
  z-index: 18;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.tree-climb.is-visible { opacity: 1; }
.tree-climb.is-playing { pointer-events: none; }

.tree-climb-rabbit {
  position: fixed;
  z-index: 3;
  left: 7vw;
  top: calc(100svh - 126px);
  width: 55px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.48));
  animation: rabbit-rest 2.8s ease-in-out infinite;
}

.rabbit-sprite {
  display: block;
  width: 55px;
  height: 74px;
  background: url("assets/game/bunny-sheet.png") 0 0 / 220px 444px no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: bunny-idle .7s steps(4) infinite;
}
.tree-climb.is-playing .tree-climb-rabbit { cursor: default; animation: none; }
.tree-climb.is-playing .tree-climb-rabbit.is-moving .rabbit-sprite { animation: bunny-run .34s steps(4) infinite; }
.tree-climb.is-playing .tree-climb-rabbit.is-jumping .rabbit-sprite { animation: bunny-jump .34s steps(4) infinite; }
.tree-climb-rabbit.is-facing-left { transform: scaleX(-1); }

.tree-climb-carrot {
  position: fixed;
  z-index: 2;
  left: 67vw;
  top: 17vh;
  display: none;
  font-size: clamp(32px, 3.2vw, 50px);
  filter: drop-shadow(0 0 12px rgba(255, 190, 65, 0.72));
}

.tree-climb.is-playing .tree-climb-carrot { display: block; animation: carrot-glow 1.5s ease-in-out infinite; }
.tree-climb-dialog {
  position: fixed;
  z-index: 4;
  left: calc(7vw + 54px);
  bottom: 138px;
  width: 210px;
  padding: 14px;
  border: 1px solid rgba(214, 255, 227, 0.62);
  border-radius: 16px;
  color: #effff3;
  background: rgba(3, 26, 16, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
.tree-climb-dialog::after { content: ""; position: absolute; left: 18px; bottom: -7px; width: 14px; height: 14px; background: inherit; border-right: 1px solid rgba(214, 255, 227, 0.62); border-bottom: 1px solid rgba(214, 255, 227, 0.62); transform: rotate(45deg); }
.tree-climb-dialog p { margin: 0 0 11px; font-size: 0.8rem; font-weight: 650; line-height: 1.4; }
.tree-climb-dialog div { display: flex; gap: 7px; }
.tree-climb-dialog button { padding: 6px 11px; border: 1px solid rgba(214, 255, 227, 0.34); border-radius: 8px; color: #eaffef; background: rgba(104, 240, 163, 0.17); cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 800; }
.tree-climb-dialog button:hover { background: rgba(104, 240, 163, 0.34); }
.tree-climb-win { position: fixed; z-index: 4; left: 7vw; bottom: 54px; margin: 0; color: rgba(239, 255, 243, 0.82); font-size: 0.68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 10px #000; }
.tree-climb-level, .tree-climb-close { position: fixed; z-index: 4; top: 110px; margin: 0; color: rgba(239, 255, 243, 0.86); font-size: 0.68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 2px 10px #000; }
.tree-climb-level { left: 50%; transform: translateX(-50%); opacity: 0; }
.tree-climb-close { right: 32px; padding: 8px 11px; border: 1px solid rgba(226,255,234,.36); border-radius: 999px; background: rgba(3,26,16,.78); cursor: pointer; opacity: 0; pointer-events: none; }
.tree-climb.is-playing .tree-climb-level, .tree-climb.is-playing .tree-climb-close { opacity: 1; pointer-events: auto; }
.tree-climb-win { left: 50%; top: 14vh; bottom: auto; transform: translateX(-50%); padding: 10px 14px; border-radius: 999px; background: rgba(3, 27, 16, 0.78); color: #fbdfa1; }
@keyframes rabbit-rest { 0%,100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -3px; rotate: 1deg; } }
@keyframes bunny-idle { to { background-position: -220px 0; } }
@keyframes bunny-run { from { background-position: 0 -74px; } to { background-position: -220px -74px; } }
@keyframes bunny-jump { from { background-position: 0 -148px; } to { background-position: -220px -148px; } }
@keyframes carrot-glow { 50% { scale: 1.12; filter: drop-shadow(0 0 20px rgba(255, 222, 111, 1)); } }

body.is-game-open { overflow: hidden; }
body.is-game-open .u-dock { pointer-events: none; opacity: .4; }
.stage.is-game-running .journey-os, .stage.is-game-running .garden-about, .stage.is-game-running .hero-content { pointer-events: none !important; }

.tree-chip::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 22%, rgba(95, 255, 204, 0.95) 45%, rgba(245, 200, 93, 0.7) 82%);
  box-shadow: 0 0 12px rgba(83, 240, 200, 0.7);
  transform: translateY(-50%);
}

.tree-chip::after,
.entity-link::after,
.proof-list li::after,
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(83, 240, 200, 0.46), transparent 42%) left top / 58px 1px no-repeat,
    linear-gradient(180deg, rgba(83, 240, 200, 0.34), transparent 42%) left top / 1px 58px no-repeat,
    radial-gradient(circle at 86% 18%, rgba(245, 200, 93, 0.12), transparent 32%);
  opacity: 0.7;
  mix-blend-mode: screen;
}

.chip-games {
  left: 76%;
  top: 24%;
}

.chip-varya {
  left: 74%;
  top: 42%;
}

.chip-music {
  left: 72%;
  top: 59%;
}

/* SVG Lines */
.tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.glow-line {
  fill: none;
  stroke: rgba(197, 255, 210, 0.86);
  stroke-width: 0.055;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 0.35px rgba(224, 255, 231, 0.95))
    drop-shadow(0 0 1.25px rgba(91, 255, 145, 0.9));
}
.glow-dot {
  fill: #effff1;
  stroke: rgba(110, 255, 155, 0.9);
  stroke-width: 0.12;
  filter:
    drop-shadow(0 0 0.55px #effff1)
    drop-shadow(0 0 1.6px rgba(74, 222, 128, 0.95));
}

.garden-about {
  position: absolute;
  z-index: 13;
  top: 12%;
  left: max(40px, 5vw);
  width: min(320px, 24vw);
  opacity: var(--chip-opacity);
  pointer-events: none;
  transform: translateY(calc(var(--hero-y) * 0.28));
  transition: opacity 220ms ease;
  isolation: isolate;
}

.garden-about::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: -44px -80px -52px -70px;
  background: radial-gradient(ellipse at 42% 48%, rgba(1, 13, 9, 0.76), rgba(1, 13, 9, 0.38) 55%, transparent 76%);
  filter: blur(8px);
  pointer-events: none;
}

.garden-about h2 {
  margin: 0 0 12px;
  color: #f8fff8;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.96), 0 4px 28px rgba(0, 0, 0, 0.8);
}

.garden-kicker {
  margin: 0 0 8px;
  color: #4ade80;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 1);
}

.garden-about p:not(.garden-kicker, .garden-drag-hint p) {
  max-width: 240px;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-body);
  font-size: clamp(0.6rem, 0.7vw, 0.75rem);
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 1), 0 2px 18px rgba(0, 0, 0, 0.9);
}

.garden-highlight {
  font-style: italic;
  font-weight: normal;
  color: #4ade80;
}

.garden-drag-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 32px;
}

.garden-drag-hint .drag-arrow-icon {
  color: #4ade80;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: -2px;
  margin-left: -4px;
}

.garden-drag-hint p {
  font-family: 'Bradley Hand', 'Chalkboard SE', 'Comic Sans MS', cursive;
  color: #4ade80;
  font-size: 0.7rem;
  line-height: 1.35;
  margin: 0;
}

.garden-about p + p {
  margin-top: 8px;
}

.site-nav {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  color: inherit;
  line-height: 1;
}

.brand-mark {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-name {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.65em;
}

.nav-links {
  display: flex;
  gap: clamp(30px, 3.2vw, 58px);
  font-size: 0.98rem;
  font-weight: 500;
  color: inherit;
}

.nav-links a {
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #ffffff;
  opacity: 0.58;
}

.nav-menu-btn {
  background: #0b1511;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.nav-menu-btn:hover {
  transform: scale(1.05);
  background: #1a2c24;
}

.hero-background {
  z-index: 29;
  position: absolute;
  inset: 0;
  background-image: url('assets/new-hero-bg.png');
  background-size: cover;
  background-position: center;
  opacity: var(--hero-scene-opacity, 1);
  transform-origin: 69% 67%;
  transform:
    translate3d(var(--hero-scene-x), var(--hero-scene-y), 0)
    scale(var(--hero-scene-scale));
  will-change: opacity, transform;
  overflow: hidden;
}

.hero-background::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 31;
  pointer-events: none;
  opacity: var(--hero-darken);
  background: rgba(1, 8, 5, 0.52);
}

.hero-bg-scaler {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.28vw;
  min-height: 100vh;
  min-width: 177.68vh;
  pointer-events: none;
}

.plant-sparkles {
  position: absolute;
  left: 69%;
  top: 67%;
  width: 150px;
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
}

.sparkle {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 
    0 0 4px 1px rgba(167, 243, 208, 0.9), 
    0 0 10px 3px rgba(74, 222, 128, 0.6);
  opacity: 0;
  animation: sporeFloat linear infinite;
  mix-blend-mode: screen;
}

@keyframes sporeFloat {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
    transform: translate(calc(var(--drift-x) * 0.2), calc(var(--drift-y) * 0.15)) scale(1.2);
  }
  45% {
    opacity: 0.2;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--drift-x), var(--drift-y)) scale(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle {
    animation: none;
    opacity: 0.55;
  }
}

/* Left branch cluster */
.s-1 { left: 20%; bottom: 10%; animation-duration: 3.2s; animation-delay: 0.1s; --drift-x: -120px; --drift-y: -150px; }
.s-7 { left: 10%; bottom: 12%; animation-duration: 4.0s; animation-delay: 0.5s; --drift-x: -180px; --drift-y: -110px; }
.s-9 { left: 25%; bottom: 25%; animation-duration: 4.7s; animation-delay: 2.1s; --drift-x: -140px; --drift-y: -180px; }
.s-13 { left: 15%; bottom: 5%; animation-duration: 4.5s; animation-delay: 3.5s; --drift-x: -100px; --drift-y: -130px; }
.s-16 { left: 30%; bottom: 28%; animation-duration: 3.7s; animation-delay: 1.6s; --drift-x: -160px; --drift-y: -140px; }
.s-18 { left: 5%; bottom: 30%; animation-duration: 3.4s; animation-delay: 0.9s; --drift-x: -200px; --drift-y: -120px; }

/* Right branch cluster */
.s-2 { left: 50%; bottom: 20%; animation-duration: 4.5s; animation-delay: 1.2s; --drift-x: 130px; --drift-y: -120px; }
.s-4 { left: 75%; bottom: 5%; animation-duration: 4.1s; animation-delay: 0.8s; --drift-x: 180px; --drift-y: -100px; }
.s-8 { left: 85%; bottom: -2%; animation-duration: 3.3s; animation-delay: 1.5s; --drift-x: 150px; --drift-y: -150px; }
.s-10 { left: 90%; bottom: 8%; animation-duration: 3.9s; animation-delay: 0.3s; --drift-x: 110px; --drift-y: -170px; }
.s-14 { left: 80%; bottom: 22%; animation-duration: 3.1s; animation-delay: 0.7s; --drift-x: 200px; --drift-y: -90px; }
.s-17 { left: 95%; bottom: 15%; animation-duration: 4.4s; animation-delay: 3.0s; --drift-x: 160px; --drift-y: -130px; }

/* Center / Straight up cluster */
.s-3 { left: 40%; bottom: 15%; animation-duration: 3.8s; animation-delay: 2.5s; --drift-x: -30px; --drift-y: -180px; }
.s-5 { left: 65%; bottom: 30%; animation-duration: 3.5s; animation-delay: 1.9s; --drift-x: 20px; --drift-y: -200px; }
.s-6 { left: 45%; bottom: -5%; animation-duration: 4.8s; animation-delay: 3.1s; --drift-x: -10px; --drift-y: -160px; }
.s-11 { left: 55%; bottom: 35%; animation-duration: 4.2s; animation-delay: 2.8s; --drift-x: 35px; --drift-y: -210px; }
.s-12 { left: 50%; bottom: 18%; animation-duration: 3.6s; animation-delay: 1.0s; --drift-x: 0px; --drift-y: -170px; }
.s-15 { left: 60%; bottom: 0%; animation-duration: 4.9s; animation-delay: 2.4s; --drift-x: -20px; --drift-y: -190px; }

.hero-content {
  z-index: 30;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* The panel that used to occupy the bottom of this column is gone, so there
     is no second child to space against. The copy stays in the upper left with
     the light shaft; the photograph is the content below it, not dead space. */
  justify-content: flex-start;
  /* Keep the copy clear of the persistent bottom dock. */
  padding: max(70px, 10vh) max(30px, 4vw) clamp(88px, 8.5vh, 112px);
  opacity: var(--hero-opacity);
  transform: translate3d(0, var(--hero-y), 0);
  will-change: opacity, transform;
  /* inset:0 at z-index 30, and later in .stage-ui than .u-dock, so this box was
     eating every dock click on screen 1 — Journey, Work and Contact have all
     been unclickable there. Same pattern .stage-ui already uses: the layer is
     transparent to the pointer, its controls are not. */
  pointer-events: none;
}

/* app.js adds .is-interactive while the hero copy is still up, and drops it
   once the copy has faded into the forest, so the CTA stops intercepting. */
.hero-content.is-interactive a,
.hero-content.is-interactive button {
  pointer-events: auto;
}

.hero-text-block {
  /* Never reaches him. Below ~1250px the headline stacks into short lines
     against the wall instead of running across his hair in dark-on-dark. */
  max-width: min(600px, max(220px, calc(var(--subject-x) - max(30px, 4vw) - 28px)));
}

.hero-kicker {
  color: #1f6448;
  font-size: clamp(0.78rem, 1.5vh, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: clamp(6px, 1.5vh, 12px);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.9vh, 3.9rem);
  line-height: 1.06;
  /* The column width is derived from the photograph's crop, so it changes with
     every viewport — tuning the copy to break well at one size just moves the
     lonely last word to another. Let the browser even the lines instead. */
  text-wrap: balance;
  color: #121c18;
  margin-bottom: clamp(8px, 2vh, 16px);
  font-weight: 400;
}

.text-green {
  color: #1f6448;
  font-style: italic;
}

.hero-subhead {
  /* The portrait starts just to the right of this column at desktop widths. */
  max-width: 34rem;
  font-size: clamp(0.9rem, 2vh, 1.05rem);
  color: rgba(18, 28, 24, 0.75);
  line-height: 1.4;
  text-wrap: balance;
  margin-bottom: clamp(12px, 3vh, 24px);
}

/* Two sentences, two blocks — text-wrap: balance does not reach across a <br>,
   so the sentences have to be separate boxes for either to balance. */
.hero-subhead:has(+ .hero-subhead) {
  margin-bottom: 0.2em;
}

.hero-btn-dark {
  background: #0b1511;
  color: white;
  border: none;
  border-radius: 999px;
  padding: clamp(10px, 2vh, 16px) clamp(20px, 3vh, 28px);
  font-size: clamp(0.85rem, 1.8vh, 1rem);
  font-weight: 500;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-btn-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11, 21, 17, 0.3);
}

.hero-btn-dark .btn-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}

.hero-btn-dark:hover .btn-arrow {
  transform: translateY(3px);
}

/* The file styles focus for .ambience-toggle, .tree-chip, .nav-links a and
   .history-button, but the hero's primary control had nothing. */
.hero-btn-dark:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-btn-dark,
  .hero-btn-dark .btn-arrow {
    transition: none;
  }
  .hero-btn-dark:hover {
    transform: none;
  }
}

/* A compact, unframed location note in the top-right of the hero. */
.hero-location {
  position: absolute;
  top: max(70px, 10vh);
  right: max(30px, 4vw);
  display: block;
  min-width: 0;
  max-width: 320px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: rgba(244, 246, 241, 0.9);
}

.hero-location > * {
  position: relative;
}

.location-title {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.location-desc {
  font-size: 0.78rem;
  color: rgba(244, 246, 241, 0.72);
  line-height: 1.4;
}

/* ---- Hero on small screens ------------------------------------------------
   The plate is 16:9 laid down with cover, so a phone crops it to a near
   portrait window: the wall the headline was sitting on is gone and he fills
   the frame. Dark serif over dark hair, and .hero-location — absolutely
   positioned top right with no override — landed on top of the kicker.

   So the copy moves down onto the sweater and the table, which are the darkest
   part of that crop, and inverts to cream over a scrim. Same hierarchy, ground
   that actually exists at this size.

   The aspect clause matters as much as the width one: --subject-x is driven by
   the cover crop, so a 1000x900 window leaves as little wall as a phone does
   even though it is nowhere near phone width. Below about 1.3 the wall is too
   narrow to set type on, whatever the pixel count.                          */
@media (max-width: 900px), (max-aspect-ratio: 13 / 10) {
  .hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(4, 10, 7, 0.9) 0%,
      rgba(4, 10, 7, 0.74) 32%,
      rgba(4, 10, 7, 0) 66%
    );
  }

  .hero-content {
    justify-content: flex-end;
    padding: 24px 22px calc(clamp(88px, 8.5vh, 112px) + 10px);
  }

  .hero-text-block {
    max-width: none;
  }

  .hero-kicker {
    color: #7ee2a8;
  }

  .hero-headline {
    color: #f4f6f1;
    font-size: clamp(2rem, 8.2vw, 2.9rem);
  }

  .hero-subhead {
    color: rgba(244, 246, 241, 0.78);
  }

  .hero-btn-dark {
    background: #f4f6f1;
    color: #0b1511;
  }

  .hero-btn-dark:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  }

  /* In flow now, and above the copy — it is context for the line, not a
     floating badge with nowhere to float. The scrim is already its ground, so
     it drops the glass rather than laying a second surface over the first. */
  .hero-location {
    order: -1;
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.glass-panel {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.3) 42%, rgba(207, 255, 241, 0.3)),
    rgba(255, 255, 255, 0.28);
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255, 255, 255, 0.86);
  border-left-color: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.28);
  backdrop-filter: blur(18px) saturate(1.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 1px 0 0 rgba(116, 255, 218, 0.12),
    inset 0 -28px 54px rgba(255, 255, 255, 0.2),
    0 24px 70px rgba(11, 38, 29, 0.24),
    0 0 34px rgba(83, 240, 200, 0.08);
}

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

.glass-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.44;
  background:
    linear-gradient(90deg, rgba(83, 240, 200, 0.42) 0 42px, transparent 42px) left top / 96px 1px no-repeat,
    linear-gradient(180deg, rgba(83, 240, 200, 0.36) 0 42px, transparent 42px) left top / 1px 96px no-repeat,
    linear-gradient(270deg, rgba(245, 200, 93, 0.3) 0 36px, transparent 36px) right top / 88px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 200, 93, 0.22) 0 36px, transparent 36px) right top / 1px 88px no-repeat,
    radial-gradient(circle at 82% 18%, rgba(83, 240, 200, 0.16), transparent 26%),
    radial-gradient(circle at 18% 92%, rgba(245, 200, 93, 0.12), transparent 30%),
    linear-gradient(rgba(9, 32, 24, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 32, 24, 0.032) 1px, transparent 1px);
  background-size:
    96px 1px,
    1px 96px,
    88px 1px,
    1px 88px,
    auto,
    auto,
    34px 34px,
    34px 34px;
  mix-blend-mode: soft-light;
}

.section-kicker {
  margin: 0 0 14px;
  color: rgba(14, 58, 44, 0.58);
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-window h2 {
  font-size: clamp(2rem, 4vw, 4.6rem);
  line-height: 0.98;
  font-weight: 780;
}

.contact-window p {
  color: var(--ink-soft);
  line-height: 1.62;
}

/* ---- Journey stage: one pinned view over the fixed tree world ---- */
/* Journey layer: History prompt expands into the arc dock, pinned over the scene */
.journey-os {
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}

.journey-os.on {
  opacity: 1;
}

.history-button {
  position: absolute;
  top: 50%;
  left: max(24px, 4vw);
  transform: translateY(-50%);
  display: grid;
  gap: 4px;
  width: 232px;
  padding: 26px 24px;
  pointer-events: none;
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255, 255, 255, 0.86);
  border-left-color: rgba(255, 255, 255, 0.74);
  border-radius: 22px;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.22) 44%, rgba(207, 255, 241, 0.24)),
    rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.28);
  backdrop-filter: blur(22px) saturate(1.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 24px 70px rgba(11, 38, 29, 0.16),
    0 0 30px rgba(83, 240, 200, 0.16);
  text-align: left;
  cursor: pointer;
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    box-shadow 220ms ease;
}

.history-button:hover,
.history-button:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 28px 78px rgba(11, 38, 29, 0.2),
    0 0 40px rgba(83, 240, 200, 0.26);
}

.history-kicker {
  color: rgba(14, 58, 44, 0.6);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.history-title {
  color: #092018;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.history-hint {
  margin-top: 6px;
  color: rgba(14, 58, 44, 0.72);
  font-size: 0.82rem;
  font-weight: 640;
}

.history-hint::after {
  content: " \2192";
}

.journey-dock {
  position: absolute;
  top: 50%;
  left: max(42px, 4.2vw);
  transform: translateY(-50%) translateX(-14px) scale(0.98);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 340ms ease,
    transform 340ms ease;
  z-index: 10;
}

/* When open, reveal the full dock */
.journey-os.on .history-button {
  pointer-events: auto;
}

.journey-os.is-open .history-button {
  opacity: 0;
  transform: translateY(-50%) scale(0.96);
  pointer-events: none;
}

.journey-os.is-open .journey-dock {
  opacity: 1;
  transform: translateY(-50%) translateX(0) scale(1);
  pointer-events: auto;
}

.dock-section-title {
  display: none;
}

.dock-track {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: clamp(8px, 1.2vh, 14px);
  min-height: clamp(400px, 50vh, 560px);
}

.dock-vine {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 3px;
  width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

.vine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--mint), var(--gold));
  box-shadow:
    0 0 14px rgba(83, 240, 200, 0.6),
    0 0 24px rgba(245, 200, 93, 0.32);
  transition: height 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dock-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  width: auto;
  padding: 8px 12px 8px 0;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, transform 220ms ease;
}

.dock-item span {
  position: relative;
  left: 18px;
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.8;
}

.dock-item strong {
  font-size: 0.82rem;
  font-weight: 500;
}

.dock-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  transition: all 0.2s;
}

.dock-item.is-active {
  color: white;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
  text-shadow: 0 0 12px rgba(83, 240, 200, 0.5);
}

.dock-item.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  width: 38px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(83, 240, 200, 0.88), rgba(245, 200, 93, 0.26), transparent);
  box-shadow: 0 0 12px rgba(83, 240, 200, 0.36);
  opacity: 0;
  transform: translateY(-50%) scaleX(0.72);
  transform-origin: left center;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.journey-os.has-detail .dock-item.is-active::after {
  opacity: 0.86;
  transform: translateY(-50%) scaleX(1);
}

.dock-item.is-active::before {
  background: #fafff9;
  box-shadow: 0 0 0 4px rgba(10, 20, 15, 0.8), 0 0 0 5px rgba(120, 255, 180, 0.9);
}

.journey-os.has-detail::after {
  content: "";
  position: absolute;
  z-index: 13;
  left: calc(max(24px, 4vw) + 286px);
  top: 50%;
  width: clamp(72px, 9vw, 148px);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(83, 240, 200, 0.48), rgba(245, 200, 93, 0.2), transparent);
  box-shadow: 0 0 18px rgba(83, 240, 200, 0.24);
  pointer-events: none;
}

/* Big centered detail window, opens over the tree world */
.arc-detail {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: calc(50% + 80px);
  transform: translate(-50%, -50%) translateY(16px) scale(0.97);
  width: min(920px, calc(100vw - 300px));
  height: min(760px, calc(100svh - 80px));
  overflow-y: auto;
  /* Preserve the article's edge bounce without allowing the same gesture to
     spill into the next chapter; app.js hands off only a fresh gesture. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: clamp(30px, 3.4vw, 48px);
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

/* Journey uses the same black-glass material as the first-screen work pane. */
.arc-detail.glass-panel {
  color: #f2fff7;
  background:
    radial-gradient(circle at 84% 18%, rgba(83, 240, 200, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.56), rgba(7, 10, 9, 0.91));
  border-color: rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(83, 240, 200, 0.12),
    0 22px 64px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(83, 240, 200, 0.08);
  scrollbar-color: rgba(166, 248, 202, 0.5) rgba(255, 255, 255, 0.04);
}

.arc-detail.glass-panel::after {
  opacity: 0.34;
  mix-blend-mode: screen;
}

.arc-detail.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

@keyframes arc-pop {
  0% { box-shadow: 0 20px 60px rgba(11, 38, 29, 0.14); }
  45% { box-shadow: 0 26px 74px rgba(11, 38, 29, 0.2), 0 0 42px rgba(83, 240, 200, 0.3); }
  100% { box-shadow: 0 24px 70px rgba(11, 38, 29, 0.16); }
}

.arc-detail.is-open.is-changing {
  animation: arc-pop 360ms ease;
}


.arc-window-topline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(214, 255, 232, 0.56);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.arc-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 46%);
  align-items: end;
  gap: 24px;
  margin-top: 18px;
}

.arc-detail h3 {
  margin: 0;
  color: #f5fff8;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 0.92;
  font-weight: 790;
  letter-spacing: 0;
}

.arc-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 2px;
}

.entity-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(226, 255, 239, 0.9);
  font-weight: 680;
  font-size: 0.7rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.entity-link svg {
  width: 11px;
  height: 11px;
}

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

.entity-link:hover {
  background: rgba(188, 255, 219, 0.13);
  border-color: rgba(188, 255, 219, 0.34);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 14px rgba(83, 240, 200, 0.1);
}

.arc-body {
  max-width: 59ch;
  margin: 32px 0 0;
  color: rgba(242, 250, 245, 0.86);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.98vw, 1.08rem);
  line-height: 1.74;
  letter-spacing: 0.003em;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
}

.arc-body p {
  margin: 0;
}

.arc-paragraph {
  font-style: normal;
  font-weight: 400;
}

.arc-body .arc-paragraph + .arc-paragraph {
  margin-top: 16px;
}

.proof-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.proof-list li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 86px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  color: rgba(235, 255, 244, 0.75);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.proof-list li::after {
  opacity: 0.42;
}

/* Entity Drawer */
.entity-drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  height: calc(100svh - 32px);
  width: min(448px, calc(100vw - 32px));
  z-index: 100;
  padding: 30px 24px 22px;
  overflow: hidden;
  border: 1px solid rgba(230, 255, 240, 0.5);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(14, 52, 38, 0.78), rgba(4, 23, 17, 0.84));
  -webkit-backdrop-filter: blur(30px) saturate(1.25);
  backdrop-filter: blur(30px) saturate(1.25);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 28px));
  transition: transform 420ms cubic-bezier(0.22, 0.9, 0.24, 1);
  box-shadow: -18px 0 60px rgba(0, 12, 8, 0.42), inset 0 1px rgba(255,255,255,.22);
}
.entity-drawer.is-open {
  transform: translateX(0);
}
.drawer-content { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.project-drawer-nav { display: none; }
.entity-drawer.is-projects {
  top: 0;
  right: 0;
  width: min(82vw, 1360px);
  height: 100vh;
  height: 100svh;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(24, 24, 24, 0.06), rgba(6, 9, 8, 0.22)),
    rgba(6, 10, 8, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 1px 0 0 rgba(83, 240, 200, 0.12),
    -24px 0 70px rgba(0, 0, 0, 0.26),
    0 0 28px rgba(83, 240, 200, 0.08);
  flex-direction: row;
}
.entity-drawer.is-projects .project-drawer-nav {
  display: flex;
  flex: 0 0 29%;
  flex-direction: column;
  gap: 9px;
  padding: 34px 18px;
  border-right: 1px solid rgba(220, 255, 234, 0.16);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.035), rgba(5, 7, 6, 0.06));
}
.project-nav-label { margin: 4px 8px 18px; color: #a6f8ca; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.project-nav-item { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; padding: 13px 10px; border: 1px solid transparent; border-radius: 14px; color: rgba(235,255,242,.76); text-align: left; cursor: pointer; background: transparent; transition: background .2s ease, border-color .2s ease; }
.project-nav-item span { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(202,255,222,.1); color: #b4f9d0; font-weight: 800; }
.project-nav-item b { color: #f0fff5; font-size: .9rem; }

.project-nav-item small { color: rgba(227,255,238,.5); font-size: .68rem; }
.project-nav-item:hover, .project-nav-item.is-active { border-color: rgba(150,255,204,.33); background: rgba(213,255,229,.1); }
.entity-drawer.is-projects .drawer-content { padding: 30px 30px 22px; }
.entity-drawer.is-projects .drawer-body { max-width: 816px; margin-right: -30px; padding-right: 30px; }
.drawer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  background: rgba(232,255,241,.1);
  border: 1px solid rgba(230,255,240,.2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9fff3;
  transition: background 0.2s;
}
.drawer-close:hover {
  background: rgba(232,255,241,.2);
}
.drawer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 4px;
}
.drawer-logo {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, rgba(162,255,207,.38), rgba(80,198,159,.1));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dcffe9;
  font-size: 1.35rem;
  font-weight: 800;
}
.drawer-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #f0fff5;
  margin: 0;
}
.drawer-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 24px 12px 3px;
  margin-right: -24px;
  color: rgba(235, 255, 242, 0.82);
  font-size: .96rem;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: rgba(157,255,206,.46) transparent;
}
.drawer-kicker { margin: 0 0 9px 64px; color: #8ff0c4; font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.drawer-intro { margin: 0 0 19px; color: rgba(235,255,242,.76); }
.drawer-list { display: grid; gap: 10px; }
.drawer-card { position: relative; display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; min-height: 82px; padding: 8px; border: 1px solid rgba(220,255,234,.16); border-radius: 16px; background: rgba(239,255,246,.075); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.drawer-card:hover { transform: translateX(-3px); border-color: rgba(139,245,194,.52); background: rgba(239,255,246,.13); }
.drawer-card strong, .drawer-card small { display:block; }
.drawer-card strong { color:#f0fff5; font-size:.91rem; }
.drawer-card small { margin-top:3px; color:rgba(225,255,238,.58); font-size:.73rem; line-height:1.35; }
.drawer-card i { color:#a3f8ce; font-style:normal; font-size:1.1rem; }
.drawer-thumb { display:flex; align-items:center; justify-content:center; width:72px; height:62px; border-radius:11px; overflow:hidden; color:#effff6; font-size:.86rem; letter-spacing:.06em; }
.drawer-card.drawer-video { grid-template-columns: 140px 1fr auto; min-height: 98px; }
.drawer-card.drawer-video .drawer-thumb { width: 140px; height: 79px; border-radius: 10px; }
.thumb-garden { background: radial-gradient(circle at 72% 24%, #e7d578 0 4%, transparent 5%), linear-gradient(135deg,#315b37,#102d1d 60%,#6a5630); }
.thumb-atlas { background: linear-gradient(145deg,#183c59,#5c8792 47%,#d1b26c); }
.thumb-night { background: radial-gradient(circle at 70% 25%,#fff1b2 0 7%,transparent 8%), linear-gradient(135deg,#242b5e,#0c1b32 62%,#573558); }
.thumb-video { position:relative; background-size:cover; }
.thumb-video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumb-video b { position:relative; z-index:1; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:rgba(255,255,255,.9); color:#1b4f3a; font-size:.64rem; padding-left:2px; }
.thumb-video.one { background:linear-gradient(135deg,#12382d,#efb084); }

.thumb-video.two { background:linear-gradient(135deg,#3d3a78,#d47f91); }

.thumb-video.three { background:linear-gradient(135deg,#1b5c71,#5dc9b4); }

.thumb-video.four { background:linear-gradient(135deg,#8c5b38,#273d45); }
.varya-hero { position:relative; display:block; width:100%; aspect-ratio:1.91 / 1; overflow:hidden; margin-bottom:18px; border:1px solid rgba(183,255,214,.28); border-radius:18px; background:#07120f; }

.varya-thumbnail { display:block; width:100%; height:100%; object-fit:contain; transition:transform .35s ease; }

.varya-hero:hover .varya-thumbnail { transform:scale(1.01); }
.drawer-cta { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding:13px 15px; border-radius:12px; color:#0c281c; font-weight:800; background:linear-gradient(90deg,#b6f6d1,#e0f5ad); }

.drawer-cta span { font-size:1.15rem; }

/* Preserve the old 54%-wide, two-column thumbnail calculation while
   distributing the two stacks evenly across the full drawer width. */
.music-showcase {
  --music-column-width: min(214px, calc(27% - 6px));
  display: grid;
  grid-template-columns: var(--music-column-width) minmax(150px, 1fr) var(--music-column-width);
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}

.music-showcase-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.music-showcase-column:last-child { justify-self: end; }

.music-signals {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 20px;
  text-align: center;
}

.music-signal {
  display: grid;
  gap: 2px;
}

.music-signal strong {
  color: #effff6;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.035em;
  text-shadow: 0 0 22px rgba(128, 255, 195, .24);
}

.music-signal span {
  color: rgba(199, 255, 224, .62);
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drawer-cta.music-channel-link {
  height: 32px;
  margin: 0;
  padding: 0 5px 0 12px;
  border-radius: 8px;
  font-size: .75rem;
}

.drawer-cta.music-channel-link,
.drawer-cta.premium-glass-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  border-top-color: rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 16% -35%, rgba(255, 255, 255, .14), transparent 48%),
    linear-gradient(135deg, rgba(18, 22, 20, .88), rgba(2, 4, 3, .72));
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
  backdrop-filter: blur(22px) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 24px rgba(0, 0, 0, .34),
    0 1px 3px rgba(0, 0, 0, .52);
  color: rgba(245, 255, 249, .92);
  letter-spacing: .01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .75);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.drawer-cta.music-channel-link::before,
.drawer-cta.premium-glass-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, .08) 34%, transparent 58%);
  opacity: .55;
}

.drawer-cta.music-channel-link span,
.drawer-cta.premium-glass-cta span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #dffbec;
  font-size: .9rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.drawer-cta.music-channel-link:hover,
.drawer-cta.premium-glass-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(209, 255, 229, .14);
  border-top-color: rgba(255, 255, 255, .2);
  background:
    radial-gradient(circle at 16% -35%, rgba(255, 255, 255, .18), transparent 48%),
    linear-gradient(135deg, rgba(22, 28, 25, .92), rgba(3, 6, 4, .78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 13px 30px rgba(0, 0, 0, .42),
    0 0 18px rgba(118, 246, 184, .06);
}

.drawer-cta.music-channel-link:hover span,
.drawer-cta.premium-glass-cta:hover span {
  transform: translate(1px, -1px);
  border-color: rgba(207, 255, 227, .08);
  background: rgba(180, 255, 213, .09);
}

.drawer-note { color:rgba(229,255,238,.5); font-size:.75rem; text-align:center; margin:16px 8px 0; }
.drawer-video-section { margin-top: 22px; }

.drawer-section-label { margin: 0 0 9px; color: #a7f6cb; font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.drawer-channel-link { display:flex; justify-content:space-between; margin-top:12px; padding: 4px 2px; color:#b8f8d5; font-size:.78rem; font-weight:700; }

.drawer-channel-link:hover { color:#f0fff5; }

@media (max-width: 600px) {
  .entity-drawer { top: 8px; right: 8px; width: calc(100vw - 16px); height: calc(100svh - 16px); padding: 24px 18px 18px; border-radius: 22px; }
  .entity-drawer.is-projects { top: 0; right: 0; width: 100vw; height: 100svh; border-radius: 0; flex-direction: column; }
  .entity-drawer.is-projects .project-drawer-nav { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 12px 8px; gap: 5px; border-right: 0; border-bottom: 1px solid rgba(220,255,234,.16); }
  .project-nav-label { grid-column: 1 / -1; margin: 0 6px 5px; }

.project-nav-item { display: flex; flex-direction: column; gap: 4px; padding: 8px 3px; text-align:center; }

.project-nav-item span { width:28px; height:28px; }

.project-nav-item small { display:none; }
  .entity-drawer.is-projects .drawer-content { padding: 20px 18px 14px; }
  .drawer-body, .entity-drawer.is-projects .drawer-body { margin-right: -18px; padding-right: 18px; }
  .drawer-card { grid-template-columns: 62px 1fr auto; }

.drawer-thumb { width: 62px; height: 54px; }
  .drawer-card.drawer-video { grid-template-columns: 98px 1fr auto; min-height: 76px; }

  .drawer-card.drawer-video .drawer-thumb { width: 98px; height: 55px; }

  .music-showcase {
    grid-template-columns: var(--music-column-width) var(--music-column-width);
    justify-content: space-between;
    row-gap: 18px;
  }

  .music-signals {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

.signal-line {
  display: grid;
  gap: 7px;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(230, 255, 241, 0.88);
  font-size: 0.94rem;
  line-height: 1.5;
}

.signal-line[hidden] {
  display: none;
}

.signal-line strong {
  color: #9ef1c4;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-line span {
  max-width: 64ch;
  font-weight: 500;
}

.contact-window {
  padding: clamp(28px, 5vw, 54px);
  border-radius: 28px;
}

/* Contact rests in the garden at the very end of the pinned stage */
.contact-layer {
  z-index: 16;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 max(24px, 4vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.contact-layer.on {
  opacity: 1;
}

.contact-layer.on .contact-window {
  pointer-events: auto;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 760;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 10px 24px rgba(11, 38, 29, 0.12);
}

.button-primary {
  color: #f8fff9;
  background:
    linear-gradient(135deg, rgba(12, 52, 37, 0.96), rgba(23, 101, 73, 0.88)),
    #0b2b20;
}

.button-secondary {
  color: #0c2a20;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(221, 255, 246, 0.2)),
    rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.button::after {
  opacity: 0.44;
}

.contact-window {
  width: min(680px, 100%);
  text-align: center;
}

.contact-window p:not(.section-kicker) {
  max-width: 480px;
  margin: 18px auto 28px;
  font-size: 1.04rem;
}

@media (max-width: 760px) {
  :root {
    --world-scale: 1.58;
    --world-x: -9vw;
    --world-y: 1vh;
  }

  .stage {
    height: auto;
  }

  .world {
    object-position: 59% center;
    transform-origin: 63% 52%;
  }

.person-front {
    bottom: -8vh;
    width: clamp(420px, 116vw, 640px);
  }

  .person-back {
    left: 58%;
    bottom: 2vh;
    width: clamp(126px, 35vw, 186px);
  }

.site-nav {
    padding: 24px 22px;
  }

  .brand {
    gap: 14px;
  }

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

  .brand-name {
    font-size: 0.68rem;
    letter-spacing: 0.42em;
  }

  .nav-links {
    display: none;
  }

  .nav-contact {
    min-height: 34px;
    padding: 0 10px;
  }

  .hero-copy {
    padding: 18vh 20px 0;
    align-content: start;
  }

  .hero-copy h1 {
    max-width: 92vw;
    font-size: clamp(2.8rem, 13vw, 4.8rem);
  }

  .hero-copy p {
    max-width: 320px;
    margin-top: 18px;
    font-size: 1rem;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .button {
    min-height: 43px;
    padding: 0 14px;
    font-size: 0.82rem;
  }

  .tree-chip {
    min-width: 118px;
    padding: 8px 12px 8px 28px;
    font-size: 0.76rem;
  }

  .tree-chip small {
    font-size: 0.62rem;
  }

  .projects-label { left: 51%; top: 26%; }
  .chip-games { left: 46%; top: 32%; }
  .chip-varya { left: 54%; top: 46%; }
  .chip-music { left: 42%; top: 60%; }

  .garden-about {
    top: 23%;
    left: 20px;
    width: min(76vw, 360px);
  }

  .garden-about h2 {
    margin-bottom: 6px;
    font-size: clamp(1rem, 4.5vw, 1.55rem);
  }

  .garden-about p:not(.garden-kicker, .garden-drag-hint p) {
    font-size: clamp(0.5rem, 2vw, 0.65rem);
    line-height: 1.32;
  }

  .garden-about p + p {
    margin-top: 6px;
    font-size: 0.45rem;
  }

  .contact-window {
    border-radius: 20px;
  }

  /* Journey: compact top dock, detail fills the screen */
  .history-button {
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    width: min(80vw, 320px);
    text-align: center;
    justify-items: center;
  }

  .journey-os.is-open .history-button {
    transform: translate(-50%, -50%) scale(0.96);
  }

  .journey-dock {
    top: 8%;
    left: 50%;
    width: min(94vw, 520px);
    height: auto;
    max-height: 24vh;
    display: grid;
    grid-template-rows: auto auto;
    gap: 9px;
    overflow: hidden;
    padding: 14px;
    border-radius: 20px;
    transform: translate(-50%, 0) translateX(-8px) scale(0.98);
  }

  .journey-os.is-open .journey-dock {
    transform: translate(-50%, 0) scale(1);
  }

  .dock-vine {
    display: none;
  }

  .dock-section-title {
    padding: 0 2px;
  }

  .dock-track {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .dock-item {
    min-width: 132px;
    min-height: 48px;
    grid-template-columns: 26px 1fr;
    padding: 8px 10px;
    scroll-snap-align: start;
  }

  .dock-item span {
    left: 0;
  }

  .dock-item::before {
    display: none;
  }

  .dock-item.is-active::after,
  .journey-os.has-detail::after {
    display: none;
  }

  .arc-detail {
    left: 50%;
    top: 60%;
    width: min(94vw, 560px);
    max-height: 62vh;
    padding: 24px;
  }

  .arc-heading-row {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .arc-context {
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
    padding-bottom: 2px;
  }

  .entity-link {
    flex: 0 0 auto;
  }

  .arc-body {
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .arc-detail.is-open {
    transform: translate(-50%, -50%) scale(1);
  }

  .arc-detail::before {
    width: 42%;
    box-shadow:
      154px 0 0 -3px rgba(255, 255, 255, 0.42),
      192px 0 0 -5px rgba(255, 255, 255, 0.34);
  }

  .arc-window-topline {
    flex-direction: column;
    gap: 6px;
  }

  .proof-list {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

}

/* ── screen 2's world ────────────────────────────────────────────────────
   The photographic forest takes over from the tree scene once the camera
   pullback finishes. It sits above .scene (z 1) and below .stage-ui (z 20),
   so every chip, dock, and panel still rides on top of it. */

.understory {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  transition: none;
}
.understory canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#understory-front {
  /* the near ground draws back over the cards the host puts between the two */
  z-index: 3;
}
#understory-back {
  z-index: 1;
}
.understory[data-understory="failed"] {
  background: #0d120d url("understory/forest-source.png") center / cover no-repeat;
}
.understory[data-understory="failed"] canvas {
  display: none;
}

/* ── screen 2: cards, between the two plates ─────────────────────────────
   The back plate is z1 inside .understory, these are z2, the near ground is
   z3 — so the trunk's moss passes in front of a card's shoulder. */

.u-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.u-card {
  position: absolute;
  left: calc(var(--ox, 0px) + var(--cx) * var(--ux, 1px));
  top: calc(var(--oy, 0px) + var(--cy) * var(--ux, 1px));
  width: calc(var(--cw, 230) * var(--ux, 1px));
  padding: calc(13 * var(--ux, 1px));
  border-radius: calc(18 * var(--ux, 1px));
  background: #f2f3ef;
  color: #23261f;
  font-family: var(--font-sans, inherit);
  box-shadow: 0 calc(18 * var(--ux, 1px)) calc(46 * var(--ux, 1px)) rgba(4, 8, 4, 0.4);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  opacity: var(--chip-opacity, 0);
  transition: opacity 260ms ease, box-shadow 240ms ease;
}
.u-card.is-dragging {
  cursor: grabbing;
  box-shadow: 0 calc(30 * var(--ux, 1px)) calc(70 * var(--ux, 1px)) rgba(4, 8, 4, 0.55);
}
.u-card__well {
  display: grid;
  place-items: center;
  aspect-ratio: 1.86 / 1;
  margin: 0 0 calc(11 * var(--ux, 1px));
  border-radius: calc(11 * var(--ux, 1px));
  background: #121a13;
  overflow: hidden;
}
.u-card__well span {
  font-size: calc(9 * var(--ux, 1px));
  letter-spacing: calc(1.1 * var(--ux, 1px));
  text-transform: uppercase;
  color: rgba(244, 246, 241, 0.36);
}
.u-card__label {
  padding-left: calc(3 * var(--ux, 1px));
  margin: 0;
  font-size: calc(11 * var(--ux, 1px));
  color: #7c8177;
}
.u-card__title {
  margin: calc(2 * var(--ux, 1px)) 0 0;
  padding-left: calc(3 * var(--ux, 1px));
  font-size: calc(24 * var(--ux, 1px));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: calc(-0.6 * var(--ux, 1px));
  color: #23261f;
}
.u-card__body {
  margin: calc(6 * var(--ux, 1px)) 0 0;
  padding: 0 calc(3 * var(--ux, 1px)) calc(3 * var(--ux, 1px));
  font-size: calc(12 * var(--ux, 1px));
  line-height: 1.5;
  color: #565c54;
}

/* the old tree chips described a tree that screen 2 no longer has */
/* the old tree chips described a tree that screen 2 no longer has, and page 1
   already introduces him — neither belongs on this screen */
.tree-chips { display: none; }

/* ── the bottom glass pane ───────────────────────────────────────────────
   The header lives here now, alongside Journey. */

.u-dock {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(11, 17, 11, 0.46);
  border: 1px solid rgba(244, 246, 241, 0.14);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  overflow: hidden;
  opacity: var(--dock-opacity, 1);
  transition: opacity 300ms ease;
  pointer-events: auto;
}
.u-dock__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    120px circle at var(--rim-x, 50%) 120%,
    rgba(244, 246, 241, 0.15),
    rgba(244, 246, 241, 0) 62%
  );
}
.u-dock-item {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  color: rgba(244, 246, 241, 0.66);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform-origin: 50% 100%;
  will-change: transform;
}
.u-dock-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 246, 241, calc(0.09 * var(--glow, 0)));
}
.u-dock-item:hover { color: #f4f6f1; }
.u-dock-item--mark { padding-inline: 11px; }
/* The source PNG is black ink on transparent, which was invisible against the
   dock's own dark glass — it read as an empty slot. Flip it to the dock's
   foreground colour rather than shipping a second asset. */
.u-dock-item--mark img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.72;
  transition: opacity 200ms ease;
}
.u-dock-item--mark:hover img { opacity: 1; }

/* the header has moved into the pane */
.site-nav { display: none; }

@media (max-width: 700px) {
  .u-dock { gap: 0; padding: 5px 7px; bottom: 20px; max-width: calc(100vw - 24px); }
  .u-dock-item { padding: 5px 8px; font-size: 11px; letter-spacing: 0; }
}

/* the card the rabbit is standing on, so the platform reads as solid */
.u-card.is-rabbit-platform {
  box-shadow:
    0 calc(18 * var(--ux, 1px)) calc(46 * var(--ux, 1px)) rgba(4, 8, 4, 0.4),
    0 -3px 0 rgba(158, 215, 164, 0.95);
  cursor: default;
}

/* ── screen 2: the writing stack ─────────────────────────────────────────
   Deliberately not a project card. No media well, a warmer paper, and the
   serif the headlines use — so the two kinds of card read as two kinds of
   thing rather than as an inconsistent set. */

.u-notes {
  position: absolute;
  left: calc(var(--ox, 0px) + var(--cx) * var(--ux, 1px));
  top: calc(var(--oy, 0px) + var(--cy) * var(--ux, 1px));
  width: calc(var(--cw, 252) * var(--ux, 1px));
  /* every note is absolutely positioned so they can stack, which leaves the
     container with no height of its own — and a zero-height box cannot be
     dragged, cannot be stood on, and cannot be occluded */
  height: calc(214 * var(--ux, 1px));
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  opacity: var(--chip-opacity, 0);
  transition: opacity 260ms ease;
}
.u-notes.is-dragging { cursor: grabbing; }

.u-note {
  position: absolute;
  inset: 0;
  padding: calc(17 * var(--ux, 1px)) calc(16 * var(--ux, 1px)) calc(14 * var(--ux, 1px));
  border-radius: calc(6 * var(--ux, 1px));
  background: #efeae0;
  color: #22201c;
  box-shadow: 0 calc(14 * var(--ux, 1px)) calc(34 * var(--ux, 1px)) rgba(4, 8, 4, 0.34);
  transform-origin: 50% 90%;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 300ms ease;
}

/* the pile: each note behind rotates and drops a little, so its edge shows */
.u-note:nth-child(1) { transform: rotate(-1.4deg) translateY(0);                z-index: 3; }
.u-note:nth-child(2) { transform: rotate(1.9deg)  translateY(calc(5 * var(--ux, 1px))); z-index: 2; }
.u-note:nth-child(3) { transform: rotate(-0.6deg) translateY(calc(10 * var(--ux, 1px))); z-index: 1; }

/* only the top note is readable; the rest are edges */
.u-note:not(:first-child) .u-note__title,
.u-note:not(:first-child) .u-note__body,
.u-note:not(:first-child) .u-note__more,
.u-note:not(:first-child) .u-note__date { opacity: 0; }

/* a small fan on hover, so the pile announces that it is a pile */
.u-notes:hover .u-note:nth-child(2) { transform: rotate(3.4deg) translateY(calc(8 * var(--ux, 1px))); }
.u-notes:hover .u-note:nth-child(3) { transform: rotate(-2.6deg) translateY(calc(15 * var(--ux, 1px))); }

.u-note__date {
  margin: 0;
  font-size: calc(9.5 * var(--ux, 1px));
  letter-spacing: calc(1.5 * var(--ux, 1px));
  text-transform: uppercase;
  color: #8a8375;
}
.u-note__title {
  margin: calc(7 * var(--ux, 1px)) 0 0;
  font-family: var(--font-display);
  font-size: calc(23 * var(--ux, 1px));
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: calc(-0.3 * var(--ux, 1px));
  color: #22201c;
}
.u-note__body {
  margin: calc(9 * var(--ux, 1px)) 0 0;
  font-family: var(--font-display);
  font-size: calc(13 * var(--ux, 1px));
  line-height: 1.62;
  color: #514c42;
}
/* Now an <a> to /writing/ rather than a <p>, so the pile actually opens.
   display:block keeps the full-width rule it had as a paragraph. */
.u-note__more {
  display: block;
  margin: calc(12 * var(--ux, 1px)) 0 0;
  padding-top: calc(9 * var(--ux, 1px));
  border-top: 1px solid rgba(34, 32, 28, 0.14);
  font-size: calc(10.5 * var(--ux, 1px));
  letter-spacing: calc(0.8 * var(--ux, 1px));
  text-transform: uppercase;
  color: #6d665a;
  text-decoration: none;
  transition: color 160ms ease;
}

.u-note:first-child .u-note__more:hover { color: #22201c; }

/* Only the top note is readable, so only the top note's link is reachable. */
.u-note:not(:first-child) .u-note__more { pointer-events: none; }

.u-notes.is-rabbit-platform .u-note:first-child {
  box-shadow:
    0 calc(14 * var(--ux, 1px)) calc(34 * var(--ux, 1px)) rgba(4, 8, 4, 0.34),
    0 -3px 0 rgba(158, 215, 164, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .u-note { transition: none; }
}

/* ── the media wells ─────────────────────────────────────────────────────
   Three different answers, because three identical dark rectangles were the
   heaviest thing on the screen and said nothing. */

.u-card__well > * { pointer-events: none; }

/* Varya: the real product shot. The label sits underneath as the fallback, so
   if the remote image never arrives the well still reads. */
.u-well--shot { position: relative; }
.u-well--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.u-well--shot.is-empty img { display: none; }

/* Music: a waveform, built from bars rather than an asset */
.u-well--wave { position: relative; }
.u-wave {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--ux, 1px));
  padding: 0 calc(12 * var(--ux, 1px));
}
.u-wave i {
  display: block;
  flex: 1 1 auto;
  min-width: 1px;
  max-width: calc(3 * var(--ux, 1px));
  height: 100%;
  border-radius: 999px;
  background: rgba(170, 210, 176, 0.62);
  transform: scaleY(0.12);
  transform-origin: 50% 50%;
  animation: u-wave-bar 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -47ms);
}
@keyframes u-wave-bar {
  0%   { transform: scaleY(0.10); opacity: 0.55; }
  100% { transform: scaleY(0.92); opacity: 1; }
}
.u-well__label {
  position: absolute;
  left: calc(10 * var(--ux, 1px));
  bottom: calc(7 * var(--ux, 1px));
  z-index: 2;
}

/* Games: the actual sprite from the actual game */
.u-well--sprite { position: relative; overflow: hidden; }
.u-sprite {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 55px;
  height: 74px;
  margin-left: -27px;
  background: url("assets/game/bunny-sheet.png") 0 0 / 220px 444px no-repeat;
  image-rendering: pixelated;
  animation: bunny-idle 0.7s steps(4) infinite;
  z-index: 2;
}
.u-card:hover .u-sprite { animation: bunny-run 0.34s steps(4) infinite; }
.u-well__ground {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 20%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(170, 210, 176, 0) 0%,
    rgba(170, 210, 176, 0.4) 30%,
    rgba(170, 210, 176, 0.4) 70%,
    rgba(170, 210, 176, 0) 100%);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .u-wave i,
  .u-sprite,
  .u-card:hover .u-sprite { animation: none; }
  .u-wave i { transform: scaleY(0.45); }
}

/* ── phone composition ──────────────────────────────────────────────────
   Desktop cards live in image coordinates so they can sit inside the forest.
   A phone only shows a narrow crop of that image, which placed two cards off
   screen and made the document wider than the viewport. On small screens the
   same content becomes an authored 2 × 2 shelf: still layered over the world,
   but readable, tappable, and contained. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  .pinned-layers,
  .stage-ui,
  .understory,
  .u-cards {
    overflow: clip;
  }

  /* Phones get an art-directed portrait version of the hero. The desktop
     source places the person and plant too far apart for a 9:16 cover crop;
     this plate preserves both focal points without letterboxing. */
  .hero-background {
    background-image: url("assets/mobile-hero-bg.png");
    background-position: center top;
  }

  .plant-sparkles {
    display: none;
  }

  /* Keep the portrait as the hero, but remove the three competing biography
     lines. The concise version is the right amount of copy for one screen. */
  .hero-content {
    padding: 22px 20px calc(82px + env(safe-area-inset-bottom));
  }

  .hero-location {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    right: 20px;
    left: 20px;
    margin: 0;
  }

  .hero-location .location-desc {
    display: none;
  }

  .hero-text-block .hero-subhead:not(:last-of-type) {
    display: none;
  }

  .hero-headline {
    max-width: 9.5em;
    margin-bottom: 12px;
    font-size: clamp(2rem, 10.5vw, 2.75rem);
    line-height: 1.02;
    text-wrap: pretty;
  }

  .hero-text-block .hero-subhead:last-of-type {
    display: block;
    max-width: 21rem;
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.45;
    text-wrap: pretty;
  }

  .hero-btn-dark {
    min-height: 48px;
    padding: 0 22px;
  }

  /* A persistent control should feel like a real mobile tab bar, not a tiny
     desktop pill floating above the home indicator. */
  .u-dock {
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: min(430px, calc(100vw - 16px));
    max-width: none;
    min-height: 52px;
    justify-content: space-between;
    gap: 0;
    padding: 5px;
  }

  .u-dock-item {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 5px;
    font-size: 10.5px;
  }

  .u-dock-item--mark {
    flex: 0 0 40px;
    padding-inline: 8px;
  }

  .u-dock-item--mark img {
    width: 19px;
    height: 19px;
  }

  .garden-about {
    top: calc(58px + env(safe-area-inset-top));
    left: 18px;
    width: calc(100% - 36px);
  }

  .garden-about::before {
    inset: -24px -34px -28px;
  }

  .garden-about h2 {
    max-width: 21rem;
    margin-bottom: 8px;
    font-size: clamp(1.45rem, 6.8vw, 1.9rem);
    line-height: 1.08;
  }

  .garden-about p:not(.garden-kicker, .garden-drag-hint p) {
    max-width: 20rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  .garden-drag-hint {
    display: none;
  }

  .u-cards {
    inset: clamp(244px, 31svh, 280px) 14px calc(74px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 11px;
    align-content: start;
    align-items: start;
  }

  .u-card,
  .u-notes {
    position: relative;
    inset: auto;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    min-width: 0;
    touch-action: manipulation;
    cursor: pointer;
  }

  .u-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 15px;
  }

  .u-card[data-u-card="varya"] { order: 1; }
  .u-card[data-u-card="music"] { order: 2; }
  .u-notes { order: 3; }
  .u-card[data-u-card="games"] { order: 4; }

  .u-card__well {
    flex: 0 0 auto;
    margin-bottom: 8px;
    border-radius: 9px;
  }

  .u-card__label {
    overflow: hidden;
    font-size: 8px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .u-card__title {
    margin-top: 2px;
    font-size: clamp(1.08rem, 5vw, 1.35rem);
  }

  .u-card__body {
    display: none;
  }

  .u-card__well span {
    font-size: 7px;
  }

  .u-note {
    padding: 14px 13px 11px;
  }

  .u-notes {
    height: 158px;
  }

  .u-note__date {
    font-size: 8px;
  }

  .u-note__title {
    margin-top: 6px;
    font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  }

  .u-note__body {
    display: none;
  }

  .u-note__more {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 8.5px;
  }

  .u-sprite {
    transform: scale(0.72);
    transform-origin: 50% 100%;
  }

  .tree-climb {
    display: none !important;
  }

  /* The top timeline and the detail card share a short phone viewport. Give
     both predictable space and keep the primary tab bar clear. */
  .journey-dock {
    top: calc(14px + env(safe-area-inset-top));
    width: calc(100vw - 24px);
    max-height: none;
    padding: 10px;
    border: 1px solid rgba(244, 246, 241, 0.14);
    border-radius: 18px;
    background: rgba(8, 14, 10, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
  }

  .dock-track {
    min-height: 0;
    scrollbar-width: none;
  }

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

  .arc-detail {
    top: calc(50% + 42px);
    width: calc(100vw - 24px);
    height: auto;
    max-height: calc(100svh - 190px - env(safe-area-inset-bottom));
    padding: 22px 20px;
    border-radius: 22px;
  }

  .arc-detail h3 {
    margin: 0;
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .arc-body {
    margin-top: 16px;
  }

  .contact-layer {
    padding: 18px 14px calc(76px + env(safe-area-inset-bottom));
  }

  .stage.is-contact-active .garden-about,
  .stage.is-contact-active .u-cards {
    opacity: 0;
    pointer-events: none;
  }

  .contact-window {
    padding: 28px 20px;
  }

  .contact-window h2 {
    font-size: clamp(2rem, 10vw, 2.7rem);
  }

  .contact-window p:not(.section-kicker) {
    margin: 14px auto 22px;
    font-size: 0.94rem;
  }

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

  .contact-actions .button-primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 350px) {
  .u-dock-item { font-size: 9.5px; }
  .u-dock-item--mark { flex-basis: 34px; }
  .u-cards { inset-inline: 10px; gap: 8px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .garden-about {
    top: calc(34px + env(safe-area-inset-top));
  }

  .garden-about p:not(.garden-kicker, .garden-drag-hint p) {
    display: none;
  }

  .u-cards {
    top: 176px;
  }

  .u-card__well {
    aspect-ratio: 2.35 / 1;
  }
}