:root { --ink:#25211d; --muted:#756c63; --paper:#f6f1e8; --card:#fffdf8; --accent:#9d3f29; --line:#ded5c8; --shadow:0 18px 50px rgba(54,42,30,.12); }
* { box-sizing:border-box; }
html { color-scheme:light; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:20; padding:.7rem 1rem; background:var(--ink); color:white; }
.skip-link:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:1480px; margin:auto; padding:1.35rem clamp(1.25rem,4vw,4rem); border-bottom:1px solid var(--line); }
.brand { font:700 clamp(1.2rem,3vw,1.55rem)/1.1 Georgia,serif; text-decoration:none; letter-spacing:-.02em; }
nav { display:flex; gap:1.25rem; }
nav a { color:var(--muted); text-decoration:none; }
nav a:hover,nav a[aria-current="page"] { color:var(--ink); }
main { min-height:72vh; max-width:1480px; margin:auto; padding:clamp(2.5rem,6vw,6rem) clamp(1.25rem,4vw,4rem); }
.hero { max-width:760px; margin-bottom:clamp(2rem,5vw,4.5rem); }
.eyebrow { margin:0 0 .65rem; color:var(--accent); font-size:.78rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:14ch; margin:0; font:700 clamp(3.2rem,9vw,7rem)/.92 Georgia,serif; letter-spacing:-.055em; }
.lede { max-width:48rem; margin:1.35rem 0 0; color:var(--muted); font-size:clamp(1rem,2vw,1.25rem); }
.gallery-tools { display:flex; align-items:center; gap:1rem 2rem; margin-top:2.2rem; }
.search { flex:1; }
.search input { width:100%; border:1px solid var(--line); border-radius:999px; padding:.85rem 1.15rem; background:var(--card); color:var(--ink); font:inherit; }
.search input:focus { outline:3px solid rgba(157,63,41,.2); border-color:var(--accent); }
.count { flex:none; margin:0; color:var(--muted); font-size:.9rem; }
.album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,245px),1fr)); gap:clamp(1.1rem,2.5vw,2rem); }
.album-card { overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--card); box-shadow:0 1px 0 rgba(54,42,30,.03); transition:transform .2s ease,box-shadow .2s ease; }
.album-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.album-card a { display:block; height:100%; text-decoration:none; }
.album-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#e9e1d7; }
.album-copy { padding:1rem 1.05rem 1.15rem; }
.album-copy h2 { margin:0 0 .3rem; font:700 1.15rem/1.2 Georgia,serif; }
.album-copy p { margin:0; color:var(--muted); font-size:.86rem; }
.back { display:inline-block; margin-bottom:2.5rem; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--accent); }
.album-hero { max-width:980px; }
.album-hero h1 { max-width:18ch; font-size:clamp(2.8rem,7vw,5.8rem); }
.photo-grid { columns:4 260px; column-gap:clamp(.7rem,1.4vw,1.2rem); }
.photo { width:100%; margin:0 0 clamp(.7rem,1.4vw,1.2rem); padding:0; border:0; break-inside:avoid; background:transparent; cursor:zoom-in; }
.photo img { display:block; width:100%; height:auto; min-height:120px; border-radius:3px; background:#e9e1d7; }
.load-area { display:flex; justify-content:center; padding:3rem 0 1rem; }
#load-more { border:1px solid var(--ink); border-radius:999px; padding:.8rem 1.3rem; background:transparent; color:var(--ink); font:650 inherit; cursor:pointer; }
#load-more:hover { background:var(--ink); color:white; }
.empty { padding:3rem 0; color:var(--muted); text-align:center; }
footer { display:flex; justify-content:space-between; gap:1rem; max-width:1480px; margin:auto; padding:2rem clamp(1.25rem,4vw,4rem); border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
footer a { color:var(--ink); font-weight:700; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
dialog { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; border:0; padding:2rem 5rem; background:rgba(20,18,16,.96); color:white; }
dialog::backdrop { background:rgba(20,18,16,.96); }
dialog[open] { display:grid; grid-template-columns:3rem minmax(0,1fr) 3rem; align-items:center; }
dialog figure { display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; min-width:0; height:calc(100vh - 4rem); margin:0; }
dialog img { display:block; max-width:100%; max-height:calc(100vh - 7rem); margin:auto; object-fit:contain; }
dialog figcaption { margin-top:.8rem; color:#d8d1c9; font-size:.82rem; }
dialog button { border:0; background:transparent; color:white; cursor:pointer; font-size:3rem; }
dialog .close { position:absolute; right:1rem; top:.5rem; font-size:2.2rem; }
@media (max-width:650px) { .gallery-tools,footer { align-items:stretch; flex-direction:column; } .count { order:-1; } dialog { padding:3.2rem .5rem 1rem; } dialog[open] { grid-template-columns:2rem minmax(0,1fr) 2rem; } dialog figure { height:calc(100vh - 4.2rem); } dialog img { max-height:calc(100vh - 7rem); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .album-card { transition:none; } }