/* Structural CSS shared by both designs. Colors and type come from each design's tokens. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.55;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* gallery */
.g-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.g-filters button{font:inherit;cursor:pointer}
.gallery{display:flex;flex-wrap:wrap;gap:10px;--h:clamp(150px,19vw,270px)}
.gallery::after{content:"";flex:10 1 0}
.g-item{flex:var(--r) 1 calc(var(--r) * var(--h));height:var(--h);margin:0;position:relative;overflow:hidden}
.g-item[hidden]{display:none}
.g-item a{display:block;position:relative;height:100%}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.g-item a:hover img{transform:scale(1.04)}
.g-item .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font-size:13px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .3s}
.g-item a:hover .cap,.g-item a:focus-visible .cap{opacity:1}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,5,5,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.on{display:flex}
.lightbox figure{max-width:min(1400px,92vw);text-align:center}
.lightbox img{max-height:84vh;width:auto;margin:auto}
.lightbox figcaption{color:#ccc;font-size:14px;margin-top:10px}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:44px;cursor:pointer;padding:10px 16px;line-height:1}
.lb-x{top:8px;right:8px}.lb-p{left:4px;top:50%;transform:translateY(-50%)}.lb-n{right:4px;top:50%;transform:translateY(-50%)}

/* youtube */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.video .frame{aspect-ratio:16/9;position:relative;overflow:hidden;background:#000}
.video iframe,.yt{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{cursor:pointer;padding:0;background:#000}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.yt .play::after{content:"";border-left:20px solid var(--accent-ink,#fff);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video h3{font-size:17px;margin-top:12px}
.video p{font-size:14px;opacity:.7}

/* before / after */
.ba{--pos:50%;position:relative;overflow:hidden;aspect-ratio:3/2;max-width:1000px;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;pointer-events:none}
.ba .handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:#fff;color:#111;display:grid;place-items:center;font-size:20px}
.ba .tag{position:absolute;top:12px;font:12px/1 var(--font-mono);letter-spacing:.15em;background:rgba(0,0,0,.6);color:#fff;padding:6px 8px;pointer-events:none}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}

/* websites */
.sites{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.site a{text-decoration:none;display:block}
.site .shot{aspect-ratio:16/10;overflow:hidden;position:relative}
.site .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 2.5s ease}
.site a:hover .shot img{transform:translateY(-8%) scale(1.05)}
.site h3{font-size:17px;margin-top:10px}
.site p{font-size:14px;opacity:.7}
.sites-more{margin-top:16px;font-size:14px;opacity:.7}