/* nervv intro: the reel, driven by scroll, at the very top of the page.
   Six chapters (logo, promise, the wall, the door, the rooms, close) are drawn by js/intro.js from
   scroll position alone, so they run forwards and backwards with the reader. The page never locks
   or takes over scrolling: the runway is ordinary page height and the stage is a sticky screen.
   The top bar sits after the intro in the page, so it arrives as the intro ends.
   Reduced motion (or no script): the six hold frames, still, one under another. */

/* The reel's own Fraunces (variable, with optical sizes), so the intro is set exactly as the reel is. */
@font-face { font-family: "Fraunces Reel"; src: url("/fonts/fraunces-reel-opsz.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Reel"; src: url("/fonts/fraunces-reel-opsz-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

.reel { position: relative; background: var(--ivory, #F7F2E7); color: var(--ink, #1D2A23); }

/* Live: a tall runway with one sticky screen. JS sets the exact height from the chapter map;
   this value matches it so nothing moves when the script arrives. */
.reel__runway { display: none; position: relative; }
html.reel-live .reel__runway { display: block; height: 798vh; height: 798svh; }
.reel__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #F7F2E7;
}
.reel__stage { position: absolute; left: 50%; top: 50%; overflow: hidden; transform-origin: 50% 50%; }
.reel__stage .layer { position: absolute; inset: 0; visibility: hidden; }
.reel__mark { display: block; overflow: visible; }
.reel__plan { display: block; }
/* Bars fill any edge the stage does not reach, in the colour at that edge of the frame. */
.reel__bar { position: absolute; z-index: 1; background: #F7F2E7; }
.reel__bar--t { left: 0; right: 0; top: 0; }
.reel__bar--b { left: 0; right: 0; bottom: 0; }
.reel__bar--l { top: 0; bottom: 0; left: 0; }
.reel__bar--r { top: 0; bottom: 0; right: 0; }

/* The closing button is a real link to the visit form. Its size and colours are set with the
   frame; these add the hover and the focus ring (drawn at the stage's scale, so thicker here). */
.reel__cta { text-decoration: none; cursor: pointer; }
.reel__cta:hover { background-color: var(--marigold-hover, #C99220) !important; }
.reel__cta:focus-visible { outline: 6px solid #1D2A23; outline-offset: 8px; }

.reel__tools {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
}
.reel__skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1D2A23;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.reel.is-dark .reel__skip { color: #EEE8DB; }
.reel__skip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Sound: four rounded bars in the wordmark's stroke style. Off, they rest as four low dots; on,
   they stand at different heights and rise a little while you scroll, with the chords. */
.reel__sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #1D2A23;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reel__sound[hidden] { display: none; }
.reel.is-dark .reel__sound { color: #EEE8DB; }
.reel__sound:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.reel__wave { display: block; overflow: visible; }
.reel__wave line { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.reel__sound:hover .reel__wave { opacity: 0.7; }

/* The scroll rail: the marigold node rides down a thin track as you scroll, the way a dimmer
   slides, with a mark at each chapter. It only ever moves up and down. */
.reel__rail {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  top: calc(max(12px, env(safe-area-inset-top)) + 72px);
  height: clamp(120px, 22vh, 200px);
  z-index: 2;
  width: 12px;
  pointer-events: none;
}
.reel__track, .reel__tick { position: absolute; background: #D8C9A8; }
.reel__track { left: 5px; width: 2px; top: 0; bottom: 0; border-radius: 1px; }
.reel__tick { left: 2px; width: 8px; height: 2px; border-radius: 1px; }
.reel.is-dark .reel__track, .reel.is-dark .reel__tick { background: #3F4442; }
.reel__node {
  position: absolute;
  left: 0;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E0A526;
}
.reel__rlabel {
  position: absolute;
  right: 24px;
  top: -10px;
  font-size: 14px;
  line-height: 20px;
  color: #5B6A60;
  white-space: nowrap;
}
.reel.is-dark .reel__rlabel { color: #BFC5BE; }
@media (max-width: 759px) {
  .reel__rail { right: max(12px, env(safe-area-inset-right)); height: clamp(60px, 9vh, 76px); }
  .reel__tools { gap: 12px; }
}

/* Still: the six hold frames. Hidden while the reel runs, so their images are never fetched. */
.reel__stills { display: block; background: #F7F2E7; }
html.reel-live .reel__stills { display: none; }
.reel__still { position: relative; display: block; }
.reel__still img { display: block; width: 100%; height: auto; }
.reel__still-cta {
  position: absolute;
  display: block;
  border-radius: 2px;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  min-height: 44px;
}
.reel__still-cta:focus-visible { outline: 3px solid #1D2A23; outline-offset: 4px; }
/* Placed over the button in the closing frame (measured from the frame, in % of the frame). */
.reel__still-cta { left: var(--cta-x-d); top: var(--cta-y-d); width: var(--cta-w-d); height: var(--cta-h-d); }
@media (orientation: portrait) {
  .reel__still-cta { left: var(--cta-x-p); top: var(--cta-y-p); width: var(--cta-w-p); height: var(--cta-h-p); }
}
.reel__still--end { --cta-x-d: 8.33%; --cta-y-d: 52.55%; --cta-w-d: 13.52%; --cta-h-d: 8.15%; --cta-x-p: 8.89%; --cta-y-p: 48.44%; --cta-w-p: 31.23%; --cta-h-p: 5.83%; }