/* Moving-photo header — full-width photo reel at the top of every page.
   Photos only: no text is ever placed on the images. Controls sit in the
   light band underneath. Colours come from per-site custom properties. */
.mp-reel{
  --reel-h:clamp(340px,64vh,720px);
  --reel-band:var(--mp-band,#F7F5F0);
  --reel-ink:var(--mp-ink,#2A2F36);
  --reel-accent:var(--mp-accent,#C49A4E);
  --reel-fade:var(--mp-fade,#FFFFFF);
  position:relative;width:100%;margin:0;padding:0;background:var(--reel-band);
  isolation:isolate;overflow:hidden;contain:layout paint
}
.mp-reel__stage{position:relative;height:var(--reel-h);overflow:hidden;background:var(--reel-band)}
.mp-reel__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s cubic-bezier(.22,.61,.36,1)!important;transition-duration:1.4s cubic-bezier(.22,.61,.36,1);will-change:opacity}
.mp-reel__slide.is-on{opacity:1;z-index:1}
.mp-reel__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transform:scale(1.02);filter:saturate(.94) brightness(1.03) contrast(.98)}
.mp-reel__slide.is-on img{animation:mpKenA 7s linear forwards!important}
.mp-reel__slide:nth-child(even).is-on img{animation-name:mpKenB!important}
@keyframes mpKenA{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1.6%,-1.2%,0)}}
@keyframes mpKenB{from{transform:scale(1.11) translate3d(1.4%,-.8%,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
/* a soft veil keeps the photographs light; it fades into the page below */
.mp-reel__stage::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--reel-band) 55%,transparent))}
.mp-reel__stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(255,255,255,.06)}
/* control band — below the photographs, never on them */
.mp-reel__bar{display:flex;align-items:center;gap:14px;max-width:1240px;margin:0 auto;padding:12px clamp(16px,4vw,32px)}
.mp-reel__ticks{display:flex;flex:1;gap:6px;min-width:0}
.mp-reel__tick{position:relative;flex:1;max-width:72px;height:3px;border:0;padding:8px 0;margin:0;background:none;cursor:pointer}
.mp-reel__tick::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);border-radius:3px;
  background:color-mix(in srgb,var(--reel-ink) 16%,transparent)}
.mp-reel__tick i{position:absolute;left:0;top:50%;height:3px;width:0;transform:translateY(-50%);border-radius:3px;background:var(--reel-accent)}
.mp-reel__tick[aria-current="true"] i{animation:mpFill var(--dur,6.5s) linear forwards}
.mp-reel__tick.is-done i{width:100%}
.mp-reel.is-paused .mp-reel__tick[aria-current="true"] i{animation-play-state:paused}
@keyframes mpFill{to{width:100%}}
.mp-reel__btn{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--reel-ink) 18%,transparent);
  background:transparent;color:var(--reel-ink);cursor:pointer;transition:background .2s,border-color .2s}
.mp-reel__btn:hover{background:color-mix(in srgb,var(--reel-ink) 7%,transparent)}
.mp-reel__btn:focus-visible,.mp-reel__tick:focus-visible{outline:2px solid var(--reel-accent);outline-offset:3px}
.mp-reel__btn svg{width:16px;height:16px}
.mp-reel__btn .i-play{display:none}
.mp-reel.is-paused .mp-reel__btn .i-play{display:block}
.mp-reel.is-paused .mp-reel__btn .i-pause{display:none}
.mp-reel__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .mp-reel{--reel-h:clamp(250px,48svh,440px)}
  .mp-reel__bar{padding:10px 16px}
  .mp-reel__tick{max-width:none}
}