:root{
  --bone:#EDE9E1;
  --bone-dim:#E3DDD1;
  --ink:#17181A;
  --mustard:#D8A62B;
  --clay:#8B6F5C;
  --type-display:'Space Grotesk', sans-serif;
  --type-body:'IBM Plex Sans', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--type-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
a{color:inherit;}
h1,h2,h3{font-family:var(--type-display); font-weight:700; letter-spacing:-0.01em;}
button{font-family:var(--type-body); cursor:pointer; border:none;}

/* header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(237,233,225,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(23,24,26,0.12);
}
.header-row{display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px;}
.brand{font-family:var(--type-display); font-weight:700; font-size:1.2rem; letter-spacing:0.04em;}
nav{display:flex; gap:26px; flex:1; justify-content:center;}
nav a{font-size:0.9rem; text-decoration:none; font-weight:500; border-bottom:1px solid transparent; padding-bottom:2px;}
nav a:hover{border-color:var(--ink);}
.bag-btn{
  background:var(--ink); color:var(--bone); padding:9px 16px; font-size:0.85rem;
  font-weight:600; border-radius:2px;
}

/* hero */
.hero{padding:96px 0 64px;}
.eyebrow{font-size:0.8rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--clay); font-weight:600; margin-bottom:18px;}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.4rem); line-height:1.0; margin-bottom:22px;}
.hero-sub{max-width:480px; color:#3f3a34; font-size:1.08rem; margin-bottom:32px;}
.btn{
  display:inline-block; background:var(--ink); color:var(--bone);
  padding:13px 26px; border-radius:2px; text-decoration:none; font-weight:600; font-size:0.95rem;
}

/* rack signature element */
.rack{padding:72px 0 100px; overflow:hidden;}
.rack-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px;}
.rack-hint{font-size:0.85rem; color:var(--clay); font-weight:500;}

.rack-rail{
  display:flex;
  gap:28px;
  padding:40px 32px 24px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  cursor:grab;
  user-select:none;
}
.rack-rail.dragging{cursor:grabbing;}
.rack-rail::-webkit-scrollbar{height:6px;}
.rack-rail::-webkit-scrollbar-thumb{background:rgba(23,24,26,0.2); border-radius:3px;}

.garment{
  flex:0 0 240px;
  scroll-snap-align:start;
  background:var(--bone);
  padding-top:28px;
  position:relative;
  transform:rotate(var(--tilt));
  transition:transform .3s ease, box-shadow .3s ease;
}
.garment:hover{transform:rotate(0deg) translateY(-4px);}
.hanger{
  width:34px; height:16px; margin:0 auto 6px;
  border:2px solid var(--ink); border-bottom:none;
  border-radius:20px 20px 0 0;
}
.swatch{
  height:180px; background:var(--swatch);
  border-radius:2px;
  position:relative;
}
.swatch::after{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 6px);
}
.garment-info{padding:16px 4px 0;}
.garment-info h3{font-size:1.05rem; margin-bottom:4px;}
.tag{font-size:0.82rem; color:var(--clay); margin-bottom:14px;}

.sizes{display:flex; gap:6px; margin-bottom:16px;}
.size-chip{
  width:30px; height:26px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(23,24,26,0.3); font-size:0.72rem; border-radius:2px;
  background:transparent; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.size-chip.selected{background:var(--ink); color:var(--bone); border-color:var(--ink);}

.garment-foot{display:flex; align-items:center; justify-content:space-between;}
.price{font-weight:600; font-variant-numeric:tabular-nums;}
.add-btn{
  background:transparent; border:1px solid var(--ink); padding:7px 12px;
  font-size:0.78rem; font-weight:600; border-radius:2px; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.add-btn:hover{background:var(--ink); color:var(--bone);}
.add-btn.added{background:var(--mustard); border-color:var(--mustard); color:var(--ink);}

/* lookbook */
.lookbook{background:var(--bone-dim); padding:96px 0;}
.section-lede{max-width:540px; color:#3f3a34; margin-top:12px; margin-bottom:44px;}
.swatch-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; background:rgba(23,24,26,0.1);}
.swatch-card{
  background:var(--sc);
  aspect-ratio:4/3;
  display:flex; align-items:flex-end;
  padding:16px;
  position:relative;
}
.swatch-card::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 5px),
             repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 5px);
}
.swatch-card span{
  position:relative; z-index:1; color:#fff; font-size:0.85rem; font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}

/* fit */
.fit{padding:96px 0;}
.fit-row{display:grid; grid-template-columns:1.2fr 0.8fr; gap:56px; align-items:start;}
.fit h2{margin-bottom:16px;}
.fit p{max-width:440px; color:#3f3a34;}
.fit-table{border-top:1px solid rgba(23,24,26,0.2);}
.fit-row-item{
  display:flex; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid rgba(23,24,26,0.15);
  font-size:0.95rem;
}
.fit-row-item span:first-child{font-weight:600;}

/* footer */
.site-footer{border-top:1px solid rgba(23,24,26,0.15); padding:48px 0 56px;}
.footer-row{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
.newsletter label{display:block; font-size:0.85rem; color:var(--clay); margin-bottom:10px;}
.newsletter-row{display:flex; gap:8px;}
.newsletter-row input{
  padding:10px 12px; border:1px solid rgba(23,24,26,0.3); border-radius:2px;
  font-family:var(--type-body); font-size:0.9rem; background:var(--bone); color:var(--ink);
  min-width:220px;
}
.newsletter-row button{
  background:var(--ink); color:var(--bone); padding:10px 16px; border-radius:2px;
  font-size:0.85rem; font-weight:600;
}
.newsletter-msg{font-size:0.82rem; color:var(--mustard); margin-top:10px; min-height:1em; font-weight:600;}

a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--mustard); outline-offset:3px;}

@media (max-width:760px){
  nav{display:none;}
  .fit-row{grid-template-columns:1fr;}
  .swatch-grid{grid-template-columns:repeat(2,1fr);}
  .rack-rail{padding-left:20px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .garment{transition:none;}
}