.gwrap{
  position:relative; z-index:10;
  width:min(1872px,100%);
  margin:0 auto;
  padding:clamp(18px,4vw,44px) clamp(14px,3vw,28px) calc(clamp(18px,4vw,44px) + 40px);
}

html{ overflow-y:scroll; scrollbar-gutter:stable; }

.gwrap .hero{ margin:0 auto 30px; }

.page-gallery .hero{
  width:min(430px,100%);
  padding:clamp(14px,2.4vw,22px) clamp(16px,3vw,28px) clamp(12px,2.2vw,18px);
}
.page-gallery .hero .avatar{ width:74px; height:74px; margin:0 auto 12px; }

.ggrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(230px,100%),1fr));
  max-width:calc(230px * 6 + 5 * 12px);
  margin-inline:auto;
  gap:12px;
  animation:fadein .8s var(--ease) .25s backwards;
}
a.gitem{
  position:relative; display:block;
  aspect-ratio:1/1;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,14,10,.35);
  transform:translateZ(0);
  transition:transform .3s var(--spring), border-color .3s, box-shadow .3s;
}
a.gitem img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:transform .45s var(--ease), opacity .4s var(--ease),
             filter 1.2s var(--ease);
}

a.gitem.shrinking img{
  filter:blur(12px) saturate(.7); opacity:.4;
  transition:filter .28s var(--ease), opacity .28s var(--ease);
}
a.gitem img.ready{ opacity:1; }
a.gitem:hover, a.gitem:focus-visible{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 12px 28px rgba(0,0,0,.4), 0 0 18px -4px var(--glow);
  z-index:1;
}

a.gitem:hover, a.gitem:focus-visible{
  transform:translateY(-4px) translate(calc(var(--mx,0)*9px), calc(var(--my,0)*7px));
  transition:transform .18s ease-out, border-color .3s, box-shadow .3s;
}
a.gitem:hover img, a.gitem:focus-visible img{ transform:scale(1.07); }

a.gitem.fetching{ --mx:0 !important; --my:0 !important; transform:none !important; }
@media (hover:none){
  a.gitem{ --mx:0 !important; --my:0 !important; }
}
@media (prefers-reduced-motion: reduce){
  a.gitem{ --mx:0 !important; --my:0 !important; }
}

[data-theme="mech"] a.gitem::before{
  content:""; position:absolute; inset:6px; z-index:2; pointer-events:none;
  border-radius:8px; opacity:0; transition:opacity .25s;
  background:
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/14px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/2px 14px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/14px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/2px 14px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/14px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/2px 14px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/14px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/2px 14px;
  background-repeat:no-repeat;
}
a.gitem:hover::before, a.gitem:focus-visible::before{ opacity:.85; }

.gitem::after{
  content:""; position:absolute; inset:1px; z-index:2; pointer-events:none;
  border-radius:11px;
  background:
    repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 13px) 0 0/100% 3px,
    repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 13px) 0 100%/100% 3px,
    repeating-linear-gradient(0deg, var(--accent) 0 6px, transparent 6px 13px) 0 0/3px 100%,
    repeating-linear-gradient(0deg, var(--accent) 0 6px, transparent 6px 13px) 100% 0/3px 100%;
  background-repeat:no-repeat;
  opacity:.14; transition:opacity .3s var(--ease);
}
a.gitem:hover::after, a.gitem:focus-visible::after{ opacity:.65; }

a.gitem.fetching:hover::after{ opacity:0; }

.nsnote{
  grid-column:1/-1; text-align:center;
  color:var(--txt-dim); padding:30px 0;
}

.gfoot{
  margin-top:36px; text-align:center;
  color:var(--txt-faint); font-size:13px; letter-spacing:.05em;
  animation:fadein 1s var(--ease) .5s backwards;
}
.gfoot > p{ margin:0 0 18px; line-height:2; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.gfoot .chips{
  flex-direction:row; flex-wrap:wrap; justify-content:center;
  max-width:600px; margin:0 auto 22px;
}
.gfoot .chip{ padding:10px 18px; border-radius:999px; font-size:14px; }
.gfoot .copyright{ margin:0; }
.gfoot .copyright a{
  color:var(--txt-dim); text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.25);
}
.gfoot .copyright a:hover{ color:var(--accent-2); }

body.lb-open{ overflow:hidden; }

.lb{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:clamp(12px,4vw,40px);
  padding-top:max(clamp(12px,4vw,40px), env(safe-area-inset-top));
  visibility:hidden; pointer-events:none;
  transition:visibility 0s .6s;
}
.lb.open{
  visibility:visible; pointer-events:auto;
  transition:visibility 0s;
}

.lb-backdrop{
  position:absolute; inset:0;
  background:rgba(8,10,14,0);
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  transition:background-color .45s var(--ease),
             -webkit-backdrop-filter .55s var(--ease),
             backdrop-filter .55s var(--ease);
}
.lb.open .lb-backdrop{
  background:rgba(8,10,14,.84);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.lb-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  max-width:min(1100px,100%);
  transform:scale(.96);
  opacity:0;
  transition:transform .35s var(--spring), opacity .3s var(--ease);
}
.lb.open .lb-card{ transform:none; opacity:1; }
.lb-card img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 130px);
  max-height:calc(100dvh - 130px);
  width:auto; height:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:#0e1116;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;
  transition:opacity .3s var(--ease), border-radius .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);

}
.lb-card img.ready{ opacity:1; }

.lb-card img.snap{ transition:opacity 0s; }
.lb-card .lb-spin{
  position:absolute; top:calc(50% - 17px); left:calc(50% - 17px);
  width:34px; height:34px; color:var(--accent);
  display:none;
}
.lb-card .lb-spin svg{
  display:block; width:100%; height:100%;
  animation:spin 1.6s linear infinite;
}
.lb-card.loading .lb-spin{ display:block; }
.lb-card figcaption{
  margin-top:12px;
  color:var(--txt-dim); font-size:13px; letter-spacing:.12em;
  text-shadow:0 1px 8px rgba(0,0,0,.5);
  transition:opacity .35s var(--ease) .08s;
}

[data-theme="mech"] .lb-card::before{
  content:""; position:absolute; inset:-12px; pointer-events:none; opacity:.6;
  transition:opacity .45s var(--ease) .1s;
  background:
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/18px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/2px 18px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/18px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 top 0/2px 18px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/18px 2px,
    linear-gradient(var(--accent),var(--accent)) left 0 bottom 0/2px 18px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/18px 2px,
    linear-gradient(var(--accent),var(--accent)) right 0 bottom 0/2px 18px;
  background-repeat:no-repeat;
}

.lb-btn{
  position:absolute; z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:20px; line-height:1; text-decoration:none;
  color:var(--txt-dim);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .3s var(--ease) .14s,
             color .25s var(--spring), border-color .25s var(--spring),
             box-shadow .25s var(--spring), transform .25s var(--spring);
}
.lb.open .lb-btn{ opacity:1; }
.lb-btn:hover{
  color:#fff; border-color:var(--accent);
  box-shadow:0 0 16px var(--glow);
}

.lb-prev{  top:100%; left:calc(50% - 80px); margin-top:10px; }
.lb-close{ top:100%; left:calc(50% - 22px); margin-top:10px; background:rgba(8,10,14,.6); }
.lb-next{  top:100%; left:calc(50% + 36px); margin-top:10px; }
.lb-prev:hover{ transform:translateX(-3px); }
.lb-next:hover{ transform:translateX(3px); }
.lb-close:hover{ background:rgba(8,10,14,.85); }

.lb.full{ padding:0; }
.lb.full .lb-backdrop{ background:#000; }
.lb.full .lb-card{ max-width:100%; transform:none; }
.lb.full .lb-card img{
  max-width:100%; max-height:100dvh;
  border-radius:0; border-color:transparent;
  box-shadow:none;
}
.lb.full .lb-card figcaption,
.lb.full .lb-btn{ display:none; }

.lb-card img{ cursor:zoom-in; }
.lb.full .lb-card img{ cursor:zoom-out; }

.lb.zooming .lb-card img{ opacity:0; transition:none; }
.lb.zooming .lb-card figcaption{ opacity:0; transition:none; }
.lb.zooming .lb-card::before{ opacity:0; }
.lb.zooming .lb-btn{ opacity:0; }

.lb.zooming .lb-card{ transform:none; transition:none; }

.lb-card img.flip{ opacity:1; }
.zoom-fly{
  position:fixed; z-index:51;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  background:#0e1116;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  pointer-events:none;
  will-change:left, top, width, height;
}
.zoom-fly img{
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.zoom-fly.anim{
  box-shadow:0 30px 80px rgba(0,0,0,.6);

  transition:
    left .45s cubic-bezier(.3,.7,.25,1), top .45s cubic-bezier(.3,.7,.25,1),
    width .45s cubic-bezier(.3,.7,.25,1), height .45s cubic-bezier(.3,.7,.25,1),
    border-radius .45s var(--ease), box-shadow .45s var(--ease);
}

.zoom-fly.out{
  opacity:0;
  transition:opacity .22s var(--ease) .05s;
}
@media (prefers-reduced-motion: reduce){
  .zoom-fly{ display:none; }
}

.gitem{
  position:relative;
}
.gitem .spin{
  position:absolute; left:50%; top:50%;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}
.gitem img{ position:relative; z-index:1; }
.gitem img:not(.ready){ opacity:0; }
.gitem.loading .spin{ opacity:1; }
.gitem.loading img{ opacity:0; }
.gitem:not(.loading) .spin{ display:none; }
.gitem img.ready{ opacity:1; }

.gitem.fetching,
.gitem.fetching:hover, a.gitem.fetching:focus-visible{
  transform:none;
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
.gitem.fetching::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:rgba(8,10,14,.55);
  opacity:0; transition:opacity .25s;
}
.gitem .gear{
  position:absolute; left:50%; top:50%; z-index:4;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  color:var(--accent);
  opacity:0; transition:opacity .25s;
  pointer-events:none;
}

.gitem.fetching .gear svg{
  display:block; width:100%; height:100%;
  animation:spin 1.6s linear infinite;
}

.gitem.fetching.on::after{ opacity:1; }
.gitem.fetching.on .gear{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .gitem.fetching .gear svg{ animation:none; }
}

.ggrid:has(a.gitem) .gload{ display:none; }
.gload{
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center; gap:14px;
  min-height:320px;
  color:var(--txt-dim);
  font-size:15px; letter-spacing:.14em;
}
.gload .spin{
  width:24px; height:24px; flex:none; color:var(--accent);
}
.gload .spin svg{
  display:block; width:100%; height:100%;
  animation:spin 1.6s linear infinite;
}
.gload .dots i{
  font-style:normal;
  animation:dotpulse 1.2s infinite;
}
.gload .dots i:nth-child(2){ animation-delay:.2s; }
.gload .dots i:nth-child(3){ animation-delay:.4s; }
@keyframes dotpulse{ 0%,60%,100%{ opacity:.15; } 30%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .gload .dots i{ animation:none; }
}

.ggrid.flow{
  grid-template-columns:repeat(12,1fr);
  grid-auto-flow:row dense;
  grid-auto-rows:138px;
  max-width:none;
  gap:12px;
}
.ggrid.flow a.gitem{ width:auto; height:auto; aspect-ratio:auto; }
@media (max-width:700px){
  .ggrid.flow{
    grid-template-columns:repeat(6,1fr);
    gap:10px;
  }
}

.gal-mode{
  position:fixed; right:22px; bottom:26px; z-index:35;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(16,12,9,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#e8dfd4;
  font:inherit; font-size:13px; letter-spacing:.5px;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform .25s var(--spring), border-color .25s, box-shadow .25s;
}
.gal-mode:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.gal-mode:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:700px){
  .gal-mode{ display:none; }
}

@media (max-width:640px){
  .ggrid{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
  .gfoot .chip{ padding:9px 14px; font-size:13px; }
  .lb-btn{ width:40px; height:40px; }
  .lb-prev{  left:calc(50% - 70px); }
  .lb-close{ left:calc(50% - 20px); }
  .lb-next{  left:calc(50% + 30px); }

  .page-gallery .hero{ width:100%; padding:12px 14px 8px; }
  .page-gallery .hero .avatar{ width:50px; height:50px; margin:0 auto 8px; }
  .page-gallery .hero h1{ font-size:22px; margin-bottom:4px; }
  .page-gallery .hero .tagline{ margin-bottom:8px; font-size:13px; }
}

.ggrid:not(.flow) a.gitem.glogo{
  grid-column:span 2;
  aspect-ratio:3508/1828;
}
@media (max-width:319px){
  .ggrid:not(.flow) a.gitem.glogo{ grid-column:auto; aspect-ratio:1/1; }
}