/* sector 0100 · photography
   ------------------------------------------------------------------
   Her statement, 2025-06-01: "two simultaneous truths captured from a
   single scene." She shoots conjoined houses with a telephoto and a
   wide-angle from one position. The telephoto crushes the scene into a
   sealed wall. The wide-angle, same spot, opens the voids.

   This room is built that way rather than described that way.

   --lens 0 = telephoto. Every photograph is edge to edge with its
   neighbours, zero gutter, and slightly magnified past its own frame,
   so the wall is cropped, crowded, impenetrable.

   --lens 1 = wide-angle. Nothing moves. Not one block changes position.
   Each block shrinks toward its own centre inside the same cell, and
   the void that was always between them becomes visible.

   Her own multi-image posts are single blocks: they shrink together,
   welded at the seam, and never come apart. Her pairings are hers.
   ------------------------------------------------------------------ */

@property --lens { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --own  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --burn { syntax: "<number>"; inherits: true; initial-value: 0; }

:root { --lens: 0; }

body {
  --display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --farsi: "Vazirmatn", "IRANSans", "Geeza Pro", Tahoma, sans-serif;
  background: var(--void);
}

main { display: block; }

/* ---------------- her statement ---------------- */

/* .statement and .threshold are gone from the markup. Her Pocket Universe
   text described one series and was standing over all of her photography.
   The wall opens the page now. These rules are left in place because the
   classes may return if she ever writes something that covers this body
   of work, and deleting them would only mean writing them again. */
.statement {
  max-width: min(92vw, 1060px);
  margin: 0 auto;
  padding: 9vh 0 0;
}

/* where the rest of the work is, stated plainly, not hidden behind a
   puzzle. 123 of her 147 photographs were only reachable by solving
   something, which is a fine game and a bad way to show an artist's work. */
.elsewhere {
  max-width: min(92vw, 1060px);
  margin: 0 auto 0.9em;
  color: var(--p-dim, #9BA0A5);
}

/* the coda names her next project. it is now the way in to it. */

/* the coda names her next project. it is now the way in to it. */
.coda-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--p-live, #2454B9);
  padding-bottom: 1px;
  transition: opacity 0.35s ease;
}
.coda-link:hover, .coda-link:focus-visible { opacity: 0.72; }

.stmt-open {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.stmt-open .s-quiet { color: var(--dim); }
.stmt-open .s-thesis { color: var(--bone); }

.stmt-body {
  margin-top: clamp(2rem, 5vh, 3.6rem);
  max-width: 62ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.98rem, 1.15vw, 1.16rem);
  line-height: 1.72;
  color: var(--bone);
  text-wrap: pretty;
}

/* Both truths are on the page at once, always legible. The lens only
   decides which one you are standing inside. Floor is 0.55 so the
   unlit clause stays above 4.5:1 on her ground. */
.stmt-body .s-n { color: var(--dim); }
.stmt-body .s-t { opacity: calc(1 - 0.45 * var(--lens)); transition: opacity 0.35s linear; }
.stmt-body .s-w { opacity: calc(0.55 + 0.45 * var(--lens)); transition: opacity 0.35s linear; }

/* ---------------- the threshold ---------------- */

.threshold {
  max-width: min(92vw, 1060px);
  margin: clamp(3rem, 9vh, 7rem) auto clamp(3rem, 8vh, 6rem);
  font-family: var(--farsi);
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 2;
  color: var(--dim);
  border-top: 1px solid rgba(243, 244, 243, 0.13);
  padding-top: clamp(1.4rem, 3vh, 2.4rem);
}

/* ---------------- the wall ---------------- */

#wall {
  width: 100%;
  padding: 0 clamp(18px, 6vw, 110px);
  touch-action: pan-y;          /* horizontal drag is the lens, vertical still scrolls */
  background: var(--void);
  position: relative;
}

#wall .row {
  display: flex;
  /* never taller than 80% of the screen: the row narrows instead, so every
     photograph keeps its own proportions */
  width: min(100%, calc(80vh * var(--sum)));
  margin-left: auto; margin-right: auto;
  margin-bottom: clamp(56px, 13vh, 160px);
  aspect-ratio: var(--sum) / 1;
  align-items: stretch;
}

/* the block. its box never moves, at any focal length. */
#wall .grp {
  flex: var(--gar) 1 0;
  min-width: 0;
  position: relative;
}

#wall .grp-in {
  display: flex;
  width: 100%;
  height: 100%;
  transform-origin: var(--org, 50% 50%);
  transform: scale(calc(0.86 - 0.16 * max(var(--lens), var(--own)) - 0.6 * var(--burn)));
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
#wall.dragging .grp-in,
#wall.dragging .cell img { transition: none; }

#wall .cell {
  flex: var(--ar) 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--void);
}

/* the telephoto crop: at 200mm the frame is magnified past its own edges. */
#wall .cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + 0.06 * (1 - max(var(--lens), var(--own)))));
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* the record, printed into the void once there is void to print it in */
#wall .addr {
  position: absolute;
  left: 0.6em;
  bottom: 2%;
  opacity: calc((var(--lens) - 0.52) * 2.6 + var(--own) * 0.9);
  transition: opacity 0.3s linear;
  pointer-events: none;
}
#wall .grp.burned .addr { color: var(--blood); opacity: 1; }

/* the shaft: the closing work, once opened, grows the way down to 0104 */
.shaft {
  position: absolute;
  right: 0.8em;
  bottom: 2%;
  width: 15px; height: 11px;
  border: 1px solid rgba(243, 244, 243, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease, border-color 0.3s;
}
.grp.has-shaft .shaft { opacity: 0.85; visibility: visible; }
.shaft:hover, .shaft:focus-visible { border-color: var(--bone); }

/* ---------------- the instrument ---------------- */

#lens {
  position: fixed;
  left: 0; right: 0; bottom: 44px;   /* the walk row sits under it */
  z-index: 78;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 46px 22px 22px;
  background: linear-gradient(to top, var(--void) 0 46%, transparent);
  pointer-events: none;
}
#lens > * { pointer-events: auto; }
#lens .lens-lbl { color: var(--dim); }
#lens .lens-mm { color: var(--bone); min-width: 6.2ch; text-align: right; }
#lens .lens-hint { color: var(--dim); opacity: 0.55; transition: opacity 0.6s ease; }

#lens-range {
  -webkit-appearance: none;
  appearance: none;
  width: min(52vw, 340px);
  height: 22px;
  background: none;
  cursor: none;
}
#lens-range::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(243, 244, 243, 0.28);
}
#lens-range::-moz-range-track {
  height: 1px;
  background: rgba(243, 244, 243, 0.28);
}
/* the one live mark on the page. blue is 3.4% of her photographs, so it
   is 3.4% of this: a tick, never a field. the bone bar carries contrast. */
#lens-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3px;
  height: 20px;
  margin-top: -10px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--ikb) 0 7px, var(--bone) 7px);
}
#lens-range::-moz-range-thumb {
  width: 3px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--ikb) 0 7px, var(--bone) 7px);
}
#lens-range:focus-visible { outline: 1px solid var(--bone); outline-offset: 5px; }

/* ---------------- the foot ---------------- */

.wing-foot {
  max-width: min(92vw, 1060px);
  margin: 0 auto;
  padding: clamp(4rem, 14vh, 11rem) 0 26vh;
}
#wing-log { min-height: 1.2em; margin-bottom: 2.4rem; }

.stmt-coda {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.32rem);
  line-height: 1.62;
  max-width: 44ch;
  color: var(--bone);
  text-wrap: pretty;
}

.doors {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-top: 1px solid rgba(243, 244, 243, 0.13);
}
.door {
  flex: 1 1 190px;
  padding: 26px 0 22px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}
.door .d-addr { display: block; color: var(--dim); }
.door .d-lbl { display: block; margin-top: 5px; color: var(--bone); }
.door:hover, .door:focus-visible { border-bottom-color: var(--bone); }
.door:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

/* ---------------- narrow ---------------- */

@media (max-width: 760px) {
  .statement { padding-top: 16vh; }
  #lens { justify-content: space-between; gap: 10px; padding: 40px 14px 16px; }
  #lens-range { width: auto; flex: 1 1 auto; }
  #lens .lens-hint { display: none; }
  #wall .addr { font-size: 10px; letter-spacing: 0.1em; }
}

/* ---------------- reduced motion ----------------
   Under reduce the room arrives already wide: nothing loops, nothing has
   to be operated to see a whole photograph. The lens still works. */
@media (prefers-reduced-motion: reduce) {
  #wall .grp-in, #wall .cell img, .stmt-body span, #wall .addr { transition: none; }
  .shaft { transition: none; }
}