:root{--wall:#1a1918;--floor:#0f0e0e;--ink:#ece9e2;--mute:#8a867d;--cm:2.6px;--rail:0px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--wall);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
nav.site{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:baseline;gap:28px;padding:22px 32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0))}
nav.site .name{letter-spacing:.24em}
nav.site .gtitle{color:var(--mute);letter-spacing:.2em}
nav.site a.gtitle::after{content:"▾";margin-left:8px;font-size:.8em;opacity:.7}
nav.site .gtitle::before{content:"/";margin-right:14px;opacity:.5}
nav.site .links{display:flex;gap:28px;margin-left:auto}
nav.site a{color:var(--mute);transition:color .2s}
nav.site a:hover,nav.site a.here,nav.site .name{color:var(--ink)}
/* landing */
.landing{height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center}
.landing a{font-size:clamp(15px,2.2vw,22px);letter-spacing:.42em;text-transform:uppercase;font-weight:300;padding:40px}
/* gallery wall */
body.gallery-page{overflow:hidden}
.wall{position:fixed;inset:0;height:100vh;height:100dvh;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;
 background:linear-gradient(to bottom,#121110 0,var(--wall) 22%,#1d1c1a 86.5%,#050505 86.5%,#0b0b0a 87.4%,var(--floor) 100%)}
.wall::-webkit-scrollbar{display:none}
.run{position:relative;height:100%;display:inline-flex;align-items:flex-start;padding:0 calc(var(--cm)*90) 0 calc(var(--cm)*28)}
.intro{position:relative;flex:none;align-self:flex-start;white-space:normal;width:calc(var(--cm)*150);margin-right:calc(var(--cm)*40)}
.intro h1{margin:0 0 .6em;font-weight:300;font-size:calc(var(--cm)*9);letter-spacing:.2em;text-transform:uppercase}
.intro p{margin:0;color:var(--mute);font-size:calc(var(--cm)*4.2);letter-spacing:.08em;line-height:1.6}
.hang{position:relative;flex:none;margin-right:calc(var(--cm)*70);cursor:zoom-in}
.hang::before{content:"";position:absolute;z-index:0;pointer-events:none;left:50%;top:calc(var(--cm)*-75);width:calc(100% + var(--cm)*170);height:calc(100% + var(--cm)*150);transform:translateX(-50%);
 background:radial-gradient(ellipse closest-side at 50% 46%,rgba(255,236,205,.40),rgba(255,236,205,.20) 40%,rgba(255,236,205,.06) 72%,rgba(255,236,205,0) 100%)}
.hang .glow{position:absolute;z-index:0;pointer-events:none;left:50%;width:calc(100% + var(--cm)*90);height:calc(var(--cm)*26);transform:translateX(-50%);
 background:radial-gradient(ellipse closest-side at 50% 50%,rgba(255,238,210,.16),rgba(255,238,210,0) 100%)}
.hang .block{position:relative;z-index:1;width:100%;height:100%;
 /* 2.5 cm deep print lit from above: contact shadow + short soft shadow falling straight down */
 box-shadow:
  0 calc(var(--cm)*.4) calc(var(--cm)*.8) rgba(0,0,0,.75),
  0 calc(var(--cm)*1.8) calc(var(--cm)*3) rgba(0,0,0,.55),
  0 calc(var(--cm)*5) calc(var(--cm)*9) rgba(0,0,0,.40),
  0 calc(var(--cm)*10) calc(var(--cm)*20) rgba(0,0,0,.22)}
.hang img{display:block;width:100%;height:100%;object-fit:cover}
/* visible return edges of the block (right + bottom), seen slightly off-axis */
.hang .block::before,.hang .block::after{content:"";position:absolute;background:inherit}
.hang .block::before{left:100%;top:0;width:max(1px,calc(var(--cm)*.5));height:100%;transform-origin:left top;transform:skewY(45deg);background:linear-gradient(to right,#0c0b0b,#151413)}
.hang .block::after{top:100%;left:0;height:max(1px,calc(var(--cm)*.5));width:100%;transform-origin:left top;transform:skewX(45deg);background:linear-gradient(to bottom,#000,#080808)}
.caption{position:fixed;z-index:20;left:calc(var(--rail) + 34px);right:34px;bottom:26px;display:flex;align-items:baseline;gap:18px;font-size:13px;letter-spacing:.08em;pointer-events:none;transition:opacity .25s}
.caption.fade{opacity:0}
.caption .t{color:var(--ink)}.caption .d{color:var(--mute)}
.caption .n{margin-left:auto;color:var(--mute);font-size:11px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.caption .bar{position:absolute;left:0;right:0;bottom:-12px;height:1px;background:rgba(255,255,255,.1)}
.caption .bar i{display:block;height:100%;width:0;background:var(--ink);opacity:.6}
/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,10,9,.97);display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px;overflow:hidden;overscroll-behavior:contain}
.lb.on{display:flex}
.lb img{max-width:94vw;max-height:82vh;max-height:82dvh;box-shadow:0 30px 90px rgba(0,0,0,.8);cursor:zoom-in;touch-action:none;user-select:none;-webkit-user-drag:none}
.lb.zoomed img{cursor:grab}.lb.zoomed img:active{cursor:grabbing}
.lb p{margin:0;font-size:12px;letter-spacing:.1em;color:var(--mute);position:relative;z-index:2;transition:opacity .2s}
.lb .lbhint{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:-8px}
.lb.zoomed p{opacity:0}
.lbx{position:absolute;top:18px;right:24px;z-index:3;background:rgba(10,10,9,.7);border:0;border-radius:2px;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:10px}
.lbx:hover{background:rgba(10,10,9,.95)}
/* text pages */
main.page{max-width:620px;margin:0 auto;padding:120px 32px 80px calc(var(--rail) + 32px);font-size:16px;line-height:1.7;font-weight:300}
main.page h1{font-weight:300;font-size:14px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 40px}
main.page a{border-bottom:1px solid #55524c}
form label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:22px 0 6px}
form input,form textarea{width:100%;font:inherit;padding:10px 0;border:0;border-bottom:1px solid #4a4741;background:transparent;color:var(--ink);outline:none}
form textarea{min-height:130px;resize:vertical}
form button{margin-top:30px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:12px 28px;background:var(--ink);color:var(--wall);border:0;cursor:pointer}
@media(max-width:700px){nav.site{padding:16px 16px;gap:12px;font-size:9.5px;letter-spacing:.1em}nav.site .name{letter-spacing:.12em}nav.site .links{gap:12px}nav.site .gtitle{display:none}.caption{left:16px;right:16px;bottom:20px;font-size:11.5px;gap:10px}}
.grain{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* music wall */
.music-page .run{padding-right:calc(var(--cm)*60)}
a.hang{display:block;cursor:pointer}
.hang.feature{margin-right:calc(var(--cm)*22)}
.mtext{flex:none;white-space:normal;width:calc(var(--cm)*95);margin-right:calc(var(--cm)*45)}
.mtext h1{margin:0 0 calc(var(--cm)*5);font-weight:300;font-size:max(15px,calc(var(--cm)*8));letter-spacing:.06em}
.mtext p{margin:0 0 calc(var(--cm)*2.5);color:var(--mute);font-size:max(11px,calc(var(--cm)*4.2));letter-spacing:.06em;line-height:1.5}
.mtext p.rel{color:var(--ink)}
.mtext .go{margin-top:calc(var(--cm)*8);display:flex;flex-direction:column;gap:calc(var(--cm)*3);align-items:flex-start}
.mtext .go a{color:var(--ink);font-size:max(10px,calc(var(--cm)*3.6));letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid #55524c;padding-bottom:3px}
.mtext .go a:hover{border-color:var(--ink)}
.shelf{position:relative;flex:none;display:flex;gap:calc(var(--cm)*26);padding:0 calc(var(--cm)*18);margin-right:calc(var(--cm)*70)}
.shelf::before{content:"";position:absolute;z-index:0;pointer-events:none;left:-12%;right:-12%;top:calc(var(--cm)*-70);bottom:calc(var(--cm)*-60);
 background:radial-gradient(ellipse closest-side at 50% 50%,rgba(255,236,205,.32),rgba(255,236,205,.14) 45%,rgba(255,236,205,0) 100%)}
.plank{position:absolute;left:0;right:0;top:100%;height:max(3px,calc(var(--cm)*2.4));background:linear-gradient(to bottom,#6b6358,#2c2925);
 box-shadow:0 calc(var(--cm)*3) calc(var(--cm)*6) rgba(0,0,0,.6),0 calc(var(--cm)*12) calc(var(--cm)*22) rgba(0,0,0,.4)}
.sleeve{position:relative;z-index:1;flex:none;height:100%;perspective:900px}
.sleeve .cover{display:block;width:100%;height:100%;transform-origin:50% 100%;transform:rotateX(-7deg);transition:transform .35s ease,box-shadow .35s ease;
 box-shadow:0 calc(var(--cm)*-1) calc(var(--cm)*8) rgba(0,0,0,.55),calc(var(--cm)*2) 0 calc(var(--cm)*6) rgba(0,0,0,.35)}
.sleeve.dark .cover{outline:1px solid rgba(255,255,255,.14);outline-offset:-1px}
.sleeve .cover img{display:block;width:100%;height:100%;object-fit:cover}
.sleeve:hover .cover,.sleeve .cover:focus-visible{transform:rotateX(6deg) translateY(calc(var(--cm)*-2));box-shadow:0 calc(var(--cm)*6) calc(var(--cm)*14) rgba(0,0,0,.6)}
.tag{position:absolute;left:0;right:calc(var(--cm)*-20);top:calc(100% + var(--cm)*9);white-space:normal;font-size:max(9.5px,calc(var(--cm)*3.3));letter-spacing:.05em;line-height:1.45}
.tag a{color:var(--ink);display:block}.tag a:hover{text-decoration:underline}
.tag span{display:block;color:var(--mute)}
.walltext{position:relative;flex:none;display:block;white-space:nowrap;padding:0 calc(var(--cm)*30) 0 calc(var(--cm)*10)}
.walltext::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:calc(var(--cm)*-70) calc(var(--cm)*-30);
 background:radial-gradient(ellipse closest-side at 50% 50%,rgba(255,236,205,.26),rgba(255,236,205,.10) 50%,rgba(255,236,205,0) 100%)}
.walltext span{position:relative;z-index:1;display:block}
.walltext .pre,.walltext .post{color:var(--mute);font-size:max(10px,calc(var(--cm)*3.6));letter-spacing:.2em;text-transform:uppercase;transition:color .25s}
.walltext .big{margin:calc(var(--cm)*6) 0 calc(var(--cm)*8);font-weight:200;font-size:calc(var(--cm)*26);line-height:1;letter-spacing:-.01em;color:#d9d5cc;transition:color .25s}
.walltext:hover .big{color:#fff}.walltext:hover .post{color:var(--ink)}
/* index wall: one lead print per gallery */
.gdoor{position:relative;flex:none;display:inline-flex;align-items:flex-start;margin-right:calc(var(--cm)*60);cursor:pointer}
.gdoor .hang{margin-right:calc(var(--cm)*16);cursor:pointer}
.gtext{flex:none;white-space:nowrap}
.gtext span{display:block}
.gtext .big{font-weight:200;font-size:calc(var(--cm)*13);line-height:1.1;color:#d9d5cc;transition:color .25s}
.gtext .post{margin-top:calc(var(--cm)*4);color:var(--mute);font-size:max(10px,calc(var(--cm)*3.4));letter-spacing:.2em;text-transform:uppercase}
.gdoor:hover .big{color:#fff}
/* gallery picker */
.pick{position:fixed;inset:0;z-index:60;background:rgba(12,12,11,.99);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pick.on{display:block}
.pickin{max-width:560px;margin:0 auto;padding:90px 24px 60px}
.pickin .pre{margin:0 0 22px;color:var(--mute);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.prow{display:flex;align-items:center;gap:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--ink)}
.prow:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.prow img{width:64px;height:64px;object-fit:cover;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.prow b{display:block;font-weight:300;font-size:22px;line-height:1.15}
.prow i{display:block;font-style:normal;margin-top:5px;color:var(--mute);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.prow.now b::after{content:"  · viewing";color:var(--mute);font-size:12px;letter-spacing:.1em}
.prow:hover b{color:#fff}
.gbtn{pointer-events:auto;margin-left:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.45);border-radius:2px;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;cursor:pointer}
.gbtn:hover{border-color:var(--ink)}
nav.site a.gtitle{cursor:pointer}
@media(max-width:700px){.gbtn{margin-left:10px;padding:8px 10px;font-size:10px}.caption .d{display:none}.pickin{padding:80px 20px 40px}.prow b{font-size:19px}}
/* end-of-wall gallery choice */
.wallpick .big{cursor:pointer}
.wallpick .glist{display:block;margin-top:calc(var(--cm)*10);border-top:1px solid rgba(255,255,255,.12);padding-top:calc(var(--cm)*4)}
.wallpick .glist a{display:flex;align-items:baseline;gap:18px;padding:calc(var(--cm)*2.6) 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--ink)}
.wallpick .glist b{font-weight:300;font-size:max(14px,calc(var(--cm)*5.6));letter-spacing:.02em;transition:color .2s}
.wallpick .glist i{font-style:normal;color:var(--mute);font-size:max(9px,calc(var(--cm)*3));letter-spacing:.18em;text-transform:uppercase}
.wallpick .glist a:hover b{color:#fff}
.wallpick .glist a.now b{color:var(--mute)}.wallpick .glist a.now b::after{content:" · viewing";font-size:.7em;letter-spacing:.1em}
@media(max-width:700px){.run{padding-right:24px}.wallpick{padding-left:0;padding-right:24px}.wallpick .big{font-size:calc(var(--cm)*18)}.wallpick .glist b{font-size:15px}}
@media(max-width:700px){.wallpick{width:calc(100vw - 48px);white-space:normal}.wallpick .glist a{flex-direction:column;align-items:flex-start;gap:3px}}
@media(max-width:700px){.wallpick::before{right:0;left:-20px}}