@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--paper:#faf6ef;--ink:#28261d;--olive:#3d492f;--line:#d8cdbc;--serif:"Playfair Display",Georgia,serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 "DM Sans",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header,footer{display:flex;align-items:center;justify-content:space-between;padding:20px 6vw;gap:18px}header{border-bottom:1px solid var(--line)}.brand{font:600 clamp(18px,3vw,29px)/1.2 var(--serif)}header>a:last-child,footer>a:last-child{font-size:14px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:530px}.intro{padding:75px 6vw;align-self:center}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.19em;color:var(--olive)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06}h1{font-size:clamp(45px,6.1vw,100px);margin:14px 0 23px}em{color:var(--olive)}.intro>p:not(.eyebrow){max-width:375px}.cta{display:inline-flex;align-items:center;gap:22px;background:var(--olive);color:white;padding:13px 20px;margin-top:29px;font-weight:600}.hero figure{position:relative;min-height:340px;background:#dadbd8}.hero img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 47%}.hero figcaption{position:absolute;bottom:18px;right:18px;background:var(--paper);padding:6px 12px;font-size:12px}.collection{padding:65px 6vw 75px;border-top:1px solid var(--line)}h2{font-size:clamp(35px,5vw,65px)}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:30px}#filters{display:flex;gap:7px;flex-wrap:wrap}#filters button,#other{border:1px solid var(--line);background:transparent;padding:5px 13px;border-radius:50px}#filters button[aria-pressed=true]{background:var(--olive);color:white;border-color:var(--olive)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 17px}.card{display:block;text-align:left;border:0;background:transparent;padding:0;width:100%}.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center var(--position);background:#deded8}.card:hover h3{text-decoration:underline}.card span{display:block;font-size:12px;color:var(--olive);margin-top:10px}.card h3{font-size:clamp(18px,2.4vw,27px);margin-top:4px}.atelier{display:grid;grid-template-columns:1fr 1fr;background:var(--olive);color:var(--paper);align-items:center}.atelier img{display:block;width:100%;max-height:400px;object-fit:cover}.atelier div{padding:45px 6vw}.atelier p{max-width:390px;margin-top:20px}footer{padding-block:30px}dialog{border:0;padding:0;background:var(--paper);color:var(--ink);max-width:min(850px,94vw);max-height:90dvh}dialog::backdrop{background:#201d17b8}.detail{display:grid;grid-template-columns:1fr 1fr;align-items:center}.detail img{width:100%;height:min(62dvh,560px);object-fit:contain;background:#deded8}.detail div{padding:26px}.detail h2{font-size:clamp(30px,5vw,53px);margin:8px 0 14px}.close{position:absolute;right:8px;top:8px;border:1px solid var(--line);background:var(--paper);border-radius:50%;width:42px;height:42px;font-size:25px;line-height:1}#other{margin-top:15px}
@media(max-width:740px){.hero,.atelier{grid-template-columns:1fr}.intro{padding-block:46px}.hero figure{min-height:360px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection{padding-block:42px}.atelier img{max-height:280px}.detail{grid-template-columns:1fr}.detail img{height:48dvh}.detail div{padding:18px}}
.catalog-note{margin:-10px 0 24px;color:var(--olive)}
.card .price,#detail-price{font-size:15px;font-weight:700;margin-top:9px}
.atelier .atelier-photos{display:grid;grid-template-columns:1fr 1fr;padding:0}
.atelier-photos img{height:100%;aspect-ratio:4/5}

:root {
  color-scheme: dark;
  --paper: #111110;
  --ink: #f6efe2;
  --olive: #d8b77c;
  --line: #51483b;
}
.hero, .hero figure, .atelier { background: #181816; }
.hero img { inset: 4%; width: 92%; height: 92%; }
.hero figcaption { color: var(--ink); }
.cta, #filters button[aria-pressed=true] { color: #181816; }
.atelier { color: var(--ink); }