:root{
  --paper:#f3eee5;
  --ink:#26241f;
  --muted:#746d62;
  --line:rgba(38,36,31,.18);
  --cream:#faf7f0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-weight:300;line-height:1.6}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
h1,h2{font-family:"Italiana",serif;font-weight:400;line-height:1.03;margin:0}
h1{font-size:clamp(4rem,9vw,9rem)}
h2{font-size:clamp(2.9rem,5.6vw,5.8rem)}
p{margin:0 0 1rem}
.wrap{padding:10rem 7vw}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:500;margin-bottom:1.4rem}

.topbar{position:fixed;inset:0 0 auto;z-index:30;height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:white;transition:.3s}
.topbar.scrolled{height:72px;background:rgba(243,238,229,.95);color:var(--ink);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.identity{display:flex;align-items:center;gap:.8rem;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.identity img{width:42px;height:42px;object-fit:cover;border-radius:50%}
.topbar nav{display:flex;gap:2rem;text-transform:uppercase;letter-spacing:.09em;font-size:.75rem}
.menu-button{display:none;background:transparent;border:0;color:inherit;text-transform:uppercase;letter-spacing:.1em}

.hero{height:100svh;min-height:700px;position:relative;overflow:hidden;background:#8e765e}
.hero>img{height:100%;object-fit:cover;object-position:center center;filter:brightness(1.10)}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,17,14,.44),rgba(18,17,14,.03) 72%)}
.hero-copy{position:absolute;left:7vw;bottom:10vh;color:white;max-width:900px;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.hero-copy>p,.hero-copy>span{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.hero-copy h1{margin:.6rem 0 1.5rem}

.atelier-block{display:grid;grid-template-columns:1.05fr .95fr;background:#ded2c1}
.atelier-image img{height:100%;min-height:780px;object-fit:cover}
.atelier-text{padding:9rem 7vw;align-self:center}
.atelier-text p{font-size:1.08rem;max-width:580px}
.atelier-text h2{font-size:clamp(2.7rem,4.7vw,5rem);margin-bottom:2.5rem}

.atelier-details{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:end}
.atelier-details img{object-fit:cover}
.atelier-door img{aspect-ratio:4/5}
.atelier-signature img{aspect-ratio:4/5}

.demarche{display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;align-items:end;background:var(--cream)}
.demarche-text{font-size:1.15rem;max-width:520px}

.section-title{display:grid;grid-template-columns:1fr 2fr;align-items:end;margin-bottom:5rem}
.masonry{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
.masonry figure{margin:0}
.masonry .wide{grid-column:span 7}
.masonry .tall{grid-column:span 5}
.masonry .square{grid-column:span 6;margin-top:4rem}
.masonry img{height:100%;object-fit:cover}
.masonry .wide img{aspect-ratio:4/3}
.masonry .tall img{aspect-ratio:4/5}
.masonry .square img{aspect-ratio:1/1}
figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.8rem;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
figcaption span:last-child{color:var(--muted);text-align:right}

.contact{background:var(--cream);padding:10rem 7vw;text-align:center}
.contact-inner{max-width:900px;margin:auto}
.contact-inner>img{width:110px;height:110px;object-fit:cover;border-radius:50%;margin:0 auto 2.5rem}
.contact h2{margin-bottom:2.5rem}
.links{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:2.5rem}
.links a{border-bottom:1px solid currentColor}
footer{padding:3rem 7vw;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:900px){
  .topbar nav{display:none;position:fixed;inset:72px 0 auto;background:var(--paper);color:var(--ink);padding:2rem 7vw;flex-direction:column;border-bottom:1px solid var(--line)}
  .topbar nav.open{display:flex}
  .menu-button{display:block}
  .wrap{padding:7rem 6vw}
  .atelier-block,.atelier-details,.demarche{grid-template-columns:1fr}
  .section-title{grid-template-columns:1fr;gap:1rem}
  .masonry .wide,.masonry .tall,.masonry .square{grid-column:span 12;margin-top:1rem}
  .atelier-image img{min-height:0;aspect-ratio:4/5}
  .atelier-text{padding:7rem 6vw}
  .atelier-details{gap:1.2rem}
  .atelier-door img,.atelier-signature img{aspect-ratio:4/5}
}

@media(max-width:560px){
  .identity span{display:none}
  .hero{height:88svh;min-height:620px}
  .hero>img{object-position:66% center;filter:brightness(1.16)}
  .veil{background:linear-gradient(180deg,rgba(18,17,14,.12) 0%,rgba(18,17,14,.08) 42%,rgba(18,17,14,.60) 100%)}
  .hero-copy{left:6vw;right:6vw;bottom:5.5vh;max-width:88vw}
  .hero-copy h1{font-size:3.45rem;margin:.45rem 0 1rem}
  .hero-copy>span{display:block;max-width:310px;line-height:1.55}
  h2{font-size:2.8rem}
  .atelier-text h2{font-size:2.75rem}
  figcaption{font-size:.65rem}
  footer{flex-direction:column;gap:1rem}
}