#page-album{background:var(--dark);color:var(--paper);padding-bottom:120px}
body[data-page="album"] #topbar{background:var(--dark);color:var(--paper);border-bottom-color:var(--teal)}
body[data-page="album"] #topbar nav a.on{background:var(--teal);color:var(--paper)}
body[data-page="album"] .brand i{color:var(--teal)}
body[data-page="album"] #fcount{display:none}

#page-album .h2 em{color:var(--teal)}
.album-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3vh}
.album-meta span::before{content:"";display:inline-block;width:10px;height:10px;background:var(--teal);margin-right:10px;vertical-align:1px}
.album-intro{font-family:var(--fs);font-style:italic;font-size:clamp(20px,2.4vw,32px);max-width:26ch}

.jl-media{position:fixed;left:0;top:0;z-index:40;pointer-events:none;width:0;height:0}
.jl-fig{position:absolute;left:0;top:0;width:clamp(220px,24vw,380px);aspect-ratio:4/3;overflow:hidden;
  margin:calc(clamp(220px,24vw,380px) * -0.375) 0 0 calc(clamp(220px,24vw,380px) * -0.5);
  opacity:0;transform:scale(.86);transition:opacity .35s var(--e),transform .5s var(--e);background:var(--ink)}
.jl-fig img{width:100%;height:100%;object-fit:cover}
.jl-media.on .jl-fig{transform:none}
.jl-fig.t1{z-index:3;border:var(--bw) solid var(--paper)}
.jl-fig.t2{z-index:2}
.jl-fig.t3{z-index:1}
.jl-media.on .jl-fig.t1{opacity:1}
.jl-media.on .jl-fig.t2{opacity:.5;filter:saturate(.35)}
.jl-media.on .jl-fig.t3{opacity:.25;filter:saturate(0)}
.jl-tag{position:absolute;z-index:4;left:0;top:0;
  margin:calc(clamp(220px,24vw,380px) * -0.375 - 26px) 0 0 calc(clamp(220px,24vw,380px) * -0.5);font-family:var(--fm);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;background:var(--tang);color:var(--ink);padding:5px 9px;opacity:0;transition:opacity .3s;white-space:nowrap}
.jl-media.on .jl-tag{opacity:1}
@media (hover:none),(pointer:coarse){.jl-media{display:none}}

.jl-wrap{margin-top:5vh}
#page-album[data-view="index"] #jlRolls{display:none}
#page-album[data-view="rolls"] #jlIndex{display:none}

.jl-roll{margin-bottom:6vh}
.jl-roll-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 16px;padding-bottom:10px}
.jl-roll-head .rn{font-family:var(--fm);font-size:11px;letter-spacing:.2em;background:var(--tang);color:var(--ink);padding:5px 9px}
.jl-roll-head h3{font-family:var(--fm);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.jl-roll-head .rmeta{margin-left:auto;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

.jl-row{display:flex;align-items:baseline;gap:18px;width:100%;text-align:left;
  padding:clamp(10px,1.5vw,20px) 4px;border-top:var(--bw) solid rgba(242,236,226,.28);
  transition:opacity .35s var(--e),padding-left .35s var(--e),color .3s}
.jl-roll .jl-row:last-of-type{border-bottom:var(--bw) solid rgba(242,236,226,.28)}
.jl-row .n{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--tang);width:34px;flex:0 0 auto}
.jl-row .t{font-family:var(--fd);font-size:clamp(30px,5.6vw,74px);line-height:.94;text-transform:uppercase;
  letter-spacing:.01em;transition:transform .45s var(--e)}
.jl-row .m{margin-left:auto;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;white-space:nowrap}
.jl-row .mov{font-family:var(--fm);font-size:10px;letter-spacing:.16em;background:var(--tang);color:var(--ink);padding:4px 7px;align-self:center}
.jl-list.hot .jl-row{opacity:.32}
.jl-list.hot .jl-row.hot{opacity:1}
.jl-row.hot{padding-left:22px;color:var(--tang)}
.jl-row.hot .t{transform:translateX(6px)}
.jl-row:focus-visible{outline:3px solid var(--tang);outline-offset:2px}

.jl-index{font-family:var(--fd);font-size:clamp(26px,4.4vw,58px);line-height:1.14;text-transform:uppercase;letter-spacing:.01em}
.jl-word{display:inline;transition:opacity .3s,color .3s}
.jl-index .dot{display:inline-block;margin:0 .34em;color:var(--teal);font-size:.42em;vertical-align:.34em}
.jl-index.hot .jl-word{opacity:.3}
.jl-index.hot .jl-word.hot{opacity:1;color:var(--tang)}
.jl-word:focus-visible{outline:3px solid var(--tang);outline-offset:2px}

.jl-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:12px var(--pad);background:var(--dark);border-top:var(--bw2) solid var(--teal);
  font-family:var(--fm);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.jl-bar a,.jl-bar button{padding:6px 8px;transition:background .2s,color .2s}
.jl-bar a:hover,.jl-bar button:hover{background:var(--tang);color:var(--ink)}
.jl-bar .sep{opacity:.4}
.jl-bar .r{margin-left:auto;display:flex;align-items:center;gap:4px}
.jl-bar button.on{background:var(--teal);color:var(--paper)}

.jl-profile{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ink);color:var(--paper);
  border-top:var(--bw2) solid var(--paper);padding:clamp(24px,4vw,54px) var(--pad) 92px;
  transform:translateY(101%);transition:transform .5s var(--e);max-height:82vh;max-height:82dvh;overflow-y:auto}
#page-album.profile .jl-profile{transform:none}
.jl-profile .lead{font-family:var(--fs);font-style:italic;font-size:clamp(20px,2.6vw,34px);max-width:34ch;margin-bottom:26px}
.jl-profile .lead b{color:var(--teal);font-weight:400}
.jl-profile .nums{display:flex;flex-wrap:wrap;gap:10px 34px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px}
.jl-profile .nums b{font-family:var(--fd);font-size:22px;color:var(--tang);font-weight:400;margin-right:10px}
.jl-profile .links{display:flex;flex-wrap:wrap;gap:12px}
.jl-profile .links a{border:var(--bw) solid var(--paper);padding:10px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s}
.jl-profile .links a:hover{background:var(--paper);color:var(--ink)}

#vf{position:fixed;inset:0;z-index:130;display:none;background:#0B0906;color:var(--paper);
  font-family:var(--fm);-webkit-user-select:none;user-select:none}
#vf.on{display:block}

.vf-blades{position:absolute;inset:0;z-index:9;pointer-events:none}
.vf-blades i{position:absolute;left:0;right:0;height:50.5%;background:#0B0906}
.vf-blades .t{top:0;transform-origin:top}
.vf-blades .b{bottom:0;transform-origin:bottom}
#vf.open .vf-blades i{transform:scaleY(0);transition:transform .44s var(--e)}
.vf-flash{position:absolute;inset:0;z-index:10;background:var(--paper);opacity:0;pointer-events:none}
#vf.flash .vf-flash{animation:vfflash .34s ease-out 1}
@keyframes vfflash{0%{opacity:.8}100%{opacity:0}}

.vf-grain{position:absolute;inset:-120px;z-index:8;pointer-events:none;opacity:.14;animation:grain 1.1s steps(4) infinite}

.vf-stage{position:absolute;left:0;right:0;top:46px;bottom:64px;display:grid;place-items:center;overflow:hidden;padding:clamp(10px,2.4vw,34px)}
.vf-media{position:relative;max-width:100%;max-height:100%;display:grid;place-items:center;line-height:0}
#vfImg{max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;
  opacity:0;transform:scale(1.05);filter:blur(16px);
  transition:opacity .28s linear,transform .75s var(--e),filter .75s var(--e)}
#vf.ready #vfImg{opacity:1;transform:none;filter:none}
#vf.adv #vfImg{transition:none;opacity:.18;filter:blur(7px);transform:translateX(var(--adv,60px)) scale(1.02)}
#vf.zoom .vf-media{cursor:zoom-out}
#vf.zoom #vfImg{transform:scale(2.2);transition:transform .35s var(--e)}
#vf .vf-media{cursor:zoom-in}
#vf.isvid .vf-media{cursor:auto}

#vfVid{display:none;width:min(1200px,86vw);aspect-ratio:16/9;background:#000;border:var(--bw2) solid var(--paper)}
#vf.isvid #vfVid{display:block}
#vf.isvid #vfImg{display:none}
#vfVid iframe,#vfVid video{width:100%;height:100%;border:0;display:block}

.vf-hud{position:absolute;inset:0;z-index:6;pointer-events:none}
.vf-hud .k{position:absolute;width:28px;height:28px;border:0 solid var(--paper);opacity:.85}
.vf-hud .k1{left:14px;top:14px;border-left-width:3px;border-top-width:3px}
.vf-hud .k2{right:14px;top:14px;border-right-width:3px;border-top-width:3px}
.vf-hud .k3{left:14px;bottom:14px;border-left-width:3px;border-bottom-width:3px}
.vf-hud .k4{right:14px;bottom:14px;border-right-width:3px;border-bottom-width:3px}
.vf-hud .focus{position:absolute;left:50%;top:50%;width:min(240px,26vw);height:min(240px,26vw);
  transform:translate(-50%,-50%);border:2px solid var(--teal);opacity:0}
#vf.ready .vf-hud .focus{animation:af 1s var(--e) 1}
@keyframes af{0%{opacity:1;transform:translate(-50%,-50%) scale(1.55)}
  62%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.vf-hud .thirds{position:absolute;inset:0;opacity:0;transition:opacity .25s}
#vf.grid .vf-hud .thirds{opacity:1}
.vf-hud .thirds i{position:absolute;background:rgba(242,236,226,.32)}
.vf-hud .thirds i:nth-child(1){left:33.333%;top:0;bottom:0;width:1px}
.vf-hud .thirds i:nth-child(2){left:66.666%;top:0;bottom:0;width:1px}
.vf-hud .thirds i:nth-child(3){top:33.333%;left:0;right:0;height:1px}
.vf-hud .thirds i:nth-child(4){top:66.666%;left:0;right:0;height:1px}

.vf-top{position:absolute;top:0;left:0;right:0;height:46px;z-index:11;display:flex;align-items:center;gap:10px;
  padding:0 clamp(10px,2.4vw,26px);border-bottom:var(--bw) solid rgba(242,236,226,.22);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:rgba(11,9,6,.86)}
.vf-roll{background:var(--tang);color:var(--ink);padding:5px 9px;white-space:nowrap}
.vf-top .ttl{font-family:var(--fd);font-size:17px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.vf-tools button{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:var(--bw) solid rgba(242,236,226,.55);padding:6px 9px;transition:background .2s,color .2s,border-color .2s}
.vf-tools button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.vf-tools button.on{background:var(--teal);border-color:var(--teal);color:var(--paper)}
.vf-tools .x{border-color:var(--tang);color:var(--tang)}
.vf-tools .x:hover{background:var(--tang);color:var(--ink)}
.vf-rec{display:none;align-items:center;gap:8px;color:var(--tang)}
#vf.isvid .vf-rec{display:flex}
.vf-rec b{width:10px;height:10px;background:var(--tang);animation:blink 1.2s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

.vf-bot{position:absolute;bottom:0;left:0;right:0;min-height:64px;z-index:11;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 22px;padding:10px clamp(10px,2.4vw,26px);background:rgba(11,9,6,.86);
  border-top:var(--bw) solid rgba(242,236,226,.22);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.vf-ex{display:flex;flex-wrap:wrap;gap:6px 16px;opacity:.9}
.vf-ex span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--teal);margin-right:8px;vertical-align:1px}
.vf-cap{flex:1 1 240px;min-width:0;opacity:.6;text-transform:none;letter-spacing:.03em;font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-cnt{font-family:var(--fd);font-size:24px;color:var(--tang);letter-spacing:.04em}

#vfP,#vfN{position:absolute;top:50%;transform:translateY(-50%);z-index:11;width:54px;height:74px;
  display:grid;place-items:center;background:rgba(11,9,6,.5);border:var(--bw) solid rgba(242,236,226,.4);
  font-family:var(--fd);font-size:26px;color:var(--paper);transition:background .2s,color .2s,border-color .2s}
#vfP{left:clamp(6px,1.6vw,18px)}
#vfN{right:clamp(6px,1.6vw,18px)}
#vfP:hover,#vfN:hover{background:var(--tang);color:var(--ink);border-color:var(--tang)}

.vf-info{position:absolute;z-index:12;top:46px;right:0;bottom:64px;width:min(340px,86vw);
  background:rgba(11,9,6,.96);border-left:var(--bw2) solid var(--teal);padding:22px 20px;
  transform:translateX(102%);transition:transform .35s var(--e);overflow-y:auto}
#vf.info .vf-info{transform:none}
.vf-info h4{font-family:var(--fd);font-size:22px;text-transform:uppercase;margin-bottom:4px}
.vf-info .sub{font-family:var(--fs);font-style:italic;font-size:16px;opacity:.8;margin-bottom:18px}
.vf-info dl{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.vf-info dt{color:var(--teal)}
.vf-info dd{text-align:right;opacity:.9}
.vf-info .hint{margin-top:22px;padding-top:14px;border-top:var(--bw) solid rgba(242,236,226,.25);
  font-size:10px;letter-spacing:.12em;opacity:.6;line-height:1.9}

@media (max-width:900px){
  .jl-row .m{margin-left:0;flex-basis:100%}
  .jl-roll-head .rmeta{margin-left:0}
}
@media (max-width:720px){
  #vfP,#vfN{display:none}
  .vf-stage{top:44px;bottom:96px}
  #vfImg{max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}
  .vf-top .ttl{display:none}
  .vf-bot{min-height:96px}
  .vf-cap{flex-basis:100%;white-space:normal}
  .vf-info{top:44px;bottom:96px;width:100%;border-left:0;border-top:var(--bw2) solid var(--teal)}
  .vf-hud .k{width:20px;height:20px}
  .jl-bar{font-size:10px;letter-spacing:.1em;padding:10px 14px}
  #page-album{padding-bottom:100px}
}
@media (max-width:480px){
  .vf-tools button{padding:6px 7px;letter-spacing:.1em}
  .jl-row{gap:10px}
  .jl-row .n{width:26px}
}
@media (prefers-reduced-motion:reduce){
  #vfImg{opacity:1;filter:none;transform:none}
  .vf-grain{animation:none}
  .jl-fig{transition:none}
}

.reelbox{position:relative;height:min(76vh,780px);height:min(76dvh,780px);margin:1vh calc(var(--pad) * -1) 0;overflow:hidden;
  perspective:1050px;perspective-origin:50% 50%;cursor:grab;touch-action:pan-y}
.reelbox.drag{cursor:grabbing}

.reel-floor{position:absolute;left:-60%;right:-60%;bottom:0;height:46%;pointer-events:none;
  transform:rotateX(70deg);transform-origin:50% 100%;opacity:.85;
  background-image:
    repeating-linear-gradient(90deg,rgba(242,236,226,.30) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(242,236,226,.30) 0 1px,transparent 1px 74px);
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 78%);
  mask-image:linear-gradient(to top,#000 6%,transparent 78%)}

.reel-stage{position:absolute;inset:0;transform-style:preserve-3d}

.rcard{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.reelbox{--cw:clamp(190px,23vw,330px)}
.rc-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sl{position:absolute;top:0;left:0;background-repeat:no-repeat;cursor:pointer;will-change:transform;
  transform-origin:0 50%;backface-visibility:hidden;
  transform-style:preserve-3d}
.sl::after{content:"";position:absolute;inset:0;background:var(--dark);opacity:var(--sh,0)}

.reel-caps{position:absolute;inset:0;z-index:6;pointer-events:none}
.rc-face{position:absolute;top:50%;left:50%;width:var(--cw);height:var(--ch);pointer-events:none;
  transform-origin:50% 50%;will-change:transform}
.rc-cap{position:absolute;left:12px;bottom:10px;z-index:2;opacity:0;transition:opacity .3s;text-shadow:0 2px 10px rgba(11,9,6,.9);
  font-family:var(--fm);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);opacity:.75;white-space:nowrap}
.rc-face.mid .rc-cap{opacity:1;color:var(--tang)}

.rc-mov{position:absolute;left:10px;top:10px;font-family:var(--fm);font-size:10px;letter-spacing:.16em;
  background:var(--tang);color:var(--ink);padding:4px 7px}

.reel-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:10px;z-index:5;display:flex;
  align-items:center;gap:14px;font-family:var(--fm);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;pointer-events:none}
.reel-hud .rh-roll{background:var(--tang);color:var(--ink);padding:5px 9px}
.reel-hud .rh-hint{opacity:.5}
.reel-hud .rh-cnt{margin-left:auto;font-family:var(--fd);font-size:22px;color:var(--tang);letter-spacing:.04em}

#page-album[data-view="index"] #reel{display:none}
#reel:focus{outline:none}
#page-album[data-view="reel"] #jlIndex{display:none}
#page-album[data-view="reel"] .album-intro{margin-bottom:0}

.jl-group{margin-bottom:5vh}
.jl-group h3{font-family:var(--fm);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px}
.jl-group h3 b{color:var(--tang);font-weight:400;margin-right:10px}

@media (max-width:720px){
  .reelbox{height:min(52vh,440px);height:min(52dvh,440px);--cw:clamp(180px,58vw,260px);perspective:900px}
  .reel-floor{height:38%}
  .reel-hud{font-size:10px;letter-spacing:.1em}
  .reel-hud .rh-cnt{font-size:18px}
}