:root { --ink: #191917; --muted: #75736d; --paper: #f3f1eb; --line: rgba(25, 25, 23, .16); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
main { min-height: 100vh; padding: 0 2.25rem; }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; min-height: 74px; }
.brand, .image-count, .eyebrow, footer { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.brand::before { background: var(--ink); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: .65rem; vertical-align: 1px; width: 7px; }
.image-count, .eyebrow, footer { color: var(--muted); }
.intro { padding: clamp(5rem, 11vw, 9.5rem) 0 clamp(4rem, 8vw, 7rem); }
.eyebrow { margin: 0 0 1.75rem; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 7vw, 7rem); font-weight: 400; letter-spacing: -.065em; line-height: .87; margin: 0; max-width: 1100px; }
.lede { color: var(--muted); font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.6; margin: 2.4rem 0 0 auto; max-width: 440px; }
.gallery { display: grid; gap: 3rem 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-bottom: 7rem; }
.gallery-item { margin: 0; }
.image-frame { aspect-ratio: 4 / 5; background: #e7e3db; overflow: hidden; }
.image-frame img { display: block; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.8,.2,1), filter 300ms ease; width: 100%; }
.gallery-item a:hover img, .gallery-item a:focus-visible img { filter: saturate(1.08); transform: scale(1.025); }
.gallery-item a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
figcaption { align-items: baseline; border-top: 1px solid var(--line); display: flex; font-size: .82rem; justify-content: space-between; margin-top: .85rem; padding-top: .75rem; text-transform: capitalize; }
.index { color: var(--muted); font-size: .68rem; letter-spacing: .08em; }
.empty-state { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 3rem; grid-template-columns: minmax(240px, .8fr) 1fr; min-height: 390px; padding: 3rem 0; }
.empty-mark { align-items: flex-end; aspect-ratio: 4 / 3; background: #e7e3db; display: flex; gap: 3%; justify-content: center; overflow: hidden; padding: 12%; }
.empty-mark span { background: var(--ink); border-radius: 50% 50% 0 0; display: block; height: 42%; opacity: .85; transform: rotate(-8deg); width: 22%; }
.empty-mark span:nth-child(2) { height: 72%; transform: rotate(5deg); }
.empty-mark span:nth-child(3) { height: 54%; transform: rotate(13deg); }
.empty-state h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin: 0 0 1.25rem; }
.empty-state p { color: var(--muted); line-height: 1.7; margin: 0; max-width: 470px; }
code { background: rgba(25,25,23,.06); border-radius: 3px; color: var(--ink); padding: .18rem .35rem; }
footer { align-items: center; display: flex; justify-content: space-between; min-height: 120px; }
footer a { color: var(--ink); }
@media (max-width: 820px) {
    main { padding: 0 1.15rem; }
    .gallery { gap: 3.5rem .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-item:nth-child(3n + 2) .image-frame { aspect-ratio: 4 / 5; }
    .empty-state { gap: 2rem; grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .intro { padding-top: 4rem; }
    .gallery { grid-template-columns: 1fr; }
    .gallery-item .image-frame { aspect-ratio: 4 / 5 !important; }
    footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .image-frame img { transition: none; } }