:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #eee; background: #000; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
a:hover, .contact-trigger:hover { color: #aaa; }
:focus-visible { outline: 2px solid #aaa; outline-offset: 6px; }
.skip-link { position: fixed; top: -60px; left: 20px; padding: 12px; background: #000; z-index: 60; }
.skip-link:focus { top: 12px; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; padding: 62px 35px 30px 48px; display: flex; flex-direction: column; background: #000; }
.wordmark { font-size: 27px; line-height: 1.07; font-weight: 700; letter-spacing: .08em; }
.discipline { color: #8a8a8a; font-size: 10px; letter-spacing: .09em; margin: 17px 0 54px; }
nav { font-size: 12px; line-height: 1.6; }
nav a { display: block; width: fit-content; padding: 5px 0; color: #aaa; }
nav [aria-current="page"] { color: #fff; }
.nav-categories { margin: 19px 0 25px; }
.nav-categories a { font-size: 14px; font-weight: 700; }
.contact-trigger { border: 0; padding: 5px 0; background: none; color: #aaa; font-size: 12px; }
.sidebar-footer { margin-top: auto; padding-top: 50px; color: #999; font-size: 9px; line-height: 1.9; }
.sidebar-footer p { margin: 0 0 16px; }
.admin-link { color: #aaa; }
.menu-toggle { display: none; }
.menu-intro, .menu-backdrop { display: none; }
.work { margin-left: 260px; padding: 62px 52px 70px 22px; max-width: 1900px; }
.work-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.work-heading h1 { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .035em; }
.work-heading > span { color: #999; font-size: 10px; }
.image-grid { columns: 2; column-gap: 28px; }
figure { margin: 0 0 45px; min-width: 0; break-inside: avoid; }
.work-image { display: block; background: #111; }
.work-image img { display: block; width: 100%; height: auto; transition: filter 180ms ease; }
@media (hover: hover) {
    .work-image:hover img { filter: brightness(.85); }
}
@media (prefers-reduced-motion: reduce) {
    .work-image img { transition: none; }
}
figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; line-height: 1.5; padding-top: 12px; color: #aaa; }
.work-category { color: #aaa; flex-shrink: 0; }
.empty-state { padding: 18vh 0; }
.empty-state h2 { font-weight: 400; font-size: 28px; }
.empty-state p, .empty-state a { font-size: 13px; color: #888; }
dialog { color-scheme: dark; border: 0; color: #eee; background: #000; }
dialog::backdrop { background: rgba(0,0,0,.97); }
body:has(dialog[open]) { overflow: hidden; }
.viewer { position: fixed; inset: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: #000; padding: 65px 100px 36px; }
.viewer[open] { display: flex; align-items: center; justify-content: center; }
.viewer-content { width: 100%; max-width: 1400px; }
#viewer-image { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100dvh - 210px); margin: 0 auto; object-fit: contain; }
.viewer-close, .viewer-prev, .viewer-next, .contact-close { position: absolute; border: 0; background: none; }
.viewer-close { right: 35px; top: 25px; font-size: 11px; }
.viewer-close span { margin-left: 16px; font-size: 22px; vertical-align: middle; }
.viewer-prev, .viewer-next { top: 45%; padding: 15px; font-size: 25px; }
.viewer-prev { left: 20px; }.viewer-next { right: 20px; }
.viewer-caption { display: flex; justify-content: space-between; gap: 25px; padding-top: 22px; font-size: 11px; line-height: 1.6; }
.viewer-caption h2 { font-size: 12px; font-weight: 400; margin: 0; }
.viewer-caption p { margin: 5px 0; color: #888; }
#viewer-counter { color: #888; white-space: nowrap; }
#viewer-buy { text-decoration: underline; }
.contact-dialog { padding: 48px; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); }
.contact-dialog::backdrop { background: rgba(0,0,0,.85); }
.contact-close { right: 18px; top: 12px; font-size: 26px; }
.eyebrow { font-size: 10px; color: #888; margin: 0 0 35px; }
.contact-dialog h2 { font-size: 28px; font-weight: 400; margin: 0 0 18px; }
.about-copy { font-size: 13px; line-height: 1.9; color: #aaa; margin-bottom: 32px; }
label { display: block; font-size: 11px; margin: 22px 0 8px; }
input, textarea { width: 100%; padding: 11px; background: #111; color: #eee; border: 1px solid #555; border-radius: 0; font-size: 14px; }
textarea { resize: vertical; }
.submit-button { border: 0; background: #eee; color: #111; padding: 13px 20px; font-size: 11px; margin-top: 20px; }
.submit-button:disabled { opacity: .5; cursor: wait; }
#contact-status { font-size: 12px; line-height: 1.7; }
@media(min-width: 1600px) { .sidebar { width: 300px; padding-left: 65px; }.work { margin-left: 300px; padding-right: 70px; }.image-grid { column-gap: 36px; }figure { margin-bottom: 50px; } }
@media(max-width: 1000px) { .sidebar { width: 210px; padding-left: 30px; }.work { margin-left: 210px; padding-right: 30px; }.image-grid { column-gap: 20px; }figure { margin-bottom: 32px; }.work-category { display: none; } }
@media(max-width: 650px) {
    body { background: #000; color: #eee; }
    .sidebar { position: relative; width: 100%; padding: 27px 24px 33px; background: #000; }
    .wordmark { display: block; width: fit-content; max-width: calc(100% - 58px); font-size: 15px; line-height: 1.15; letter-spacing: 0; }
    .name-break { display: none; }
    .discipline { margin: 0; max-width: calc(100% - 58px); color: #eee; font-size: 15px; line-height: 1.15; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
    .menu-toggle { display: flex; align-items: center; justify-content: center; position: absolute; z-index: 42; right: 14px; top: 24px; width: 44px; height: 44px; border: 0; background: none; color: #fff; padding: 12px; }
    .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 3px; background: currentColor; position: absolute; transition: transform 220ms ease; }
    .menu-icon::before, .menu-icon::after { content: ''; left: 0; }
    .menu-icon::before { transform: translateY(-7px); }.menu-icon::after { transform: translateY(7px); }
    .menu-toggle[aria-expanded="true"] { position: fixed; color: #222; }
    .menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
    .menu-toggle[aria-expanded="true"] .menu-icon::before { transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }
    .menu-backdrop { display: block; position: fixed; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(255,255,255,.75); z-index: 40; visibility: hidden; opacity: 0; transition: opacity 220ms ease, visibility 220ms; }
    nav { display: block; position: fixed; inset: 0 auto 0 0; z-index: 41; width: 83%; height: 100dvh; padding: 85px 24px 36px; overflow-y: auto; overscroll-behavior: contain; background: #000; color: #fff; visibility: hidden; transform: translateX(-100%); transition: transform 220ms ease, visibility 220ms; }
    nav.is-open { visibility: visible; transform: translateX(0); }
    .menu-open { overflow: hidden; }
    .menu-open .menu-backdrop { visibility: visible; opacity: 1; }
    .menu-intro { display: block; font-size: 12px; line-height: 1.4; font-weight: 400; margin: 0 0 36px; text-transform: uppercase; max-width: 180px; }
    nav a, .nav-categories a, .contact-trigger { font-size: 19px; font-weight: 700; line-height: 1.35; color: #fff; padding: 11px 0; }
    nav [aria-current="page"] { color: #aaa; }
    .nav-categories { margin: 0; }.contact-trigger { text-align: left; }
    .sidebar-footer { display: none; }
    .work { margin-left: 0; padding: 0 24px 36px; }.work-heading { display: none; }
    .image-grid { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    figure { margin: 0; }
    .work-image { background: #111; }.work-image img { aspect-ratio: 4 / 5; object-fit: cover; }
    figcaption { display: none; }
    .viewer { padding: 70px 30px 30px; }.viewer-prev { left: 0; }.viewer-next { right: 0; }.viewer-prev, .viewer-next { padding: 6px; font-size: 20px; }
    .viewer-close { right: 24px; }#viewer-image { max-height: calc(100dvh - 240px); }
    .contact-dialog { padding: 36px 26px; }
}
@media (max-width: 650px) and (prefers-reduced-motion: reduce) {
    nav, .menu-backdrop, .menu-icon, .menu-icon::before, .menu-icon::after { transition: none; }
}