@font-face{font-family:Williwaw;src:url('../assets/fonts/williwaw-book.otf');font-display:swap}
:root{--serif:Williwaw,Georgia,serif;--light:#fff;--muted:#c6c6c6;--pink:#e0115f;--marker:'Permanent Marker',cursive;--type:'Special Elite',monospace;--hand:'Caveat',cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--light);font:16px/1.6 Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ph{opacity:.6;font-style:italic}
body:has(dialog[open]){overflow:hidden}


/* The page opens on the four collections. */
.w-intro{padding:14svh 5vw 12svh}
.w-intro h1{font:400 clamp(64px,10vw,180px)/.9 var(--serif);margin:0 0 6svh;letter-spacing:-.015em}
.w-index{list-style:none;margin:0 0 0 18vw;padding:0;display:flex;flex-wrap:wrap;gap:10px 5vw;font:clamp(20px,1.8vw,28px)/1.3 var(--serif)}
.w-index a{text-decoration:none;border-bottom:1px solid #ffffff40;padding-bottom:4px}
.w-index a:hover{border-color:currentColor}

/* Landing: four doors side by side, each already in its own collection's world. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.doors{display:flex;height:calc(100svh - 76px)}
.door{position:relative;flex:1;overflow:hidden;transition:flex .7s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;justify-content:flex-end;padding:4vh 2vw;text-decoration:none}
.doors:hover .door{flex:.8}.doors .door:hover,.doors .door:focus-visible{flex:1.9}
.door>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.door:hover>img{transform:scale(1.04)}
.door h2{position:relative;margin:0;white-space:nowrap}
.door .cnt{position:relative;margin-top:8px;font:12px/1.4 Arial;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.d1{background:#000}.d1>img{opacity:.8}.d1 h2{font:400 clamp(28px,2.6vw,46px)/1 var(--serif)}
.d2{background:#0b0b0b}.d2>img{filter:grayscale(1) contrast(1.2);opacity:.75}
.d2 h2{font:900 clamp(26px,2.6vw,48px)/.9 Arial;text-transform:uppercase;letter-spacing:-.02em}
.d2 .tag{position:relative;align-self:flex-start;background:#fff;color:#000;font:700 10px Arial;letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;margin-top:10px}
.d3{background:#000}.d3>img{object-fit:contain;padding:10vh 2vw 22vh}.d3 h2{font:italic 400 clamp(26px,2.4vw,44px)/1 var(--serif)}
.d4{background:#f2f2f2 repeating-linear-gradient(#0000 0 31px,#c9d6e3 31px 32px);color:#111;box-shadow:inset 52px 0 0 -50px #e8a3a3}
.d4>img{inset:12% 14% auto;width:72%;height:auto;object-fit:contain;background:#fff;padding:8px 8px 26px;box-shadow:0 10px 24px #0003;transform:rotate(-2.5deg)}
.d4:hover>img{transform:rotate(-1deg) scale(1.03)}
.d4 h2{font:400 clamp(26px,2.4vw,44px)/1 var(--marker);white-space:normal;text-wrap:balance}.d4 h2 span{background:var(--pink);color:#fff;padding:0 6px}

/* Untitled 1: a lookbook on black; paintings edge to edge at full height. */
.c1{background:#000;padding:12svh 0 6svh}
.c1-head{padding:0 5vw 8svh;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.c1 h1{font:400 clamp(40px,5vw,84px)/1 var(--serif);margin:0}
.c1 .lead{max-width:42ch;color:var(--muted);font:17px/1.7 var(--serif)}
.c1-row{display:flex}
.c1-row img{height:92svh;width:auto;flex:1 1 auto;object-fit:cover;min-width:0}
.c1-caps{display:flex;justify-content:space-between;padding:12px 5vw 7svh;font:14px var(--serif);color:var(--muted)}

/* Urban Decay: work pressed together like flyposters; then the same works as a cold file. */
.ud-wall-wrap{background:#0b0b0b;padding:12svh 3vw 16svh;overflow:hidden}
.ud-title{font:900 clamp(60px,11vw,200px)/.82 Arial Black,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.04em;margin:0 0 2svh;color:#f2f2f2}
.ud-origin{font:700 15px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:#f2f2f2;color:#0b0b0b;display:inline-block;padding:4px 10px;margin-bottom:4svh}
.ud .lead{max-width:48ch;color:#bdbdbd;font:16px/1.7 Arial,sans-serif;margin-bottom:8svh}
.ud-wall{display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:10vw}
.ud-wall figure{margin:0;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0b0b0b}
.ud-wall img{width:100%;height:100%;object-fit:cover}
.ud-wall .lbl{position:absolute;left:0;bottom:10px;background:#0b0b0b;color:#f2f2f2;font:700 11px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em;padding:5px 8px}
.ud-wall .t1{transform:rotate(-1.2deg)}.ud-wall .t2{transform:rotate(.9deg)}.ud-wall .t3{transform:rotate(-.6deg) translateY(-8px)}
.ud-file{background:#f2f2f2;color:#111;padding:12svh 5vw 14svh}
.ud-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,250px));justify-content:center;gap:26px 18px}
.ud-grid figure{margin:0}.ud-grid img{aspect-ratio:1;object-fit:cover;width:100%;background:#ddd}
.ud-grid figcaption{font:12px/1.4 "Courier New",monospace;margin-top:8px;display:flex;justify-content:space-between;border-top:1px solid #111;padding-top:6px}

/* Untitled 2: oxblood; each painting preceded by a page holding only its title. */
.c2{background:#000;color:#fff}
.c2-head{padding:16svh 8vw 10svh;text-align:center}
.c2 h1{font:400 clamp(40px,5vw,84px)/1.05 var(--serif);margin:0}
.c2 .lead{max-width:46ch;margin:3svh auto 0;color:#c6c6c6;font:18px/1.75 var(--serif)}
.c2-tp{min-height:70svh;display:flex;align-items:center;justify-content:center;font:italic clamp(34px,4vw,64px)/1.1 var(--serif);text-align:center;padding:0 8vw}
.c2-pp{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:4svh 0}
.c2-pp img{max-height:88svh;width:auto;box-shadow:0 30px 80px #0008}

/* Homeless scribbles: the journal page across the full width; drawings taped on and free to move. */
.hs{position:relative;background:#f2f2f2 repeating-linear-gradient(transparent 0 31px,#c9d6e3 31px 32px);color:#1a1a1a;padding:12svh 5vw 10svh;overflow:hidden}
.hs::before{content:'';position:absolute;top:0;bottom:0;left:7vw;border-left:2px solid #e8a3a3}
.hs-title{font:400 clamp(48px,7vw,120px)/.95 var(--marker);margin:0 0 0 5vw;transform:rotate(-2deg)}
.hs-title span{background:var(--pink);color:#fff;padding:0 .15em;display:inline-block;transform:rotate(3deg)}
.hs-lead{max-width:44ch;margin:5svh 0 2svh 9vw;font:18px/1.9 var(--type)}
.hs-hint{max-width:50vw;margin:0 0 4svh 9vw;font:22px/1.3 var(--hand);color:var(--pink)}
.hs-board{position:relative;height:44vw}
.hs-sheet{position:absolute;width:17.3vw;background:#fff;padding:10px 10px 40px;box-shadow:0 10px 26px #0003;cursor:grab;touch-action:none;transform:rotate(var(--rot,0deg)) scale(var(--s,1));transform-origin:center;transition:box-shadow .3s}
.hs-sheet.held{cursor:grabbing;box-shadow:0 26px 50px #0005}
.hs-sheet::before,.hs-sheet::after{content:'';position:absolute;width:92px;height:28px;background:#f6f6f6cc;top:-12px;box-shadow:0 1px 2px #0001;pointer-events:none}
.hs-sheet::before{left:-18px;transform:rotate(-32deg)}.hs-sheet::after{right:-18px;transform:rotate(28deg)}
.hs-sheet img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.hs-sheet span{position:absolute;left:14px;bottom:8px;font:18px var(--marker);color:#222}

/* The notebook: one page at a time, turned by the visitor. Always opens on the drawing chosen. */
dialog.nb{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100svh;max-height:none;background:#111;color:#f2f2f2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:3svh}
dialog.nb[open]{display:flex}
dialog.nb::backdrop{background:#000a}
.nb-book{position:relative;height:80svh;aspect-ratio:.76;perspective:1600px}
.nb-pg{position:absolute;inset:0;background:#f2f2f2 repeating-linear-gradient(transparent 0 27px,#c9d6e3 27px 28px);padding:5%;box-shadow:0 20px 50px #0007;display:flex;align-items:center;justify-content:center;transform-origin:left center;transition:transform 1.1s cubic-bezier(.42,0,.25,1),opacity 1.1s}
.nb-pg img{max-height:100%;width:auto}
.nb-pg.gone{transform:rotateY(-100deg);opacity:0;pointer-events:none}
.nb-ctl{display:flex;gap:28px;font:15px var(--type);align-items:center}
.nb-ctl button{text-decoration:underline;text-underline-offset:5px}
#nbCount{color:#9d9d9d}

@media(max-width:750px){
 .ud-grid{grid-template-columns:1fr}
 .doors{flex-direction:column;height:auto}.door{min-height:52svh;flex:none!important;padding:5svh 6vw}
 .d4>img{width:56%;inset:8% auto auto 22%}
 .w-index{margin-left:0;flex-direction:column}
 .c1-row{flex-direction:column}.c1-row img{height:auto;width:100%}
 .ud-wall{grid-template-columns:repeat(4,1fr);grid-auto-rows:22vw}
 .c2-pp img{max-height:none;width:88vw}
 .hs-lead,.hs-hint{margin-left:6vw}.hs-hint{max-width:none}
 .hs-board{height:auto}.hs-sheet{position:relative!important;left:auto!important;top:auto!important;width:86%;margin:0 auto 8svh;--s:1!important;touch-action:auto;cursor:pointer}
 .hs-hint .wheel{display:none}
 .nb-book{height:auto;width:88vw}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Work index: four equal collection panels, composed as a calm two-by-two spread. */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(360px,44vw));height:auto;gap:1px;background:color-mix(in srgb,var(--light) 20%,transparent)}
.doors:hover .door,.doors .door:hover,.doors .door:focus-visible{flex:initial}
.door{min-height:0;padding:clamp(24px,4vw,64px);transition:filter .35s ease}
.doors:hover .door{filter:brightness(.86)}
.doors .door:hover,.doors .door:focus-visible{filter:brightness(1)}
.door>img{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.door:hover>img{transform:scale(1.025)}
.d1>img,.d2>img,.d3>img,.d4>img{object-fit:cover;padding:0}
.d3>img{object-position:center 35%}
.d4>img{inset:0;width:100%;height:100%;background:none;padding:0;box-shadow:none;transform:none}
.d4:hover>img{transform:scale(1.025)}
.door h2{white-space:normal;text-wrap:balance;text-shadow:0 2px 20px #0008}
.d1 h2,.d3 h2,.d4 h2{font:400 clamp(34px,4vw,72px)/1 var(--serif)}
.d2 h2{font:400 clamp(34px,4vw,72px)/1 var(--serif);letter-spacing:0;text-transform:none}
.d2>img{filter:none;opacity:.76}
.d2 .tag{font:var(--type-caption,14px)/1.4 var(--font-interface,Arial);letter-spacing:.04em;text-transform:none;padding:0;background:transparent;color:inherit}
.d4 h2 span{background:none;color:inherit;padding:0}
.door .cnt{font-size:var(--type-label,13px);letter-spacing:.11em}
@media(max-width:750px){.doors{grid-template-columns:1fr;grid-template-rows:none}.door{min-height:64svh;padding:32px 7vw}.doors:hover .door{filter:none}}
/* Homeless Scribbles keeps its interactive notebook, within the site's quieter visual language. */
.hs{background:var(--theme-paper,#fff);color:var(--theme-ink,#000);padding:clamp(84px,12svh,150px) clamp(24px,8vw,120px) 12svh}
.hs::before{display:none}
.hs-title{margin:0;font:400 clamp(48px,7vw,112px)/.98 var(--serif);letter-spacing:-.025em;transform:none}
.hs-title span{display:inline;background:none;color:inherit;padding:0;transform:none}
.hs-lead{max-width:54ch;margin:clamp(24px,4svh,48px) 0 12px;font:var(--type-body,20px)/1.65 var(--serif)}
.hs-hint{max-width:54ch;margin:0 0 clamp(40px,7svh,80px);font:var(--type-caption,16px)/1.55 var(--font-interface,Arial);color:var(--theme-muted,#666)}
.hs-sheet{border:1px solid color-mix(in srgb,var(--theme-ink,#000) 12%,transparent);padding:8px 8px 34px;box-shadow:0 8px 24px #0002;transition:box-shadow .3s,transform .3s}
.hs-sheet::before,.hs-sheet::after{display:none}
.hs-sheet span{font:13px/1 var(--font-interface,Arial);color:var(--theme-muted,#666)}
.hs-sheet.held{box-shadow:0 18px 38px #0003}
html[data-theme="dark"] .hs{background:#000;color:#fff}
html[data-theme="dark"] .hs-hint{color:#c6c6c6}
html[data-theme="dark"] .hs-sheet{background:#111;border-color:#ffffff24}
@media(max-width:750px){.hs{padding:80px 7vw}.hs-title{font-size:clamp(44px,12vw,68px)}.hs-sheet{width:86%;padding:8px 8px 34px}}