/* Light page with a cinematic dark hero. Same look whatever the phone's dark mode setting. */
:root{
  --bg:#F2F2EE; --paper:#FFFFFF; --ink:#141B16; --muted:#6C726D; --line:#E2E3DD;
  --forest:#18231C; --lime:#C6E37E; --lime-ink:#18231C;
  --glass:rgba(255,255,255,.18); --glass-line:rgba(255,255,255,.32);
  --serif:"Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme: light;
  box-sizing:border-box;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: light; } }
:root[data-theme="dark"]{ color-scheme: light; }
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--forest)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:10px}
.wrap{width:100%;max-width:72rem;margin:0 auto;padding:0 1.1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frost{background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.ic{width:1.1rem;height:1.1rem;flex:none}

/* ---------- Hero: full-bleed, slow-moving photos ---------- */
.hero{position:relative;height:100svh;min-height:36rem;color:#fff;overflow:hidden;background:var(--forest) url(/video/shop-window.jpg) center/cover no-repeat}
.layer{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.layer.on{opacity:1}
.layer img{width:100%;height:100%;object-fit:cover;transform:scale(1.18) translate3d(var(--x0,0),var(--y0,0),0);filter:saturate(1.08)}
.layer.on img{animation:drift 9s linear forwards}
@keyframes drift{to{transform:scale(1.04) translate3d(var(--x1,0),var(--y1,0),0)}}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.vid + .vid{display:none}
.hero.video .layer{opacity:0!important}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,14,11,.55) 0%,rgba(10,14,11,.05) 26%,rgba(10,14,11,.08) 48%,rgba(10,14,11,.85) 100%)}


.mark{font-family:var(--serif);font-size:clamp(1.3rem,5.4vw,1.6rem);line-height:1;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:500;text-decoration:none;padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap;cursor:pointer;border:0}
.hero-body{position:absolute;z-index:3;left:0;right:0;bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 1.6rem)}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-bottom:.8rem}
.kicker::before{content:"";width:1.6rem;height:1px;background:currentColor}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,15vw,7.5rem);line-height:.9;letter-spacing:-.025em;margin:0 0 1rem;max-width:9ch;text-wrap:balance}
.hero h1 em{font-style:italic}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hero-row p{margin:0;max-width:22rem;font-size:1rem;line-height:1.5;opacity:.88}
.now{display:flex;align-items:center;gap:.7rem;padding:.45rem .45rem .45rem .95rem;border-radius:1.2rem;text-decoration:none;min-width:0;max-width:19rem;cursor:pointer;text-align:left}
.now small{display:block;font-size:.7rem;opacity:.8;letter-spacing:.04em}
.now b{display:block;font-weight:500;font-size:.88rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12.5rem}
.now .pp{font-family:var(--serif);font-size:1.15rem}
.round{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;flex:none;border:0;cursor:pointer}
.round.lime{background:var(--lime);color:var(--lime-ink)}
.round.white{background:#fff;color:var(--ink)}
.bars{display:flex;gap:.35rem;margin-top:1.3rem}
.bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.bars i.done::after{transform:scaleX(1)}
.bars i.on::after{animation:fill var(--dur,6s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.fade-up{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)}
.ready .fade-up{opacity:1;transform:none;filter:none;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease),filter 1.2s var(--ease);transition-delay:var(--d,0s)}

/* ---------- Sections ---------- */
section,main{scroll-margin-top:3.6rem}
.sec{padding:3.4rem 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,9vw,3.4rem);line-height:.95;letter-spacing:-.02em;margin:0}
.sec-head p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}
.count{color:var(--muted);font-size:.92rem;white-space:nowrap}

/* Category pills */
.chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding:.15rem 1.1rem;margin:0 -1.1rem}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;white-space:nowrap;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

/* Carousel of tall cards */
.car{--cw:min(46vw,12.4rem);display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:.4rem 1.1rem 1.4rem;scrollbar-width:none;scroll-padding:0 1.1rem}
.car::-webkit-scrollbar{display:none}
.slide{flex:0 0 var(--cw);scroll-snap-align:start;position:relative;aspect-ratio:3/4.1;border-radius:1.5rem;overflow:hidden;background:#dfe1da;text-decoration:none;color:#fff;cursor:pointer;
  box-shadow:0 28px 46px -30px rgba(20,27,22,.6);transition:transform .6s var(--ease)}
.slide:hover{transform:translateY(-4px)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.slide:hover img{transform:scale(1.05)}
.slide .tag{position:absolute;top:.55rem;right:.55rem;font-size:.68rem;font-weight:500;padding:.25rem .7rem;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink)}
.label{position:absolute;left:.4rem;right:.4rem;bottom:.4rem;display:flex;align-items:center;gap:.4rem;padding:.45rem .4rem .45rem .65rem;border-radius:1rem;color:var(--ink);
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.label div{flex:1;min-width:0}
.label b{display:block;font-weight:500;font-size:.76rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.label span{font-family:var(--serif);font-size:1.02rem;line-height:1.05}
.label span.ask{font-family:var(--sans);font-size:.7rem;color:var(--muted)}
.label .round{width:1.75rem;height:1.75rem;background:var(--forest);color:#fff}
.label .round .ic{width:.9rem;height:.9rem}

/* Search + sort */
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;margin:1rem 0 1.3rem}
.search{position:relative;display:block}
.search svg{position:absolute;z-index:1;left:1rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{width:100%;font:inherit;font-size:1rem;padding:.8rem 1rem .8rem 2.75rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--forest)}
.sort{font:inherit;font-size:.9rem;padding:.6rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}

/* Grid of image-first cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .8rem;margin:0;padding:0;list-style:none}
@media (min-width:40rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem 1.4rem}}
@media (min-width:64rem){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.2rem 2rem}}
/* Editorial product cards: photo left alone, quiet details underneath */
.item a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);background:var(--paper);border-radius:1.25rem;padding:.5rem;
  border:1px solid rgba(20,27,22,.06);box-shadow:0 1px 2px rgba(20,27,22,.03);transition:box-shadow .8s var(--ease),border-color .8s var(--ease)}
.item a:hover{box-shadow:0 24px 50px -34px rgba(20,27,22,.35);border-color:rgba(20,27,22,.1)}
.item .tile{position:relative;aspect-ratio:4/5;border-radius:.9rem;overflow:hidden;background:#ECEDE7}
.item .tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.item a:hover .tile img{transform:scale(1.04)}
.item .new{display:none}
.item .info{display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding:.85rem .45rem .55rem;flex:1;align-content:start}
.item .info .k{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .info .k b{font-weight:500;color:#5E7A4E}
.item .info .k .cond{display:none}
@media (min-width:40rem){.item .info .k .cond{display:inline}}
.item .info h3{font-family:var(--serif);font-weight:400;font-size:1.08rem;line-height:1.18;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .info .p{font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1;letter-spacing:0;margin-top:.2rem}
.item .info .p.ask{font-weight:400;font-size:.78rem;color:var(--muted);letter-spacing:0}
@media (min-width:40rem){
  .item a{padding:.6rem}
  .item .info{grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;padding:1.05rem .55rem .7rem}
  .item .info .k{grid-column:1/-1}
  .item .info h3{font-size:1.22rem}
  .item .info .p{margin-top:.05rem;text-align:right;white-space:nowrap;font-size:1.45rem}
}
.empty{padding:2rem 0}
.empty p{margin:0 0 .9rem}

/* Story */
.story{margin:3rem 0 0;padding:0 1.1rem}
.story .panel{position:relative;max-width:72rem;margin:0 auto;border-radius:2.2rem;overflow:hidden;color:#fff;background:var(--forest);min-height:30rem;display:flex;align-items:flex-end}
.story .panel{background:var(--forest) url(/video/night-window-2.jpg) center/cover no-repeat}
.story .panel video{opacity:.75}
.story .panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,27,22,.2),rgba(20,27,22,.92) 75%)}
.story .inner{position:relative;z-index:1;padding:2rem 1.5rem}
@media (min-width:52rem){.story .inner{padding:3.5rem 4rem}}
.story h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,10vw,4rem);line-height:.95;margin:0 0 1rem}
.story p{margin:0 0 1rem;max-width:34rem;opacity:.9}
.facts{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0}
.facts div{padding:.6rem 1rem;border-radius:1rem}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1}
.facts span{font-size:.78rem;opacity:.85}

footer{padding:2rem 0 calc(6.5rem + env(safe-area-inset-bottom,0px));font-size:.85rem;color:var(--muted)}
@media (min-width:52rem){footer{padding-bottom:2.5rem}}
.cats{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:1rem}
.cats:empty{display:none}
.cats a{color:var(--ink);text-decoration:none;font-size:.92rem}

/* Floating bottom bar (phones) */
.dock{position:fixed;z-index:20;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + .8rem);transform:translate(-50%,140%);display:flex;gap:.25rem;padding:.35rem;border-radius:999px;background:rgba(20,27,22,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.dock.show{transform:translate(-50%,0)}
.dock a{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;color:rgba(255,255,255,.75);text-decoration:none;transition:background .35s var(--ease),color .35s}
.dock a.on{background:var(--lime);color:var(--lime-ink)}
@media (min-width:52rem){.dock{display:none}}

/* Item sheet */
.sheet{position:fixed;inset:0;z-index:40;background:var(--bg);transform:translate3d(0,100%,0);transition:transform .65s var(--ease);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet-hero{position:relative;height:58svh;min-height:22rem;border-radius:0 0 2.2rem 2.2rem;overflow:hidden;background:var(--forest)}
.sheet-hero img{width:100%;height:100%;object-fit:cover}
.sheet-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.6))}
.sheet-top{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 1rem);left:1rem;right:1rem;display:flex;justify-content:space-between}
.sheet-top .round{width:2.8rem;height:2.8rem;color:#fff}
.sheet-cap{position:absolute;z-index:2;left:1.3rem;right:1.3rem;bottom:1.4rem;color:#fff}
.sheet-cap small{font-size:.8rem;opacity:.85;display:flex;align-items:center;gap:.35rem}
.sheet-cap h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,7.5vw,2.8rem);line-height:1.02;margin:.3rem 0 0}
.sheet-body{max-width:44rem;margin:0 auto;padding:1.3rem 1.2rem calc(7rem + env(safe-area-inset-bottom,0px))}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.4rem}
.stats div{display:flex;align-items:center;gap:.55rem;padding:.7rem .75rem;border-radius:1.1rem;background:var(--paper);border:1px solid var(--line);min-width:0}
.stats div span{display:block;min-width:0}
.stats b{display:block;font-weight:500;font-size:.85rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats small{font-size:.72rem;color:var(--muted)}
.sheet-body h3{font-weight:500;font-size:1.05rem;margin:0 0 .4rem}
.sheet-body p{margin:0 0 1.5rem;color:var(--muted);font-size:.98rem}
.more-row{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;margin:0 -1.2rem;padding:0 1.2rem .4rem}
.more-row::-webkit-scrollbar{display:none}
.more-row button{flex:0 0 7.5rem;aspect-ratio:1;border-radius:1.1rem;overflow:hidden;border:0;padding:0;cursor:pointer;background:#dfe1da}
.more-row img{width:100%;height:100%;object-fit:cover}
.buybar{position:fixed;z-index:41;left:0;right:0;bottom:0;padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom,0px));background:rgba(242,242,238,.92);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;gap:1rem;transform:translate3d(0,110%,0);transition:transform .6s var(--ease) .1s}
.sheet.open + .buybar{transform:none}
.buybar small{display:block;font-size:.75rem;color:var(--muted)}
.buybar b{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1}
.buy{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;background:var(--lime);color:var(--lime-ink);font-weight:600;text-decoration:none}


/* ---------- Welcome intro ---------- */
.intro{position:fixed;inset:0;z-index:80;color:#fff;background:var(--forest) url(/video/arched-window.jpg) center/cover no-repeat;overflow:hidden;
  transform:translate3d(0,var(--drag,0px),0);touch-action:none}
.intro.leaving{transition:transform .9s var(--ease),opacity .9s var(--ease);transform:translate3d(0,-100%,0)}
.intro.snap{transition:transform .6s var(--ease),opacity .6s var(--ease)}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,11,.5) 0%,rgba(10,14,11,0) 30%,rgba(10,14,11,.1) 50%,rgba(10,14,11,.85) 100%);pointer-events:none}
.intro-in{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 1.4rem) 1.4rem calc(env(safe-area-inset-bottom,0px) + 1.4rem)}
.intro .mark{text-align:center;font-size:1.7rem}
.intro-msg{text-align:left}
.intro-msg .kicker{margin-bottom:.9rem}
.intro-msg h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,13vw,6rem);line-height:.92;letter-spacing:-.02em;margin:0 0 1rem;max-width:9ch}
.intro-msg h2 em{font-style:italic}
.intro-msg p{margin:0 0 .9rem;max-width:22rem;opacity:.9;line-height:1.5}
.enter{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:0 auto}
.slider{position:relative;width:3rem;height:5.6rem;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:#fff}
.line{position:relative;display:block;width:1.5px;height:4.8rem;border-radius:2px;background:linear-gradient(to top,rgba(255,255,255,.6),rgba(255,255,255,.06));animation:lineglow 2.4s ease-in-out infinite}
.line::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.85),0 0 22px 6px rgba(255,255,255,.35);animation:rise 2.4s cubic-bezier(.45,0,.25,1) infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translateY(-4.8rem);opacity:0}}
@keyframes lineglow{0%,100%{opacity:.55}50%{opacity:1}}
.chev{display:flex;flex-direction:column;align-items:center;gap:0}
.chev svg{width:1.1rem;height:1.1rem;opacity:.3;animation:chev 1.8s ease-in-out infinite}
.chev svg:nth-child(1){animation-delay:.4s}.chev svg:nth-child(2){animation-delay:.2s}
@keyframes chev{0%,100%{opacity:.25;transform:translateY(3px)}50%{opacity:1;transform:translateY(-2px)}}
.knob{width:2.9rem;height:2.9rem;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:.85rem;animation:knob 2.4s var(--ease) infinite}
@keyframes knob{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-.9rem)}}
.enter small{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* ---------- Carousel swipe hint ---------- */
.car-foot{display:flex;align-items:center;gap:.9rem;padding:0 1.1rem;max-width:72rem;margin:0 auto}
.track{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;max-width:9rem}
.track i{display:block;height:100%;width:var(--w,30%);background:var(--forest);border-radius:3px;transform:translateX(var(--x,0%));transition:transform .2s linear}
.swipe{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted)}
.swipe svg{width:1rem;height:1rem;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.car-arrows{margin-left:auto;display:flex;gap:.4rem}
.car-arrows button{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer}
.car-arrows button:disabled{opacity:.35;cursor:default}
.car::after{content:"";flex:0 0 .1px}


/* ---------- Breathing space: video moments ---------- */
.band{position:relative;height:min(62svh,32rem);min-height:20rem;margin:3.6rem 0 0;overflow:hidden;color:#fff;background:var(--forest) center/cover no-repeat}
.band video,.moment video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after,.moment::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,11,.15),rgba(10,14,11,.25) 40%,rgba(10,14,11,.7))}
.band .in{position:absolute;z-index:1;inset:auto 0 0 0;padding:0 1.3rem 2.2rem;text-align:center}
.band blockquote{margin:0 auto;font-family:var(--serif);font-size:clamp(2.3rem,10vw,4.4rem);line-height:.98;letter-spacing:-.02em;max-width:14ch}
.band blockquote em{font-style:italic}
.band small{display:block;margin-top:.9rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.moment{grid-column:1/-1;position:relative;overflow:hidden;border-radius:1.6rem;aspect-ratio:16/11;max-height:24rem;color:#fff;margin:1rem 0;background:var(--forest) center/cover no-repeat;list-style:none}
@media (min-width:52rem){.moment{aspect-ratio:21/8}}
.moment .in{position:absolute;z-index:1;left:1.3rem;right:1.3rem;bottom:1.3rem}
.moment .kicker{font-size:.72rem;margin-bottom:.5rem}
.moment h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,8.5vw,3.2rem);line-height:.95;letter-spacing:-.02em;margin:0 0 .45rem}
.moment p{margin:0;font-size:.92rem;opacity:.88;max-width:24rem;line-height:1.45}


/* ---------- Chapter header for the collection ---------- */
.chapter{position:relative;min-height:min(80svh,42rem);color:#fff;overflow:hidden;background:var(--forest) url(/video/kitchen.jpg) center/cover no-repeat;display:flex;align-items:flex-end;margin-bottom:1.6rem}
.chapter video,.end video,.story .panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chapter::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,11,.25),rgba(10,14,11,0) 30%,rgba(10,14,11,.15) 55%,rgba(10,14,11,.8))}
.chapter .wrap{position:relative;z-index:1;padding-bottom:2.4rem}
.chapter h2{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,14vw,6.5rem);line-height:.9;letter-spacing:-.025em;margin:0 0 .8rem}
.chapter p{margin:0 0 .9rem;max-width:22rem;opacity:.9;line-height:1.5}
.chapter .count{color:rgba(255,255,255,.8)}

/* ---------- Closing footer over a soft, blurred loop ---------- */
footer.end{position:relative;overflow:hidden;color:#fff;background:#2a2118 url(/video/rattan-blur.jpg) center/cover no-repeat;margin-top:3.4rem;padding:4.5rem 0 calc(3rem + env(safe-area-inset-bottom,0px))}
@media (min-width:52rem){footer.end{padding-bottom:3rem}}
footer.end::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,10,.45),rgba(22,16,10,.75));pointer-events:none}
footer.end .wrap{position:relative;z-index:1}
footer.end h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,11vw,4.6rem);line-height:.95;letter-spacing:-.02em;margin:0 0 .9rem;max-width:10ch}
footer.end h2 em{font-style:italic}
footer.end p{margin:0 0 1.5rem;max-width:24rem;opacity:.9;line-height:1.5;font-size:1rem}
footer.end .cats{margin:2.4rem 0 1rem}
footer.end .cats a{color:#fff;opacity:.9}
footer.end small{font-size:.8rem;opacity:.7;display:block;line-height:1.5}

.reveal{opacity:0;transform:translate3d(0,26px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .chev svg,.knob,.swipe svg,.line{animation:none}
  .line::after{animation:none;bottom:50%}
  .reveal,.fade-up{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .layer.on img{animation:none;transform:scale(1.04)}
  .bars{display:none}
  *{transition-duration:.01ms!important}
}

/* =================== Shared: top bar, side menu, dock, eBay pills =================== */
.top{position:fixed!important;z-index:30!important;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);color:#fff;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s,box-shadow .5s}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.8rem;padding-bottom:.8rem}
.top.solid{background:rgba(242,242,238,.78);color:var(--ink);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(20,27,22,.08)}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;height:2.6rem;padding:0 .4rem 0 1rem;border-radius:999px;border:1px solid currentColor;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);color:inherit;cursor:pointer;font-size:.88rem;letter-spacing:.06em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.top.solid .menu-btn{border-color:rgba(20,27,22,.25);background:transparent}
.menu-btn .bars2{position:relative;width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center}
.menu-btn .bars2 i{position:absolute;left:.45rem;right:.45rem;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu-btn .bars2 i:first-child{transform:translateY(-3px)}.menu-btn .bars2 i:last-child{transform:translateY(3px)}

.scrim{position:fixed;inset:0;z-index:60;background:rgba(10,14,11,.35);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;z-index:61;top:0;right:0;bottom:0;width:min(88vw,25rem);color:#fff;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 1.1rem) 1.6rem calc(env(safe-area-inset-bottom,0px) + 1.4rem);
  background:rgba(20,27,22,.72);border-left:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  transform:translate3d(104%,0,0);transition:transform .65s var(--ease);overflow-y:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}
.drawer-top .mark{font-size:1.35rem}
.x-btn{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a,.drawer nav button{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border:0;border-bottom:1px solid rgba(255,255,255,.18);background:none;color:#fff;text-decoration:none;font-family:var(--serif);font-size:2rem;line-height:1;cursor:pointer;text-align:left;
  opacity:0;transform:translate3d(18px,0,0);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.drawer.open nav a,.drawer.open nav button{opacity:1;transform:none}
.drawer nav a svg,.drawer nav button svg{width:1.1rem;height:1.1rem;opacity:.7}
.drawer h4{font-weight:400;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin:1.8rem 0 .7rem}
.drawer .cat-list{display:flex;flex-wrap:wrap;gap:.45rem}
.drawer .cat-list a,.drawer .cat-list button{font:inherit;font-size:.88rem;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;text-decoration:none;cursor:pointer}
.drawer .foot{margin-top:auto;padding-top:2rem}
.drawer .foot small{display:block;margin-top:.9rem;font-size:.78rem;opacity:.7;line-height:1.45}

.ebay-pill{display:inline-flex;align-items:center;gap:.55rem;margin-top:1rem;padding:.7rem 1.15rem;border-radius:999px;font-size:.92rem;font-weight:500;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .35s var(--ease),border-color .35s}
.ebay-pill:hover{background:rgba(255,255,255,.2);border-color:#fff}
.ebay-pill svg{width:1rem;height:1rem}
.ebay-pill.dark{color:var(--ink);border-color:rgba(20,27,22,.3);background:transparent}

/* Glass dock with hairline white lines */
.dock{background:rgba(20,27,22,.32)!important;border:1px solid rgba(255,255,255,.5);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3)!important;backdrop-filter:blur(18px) saturate(1.3)!important;padding:.3rem .35rem!important;gap:.1rem!important}
.dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;width:3.6rem;height:3.3rem;border-radius:999px;border:1px solid transparent;background:none;color:rgba(255,255,255,.82);cursor:pointer;font-size:.62rem;letter-spacing:.04em;transition:background .35s var(--ease),border-color .35s,color .35s}
.dock button svg{width:1.15rem;height:1.15rem;stroke-width:1.5}
.dock button.on{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}

/* Welcome: soft fade away instead of a push */
.intro{transform:translate3d(0,var(--drag,0px),0) scale(var(--sc,1));opacity:var(--op,1);will-change:transform,opacity}
.intro.leaving{transition:opacity 1.3s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.22,1,.36,1),filter 1.3s ease!important;opacity:0!important;transform:translate3d(0,-6vh,0) scale(1.05)!important;filter:blur(8px)}
.hero .vid{transform:scale(var(--hz,1));transition:transform 2.2s cubic-bezier(.22,1,.36,1)}
body.pre .hero .vid{--hz:1.08}

/* About page */
.page-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--forest) center/cover no-repeat}
.page-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,11,.45),rgba(10,14,11,.05) 35%,rgba(10,14,11,.8));pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;padding-bottom:2.6rem}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,15vw,7rem);line-height:.9;letter-spacing:-.025em;margin:0 0 .9rem}
.page-hero h1 em{font-style:italic}
.page-hero p{margin:0;max-width:24rem;opacity:.9;line-height:1.5}
.prose{max-width:40rem;margin:0 auto;padding:3.4rem 1.2rem 0}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,9vw,3.2rem);line-height:.98;letter-spacing:-.02em;margin:0 0 1rem}
.prose p{margin:0 0 1.1rem;font-size:1.05rem;line-height:1.7;color:#2c332e}
.prose .lede::first-letter{font-family:var(--serif);float:left;font-size:4.6em;line-height:.82;padding:.06em .12em 0 0}
.steps{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem}
.steps li{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.1rem;border-radius:1.3rem;background:var(--paper);border:1px solid var(--line)}
.steps b{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1;min-width:1.6rem}
.steps span{display:block}.steps strong{font-weight:500;display:block;margin-bottom:.15rem}
.steps small{color:var(--muted);font-size:.92rem;line-height:1.45}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.6rem 0 0}
.stat-row div{padding:1rem .8rem;border-radius:1.2rem;background:var(--paper);border:1px solid var(--line);text-align:center}
.stat-row b{display:block;font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1}
.stat-row span{font-size:.78rem;color:var(--muted)}
.wide-moment{position:relative;margin:3.4rem 1.1rem 0;border-radius:1.8rem;overflow:hidden;aspect-ratio:4/5;max-height:34rem;color:#fff;background:var(--forest) center/cover no-repeat}
@media (min-width:52rem){.wide-moment{aspect-ratio:21/9;max-width:72rem;margin-left:auto;margin-right:auto}}
.wide-moment video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide-moment::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,11,.1),rgba(10,14,11,.75));pointer-events:none}
.wide-moment .in{position:absolute;z-index:1;left:1.4rem;right:1.4rem;bottom:1.4rem}
.wide-moment h3{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,9vw,3.6rem);line-height:.95;margin:0 0 .5rem}
.wide-moment p{margin:0;opacity:.9;max-width:24rem}

/* =================== Desktop & large screens =================== */
.top-links{display:none}
@media (min-width:64rem){
  html{font-size:clamp(16px, .45vw + 11px, 21px)}
  .top-links{display:flex;align-items:center;gap:2rem;margin-left:auto;margin-right:1.6rem;font-size:.92rem;letter-spacing:.02em}
  .top-links a{color:inherit;text-decoration:none;opacity:.85;transition:opacity .3s}
  .top-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

  /* Portrait videos on a wide screen: sharp video in a tall panel, soft blurred copy behind */
  .split{--gutter:max(2.5rem, calc((100vw - 72rem) / 2 + 1.1rem));--pw:min(36vw, calc((100svh - 10rem) * .75))}
  .split::before{content:"";position:absolute;inset:-80px;background:inherit;background-size:cover;background-position:center;filter:blur(44px) brightness(.55) saturate(1.15);transform:scale(1.1);z-index:0;pointer-events:none}
  .split::after{z-index:1!important;background:linear-gradient(90deg,rgba(10,14,11,.72) 0%,rgba(10,14,11,.4) 50%,rgba(10,14,11,.15) 100%)!important}
  .split > video,.split > .vids{position:absolute!important;inset:auto!important;top:max(6rem,12vh)!important;bottom:auto!important;right:var(--gutter)!important;left:auto!important;width:var(--pw)!important;height:calc(100% - max(6rem,12vh) - max(2.5rem,6vh))!important;object-fit:cover;border-radius:2rem;overflow:hidden;z-index:2;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12)}
  .split > .vids video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* Banner */
  .hero.split .hero-body{top:0;bottom:0;display:flex;align-items:center;z-index:3;padding-bottom:0}
  .hero.split .hero-body .wrap{padding-right:calc(var(--pw) + 4rem)}
  .hero.split .hero-row{display:block}
  .hero.split .hero-row p{font-size:1.1rem;max-width:28rem}

  /* Welcome */
  .intro.split .intro-in{z-index:3;padding-left:var(--gutter);padding-right:calc(var(--pw) + var(--gutter) + 4rem);justify-content:center;gap:3rem}
  .intro.split .mark{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1.6rem);left:var(--gutter);text-align:left}
  .intro.split .enter{align-items:flex-start;margin:1.6rem 0 0;flex-direction:row;gap:1rem}
  .intro.split .slider{height:3.4rem}
  .intro.split .line{height:2.8rem}
  @keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}75%{opacity:1}100%{transform:translateY(-2.8rem);opacity:0}}
  .intro.split .enter small{align-self:center}

  /* Collection header + About header */
  .chapter.split,.page-hero.split{min-height:min(88svh,56rem);align-items:center}
  .chapter.split .wrap,.page-hero.split .wrap{z-index:3;padding-right:calc(var(--pw) + 4rem);padding-bottom:0}
  .chapter.split > video{right:auto!important;left:var(--gutter)!important}
  .chapter.split::after{background:linear-gradient(270deg,rgba(10,14,11,.72) 0%,rgba(10,14,11,.4) 50%,rgba(10,14,11,.15) 100%)!important}
  .chapter.split .wrap{padding-right:1.1rem;padding-left:calc(var(--pw) + 4rem)}

  /* Story panel + About moments: video sits inside the rounded card */
  .story .panel.split,.wide-moment.split{min-height:34rem;display:flex;align-items:center}
  .story .panel.split > video,.wide-moment.split > video{top:1.4rem!important;bottom:auto!important;height:calc(100% - 2.8rem)!important;right:1.4rem!important;width:min(38%,26rem)!important;border-radius:1.5rem;opacity:1}
  .story .panel.split .inner{z-index:3;max-width:58%;padding:3.5rem 4rem}
  .wide-moment.split{aspect-ratio:auto;max-height:none}
  .wide-moment.split .in{z-index:3;max-width:56%;left:3rem;bottom:auto}

  /* Just in: line up with the page edges, bigger cards */
  .car{--cw:15rem;padding-left:max(1.1rem, calc((100vw - 72rem) / 2 + 1.1rem));padding-right:max(1.1rem, calc((100vw - 72rem) / 2 + 1.1rem));scroll-padding:0 max(1.1rem, calc((100vw - 72rem) / 2 + 1.1rem))}

  /* Collection grid and the video moments */
  .moment{aspect-ratio:auto!important;height:clamp(16rem,26vw,24rem);max-height:none;margin:1.2rem 0}
  .moment .in{left:2.4rem;bottom:2.2rem;max-width:30rem}

  /* Item page becomes a centred two-column card */
  .sheet{top:4vh;bottom:4vh;left:50%;right:auto;width:min(68rem,92vw);border-radius:2rem;transform:translate3d(-50%,6%,0);opacity:0;
    transition:transform .6s var(--ease),opacity .45s var(--ease);box-shadow:0 0 0 100vmax rgba(10,14,11,.45),0 40px 90px -30px rgba(0,0,0,.6);
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
  .sheet.open{transform:translate3d(-50%,0,0);opacity:1}
  .sheet-hero{height:auto;min-height:0;border-radius:0}
  .sheet-top{top:1.2rem}
  .sheet-cap{display:none}
  .sheet-body{overflow-y:auto;padding:2.4rem 2.4rem 7rem;max-width:none;margin:0;min-width:0}
  .sheet-body::before{content:attr(data-title);display:block;font-family:var(--serif);font-size:2.2rem;line-height:1.08;margin-bottom:1.4rem;overflow-wrap:anywhere}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .buybar{left:50%;right:auto;width:calc(min(68rem,92vw) / 2);bottom:4vh;border-radius:0 0 2rem 0;border-top:1px solid var(--line);transform:none;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
  .sheet.open + .buybar{opacity:1;visibility:visible;transform:none}
}


/* =================== Just in: featured slider =================== */
.fcar{--fw:80vw;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  padding:.6rem calc((100% - var(--fw)) / 2) 1.6rem;align-items:center}
.fcar::-webkit-scrollbar{display:none}
.fcar:focus-visible{outline:none}
.fs{flex:0 0 var(--fw);scroll-snap-align:center;display:flex;flex-direction:column;background:var(--paper);border-radius:1.6rem;overflow:hidden;
  border:1px solid rgba(20,27,22,.06);box-shadow:0 30px 60px -40px rgba(20,27,22,.45);
  transform:scale(.92);opacity:.5;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.fs.on{transform:none;opacity:1}
.fs-media{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;cursor:pointer;overflow:hidden;background:#E5E7E0}
.fs-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transform-origin:50% 50%}
.fs.on .fs-media img{animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(var(--kbx,2%),var(--kby,-2%),0)}}
.fs-text{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:1.3rem 1.3rem 1.4rem}
.fs-tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#5E7A4E;font-weight:500}
.fs h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,6.5vw,2.6rem);line-height:1.05;letter-spacing:-.01em;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fs-price{font-family:var(--serif);font-size:1.6rem;line-height:1}
.fs-price.ask{font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.fs-text p{display:none;margin:.2rem 0 .4rem;color:var(--muted);font-size:.92rem;line-height:1.5;max-width:26rem}
.fs-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.fs-view,.fs-ebay{display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.9rem;font-weight:500;padding:.65rem 1.15rem;border-radius:999px;cursor:pointer;text-decoration:none}
.fs-view{background:var(--forest);color:#fff;border:1px solid var(--forest)}
.fs-ebay{background:transparent;color:var(--ink);border:1px solid rgba(20,27,22,.25)}
.fs-ebay svg{width:.95rem;height:.95rem}
.fnav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.2rem}
.fbtn{width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(20,27,22,.18);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .3s}
.fbtn:hover{border-color:var(--ink)}
.fbtn svg{width:1.1rem;height:1.1rem}
.fdots{display:flex;gap:.15rem}
.fdots button{width:1.4rem;height:1.4rem;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.fdots button::before{content:"";width:.55rem;height:.55rem;border-radius:50%;border:1px solid var(--ink);transition:background .35s}
.fdots button[aria-current="true"]::before{background:var(--ink)}
@media (min-width:40rem){
  .fcar{--fw:min(82vw,60rem);gap:1.4rem}
  .fs{flex-direction:row;height:min(30rem,62vh);min-height:24rem}
  .fs.flip{flex-direction:row-reverse}
  .fs-media{width:56%;height:100%;aspect-ratio:auto;flex:none}
  .fs-text{flex:1;justify-content:center;padding:2.4rem 2.6rem;gap:.7rem}
  .fs-text p{display:block}
  .fs h3{font-size:clamp(1.9rem,3vw,2.8rem)}
  .fs-price{font-size:1.9rem}
}
@media (min-width:64rem){ .fcar{--fw:min(72vw,66rem)} }
@media (prefers-reduced-motion: reduce){ .fs.on .fs-media img{animation:none} }