:root{
  --ink:#191816;
  --warm:#eee7dd;
  --sand:#d9cab9;
  --rose:#b88472;
  --stone:#a99f94;
  --white:#fcfaf6;
  --line:rgba(25,24,22,.17);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--warm);color:var(--ink);font-family:"Manrope",sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit}

.topbar{
  height:82px;display:grid;grid-template-columns:1fr auto 1.4fr;align-items:center;
  padding:0 3.5vw;border-bottom:1px solid var(--line);background:rgba(238,231,221,.97);
  position:relative;z-index:50
}
.wordmark img{width:160px;height:auto}
.top-note{font-size:.67rem;text-transform:uppercase;letter-spacing:.19em;color:#6d655e}
.main-nav{justify-self:end;display:flex;gap:2rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em}
.main-nav a{padding:8px 0;border-bottom:1px solid transparent}
.main-nav a:hover{border-color:var(--ink)}
.menu-btn{display:none;border:0;background:none;padding:10px}
.menu-btn span{display:block;width:28px;height:1px;background:var(--ink);margin:7px 0}

.hero{display:grid;grid-template-columns:.86fr 1.14fr;min-height:calc(100vh - 82px)}
.hero-left{padding:5vw 4vw 5vw 6vw;display:grid;grid-template-columns:auto 1fr;gap:4vw;background:var(--warm)}
.hero-number{font-size:.68rem;letter-spacing:.18em;writing-mode:vertical-rl;text-transform:uppercase;color:#71695f}
.hero-copy{align-self:end}
.kicker,.label{font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700}
.hero h1{
  font:400 clamp(3.8rem,6.9vw,7.5rem)/.84 "Italiana",serif;
  letter-spacing:-.04em;margin:1.2rem 0 2rem
}
.hero h1 em{color:var(--rose);font-style:normal}
.intro{max-width:520px;font-size:.98rem;line-height:1.85;color:#5c5650}
.arrow-link{display:inline-flex;align-items:center;gap:2rem;margin-top:1.5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;border-bottom:1px solid var(--ink);padding-bottom:.55rem}
.hero-right{position:relative;min-height:680px}
.vertical-caption{
  position:absolute;right:0;top:0;bottom:0;background:var(--ink);color:white;width:44px;
  writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;letter-spacing:.2em
}

.statement{padding:10vw 8vw 9vw;display:grid;grid-template-columns:.3fr .8fr 2fr 1fr;gap:3vw;align-items:start}
.index{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid currentColor;border-radius:50%;font-size:.65rem}
.statement .label{padding-top:.5rem}
.statement h2,.collection-head h2,.atelier-copy h2,.mood-copy h2,.journal-intro h2,.about-title h2,.cta h2{
  font:400 clamp(3rem,5.8vw,6.5rem)/.9 "Italiana",serif;letter-spacing:-.035em;margin:0
}
.statement .body{line-height:1.9;color:#5e5751;margin:0}

.collection{padding:8vw 5vw 11vw;background:var(--white)}
.collection-head{display:grid;grid-template-columns:1.3fr .7fr;gap:10vw;align-items:end;margin-bottom:5vw}
.collection-head h2{margin-top:.7rem}
.collection-head>p{line-height:1.8;color:#665f58;max-width:480px}
.products{display:grid;grid-template-columns:1.15fr .72fr .88fr;gap:1.8vw;align-items:start}
.product .photo{position:relative;overflow:hidden}
.product .photo img{transition:transform .8s ease}
.product:hover .photo img{transform:scale(1.025)}
.p1 .photo{height:620px}.p2{margin-top:9vw}.p2 .photo{height:470px}.p3{margin-top:3vw}.p3 .photo{height:560px}
.badge{position:absolute;top:1rem;left:1rem;width:34px;height:34px;background:var(--white);display:grid;place-items:center;border-radius:50%;font-size:.64rem}
.product h3{font:400 2rem/1 "Italiana",serif;margin:1.2rem 0 .4rem}
.product p{margin:0;color:#716a63;font-size:.85rem}

.atelier{display:grid;grid-template-columns:1.15fr .85fr;min-height:760px;background:var(--ink);color:white}
.atelier-photo{min-height:760px}
.atelier-copy{padding:7vw 6vw;display:flex;flex-direction:column;justify-content:center}
.atelier-copy .label{color:#c9a596;margin:2rem 0 1rem}
.atelier-copy>p:not(.label){line-height:1.85;color:#c5beb8;max-width:560px}
.principles{margin-top:3rem;border-top:1px solid #48443f}
.principles div{display:grid;grid-template-columns:50px 1fr;padding:1rem 0;border-bottom:1px solid #48443f;font-size:.77rem;text-transform:uppercase;letter-spacing:.12em}
.principles b{color:#a99388}

.mood{padding:10vw 6vw;display:grid;grid-template-columns:.8fr .7fr 1fr;gap:2.4vw;align-items:center}
.mood-copy{padding-right:3vw}
.mood-copy h2{margin:1rem 0 2rem}
.mood-copy p:last-child{line-height:1.85;color:#635c55}
.mood-img{margin:0}.mood-img.one{height:500px}.mood-img.two{height:690px}

.journal{padding:9vw 5vw;background:#d7cbc0}
.journal-intro{display:grid;grid-template-columns:auto .35fr 1.6fr;gap:2vw;align-items:start;margin-bottom:5vw}
.journal-intro h2{max-width:850px}
.journal-grid{display:grid;grid-template-columns:.8fr 1.15fr .8fr;gap:1px;background:rgba(25,24,22,.18)}
.story{background:#d7cbc0;min-height:520px;padding:3.5vw;display:flex;flex-direction:column}
.story.visual{padding:0}
.story-no{font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:#6b625b}
.story h3{font:400 clamp(2rem,3.2vw,3.5rem)/1 "Italiana",serif;margin:auto 0 1.4rem}
.story p{line-height:1.8;color:#615952}
.story a{margin-top:1.6rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em}
.digital{background:var(--rose);color:white}
.digital .story-no,.digital p{color:rgba(255,255,255,.75)}

.about{padding:11vw 8vw;display:grid;grid-template-columns:1.3fr .7fr;gap:10vw;background:var(--white)}
.about-title h2{margin-top:1rem}
.about-text{align-self:end}
.about-text p{line-height:1.95;color:#5c5650;font-size:1rem}

.cta{height:760px;position:relative;color:white}
.cta-photo{position:absolute;inset:0}
.cta-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.67),rgba(20,18,16,.08))}
.cta-overlay{position:relative;z-index:2;height:100%;padding:6vw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.label.light{color:#ddd4cc}
.cta h2{font-size:clamp(4rem,7.5vw,8rem);margin:1rem 0 2.5rem}
.cta-button{border:1px solid rgba(255,255,255,.8);padding:1rem 1.6rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.16em}

footer{background:#141311;color:white;padding:5vw;display:grid;grid-template-columns:1.5fr .5fr .5fr;gap:5vw}
.footer-logo{width:240px;height:auto}
.footer-col{display:flex;flex-direction:column;gap:.75rem;font-size:.75rem}
.footer-col span{text-transform:uppercase;letter-spacing:.16em;color:#827a73;margin-bottom:.5rem}
.footer-bottom{grid-column:1/-1;border-top:1px solid #393531;padding-top:2rem;margin-top:3rem;display:flex;justify-content:space-between;color:#7f7871;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em}
.mobile-drawer{display:none}

@media(max-width:980px){
  .topbar{grid-template-columns:1fr auto}
  .top-note,.main-nav{display:none}.menu-btn{display:block}
  .hero{grid-template-columns:1fr 1fr}
  .hero-left{padding:6vw 4vw;grid-template-columns:1fr}.hero-number{display:none}
  .hero h1{font-size:5.3rem}
  .statement{grid-template-columns:auto .6fr 1.6fr}.statement .body{grid-column:3}
  .products{grid-template-columns:1fr 1fr}.p3{grid-column:1/-1;margin-top:0}.p3 .photo{height:500px}
  .atelier{grid-template-columns:1fr 1fr}
  .mood{grid-template-columns:1fr 1fr}.mood-copy{grid-column:1/-1;max-width:700px}
  .journal-grid{grid-template-columns:1fr 1fr}.story.digital{grid-column:1/-1;min-height:380px}
  .about{grid-template-columns:1fr;gap:4rem}
  .mobile-drawer{display:flex;position:fixed;inset:82px 0 0;background:var(--warm);z-index:40;flex-direction:column;padding:8vw;transform:translateX(100%);transition:.35s}
  .mobile-drawer.open{transform:none}
  .mobile-drawer a{font:400 3rem/1.5 "Italiana",serif;border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .topbar{height:72px;padding:0 5vw}.wordmark img{width:140px}
  .mobile-drawer{inset:72px 0 0}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-left{min-height:570px;padding:12vw 6vw}
  .hero h1{font-size:4.4rem}
  .hero-right{min-height:520px}
  .statement{grid-template-columns:auto 1fr;padding:20vw 6vw;gap:1.5rem}
  .statement h2,.statement .body{grid-column:1/-1}
  .collection{padding:18vw 6vw}.collection-head{grid-template-columns:1fr;gap:2rem}
  .products{grid-template-columns:1fr;gap:12vw}.p2,.p3{margin-top:0}.p1 .photo,.p2 .photo,.p3 .photo{height:540px}.p3{grid-column:auto}
  .atelier{grid-template-columns:1fr;min-height:0}.atelier-photo{min-height:520px}.atelier-copy{padding:18vw 7vw}
  .mood{grid-template-columns:1fr;padding:18vw 6vw;gap:7vw}.mood-copy{grid-column:auto}.mood-img.one{height:430px}.mood-img.two{height:540px}
  .journal{padding:18vw 6vw}.journal-intro{grid-template-columns:auto 1fr}.journal-intro h2{grid-column:1/-1}
  .journal-grid{grid-template-columns:1fr}.story{min-height:430px;padding:10vw 7vw}.story.visual{height:500px}.story.digital{grid-column:auto}
  .about{padding:20vw 6vw}.cta{height:650px}.cta-overlay{padding:8vw}
  footer{grid-template-columns:1fr 1fr;padding:14vw 6vw}.footer-logo{grid-column:1/-1;margin-bottom:2rem}.footer-bottom{flex-direction:column;gap:.5rem}
}