* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: #050505;
  color: #e8e4d8;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  overflow-x: hidden;
}

#progress {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: #eee9da;
}


/* -------------------------------------------------------
   GENERAL SCENES
------------------------------------------------------- */

.scroll-scene {
  position: relative;
}

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.black {
  background: #020202;
}

.paper {
  background: #e6e0d2;
  color: #111;
}

.micro {
  position: absolute;
  z-index: 30;
  font: 10px/1.3 "Courier New", monospace;
  letter-spacing: .13em;
}

.tl {
  left: 28px;
  top: 25px;
}

.tr {
  right: 28px;
  top: 25px;
}

.br {
  right: 28px;
  bottom: 25px;
}

.bl {
  left: 28px;
  bottom: 25px;
}

.bc {
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
}

.pale {
  color: #aaa79d;
}

.dim {
  color: #777;
}

.ink {
  color: #17140e;
}


/* -------------------------------------------------------
   ENTRY / HERO
------------------------------------------------------- */

.entry {
  height: 465vh;
}

.entry h1 {
  position: absolute;
  left: 28px;
  bottom: 38px;
  margin: 0;
  font-size: clamp(52px, 9vw, 145px);
  line-height: .77;
  letter-spacing: -.075em;
  transform-origin: left bottom;
  will-change: opacity;
}


/* -------------------------------------------------------
   EYE SCENE
------------------------------------------------------- */

.eye-scene {
  height: 410vh;
}

.huge-index {
  position: absolute;
  left: 1vw;
  top: 2vh;
  font-weight: 700;
  font-size: 26vw;
  line-height: .8;
  letter-spacing: -.12em;
  color: #101010;
}


/* -------------------------------------------------------
   GHOST SCENE
------------------------------------------------------- */

.ghost-scene {
  height: 700vh;
}

.ghost-stage {
  perspective: 1100px;
}

.ghost {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: min(50vw, 780px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.25);
  will-change: transform, opacity, filter;
}

.ghost img {
  display: block;
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
}

.center-mark:before,
.center-mark:after {
  content: "";
  position: absolute;
  z-index: 40;
  background: #fff3;
}

.center-mark:before {
  left: 50%;
  top: calc(50% - 16px);
  width: 1px;
  height: 32px;
}

.center-mark:after {
  top: 50%;
  left: calc(50% - 16px);
  height: 1px;
  width: 32px;
}


/* -------------------------------------------------------
   DARK SLIDE SCENE
------------------------------------------------------- */

.slide-scene {
  height: 360vh;
}

.bench {
  background: linear-gradient(
    105deg,
    #aa9e82,
    #c8bea3 52%,
    #958970
  );
  color: #17140e;
}

.bench:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background: repeating-linear-gradient(
    9deg,
    transparent 0 12px,
    #4b351f55 13px,
    transparent 14px 29px
  );
}

.holder {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  width: min(68vw, 940px);
  aspect-ratio: 1.55;
  transform: translate(-50%, -50%) rotate(-2deg);
  background: transparent;
  padding: 0;
  overflow: hidden;
  filter: drop-shadow(16px 20px 24px #0005);
}

.bench-data {
  position: absolute;
  right: 4vw;
  bottom: 7vh;
  font: 11px/1.55 "Courier New", monospace;
}


/* -------------------------------------------------------
   CALIBRATION
------------------------------------------------------- */

.calibration {
  position: relative;
  min-height: 100vh;
  background: #d8d5ca;
  color: #111;
  padding: 3vh 3vw;
}

.calibration header {
  height: 8vh;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #111;
  font: 10px "Courier New", monospace;
  letter-spacing: .1em;
}

.cal-layout {
  height: 86vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3vw;
  padding-top: 3vh;
}

.cal-image {
  position: relative;
  border: 1px solid #111;
  overflow: hidden;
  background: #bbb9af;
}

.cal-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
  opacity: .83;
}

.axis {
  position: absolute;
  background: #111;
}

.axis.x {
  left: 0;
  right: 0;
  top: 43%;
  height: 1px;
}

.axis.y {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.tag {
  position: absolute;
  background: #d8d5ca;
  padding: 3px 5px;
  font: 9px "Courier New", monospace;
}

.tag.eye {
  left: 0;
  top: 43%;
}

.tag.ref {
  right: 0;
  top: 43%;
}

.cal-layout aside {
  position: relative;
  border-left: 1px solid #111;
  padding-left: 2vw;
  font: 11px/1.6 "Courier New", monospace;
}

.failed {
  position: absolute;
  right: -1vw;
  bottom: 0;
  font: 700 clamp(65px, 10vw, 160px)/.75 Arial, sans-serif;
  letter-spacing: -.08em;
  writing-mode: vertical-rl;
  opacity: .12;
}

.meter {
  height: 9px;
  border: 1px solid #111;
  margin: 28px 0;
}

.meter i {
  display: block;
  width: 72%;
  height: 100%;
  background: #111;
}


/* -------------------------------------------------------
   ARCHIVE
   Positions, sizes and rotations are generated in script.js
------------------------------------------------------- */

.archive {
  position: relative;
  height: 460vh;
  background: #292722;
    color: #111;

  background-image:
    linear-gradient(#0000000c 1px, transparent 1px),
    linear-gradient(90deg, #0000000c 1px, transparent 1px);

  background-size: 42px 42px;
}

.archive-label {
  left: 28px;
  top: 28px;
}

.spec {
  position: absolute;
  border: 0;
  padding: 0;
  background: #111;
  box-shadow: 5px 10px 20px #0004;
  cursor: zoom-in;
  z-index: 5;
  will-change: transform;
}

.spec img {
  display: block;
  width: 100%;
  height: auto;
}


/* Expanded archive image */

.spec.open {
  position: fixed !important;
  z-index: 1900;

  left: 50% !important;
  top: 50% !important;

  width: min(86vw, 1150px) !important;
  height: 84vh !important;

  transform: translate(-50%, -50%) !important;

  background: #050505;
  cursor: zoom-out;
}

.spec.open img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Archive background numbers */

.watermark {
  position: absolute;
  font: 700 20vw/.8 Arial, sans-serif;
  letter-spacing: -.1em;
  color: #0000000a;
}

.w1 {
  left: 2vw;
  top: 55vh;
}

.w2 {
  right: 3vw;
  top: 145vh;
}


/* -------------------------------------------------------
   EXIT
------------------------------------------------------- */

.exit {
  height: 295vh;
}

.exit-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.exit-stage img {
  width: min(9vw, 120px);
  max-height: 18vh;
  object-fit: contain;
  box-shadow: 0 8px 20px #0003;
  will-change: transform, opacity;
}


/* -------------------------------------------------------
   VIEWFINDER
------------------------------------------------------- */

/* The PNG layers share the original canvas,
   so the glass and frame stay aligned. */

.eye-scene .black {
  background: radial-gradient(
    ellipse at center,
    #211b13 0%,
    #080706 65%
  );
}

.eye-machine {
  position: absolute;
  left: 50%;
  top: 50%;

  width: min(94vw, 80vh, 820px);
  aspect-ratio: 1172 / 1163;

  transform: translate(-50%, -50%);
  isolation: isolate;
}

.eye-window {
  position: absolute;

  left: 16.3%;
  top: 25.6%;
  width: 65.3%;
  height: 51.3%;

  overflow: hidden;
  background: #080705;
  border-radius: 3%;
}

.eye-window::after {
  content: "";
  position: absolute;
  inset: 0;

  box-shadow: inset 0 0 30px 8px #100a06a0;
  pointer-events: none;
}

.eye-film {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}

.eye-cell {
  flex: 0 0 62%;
  height: 100%;
  overflow: hidden;

  padding: 4px 7px;
  background: #090807;
}

.eye-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: sepia(.16) saturate(.72) contrast(1.08);
}

.viewfinder-frame,
.viewfinder-glass {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  pointer-events: none;
}

.viewfinder-glass {
  z-index: 2;
  opacity: .3;
}

.viewfinder-frame {
  z-index: 3;
}


/* -------------------------------------------------------
   FILM GRAIN
------------------------------------------------------- */

/* Fine monochrome grain generated locally by grained.js */

#film-grain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

#film-grain-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#film-grain-texture::before {
  width: calc(100% + 128px) !important;
  height: calc(100% + 128px) !important;

  left: -64px !important;
  top: -64px !important;

  animation-name: film-grain-dance !important;
  will-change: transform;
}

@keyframes film-grain-dance {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  14% {
    transform: translate3d(-23px, 17px, 0);
  }

  28% {
    transform: translate3d(31px, -29px, 0);
  }

  42% {
    transform: translate3d(-37px, -11px, 0);
  }

  57% {
    transform: translate3d(19px, 41px, 0);
  }

  71% {
    transform: translate3d(-11px, -43px, 0);
  }

  85% {
    transform: translate3d(43px, 7px, 0);
  }
}


/* -------------------------------------------------------
   ORIGINAL HOLDER CUTOUTS
------------------------------------------------------- */

.holder-body {
  position: absolute;
  inset: 0;

  background-image: url("assets/Holderin.png");
  background-repeat: no-repeat;
  background-size: 194.5545% 114.1876%;
  background-position: 2.9319% 44.3548%;
}

.holder-exposure {
  position: absolute;

  left: 8.1%;
  top: 10.3%;
  width: 72.6%;
  height: 76.3%;

  overflow: hidden;
  background: #110f0b;
}

.holder-exposure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.holder-exposure::after {
  content: "";
  position: absolute;
  inset: 0;

  box-shadow: inset 0 0 15px 5px #080604b0;
  pointer-events: none;
}

.dark-slide {
  position: absolute;
  z-index: 5;

  left: 7.4%;
  top: 8.5%;
  width: 92.6%;
  height: 82%;

  background-image: url("assets/Holderdoor.png");
  background-repeat: no-repeat;
  background-size: 198.8866% 129.779%;
  background-position: 80.8598% 47.1616%;

  will-change: transform;
}

.dark-slide span {
  position: absolute;
  left: 7%;
  top: 50%;

  padding: 5px 7px;
  background: #17100bb3;

  font: 10px "Courier New", monospace;
  color: #ece3ce;
  letter-spacing: .2em;
}


/* -------------------------------------------------------
   HERO VIDEO
------------------------------------------------------- */

.entry .pin {
  background: #000;
  color: #e8e4d8;
  isolation: isolate;
}

.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 0;
  will-change: transform, filter;
}

.hero-shade {
  position: absolute;
  inset: 0;

  background: rgb(0 0 0 / 50%);
  z-index: 1;

  pointer-events: none;
}

.entry h1 {
  z-index: 2;

  transform-origin: left bottom;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.hero-playback {
  right: 28px;
  top: 58px;
  bottom: auto;

  padding: 8px 10px;

  border: 1px solid #e8e4d866;
  background: #0003;
  color: inherit;

  cursor: pointer;
}

.hero-playback:hover {
  background: #0008;
}

.hero-playback:focus-visible {
  outline: 2px solid #e8e4d8;
  outline-offset: 4px;
}


/* -------------------------------------------------------
   HERO SCROLL INDICATOR
------------------------------------------------------- */

.hero-scroll-cue {
  display: grid;
  grid-template-columns: auto 64px 3ch;

  align-items: center;
  gap: 12px;

  white-space: nowrap;
}

.hero-scroll-track {
  height: 1px;
  background: #e8e4d844;
  overflow: hidden;
}

#heroScrollFill {
  display: block;

  width: 100%;
  height: 100%;

  background: #e8e4d8;

  transform: scaleX(0);
  transform-origin: left;
}

#heroScrollCount {
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------
   MOBILE
------------------------------------------------------- */

@media (max-width: 700px) {

  .tr {
    display: none;
  }

  .entry h1 {
    font-size: 17vw;
  }

  .ghost {
    width: 78vw;
  }

  .holder {
    width: 88vw;
  }

  .cal-layout {
    grid-template-columns: 1fr;
  }

  .cal-layout aside {
    position: absolute;
    right: 4vw;
    bottom: 4vh;

    width: 48vw;

    background: #d8d5cae8;
    border: 1px solid #111;
    padding: 10px;
  }

  .failed {
    display: none;
  }

  .spec {
    width: 42vw !important;
  }

  .spec.open {
    width: 94vw !important;
    height: 78vh !important;
  }
}


@media (max-width: 420px) {

  .hero-playback {
    right: 16px;
  }

  .hero-scroll-cue {
    grid-template-columns: auto 42px 3ch;
    gap: 8px;
  }
}


/* -------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  #film-grain-texture::before {
    animation: none !important;
    will-change: auto;
  }

  .entry h1,
  .hero-video {
    will-change: auto;
  }
}
/* =======================================================
   DIRECTOR'S CUT / EXPERIENCE LAYER
   ======================================================= */
:root{--paper:#e6e0d2;--ink:#111;--acid:#d7ff38;--ease:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:auto} body{cursor:none}
::selection{background:var(--acid);color:#050505}
#progress{height:3px;mix-blend-mode:difference;transform-origin:left;box-shadow:0 0 14px #fff8}
#cursor{position:fixed;z-index:3000;left:0;top:0;width:34px;height:34px;border:1px solid #eee9da99;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),background .35s}
#cursor span{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
body.is-hovering #cursor{width:62px;height:62px;background:#fff2}
#sceneReadout{position:fixed;z-index:1500;right:28px;bottom:25px;display:flex;align-items:baseline;gap:10px;font:9px/1 "Courier New",monospace;letter-spacing:.14em;color:#eee9da;mix-blend-mode:difference;pointer-events:none}
#sceneReadout span{font:700 24px/.8 Arial,sans-serif;letter-spacing:-.08em} #sceneReadout b{font-weight:400}
.hero-shade{background:linear-gradient(180deg,#0004 0%,#0000 34%,#0002 65%,#000b 100%)}
.entry h1{text-shadow:0 2px 24px #0005}
.entry h1::after{content:"ARCHIVES OR TEST STRIPS  / 2020—2026";display:block;margin-top:24px;font:9px/1.4 "Courier New",monospace;letter-spacing:.16em;opacity:.72}
.eye-machine{filter:drop-shadow(0 40px 70px #000a)}
.eye-window::before{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,#f4ead722 50%,transparent 50.2%),linear-gradient(transparent 49.8%,#f4ead722 50%,transparent 50.2%);mix-blend-mode:screen}
.eye-cell{position:relative}.eye-cell::after{content:attr(data-index);position:absolute;right:12px;bottom:9px;color:#e8e4d8aa;font:8px "Courier New",monospace;letter-spacing:.12em}
.ghost-stage::after{content:"FOCUS IS A DECISION";position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);font:700 clamp(46px,9vw,150px)/.78 Arial,sans-serif;letter-spacing:-.075em;color:#fff;opacity:.025;white-space:nowrap;pointer-events:none}
.holder{transition:filter .5s var(--ease)} .holder:hover{filter:drop-shadow(20px 28px 30px #0007)}
.calibration{overflow:hidden}.calibration::before{content:"MEASURE / FAIL / REPEAT";position:absolute;z-index:0;left:-1vw;bottom:-.1em;font:700 clamp(90px,17vw,270px)/.7 Arial,sans-serif;letter-spacing:-.09em;color:#000;opacity:.035;white-space:nowrap}
.cal-layout,.calibration header{position:relative;z-index:1}
.archive{background-color:#171613;background-image:radial-gradient(circle at 50% 0,#39362e 0,transparent 38%),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:auto,42px 42px,42px 42px}
.archive::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0008 0,transparent 8%,transparent 92%,#0008 100%)}
.archive-intro{position:absolute;left:4vw;top:9vh;z-index:2;display:flex;align-items:flex-end;gap:22px;color:#d8d2c4;opacity:.18;pointer-events:none}.archive-intro span{font:700 18vw/.7 Arial,sans-serif;letter-spacing:-.11em}.archive-intro p{margin:0;font:9px/1.5 "Courier New",monospace;letter-spacing:.15em}
.spec{overflow:hidden;transition:box-shadow .45s var(--ease),filter .45s var(--ease);outline:1px solid #fff0}.spec::after{content:"VIEW";position:absolute;inset:auto 8px 8px auto;padding:4px 5px;background:#080808c9;color:#eee9da;font:8px "Courier New",monospace;letter-spacing:.14em;opacity:0;transform:translateY(5px);transition:.25s var(--ease)}.spec:hover{z-index:30!important;box-shadow:0 24px 55px #000a;filter:contrast(1.05)}.spec:hover::after{opacity:1;transform:none}.spec img{transition:transform .8s var(--ease),filter .5s}.spec:hover img{transform:scale(1.025)}
#archiveVeil{position:fixed;z-index:1800;inset:0;background:#050505d9;backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}body.archive-open #archiveVeil{opacity:1;pointer-events:auto}.spec.open{box-shadow:0 40px 120px #000;transition:all .65s var(--ease)}
.exit{overflow:hidden}.exit-word{position:sticky;top:0;height:100vh;display:grid;place-items:center;color:#111;font:700 clamp(72px,18vw,280px)/.7 Arial,sans-serif;letter-spacing:-.1em;opacity:.045;pointer-events:none}.exit .pin{margin-top:-100vh}
.exit-stage img{filter:contrast(1.06);box-shadow:0 22px 70px #0004}
@media(pointer:coarse),(max-width:700px){body{cursor:auto}#cursor{display:none}#sceneReadout{right:16px;bottom:16px}.archive-intro{display:none}}
@media(prefers-reduced-motion:reduce){#cursor{display:none}.spec,.spec img{transition:none!important}}


/* 08 / EXIT — return to the opening film, then dissolve to black */
.exit{height:360vh;overflow:visible;background:#000;}
.exit .exit-stage{margin-top:0;display:block;background:#000;color:#fff;isolation:isolate;}
.exit-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;will-change:filter,opacity,transform;}
.exit-black{position:absolute;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none;will-change:opacity;}
.exit-title{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f1eee6;opacity:0;transform:translateY(10px);font-family:"Courier New",monospace;letter-spacing:.14em;pointer-events:none;will-change:opacity,transform;}
.exit-title strong{font:700 clamp(34px,6.3vw,104px)/.86 Arial,Helvetica,sans-serif;letter-spacing:-.065em;margin-bottom:24px;}
.exit-title span{font-size:clamp(10px,.9vw,13px);line-height:1.75;}
@media (prefers-reduced-motion:reduce){.exit-video{filter:blur(12px);opacity:.15}.exit-black{opacity:.85}.exit-title{opacity:1;transform:none}}


/* =======================================================
   AUDIT PATCH
   ======================================================= */
#progress{width:100%;transform:scaleX(0)}
.pin{height:100vh;height:100svh}

/* open plate lost z-index to .spec:hover and slid under the veil */
.spec.open{z-index:1900!important;animation:plate-in .6s var(--ease)}
@keyframes plate-in{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.spec:focus-visible{outline:2px solid var(--acid);outline-offset:4px}

/* custom cursor only where it exists */
body{cursor:auto}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body,button,.spec,.spec.open{cursor:none}
}

/* statements that were effectively invisible */
.ghost-stage::after{opacity:.07}
.calibration::before{opacity:.06}
.watermark{color:#ffffff0d}
.huge-index{color:#1b1b1b}

#heroScrollLabel{display:inline-block;min-width:19ch}
@media (max-width:700px){.micro,#sceneReadout b{font-size:11px}}