:root{
  --maroon:#5b100f;
  --maroon-dark:#3d0a09;
  --skin:#fcedcf;
  --cream:#fdf6e7;
  --olive:#5c5e2f;
  --ink:#1e1e1e;
  --border:#ecdcb8;
  --border2:#e3cfa8;
  --border3:#f0e0bd;
  --muted:#8a7a5c;
  --muted2:#6b6250;
  --muted3:#5c5445;
  --text2:#4a4335;
  --ph-text:#b09b73;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'yoon-a-yoonche','Jost',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{margin:0;font-family:'Cormorant Garamond',serif;font-weight:300;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#d3c3a0;border-radius:8px;}

.mono{font-family:'JetBrains Mono',monospace;}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--maroon);}
.slogan{margin:0;font-size:19px;letter-spacing:.03em;color:var(--maroon);}
.slogan b{font-weight:500;}
.slogan i{font-style:normal;font-weight:300;}

/* placeholder image tiles */
.ph{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:repeating-linear-gradient(135deg,#f5e6c6 0 14px,#fcefd6 14px 28px);
  padding:16px;
}
.ph span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--ph-text);text-transform:uppercase;}
.ph-wide{background:repeating-linear-gradient(135deg,#f3e3c2 0 20px,#fbeed2 20px 40px);}

/* announcement bar */
.announce{
  text-align:center;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#7a6f60;padding:11px;border-bottom:1px solid var(--border3);
}

/* nav */
.site-nav{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:26px 48px;max-width:1440px;margin:0 auto;
}
.site-nav .links{display:flex;gap:30px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;}
.site-nav .links.right{justify-self:end;gap:26px;}
.site-nav .logo{display:flex;align-items:center;gap:12px;justify-self:center;color:var(--ink);}
.site-nav .logo svg{color:var(--ink);}
.site-nav .logo span{font-weight:400;font-size:22px;letter-spacing:.42em;padding-left:.42em;}
.site-nav a:hover{color:var(--maroon);}

/* hero */
.hero{
  position:relative;max-width:1344px;margin:0 auto;height:620px;
  display:flex;align-items:center;
}
.hero-copy{padding:0 72px;max-width:560px;}
.hero-copy h2{font-size:74px;line-height:1.02;margin:20px 0 20px;letter-spacing:-.01em;}
.hero-cta{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:5px;display:inline-block;}
.hero-tag{position:absolute;bottom:20px;right:24px;font-size:10px;letter-spacing:.1em;color:var(--ph-text);text-transform:uppercase;}

section.block{max-width:1344px;margin:0 auto;padding:70px 48px;}
.block-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px;}
.block-head h3{font-size:34px;}
.block-head a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);}
.block-head a:hover{color:var(--maroon-dark);}

/* grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}

/* category card */
.cat-card{display:flex;flex-direction:column;gap:14px;}
.cat-card .ph{aspect-ratio:4/5;}
.cat-card .name{font-family:'Cormorant Garamond',serif;font-size:23px;}
.cat-card .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.cat-card:hover{opacity:.9;}

/* product card */
.product-card{display:flex;flex-direction:column;gap:13px;}
.product-card .ph{aspect-ratio:3/4;}
.product-card .cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.product-card .name{font-family:'Cormorant Garamond',serif;font-size:19px;}
.product-card .price{font-size:13px;color:var(--text2);}
.product-card:hover{opacity:.92;}
.badge-new{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;background:var(--maroon);color:#fff;padding:4px 9px;}

/* editorial split */
.editorial{display:grid;grid-template-columns:1.1fr .9fr;gap:0;max-width:1344px;margin:30px auto 0;background:var(--skin);}
.editorial .ph{aspect-ratio:1/1;background:repeating-linear-gradient(135deg,#eeddb9 0 18px,#f7e8c8 18px 36px);align-items:flex-end;justify-content:flex-start;}
.editorial-copy{display:flex;flex-direction:column;justify-content:center;padding:64px;}
.editorial-copy h3{font-size:46px;line-height:1.08;margin:16px 0 20px;}
.editorial-copy p{font-size:14px;line-height:1.8;color:var(--muted3);margin:0 0 28px;max-width:360px;}
.underline-link{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:5px;align-self:flex-start;}
.underline-link:hover{color:var(--maroon);border-color:var(--maroon);}

/* quote / story */
.story{padding:60px 48px 90px;text-align:center;}
.story-inner{max-width:620px;margin:0 auto;}
.story h3{font-size:34px;line-height:1.35;margin:22px 0 0;}
.story a{display:inline-block;margin-top:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--maroon);border-bottom:1px solid var(--maroon);padding-bottom:5px;}

/* instagram strip */
.insta{padding:0 48px 80px;max-width:1440px;margin:0 auto;}
.insta-head{text-align:center;margin-bottom:26px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
.insta .ph{aspect-ratio:1/1;background:repeating-linear-gradient(135deg,#f5e6c6 0 12px,#fcefd6 12px 24px);justify-content:center;padding:10px;}
.insta .ph:hover{opacity:.9;}

/* newsletter */
.newsletter{background:var(--maroon);color:var(--skin);padding:80px 48px;text-align:center;}
.newsletter h3{font-size:38px;margin:0 0 12px;color:#fff;}
.newsletter p{font-size:14px;color:#d6bda8;margin:0 0 30px;}
.newsletter form{display:flex;max-width:440px;margin:0 auto;border-bottom:1px solid #8f4b4a;}
.newsletter input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:inherit;font-size:14px;padding:12px 4px;}
.newsletter input::placeholder{color:#e3c3bd;}
.newsletter button{background:transparent;border:none;color:#fff;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:12px;}

/* footer */
.site-footer{background:var(--ink);color:#d8cdb5;padding:64px 48px 34px;}
.footer-top{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid #383430;}
.footer-brand{display:flex;align-items:center;gap:11px;color:var(--skin);}
.footer-brand span{font-size:19px;letter-spacing:.42em;padding-left:.42em;}
.footer-slogan{margin:14px 0 0;font-size:16px;letter-spacing:.03em;color:var(--skin);}
.footer-desc{font-size:13px;line-height:1.8;margin:14px 0 0;max-width:280px;color:#b3a894;}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:13px;}
.footer-col .label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8a8070;margin-bottom:6px;}
.footer-col a:hover{color:#fff;}
.footer-bottom{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;padding-top:26px;font-size:11px;letter-spacing:.1em;color:#8a8070;}

.simple-footer{background:var(--ink);color:#8a8070;padding:36px 48px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;max-width:1440px;margin:0 auto;}

/* breadcrumb / page head */
.page-head{max-width:1344px;margin:0 auto;padding:44px 48px 26px;}
.page-head .crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.page-head h1{font-size:54px;margin:14px 0 6px;}
.page-head p{font-size:13px;color:var(--muted2);margin:0;}

/* filter bar */
.filter-bar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  max-width:1344px;margin:0 auto;padding:0 48px 26px;border-bottom:1px solid var(--border3);
}
.filter-pills{display:flex;gap:10px;flex-wrap:wrap;}
.pill{
  padding:9px 18px;border-radius:999px;font-family:inherit;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--muted3);
}
.pill.active{border-color:var(--maroon);background:var(--maroon);color:#fff;}
.sort{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);}
.sort span.box{border:1px solid var(--border2);padding:9px 16px;}

/* catalog layout */
.catalog-wrap{display:grid;grid-template-columns:220px 1fr;gap:40px;max-width:1344px;margin:0 auto;padding:40px 48px 70px;}
.catalog-aside{display:flex;flex-direction:column;gap:30px;font-size:13px;}
.catalog-aside .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.catalog-aside .opts{display:flex;flex-direction:column;gap:11px;margin-top:16px;color:var(--text2);}
.catalog-aside .sizes{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.catalog-aside .sizes span{border:1px solid var(--border2);padding:7px 12px;font-size:12px;}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-content:start;}

/* product detail */
.product-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;max-width:1344px;margin:0 auto;padding:36px 48px 70px;}
.gallery{display:grid;grid-template-columns:84px 1fr;gap:16px;}
.thumbs{display:flex;flex-direction:column;gap:12px;}
.thumb{aspect-ratio:3/4;cursor:pointer;background:repeating-linear-gradient(135deg,#f5e6c6 0 12px,#fcefd6 12px 24px);outline:1px solid var(--border);outline-offset:-1px;}
.thumb.active{outline:2px solid var(--maroon);}
.main-shot{aspect-ratio:3/4;background:repeating-linear-gradient(135deg,#eeddb9 0 18px,#efe7d9 18px 36px);display:flex;align-items:flex-end;justify-content:center;padding:20px;}
.main-shot span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--ph-text);text-transform:uppercase;}

.buy-col{padding-top:14px;}
.buy-col .crumb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.buy-col h1{font-size:46px;line-height:1.1;margin:16px 0 8px;}
.buy-col .price{font-size:22px;color:var(--maroon);font-family:'Cormorant Garamond',serif;}
.buy-col .desc{font-size:14px;line-height:1.85;color:var(--muted3);margin:26px 0 0;max-width:440px;}
.opt-row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.opt-row a{color:var(--maroon);}
.size-row{display:flex;gap:10px;margin-top:34px;}
.size-box{min-width:52px;height:46px;display:flex;align-items:center;justify-content:center;font-family:inherit;font-size:13px;letter-spacing:.1em;cursor:pointer;border:1px solid var(--border2);background:transparent;color:var(--ink);}
.size-box.active{border-color:var(--ink);background:var(--ink);color:#fff;}

.colour-row{display:flex;gap:12px;}
.swatch{width:30px;height:30px;border-radius:50%;cursor:default;}

.qty-buy{display:flex;gap:14px;margin-top:36px;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--border2);}
.qty-stepper button{width:46px;height:56px;border:none;background:transparent;cursor:pointer;font-size:18px;color:var(--ink);}
.qty-val{min-width:34px;text-align:center;font-size:15px;}
.add-btn{flex:1;height:56px;border:none;cursor:pointer;font-family:inherit;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--maroon);transition:background .25s;}
.add-btn.added{background:var(--olive);}

.accordion{margin-top:40px;border-top:1px solid var(--border);}
.accordion .row{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--border);font-size:13px;letter-spacing:.06em;cursor:pointer;}
.accordion .row .plus{color:var(--muted);}

@media (max-width:1100px){
  .catalog-wrap{grid-template-columns:1fr;}
  .catalog-aside{flex-direction:row;flex-wrap:wrap;gap:30px 40px;}
  .product-wrap{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .editorial{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .site-nav{grid-template-columns:1fr;justify-items:center;gap:14px;padding:20px;}
  .site-nav .links{display:none;}
  .hero{height:auto;padding:60px 0;}
  .hero-copy{padding:0 24px;max-width:100%;}
  .hero-copy h2{font-size:46px;}
  section.block{padding:50px 24px;}
  .grid-4,.grid-3,.grid-6{grid-template-columns:repeat(2,1fr);}
  .editorial-copy{padding:40px 28px;}
  .footer-top{grid-template-columns:1fr;}
  .catalog-wrap{padding:30px 24px 50px;}
  .catalog-grid{grid-template-columns:1fr 1fr;}
  .product-wrap{padding:30px 24px 50px;}
  .gallery{grid-template-columns:60px 1fr;}
  .page-head{padding:32px 24px 20px;}
  .page-head h1{font-size:40px;}
  .filter-bar{padding:0 24px 20px;}
}
