@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');
:root { color-scheme: light; --ink:#30332f; --muted:#82847c; --gap:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:#fff; color:var(--ink); font:15px/1.7 Georgia,serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
a:focus-visible,button:focus-visible { outline:2px solid #73856a; outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:20px; background:#fff; padding:12px; z-index:5; }
.skip-link:focus { top:0; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:24px 2.6vw 26px; gap:24px; }
h1 { font:600 clamp(44px,5vw,65px)/1.1 'Caveat','Segoe Print',cursive; margin:0; letter-spacing:.015em; }
nav { display:flex; gap:30px; padding-right:5px; font:12px/1.4 Arial,sans-serif; text-transform:uppercase; letter-spacing:.12em; }
nav a { padding:8px 0; color:#7c7f76; border-bottom:1px solid transparent; }
nav a:hover,nav a[aria-current] { color:var(--ink); border-color:#a0a88e; }
main { padding:0 2.6vw; }
.gallery { display:flex; flex-direction:column; gap:var(--gap); }
.gallery-row { display:flex; gap:var(--gap); }
.artwork { position:relative; display:block; padding:0; border:0; background:#fff; cursor:zoom-in; flex-shrink:0; }
.artwork img { display:block; width:100%; height:100%; object-fit:contain; }
.artwork .artwork-title { position:absolute; bottom:10px; left:50%; transform:translateX(-50%) translateY(3px); padding:5px 12px; background:rgba(255,255,255,.94); white-space:nowrap; font:11px/1.5 Arial,sans-serif; letter-spacing:.07em; opacity:0; transition:opacity .18s,transform .18s; pointer-events:none; }
.artwork:hover .artwork-title,.artwork:focus-visible .artwork-title { opacity:1; transform:translateX(-50%) translateY(0); }
.artwork .artwork-title { max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; }
.about { max-width:930px; margin:130px auto 110px; padding-top:65px; border-top:1px solid #e8e9e4; display:grid; grid-template-columns: minmax(200px,340px) 1fr; gap:80px; align-items:start; }
.portrait-placeholder { aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f1f2ed; color:#8d9581; }
.portrait-mark { font:500 105px/1 'Caveat','Segoe Print',cursive; opacity:.7; }
.portrait-placeholder>span:last-child { font:10px Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; margin-top:20px; }
.eyebrow { font:10px/1.5 Arial,sans-serif; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
h2 { font:500 45px/1.25 'Caveat','Segoe Print',cursive; margin:14px 0 24px; }
.about-copy>p:not(.eyebrow) { max-width:380px; }
.placeholder-note { color:var(--muted); font-style:italic; font-size:14px; }
.placeholder-note:empty { display:none; }
#about-text { white-space:pre-line; }
.portrait-photo img { display:block; width:100%; height:auto; }
.preview-banner { position:sticky; top:0; z-index:10; background:#eaf0df; padding:10px; text-align:center; font:12px Arial,sans-serif; }
.load-error { padding:30px; text-align:center; }
.back-top { display:inline-block; margin-top:25px; font:11px Arial,sans-serif; letter-spacing:.04em; border-bottom:1px solid #c5c9bc; padding-bottom:7px; }
.back-top span { margin-left:22px; }
.contact { margin-top:28px; max-width:420px; }
.contact summary { display:inline-flex; align-items:center; gap:28px; padding:10px 18px; border:1px solid #a8b09c; border-radius:3px; list-style:none; cursor:pointer; font:12px/1.5 Arial,sans-serif; color:#46513d; background:#f8faf5; }
.contact summary::-webkit-details-marker { display:none; }
.contact summary:hover { background:#eef2e8; }
.contact summary:focus-visible { outline:2px solid #73856a; outline-offset:4px; }
.contact[open] summary span { transform:rotate(90deg); }
.contact-panel { padding:24px 0 0; }
.contact h3 { font:normal 21px/1.3 Georgia,serif; margin:0 0 12px; }
#contact-availability { font-size:14px; color:var(--muted); margin:0 0 18px; }
.contact fieldset { border:0; margin:0; padding:0; min-width:0; }
.contact label { display:block; font:11px/1.5 Arial,sans-serif; margin:16px 0 6px; }
.contact label:first-child { margin-top:0; }
.contact input:not([type=hidden]),.contact textarea { display:block; width:100%; border:1px solid #d1d7ca; border-radius:3px; padding:10px 12px; background:#fff; color:var(--ink); font:16px/1.6 Georgia,serif; }
.contact textarea { resize:vertical; }
.contact input:focus,.contact textarea:focus { outline:2px solid #a4b395; outline-offset:1px; }
.contact button { border:1px solid #69795c; border-radius:3px; margin-top:18px; padding:11px 18px; background:#58684c; color:#fff; cursor:pointer; font:12px/1.5 Arial,sans-serif; }
.contact fieldset:disabled { opacity:.55; }
.contact fieldset:disabled button { cursor:default; }
.contact [hidden] { display:none!important; }
#contact-status { font-size:14px; margin:18px 0 0; }
#contact-status[data-state=success] { color:#4d6340; }
#contact-status[data-state=error] { color:#934d3c; }
footer { margin:0 2.6vw; padding:24px 0 32px; border-top:1px solid #e8e9e4; display:flex; justify-content:space-between; font:10px Arial,sans-serif; letter-spacing:.06em; color:var(--muted); }
dialog { width:100vw; max-width:none; height:100dvh; max-height:none; border:0; margin:0; padding:55px 65px; background:#fff; }
dialog[open] { display:flex; align-items:center; justify-content:center; }
dialog::backdrop { background:#fff; }
dialog figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:100%; }
dialog img { display:block; max-width:calc(100vw - 140px); max-height:calc(100dvh - 150px); object-fit:contain; }
figcaption { font:12px Arial,sans-serif; letter-spacing:.06em; }
dialog button { position:absolute; border:0; background:transparent; cursor:pointer; padding:12px; line-height:1; font:32px Arial,sans-serif; }
.close-viewer { top:12px; right:20px; }.previous { left:12px; top:47%; }.next { right:12px; top:47%; }
.viewer-count { position:absolute; bottom:20px; font:11px Arial,sans-serif; color:var(--muted); }
@media(max-width:650px) { :root { --gap:12px; }.site-header { padding:25px 20px 30px; gap:12px; }h1 { font-size:43px; }nav { gap:18px; font-size:10px; }main { padding:0 18px; }.about { margin:80px 0 65px; padding-top:40px; gap:30px; grid-template-columns:1fr; }.portrait-placeholder { width:min(100%,300px); }.about-copy { max-width:420px; }footer { margin:0 18px; gap:20px; }dialog { padding:50px 35px; }dialog img { max-width:calc(100vw - 76px); }.previous { left:0; }.next { right:0; }.close-viewer { right:8px; } }
@media(max-width:420px) { .site-header { padding-left:18px; padding-right:18px; }h1 { font-size:36px; }nav { gap:14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }* { transition:none!important; } }