:root{--ink:#111;--white:#fff;--cream:#F5F1EA;--beige:#D8CEC0;--grey:#77736D;--serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter",system-ui,sans-serif;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:400 15px/1.7 var(--sans);color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.menu{overflow:hidden}a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,.logo{font-family:var(--serif);font-weight:500;line-height:1}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.hd{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);color:#fff;transition:.4s}
.hd--solid,.hd--scrolled{background:var(--cream);color:var(--ink)}
.logo{font-size:34px;display:flex;flex-direction:column;letter-spacing:.01em}.logo small{font:500 11px var(--serif);letter-spacing:.04em;margin-top:2px}
.nav{display:none;gap:44px}.nav a,.drawer a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;transition:.3s}
.nav a:hover,.nav a[aria-current]{border-color:currentColor}
.burger{width:44px;height:44px;background:none;border:0;color:inherit;position:relative;cursor:pointer;z-index:31}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:.4s}.burger span:first-child{top:18px}.burger span:last-child{top:26px}
body.menu .burger{color:var(--ink)}body.menu .burger span:first-child{top:22px;transform:rotate(45deg)}body.menu .burger span:last-child{top:22px;transform:rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:30;background:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:28px;padding:var(--pad);opacity:0;visibility:hidden;transition:.5s}
.drawer a{font:500 38px var(--serif);letter-spacing:0;text-transform:none}body.menu .drawer{opacity:1;visibility:visible}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:#2b2825;overflow:hidden}
.hero picture,.hero picture img{position:absolute;inset:0}.hero picture img{animation:zoom 14s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.hero__c{position:relative;z-index:2;padding:0 var(--pad) 12svh;max-width:760px}
.hero h1{font-size:clamp(88px,22vw,230px);letter-spacing:-.01em}.hero .by{font:500 clamp(20px,3vw,28px) var(--serif);margin:10px 0 22px}
.hero .tag{font-size:12px;letter-spacing:.34em;text-transform:uppercase;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 28px;border:1px solid currentColor;font-size:11px;letter-spacing:.24em;text-transform:uppercase;transition:.4s;cursor:pointer;background:none;color:inherit}
.btn:hover{background:#fff;color:var(--ink)}.btn--solid{background:var(--ink);color:#fff;border-color:var(--ink);width:100%}.btn--solid:hover{background:var(--grey);color:#fff}
.sec{padding:clamp(64px,10vw,120px) var(--pad);max-width:1600px;margin:auto}
.head{display:grid;gap:22px;margin-bottom:44px}.head h2{font-size:clamp(40px,6vw,64px)}.head p{max-width:300px;color:var(--grey)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{display:block}.card__t{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.card h3{font-size:22px;font-weight:600}.card .arr{font-size:22px}
.ph-box{aspect-ratio:4/5;background:var(--beige);overflow:hidden;position:relative}.ph-box img{transition:transform 1.2s ease}.card:hover img{transform:scale(1.04)}
.ph::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;font:500 20px var(--serif);color:var(--grey);letter-spacing:.1em}
.ed{display:grid;background:var(--white)}.ed .ph-box{aspect-ratio:4/5}.ed__t{padding:var(--pad);display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:flex-start}
.ed h2{font-size:clamp(40px,5vw,58px)}.ed .btn:hover{background:var(--ink);color:#fff}
.page{padding-top:110px}.txt{max-width:640px}.txt h1{font-size:clamp(46px,8vw,84px);margin:14px 0 30px}.txt p{margin-bottom:20px;color:#3a3835}
.contact a.row{display:flex;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--beige);font:500 clamp(24px,4vw,34px) var(--serif)}.contact a.row:hover{padding-left:12px;transition:.3s}
.prod{display:grid;gap:32px}.pg{display:grid;gap:12px}.pi{display:flex;flex-direction:column;gap:14px}.pi h1{font-size:clamp(42px,6vw,64px)}.price{font:500 28px var(--serif)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{min-width:48px;min-height:44px;padding:0 16px;background:none;border:1px solid var(--beige);font:inherit;font-size:13px;cursor:pointer;transition:.3s}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ft{display:grid;gap:20px;padding:36px var(--pad);background:var(--white);font-size:11px;letter-spacing:.2em;text-transform:uppercase;align-items:center}.ft div{display:flex;flex-direction:column;gap:2px}.ft .logo{font-size:30px;letter-spacing:0}.ft em{font:italic 14px var(--serif);text-transform:none;letter-spacing:.05em;color:var(--grey)}.ft nav{display:flex;gap:26px;flex-wrap:wrap}.ft small{font-size:10px;color:var(--grey);letter-spacing:.08em;text-transform:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}.reveal.in{opacity:1;transform:none}
@keyframes zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media(min-width:768px){.grid{grid-template-columns:repeat(4,1fr);gap:20px}.head{grid-template-columns:1.2fr 1fr auto;align-items:end}.ed{grid-template-columns:1fr 1fr}.ed .ph-box{aspect-ratio:auto;min-height:560px}.ft{grid-template-columns:1fr auto auto}.hero__c{padding-bottom:16svh}}
@media(min-width:1024px){.nav{display:flex}.burger{display:none}.prod{grid-template-columns:1.3fr 1fr;gap:72px;align-items:start}.pi{position:sticky;top:120px}.pg{grid-template-columns:1fr 1fr}.pg figure:first-child{grid-column:1/-1}}
@media(min-width:1700px){body{font-size:16px}.hero h1{font-size:260px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.menu .hd{background:transparent;color:var(--ink)}
