@font-face{font-family:"Cormorant Garamond";font-weight:400;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:300;src:url(fonts/karla-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:400;src:url(fonts/karla-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:500;src:url(fonts/karla-latin-500-normal.woff2) format("woff2")}
:root{--cream:#F7F4EE;--ink:#1C1B19;--body:#3A3832;--muted:#5C574E;--grey:#6B6862;--line:#E4DED3;--pad:clamp(20px,4.6vw,70px)}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 Karla,Helvetica,Arial,sans-serif}
img{display:block;width:100%;height:auto}
a{color:inherit}
.serif{font-family:"Cormorant Garamond",Georgia,serif}
/* header */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.monogram{font:500 20px Karla,sans-serif;letter-spacing:.2em;text-decoration:none}
.site-nav{display:flex;gap:clamp(14px,2.2vw,34px);flex-wrap:wrap;justify-content:flex-end}
.site-nav a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.site-nav a:hover{color:var(--accent)}
/* hero */
.hero{margin:0}
.hero{padding:0 var(--pad)}
.hero img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:50% 50%}
.hero figcaption{padding:10px 0 0}
.hero figcaption{font-size:13px;color:var(--grey)}
.hero figcaption em{font-style:italic}
/* statement */
.statement{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,90px);align-items:end;padding:clamp(22px,3vw,40px) var(--pad) clamp(50px,7vw,100px)}
.statement h1{margin:0;font:400 clamp(34px,4.2vw,60px)/1.04 "Cormorant Garamond",Georgia,serif;letter-spacing:-.005em}
.statement h1 i{color:var(--accent)}
.statement p{margin:0 0 20px;color:var(--body);max-width:30ch}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 26px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1px solid var(--accent)}
.btn:hover{background:transparent;color:var(--accent)}
.btn.inv{background:var(--cream);color:var(--accent);border-color:var(--cream)}
.btn.inv:hover{background:transparent;color:var(--cream)}
/* section labels */
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 28px}
.sec{padding:0 var(--pad) clamp(60px,8vw,120px)}
.sec-title{font:400 clamp(30px,3.4vw,46px)/1.1 "Cormorant Garamond",Georgia,serif;margin:0 0 clamp(28px,4vw,56px);text-align:center}
/* category cards (middle one offset, like a gallery wall) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px)}
.card{text-decoration:none}
.card:nth-child(2){margin-top:clamp(0px,4vw,64px)}
.card img{aspect-ratio:1/1;object-fit:cover}
.card h3{margin:16px 0 2px;font:400 28px/1.1 "Cormorant Garamond",Georgia,serif}
.card p{margin:0;color:var(--grey);font-size:15px}
.card:hover h3{color:var(--accent)}
/* selected work: staggered, native ratios */
.stagger{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(14px,2.2vw,32px);row-gap:clamp(40px,6vw,90px);align-items:start}
.stagger figure{margin:0}
.stagger figcaption{margin-top:10px;font-size:14px;color:var(--grey)}
.stagger figcaption b{display:block;font-weight:400;color:var(--ink)}
.stagger figcaption em{font-style:italic}
.s1{grid-column:1/8}
.s2{grid-column:9/13;margin-top:clamp(0px,6vw,90px)}
.s3{grid-column:1/6}
.s4{grid-column:7/13;margin-top:clamp(0px,5vw,70px)}
/* what I shoot */
.shoot{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,90px)}
.shoot h2{margin:0;font:400 clamp(34px,4vw,56px)/1.05 "Cormorant Garamond",Georgia,serif}
details{border-top:1px solid var(--ink)}
details:last-child{border-bottom:1px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font:400 clamp(26px,2.6vw,36px)/1.1 "Cormorant Garamond",Georgia,serif}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:20px;height:20px;border:1.5px solid var(--accent);border-radius:50%;flex:none;background:radial-gradient(circle,var(--accent) 0 0,transparent 0)}
details[open] summary::after{background:var(--accent)}
details p{margin:0 0 24px;color:var(--body);max-width:52ch}
/* about */
.about{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,90px)}
.about p{margin:0;font:400 clamp(22px,2.1vw,28px)/1.35 "Cormorant Garamond",Georgia,serif;color:var(--body);max-width:36ch}
/* contact */
.contact{background:var(--accent);color:#fff;padding:clamp(56px,8vw,110px) var(--pad)}
.contact h2{margin:0 0 28px;font:400 clamp(40px,6vw,92px)/1 "Cormorant Garamond",Georgia,serif}
.contact .lines{display:flex;gap:clamp(18px,4vw,64px);flex-wrap:wrap;align-items:center;font-size:18px}
.contact .lines a{text-underline-offset:5px}
/* footer */
.site-footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px var(--pad);font-size:14px;color:var(--grey)}
.site-footer nav{display:flex;gap:22px}
.site-footer nav a{color:var(--accent)}
.tag{position:absolute;right:12px;top:78px;background:#fff;border:1px solid var(--line);padding:6px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);z-index:9}
@media(max-width:760px){
 .tag{position:static;text-align:center;border:0;border-bottom:1px solid var(--line)}
 .site-header{flex-direction:column;align-items:flex-start;gap:12px}
 .monogram{white-space:nowrap}
 .site-nav{justify-content:flex-start}
 .statement,.shoot,.about{grid-template-columns:1fr}
 .cards{grid-template-columns:1fr}.card:nth-child(2){margin-top:0}
 .stagger>*{grid-column:1/-1!important;margin-top:0!important}
 .hero{padding:0}
 .hero img{aspect-ratio:5/6;object-position:var(--pm,50% 50%)}
 .hero figcaption{padding:10px var(--pad) 0}
 .site-nav a{font-size:11.5px}
}