:root{
  --ink:#f2f2ed;
  --muted:rgba(242,242,237,.62);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#242321;color:var(--ink)}
html{font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}

.world{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:#242321;
}

/* The image is the page itself: no separate black panel, no visible frame. */
.field{
  position:absolute;
  inset:-6%;
  z-index:-6;
  background:url('/assets/hero.webp') center 48% / cover no-repeat;
  transform:scale(1.04);
  will-change:transform,background-position,translate;
  animation:field-breathe 32s ease-in-out infinite alternate;
}
.shade{
  position:absolute;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(90% 110% at 75% 42%,transparent 0 42%,rgba(0,0,0,.05) 65%,rgba(0,0,0,.27) 100%),
    linear-gradient(90deg,rgba(7,7,7,.41) 0%,rgba(7,7,7,.12) 34%,rgba(7,7,7,.01) 62%,rgba(7,7,7,.02) 100%),
    linear-gradient(0deg,rgba(5,5,5,.42) 0%,rgba(5,5,5,.08) 28%,transparent 52%);
}
.grain{
  position:absolute;inset:0;z-index:-3;pointer-events:none;opacity:.085;
  background-image:
    radial-gradient(rgba(255,255,255,.30) .55px,transparent .8px),
    radial-gradient(rgba(0,0,0,.38) .55px,transparent .8px);
  background-position:0 0,6px 9px;
  background-size:13px 13px,17px 17px;
  mix-blend-mode:soft-light;
}
#dust{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
}

.top{
  position:relative;z-index:5;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:30px;
  padding:clamp(24px,4.2vw,66px) clamp(24px,5.2vw,84px);
}
.brand{display:block;width:clamp(170px,17vw,270px)}
.brand img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.24));
}
.nav{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:clamp(18px,3.2vw,50px);
  padding-top:6px;
}
.nav a{
  color:var(--ink);text-decoration:none;text-transform:lowercase;
  font-size:10px;letter-spacing:.29em;opacity:.72;
  transition:opacity .25s ease,transform .25s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.nav a:hover,.nav a:focus-visible{opacity:1;transform:translateY(-1px);outline:none}

.signal{
  position:absolute;z-index:5;
  left:clamp(24px,5.2vw,84px);
  top:44%;
  text-shadow:0 3px 22px rgba(0,0,0,.55);
}
.signal p{
  margin:0;font-size:clamp(20px,2.15vw,35px);
  font-weight:300;letter-spacing:.24em;text-transform:lowercase;
}
.signal span{display:block;width:34px;height:1px;background:rgba(255,255,255,.72);margin-top:24px}

.micro{
  position:absolute;z-index:5;
  right:clamp(24px,5.2vw,84px);
  bottom:142px;
  font-size:8px;letter-spacing:.28em;text-transform:lowercase;
  color:rgba(255,255,255,.48);
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}

/* Quiet moving art archive. */
.works{
  position:absolute;z-index:6;left:0;right:0;bottom:0;
  padding:0 0 max(22px,env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(5,5,5,.50) 0%,rgba(5,5,5,.17) 62%,transparent 100%);
}
.works-label{
  padding:0 clamp(24px,5.2vw,84px) 12px;
  color:var(--muted);
  font-size:8px;letter-spacing:.33em;text-transform:uppercase;
}
.rail-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.rail{
  display:flex;width:max-content;align-items:center;gap:50px;
  padding:0 0 1px;
  animation:rail-travel 50s linear infinite;
  will-change:transform;
}
.rail-viewport:hover .rail,.rail-viewport:focus-within .rail{animation-play-state:paused}
.piece{
  display:grid;grid-template-columns:84px auto;align-items:center;
  gap:17px;min-width:max-content;color:var(--ink);text-decoration:none;
  opacity:.67;transition:opacity .28s ease,transform .28s ease;
}
.piece:hover,.piece:focus-visible{opacity:1;transform:translateY(-3px);outline:none}
.piece img{
  display:block;width:84px;height:84px;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.90);
  box-shadow:0 8px 28px rgba(0,0,0,.26);
  transition:filter .3s ease,transform .3s ease;
}
.piece:hover img,.piece:focus-visible img{
  filter:grayscale(.20) contrast(1.03) brightness(1);
  transform:scale(1.025);
}
.copy{display:grid;gap:9px}
.type{color:var(--muted);font-size:8px;letter-spacing:.32em;text-transform:uppercase}
.title{font-size:13px;letter-spacing:.24em;text-transform:lowercase;white-space:nowrap}

@keyframes rail-travel{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@keyframes field-breathe{
  0%{transform:scale(1.035) translate3d(-.25%,0,0)}
  100%{transform:scale(1.075) translate3d(.45%,-.3%,0)}
}

@media (max-width:760px){
  .field{inset:-11%;background-position:50% 48%}
  .top{padding:22px 19px;gap:16px}
  .brand{width:150px}
  .nav{max-width:49%;gap:13px 16px;padding-top:1px}
  .nav a{font-size:8px;letter-spacing:.18em}
  .signal{left:20px;top:38%}
  .signal p{font-size:17px;letter-spacing:.20em}
  .signal span{margin-top:17px}
  .micro{display:none}
  .works-label{padding-left:20px}
  .rail{gap:30px;animation-duration:40s}
  .piece{grid-template-columns:66px auto;gap:12px}
  .piece img{width:66px;height:66px}
  .title{font-size:11px;letter-spacing:.17em}
  .type{font-size:7px}
}
@media (max-height:650px) and (min-width:761px){
  .signal{top:39%}
  .piece{grid-template-columns:68px auto}
  .piece img{width:68px;height:68px}
  .micro{bottom:122px}
}
@media (prefers-reduced-motion:reduce){
  .field,.rail{animation:none}
  #dust{display:none}
  .rail-viewport{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}