/* Walk the Nave (/walk-the-nave/): everything after the first screen (that part is inlined from nave-critical.css).
   The page is a slideshow of real stills in plain HTML; nave.js lays its viewer over the first one. */

/* film grain: the house's (specks at a few percent, moved in jumps like a film's grain, not a shimmer) */
body.nv::before{content:"";position:fixed;inset:-60px;z-index:80;pointer-events:none;background:url(/assets/redesign/img/grain.webp) 0 0/128px 128px;opacity:.5}
html.m body.nv::before{animation:nv-grain .9s steps(5) infinite}
@keyframes nv-grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-23px,17px,0)}40%{transform:translate3d(31px,-11px,0)}
  60%{transform:translate3d(-9px,-29px,0)}80%{transform:translate3d(19px,23px,0)}100%{transform:translate3d(0,0,0)}}

body.nv :focus-visible{outline:2px solid var(--gilt-2);outline-offset:3px}

/* ---- the slideshow: one stop after another ---- */
.stop{position:relative;scroll-margin-top:62px}
.stop + .stop{margin-top:clamp(64px,10vw,132px)}
.stop:not(.stop-1) .stop-media{position:relative;aspect-ratio:16/9;max-height:92svh;overflow:hidden;background:#07080b}
.stop:not(.stop-1) .stop-cap{padding:14px var(--gut) 0;max-width:880px}
.stop-text{padding:30px var(--gut) 0;max-width:880px}
.stop-n{margin:0 0 10px;font:600 11px/1.3 var(--f-cinzel);letter-spacing:.32em;text-transform:uppercase;color:var(--gilt-2)}
.stop-h{margin:0;font:500 clamp(32px,3.4vw,48px)/1.08 var(--f-display);color:var(--ivory);outline:none}
.stations{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:640px}
.stations a{display:grid;gap:3px;padding:15px 18px 16px;border:1px solid rgba(241,215,157,.3);border-radius:2px;text-decoration:none;
  background:rgba(239,231,216,.03);transition:border-color .2s,background-color .2s}
.stations a b{font:600 12.5px/1.35 var(--f-cinzel);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt-2)}
.stations a span{font-size:17.5px;line-height:1.45;color:var(--ivory-2)}
.stations a:hover{border-color:var(--gilt-2);background:rgba(241,215,157,.07)}
.stop-next{margin:24px 0 0}
.stop-next a{display:inline-block;padding:12px 0;font:600 12px/1.2 var(--f-cinzel);letter-spacing:.24em;text-transform:uppercase;color:var(--gilt-2);text-decoration:none}
.stop-next a:hover{text-decoration:underline;text-underline-offset:6px}
.nv-close{padding:clamp(64px,10vw,132px) var(--gut) 56px;max-width:880px;color:var(--ivory-3);font-size:17px}
.nv-close a{color:var(--ivory-2)}
@media (max-width:760px){
  .stop:not(.stop-1) .stop-media{aspect-ratio:9/16;max-height:86svh}
  .stations a span{font-size:16.5px}
}

/* ---- the viewer (nave.js), over the first stop ---- */
/* the canvas sits under the first stop's darkening (the figure's ::before), exactly like the still it replaces; the
   stations and the controls sit over it */
.nv-viewer{position:absolute;inset:0;outline:none}
.nv-viewer[hidden]{display:none}
.nv-viewer:focus-visible{outline:2px solid var(--gilt-2);outline-offset:-6px}
.nv-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;opacity:0;touch-action:pan-y;cursor:grab;
  transition:opacity .14s linear;-webkit-user-select:none;user-select:none}
.nv-canvas:active{cursor:grabbing}
.nv-viewer.live .nv-canvas{opacity:1}
.nv-intro.gone{opacity:0}
.stop-1.nv-mounted .stop-cap{visibility:hidden}

.nv-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.nv-hs{position:absolute;left:0;top:0;width:0;height:0;text-decoration:none;opacity:0;transition:opacity .3s var(--ease);will-change:transform}
.nv-hs.on,.nv-hs:focus-visible{opacity:1}
.nv-hs.nv-warm{opacity:.01;transition:none}
.nv-hs.nv-warm.nv-warm2{opacity:.03;transition:opacity .3s}
.nv-hs[hidden]{display:none}
.nv-hs:focus-visible{outline:none}
.nv-hs.on .nv-ring,.nv-hs.on .nv-lbl{pointer-events:auto}
.nv-ring{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--gilt-2);
  background:rgba(3,4,7,.5);pointer-events:none}
.nv-ring::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gilt-2)}
.nv-lbl{position:absolute;left:20px;top:-17px;display:block;min-width:max-content;padding:8px 13px 9px;border:1px solid rgba(241,215,157,.34);border-radius:2px;
  background:rgba(3,4,7,.78);pointer-events:none;transition:border-color .2s;will-change:transform}   /* its own layer: a side flip is a move, never a repaint */
.nv-l .nv-lbl{transform:translateX(calc(-100% - 40px))}   /* a transform, so a flip is never a layout shift */
.nv-lbl b{display:block;font:600 11.5px/1.35 var(--f-cinzel);letter-spacing:.16em;text-transform:uppercase;color:var(--gilt-2);white-space:nowrap}
.nv-lbl span{display:block;width:0;height:0;overflow:hidden;opacity:0;font-size:15.5px;line-height:1.4;color:var(--ivory-2);transition:opacity .25s}
.nv-hs:hover .nv-lbl,.nv-hs:focus-visible .nv-lbl{border-color:var(--gilt-2)}
.nv-hs:focus-visible .nv-lbl{outline:2px solid var(--gilt-2);outline-offset:3px}
@media (hover:hover){.nv-hs:hover .nv-lbl span{width:min(280px,60vw);height:auto;margin-top:4px;opacity:1}}
.nv-hs:focus-visible .nv-lbl span{width:min(280px,60vw);height:auto;margin-top:4px;opacity:1}

.nv-hint{position:absolute;z-index:4;left:50%;bottom:clamp(150px,20svh,190px);transform:translateX(-50%);margin:0;padding:9px 18px;white-space:nowrap;
  font:600 11px/1 var(--f-cinzel);letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-2);background:rgba(3,4,7,.6);
  border:1px solid rgba(239,231,216,.2);border-radius:40px;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.nv-viewer.ready .nv-hint{opacity:1}
.nv-viewer .nv-hint.gone{opacity:0}

.nv-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:14px 28px;padding:0 var(--gut) 22px;pointer-events:none}
.nv-bar > *{pointer-events:auto}
.nv-cap{display:grid;gap:5px;margin:0;max-width:600px;font-size:13.5px;line-height:1.45;color:var(--ivory-3)}
.nv-cap a{color:var(--ivory-2)}
.nv-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nv-btn{min-height:44px;padding:0 16px;border:1px solid rgba(241,215,157,.42);border-radius:2px;background:rgba(3,4,7,.66);color:var(--ivory);
  font:600 11.5px/1 var(--f-cinzel);letter-spacing:.17em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background-color .2s}
.nv-btn:hover{border-color:var(--gilt-2);background:rgba(3,4,7,.82)}
.nv-btn:disabled{opacity:.42;cursor:default}
.nv-btn[hidden]{display:none}
.nv-btn[aria-pressed="true"]{border-color:var(--gilt-2);color:var(--gilt-2)}
.nv-next{border-color:rgba(241,215,157,.75)}
.nv-count{min-width:5.6em;text-align:center;font:600 11.5px/1 var(--f-cinzel);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-2)}
.nv-enter{position:absolute;z-index:4;right:var(--gut);bottom:24px}
.nv-enter[hidden]{display:none}
@media (max-width:760px){
  .nv-bar{gap:10px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .nv-cap{gap:3px;font-size:12px}
  .nv-cap .stop-place{font-size:10px;letter-spacing:.16em}
  .nv-ctrls{width:100%;display:flex;flex-wrap:wrap;gap:8px}
  .nv-prev,.nv-next{flex:0 0 auto}
  .nv-count{flex:1 1 auto;text-align:center}
  .nv-ctrls .nv-gyro{flex:1.5 1 0}
  .nv-ctrls .nv-leave{flex:1 1 0}
  .nv-ctrls .nv-gyro[hidden] + .nv-leave{flex-basis:100%}
  .nv-btn{padding:0 11px;font-size:10.5px;letter-spacing:.1em}
  .nv-count{min-width:0;font-size:10.5px;letter-spacing:.12em}
  .nv-hint{bottom:196px}
}
@media (prefers-reduced-motion:reduce){.nv-hs,.nv-intro,.nv-hint,.nv-canvas{transition:none}}

/* Walk with sound: one quiet control, the house's (home.css .snd), at the top right of the walk */
.nv-snd{position:absolute;z-index:4;top:92px;right:var(--gut);display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 15px;
  border:1px solid rgba(239,231,216,.22);border-radius:40px;background:rgba(3,4,7,.55);cursor:pointer;color:var(--ivory-2);
  font:600 10.5px/1 var(--f-cinzel);letter-spacing:.24em;text-transform:uppercase;transition:color .3s var(--ease),border-color .3s var(--ease)}
.nv-snd:hover,.nv-snd[aria-pressed="true"]{color:var(--gilt-2);border-color:rgba(241,215,157,.5)}
.nv-snd svg{width:19px;height:19px}
.nv-snd .w{opacity:.35;transition:opacity .4s var(--ease)}
.nv-snd[aria-pressed="true"] .w{opacity:1}
@media (max-width:760px){.nv-snd{top:72px}.nv-viewer:not(.live) .nv-snd{visibility:hidden}}