/* nora.vale — desktop build. Reference frame: 1440 × 900 (Figma). */
@font-face {
  font-family: 'Archivo NV';
  src: url(../assets/fonts/archivo-wdth.woff2) format('woff2-variations');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: block;
}
@font-face { font-family: 'Plex Mono NV'; src: url(../assets/fonts/plexmono-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Plex Mono NV'; src: url(../assets/fonts/plexmono-500.woff2) format('woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Grechen Fuemen NV'; src: url(../assets/fonts/grechen-fuemen.woff2) format('woff2'); font-weight: 400; font-display: block; }

:root {
  --u: min(calc(100vw / 1440), calc(var(--vh, 1vh) * 100 / 828));   /* = U() in main.js: width scale, capped by height */
  --ink: #090909;
  --paper: #ffffff;
  --sans: 'Archivo NV', Archivo, 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono NV', 'IBM Plex Mono', ui-monospace, monospace;
  --fs-ui: 12px;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink); }
body {
  background: var(--ink); color: #fff;
  font-family: var(--sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  cursor: none;
}
a { color: inherit; text-decoration: none; cursor: none; }
ul { list-style: none; margin: 0; padding: 0; }
p, h1, h2 { margin: 0; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-loading, html.is-loading body { overflow: hidden; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- WebGL stage ---------- */
#gl { position: fixed; left: 0; top: 0; width: 100%; height: calc(var(--vh, 1vh) * 100); display: block; z-index: 0; }   /* --vh: stable height set in JS (phone URL bar) */
.fallback { display: none; }
html.no-gl #gl { display: none; }
html.no-gl .fallback { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }
html.no-gl .fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }

main { position: relative; z-index: 1; }
.dark { height: calc(var(--vh, 1vh) * 380); }

/* ---------- Fixed UI (difference blend so it reads on black and white) ---------- */
.ui { position: fixed; left: 0; right: 0; z-index: 10; mix-blend-mode: difference; color: #fff; pointer-events: none; }
.ui a { pointer-events: auto; }

.hdr {
  top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad);
}
.hdr-logo img { display: block; width: 86px; height: 24px; }
.pill {
  display: flex; align-items: center; border-radius: 100px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .02);
  font: 400 var(--fs-ui)/1 var(--sans); font-stretch: 100%; text-transform: uppercase; letter-spacing: 0;
}
.hdr-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); gap: 44px; }
.hdr-nav a, .hdr-cta { transition: opacity .3s; }
.hdr-nav a:hover, .hdr-cta:hover { opacity: .55; }
html.is-light .pill { background: rgba(255, 255, 255, .06); }

.bar {
  bottom: 0; height: 60px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 var(--pad) 24px;
  font: 400 var(--fs-ui)/1 var(--mono); text-transform: uppercase;
}
.bar-l, .bar-r { color: rgba(255, 255, 255, .6); transition: opacity .4s; }
.bar-c, .bar-x { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; transition: opacity .4s; }
.bar-x { opacity: 0; }
/* touch hint on the contact sheet (replaces the desktop cursor label) */
.bar-t { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity .4s; }
html.is-hint .bar-c { opacity: 0; }
html.is-hint .bar-t { opacity: 1; }
html.is-flash .bar-l, html.is-flash .bar-r, html.is-flash .bar-c { opacity: 0; }
html.is-flash .bar-x { opacity: 1; }

/* rolling frame counter */
.frame { display: inline-flex; gap: .62ch; }
.ctr { display: inline-flex; }
.ctr .d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.ctr .col { display: flex; flex-direction: column; transition: transform .45s cubic-bezier(.2, .7, .1, 1); }
.ctr .col span { height: 1em; line-height: 1; }
.ctr-cap { display: none; }
.frame.is-cap .ctr { display: none; }
.frame.is-cap .ctr-cap { display: inline; }

/* centered lines */
.center { top: 50%; transform: translateY(-50%); display: grid; place-items: center; }
.center > * { grid-area: 1 / 1; text-align: center; text-transform: uppercase; }
.manifesto { width: 249px; font: 500 14px/1 var(--sans); font-stretch: 100%; }
.line { font: 500 14px/1 var(--sans); font-stretch: 100%; opacity: 0; white-space: nowrap; }

/* cursor label */
.pointer {
  position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none;
  display: flex; align-items: center; gap: 4px; mix-blend-mode: difference;
  font: 400 12px/.9 var(--mono); letter-spacing: -0.36px; text-transform: uppercase; color: #fff;
  opacity: 0; will-change: transform; white-space: nowrap;
}
.pointer img { display: block; width: 4px; height: 4px; transform: translate(-2px, 0); }

/* preloader bar */
.pre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; display: flex; justify-content: space-between;
  padding: 0 var(--pad) 24px; font: 400 12px/1 var(--mono); text-transform: uppercase; color: #fff;
}
html:not(.is-loading) .pre { pointer-events: none; }

/* initial hidden state for UI that appears after the preloader */
html.is-loading .hdr, html.is-loading .bar, html.is-loading .center { opacity: 0; }

/* ---------- Contact sheet ---------- */
.sheet { position: relative; height: calc(var(--vh, 1vh) * 100); background: var(--paper); color: #000; overflow: hidden; }
.sheet.is-out { background: transparent; }
/* overlaps the last two screens of the darkroom track; invisible until the flash peaks */
#sheet { margin-top: calc(var(--vh, 1vh) * -200); }
.sheet { transition: opacity .35s ease; }
.sheet.is-hidden { opacity: 0; pointer-events: none; }
.trail { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; }
.card {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  width: calc(240 * var(--u)); height: calc(300 * var(--u)); overflow: hidden;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }

.cs-title {
  position: absolute; z-index: 3; left: var(--pad); top: max(76px, calc(50% - 350 * var(--u))); width: calc(624 * var(--u));
  font: 400 calc(144 * var(--u))/.84 var(--sans); font-stretch: 100%; letter-spacing: -.09em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.cs-title .rv { display: block; }
.t-select { width: calc(736 * var(--u)); }
.t-print { white-space: nowrap; }
.t-select .rv-i, .t-print .rv-i { transform: translateY(110%); }

/* Your selection / Print */
.slots { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.slot { position: absolute; left: 0; top: 0; overflow: hidden; will-change: transform, width, height; visibility: hidden; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ring {
  --a: 0deg;
  position: absolute; left: 0; top: 0; z-index: 4; width: calc(336 * var(--u)); height: calc(455 * var(--u)); pointer-events: none; opacity: 0;
  background: url(../assets/img/ring.png) center / 100% 100% no-repeat;
  -webkit-mask-image: conic-gradient(from 115deg at 49% 50%, #000 0deg, #000 var(--a), transparent calc(var(--a) + 1deg));
          mask-image: conic-gradient(from 115deg at 49% 50%, #000 0deg, #000 var(--a), transparent calc(var(--a) + 1deg));
}
.this-one {
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; white-space: nowrap;
  font: 400 calc(48 * var(--u))/.9 'Grechen Fuemen NV', cursive; letter-spacing: -.03em; color: #ff0000;   /* Figma: Grechen Fuemen 48 / 0.9, -1.44px */
}
.this-one span { display: inline-block; padding: 0 .12em 0 .06em; clip-path: inset(-30% 100% -30% -8%); }   /* padding: the script 'e' overhangs its box */
.cta {
  position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; padding-bottom: 1px; border-bottom: 1px solid #fff;
  font: 500 14px/1 var(--sans); font-stretch: 100%; text-transform: uppercase; color: #fff;
  mix-blend-mode: difference; opacity: 0; visibility: hidden; white-space: nowrap;
}
.cta img { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.2,.7,.1,1); }
.cta:hover img { transform: translate(2px, -2px); }
.cs-col { position: absolute; z-index: 3; width: 101px; font: 500 12px/1 var(--mono); text-transform: uppercase; display: flex; flex-direction: column; gap: 4px;
  color: #fff; mix-blend-mode: difference; pointer-events: none; }   /* inverts over the photos, like the titles */
.cs-col p, .cs-col li { font-weight: inherit; }                    /* Medium everywhere (Figma: IBM Plex Mono Medium) */
.cs-col-1 { left: calc(259 * var(--u)); top: calc(50% + 29 * var(--u)); }
.cs-col-2 { left: calc(259 * var(--u)); top: calc(50% + 29 * var(--u) + 92px); }
.cs-col-1, .cs-col-2 { width: auto; }
.cs-col-1 li, .cs-col-2 li { white-space: nowrap; }                  /* 'Darkroom prints' on one line, never clipped */
.cs-rights { left: calc(1315 * var(--u)); top: calc(50% + 29 * var(--u)); }

/* masked text reveal */
.rv { overflow: hidden; display: block; }
.rv-i { display: inline-block; will-change: transform; }


/* source videos for WebGL: kept "on screen" (1px, near-transparent) so browsers never throttle or pause them */
#vLoop { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; z-index: -1; }

/* cursor: dot only over links and buttons */
.pointer-t { transition: opacity .2s; }
.pointer.is-dot .pointer-t { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ctr .col { transition: none; }
}

/* ---------- phone menu (hidden on desktop) ---------- */
.hdr-menu, .mnav, .m-br { display: none; }
.hdr-menu { border: 0; color: inherit; cursor: pointer; pointer-events: auto; }

/* ---------- touch devices: no custom cursor ---------- */
html.is-touch body, html.is-touch a { cursor: auto; }
html.is-touch .pointer { display: none; }

/* ============================================================ TABLET + PHONE (shared): header menu, phone/tablet menu
   Breakpoints = MODE() in main.js: phone < 600 · tablet 600–1199 portrait · otherwise desktop */
@media (max-width: 599px), (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {
  .hdr-nav, .hdr-cta { display: none; }
  .hdr-menu { display: flex; }
  .m-br { display: none; }

  /* menu (Figma: Burger menu dark / light) — follows the section it was opened on */
  .mnav {
    --mbg: #090909; --mfg: #fff; --mpill: rgba(255, 255, 255, .08);
    display: flex; flex-direction: column; justify-content: center;
    position: fixed; left: 0; top: 0; width: 100%; height: calc(var(--vh, 1vh) * 100); z-index: 9;
    padding: 0 var(--pad); background: var(--mbg); color: var(--mfg);
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s;
  }
  html.is-light .mnav { --mbg: #fff; --mfg: #090909; --mpill: rgba(0, 0, 0, .08); }
  html.is-menu .mnav { opacity: 1; visibility: visible; transition: opacity .35s ease; }
  .mnav ul { display: flex; flex-direction: column; gap: 8px; }
  .mnav li.rv { line-height: .84; }
  .mnav a.rv-i { display: inline-block; font: 400 calc(var(--mfs) * var(--u))/.84 var(--sans); font-stretch: 100%; letter-spacing: -.09em; text-transform: uppercase; }
  .mnav-cta {
    position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; display: flex; justify-content: center;
    padding: 12px 16px; border-radius: 100px; background: var(--mpill);
    font: 400 12px/1 var(--sans); font-stretch: 100%; text-transform: uppercase;
  }
  html.is-menu .bar, html.is-menu .center { opacity: 0 !important; transition: opacity .3s; }
}

/* ============================================================ TABLET · Figma frame 768 × 1024 */
@media (min-width: 600px) and (max-width: 1199px) and (orientation: portrait) {
  :root { --u: min(calc(100vw / 768), calc(var(--vh, 1vh) * 100 / 942.08)); --cs: .75; --mfs: 104; }
  .cs-title { top: max(76px, calc(50% - 412 * var(--u))); width: calc(624 * var(--u)); font-size: calc(124 * var(--u)); }
  .t-select { width: calc(624 * var(--u)); }
  .cs-col-1 { left: calc(116 * var(--u)); top: calc(50% - 76 * var(--u)); }
  .cs-col-2 { left: calc(116 * var(--u)); top: calc(50% - 76 * var(--u) + 92px); }
  .cs-rights { left: calc(670 * var(--u)); top: calc(50% - 76 * var(--u)); width: 74px; }
  .ring { width: calc(243.3 * var(--u)); height: calc(329.4 * var(--u)); }
  .this-one { font-size: calc(32 * var(--u)); }
  .mnav ul { width: calc(720 * var(--u)); }
}

/* ============================================================ PHONE · Figma frame 390 × 844 */
@media (max-width: 599px) {
  :root { --u: min(calc(100vw / 390), calc(var(--vh, 1vh) * 100 / 776.48)); --cs: .62; --pad: 16px; --mfs: 76; }
  .hdr { padding: 16px; }
  .bar { padding: 0 16px 24px; }
  .bar-c { position: static; transform: none; }
  html.is-hint .bar-l, html.is-hint .bar-r { opacity: 0; }   /* phone: not enough room — the hint takes the whole line */
  .pre { padding: 0 16px 24px; }

  .cs-title { left: 16px; top: max(64px, calc(50% - 322 * var(--u))); width: calc(358 * var(--u)); font-size: calc(84 * var(--u)); }
  .t-select { width: calc(358 * var(--u)); }
  .m-br { display: inline; }
  .cs-col-1 { left: 16px; top: calc(50% - 85 * var(--u)); }
  .cs-col-2 { left: 16px; top: calc(50% - 85 * var(--u) + 92px); }
  .cs-rights { left: calc(295 * var(--u)); top: calc(50% - 85 * var(--u)); width: 79px; }
  .ring { width: calc(195.5 * var(--u)); height: calc(264.6 * var(--u)); }
  .this-one { font-size: calc(32 * var(--u)); }
  .mnav ul { width: calc(358 * var(--u)); }
}