@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('assets/libre-caslon-text.ttf') format('truetype')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/hanken-grotesk.ttf') format('truetype')}
:root{color-scheme:light;--surface:#f9f9f9;--ink:#000;--muted:#5e5e5e}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--surface);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;font-family:'Hanken Grotesk',sans-serif}
::selection{background:#e2e2e2;color:var(--ink)}
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:24px}
header{position:fixed;inset:0 0 auto;z-index:10;background:rgb(249 249 249 / 90%);backdrop-filter:blur(12px)}
.header-inner{height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family:'Libre Caslon Text',Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.025em;color:inherit;text-decoration:none;white-space:nowrap}
.brand:hover{opacity:.8}
.label{font-size:12px;line-height:1;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
main{padding-top:80px;flex:1}
.gallery-section{padding-block:48px}
.intro{text-align:center;margin:0 auto 48px}
h1{font-family:'Libre Caslon Text',Georgia,serif;font-size:clamp(30px,7vw,64px);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0}
.intro p{margin:12px 0 0;letter-spacing:.25em}
.gallery{display:grid;grid-template-columns:1fr;gap:32px}
figure{margin:0;background:#eee;overflow:hidden;aspect-ratio:4/3}
figure img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--artwork-scale,1));transition:transform .7s ease-out}
figure:nth-child(3) img{--artwork-scale:1.52;transform-origin:49% 48%}
figure:nth-child(4) img{--artwork-scale:1.68;transform-origin:50% 64%}
figure:hover img{transform:scale(calc(var(--artwork-scale,1)*1.02))}
footer{padding-block:48px;text-align:center}
footer .label{color:#444748;letter-spacing:.1em}
@media(min-width:640px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){.gallery-section{padding-block:80px}.intro{margin-bottom:80px}}
@media(min-width:1024px){.container{padding-inline:80px}.gallery{gap:48px}}
@media(max-width:480px){.brand{font-size:19px}.header-inner>.label{font-size:9px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){figure img{transition:none}figure:hover img{transform:scale(var(--artwork-scale,1))}}