:root{color-scheme:light;--ink:#28261f;--muted:#5c5548;--paper:#fbf8f0;--line:#d9d0be;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #84612b;outline-offset:5px}
.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.header,.footer,.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.header{min-height:90px;border-bottom:1px solid var(--line)}
.brand{font:36px/.8 var(--serif);display:grid;text-align:center;gap:7px}
.brand small{font:600 9px/1 "DM Sans",Arial,sans-serif;letter-spacing:.26em}
nav{display:flex;gap:clamp(12px,4vw,40px);font-size:14px}
nav a:hover,.footer a:hover{text-decoration:underline;text-underline-offset:4px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-block:32px 56px;gap:30px}
.hero img{display:block;width:100%;height:auto;aspect-ratio:1.1;object-fit:cover}
h1,h2{font-family:var(--serif);font-weight:400;line-height:.99;margin:0}
h1{font-size:clamp(54px,7.2vw,110px)}
h2{font-size:clamp(44px,5vw,67px)}
h1 em{color:#715835}
.hero p,.story p{color:var(--muted);max-width:34ch;margin:24px 0}
.button{display:inline-flex;align-items:center;gap:22px;background:#30291f;color:white;padding:13px 19px;font-size:14px}
.button:hover{background:#56412a}
.collection{padding-block:24px 76px;border-top:1px solid var(--line)}
.section-head p{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.piece{display:block;background:transparent;border:0;padding:0;cursor:pointer;text-align:left;width:100%}
.piece img{width:100%;aspect-ratio:4/3;display:block;object-fit:cover;background:#e3d9c9}
.piece:hover img{filter:brightness(1.08)}
.piece > span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font:clamp(25px,3vw,37px)/1.1 var(--serif)}
.piece i{font:16px "DM Sans",Arial,sans-serif}
.story{background:#efe7d8}
.story-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,7vw,100px);align-items:center;padding-block:44px}
.story img{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center 53%}
.footer{padding-block:24px;font-size:14px}
dialog{width:min(560px,calc(100% - 40px));padding:0;border:0;background:var(--paper);color:var(--ink);max-height:90dvh}
dialog::backdrop{background:#261e17a8}
dialog img{display:block;width:100%;max-height:45vh;object-fit:cover}
.dialog-copy{padding:24px}
.dialog-copy p{margin-bottom:0}
.close{position:absolute;right:10px;top:10px;border:0;background:var(--paper);width:44px;height:44px;border-radius:50%;font-size:26px;cursor:pointer}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.header{min-height:76px}.hero,.story-inner{grid-template-columns:1fr}.hero{padding-block:38px;gap:26px}.hero img{aspect-ratio:1.2}.grid{grid-template-columns:1fr}.piece img{aspect-ratio:1.7}.collection{padding-bottom:44px}.story img{max-height:350px}.story-inner{gap:24px}.section-head{align-items:end}.section-head p{margin:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.brand img{display:block;width:135px;height:auto;mix-blend-mode:multiply}
.hero img{object-position:center}
.languages{display:flex;gap:3px}
.languages button{border:0;background:transparent;cursor:pointer;min-width:34px;min-height:40px}
.languages button[aria-pressed="true"]{color:#982418;text-decoration:underline;text-underline-offset:5px}
nav{align-items:center}
.products{gap:24px}
.product img{width:100%;height:clamp(245px,37vw,460px);object-fit:contain;display:block;background:#f1eee7}
.product h3{font:35px/1.05 var(--serif);margin:17px 0 10px}
.product p{margin:10px 0;color:var(--muted)}
.product .price{color:var(--ink);font-weight:600}
.product-link,.contact a{text-decoration:underline;text-underline-offset:4px}
.product-photo{position:relative;width:100%;display:block;border:0;background:transparent;padding:0;cursor:pointer}
.product-photo>span{position:absolute;bottom:12px;right:12px;background:var(--paper);padding:7px 12px;border-radius:30px}
.contact{display:flex;gap:16px}
@media(max-width:700px){.header{flex-wrap:wrap;justify-content:center;gap:6px;padding:12px 0}.brand img{width:113px}.header nav{justify-content:center;flex-wrap:wrap;width:100%}.products{gap:36px}.product img{height:360px}.footer{flex-wrap:wrap}}

.mobile-nav { display: none; }
@media (max-width: 700px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .header {
    min-height: 68px;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding-block: 6px;
  }
  .header nav { width: auto; }
  .header nav > a { display: none; }
  .languages button { min-width: 44px; min-height: 44px; }

  .hero { gap: 14px; padding-block: 24px 28px; }
  .hero-copy { display: contents; }
  .hero h1 { grid-row: 1; font-size: clamp(39px, 11vw, 60px); }
  .hero > img { grid-row: 2; aspect-ratio: 1.55; }
  .hero p { grid-row: 3; margin: 0; max-width: 42ch; }
  .hero .button { grid-row: 4; justify-content: center; min-height: 48px; }

  .collection h2, .story h2 { font-size: clamp(34px, 9.5vw, 44px); }
  .product img { height: clamp(235px, 72vw, 350px); }
  .product h3 { font-size: 30px; }
  .product-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: #30291f;
    color: #fff;
    text-decoration: none;
  }
  .product-photo > span { font-size: 14px; }

  .mobile-nav {
    position: fixed;
    z-index: 2;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .mobile-nav a {
    display: grid;
    place-items: center;
    min-height: 48px;
    padding-inline: 4px;
    text-align: center;
  }
  .mobile-nav .mobile-contact { color: white; background: #30291f; border-radius: 4px; }
}