/* White pages, one wide grotesk (self-hosted, no Google Fonts). Home is full-screen video with a text menu. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 400;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-lat.woff2) format("woff2");unicode-range:U+0020-00FF,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2026,U+2190,U+2192,U+20AC,U+2122}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 400;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-ext.woff2) format("woff2");unicode-range:U+0100-017F}
:root{
  --bg:#ffffff;--ink:#000000;--muted:#777777;--line:#e8e8e8;--on-media:#ffffff;--scrim:rgba(0,0,0,.38);
  --pad:clamp(16px,3vw,40px);--gap:clamp(8px,1.2vw,16px);
  --body:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:300 1rem/1.6 var(--body)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.gut{padding-left:var(--pad);padding-right:var(--pad)}
.disp{font-family:var(--body);font-stretch:125%;font-weight:300;letter-spacing:-.01em}

/* Home */
.home{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:28rem;background:var(--bg);color:var(--on-media)}
.bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bg)}
.bg:empty{background:linear-gradient(160deg,#6f7b86,#a9a29b,#3b4249)}
.vcol{position:relative;overflow:hidden;background:#2a2d31 center/cover no-repeat}
.vcol video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.vcol video.on{opacity:1}
.home::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--scrim),transparent 55%)}
.top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding-top:var(--pad);padding-bottom:var(--pad);color:var(--on-media)}
.name{margin:0;font-size:1.2rem;line-height:1.2}
.name a{text-decoration:none}
.top nav a{text-decoration:none;opacity:.85;padding:.25rem 0;transition:opacity .15s}
.top nav a:hover{opacity:1}
.menu{position:absolute;left:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.1em;padding-bottom:clamp(28px,6vh,64px)}
.menu a{text-decoration:none;font-size:clamp(1.6rem,3.4vw,3.4rem);line-height:1.1;transition:opacity .2s}
.menu a:hover,.menu a:focus-visible{opacity:.65}
@media (max-width:700px){
  .bg{grid-template-columns:1fr}
  .vcol:nth-child(n+2){display:none}
  .menu a{font-size:clamp(1.9rem,9.5vw,2.8rem)}
}

/* Back arrow on every inner page: plain, in the same spot and weight as the name on the home page.
   White with a difference blend, so it reads black on white and flips over photos as you scroll. */
.back{position:fixed;top:var(--pad);left:var(--pad);z-index:12;display:flex;align-items:center;height:1.44rem;color:#fff;mix-blend-mode:difference;text-decoration:none;transition:opacity .15s}
.back svg{display:block;width:26px;height:26px}
.back:hover,.back:focus-visible{opacity:.65}

/* Photo pages */
.gallery{columns:3 320px;column-gap:var(--gap);padding-top:calc(var(--pad) + 3.5rem);padding-bottom:var(--pad)}
.gallery a{display:block;width:100%;margin:0 0 var(--gap);background:var(--line);cursor:zoom-in;break-inside:avoid}
.gallery img{display:block;width:100%;height:auto;max-width:100%;transition:opacity .2s}
.gallery a:hover img{opacity:.88}
.gallery.after-head{padding-top:1.75rem}
@media (max-width:600px){.gallery{columns:2 140px}}

.more{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1.25rem;margin:1.5rem 0 0;padding-bottom:calc(var(--pad)*1.5)}
.more a{font-size:clamp(1.4rem,2.6vw,2.2rem);text-decoration:none;border-bottom:1px solid transparent}
.more a:hover{border-bottom-color:currentColor}
.more .count{color:var(--muted);font-size:.9rem}

/* Show list and show pages */
.shows{list-style:none;margin:0;padding:calc(var(--pad) + 3.5rem) 0 var(--pad);display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:calc(var(--gap)*2) var(--gap)}
.more-shows .shows{padding-top:1rem}
.show{display:block;text-decoration:none}
.show img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--line);transition:opacity .2s}
.show:hover img{opacity:.88}
.show .t{display:block;margin-top:.6rem;font-size:1.05rem;line-height:1.25}
.show .m{display:block;color:var(--muted);font-size:.85rem}
.show-head{padding-top:calc(var(--pad) + 3.5rem);max-width:44rem}
.show-head h1{margin:0;font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1.05}
.show-head p{margin:1rem 0 0}
.facts{display:flex;flex-wrap:wrap;gap:.35rem 2rem;margin:1.25rem 0 0}
.facts div{display:flex;gap:.5rem;font-size:.9rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.more-shows h2{margin:2.5rem 0 0;font-size:1.3rem;font-weight:300}

/* Contact */
.contact{padding-top:5.5rem;padding-bottom:4vh;max-width:36rem}
.contact h1{font-size:2rem;margin:0 0 1rem;line-height:1.1}
.contact p{margin:0 0 .75rem}

/* Photo viewer */
.lb{position:fixed;inset:0;z-index:20;display:none;background:var(--bg);flex-direction:column}
.lb.open{display:flex}
.lb figure{flex:1;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 64px 12px}
.lb img{max-width:100%;max-height:100%;min-height:0;object-fit:contain;animation:lbin .18s ease-out}
.lb figcaption{padding-top:12px;color:var(--muted);font-size:.9rem;min-height:2.2em}
.lb button{position:absolute;background:none;border:0;color:var(--ink);cursor:pointer;font:inherit;font-size:1.6rem;line-height:1;padding:14px}
.lb .x{top:6px;right:10px}
.lb .prev,.lb .next{top:50%;transform:translateY(-50%)}
.lb .prev{left:6px}.lb .next{right:6px}
.lb button:hover{opacity:.55}
@media (max-width:600px){
  .lb figure{padding:56px 8px 64px}
  .lb .prev,.lb .next{top:auto;bottom:8px;transform:none}
}
@keyframes lbin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lb img{animation:none}.gallery img,.show img,.top nav a,.menu a,.back{transition:none}}
body.noscroll{overflow:hidden}

/* Commercial: a cluster of photos per brand */
.brands{display:grid;gap:clamp(2.5rem,6vw,5rem);padding:calc(var(--pad) + 3.5rem) 0 var(--pad)}
.cluster{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cluster a{display:block}
.cluster img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--line)}
.brand h2{margin:.9rem 0 0;font-size:clamp(1.4rem,2.6vw,2.2rem);font-weight:300;line-height:1.1}
.brand h2 a{text-decoration:none}
.brand .line{margin:.4rem 0 0;max-width:40rem;color:var(--muted)}
.brand .all{display:inline-block;margin-top:.6rem;font-size:.9rem;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.brand .all:hover{color:var(--ink);border-bottom-color:currentColor}
@media (max-width:700px){.cluster{grid-template-columns:repeat(2,1fr)}.cluster a:nth-child(n+3){display:none}}

/* Hand-made rows (Personal work): photos side by side in a 12-part grid, stacked photos share a column */
.gallery.rows{columns:auto;display:flex;flex-direction:column;gap:var(--gap)}
.gallery.rows .row{display:flex;gap:var(--gap);align-items:flex-start;justify-content:var(--j,flex-start)}
.gallery.rows .col{flex:0 0 calc((100% - 11 * var(--gap)) * var(--w) / 12 + (var(--w) - 1) * var(--gap));min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.gallery.rows a{margin:0}
@media (max-width:700px){.gallery.rows .row{flex-direction:column}.gallery.rows .col{flex:none;width:100%}}
.gallery a.crop{position:relative;overflow:hidden}

/* Video page */
.vgrid{list-style:none;margin:0;padding:calc(var(--pad) + 3.5rem) 0 var(--pad);display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.vt{display:block;text-decoration:none;color:inherit}
.vt .ph{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--line)}
.vt img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}
.vt:hover img,.vt:focus-visible img{opacity:.85}
.vt .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92)}
.vt .play::after{content:"";position:absolute;left:23px;top:17px;border-left:17px solid #000;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vt .t{display:block;padding-top:.5rem;font-size:1rem}
.vo{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:1rem;overflow:auto}
.vo[hidden]{display:none}
.vbox{width:min(100%,540px);max-height:100%;overflow:auto}
.vx{position:fixed;top:var(--pad);right:var(--pad);z-index:31;font:inherit;color:#fff;background:none;border:0;cursor:pointer;font-size:1.05rem}
@media (max-width:600px){.vgrid{grid-template-columns:repeat(2,1fr)}}