/* ─────────────────────────────────────────────────────────────────────────
   [EX14] LATERAL — masked lateral gallery driven by vertical scroll.
   Geometry measured 1:1 off Figma NRTH-SocMed 439:2177 (1920×1080).
   ───────────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Geist Mono';
  src:url('fonts/GeistMono-VariableFont_wght.ttf') format('truetype');
  font-weight:100 900; font-display:swap;
}

:root{
  --ground:#eeefef;
  --ink:#171717;
  --s:1;                      /* composition scale, set from JS */
  --p:274.29px;               /* frame pitch, set from JS */
}

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

html,body{height:100%;overflow:hidden;background:var(--ground);color:var(--ink)}

body{
  font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
  cursor:grab;
}
body.drag{cursor:grabbing}

img,svg{display:block}

/* ── strip ──────────────────────────────────────────────────────────────── */

#strip{
  position:fixed; inset:0 0 auto 0; height:50vh;
  z-index:1; pointer-events:none;
}
.f{
  position:absolute; top:0; left:0;
  overflow:hidden;
  will-change:transform,height;
  backface-visibility:hidden;
}
.f img{
  position:absolute; top:0; left:0;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}

/* ── centre component ───────────────────────────────────────────────────── */

#centre{
  position:fixed; left:0; right:0;
  top:48.42vh;
  z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

.lockup{
  display:flex; align-items:center;
  gap:calc(30px * var(--s));
}
.lockup .mark{
  width:calc(59px * var(--s));
  height:calc(31px * var(--s));
  fill:var(--ink);
  flex:none;
}
.words{
  display:flex; flex-direction:column;
  font-size:calc(19.5px * var(--s));
  line-height:calc(18px * var(--s));
  font-weight:700;
  letter-spacing:-.045em;
  text-align:left;
}
.words .l2{opacity:.26}

.tagline{
  margin-top:calc(43px * var(--s));
  font-size:calc(14px * var(--s));
  line-height:calc(19px * var(--s));
  letter-spacing:.057em;
  opacity:.83;
}

.cta{
  margin-top:calc(44px * var(--s));
  width:calc(172px * var(--s));
  height:calc(37px * var(--s));
  display:grid; place-items:center;
  background:var(--ink); color:var(--ground);
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:calc(10px * var(--s));
  font-weight:400;
  letter-spacing:.05em;
  text-indent:.05em;
  text-decoration:none;
  transition:opacity .25s ease;
}
.cta:hover{opacity:.78}

/* ── marquee ────────────────────────────────────────────────────────────── */

#marquee{
  position:fixed; left:0; right:0;
  bottom:calc(37px * var(--s));
  height:calc(42px * var(--s));
  z-index:2;
  overflow:hidden;
}
#track{
  position:absolute; top:0; left:0; height:100%;
  display:flex; align-items:center;
  gap:calc(104px * var(--s));
  will-change:transform;
}
#track > *{flex:none}

.logo{fill:var(--ink)}
.logo.nrth{width:calc(59.05px * var(--s)); height:calc(32.81px * var(--s))}
.logo.nike{width:calc(113px * var(--s)); height:calc(40px * var(--s))}
.logo.bvi {width:calc(35px * var(--s));  height:calc(35px * var(--s))}
.logo.adh {width:calc(63.1px * var(--s));height:calc(38px * var(--s))}
.logo.submit{
  font-size:calc(20px * var(--s));
  line-height:calc(18px * var(--s));
  font-weight:700;
  letter-spacing:-.05em;
  white-space:nowrap;
}

.cap{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:calc(10.5px * var(--s));
  line-height:calc(11.5px * var(--s));
  font-weight:400;
  letter-spacing:0;
  white-space:nowrap;
  opacity:.6;
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

/* narrow: only three frames fit, so the outer pair sits at full height right
   across the middle of the page — the centre component moves below them. */
@media (max-width:680px){
  #centre{top:55vh}
  .tagline{letter-spacing:.05em}
  #track{gap:calc(72px * var(--s))}
}

@media (prefers-reduced-motion:reduce){
  #track{transition:none}
}