:root { color-scheme:dark; --black:#050505; --ash:#dedbd4; --bone:#aaa69d; --line:#2c2b29; }
* { box-sizing:border-box; }
body { margin:0; background:var(--black); color:var(--ash); font:400 16px/1.7 'DM Sans',sans-serif; }
a { color:inherit; text-underline-offset:.3em; }
button { font:inherit; color:inherit; background:#111; border:1px solid var(--line); padding:.6rem .8rem; cursor:pointer; }
a:focus-visible,button:focus-visible { outline:2px solid var(--ash); outline-offset:4px; }
header { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.25rem clamp(1.5rem,5vw,5rem); border-bottom:1px solid var(--line); }
header a { text-decoration:none; font-size:.875rem; letter-spacing:.12em; text-transform:uppercase; }
main { max-width:1280px; margin:auto; padding:clamp(2rem,5vw,5rem) 1.5rem; }
.identity p { margin:0 0 1rem; color:var(--bone); font-size:.875rem; letter-spacing:.15em; text-transform:uppercase; }
h1 { margin:0; font:500 clamp(3.5rem,9vw,7rem)/1 'Cormorant Garamond',Georgia,serif; }
nav { display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:2rem 0 3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
nav a { color:var(--bone); text-decoration:none; }
nav a[aria-current] { color:var(--ash); text-decoration:underline; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:1.5rem; }
.gallery-portraits { grid-template-columns:repeat(var(--portrait-count),minmax(0,1fr)); max-width:var(--portrait-width); }
.gallery + .gallery { margin-top:1.5rem; }
.photo { display:block; padding:.45rem; border:1px solid var(--line); background:#0a0a0a; }
.photo img { display:block; width:100%; height:auto; }
.photo:hover { border-color:var(--bone); }
.skip { position:absolute; left:-100vw; padding:1rem; background:var(--ash); color:var(--black); }
.skip:focus { left:1rem; }
dialog { width: min(1200px,96vw); max-width:96vw; max-height:96svh; padding:1rem; border:1px solid var(--line); background:#080808; color:var(--ash); }
dialog::backdrop { background:rgba(0,0,0,.94); }
.viewer-controls { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
dialog img { display:block; width:100%; height:calc(90svh - 100px); object-fit:contain; }
@media(max-width:850px) { .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .gallery { grid-template-columns:1fr; } .viewer-controls { gap:.5rem; } }