/* ============================================================
   LAB — zed & white
   Fixed single-screen showcase. Shares the studio system:
   #F6F6F6 / #141313 / #EF2233 — Instrument Serif / Space Grotesk / Space Mono
   ============================================================ */

:root{
  --bg:#F6F6F6;
  --primary:#141313;
  --white:#FFFFFF;
  --light:#454647;
  --red:#EF2233;
  --pad:40px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  background:var(--bg);
  color:var(--primary);
  font-family:"Space Grotesk",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--red);color:var(--bg);}

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

/* ============ frame ============ */
.frame{
  height:100dvh;
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ============ header ============ */
.top{
  flex:none;
  display:flex;
  justify-content:center;
}
.logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-weight:700;
  font-size:26px;
  line-height:.96;
  letter-spacing:-.02em;
}
.logo-line{
  display:inline-flex;
  align-items:flex-start;
  gap:4px;
}
.flask{
  width:17px;
  height:17px;
  color:var(--red);
  margin-top:1px;
  flex:none;
}

/* ============ stage ============ */
.stage{
  flex:1;
  min-height:0;
  padding:0 clamp(0px,10vw,220px);
}
.deck{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--primary);
}
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity,transform;
}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.slide.is-active{opacity:1;}

/* ============ footer ============ */
.bottom{
  flex:none;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:24px;
}

.foot-note{
  font-family:"Space Mono",monospace;
  font-size:12px;
  line-height:1.5;
  letter-spacing:.3px;
  color:var(--light);
}

/* left — CTA */
.foot-left{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
}
.dot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--red);
  flex:none;
}
.cta-text{
  font-family:"Instrument Serif",serif;
  font-style:italic;
  font-weight:400;
  font-size:27px;
  line-height:1;
}
.arrow{
  font-size:17px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .3s var(--ease);
}
.cta:hover .arrow{transform:translate(3px,-4px);}

/* center — caption */
.foot-center{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:640px;
}
.caption{
  font-family:"Space Mono",monospace;
  font-size:13px;
  line-height:1.5;
  letter-spacing:.3px;
  color:var(--primary);
}

/* right — socials */
.foot-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:26px;
}
.soc{
  width:22px;
  height:22px;
  color:var(--primary);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.soc:hover{
  color:var(--red);
  transform:translateY(-2px);
}
.soc svg{width:100%;height:100%;display:block;}

/* focus */
a:focus-visible{
  outline:2px solid var(--red);
  outline-offset:4px;
  border-radius:2px;
}

/* ============ entrance states (js only) ============ */
.js .top,
.js .foot-left,
.js .foot-center,
.js .foot-right{opacity:0;}
.js .deck{
  clip-path:inset(2% 2% 2% 2%);
  opacity:0;
}

/* ============ responsive ============ */
@media (max-width:1024px){
  .stage{padding:0 clamp(0px,4vw,60px);}
}

@media (max-width:760px){
  :root{--pad:22px;}
  .frame{gap:18px;}
  .logo{font-size:22px;}
  .stage{padding:0;}
  .bottom{
    grid-template-columns:1fr;
    gap:20px;
    justify-items:center;
    text-align:center;
  }
  .foot-left{order:2;align-items:center;}
  .foot-center{order:1;}
  .foot-right{order:3;justify-content:center;}
  .cta-text{font-size:24px;}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .js .top,.js .foot-left,.js .foot-center,.js .foot-right{opacity:1;}
  .js .deck{clip-path:none;opacity:1;}
}