/* The gallery (Nachtrag 11, 4). Values from docs/design-reference/nachtrag-11.
   Without JS: a row that scrolls sideways, every work with its label.
   With JS (html.js): a sticky stage; js/gallery-wall.js sets the height of the
   section, the positions of works, labels and lamps, and moves the strip. */
.gx{position:relative;--gx-h:calc(100svh - var(--gx-top,var(--hd-h,68px)))}
.gx-stage{position:relative;background:#24211c;overflow-x:auto}
.gx-strip{display:flex}
.gx-seg{position:relative;flex:none;display:flex;align-items:flex-end;gap:48px;padding:48px 64px 48px var(--gut)}
.gx-t0{background:#25221d}.gx-t1{background:#1d2226}.gx-t2{background:#2a1f1c}.gx-t3{background:#1e231f}.gx-t4{background:#26241e}.gx-t5{background:#1f1d24}
/* Kobina's chapters (study). */
.gx-k1{background:#2a2620}.gx-k2{background:#14232c}.gx-k3{background:#2e1c17}.gx-k4{background:#1f2420}.gx-k5{background:#1a2228}
.gx-seg::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% -10%,#ffffff10,#0000 60%),repeating-linear-gradient(0deg,#ffffff03 0 2px,#0000 2px 5px);pointer-events:none}
.gx-seg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;background:linear-gradient(#0000,#0008);border-top:1px solid #ffffff10;pointer-events:none}
.gx-title{position:relative;z-index:3;width:min(460px,80vw);flex:none;align-self:flex-start}
.gx-title .mono{color:var(--green);display:block;margin-bottom:14px}
.gx-title h2,.gx-title h3{font-size:clamp(30px,4.4vw,64px);overflow-wrap:break-word}
.gx-title p{font-size:16px;line-height:1.5;color:#e2dfd6;margin:16px 0 0;max-width:24em}
.gx-count{display:block;color:var(--text-dim);margin-top:12px}
.gx-wk{position:relative;z-index:2;flex:none}
.gx-piece{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.gx-piece img{display:block;height:min(320px,50vh);width:auto;max-width:none;box-shadow:0 18px 40px #000c,0 4px 10px #0008;transition:transform .5s}
.gx-wk.round .gx-piece img{border-radius:50%}
.gx-piece:hover img,.gx-piece:focus-visible img{transform:translateY(-4px) scale(1.012)}
.gx-piece:focus-visible{outline:none}
.gx-piece:focus-visible img{outline:2px solid var(--green);outline-offset:6px}
.gx-label{position:relative;z-index:3;margin-top:16px;background:#f2efe6;color:#14130f;padding:9px 11px;font-size:12px;line-height:1.35;width:178px;box-shadow:0 6px 16px #0006;cursor:pointer}
.gx-label b{display:block;font-size:13px}
.gx-label span{display:block}
.gx-label .mono{font-size:12px;letter-spacing:0;line-height:1.35}
.gx-av,.gx-pc{display:inline-flex!important;align-items:center;gap:5px;margin-top:5px;font:500 12px var(--mono);text-transform:uppercase;color:#14130f}
.gx-av{text-decoration:none;border-bottom:1px solid #14130f55}
.gx-av:hover{border-color:#14130f}
.gx-av::before{content:"";width:7px;height:7px;border-radius:50%;background:#3d7f27}
.gx-label :focus-visible{outline-color:#14130f}
.gx-end{position:relative;z-index:3;flex:none;display:block;width:200px;padding:18px;border:1.5px solid #ffffff55;text-decoration:none;font-weight:700;font-size:18px;align-self:center}
.gx-end .mono{display:block;color:var(--green);margin-bottom:6px;font-weight:400}
.gx-end:hover{border-color:var(--green)}

/* ---- with JS: the walk ---- */
.js .gx-stage{position:sticky;top:var(--gx-top,var(--hd-h,68px));height:var(--gx-h);overflow:hidden}
.js .gx-strip{position:absolute;left:0;top:0;bottom:0;will-change:transform}
.js .gx-seg{display:block;height:100%;padding:0;gap:0}
.js .gx-title{position:absolute;left:var(--gut);top:9%}
.js .gx-wk{position:absolute;width:auto}
.js .gx-piece{width:100%;height:100%}
.js .gx-piece img{width:100%;height:100%;object-fit:cover}
.js .gx-label{position:absolute;margin:0}
.js .gx-end{position:absolute;top:50%;transform:translateY(-50%)}
.gx-lamp{position:absolute;top:0;width:36px;height:8px;transform:translateX(-50%);background:#2b2925;border-radius:0 0 8px 8px;z-index:3;box-shadow:0 6px 14px #fff6;pointer-events:none}
.gx-cone{position:absolute;z-index:1;pointer-events:none;top:0;transform:translateX(-50%);height:88%;background:linear-gradient(180deg,#fff4e2 0,#fff4e244 18%,#fff4e214 55%,#0000 92%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);opacity:0;transition:opacity 1.2s;filter:blur(6px)}
.gx-cone.lit{opacity:.32}
/* The first lights are on at once; the fade starts with the walk. */
.gx:not(.gx-ready) .gx-cone,.gx:not(.gx-ready) .gx-spot{transition:none}
.gx-spot{position:absolute;z-index:1;pointer-events:none;top:0;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 62%,#fff1dc55 0%,#fff1dc22 38%,#0000 72%);opacity:0;transition:opacity 1s}
.gx-spot.lit{opacity:1}
.gx-hud{position:absolute;left:var(--gut);right:var(--gut-r);bottom:18px;z-index:6;display:flex;align-items:center;gap:16px}
.gx-bar{position:relative;flex:1;height:22px;cursor:pointer}
.gx-bar::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:#ffffff22}
.gx-bar i{position:absolute;left:0;top:10px;height:2px;background:var(--green);width:0}
.gx-bar button{position:absolute;top:0;width:24px;height:24px;margin-left:-11px;padding:0;background:none;border:0;cursor:pointer;color:var(--text-dim)}
.gx-bar button::before{content:"";position:absolute;left:11px;top:6px;width:2px;height:10px;background:#ffffff55}
.gx-bar button:hover::before,.gx-bar button[aria-current="true"]::before{background:var(--green)}
.gx-bar button span{position:absolute;left:17px;top:-14px;font:400 12px var(--mono);white-space:nowrap;pointer-events:none}
.gx-tick{position:absolute;top:6px;width:2px;height:10px;margin-left:-1px;background:#ffffff33;pointer-events:none}
.gx-bar button[aria-current="true"] span{color:var(--text)}
.gx-hint{font-size:12px;color:var(--text-dim);white-space:nowrap}
@media (max-width:700px){.gx-bar button span,.gx-hint{display:none}.gx-label{width:150px}}
@media (prefers-reduced-motion:reduce){.gx-cone,.gx-spot,.gx-piece img{transition:none}}