/* ───────────────────────────────────────────────────────────────
   Sitehouse — the side rails
   Two tall video columns that flank the page and change as you scroll,
   so the centre content reads as though it is moving through a room
   rather than sitting on a blank page.

   They live in the gutter either side of the 76rem shell. That gutter
   only exists once the viewport is wide enough, so the rails only exist
   there too — below that width they are gone entirely rather than
   squeezed, and the content keeps its full measure.

   Fixed, not sticky: the rail is a window that stays put while the page
   moves behind it. pointer-events are off throughout, so nothing here
   can ever intercept a click meant for the page.
   ─────────────────────────────────────────────────────────────── */

.rails {
  position: fixed; inset: 0; z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms ease;
}
.rails[data-rails="on"] { opacity: 1; }

.rail {
  position: absolute; top: 0; bottom: 0;
  /* Feathered with a mask rather than an overlay: the strip fades to
     nothing at both ends, so it works on paper and on ink without a
     grey seam where the two met. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  /* The gutter, less a little breathing room, clamped so the rail never
     grows into a second column or shrinks into a stripe. Wide enough
     that the footage reads as footage — below about 130px a 16:9 clip
     is cropped to a sliver and you cannot tell what you are looking at. */
  width: clamp(96px, calc((100vw - 70rem) / 2 - 10px), 260px);
  overflow: hidden;
  /* A dark bed in both themes. The footage is the point; a light bed
     under it just lifts the blacks and flattens the picture. */
  background: #0b0d10;
}
.rail--left  { left: 0; }
.rail--right { right: 0; }

.rail-clip {
  position: absolute; inset: 0;
  overflow: hidden;
}

.rail-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 620ms linear, transform 840ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* Linear on the fade: an eased crossfade dips in the middle and reads
   as a flash of empty rail. The drift is eased and runs a little
   longer, and is the only other thing moving. */
.rail-vid.is-on { opacity: 1; transform: none; }

/* A wash in the page's own colour, so the footage sits inside the design
   rather than beside it, and never competes with the centre column. */
.rail-wash {
  position: absolute; inset: 0; pointer-events: none;
  /* Only a vignette now — it shapes the edges of the picture instead of
     painting over it, so the footage keeps its own contrast. */
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 26%,
                            rgb(0 0 0 / 0) 74%, rgb(0 0 0 / 0.55) 100%),
    linear-gradient(90deg,  rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0) 40%,
                            rgb(0 0 0 / 0) 60%, rgb(0 0 0 / 0.28) 100%);
}
/* A hairline of light on the inner edge, so the strip has an edge
   against the content without a border that survives the mask. */
.rail--left .rail-wash  { border-right: 1px solid rgb(255 255 255 / 0.10); }
.rail--right .rail-wash { border-left: 1px solid rgb(255 255 255 / 0.10); }

/* The chapter mark, so the rail reads as a sequence rather than a
   slideshow that happens to be playing. */
.rail-mark {
  position: absolute; left: 0; right: 0; bottom: 1.6rem;
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.rail--right .rail-mark { display: none; }

/* Dark mode: the wash follows the page token, so only the tint of the
   footage itself needs a nudge. */
/* The bed is already dark in both themes, so dark mode has nothing to
   correct — it only loses the faint separation from the page. */
:root[data-theme="dark"] .rail-wash { border-color: rgb(255 255 255 / 0.16); }

/* Below the width where a real gutter exists, there are no rails at all.
   Nothing is scaled down into a sliver, and nothing can push the page
   sideways. */
@media (max-width: 1279px) {
  .rails { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .rail { width: clamp(88px, calc((100vw - 70rem) / 2 - 8px), 170px); }
}

@media (prefers-reduced-motion: reduce) {
  .rails { transition: none; }
  .rail-vid { transition: none; transform: none; }
}