:root {
  --stage-w: 1920px;
  --stage-h: 1080px;
  --letterbox: #171717; /* true frame fill sampled from Figma (was #0a0a0a) */
  --tint-title: #141414;
  --tint-art: #1c1c1c;
  --chrome: rgba(255, 255, 255, 0.85);
  --transition: 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --accent: #00aeef; /* default category accent; overridden per page */
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* no scrollbars, ever */
  background: var(--letterbox);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---------- Viewport / letterbox ---------- */
.viewport {
  position: fixed;
  inset: 0;
  background: var(--letterbox);
  overflow: hidden;
}

/* ---------- Stage: fixed 1920×1080, scaled to fit ---------- */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  /* transform set by JS: translate(-50%,-50%) scale(N) */
  overflow: hidden;
}

.track {
  display: flex;
  width: calc(var(--stage-w) * 22);
  height: 100%;
  transition: transform var(--transition);
  will-change: transform;
}

.page {
  width: var(--stage-w);
  height: var(--stage-h);
  flex: 0 0 var(--stage-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f4f4f4;
  user-select: none;
}

.page--title { background: var(--tint-title); }
.page--art   { background: var(--tint-art); }

.page__num {
  font-size: 180px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.18;
  letter-spacing: -4px;
}

.page__label {
  margin-top: 24px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.page__type {
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0.45;
}

/* ---------- Navigation chrome ---------- */
.chrome-hidden { opacity: 0 !important; pointer-events: none; }

.arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  background: none;
  border: none;
  color: var(--chrome);
  font-size: 80px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 350ms ease;
  pointer-events: none; /* clicks handled by navzones */
}

.arrow--left  { left: 80px; }
.arrow--right { right: 80px; }

.navzone {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 33.333%;
  z-index: 20;
  cursor: pointer;
}

.navzone--left  { left: 0; }
.navzone--right { right: 0; }

.counter {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  color: var(--chrome);
  font-size: 18px;
  letter-spacing: 4px;
  opacity: 0.4;
  transition: opacity 350ms ease;
  pointer-events: none;
}

/* arrows hidden at the two ends */
.arrow.is-disabled { display: none; }
.navzone.is-disabled { pointer-events: none; cursor: default; }

/* ---------- End-screen download links (page 22, in-stage px) ---------- */
.dl-link {
  position: absolute;
  width: 191px;
  height: 25px;
  color: #fff;
  text-decoration: none;
}
.dl-link .dl-text {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 18px;
  line-height: 19px;
  white-space: nowrap;
}
.dl-link .dl-arrow {
  position: absolute;
  left: 171px;
  top: 0;
  font-size: 19px;
  line-height: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Sub-1024px gate (the only responsive screen) ---------- */
.gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  background: #000;
  color: #fff;
  padding: 24px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.gate__sig {
  width: 117px;
  height: auto;
  display: block;
}

.gate__msg {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-size: 17.295px;
  line-height: 1.35;
  max-width: 317px;
  margin: 0;
}

.gate__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
}
.gate__icons img { display: block; }

.gate__links {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  margin-top: 14px;
}
.gate__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 191px;
  max-width: 80vw;
  color: #fff;
  text-decoration: none;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-size: 18px;
}
.gate__arrow {
  font-size: 19px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 1023px) {
  .viewport { display: none; }
  .gate { display: flex; }
}

/* ========================================================================
   PHASE 2 — real type on pages 01 / 02 / 22
   Everything below is absolutely positioned in px at exact Figma coords
   inside the 1920×1080 stage. The stage transform handles all scaling;
   no media queries / responsive units here.
   ======================================================================== */

/* Hide Futura text until the webfont is ready (see inline script in <head>) */
html.fonts-loading .ff-book,
html.fonts-loading .ff-bold { visibility: hidden; }

.ff-book {
  font-family: "futura-pt", Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.ff-bold {
  font-family: "futura-pt", Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Real pages: drop the placeholder flex centering, position children by px */
.page--real {
  display: block;
  position: relative;
  background: #171717; /* frame fill */
  color: #fff;
}

/* The black content rectangle, inset 64px (Figma node *:674 / *:765 / *:807) */
.frame {
  position: absolute;
  left: 64px;
  top: 64px;
  width: 1792px;
  height: 952px;
  background: #000;
}

/* Asset slots — an <img> sized in px to Figma dims. While the file is
   missing the <img> stays hidden and a thin outlined box + label shows
   (so the owner sees what's still unexported). On successful load the
   outline/label hide and the image shows. NO drawn artwork. */
.slot {
  position: absolute;
  box-sizing: border-box;
}
.slot__img {
  display: none; /* hidden until it actually loads (no broken-image glyph) */
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slot.is-loaded .slot__img { display: block; }
.slot__ph {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.slot.is-loaded .slot__ph { display: none; }

/* Artwork pages: full-frame raster + vector overlay, both 0,0 / 1920×1080.
   They scale only with the stage transform. */
.art-raster,
.art-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  display: block;
}
.art-overlay { pointer-events: none; }

/* Inline, recolorable category icons (tags-line title cards). currentColor in
   the SVG resolves to this element's color, which is the page's --accent. */
.icon-cat {
  position: absolute;
  display: block;
  color: var(--accent);
}
.icon-cat svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ph__label {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.45);
  padding: 2px 4px;
}

/* Dashed white dividers (SVG Line13/Line14: 1.02px stroke, dash 2.04 / gap 5.1) */
.divider { position: absolute; }
.divider--h {
  height: 1px;
  background: repeating-linear-gradient(
    to right, #fff 0 2.04px, transparent 2.04px 7.14px
  );
}
.divider--v {
  width: 1px;
  background: repeating-linear-gradient(
    to bottom, #fff 0 2.04px, transparent 2.04px 7.14px
  );
}

/* "+" separators (Figma Vector: symmetric plus, arm thickness 4.5px, #00AEEF) */
.plus { position: absolute; }
.plus::before,
.plus::after { content: ""; position: absolute; background: #00aeef; }
.plus::before { left: 0; right: 0; top: 50%; height: 4.5px; transform: translateY(-50%); }
.plus::after { top: 0; bottom: 0; left: 50%; width: 4.5px; transform: translateX(-50%); }