@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Manrope:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --ink:#171512;
  --paper:#f4f1eb;
  --cream:#e9e2d7;
  --muted:#777066;
  --line:rgba(23,21,18,.14);
  --gold:#a78a5b;
  --black:#0b0a09;
  --serif:'Playfair Display',Georgia,serif;
  --sans:Manrope,Arial,sans-serif;
  --mono:'DM Mono',monospace
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55
}

body.no-scroll{
  overflow:hidden
}

a{
  color:inherit;
  text-decoration:none
}

button,
input,
select{
  font:inherit
}

button{
  cursor:pointer
}

img{
  display:block;
  max-width:100%
}

.container{
  width:min(1240px,calc(100% - 48px));
  margin:auto
}

.serif{
  font-family:var(--serif);
  font-weight:500
}

.eyebrow{
  font:10px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted)
}

.muted{
  color:var(--muted)
}


/* ==========================================
   HEADER
   ========================================== */

.header{
  position:fixed;
  z-index:50;
  top:0;
  left:0;
  right:0;
  border-bottom:1px solid transparent;
  transition:.3s;
  background:rgba(244,241,235,.74);
  backdrop-filter:blur(18px)
}

.header.scrolled{
  border-color:var(--line)
}

.nav{
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center
}

.navlinks{
  display:flex;
  gap:22px;
  font-size:12px
}

.navlinks a,
.menu-links a{
  position:relative
}

.navlinks a:after{
  content:'';
  position:absolute;
  left:0;
  bottom:-5px;
  width:0;
  height:1px;
  background:currentColor;
  transition:.25s
}

.navlinks a:hover:after{
  width:100%
}

.logo{
  font:600 22px var(--mono);
  letter-spacing:.25em
}

.tools{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px
}

.icon-btn{
  border:0;
  background:transparent;
  color:inherit;
  padding:9px;
  font-size:13px
}

.hamb{
  display:none
}

.count{
  font:9px var(--mono);
  border:1px solid var(--ink);
  border-radius:50%;
  padding:2px 5px;
  margin-left:3px
}


/* ==========================================
   HERO
   ========================================== */

.hero{
  min-height:92vh;
  display:grid;
  align-items:end;
  position:relative;
  overflow:hidden;
  background:#191714;
  color:#f6f1e8
}

.hero:before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.58),
      transparent 65%
    ),
    url('https://images.unsplash.com/photo-1539109136881-3be0616acf4b?auto=format&fit=crop&w=2200&q=90')
    center/cover
}

.hero-content{
  position:relative;
  padding:150px 0 70px;
  max-width:760px
}

.hero h1{
  font:500 clamp(60px,9vw,132px)/.88 var(--serif);
  margin:16px 0 28px;
  letter-spacing:-.045em
}

.hero p{
  max-width:500px;
  color:#d9d2c8;
  font-size:14px
}


/* ==========================================
   BUTTONS
   ========================================== */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  padding:13px 19px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:.25s
}

.button:hover{
  transform:translateY(-2px);
  background:var(--gold);
  border-color:var(--gold)
}

.button.ghost{
  background:transparent;
  color:inherit
}

.button.full{
  width:100%
}


/* ==========================================
   PAGE HERO
   ========================================== */

.page-hero{
  padding:155px 0 70px;
  border-bottom:1px solid var(--line)
}

.page-hero h1{
  font:500 clamp(52px,8vw,96px)/.95 var(--serif);
  margin:12px 0
}

.page-pad{
  padding:70px 0
}


/* ==========================================
   SECTIONS
   ========================================== */

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:32px
}

.section-head h2{
  font:500 clamp(34px,5vw,62px)/1 var(--serif);
  margin:0
}

.editorial-grid,
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}


/* ==========================================
   PRODUCT CARD
   ========================================== */

.product-card{
  min-width:0
}

.product-image{
  aspect-ratio:3/4;
  overflow:hidden;
  background:#ddd5ca;
  position:relative
}

.product-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s
}

.product-card:hover .product-image img{
  transform:scale(1.035)
}

.product-meta{
  padding:13px 2px 24px
}

.category{
  font:9px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted)
}

.name{
  font:15px var(--serif);
  margin:6px 0
}

.price{
  font-size:12px
}

.wish{
  position:absolute;
  top:12px;
  right:12px;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(15,14,12,.22);
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  backdrop-filter:blur(8px)
}

.wish.active{
  background:#fff;
  color:#111
}

.card-actions{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  opacity:0;
  transform:translateY(8px);
  transition:.25s
}

.product-card:hover .card-actions{
  opacity:1;
  transform:none
}


/* ==========================================
   SPLIT
   ========================================== */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:650px
}

.split-media{
  background:
    url('https://images.unsplash.com/photo-1496747611176-843222e1e57c?auto=format&fit=crop&w=1500&q=90')
    center/cover
}

.split-copy{
  padding:90px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#ddd5c9
}

.split-copy h2{
  font:500 clamp(42px,5vw,72px)/1 var(--serif);
  margin:14px 0 24px
}


/* ==========================================
   MARQUEE
   ========================================== */

.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:14px 0;
  white-space:nowrap
}

.marquee div{
  display:inline-block;
  font:11px var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  animation:move 25s linear infinite
}

@keyframes move{
  to{
    transform:translateX(-50%)
  }
}


/* ==========================================
   LOOKBOOK
   ========================================== */

.lookbook{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:20px
}

.lookbook img{
  width:100%;
  height:100%;
  object-fit:cover
}

.lookbook .tall{
  aspect-ratio:4/5
}

.lookbook .small{
  aspect-ratio:4/5;
  margin-top:80px
}


/* ==========================================
   SHOP
   ========================================== */

.shop-layout{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:40px
}

.filters{
  border-right:1px solid var(--line);
  padding-right:28px
}

.filter-group{
  margin-bottom:30px
}

.filter-group h3{
  font:14px var(--serif);
  margin:0 0 10px
}

.filter-option{
  display:block;
  font-size:12px;
  padding:5px 0
}

.filter-option input{
  margin-right:7px
}

.sortbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px
}

.sortbar select{
  border:0;
  background:transparent;
  font-size:11px
}

.mobile-filter{
  display:none
}


/* ==========================================
   SEARCH
   ========================================== */

.search-line{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  padding:15px 0;
  outline:none;
  margin-bottom:28px
}


/* ==========================================
   PRODUCT DETAIL
   ========================================== */

.product-detail{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  padding-top:120px
}

.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.gallery img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover
}

.detail-copy{
  padding:45px 0;
  position:sticky;
  top:100px;
  height:max-content
}

.detail-copy h1{
  font:500 clamp(44px,5vw,75px)/.95 var(--serif);
  margin:10px 0 20px
}

.detail-price{
  font:14px var(--mono);
  margin:20px 0 30px
}

.detail-copy .description{
  color:var(--muted);
  max-width:520px;
  font-size:14px
}


/* ==========================================
   SIZE SELECTOR
   ========================================== */

.size-selector{
  margin:30px 0 22px;
  padding-top:22px;
  border-top:1px solid var(--line)
}

.size-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:13px
}

.size-guide{
  font:9px var(--mono);
  letter-spacing:.12em;
  color:var(--muted)
}

.size-options{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.size-option{
  min-width:52px;
  height:46px;
  padding:0 15px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font:11px var(--mono);
  letter-spacing:.08em;
  transition:.2s
}

.size-option:hover:not(:disabled){
  border-color:var(--ink);
  background:rgba(23,21,18,.05)
}

.size-option.selected{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper)
}

.size-option.disabled,
.size-option:disabled{
  cursor:not-allowed;
  opacity:.38;
  text-decoration:line-through;
  background:rgba(23,21,18,.035)
}

.size-message{
  min-height:18px;
  margin-top:10px;
  font:10px var(--mono);
  letter-spacing:.04em;
  color:var(--muted)
}


/* ==========================================
   OPTION
   ========================================== */

.option-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:22px 0
}

.option{
  border:1px solid var(--line);
  padding:9px 13px;
  font-size:11px;
  background:transparent
}

.option.active{
  background:var(--ink);
  color:var(--paper)
}


/* ==========================================
   FOOTER
   ========================================== */

.footer{
  background:#12110f;
  color:#ddd6cb;
  padding:70px 0 30px;
  margin-top:90px
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px
}

.footer h3{
  font:18px var(--mono);
  letter-spacing:.2em
}

.footer a{
  display:block;
  color:#aaa195;
  margin:8px 0;
  font-size:12px
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #34302b;
  margin-top:55px;
  padding-top:18px;
  font:9px var(--mono);
  letter-spacing:.12em;
  color:#82796f
}


/* ==========================================
   DRAWER
   ========================================== */

.drawer,
.overlay-modal{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:0;
  transition:.3s
}

.drawer.open,
.overlay-modal.open{
  pointer-events:auto;
  opacity:1
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px)
}

.drawer-panel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(500px,92vw);
  background:var(--paper);
  padding:26px;
  transform:translateX(100%);
  transition:.35s;
  display:flex;
  flex-direction:column
}

.drawer.open .drawer-panel{
  transform:none
}

.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:18px
}

.drawer-items{
  overflow:auto;
  flex:1
}

.drawer-item{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:14px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.drawer-item img{
  width:80px;
  height:100px;
  object-fit:cover
}

.drawer-item strong{
  font-size:12px
}

.cart-variant{
  margin-top:4px;
  font:10px var(--mono);
  color:var(--muted)
}

.cart-variant strong{
  font:10px var(--mono);
  color:var(--ink)
}


/* ==========================================
   CART QUANTITY
   ========================================== */

.cart-qty{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0
}

.cart-qty button{
  width:24px;
  height:24px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0
}

.cart-qty button:hover{
  background:var(--ink);
  color:var(--paper)
}

.cart-qty span{
  min-width:18px;
  text-align:center;
  font:10px var(--mono)
}

.remove{
  border:0;
  background:none;
  text-decoration:underline;
  font-size:10px;
  padding:0;
  color:var(--muted)
}

.drawer-footer{
  padding-top:18px
}

.summary-line{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  font-size:12px
}

.summary-total{
  border-top:1px solid var(--line);
  margin-top:10px;
  padding-top:15px
}


/* ==========================================
   FORMS
   ========================================== */

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:14px
}

.field.full{
  grid-column:1/-1
}

.field label{
  font:9px var(--mono);
  text-transform:uppercase;
  letter-spacing:.13em
}

.field input,
.field textarea,
.field select{
  border:1px solid var(--line);
  background:rgba(255,255,255,.25);
  padding:13px;
  outline:none
}

.checkout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:70px
}


/* ==========================================
   PAYMENT
   ========================================== */

.payment-options{
  display:grid;
  gap:9px
}

.payment-option{
  border:1px solid var(--line);
  padding:15px;
  display:flex;
  gap:12px
}

.payment-option input{
  accent-color:var(--ink)
}


/* ==========================================
   ACCOUNT
   ========================================== */

.account-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:55px
}

.side-nav a{
  display:block;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}


/* ==========================================
   EMPTY
   ========================================== */

.empty{
  min-height:350px;
  display:grid;
  place-items:center;
  text-align:center
}


/* ==========================================
   TOAST
   ========================================== */

.toast{
  position:fixed;
  z-index:200;
  bottom:24px;
  left:50%;
  transform:translate(-50%,20px);
  background:#111;
  color:#fff;
  padding:12px 18px;
  font-size:11px;
  opacity:0;
  pointer-events:none;
  transition:.25s
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0)
}


/* ==========================================
   REVEAL
   ========================================== */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:.7s
}

.reveal.visible{
  opacity:1;
  transform:none
}


/* ==========================================
   NOTICE
   ========================================== */

.notice{
  border:1px solid var(--line);
  padding:16px;
  font-size:12px;
  background:#eae3d8
}


/* ==========================================
   NO RESULTS
   ========================================== */

.no-results{
  grid-column:1/-1;
  padding:80px 0;
  text-align:center
}

.no-results h2{
  font:500 42px var(--serif)
}

.mobile-menu{
  display:none
}


/* ==========================================
   TABLET / MOBILE
   ========================================== */

@media(max-width:800px){

  .container{
    width:min(100% - 28px,600px)
  }

  .nav{
    height:64px;
    grid-template-columns:auto 1fr auto
  }

  .navlinks{
    display:none
  }

  .hamb{
    display:inline-block
  }

  .logo{
    justify-self:center;
    font-size:18px
  }

  .hero{
    min-height:78vh
  }

  .hero-content{
    padding:120px 0 45px
  }

  .hero h1{
    font-size:66px
  }

  .editorial-grid,
  .product-grid{
    grid-template-columns:1fr 1fr
  }

  .split,
  .product-detail,
  .checkout,
  .account-grid,
  .lookbook{
    grid-template-columns:1fr
  }

  .split-media{
    min-height:500px
  }

  .split-copy{
    padding:50px 28px
  }

  .shop-layout{
    grid-template-columns:1fr
  }

  .filters{
    display:none
  }

  .mobile-filter{
    display:inline-flex
  }

  .gallery{
    grid-template-columns:1fr
  }

  .detail-copy{
    position:static;
    padding:20px 0 50px
  }

  .footer-grid{
    grid-template-columns:1fr 1fr
  }

  .footer-bottom{
    flex-direction:column;
    gap:8px
  }

  .form-grid{
    grid-template-columns:1fr
  }

  .field.full{
    grid-column:auto
  }

  .checkout{
    gap:30px
  }

  .lookbook .small{
    margin-top:0
  }

  .sortbar{
    gap:10px
  }

  .section-head{
    align-items:start;
    gap:20px
  }

  .section-head h2{
    font-size:40px
  }

  .product-detail{
    padding-top:90px
  }

  .detail-copy h1{
    font-size:52px
  }
}


/* ==========================================
   SMALL MOBILE
   ========================================== */

@media(max-width:480px){

  .editorial-grid,
  .product-grid{
    grid-template-columns:1fr
  }

  .footer-grid{
    grid-template-columns:1fr
  }

  .hero h1{
    font-size:56px
  }

  .page-hero{
    padding-top:120px
  }

  .gallery img{
    aspect-ratio:4/5
  }

  .size-option{
    flex:1;
    min-width:0
  }

  .size-header{
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }

  .tools{
    gap:2px
  }

  .tools .icon-btn{
    padding:7px 5px
  }

  .drawer-panel{
    padding:20px
  }

  .drawer-item{
    grid-template-columns:70px 1fr auto;
    gap:10px
  }

  .drawer-item img{
    width:70px;
    height:88px
  }
}