/* Image Hover Effects */
.hv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.5rem);max-width:1080px;margin:0 auto}
.hv{position:relative;margin:0;aspect-ratio:10/11;border-radius:14px;overflow:hidden;isolation:isolate;background:var(--bg2);cursor:pointer;outline:none;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.85);--mx:50%;--my:50%;-webkit-tap-highlight-color:transparent}
.hv:focus-visible{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}
.hv-media{position:absolute;inset:0;overflow:hidden}
.hv-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .8s ease,clip-path .8s cubic-bezier(.2,.8,.2,1)}
.hv-cap{position:absolute;z-index:3;left:1.3rem;right:1.3rem;bottom:1.2rem;color:#f7f4ee;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s,color .5s}
.hv-eff,.hv-sub{transition:color .5s}
.hv-eff{display:block;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--m-gold2);margin-bottom:.4rem}
.hv-cap strong{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.05}
.hv-sub{display:block;margin-top:.35rem;font-size:.8rem;color:rgba(243,233,220,.78)}
.hv::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(8,20,40,.85));pointer-events:none;transition:opacity .6s}
.hv-fx{position:absolute;inset:0;z-index:2;pointer-events:none}
/* the "on" state: hover, keyboard focus, or tap (.is-on) */
/* 1 zoom & caption */
.hv-zoom .hv-sub{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s}
.hv-zoom .hv-cap{transform:translateY(1.2rem)}
.hv-zoom:is(:hover,:focus-visible,.is-on) .hv-media img{transform:scale(1.1)}
.hv-zoom:is(:hover,:focus-visible,.is-on) .hv-cap{transform:none}
.hv-zoom:is(:hover,:focus-visible,.is-on) .hv-sub{opacity:1;transform:none;transition-delay:.12s}
/* 2 curtain */
.hv-curtain .hv-fx{background:var(--gold);opacity:.94;transform:scaleY(0);transform-origin:bottom;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-cap{color:#1e1711}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-eff{color:#5a3a12}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-sub{color:#3d2c1c}
.hv-curtain:is(:hover,:focus-visible,.is-on)::after{opacity:0}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-fx{transform:scaleY(1)}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-media img{transform:scale(1.04)}
.hv-curtain .hv-cap{transition-delay:.05s}
.hv-curtain:is(:hover,:focus-visible,.is-on) .hv-cap{transform:translateY(-38%)}
/* 3 tilt & glare (JS sets --rx/--ry/--mx/--my) */
.hv-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.hv-tilt .hv-fx{background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.hv-tilt:is(:hover,:focus-visible,.is-on) .hv-fx{opacity:1}
.hv-tilt:is(:hover,:focus-visible,.is-on){box-shadow:0 40px 70px -30px rgba(0,0,0,.9)}
.hv-tilt:is(:focus-visible,.is-on):not(:hover){--rx:4deg;--ry:-6deg}
/* 4 spotlight */
.hv-spot .hv-media img{filter:brightness(.4) saturate(.6)}
.hv-spot .hv-media img.hv-lit{position:absolute;inset:0;filter:none;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 16%,transparent 34%);mask-image:radial-gradient(circle at var(--mx) var(--my),#000 0,#000 16%,transparent 34%);opacity:0;transition:opacity .4s}
.hv-spot:is(:hover,:focus-visible,.is-on) .hv-media img.hv-lit{opacity:1}
/* 5 duotone to colour */
.hv-duo .hv-media img{filter:grayscale(1) contrast(1.1) brightness(.9)}
.hv-duo .hv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,var(--gold),#3a2410);mix-blend-mode:multiply;opacity:1;transition:opacity .8s}
.hv-duo:is(:hover,:focus-visible,.is-on) .hv-media img{filter:none;transform:scale(1.04)}
.hv-duo:is(:hover,:focus-visible,.is-on) .hv-media::after{opacity:0}
/* 6 frame draw */
.hv-frame{--fc:rgba(var(--gold-rgb),.95)}
.hv-frame .hv-fx{inset:14px;background:
  linear-gradient(var(--fc),var(--fc)) top left/0 1px no-repeat,
  linear-gradient(var(--fc),var(--fc)) top right/1px 0 no-repeat,
  linear-gradient(var(--fc),var(--fc)) bottom right/0 1px no-repeat,
  linear-gradient(var(--fc),var(--fc)) bottom left/1px 0 no-repeat;
  transition:background-size .9s cubic-bezier(.7,0,.2,1)}
.hv-frame:is(:hover,:focus-visible,.is-on) .hv-fx{background-size:100% 1px,1px 100%,100% 1px,1px 100%}
.hv-frame .hv-media img{transition:transform 1s cubic-bezier(.2,.8,.2,1),clip-path 1s cubic-bezier(.2,.8,.2,1)}
.hv-frame:is(:hover,:focus-visible,.is-on) .hv-media img{clip-path:inset(26px round 6px);transform:scale(1.02)}
/* light theme */
.theme-light .hv{box-shadow:0 30px 60px -34px rgba(var(--shadow-rgb),.45)}
.theme-light .hv:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold)}
.theme-light .hv-curtain .hv-fx{background:#f6eadb;opacity:.93}
.theme-light .hv-curtain:is(:hover,:focus-visible,.is-on) .hv-cap{color:#1e1711}
.theme-light .hv-curtain:is(:hover,:focus-visible,.is-on) .hv-eff{color:var(--gold2)}
.theme-light .hv-curtain:is(:hover,:focus-visible,.is-on) .hv-sub{color:#6c5d4f}
.theme-light .hv-duo .hv-media::after{background:linear-gradient(140deg,var(--glow),var(--gold))}
.theme-light .hv-spot .hv-media img{filter:brightness(1.25) saturate(.2) contrast(.8)}
.theme-light .hv-spot .hv-media img.hv-lit{filter:none}
@media (max-width:900px){.hv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hv-grid{gap:.7rem}.hv{aspect-ratio:4/5}.hv-cap{left:.8rem;right:.8rem;bottom:.8rem}.hv-cap strong{font-size:1.15rem}.hv-sub{font-size:.68rem}.hv-eff{font-size:.5rem;letter-spacing:.2em}}
@media (prefers-reduced-motion:reduce){.hv,.hv *{transition-duration:.01s!important}.hv-tilt{transform:none!important}}