/* Gallery v4 — magnetic year rail (mechanic from v3, aesthetics rebuilt). Reuses .gcard/.gjust/.grow/.gyear/lightbox from styles.css */

.v4-archive{display:grid;grid-template-columns:128px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.v4-intro{font-family:'Fraunces';font-style:italic;font-weight:330;font-size:clamp(13.5px,1.18vw,16.5px);letter-spacing:.004em;color:var(--muted);line-height:1.55;white-space:nowrap;margin:0 0 clamp(22px,3.2vw,36px)}

/* ---- magnetic rail ---- */
.y4-rail-shell{position:sticky;top:96px}
.y4-rail{position:relative;display:flex;flex-direction:column;gap:clamp(16px,2.6vh,30px);padding:10px 0 10px 16px;touch-action:none}
.y4-line{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 90%,transparent)}
.y4-glow{position:absolute;left:-6px;top:0;width:13px;height:13px;border-radius:50%;background:var(--accent);filter:blur(6px);opacity:0;transform:translateY(0);transition:opacity .35s ease;pointer-events:none;will-change:transform}

.y4-node{position:relative;display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;
  transform:translate3d(calc(var(--pull,0)*18px),var(--nudge,0px),0);
  transition:transform .2s cubic-bezier(.18,1,.3,1)}
.y4-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-left:-3px;background:var(--faint);
  transform:scale(calc(1 + var(--pull,0)*1.15));
  box-shadow:0 0 0 0 rgba(111,130,242,0);transition:background .3s ease,box-shadow .3s ease,transform .2s cubic-bezier(.18,1,.3,1)}
.y4-year{font-family:'Space Mono';font-weight:400;font-size:clamp(12px,1.12vw,15px);letter-spacing:.05em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ink);opacity:calc(.26 + var(--pull,0)*.74);
  transform:scale(calc(1 + var(--pull,0)*.42));transform-origin:left center;
  transition:opacity .3s ease,transform .2s cubic-bezier(.18,1,.3,1),color .3s ease}
.y4-node:hover .y4-year,.y4-node.hovered .y4-year{color:#fff}
.y4-node.active .y4-dot,.y4-node.hovered .y4-dot{background:var(--accent);box-shadow:0 0 16px 1px rgba(111,130,242,.6)}
.y4-node.active .y4-year{opacity:1;color:var(--accent-soft)}

/* ---- gallery side: year heading with count ---- */
.v4-year{padding:0;scroll-margin-top:90px}
.v4-year .gyear{margin-top:0;margin-bottom:24px}
.v4-year:not(:first-child) .gyear{margin-top:64px}
.gyear-count{font-family:'Space Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

@media(max-width:880px){
  .v4-archive{grid-template-columns:1fr;gap:0}
  .y4-rail-shell{display:none}
}

/* ---- event album cover card ---- */
.gcard--album{border-color:rgba(111,130,242,.55);
  box-shadow:4px -4px 0 -1px var(--paper2),4px -4px 0 0 var(--line),9px -9px 0 -1px var(--paper2),9px -9px 0 0 var(--line);
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .3s}
.gcard--album:hover{border-color:var(--accent);
  box-shadow:5px -5px 0 -1px var(--paper2),5px -5px 0 0 var(--line),11px -11px 0 -1px var(--paper2),11px -11px 0 0 rgba(111,130,242,.5)}
.gcard--album figcaption{background:linear-gradient(transparent 24%,rgba(2,3,6,.55) 55%,rgba(2,3,6,.92))}
.galb-badge{position:absolute;top:10px;right:10px;z-index:3;font-size:10px;letter-spacing:.08em;color:#fff;background:rgba(111,130,242,.9);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 11px;font-weight:700;opacity:0;transition:opacity .35s ease}
.gcard--album:hover .galb-badge,.gcard--album:focus-visible .galb-badge{opacity:1}
.galb-kick{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:6px}
.gcard--album .gtitle{font-family:'Fraunces';font-weight:400;font-size:clamp(15px,1.5vw,21px);line-height:1.1;letter-spacing:-.01em}
/* resting album mark (hidden on hover, replaced by the rich overlay) */
.galb-mark{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;letter-spacing:.05em;color:#fff;background:rgba(8,10,15,.5);border:1px solid rgba(255,255,255,.22);
  border-radius:20px;padding:5px 11px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .3s ease}
.gcard--album:hover .galb-mark,.gcard--album:focus-visible .galb-mark{opacity:0}
.galb-ic{position:relative;display:inline-block;width:12px;height:11px}
.galb-ic::before,.galb-ic::after{content:'';position:absolute;width:8px;height:8px;border:1.3px solid currentColor;border-radius:2px}
.galb-ic::before{right:0;top:0}
.galb-ic::after{left:0;bottom:0}

/* ---- lightbox: album mode + filmstrip ---- */
.lightbox .lb-alb{display:none}
.lightbox.album .lb-alb{display:block;font-family:'Fraunces';font-weight:400;font-size:clamp(18px,2vw,27px);letter-spacing:-.015em;color:#fff;margin-bottom:2px}
.lightbox .lb-meta{display:none}
.lightbox.album .lb-meta{display:flex;gap:16px;justify-content:center;align-items:baseline;margin-top:9px;font-family:'Space Mono';font-size:11px}
.lightbox.album .lb-by{color:var(--accent-soft);letter-spacing:.13em;text-transform:uppercase}
.lightbox.album .lb-count{color:var(--muted);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.lightbox.album{padding-bottom:104px}
.lightbox.album img{max-height:60vh}
.lightbox .lb-strip{display:none}
.lightbox.album .lb-strip{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:16px;z-index:3;
  padding:10px clamp(16px,5vw,64px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lightbox.album .lb-strip::-webkit-scrollbar{height:6px}
.lightbox.album .lb-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:6px}
.lb-thumb{flex:0 0 auto;width:70px;height:46px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#000;padding:0;cursor:pointer;opacity:.48;transition:opacity .25s,border-color .25s,transform .25s}
.lb-thumb img{width:100%;height:100%;object-fit:cover}
.lb-thumb:hover{opacity:.82}
.lb-thumb.active{opacity:1;border-color:var(--accent);transform:translateY(-3px)}
@media(max-width:640px){
  .gcard--album{box-shadow:3px -3px 0 -1px var(--paper2),3px -3px 0 0 var(--line),7px -7px 0 -1px var(--paper2),7px -7px 0 0 var(--line)}
  .lightbox.album img{max-height:52vh}
  .lb-thumb{width:56px;height:38px}
}