/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --text:       #111111;
  --text-muted: rgba(17, 17, 17, 0.38);
  --footer-h:   36px;
  --sans: 'Inter', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  background: #000;
}

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

/* ============================================================
   BACKGROUND VIDEO — centered & fullscreen
   ============================================================ */
.bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  min-width: 100vw;
  min-height: 100vh;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   CAROUSEL — vertical, driven by up/down cursor movement
   ============================================================ */
.scroll-container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar { display: none; }

/* ============================================================
   SLIDES
   ============================================================ */
.slide {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* fade in as each img loads */
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slide img.loaded { opacity: 1; }

/* no overlay — text sits directly on photo, matching reference */

/* ============================================================
   FIXED LEFT OVERLAY
   ============================================================ */
.site-overlay {
  position: fixed;
  top: -60px;
  left: -24px; /* compensate so translate(24px) lands with padding from edge */
  z-index: 50;
  padding: 85px 50px 60px 44px;
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  background: url('../assets/paper.png') center / 100% 100% no-repeat;
  width: fit-content;
  transform-origin: top left;
  /* hidden until JS applies the correct scale — prevents size-jump on load */
  visibility: hidden;
}

.site-name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 12px;
}


/* ============================================================
   SIDE NAV
   ============================================================ */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text);
  line-height: 1.85;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* All nav items stay black */
.nav-item.active {
  color: var(--text);
}

.nav-item:not(.active):hover {
  color: rgba(17,17,17,0.55);
}

/* ============================================================
   FIXED FOOTER
   ============================================================ */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
}

.site-footer a,
.footer-right {
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(17,17,17,0.55);
}

.site-footer a:hover { color: var(--text); }

.footer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-right a:hover { color: var(--text); }

/* ============================================================
   TOP-RIGHT ICON
   ============================================================ */
.top-right-icon {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 50;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}
.top-right-icon:hover { opacity: 1; }

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* JS handles overlay positioning — nothing to override */
}