:root{--paper:#f6f3ed;
--ink:#242b25;
--muted:#6b7168;
--line:#d7d8cf;
--accent:#51654e}
*{box-sizing:border-box}
body{margin:0;
background:var(--paper);
color:var(--ink);
font-family:Arial,sans-serif}
a{color:inherit;
text-decoration:none}
button{font:inherit;
cursor:pointer}
header{padding:30px 5%;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
gap:24px}
.brand{display:flex;
align-items:center;
gap:14px}
.seal{border:1px solid var(--ink);
border-radius:50%;
padding:16px 9px;
font-family:Georgia,serif}
.brand strong{display:block;
font-size:14px;
letter-spacing:.1em}
.brand small{color:var(--muted);
display:block;
margin-top:6px}
nav{display:flex;
gap:20px;
font-size:13px;
flex-wrap:wrap}
nav a[aria-current]{border-bottom:1px solid;
padding-bottom:5px}
main{padding:0 5% 80px}
.intro{padding:62px 0 40px;
max-width:900px}
.eyebrow{text-transform:uppercase;
letter-spacing:.18em;
font-size:11px;
color:var(--accent)}
h1{font:normal clamp(42px,6vw,78px)/1.04 Georgia,serif;
letter-spacing:-.04em;
margin:18px 0}
p{color:var(--muted);
line-height:1.8;
max-width:670px}
.collection-bar{border-top:1px solid var(--line);
padding:20px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px}
.collection-bar h2{font:normal 24px Georgia,serif;
margin:0}
.collection-bar span{color:var(--muted);
font-size:12px}
.grid{display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:40px 26px}
.art{margin:0}
.art button{border:0;
background:#eae8e0;
width:100%;
height:350px;
padding:20px;
display:block;
transition:background .2s}
.art button:hover{background:#dedfd4}
.art img{width:100%;
height:100%;
object-fit:contain}
.art figcaption{padding-top:13px;
font-size:12px;
line-height:1.5;
color:var(--muted)}
footer{margin:0 5%;
padding:30px 0;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:20px;
color:var(--muted);
font-size:12px}
dialog{background:#f6f3ed;
color:var(--ink);
border:0;
width:min(1100px,94vw);
max-height:94vh;
padding:24px}
dialog::backdrop{background:#172018dd}
.viewer{height:70vh;
width:100%;
object-fit:contain}
.viewer-controls{display:flex;
justify-content:space-between;
align-items:center;
gap:14px}
.viewer-controls button{background:none;
border:1px solid var(--line);
padding:10px 16px}
.skip{position:absolute;
left:8px;
top:-100px;
background:white;
padding:12px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #718666;
outline-offset:4px}
.bio{max-width:800px;
padding-bottom:50px}
.draft{background:#e8eadd;
padding:12px 5%;
font-size:12px;
line-height:1.6;
color:#4b5847}
@media(max-width:900px){header{align-items:flex-start;
flex-direction:column}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.art button{height:300px}
}
@media(max-width:560px){header{padding:20px 6%}
main{padding:0 6% 50px}
nav{gap:13px;
font-size:12px}
.intro{padding:40px 0 25px}
.grid{grid-template-columns:1fr;
gap:28px}
.art button{height:390px}
.collection-bar{align-items:flex-start;
flex-direction:column;
gap:8px}
footer{flex-direction:column}
.viewer-controls{flex-wrap:wrap}
.viewer{height:60vh}
}