:root{
  --night:#0E0F11; --char:#1A1C1F; --char2:#23262A; --amber:#D99A4E; --amber-d:#C2843A;
  --fog:#9EA4AA; --bone:#EDE7DD; --line:#2E3136;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--bone);font-family:var(--sans);font-weight:300;line-height:1.65;font-size:17px}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(36px,4.6vw,60px);margin:12px 0 18px}
h2 em,h1 em{font-style:italic;color:var(--amber)}
section{padding:120px 0}
.muted{color:var(--fog)}
.btn{display:inline-block;padding:15px 30px;border-radius:2px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:.25s;cursor:pointer}
.btn-amber{background:var(--amber);color:#16120C}.btn-amber:hover{background:var(--amber-d)}
.btn-line{border:1px solid rgba(237,231,221,.5)}.btn-line:hover{border-color:var(--amber);color:var(--amber)}
.textlink{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid currentColor;padding-bottom:3px}

/* header */
header{position:fixed;inset:0 0 auto;z-index:20;transition:.3s}
header.solid{background:rgba(14,15,17,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:12px}
.glyph{width:auto;height:50px}
.foot-logo{width:auto;height:110px}
.logo-txt{font-family:var(--serif);font-size:21px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;line-height:1}
.logo-txt small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.5em;color:var(--fog);margin-top:6px}
.links{display:flex;gap:34px;align-items:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.links a:not(.btn):hover{color:var(--amber)}
.links .btn{padding:11px 20px}

/* hero */
.hero{position:relative;height:100vh;min-height:660px;display:flex;align-items:flex-end;padding-bottom:120px;overflow:hidden}
.hero>img{position:absolute;inset:0;object-position:50% 35%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,.55) 0%,rgba(14,15,17,0) 30%,rgba(14,15,17,.25) 60%,rgba(14,15,17,.95) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero h1{font-size:clamp(54px,8.4vw,120px);margin:16px 0 22px;max-width:980px}
.hero p{max-width:540px;font-size:18px;color:#D8D2C8;margin-bottom:36px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.caption{position:absolute;right:32px;bottom:44px;z-index:2;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog)}

/* statement */
.statement{padding:130px 0 90px}
.statement .wrap{display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start}
.statement p.big{font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1.35;font-weight:300}
.statement p.big em{color:var(--amber)}
.stats{display:flex;gap:50px;margin-top:40px;flex-wrap:wrap}
.stats b{display:block;font-family:var(--serif);font-size:40px;font-weight:300;color:var(--bone)}
.stats span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}

/* collections */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.col{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--char)}
.col img{transition:transform 1s}
.col:hover img{transform:scale(1.05)}
.col::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8))}
.col div{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.col h3{font-size:28px}
.col span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}

/* gallery */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--line);padding:9px 18px;border-radius:40px;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fog);cursor:pointer}
.filters button.on{background:var(--bone);border-color:var(--bone);color:var(--night)}
.grid{columns:3 300px;column-gap:14px;margin-top:40px}
.grid figure{break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden;background:var(--char)}
.grid figure img{height:auto;transition:transform .9s,filter .4s}
.grid figure:hover img{transform:scale(1.03)}
.grid figcaption{position:absolute;inset:auto 0 0 0;padding:40px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));display:flex;justify-content:space-between;align-items:flex-end;opacity:0;transition:.35s;font-size:13px}
.grid figcaption b{font-family:var(--serif);font-weight:400;font-size:18px}
.grid figcaption span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.grid figure:hover figcaption{opacity:1}

/* prints */
.prints{background:var(--char)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:50px}
.print .frame{background:#F3EFE8;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.45);aspect-ratio:4/5;position:relative}
.print .frame img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.tag{position:absolute;top:26px;left:26px;background:var(--night);color:var(--amber);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:5px 10px;z-index:2}
.print h3{font-size:22px;margin:22px 0 4px}
.print .meta{font-size:13px;color:var(--fog)}
.print .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.print .price{font-family:var(--serif);font-size:20px}
.print .price small{font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--fog);text-transform:uppercase;margin-right:6px}

/* formats */
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;border-top:1px solid var(--line)}
.fmt{padding:34px 28px 10px 0;border-right:1px solid var(--line);margin-right:28px}
.fmt:last-child{border-right:0;margin-right:0}
.fmt .ic{width:34px;height:34px;color:var(--amber);margin-bottom:18px}
.fmt h3{font-size:24px;margin-bottom:8px}
.fmt p{font-size:15px;color:var(--fog)}
.fmt .from{margin-top:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.promise{display:flex;gap:40px;flex-wrap:wrap;margin-top:56px;padding:22px 28px;border:1px solid var(--line);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);justify-content:space-between}
.promise b{color:var(--bone);font-weight:500}

/* commissions */
.comm .wrap{display:grid;grid-template-columns:6fr 5fr;gap:70px;align-items:center}
.comm .ph{aspect-ratio:5/4;position:relative}
.comm .ph::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--amber);z-index:-1;opacity:.6}
.svc{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:1fr auto;gap:6px 20px}
.svc h3{font-size:24px}
.svc .p{font-family:var(--serif);color:var(--amber);font-size:18px;align-self:center}
.svc p{grid-column:1/-1;font-size:15px;color:var(--fog)}

/* about */
.about{background:var(--char)}
.about .wrap{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center}
.about .portrait{aspect-ratio:4/5}
.placeholder{border:1px dashed var(--fog);display:grid;place-items:center;color:var(--fog);font-size:12px;letter-spacing:.2em;text-transform:uppercase;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.02) 14px 28px)}
.about p{color:#CFC8BD;margin-bottom:18px}
.sig{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--amber);margin-top:6px}

/* newsletter */
.news{text-align:center;padding:110px 0;background:radial-gradient(ellipse at 50% 120%,rgba(217,154,78,.22),transparent 60%)}
.news p{max-width:520px;margin:0 auto 30px;color:var(--fog)}
.news form{display:flex;max-width:520px;margin:0 auto;border-bottom:1px solid var(--fog)}
.news input{flex:1;background:transparent;border:0;color:var(--bone);font:300 17px var(--sans);padding:14px 4px}
.news input:focus{outline:none}
.news button{background:none;border:0;color:var(--amber);font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* contact */
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--char);padding:44px}
.contact .full{grid-column:1/-1}
label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);display:block;margin-bottom:6px}
.contact input,.contact select,.contact textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 0;font:300 16px var(--sans);color:var(--bone)}
.contact select option{background:var(--char)}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:none;border-color:var(--amber)}
.contact textarea{resize:vertical;min-height:100px}
.contact form .btn{border:0;justify-self:start;grid-column:1/-1}
.cinfo p{margin-bottom:14px;color:var(--fog)}
.cinfo b{color:var(--bone);font-weight:400}

/* insta + footer */
.insta{display:grid;grid-template-columns:repeat(6,1fr)}
.insta a{aspect-ratio:1;overflow:hidden;position:relative}
.insta a img{transition:.5s;filter:brightness(.85)}
.insta a:hover img{filter:brightness(1);transform:scale(1.05)}
footer{padding:56px 0 36px;font-size:14px;color:var(--fog);border-top:1px solid var(--line)}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
footer nav{display:flex;gap:28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
footer nav a:hover{color:var(--amber)}
footer .copy{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.08em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (max-width:980px){
  .wrap{padding:0 20px}
  section{padding:84px 0}
  .links a:not(.btn){display:none}
  .links .btn{padding:10px 14px;font-size:11px}
  .logo-txt{font-size:16px;letter-spacing:.18em}.logo-txt small{font-size:8px;letter-spacing:.4em}.glyph{width:auto;height:40px}.foot-logo{height:90px}
  .hero{padding-bottom:80px}.caption{display:none}
  .statement .wrap,.comm .wrap,.about .wrap,.contact .wrap{grid-template-columns:1fr;gap:44px}
  .cols4,.pgrid{grid-template-columns:1fr 1fr;gap:14px}
  .col h3{font-size:22px}.col div{left:14px;bottom:14px}
  .formats{grid-template-columns:1fr 1fr}
  .fmt{margin-right:0;padding:28px 18px 10px 0;border-right:0}
  .contact form{grid-template-columns:1fr;padding:28px 22px}
  .insta{grid-template-columns:repeat(3,1fr)}
  .comm .ph::before{inset:-10px 10px 10px -10px}
  .print h3{font-size:19px}.print .row{flex-direction:column;align-items:flex-start;gap:8px}
}