/* ============================================================
   STILLS — a carousel of red picture frames turning on a wheel
   Every photo keeps its native ratio: the frame width is fixed,
   the height follows the image. Nothing is cropped anywhere.
   ============================================================ */

.wheel-zone {
  position: relative;
  margin-block: clamp(0.5rem, 1vw, 1rem) clamp(1.4rem, 2.4vw, 2.4rem);
  outline: none;
  /* The frames on the far side reach past the viewport by design. Clip
     that on the x axis only — `clip` rather than `hidden` so no scroll
     box is created and the front frame's glow still spills vertically. */
  overflow-x: clip;
}

/* The wheel is the subject here — the heading gets out of its way. */
.section--stills .head { margin-bottom: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); }
.wheel-zone::after {              /* focus ring that doesn't clip the 3D box */
  content: "";
  position: absolute;
  inset: 8px var(--gutter);
  border: 1px solid transparent;
  border-radius: 4px;
  pointer-events: none;
  transition: border-color var(--t-fast) var(--ease);
}
.wheel-zone:focus-visible::after { border-color: rgba(229, 38, 28, 0.55); }

.wheel-stage {
  --fw: clamp(165px, 18vw, 262px);   /* frame width; js derives the radius */
  --r:  520px;
  position: relative;
  height: clamp(380px, 48vh, 470px);
  perspective: 1700px;
  perspective-origin: 50% 46%;
}

/* On a phone the frames want most of the width — the neighbours fall
   off the edges, which is what a coverflow is supposed to look like. */
@media (max-width: 620px) {
  .wheel-stage {
    --fw: min(62vw, 262px);
    height: clamp(360px, 50vh, 440px);
  }
}

.wheel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---- mobile tap arrows ----
   Desktop already has a keyboard and a mouse drag; a phone has
   neither an obvious way to turn the wheel, so a real tap target
   sits on each side — mobile only, same breakpoint as the rest of
   the wheel's phone layout. z-index clears every frame: the
   front-most frame can reach ~100 (js/stills.js), this sits above
   all of them regardless of which way the wheel is turned. */
.wheel-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 1.9rem;
  line-height: 1;
  transition: transform 160ms var(--ease), border-color 160ms var(--ease),
              box-shadow 160ms var(--ease), background 160ms var(--ease),
              color 160ms var(--ease);
}
.wheel-nav--prev { left: 10px; }
.wheel-nav--next { right: 10px; }

.wheel-nav:hover,
.wheel-nav:focus-visible {
  border-color: var(--red-bright);
  color: var(--red-bright);
  box-shadow: 0 0 26px -4px rgba(229, 38, 28, 0.7);
}
.wheel-nav:active {
  transform: translateY(-50%) scale(0.86);
  background: rgba(229, 38, 28, 0.18);
}

@media (max-width: 620px) {
  .wheel-nav { display: flex; }
}

/* ---- one framed photograph ---- */
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--fw);
  margin-left: calc(var(--fw) / -2);
  display: block;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  cursor: pointer;
  padding: clamp(9px, 1.1vw, 15px);
  background:
    linear-gradient(148deg, #ff5a4d 0%, #e5261c 24%, #9d0d06 62%, #d8271d 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(120, 8, 3, 0.55),
    0 1px 0 rgba(255, 175, 165, 0.5) inset,
    0 26px 46px -20px rgba(20, 6, 6, 0.62);
  transition: box-shadow var(--t-mid) var(--ease);
}

/* inner bevel so the frame reads as a moulding, not a red rectangle */
.frame::before {
  content: "";
  position: absolute;
  inset: clamp(4px, 0.5vw, 7px);
  border-radius: 1px;
  border: 1px solid rgba(90, 4, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 160, 150, 0.35) inset;
  pointer-events: none;
}

/* atmospheric haze — how the frames on the far side fall away.
   A veil rather than a blur: `filter` on a 3D-transformed child
   flattens it out of the wheel's rendering context. */
.frame__haze {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(var(--haze-rgb), var(--haze, 0));
  pointer-events: none;
}

.frame__mat {
  display: block;                 /* it wraps a block-level <img> */
  position: relative;
  padding: clamp(7px, 0.8vw, 12px);
  background: linear-gradient(170deg, #fbfbfc, #ebebee);
  box-shadow: 0 2px 8px -2px rgba(30, 8, 6, 0.5) inset;
}

.frame__img {
  display: block;
  width: 100%;
  height: auto;
  background: #dcdce0;
}

/* glass */
.frame__mat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 26%, rgba(255,255,255,0) 46%);
  pointer-events: none;
}


.frame:hover,
.frame.is-front {
  box-shadow:
    0 0 0 1px rgba(120, 8, 3, 0.55),
    0 1px 0 rgba(255, 175, 165, 0.5) inset,
    0 30px 54px -20px rgba(20, 6, 6, 0.66),
    0 0 42px -4px rgba(229, 38, 28, 0.6);
}

/* ---- read-out under the wheel ---- */
.wheel-read {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
}
.wheel-read__i   { color: var(--hot); }
.wheel-read__cap { color: var(--ink); letter-spacing: 0.1em; }
.wheel-read__dim { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 12, 15, 0.86);
  backdrop-filter: blur(18px) saturate(0.9);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transform: scale(0.94);
  opacity: 0;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: none; opacity: 1; }

.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, 92vw);
  max-height: 82svh;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);
}

.lightbox__cap {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-align: center;
}
.lightbox__cap b { color: #fff; font-weight: 400; }
.lightbox__cap i { color: var(--red-bright); font-style: normal; }

.lightbox__close,
.lightbox__step {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.05);
  font-size: 1.6rem;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__step--prev { left:  clamp(0.6rem, 3vw, 2.4rem); top: 50%; margin-top: -24px; }
.lightbox__step--next { right: clamp(0.6rem, 3vw, 2.4rem); top: 50%; margin-top: -24px; }

.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__step:hover,  .lightbox__step:focus-visible {
  border-color: var(--red-bright);
  color: var(--red-bright);
  background: rgba(229, 38, 28, 0.12);
  box-shadow: 0 0 28px -2px rgba(229, 38, 28, 0.7);
}

/* These used to hide below 620px, on the theory that the wheel's own
   drag would get you to the next photo instead. But once a photo is
   open full-size there is no drag-to-advance in the lightbox at all —
   on a phone that left zero way to move to the next photo without
   closing and re-opening. Shrunk a touch instead of hidden. */
@media (max-width: 620px) {
  .lightbox__close, .lightbox__step { width: 40px; height: 40px; font-size: 1.3rem; }
  .lightbox__step--prev { left: 0.5rem; }
  .lightbox__step--next { right: 0.5rem; }
}