/* The gallery wall (Nachtrag 8). Works hang at true size relative to each
   other: every length is a multiple of --cm. Without JS, under 760 px and with
   reduced motion the wall is a native sideways scroller; html.js on larger
   screens turns it into the walk, so nothing shifts when scripts arrive.
   Sizes come as classes from src/lib/wall.js (appended by src/build.js). */
:root{--wall:#1a1915;--wall-2:#121110;--floor:#0b0a09;--plate:#efece4}
html:not(.js) img[data-defer]{display:none}
.o-blue{--ring:var(--blue);--accent:var(--blue-on-ink)}
.o-red{--ring:var(--red);--accent:var(--red-on-ink)}
.o-yellow{--ring:var(--yellow);--accent:var(--yellow)}
.o-green{--ring:var(--green);--accent:var(--green)}

/* ---------- the piece, shared by walk and still wall ---------- */
.gw-hang{--lit:1;flex:none;position:relative}
.gw-piece{position:relative;display:block;width:calc(var(--w) * var(--cm));height:calc(var(--h) * var(--cm));padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.gw-piece:focus-visible{outline-offset:5px}
.gw-spot{position:absolute;left:50%;top:calc(var(--ceil) * -1);width:max(calc(var(--w) * var(--cm) * 1.8),120px);height:calc(var(--ceil) + 120%);transform:translateX(-50%);pointer-events:none;
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  background:linear-gradient(to bottom,rgba(255,232,190,0) 0%,rgba(255,232,190,.07) 45%,rgba(255,232,190,.12) 72%,rgba(255,232,190,0) 100%);opacity:var(--lit)}
.gw-lamp{position:absolute;left:50%;top:calc(var(--ceil) * -1);width:34px;height:10px;transform:translateX(-50%);background:#2b2925;border-radius:0 0 6px 6px;pointer-events:none}
.gw-halo{position:absolute;inset:-35%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,232,190,.26),rgba(255,232,190,0));opacity:var(--lit)}
.gw-art{position:relative;display:block;width:100%;height:100%;transition:transform .35s cubic-bezier(.2,.7,.2,1);box-shadow:0 18px 40px rgba(0,0,0,.6),0 3px 8px rgba(0,0,0,.5);background:var(--ink-2)}
.gw-art img{display:block;width:100%;height:100%;object-fit:cover}
/* Dimming as a veil: brightness .55 to 1 without a filter on every frame. */
.gw-art::after{content:"";position:absolute;inset:0;background:#000;opacity:calc((1 - var(--lit)) * .45);pointer-events:none}
.gw-glare{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.18),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .3s}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .gw-piece:hover .gw-glare,.gw-piece:focus-visible .gw-glare{opacity:1}
}
/* Dark type only: dimmed to .55 the plate still holds 4.5:1. */
.gw-label{position:relative;z-index:2;width:190px;margin:0;padding:10px 12px;background:var(--plate);color:#14130f;font:500 12px/1.45 var(--mono);box-shadow:0 4px 10px rgba(0,0,0,.4);opacity:calc(.46 + var(--lit) * .54)}
.gw-label b{display:block;font:700 13px/1.25 var(--body);margin-bottom:2px}
.gw-label span{display:block;overflow-wrap:anywhere}

/* ---------- A: the walk ---------- */
.gw-a{--H:min(92svh,760px);--cm:calc(var(--H) * .6 / 150);--eye:calc(var(--H) * .4);--rf:clamp(46px,7vh,90px);scroll-margin-top:calc(var(--hd-h,74px) + 48px)}
.gw-walk{position:relative}
.gw-sticky{position:relative;height:var(--H);background:radial-gradient(120% 70% at 50% 30%,var(--wall) 0%,var(--wall-2) 70%);overflow:hidden}
.gw-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(to bottom,#060605 0%,var(--floor) 30%,#050504 100%);border-top:1px solid #2a2823;z-index:0}
.gw-stage{position:absolute;inset:0;z-index:1;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-left:16px;scrollbar-width:none}
.gw-stage::-webkit-scrollbar{display:none}
.gw-track{position:relative;display:flex;height:100%;width:max-content;padding-inline:16px 45vw}
.gw-a .gw-hang{--ceil:calc(var(--eye) - var(--h) * var(--cm) / 2);position:relative;height:100%;width:max(calc(var(--w) * var(--cm)),190px);margin-right:calc(48px + 45 * var(--cm));scroll-snap-align:center}
.gw-a .gw-piece{position:absolute;left:50%;top:var(--eye);transform:translate(-50%,-50%)}
/* The first work starts at the left edge, its plate stays on the stage. */
.gw-a .gw-hang.first{scroll-snap-align:none}
.gw-a .gw-hang.first .gw-piece{left:calc(var(--w) * var(--cm) / 2)}
.gw-a .gw-hang.first .gw-label{left:0;transform:none}
.gw-a .gw-label{position:absolute;left:50%;top:calc(var(--eye) + var(--h) * var(--cm) / 2 + 22px);transform:translateX(-50%)}
/* On the native wall the name takes no width: it runs above the works from the left edge,
   fits the screen, and stays above the figure, whose head is at 10 % of the stage. */
.gw-room{flex:none;align-self:flex-start;width:0;margin-top:6px;color:var(--accent);font:800 min(28px,calc(var(--H) * .036),calc((100vw - 32px) / (var(--rc) * .8)))/1 var(--display);font-stretch:125%;text-transform:uppercase;white-space:nowrap;opacity:.16;pointer-events:none}
.gw-room:first-child{scroll-snap-align:start}
.gw-room br{display:none}
.gw-room small{display:block;font:500 13px var(--mono);letter-spacing:.14em;margin-bottom:4px}
.gw-person{flex:none;position:relative;align-self:flex-end;width:calc(49 * var(--cm));height:calc(175 * var(--cm));margin-right:12px;bottom:20%;pointer-events:none}
.gw-person svg{display:block;width:100%;height:100%;fill:#6b685f;opacity:.32}
.gw-person span{position:absolute;left:100%;bottom:12px;margin-left:10px;font:500 12px var(--mono);color:var(--text-dim);white-space:nowrap}
.gw-hud{position:absolute;left:0;right:0;bottom:4%;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-left:var(--gut);padding-right:var(--gut-r);pointer-events:none}
.gw-where{font:500 12px var(--mono);color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.gw-dots{display:flex;flex-wrap:wrap;justify-content:flex-end;pointer-events:auto}
.gw-dots button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.gw-dots button::after{content:"";position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;border:1px solid #6b685f}
.gw-dots button[aria-current="true"]::after{background:var(--accent);border-color:var(--accent)}

@media (min-width:760px) and (prefers-reduced-motion:no-preference){
  .js .gw-a{--H:100vh;--cm:calc(100vh * .52 / 150);--eye:44vh}
  .js .gw-walk{height:max(100vh + 240px,calc(100vh + var(--lc) * var(--cm) + var(--lp) * 1px + var(--lr) * var(--rf) - 50vw))}
  .js .gw-sticky{position:sticky;top:0}
  .js .gw-stage{overflow:clip;scroll-snap-type:none}
  .js .gw-track{position:absolute;left:0;top:0;padding-inline:5vw 45vw;will-change:transform}
  .js .gw-a .gw-hang{width:calc(var(--w) * var(--cm));margin-right:calc(238px + 45 * var(--cm))}
  .js .gw-a .gw-label{left:calc(100% + 28px);top:max(calc(var(--eye) - 20px),calc(var(--eye) + var(--h) * var(--cm) / 2 - 96px));transform:none}
  .js .gw-room{width:max-content;margin:clamp(130px,18vh,180px) 64px 0 0;font-size:var(--rf)}
  .js .gw-room br{display:inline}
  .js .gw-room small{display:block;margin-bottom:10px}
  .js .gw-person{margin-right:calc(20 * var(--cm))}
  .js .gw-a .gw-hang.first .gw-piece{left:50%}
  .js .gw-a .gw-hang.first .gw-label{left:calc(100% + 28px)}
}

/* ---------- B: the still wall ---------- */
.gw-b{background:radial-gradient(120% 60% at 50% 0%,var(--wall) 0%,var(--wall-2) 80%);padding-block:clamp(56px,7vw,96px);overflow-x:clip}
.gw-wall{--ceil:70px;--cm:min(calc(clamp(560px,100vh,900px) * .52 / 150),calc((min(100vw,1320px) - 64px - 218px) / var(--mw)));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(30 * var(--cm));padding-top:calc(var(--ceil) * .6)}
.gw-wall .gw-hang{display:flex;align-items:flex-end;gap:20px;transition:opacity .4s ease}
.gw-wall .gw-spot,.gw-wall .gw-halo,.gw-wall .gw-art::after{transition:opacity .4s ease}
.js .gw-wall .gw-hang:not(.on){--lit:.25}
.gw-wall .gw-label{flex:none}
@media (max-width:759px){
  .gw-wall{--ceil:28px;--cm:min(2.4px,calc((100vw - 32px) / var(--mw)));gap:36px 16px}
  .gw-wall .gw-lamp{display:none}
  .gw-wall .gw-hang{flex-direction:column;align-items:center;gap:12px;width:max(calc(var(--w) * var(--cm)),164px)}
  .gw-wall .gw-label{width:164px}
}

/* generated: sizes on the walls */
.gw-m-279{--mw:279}
.gw-w-79_6{--w:79.6}
.gw-h-80{--h:80}
.gw-w-79_4{--w:79.4}
.gw-w-140{--w:140}
.gw-h-115_5{--h:115.5}
.gw-w-172{--w:172}
.gw-h-123_8{--h:123.8}
.gw-w-142{--w:142}
.gw-h-94_3{--h:94.3}
.gw-w-101_1{--w:101.1}
.gw-h-107{--h:107}
.gw-w-132_8{--w:132.8}
.gw-h-220{--h:220}
.gw-w-163{--w:163}
.gw-h-152{--h:152}
.gw-w-80{--w:80}
.gw-h-52_8{--h:52.8}
.gw-w-198{--w:198}
.gw-h-165_8{--h:165.8}
.gw-w-120{--w:120}
.gw-h-96_1{--h:96.1}
.gw-h-66_1{--h:66.1}
.gw-w-146{--w:146}
.gw-h-163{--h:163}
.gw-w-279{--w:279}
.gw-h-147_3{--h:147.3}
.gw-w-239{--w:239}
.gw-h-118_8{--h:118.8}
.gw-w-153{--w:153}
.gw-h-134_9{--h:134.9}
.gw-w-201{--w:201}
.gw-h-97_2{--h:97.2}
.gw-w-180{--w:180}
.gw-h-97_5{--h:97.5}
.gw-w-152{--w:152}
.gw-h-98_6{--h:98.6}
.gw-h-79_5{--h:79.5}
.gw-w-183{--w:183}
.gw-h-92_5{--h:92.5}
.gw-w-87_1{--w:87.1}
.gw-h-63_8{--h:63.8}
.gw-w-111_3{--w:111.3}
.gw-h-190{--h:190}
.gw-m-229{--mw:229}
.gw-w-108{--w:108}
.gw-h-136{--h:136}
.gw-w-229{--w:229}
.gw-h-128_8{--h:128.8}
.gw-w-107_7{--w:107.7}
.gw-w-125_9{--w:125.9}
.gw-h-182{--h:182}
.gw-w-89_8{--w:89.8}
.gw-h-91{--h:91}
.gw-w-91{--w:91}
.gw-h-88_6{--h:88.6}
.gw-w-109_5{--w:109.5}
.gw-w-85_5{--w:85.5}
.gw-w-107_5{--w:107.5}
.gw-m-274{--mw:274}
.gw-w-100{--w:100}
.gw-h-99_3{--h:99.3}
.gw-w-151_6{--w:151.6}
.gw-w-99_1{--w:99.1}
.gw-h-100{--h:100}
.gw-w-121_1{--w:121.1}
.gw-h-153{--h:153}
.gw-w-125_7{--w:125.7}
.gw-h-183{--h:183}
.gw-w-124_6{--w:124.6}
.gw-w-124_8{--w:124.8}
.gw-w-99_8{--w:99.8}
.gw-w-60{--w:60}
.gw-w-99_6{--w:99.6}
.gw-w-274{--w:274}
.gw-h-143_3{--h:143.3}
.gw-h-59_9{--h:59.9}
.gw-h-60{--h:60}
.gw-m-125{--mw:125}
.gw-w-124_7{--w:124.7}
.gw-h-147{--h:147}
.gw-m-120{--mw:120}
.gw-m-45{--mw:45}
.gw-w-13_7{--w:13.7}
.gw-h-14{--h:14}
.gw-w-21{--w:21}
.gw-h-53_5{--h:53.5}
.gw-w-22_6{--w:22.6}
.gw-h-29{--h:29}
.gw-w-44_3{--w:44.3}
.gw-h-59_4{--h:59.4}
.gw-m-75{--mw:75}
.gw-w-74_9{--w:74.9}
.gw-w-67{--w:67}
.gw-h-82{--h:82}
.gw-w-70_6{--w:70.6}
.gw-h-85{--h:85}
.gw-w-59_3{--w:59.3}
.gw-w-59_9{--w:59.9}
.gw-w-62_8{--w:62.8}
.gw-m-176{--mw:176}
.gw-w-104_5{--w:104.5}
.gw-h-150{--h:150}
.gw-w-141_4{--w:141.4}
.gw-h-192{--h:192}
.gw-w-119{--w:119}
.gw-w-139_7{--w:139.7}
.gw-h-152_6{--h:152.6}
.gw-w-175_3{--w:175.3}
.gw-w-75_4{--w:75.4}
.gw-h-94{--h:94}
.gw-w-155_2{--w:155.2}
.gw-h-177{--h:177}
.gw-w-145_1{--w:145.1}
.gw-w-132_1{--w:132.1}
.gw-w-137_7{--w:137.7}
.gw-h-151{--h:151}
.gw-m-160{--mw:160}
.gw-w-44_9{--w:44.9}
.gw-h-135{--h:135}
.gw-w-160{--w:160}
.gw-h-63_4{--h:63.4}
.gw-w-101_4{--w:101.4}
.gw-h-102{--h:102}
.gw-w-127{--w:127}
.gw-h-100_6{--h:100.6}
.gw-m-58{--mw:58}
.gw-w-58{--w:58}
.gw-h-76{--h:76}
.gw-w-57_1{--w:57.1}
.gw-w-55_2{--w:55.2}
.gw-m-127{--mw:127}
.gw-w-46{--w:46}
.gw-h-37{--h:37}
.gw-w-61{--w:61}
.gw-h-42_7{--h:42.7}
.gw-h-75_2{--h:75.2}
.gw-m-130{--mw:130}
.gw-w-130{--w:130}
.gw-h-129_9{--h:129.9}
.gw-h-118_9{--h:118.9}
.gw-w-98_2{--w:98.2}
.gw-h-79_4{--h:79.4}
.gw-l-600-1492-7_6{--lc:600;--lp:1492;--lr:7.6}
.gw-c-15{--rc:15}
.gw-l-419-778-7_6{--lc:419;--lp:778;--lr:7.6}
.gw-c-17{--rc:17}
.gw-l-480-778-10_5{--lc:480;--lp:778;--lr:10.5}
.gw-c-18{--rc:18}
.gw-h-71_6{--h:71.6}
.gw-l-1259-2270-16_2{--lc:1259;--lp:2270;--lr:16.2}
.gw-c-13{--rc:13}
.gw-c-28{--rc:28}
.gw-l-1037-1492-11_4{--lc:1037;--lp:1492;--lr:11.4}
.gw-c-22{--rc:22}
.gw-l-3118-4128-55_1{--lc:3118;--lp:4128;--lr:55.1}
.gw-c-11{--rc:11}
.gw-c-9{--rc:9}
.gw-c-10{--rc:10}