@font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Italiana.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/HankenGrotesk.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/JetBrainsMono.woff2) format('woff2')}

:root{
  --black:#000; --ink:#0C0B0A; --ink2:#15130F; --line:rgba(236,229,216,.14);
  --paper:#ECE5D8; --soft:#BDB4A5; --muted:#8F877A; --metal:#C8A266; --metal-hi:#E6CC96; --metal-lo:#7A6037;
  --disp:'Italiana', 'Didot', 'Bodoni 72', serif; --sans:'Hanken Grotesk', system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, monospace;
  --g:20px; --L:140px; --bar:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font:400 16px/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2{font-family:var(--disp);font-weight:400;margin:0;letter-spacing:.005em}
:focus-visible{outline:1.5px solid var(--metal);outline-offset:3px}

/* header */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;height:var(--bar);padding:0 var(--g);
  background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(236,229,216,.07)}
.mark{font-family:var(--disp);font-size:26px;letter-spacing:.14em;text-decoration:none;color:var(--paper)}
.nav{display:none}
.bar__end{display:flex;align-items:center;gap:14px}
.bar__book{font:500 13px/1 var(--sans);letter-spacing:.04em;text-decoration:none;color:var(--metal);padding:10px 2px}
.bag{display:flex;align-items:center;gap:4px;background:none;border:0;padding:8px 0;cursor:pointer}
.bag svg{width:22px;height:22px}
.bag__n{font:500 12px/1 var(--mono);color:var(--muted)}
.bag.is-bump .bag__n{color:var(--metal)}

/* ---------- hero: the viewer ---------- */
.hero{position:relative;padding:0 0 26px}
.viewer{position:relative;width:min(100%, max(320px, calc((100svh - var(--bar) - 236px) * .6667)));aspect-ratio:2/3;margin:0 auto;overflow:hidden;background:#000;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab}
.viewer.is-drag{cursor:grabbing}
.looks,.looks picture{position:absolute;inset:0}
.look{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.viewer__poster,.viewer__cv{position:absolute;left:0;top:0;transform-origin:0 0}
.viewer__poster{width:100%;height:100%;object-fit:contain}
.viewer__cv{opacity:0;will-change:transform}
.viewer.is-ready .viewer__cv{opacity:1}
.viewer.is-ready .viewer__poster{visibility:hidden}
.viewer__hint{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--metal-hi);
  pointer-events:none;transition:opacity .5s}
.hint__arr{display:inline-block;animation:nudge 2.2s ease-in-out infinite}
.hint__arr:last-child{animation-direction:reverse}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(-4px);opacity:1}}
.viewer.is-used .viewer__hint,.is-loop .viewer__hint{opacity:0}

.viewer__ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%, max(320px, calc((100svh - var(--bar) - 236px) * .6667)));
  margin:0 auto;padding:0 var(--g);height:48px;border-bottom:1px solid var(--line)}
.hero .viewer__ctl{position:relative}
.seg,.looksel{display:flex;gap:18px}
.seg button,.looksel button{background:none;border:0;padding:14px 0 12px;cursor:pointer;font:500 14px/1 var(--sans);color:var(--muted);position:relative;letter-spacing:.01em}
.seg button[aria-checked="true"],.looksel button[aria-checked="true"]{color:var(--paper)}
.seg button::after,.looksel button::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--metal);transform:scaleX(0);opacity:0;transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .2s}
.seg button[aria-checked="true"]::after,.looksel button[aria-checked="true"]::after{transform:none;opacity:1}
.looksel{opacity:0;visibility:hidden;transition:opacity .4s}
.viewer__label{position:absolute;right:var(--g);margin:0;font:400 12px/1 var(--mono);color:var(--metal);letter-spacing:.03em;transition:opacity .3s;pointer-events:none}
.is-worn .looksel{opacity:1;visibility:visible}
.is-worn .viewer__label{opacity:0}
.worn-note{display:block;margin:8px auto 0;width:min(100%, max(320px, calc((100svh - var(--bar) - 236px) * .6667)));padding:0 var(--g);
  font:400 11px/1.4 var(--mono);color:var(--muted);opacity:0;transition:opacity .4s;min-height:1.4em}
.is-worn .worn-note{opacity:1}

.hero__text{padding:14px var(--g) 0;width:min(100%, 560px);margin:0 auto}
h1{font-size:clamp(34px, 9.2vw, 64px);line-height:1}
.hero__spec{margin:8px 0 0;color:var(--soft);font-size:15px}
.hero__buy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.price{margin:0;font:500 18px/1.15 var(--mono);color:var(--paper);white-space:nowrap}
.price small{display:block;font:400 11px/1.6 var(--mono);color:var(--muted)}
.hero__proof{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:2px;font:500 15px/1 var(--sans);
  letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .3s, color .3s, border-color .3s;text-align:center}
.btn--metal{background:var(--metal);color:#14100A;border:1px solid var(--metal)}
.btn--metal:hover{background:var(--metal-hi)}
.btn--line{background:transparent;border:1px solid rgba(200,162,102,.55);color:var(--paper)}
.btn--line:hover{border-color:var(--metal)}

/* ---------- up close: loupe ---------- */
.close{padding:64px 0 10px}
.close__head{padding:0 var(--g)}
.close h2,.choose h2,.sec__head h2,.visit h2{font-size:36px;line-height:1.02}
.close__head p{margin:10px 0 0;color:var(--soft);max-width:30em}
.stage{position:relative;width:min(100%, 560px);aspect-ratio:2/3;margin:18px auto 0;overflow:hidden;background:#000;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y}
.scene{position:absolute;left:0;top:0;width:100%;height:100%}
.scene img{width:100%;height:100%;object-fit:cover}
.scene--base{filter:brightness(.55) saturate(.9)}
.spill{position:absolute;left:0;top:0;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,236,200,.12), transparent);mix-blend-mode:screen;will-change:transform}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1px solid var(--metal);opacity:0;transform:scale(.4);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.pin.is-on{opacity:.9;transform:scale(1)}
.loupe{position:absolute;left:0;top:0;width:var(--L);height:var(--L);margin:calc(var(--L) / -2) 0 0 calc(var(--L) / -2);border-radius:50%;
  touch-action:none;cursor:grab;z-index:5;will-change:transform;color:var(--metal-hi);
  box-shadow:0 0 0 1px var(--metal-hi), 0 0 0 5px #0E0C09, 0 0 0 6px var(--metal-lo), 0 20px 46px rgba(0,0,0,.75)}
.loupe__lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#000;transform:translateZ(0)}
.loupe__lens .scene{transform-origin:0 0;width:auto;height:auto}
.loupe__lens::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 26%, rgba(255,255,255,.14), transparent 26%),radial-gradient(closest-side, transparent 72%, rgba(0,0,0,.55) 100%)}
.loupe__reticle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ret__x{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-origin:50px 50px}
.loupe.is-near .ret__x{transform:scale(.55)}
.loupe__mag{position:absolute;right:-2px;bottom:-2px;transform:translate(30%,30%);font:500 10px/1 var(--mono);letter-spacing:.06em;color:var(--metal-hi);
  background:#0E0C09;padding:4px 5px;border-radius:3px;border:1px solid var(--metal-lo)}
.finds{list-style:none;margin:18px auto 0;padding:0 var(--g);width:min(100%, 560px)}
.finds li{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.finds b{font:400 12px/1.4 var(--mono);color:var(--muted);letter-spacing:.03em}
.finds span{font-size:15px;line-height:1.45;color:#57514A;transition:color .5s}
.finds li.is-on b{color:var(--metal)}
.finds li.is-on span{color:var(--paper)}

/* ---------- choose ---------- */
.choose{padding:64px var(--g) 10px;max-width:640px;margin:0 auto}
.choose__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.choose__head img{width:64px;height:auto;margin-bottom:-6px}
.opt{margin-top:18px;display:grid;gap:20px}
fieldset{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
legend{font:400 12px/1 var(--mono);color:var(--muted);margin-bottom:10px;letter-spacing:.03em;padding:0}
.opt label,.slot label{position:relative;flex:1 1 0}
.opt input,.slot input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt label span,.slot label span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--line);border-radius:2px;
  font:400 14px/1 var(--mono);transition:border-color .25s, color .25s, background .25s}
.opt input:checked + span,.slot input:checked + span{border-color:var(--metal);color:var(--metal-hi);background:rgba(200,162,102,.08)}
.opt input:focus-visible + span,.slot input:focus-visible + span{outline:1.5px solid var(--metal);outline-offset:2px}
.sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.sw--y{background:linear-gradient(135deg,#F3D79A,#B7863F)}
.sw--w{background:linear-gradient(135deg,#F4F3EF,#A9A8A3)}
.spec{margin:0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec dt{font:400 12px/1.5 var(--mono);color:var(--muted)}
.spec dd{margin:0;font-size:15px;line-height:1.45}
.opt__buy{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.price--lg{grid-column:1 / -1;font-size:24px;margin-bottom:4px}
.proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:400 12px/1.5 var(--mono);color:var(--soft)}
.proof li::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--metal);margin:0 8px 2px 0}

/* ---------- collections ---------- */
.cols{padding:64px 0 10px}
.sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 var(--g) 16px}
.sec__all{font:400 12px/1 var(--mono);color:var(--metal);text-decoration:none;letter-spacing:.03em;white-space:nowrap}
.rail{list-style:none;margin:0;padding:0 var(--g) 6px;display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--g);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start}
.card a{display:block;text-decoration:none}
.card img{aspect-ratio:4/5;object-fit:cover;width:100%;background:#000}
.card__t{display:block;margin-top:10px;font-size:16px}
.card__p{display:block;font:400 12px/1.6 var(--mono);color:var(--muted)}

/* ---------- visit ---------- */
.visit{margin-top:56px;padding:56px var(--g) 64px;background:var(--ink2);border-top:1px solid var(--line)}
.visit__sub{margin:12px 0 0;color:var(--soft);max-width:34em}
.slot{margin-top:24px;display:grid;gap:18px;max-width:520px}
.slot__ok{margin:0;min-height:1.5em;font-size:14px;color:var(--metal-hi)}

.foot{padding:40px var(--g) 48px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.foot p{margin:0 0 8px}
.foot__mark{font-family:var(--disp);font-size:30px;letter-spacing:.14em;color:var(--paper)}
.foot__links{display:flex;gap:18px}
.foot__links a{text-decoration:none;color:var(--paper)}
.foot__fine{margin-top:18px!important;font-size:12px;max-width:60em}

@media (min-width:700px){
  :root{--g:40px; --L:170px}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}
  .visit{padding-left:max(var(--g), calc(50% - 320px));padding-right:max(var(--g), calc(50% - 320px))}
}
@media (min-width:960px){
  :root{--g:clamp(40px, 4vw, 96px); --bar:64px}
  .nav{display:flex;gap:32px;position:absolute;left:50%;transform:translateX(-50%)}
  .nav a{text-decoration:none;font-size:14px;color:#CFC6B6}
  .nav a:hover{color:var(--metal-hi)}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:clamp(32px,4vw,96px);
    padding:24px var(--g) 40px;align-items:end}
  .viewer,.viewer__ctl,.worn-note{grid-column:2;width:calc((100vh - var(--bar) - 48px - 96px) * .6667)}
  .viewer{grid-row:1}
  .viewer__ctl{grid-row:2;padding:0}
  .worn-note{grid-row:3;padding:0}
  .hero__text{grid-column:1;grid-row:1;padding:0 0 12px;width:100%;max-width:440px;margin:0;justify-self:end}
  .hero__proof{display:block;grid-column:3;grid-row:1;list-style:none;margin:0;padding:0 0 12px;max-width:300px;border-top:1px solid var(--line);
    font:400 13px/1.5 var(--mono);color:var(--soft)}
  .hero__proof li{padding:12px 0;border-bottom:1px solid var(--line)}
  .hero__proof a{color:var(--metal);text-decoration:none}
  h1{font-size:clamp(44px, 3.6vw, 72px)}
  .close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,4vw,96px);padding:96px var(--g) 10px;align-items:start}
  .close__head{grid-column:1;padding:0}
  .finds{grid-column:1;margin:24px 0 0;padding:0}
  .stage{grid-column:2;grid-row:1 / span 2;margin:0;width:min(100%, 560px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}