:root { --ink: #1a1a1a; --muted: #777; --bg: #fff; --line: #e8e8e8; --gutter: clamp(16px, 4vw, 48px); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 300 15px/1.6 Inter, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--bg); padding: 4px 8px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

header.site { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 32px; padding: 36px var(--gutter) 40px; }
.name { font: 400 clamp(26px, 3.4vw, 34px)/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; }
nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
nav a { color: var(--muted); padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s; }
nav a:hover, nav a[aria-current] { color: var(--ink); border-color: var(--ink); }

main { padding: 0 var(--gutter) 80px; min-height: 60vh; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 56px 40px; align-items: end; }
.grid img { display: block; width: 100%; height: auto; background: #f4f4f4; transition: opacity .25s; }
.piece:hover img { opacity: .88; }
.caption { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.caption .t { display: block; font-style: italic; }
.caption .d { display: block; color: var(--muted); }
.empty { color: var(--muted); font-size: 18px; padding: 15vh 0; text-align: center; font-family: "Cormorant Garamond", serif; }

h1 { font: 400 30px/1.2 "Cormorant Garamond", Georgia, serif; margin: 0 0 24px; }
h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin: 40px 0 12px; }
.about { display: grid; gap: 48px; max-width: 1000px; }
@media (min-width: 800px) { .about:has(.portrait) { grid-template-columns: 2fr 3fr; } }
.portrait { width: 100%; height: auto; }
.about p { max-width: 62ch; }
.cv { list-style: none; padding: 0; margin: 0; }
.cv li { padding: 3px 0; }
.contact { max-width: 600px; font-size: 17px; }
.contact a { border-bottom: 1px solid var(--line); }
.contact a:hover { border-color: var(--ink); }
footer.site { padding: 24px var(--gutter) 40px; color: var(--muted); font-size: 12px; }

.viewer:not([open]) { display: none; }
.viewer { position: fixed; inset: 0; background: rgba(255,255,255,.98); z-index: 20; display: grid; grid-template-rows: 1fr auto; padding: 56px 64px 24px; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.viewer::backdrop { background: rgba(255,255,255,.98); }
.viewer figure { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 0; height: 100%; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; min-height: 0; }
.viewer figcaption { text-align: center; font-size: 13px; padding-top: 16px; }
.viewer figcaption .t { font-style: italic; }
.viewer figcaption .d { color: var(--muted); margin-left: 8px; }
.viewer button { position: absolute; background: none; border: 0; font: 300 28px/1 Inter, sans-serif; color: var(--ink); cursor: pointer; padding: 12px; }
.viewer .close { top: 8px; right: 12px; }
.viewer .prev { left: 8px; top: 50%; transform: translateY(-50%); }
.viewer .next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .viewer { padding: 56px 8px 16px; } .viewer .prev, .viewer .next { top: auto; bottom: 4px; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.studio { margin-top: 72px; max-width: 1000px; }
.studio-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.studio-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }