@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--paper:#f7f3eb;--ink:#24231e;--accent:#ae7950;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible+span{outline:2px solid #b47747;outline-offset:4px}.announcement{background:#26261e;color:#f4e7d4;text-align:center;font-size:9px;letter-spacing:.24em;padding:9px}.announcement span,.brand span{color:var(--accent)}.announcement span{margin:0 12px}header{height:68px;position:sticky;top:0;z-index:3;background:#f7f3ebf7;backdrop-filter:blur(14px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;border-bottom:1px solid #27231e15}.brand{font:36px/1 var(--serif);width:max-content}nav{display:flex;gap:30px;font-size:13px}nav a:hover,.line:hover{color:#895332}.bag{justify-self:end;background:none;border:0;font-size:13px}.bag span{display:inline-grid;place-items:center;background:#e7dccd;border-radius:50%;width:25px;height:25px;margin-left:5px}.hero{min-height:630px;height:77svh;max-height:920px;position:relative;isolation:isolate;display:flex;align-items:center;overflow:hidden;color:#fff8ee;background:#6c5847 url(assets/hero.jpg) center 46%/cover}.hero video{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 46%;inset:0;z-index:-2}.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#21170ed6 0%,#21170e82 38%,#21170e0d 80%)}.hero-content{padding:48px 8%;animation:enter .95s both}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.23em;margin:0 0 15px}.hero h1{font:clamp(89px,12vw,184px)/.77 var(--serif);letter-spacing:-.04em;margin:25px 0 30px}.hero h1 em{color:#eed5b7}.hero-content>p:not(.eyebrow){line-height:1.6;margin:0 0 25px}.cta,.dark{background:#f7ede0;color:#251f18;padding:15px 18px;display:inline-flex;justify-content:space-between;align-items:center;gap:38px;font-size:13px;font-weight:600;border:0;transition:background .25s,color .25s,transform .25s}.cta:hover{background:#d5ae86;transform:translateY(-3px)}.motion{position:absolute;bottom:23px;right:5%;border:1px solid #fff9;border-radius:50%;background:#221a1380;color:white;width:43px;height:43px}.collection{padding:78px 6% 94px;scroll-margin-top:65px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:22px;margin-bottom:30px}h2{font:clamp(43px,6vw,86px)/.94 var(--serif);letter-spacing:-.035em;margin:0}.filters{display:flex;flex-wrap:wrap;gap:6px}.filters button{border:1px solid #dbd0c0;background:transparent;padding:9px 13px;border-radius:30px;font-size:12px}.filters button[aria-pressed=true]{color:white;background:var(--ink);border-color:var(--ink)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.product{border:0;background:none;text-align:left;padding:0;min-width:0;animation:enter .45s both}.product:nth-child(2){animation-delay:.08s}.product:nth-child(3){animation-delay:.16s}.photo{display:block;position:relative;overflow:hidden;background:#e0d3c4;aspect-ratio:4/5}.photo img,.editorial img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.3,1)}.product:hover img,.product:focus-visible img,.editorial-image:hover img{transform:scale(1.065)}.plus{position:absolute;right:13px;bottom:13px;display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--paper);font-size:22px;transition:transform .35s}.product:hover .plus{transform:rotate(90deg)}.product-meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:12px}.product-meta strong{font:clamp(22px,2.7vw,37px)/1 var(--serif)}.price{white-space:nowrap;font-size:13px}.product small{display:block;margin-top:6px;color:#625648}.editorial{display:grid;grid-template-columns:1fr 1fr;background:#e9ddca;scroll-margin-top:68px}.editorial-image{overflow:hidden;min-height:460px;position:relative}.editorial-image img{position:absolute;object-position:center 43%}.editorial-copy{padding:70px 13%;align-self:center}.editorial-copy>p:not(.eyebrow){max-width:320px;line-height:1.6}.line{border-bottom:1px solid;padding-bottom:5px;display:inline-block;margin-top:10px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 6%;background:#26261e;color:var(--paper);font-size:12px}footer p{color:#e2d3be}dialog{border:0;color:var(--ink);background:var(--paper);padding:0;max-height:calc(100dvh - 28px);max-width:calc(100vw - 24px);overscroll-behavior:contain}dialog::backdrop{background:#1a1512a8;backdrop-filter:blur(5px)}dialog[open]{animation:enter .32s both}body:has(dialog[open]){overflow:hidden}.detail-wrap{display:grid;grid-template-columns:1fr 1fr;width:min(760px,calc(100vw - 24px));position:relative}.detail-wrap>img{width:100%;height:100%;min-height:440px;object-fit:cover}.detail-copy{padding:65px 30px 35px}.detail-copy h2,.cart-head h2{font-size:50px}.close{position:absolute;right:13px;top:10px;background:var(--paper);border:1px solid #ded3c3;border-radius:50%;width:40px;height:40px;font-size:25px;line-height:1}.dark{background:var(--ink);color:#fff9ef;width:100%;margin-top:20px}.dark:hover{background:#714c33}fieldset{border:0;padding:0;margin:24px 0 0}legend{font-size:13px;margin-bottom:8px}#sizes{display:flex;gap:8px}#sizes label{position:relative}#sizes input{position:absolute;opacity:0}#sizes span{display:grid;place-items:center;width:39px;height:37px;border:1px solid #c6b8a6;cursor:pointer}#sizes input:checked+span{background:var(--ink);color:white}#cart{position:fixed;inset:0 0 0 auto;margin:0;max-height:100dvh;height:100dvh;width:min(440px,100vw);max-width:100vw;padding:26px}#cart[open]{animation:slide .35s both;display:flex;flex-direction:column}.cart-head{padding-right:40px}.cart-end{margin-top:auto;padding-top:20px}.cart-end div{border-top:1px solid #cbbdaa;padding-top:15px;display:flex;justify-content:space-between}.cart-end p{font-size:13px;color:#625648}.item{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:12px;border-bottom:1px solid #ded3c3;padding:12px 0}.item img{width:62px;height:76px;object-fit:cover}.item p{margin:0 0 5px}.item button{border:1px solid #cbbdaa;background:none;min-width:32px;height:32px}.item small{display:block;margin-bottom:7px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,15px);background:#26261e;color:white;padding:12px 19px;border-radius:3px;z-index:4;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}@keyframes enter{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}@keyframes slide{from{translate:100% 0}to{translate:0 0}}@supports(animation-timeline:view()){.editorial-copy{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 75%}}
@media(max-width:700px){header{height:61px;padding:0 4%;gap:7px}.brand{font-size:28px}nav{gap:10px;font-size:11px}.bag{font-size:11px;padding:0}.bag span{width:21px;height:21px;margin-left:2px}.hero{min-height:520px;height:72svh}.hero-content{padding-inline:6%}.hero video,.hero{object-position:57% center;background-position:57% center}.hero:after{background:linear-gradient(90deg,#21170ebd,#21170e37)}.collection{padding:55px 5% 62px}.section-head{align-items:start;flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.product-meta{flex-direction:column;gap:4px}.editorial{grid-template-columns:1fr}.editorial-image{min-height:390px}.editorial-copy{padding:45px 7% 60px}footer{flex-wrap:wrap}.detail-wrap{grid-template-columns:1fr}.detail-wrap>img{height:240px;min-height:0;object-position:center 30%}.detail-copy{padding:24px}.detail-copy h2{font-size:39px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.scroll-progress{display:none;position:absolute;inset:auto 0 -2px;height:3px;background:#ae7950;transform:scaleX(0);transform-origin:left;pointer-events:none}
.scroll-motion .scroll-progress{display:block}
.scroll-motion .hero video{transform:translateY(var(--hero-offset,0px)) scale(1.13)}
.scroll-motion .hero-content{transform:translateY(var(--copy-offset,0px))}
/* One-time entrances keep the catalog steady after it has been revealed. */
.scroll-motion [data-reveal] {
  animation: none;
  transition: opacity .65s ease, transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.scroll-motion [data-reveal]:not(.revealed):not(:focus-within) {
  opacity: 0;
  transform: translate3d(var(--enter-x, 0px), var(--enter-y, 48px), 0);
}
.scroll-motion [data-reveal]:focus-within { transition-delay: 0ms; }
.collection, .editorial { overflow: clip; }
.editorial-image { --enter-x: -70px; --enter-y: 0px; }
.editorial-copy { --enter-x: 70px; --enter-y: 0px; --reveal-delay: 150ms; }

.scroll-motion .product .photo {
  clip-path: inset(0);
  transition: clip-path .95s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms);
}
.scroll-motion .product:not(.revealed):not(:focus-within) .photo { clip-path: inset(100% 0 0); }
.scroll-motion .product .photo img {
  transform: scale(1);
  transition: transform 1.15s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms);
}
.scroll-motion .product:not(.revealed):not(:focus-within) .photo img { transform: scale(1.18); }
.scroll-motion .product:is(:hover,:focus-visible) .photo img {
  transform: scale(1.08);
  transition-delay: 0ms;
}

/* The editorial crop follows scroll in either direction. */
@supports (animation-timeline: view()) {
  .scroll-motion .editorial-image img {
    animation: editorial-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes editorial-zoom {
  from { scale: 1.04; translate: 0 -2%; }
  to { scale: 1.22; translate: 0 3%; }
}
@media (max-width: 700px) {
  .editorial-image { --enter-x: -30px; }
  .editorial-copy { --enter-x: 30px; --reveal-delay: 80ms; }
  .scroll-motion .product { --enter-y: 30px; }
}
.cta span,.dark span,.motion,.line,footer>a:last-child{font-family:Arial,"DejaVu Sans",sans-serif}
