/* gallery = lightsweep + grow; derived from both, local study only */
/* lightsweep: "Where next" tiles as small gilded frames; three.js museum light glides across them.
   This CSS is also the static fallback (no WebGL, reduced motion). */
.nxs{position:relative}
.nx{position:relative}
.lsw-frame{display:block;position:relative;aspect-ratio:3/2;width:100%;max-width:300px;margin:6px 0 14px;
  background:linear-gradient(135deg,#7E5E28 0%,#C9A458 22%,#E7CF8C 38%,#B8924A 55%,#D9B76A 74%,#8C6A2E 100%);
  box-shadow:0 1px 0 rgba(42,38,34,.10),0 10px 18px -12px rgba(42,38,34,.55)}
.lsw-pic{position:absolute;inset:var(--lsw-m,9px);background:#2A2622 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(70,48,14,.55),inset 0 2px 7px rgba(0,0,0,.35)}
.lsw-frame::after{content:"";position:absolute;inset:calc(var(--lsw-m,9px) - 3px);border:1px solid rgba(250,236,196,.55);pointer-events:none}
canvas.lsw-c{position:absolute;left:0;top:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease}
.lsw-gl canvas.lsw-c{opacity:1}
.nx:focus-visible .lsw-frame{outline:2px solid var(--terra);outline-offset:3px}
@media (max-width:860px){
  .nx{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto auto;column-gap:16px;align-content:center;align-items:center}
  .nx .lsw-frame{grid-row:1 / span 2;margin:0;max-width:none;--lsw-m:6px}
  .nx b{align-self:end}.nx b+span{align-self:start}/* the caption only: a bare ".nx span" also hits the abspos .lsw-pic and collapses it to 0 height (align-self applies to abspos boxes), so the snapshot the glide starts from was empty on phones (10-09) */
}

/* grow — pages glide instead of cutting. The tapped "Where next" photo grows into the next page's main image
   (cross-document View Transitions); every other internal link gets a calm cross-fade and lift. Local study only. */
:root{--gr-gold:#B8924A;--gr-gold-hi:#D9B76A;--gr-ease:cubic-bezier(.62,.02,.16,1);--gr-soft:cubic-bezier(.22,.7,.2,1)}

/* phones, arriving by a tile: the page photo comes first so the glide lands in view (grow.js adds .fx-grew) */
@media (max-width:860px){.fx-grew .hero .pic{order:-1}}

/* the landing band on pages without a big image (Enquire): added by grow.js only when a tile led here */
.fx-band{height:clamp(150px,30vh,300px);margin:24px 40px 30px;background:#d8cab8 center 45%/cover;outline:1px solid var(--plaster);outline-offset:8px}
@media (max-width:860px){.fx-band{height:clamp(140px,26vh,240px);margin:14px 16px 20px;outline-offset:6px}}

/* --- the transition itself (cross-document; Chrome/Edge 126+, Safari 18.2+; others just navigate) --- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
/* one name for "the page's main image": the old page's tile thumbnail takes it over at tap time (grow.js) */
.hero .pic,.unit-hero .pic,.fx-band{view-transition-name:fx-grow}
/* chrome that is the same on every page holds still while the content changes */
.draftbar{view-transition-name:fx-bar}
.wa{view-transition-name:fx-wa}
@media (max-width:860px){header.top{view-transition-name:fx-head}}

/* calm page change: the old page settles away, the new one lifts in */
::view-transition-group(*){animation-duration:600ms;animation-timing-function:var(--gr-ease)}
::view-transition-old(root){animation:fx-out 360ms cubic-bezier(.4,0,.8,.6) both}
::view-transition-new(root){animation:fx-in 600ms var(--gr-soft) 90ms both}
@keyframes fx-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes fx-in{from{opacity:0;transform:translateY(16px)}}

/* the glide: thumbnail -> main image. Both snapshots fill the moving frame (cover), the small photo dissolves into the large one */
::view-transition-group(fx-grow){animation-duration:680ms;animation-timing-function:var(--gr-ease);overflow:clip;box-shadow:0 18px 50px -18px rgba(42,38,34,.35)}
::view-transition-image-pair(fx-grow){isolation:isolate}
::view-transition-old(fx-grow),::view-transition-new(fx-grow){width:100%;height:100%;object-fit:cover}
::view-transition-old(fx-grow){animation:fx-fade 420ms ease-in 60ms both reverse}
::view-transition-new(fx-grow){animation:fx-fade 520ms ease-out both}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
/* no partner (menu link, back button): the main image just joins the calm fade */
::view-transition-old(fx-grow):only-child{animation:fx-out 360ms cubic-bezier(.4,0,.8,.6) both}
::view-transition-new(fx-grow):only-child{animation:fx-in 600ms var(--gr-soft) 90ms both}
/* phones: an open menu folds away quickly while the header settles to its closed height */
::view-transition-old(fx-head){animation:fx-fade 240ms ease-out both reverse;mix-blend-mode:plus-lighter}
::view-transition-new(fx-head){animation:fx-fade 240ms ease-in both;mix-blend-mode:plus-lighter}