/* V4 uses a compact toolbar and four-column collection. Card artwork stays unchanged. */
:root{--rail:0px}
.gallery .collection-sidebar{position:relative;left:auto;top:auto;transform:none;width:auto;margin:136px 40px 0;display:grid;grid-template-columns:228px minmax(0,1fr);gap:24px;align-items:end;z-index:11}
.gallery .collection-sidebar .view-section,.gallery .collection-sidebar .collection-section{min-width:0;width:auto}
.gallery .sidebar-heading{margin-bottom:8px;font-size:12px}
.gallery .collection-sidebar .card-picker{flex-direction:row;align-items:center;gap:4px;max-height:none;width:100%;overflow-x:auto;overflow-y:hidden;padding:4px;border-radius:12px;scrollbar-width:thin;overscroll-behavior-x:contain}
.gallery .card-picker button{width:auto;min-height:36px;padding:7px 12px;flex:none;border-radius:8px}
.gallery .picker-title,.gallery .picker-name,.gallery .picker-title b{line-height:20px}
.gallery main,.gallery.flat-mode main{margin-left:0;padding:36px 40px 100px;min-height:calc(100svh - 216px);justify-content:center}
.gallery.flat-mode main{justify-content:flex-start}
.gallery.flat-mode .flat-gallery{grid-template-columns:repeat(4,var(--card-w));gap:32px 28px;padding:10px 0 34px;max-width:100%}
.gallery.flat-mode .flat-card-entry,.gallery.flat-mode .flat-card-entry:nth-child(4),.gallery.flat-mode .flat-card-entry:nth-child(5),.gallery.flat-mode .flat-card-entry:last-child{grid-column:auto;justify-self:auto}
.gallery footer,.gallery.flat-mode footer{position:relative;padding:12px 40px 76px}
.gallery .controls{padding:8px 14px;border-radius:999px;background:var(--page);border:1px solid var(--line)}
@media(max-width:1000px){.gallery .collection-sidebar{margin-inline:24px;gap:16px;grid-template-columns:204px minmax(0,1fr)}.gallery main,.gallery.flat-mode main{padding-inline:24px}.gallery.flat-mode .flat-gallery{gap:28px 20px}}
@media(max-width:760px){
 .gallery .collection-sidebar{margin:18px 20px 0;grid-template-columns:1fr;gap:12px}
 .gallery .collection-sidebar .view-section{display:flex;align-items:center;gap:12px}
 .gallery .view-section .sidebar-heading{margin:0;flex:none}.gallery .view-toggle{flex:1}
 .gallery .collection-section .sidebar-heading{margin-bottom:6px}
 .gallery main,.gallery.flat-mode main{padding:24px 20px 90px;min-height:calc(100svh - 286px)}
 .gallery.flat-mode .flat-gallery{grid-template-columns:repeat(2,var(--card-w));gap:24px 18px;padding:8px 0 28px}
 .gallery .card-picker button{padding-inline:10px}.gallery footer,.gallery.flat-mode footer{padding:12px 20px 82px}
}
@font-face{font-family:ShanhaiHan;src:url('assets/han-serif-tc-collection.woff2') format('woff2');font-weight:700;font-display:swap}


.gallery .picker-name{font-family:Inter,ShanhaiHan,'PingFang TC','PingFang SC',serif}

.gallery .fan-navigation{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:19;margin:0}
@media(max-width:760px){.gallery .fan-navigation{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

.gallery .quote,.gallery .han{font-family:Voyage,ShanhaiHan,serif}
/* Promote only moving surfaces, rather than all seventeen idle card layers. */
.gallery .card .rotor,.gallery .card .video{will-change:auto}
.gallery .card[data-motion="active"] .rotor,.gallery .card[data-motion="active"] .video{will-change:transform}

/* A compact index remains reachable while browsing the full collection. */
.gallery .collection-sidebar{position:sticky;top:16px;background:var(--page);border-radius:12px}
.gallery .collection-sidebar .card-picker{gap:4px}
.gallery .collection-sidebar .card-picker button{display:flex;align-items:center;justify-content:center;min-width:36px;width:36px;height:36px;padding:0;font-size:13px;font-weight:500;line-height:1;text-align:center}
@media(max-width:760px){.gallery .collection-sidebar{top:8px}.gallery .collection-sidebar .card-picker button{min-width:34px;width:34px;height:34px}}

/* Contact-style collection index: fixed, quiet and reachable while scrolling. */
.gallery .collection-sidebar{display:block;width:228px;margin-right:0}
.gallery .collection-section{position:fixed;right:14px;top:50%;transform:translateY(-50%);width:30px;z-index:22}
.gallery .collection-section .sidebar-heading{display:none}
.gallery .collection-sidebar .card-picker{display:flex;flex-direction:column;gap:1px;max-height:calc(100svh - 160px);width:30px;padding:6px 2px;overflow-x:hidden;overflow-y:auto;border-radius:15px;border:0;background:var(--page);scrollbar-width:none}
.gallery .collection-sidebar .card-picker::-webkit-scrollbar{display:none}
.gallery .collection-sidebar .card-picker button{width:24px;min-width:24px;height:24px;min-height:24px;padding:0;font-size:11px;line-height:24px;border-radius:50%;background:transparent;color:var(--muted);border:0;box-shadow:none}
.gallery .collection-sidebar .card-picker button[aria-pressed=true]{background:var(--ink);color:var(--page)}
.gallery .collection-sidebar .card-picker button:hover{background:var(--hover);color:var(--ink)}
.gallery .collection-sidebar .card-picker button[aria-pressed=true]:hover{background:var(--ink);color:var(--page)}
.gallery main,.gallery.flat-mode main{padding-left:52px;padding-right:52px}
@media(min-width:1001px){.gallery.inspector-open .collection-section{right:378px}}
@media(max-width:1000px){.gallery main,.gallery.flat-mode main{padding-left:36px;padding-right:36px}}
@media(max-width:760px){
 .gallery .collection-sidebar{width:auto;margin-right:38px}
 .gallery .collection-section{right:6px;width:22px}
 .gallery .collection-sidebar .card-picker{width:22px;padding:4px 1px;max-height:calc(100svh - 140px)}
 .gallery .collection-sidebar .card-picker button{width:20px;min-width:20px;height:20px;min-height:20px;line-height:20px;font-size:10px}
 .gallery main,.gallery.flat-mode main{padding-left:26px;padding-right:38px}
}