/* Shared reset + primitives for all five designs */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* image placeholder wrapper — keeps layout stable while loading */
.ph{display:block;position:relative;overflow:hidden}
.ph img{width:100%;height:auto}
.fig{cursor:zoom-in;position:relative}

/* ---------- Lightbox (shared) ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.94);display:none;
    align-items:center;justify-content:center;padding:clamp(12px,4vw,56px);opacity:0;transition:opacity .25s}
.lb.is-open{display:flex}
.lb.is-vis{opacity:1}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb__cap{position:absolute;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));text-align:center;
  color:rgba(255,255,255,.72);font:400 12px/1.5 system-ui,sans-serif;letter-spacing:.06em;padding:0 64px}
.lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  color:#fff;font-size:26px;line-height:1;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .2s}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__prev{left:clamp(8px,2vw,28px)} .lb__next{right:clamp(8px,2vw,28px)}
.lb__close{position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);width:46px;height:46px;
  border-radius:50%;color:#fff;font-size:22px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.lb__close:hover{background:rgba(255,255,255,.2)}
@media (max-width:640px){.lb__btn{width:42px;height:42px;font-size:20px}.lb__cap{padding:0 16px}}
body.lb-open{overflow:hidden}

/* filtering */
.fig[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
