:root{
  --c-ink:#171717;
  --c-paper:#FCFCFC;
  --serif:'Jost',-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}

/* Neutralize the original split-layout flex/100vh rule for this page's
   hero — the new collage is a full-bleed block, not a flex child. */
#view-home.active{display:block; height:auto;}

/* Make sure the real site's gradient nav stays legible over the busy
   collage art beneath it (worked around a Chromium compositing quirk
   where nav text could visually paint under a sibling <img/video>). */
#site-nav{
  background:rgba(252,252,252,0.88) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.collage-hero{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  background:#FCFCFC;
  padding-top:0;
  overflow:hidden;
}

.collage-stage{
  position:relative;
  width:100%;
  max-width:2400px;
  aspect-ratio:16/9;
  margin:0 auto;
  overflow:hidden;
}

.c-el{
  position:absolute;
  will-change:transform;
  pointer-events:none;
}
.c-el img, img.c-el{
  width:100%; height:100%; object-fit:contain; display:block;
}
/* Bare background video (e.g. the frontmost particle-flowers overlay) --
   same treatment as a background img.c-el: full-bleed, non-interactive. */
video.c-el{
  width:100%; height:100%; object-fit:cover; display:block;
  background:transparent;
}
.c-vid{
  width:100%; height:100%; object-fit:contain; display:block;
  background:transparent;
}

/* Idle "floating above the art" motion — a slow, gentle bob + tiny tilt,
   independent of the mouse-parallax transform (which lives on the outer
   .c-el and is driven by JS). Each element gets its own duration/delay/
   amplitude via CSS custom properties set inline, so nothing moves in
   lockstep. */
.c-float{
  width:100%; height:100%;
  animation-name:idle-float;
  animation-duration:var(--fdur, 6s);
  animation-delay:var(--fdelay, 0s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
@keyframes idle-float{
  0%   { transform:translateY(0px) rotate(0deg); }
  50%  { transform:translateY(calc(-1 * var(--famp, 5px))) rotate(0.5deg); }
  100% { transform:translateY(0px) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .c-float{ animation:none; }
}

/* ART / MOTION are now the real PSD-composited label art (exact color
   treatment from the comp) rather than CSS-drawn outlined text. */
.c-label-link{ pointer-events:auto; display:block; }
.c-label-img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .25s ease, filter .25s ease;
}
.c-label-link:hover .c-label-img{
  transform:scale(1.035);
  filter:drop-shadow(0 2px 10px rgba(23,23,23,0.18));
}

html,body{background:var(--c-paper);}