html{
  scroll-snap-type: y mandatory;
}
html, body{ margin:0; padding:0; background:#141210; }

/* ---------- scrolling photo wall ---------- */
.gate-scroll{
  position:relative;
  z-index:1;
}

.gate-row{
  height:100dvh;
  min-height:420px;
  display:flex;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.gate-cell{
  flex:1 1 50%;
  height:100%;
  overflow:hidden;
}

.gate-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:sepia(0.3) saturate(1.15) contrast(1.06) brightness(0.72);
}

/* ---------- fixed vintage tone over the whole scroll ---------- */
.gate-scrim{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 46% at center, rgba(16,10,7,0.62) 0%, rgba(16,10,7,0.22) 62%, rgba(10,6,4,0) 100%),
    linear-gradient(rgba(10,6,4,0.4), rgba(10,6,4,0.05) 18%, rgba(10,6,4,0.05) 82%, rgba(10,6,4,0.5));
}

.gate-grain{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:0.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ---------- fixed centered logo + CTA, follows the scroll ---------- */
.gate-overlay{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}

.gate-content{
  pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:32px; text-align:center;
}

.gate-logo{
  width:min(210px, 42vw);
  opacity:0.55;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.4)) brightness(0) invert(1);
}

.gate-content .kicker{
  color:#F3EDE2;
  font-size:1rem;
  margin:0;
  opacity:0.92;
}

.gate-cta{
  margin-top:2px;
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Karla',sans-serif; font-weight:700; font-size:0.8rem;
  letter-spacing:0.16em; text-transform:uppercase;
  color:#161311; background:#F3EDE2; border:1px solid #F3EDE2;
  padding:16px 36px; border-radius:999px; text-decoration:none;
  transition:background .2s ease, color .2s ease, letter-spacing .2s ease, transform .12s ease;
}
.gate-cta svg{ width:15px; height:15px; transition:transform .2s ease; }
.gate-cta:hover{ background:transparent; color:#F3EDE2; letter-spacing:0.22em; }
.gate-cta:hover svg{ transform:translateX(4px); }
.gate-cta:active{ transform:scale(0.97); }

/* ---------- fixed footer tagline ---------- */
.gate-footer{
  position:fixed; left:0; right:0; bottom:22px; z-index:4; pointer-events:none;
  text-align:center; margin:0;
  font-family:'Karla',sans-serif; font-size:0.7rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(243,237,226,0.7);
}

/* ---------- scroll hint ---------- */
.gate-scroll-hint{
  position:fixed; left:0; right:0; bottom:56px; z-index:4; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Karla',sans-serif; font-size:0.66rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(243,237,226,0.75);
  transition:opacity .4s ease;
}
.gate-scroll-hint svg{
  width:14px; height:14px;
  animation:gate-bounce 1.8s ease-in-out infinite;
}
.gate-scroll-hint.is-hidden{ opacity:0; }
@keyframes gate-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}
@media (prefers-reduced-motion: reduce){
  .gate-scroll-hint svg{ animation:none; }
}

@media (max-width:480px){
  .gate-logo{ width:min(170px, 50vw); }
  .gate-cta{ padding:14px 28px; }
  .gate-row{ min-height:360px; }
}