/* Motion direction: liquid ink, free scrolling, and one small travelling mark. */
.hero h1 {
  font-size: clamp(126px, 13.2vw, 225px);
  line-height: 1.025;
}
.hero-composition { padding-top: 20px; }
.hero h1 > span { animation: none !important; }
.hero h1 { animation: type-arrives 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes type-arrives {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
.orb-wrap {
  top: -24px;
  width: max(480px, min(51vw, calc(100svh - 320px)));
  height: max(480px, min(51vw, calc(100svh - 320px)));
}
.orb-wrap canvas { animation: ink-arrives 1.5s ease both; }
.orb-wrap canvas { pointer-events: auto; }
@keyframes ink-arrives {
  from { opacity: 0; }
  to { opacity: 1; }
}
.orb-cross { font-size: 20px; opacity: .6; }
.cross-c, .orb-caption { display: none; }
.hero-bottom { align-items: center; }

/* Remains in ordinary document flow: no sticky panel or artificial scroll gap. */
.manifesto { height: auto; min-height: 0; overflow: clip; }
.manifesto-inner {
  position: relative;
  min-height: 740px;
  padding: 40px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 65px;
  overflow: clip;
}
.manifesto-type {
  align-self: center;
  font-size: clamp(80px, 10.4vw, 172px);
  line-height: 1.075;
  padding: 14px 0;
}
.manifesto-type span:nth-child(2) { margin-left: 11vw; }
.manifesto-foot { margin-top: auto; }

/* The logo's original box stays intact, preventing any layout shift. */
.traveller {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 22;
  width: 44px;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
  transform-origin: center;
}
.traveller img {
  width: 100%;
  height: auto;
  transition: filter .35s ease;
}
.traveller.on-blue img { filter: brightness(0) invert(1); }
.js-ready:not(.quiet-motion) .traveller { visibility: visible; }
.js-ready:not(.quiet-motion) .brand img { opacity: 0; }
.quiet-motion .traveller { visibility: hidden; }
.quiet-motion .brand img { opacity: 1; }
.quiet-motion .hero h1, .quiet-motion .orb-wrap canvas { animation: none; }
.quiet-motion .manifesto-type span, .quiet-motion .project-image img { transform: none !important; }
.quiet-motion { scroll-behavior: auto; }

@media (min-width: 1650px) {
  .hero h1 { font-size: 220px; }
  .hero-composition { min-height: 835px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-composition { height: 690px; }
  .hero h1 { font-size: 15vw; }
  .orb-wrap { width: 59vw; height: 59vw; right: -12vw; top: 30px; }
  .hero-note { bottom: 36px; left: 37%; }
  .header nav { gap: 16px; }
  .header-cta { gap: 15px; padding-inline: 16px; }
  .manifesto-inner { min-height: 650px; }
  .manifesto-type { font-size: 10.2vw; }
}
@media (max-width: 760px) {
  .hero-composition { padding-top: 22px; min-height: clamp(760px, calc(70vw + 487px), 950px); }
  .hero h1 { font-size: clamp(72px, 23vw, 110px); line-height: 1.055; }
  /* Lift the visible centre while keeping the upper silhouette clear of TVAR.
     A little less diameter frees the note below; the right edge stays on paper. */
  .orb-wrap { width: min(84vw, 380px); height: min(84vw, 380px); top: clamp(279px, calc(72vw + 4px), 359px); right: max(-10vw, -36px); opacity: 1; }
  .cross-a, .cross-b { display: none; }
  .hero-note { bottom: 36px; }
  .scroll-cue { bottom: 38px; }
  .hero-bottom { gap: 10px; }
  .hero-bottom > span:first-child { max-width: 168px; }
  .manifesto-inner { min-height: 0; padding: 32px var(--pad) 38px; gap: 58px; }
  .manifesto-type { font-size: 15vw; line-height: 1.12; align-self: flex-start; width: 100%; }
  .manifesto-type span:nth-child(2) { margin-left: 4vw; }
  .manifesto-type span:nth-child(3) { width: 92%; }
  .manifesto-foot { gap: 20px; }
  .manifesto-foot img { width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .orb-wrap canvas { animation: none !important; }
  .traveller { display: none; }
  .brand img { opacity: 1 !important; }
}

@media (max-width: 380px) {
  /* One clear scroll affordance on narrow phones; both links have the same target. */
  .scroll-cue { display: none; }
  .hero-note { right: 0; grid-template-columns: 20px minmax(0, 1fr); }
}
/* A transparent Three.js stage travels with the articulated creature. */
.traveller { aspect-ratio: 1; opacity: 0; }
.traveller canvas { display: none; width: 100%; height: 100%; }
.traveller.three-creature canvas { display: block; }
.traveller.three-creature img { display: none; }
.js-ready:not(.quiet-motion) .brand img { opacity: 1; }
.quiet-motion .brand img { opacity: 1 !important; }
/* The fallback mark uses the same centred canvas origin as the 3D model. */
.traveller:not(.three-creature) img { position: absolute; top: 50%; transform: translateY(-50%); }

/* Reserve the orb's entire stage before the note. The previous fixed-height
   composition let a growing orb collide with bottom-anchored copy. */
.hero-composition {
  --orb-size:max(480px, min(51vw, calc(100svh - 320px)));
  --orb-top:-24px;
  display:grid;
  grid-template-rows:minmax(calc(var(--orb-size) + var(--orb-top)), 1fr) auto;
  height:auto;
  max-height:none;
}
.hero h1 { grid-row:1; }
.orb-wrap { width:var(--orb-size); height:var(--orb-size); top:var(--orb-top); }
.hero-note {
  position:relative;
  grid-row:2;
  left:auto;
  bottom:auto;
  justify-self:end;
  width:50%;
  margin-top:20px;
  margin-bottom:48px;
}
@media (min-width:761px) and (max-width:1100px) {
  .hero-composition { --orb-size:59vw; --orb-top:30px; }
  .hero-note { width:63%; margin-bottom:36px; }
}
@media (max-width:760px) {
  .hero-composition {
    --orb-size:min(84vw, 380px);
    grid-template-rows:auto auto auto;
    min-height:0;
    padding-bottom:36px;
  }
  .orb-wrap {
    position:relative;
    grid-row:2;
    justify-self:end;
    top:auto;
    right:auto;
    margin-top:-8px;
    margin-right:-12px;
  }
  .hero-note { grid-row:3; width:100%; right:auto; margin:4px 0 0; }
}