/* Studio Wall: oversized name as masthead, a loose masonry wall of works with gallery labels, CV list, contact. */
:root{
  --paper:#ECEEEA; --surface:#F6F7F4; --ink:#191C1B; --muted:#5E6661; --rule:#CBD0CB;
  --pigment:#2338C4; --sold:#C42323;
  --display:"Gloock", "Bodoni 72", Didot, Georgia, serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --label:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px,4vw,56px);
}
@media (prefers-color-scheme: dark){:root{
  --paper:#121514; --surface:#1A1E1C; --ink:#E7EAE6; --muted:#9AA39D; --rule:#2F3532;
  --pigment:#8C9BFF; --sold:#FF6B6B; color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:var(--gutter);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--pigment);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:1320px;margin-inline:auto}
.h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4.5vw,3.25rem);line-height:1;margin:0;text-wrap:balance}

/* header */
header.top{position:sticky;top:0;z-index:5;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--rule)}
.admin-bar header.top{top:32px}
@media (max-width:782px){.admin-bar header.top{top:46px}}
@media (max-width:600px){.admin-bar header.top{top:0}}
.mark{font-family:var(--display);font-size:1.35rem;text-decoration:none;letter-spacing:.01em}
nav.links{display:flex;gap:clamp(14px,3vw,32px);flex-wrap:wrap}
nav.links a{font-family:var(--label);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:var(--muted)}
nav.links a:hover{color:var(--ink)}

/* masthead */
.masthead{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;padding-block:clamp(40px,8vw,96px) clamp(32px,5vw,56px)}
.masthead h1{font-family:var(--display);font-weight:400;font-size:clamp(4rem,14vw,11.5rem);line-height:.86;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.masthead h1 span{display:block}
.masthead h1 span:nth-child(2){padding-left:.55em;color:var(--pigment)}
.intro{display:grid;gap:18px;min-width:0}
.intro p{margin:0;max-width:38ch;font-size:1.08rem}
.meta{font-family:var(--label);font-weight:400;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px 20px;flex-wrap:wrap;margin:0}

/* sections */
.sec{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--rule)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{font-family:var(--label);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:none;color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:7px 14px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button[aria-pressed="true"]:hover{color:var(--paper)}

/* wall */
.wall{columns:3 300px;column-gap:clamp(20px,3vw,40px)}
.work{break-inside:avoid;margin:0 0 clamp(28px,4vw,48px);display:grid;gap:12px}
.work button{all:unset;cursor:zoom-in;display:block;overflow:hidden;background:var(--surface)}
.work button:focus-visible{outline:2px solid var(--pigment);outline-offset:4px}
.work img{display:block;width:100%;height:auto;transition:transform .5s ease}
.work button:hover img{transform:scale(1.025)}
.label{display:grid;gap:2px;font-size:.9rem}
.label .t{font-style:italic}
.label .t b{font-style:normal;font-weight:500}
.label .d{font-family:var(--label);font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-size:.72rem;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--muted)}
.status.sold .dot{background:var(--sold);border-color:var(--sold)}
.status.nfs .dot{border-style:dashed}
.empty{padding:32px;border:1px dashed var(--rule);color:var(--muted)}
.empty p{margin:0}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.about.no-img{grid-template-columns:minmax(0,1fr)}
.about figure{margin:0;display:grid;gap:10px}
.about figure img{width:100%;display:block}
.about figcaption{font-family:var(--label);font-size:.72rem;color:var(--muted)}
.about .text{display:grid;gap:18px;min-width:0}
.about .text p{margin:0;max-width:62ch}
.about .lede{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;max-width:26ch}

/* cv */
.cv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,5vw,64px)}
.cv h3{font-family:var(--label);font-weight:500;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.cv ul{list-style:none;margin:0;padding:0}
.cv li{display:grid;grid-template-columns:4.2ch minmax(0,1fr);gap:16px;padding-block:12px;border-top:1px solid var(--rule)}
.cv li:last-child{border-bottom:1px solid var(--rule)}
.cv .y{font-family:var(--label);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.cv .w{font-style:italic}
.cv .w small{display:block;font-style:normal;color:var(--muted);font-size:.86rem}

/* contact */
.contact{display:grid;gap:22px}
.contact .big{font-family:var(--display);font-size:clamp(2rem,6.5vw,5rem);line-height:1;overflow-wrap:anywhere;text-decoration:none}
.contact .big:hover{color:var(--pigment)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--label);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn.ghost{background:none;color:var(--ink)}
.note{color:var(--muted);max-width:56ch;margin:0}
.site-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:28px 40px;border-top:1px solid var(--rule);font-family:var(--label);font-size:.72rem;color:var(--muted)}

/* fallback pages */
.page .prose{max-width:65ch}
.single-work{margin:0 0 24px;display:grid;gap:14px;max-width:900px}

/* lightbox */
dialog.lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:var(--paper);color:var(--ink)}
dialog.lb::backdrop{background:var(--paper)}
.lb-inner{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 20px);gap:16px}
.lb-bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--label);font-size:.76rem;color:var(--muted)}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 18px 50px -20px rgba(0,0,0,.35)}
.lb-foot{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.lb-nav{display:flex;gap:8px}
.icon-btn{font-family:var(--label);background:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;cursor:pointer;font-size:.8rem}
.icon-btn:hover{border-color:var(--ink)}

@media (max-width:760px){
  .masthead,.about{grid-template-columns:minmax(0,1fr)}
  nav.links a.hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work img{transition:none}.work button:hover img{transform:none}}