/* gallery-3: WEBSITES on a laptop + a phone (the 3D scenes below reuse gallery2.css). 2026-09-29 */
.jump{display:flex;gap:10px;flex-wrap:wrap}
.jump .pill{--fg:var(--on-night);--bg:transparent;border:1px solid var(--line-night)}
.webs{padding-bottom:clamp(90px,14vh,170px)}
.webs-head{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between;margin-bottom:clamp(36px,5vw,64px)}
.webs .filters{display:flex;gap:8px;flex-wrap:wrap}
.web-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(70px,9vw,130px) clamp(28px,4vw,64px)}
@media (max-width:860px){.web-grid{grid-template-columns:minmax(0,1fr)}}
.web[hidden]{display:none}
.web{min-width:0;display:flex;flex-direction:column}

/* the devices: a browser window, and a phone overlapping its bottom-right corner */
.dev{position:relative;padding:0 9% 14% 0}
.dev-desk{border-radius:14px;overflow:hidden;background:#141417;box-shadow:0 0 0 1px var(--line-night),0 30px 80px -30px rgba(0,0,0,.7)}
.dev-desk .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1b1b1f;border-bottom:1px solid var(--line-night)}
.dev-desk .bar i{width:9px;height:9px;border-radius:50%;background:rgba(237,235,230,.16)}
.dev-desk .url{margin-left:10px;flex:1;min-width:0;max-width:62%;height:18px;display:flex;align-items:center;padding:0 10px;border-radius:99px;background:rgba(237,235,230,.06);font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--on-night-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-desk .scr{aspect-ratio:16/10;overflow:hidden;background:#0f0f12}
.dev-desk img,.dev-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.dev-phone{position:absolute;right:0;bottom:0;width:27%;z-index:2}
.dev-phone .frame{aspect-ratio:460/995;border-radius:clamp(16px,2.4vw,30px);overflow:hidden;background:#0f0f12;border:clamp(3px,.45vw,6px) solid #0b0b0d;
  box-shadow:0 0 0 1px rgba(237,235,230,.14),0 30px 60px -20px rgba(0,0,0,.8);transition:transform .7s var(--out)}
.web:hover .dev-phone .frame{transform:translateY(-12px) rotate(-1.5deg)}
.dev-desk .scr img{transition:transform 1.2s var(--out)}
.web:hover .dev-desk .scr img{transform:scale(1.03)}
/* phone-first designs: just the phone, centred, and a sentence saying why */
.dev.phone-only{padding:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px);aspect-ratio:16/11.6;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-night);background:radial-gradient(ellipse at center,rgba(237,235,230,.05),transparent 70%)}
.dev.phone-only .dev-phone{position:relative;width:30%}
.dev .po{max-width:22ch;margin:0;color:var(--on-night-2);font-size:14px}
@media (max-width:560px){.dev.phone-only{flex-direction:column;aspect-ratio:auto;padding:30px 20px}.dev.phone-only .dev-phone{width:48%}.dev .po{text-align:center}}

/* the words under it */
.web-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:clamp(18px,2.4vw,28px)}
.web-meta h3{font:600 clamp(24px,2.4vw,34px)/1.02 var(--display);font-stretch:88%;letter-spacing:-.025em;margin:0;color:var(--on-night)}
.web-meta .m{margin:8px 0 0;color:var(--on-night-2);font-size:14.5px}
.web-meta .tag{--rule:var(--line-night);--fg-2:var(--on-night-2);flex:none}
.web-meta .tag.live{color:#0A0A0C;background:var(--on-night);border-color:var(--on-night)}
.web .dirs{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.web .dirs button{min-height:32px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--line-night);background:transparent;cursor:pointer;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2);transition:.25s}
.web .dirs button:hover{color:var(--on-night);border-color:rgba(237,235,230,.45)}
.web .dirs button[aria-pressed="true"]{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.web .open{align-self:flex-start;margin-top:16px;color:var(--on-night);font-size:14.5px;text-decoration:underline;text-decoration-color:rgba(237,235,230,.3);text-underline-offset:4px;transition:text-decoration-color .3s}
.web .open:hover{text-decoration-color:currentColor}
.web .open span{display:inline-block;transition:transform .4s var(--out)}
.web .open:hover span{transform:translate(3px,-3px)}
/* the 3D chapter's intro sits lower than a page hero */
.gal-hero.chapter{padding-top:clamp(60px,10vh,120px);border-top:1px solid var(--line-night)}