:root{
  --ink:#161616;
  --muted:#707070;
  --line:#e8e6e2;
  --paper:#f7f5f1;
  --cream:#eee9df;
  --white:#fff;
  --accent:#b58b52;
  --max:1320px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"DM Sans",Arial,sans-serif;
  line-height:1.5;
}

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

button,
input{
  font:inherit;
}

img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

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

/* =========================
   ANNOUNCEMENT BAR
========================= */

.announcement{
  background:#171717;
  color:#fff;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.announcement-inner{
  height:36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.announcement a{
  font-weight:700;
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.nav-wrap{
  min-height:82px;
  display:flex;
  align-items:center;
  gap:32px;
}

.brand{
  font-size:29px;
  letter-spacing:-1.7px;
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
}

.brand strong{
  font-weight:800;
}

.brand span{
  font-weight:500;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:25px;
  margin-left:auto;
}

.main-nav a{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
  position:relative;
  padding:31px 0;
}

.main-nav a:after{
  content:"";
  position:absolute;
  left:0;
  bottom:24px;
  width:0;
  height:1px;
  background:var(--ink);
  transition:.25s;
}

.main-nav a:hover:after,
.main-nav a.active:after{
  width:100%;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
}

.nav-icon,
.mobile-toggle{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:20px;
}

.mobile-toggle{
  display:none;
}

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

.hero{
  height:min(760px,calc(100vh - 36px));
  min-height:620px;
  position:relative;
  overflow:hidden;
  background:#222;
}

.hero-media{
  position:absolute;
  inset:0;
  background:center/cover no-repeat;
  transition:
    opacity 1s ease,
    transform 6s ease;
  opacity:1;
  transform:scale(1.02);
}

.hero-slide{
  background-image:url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=2200&q=88");
}

.hero-slide-two{
  background-image:url("https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=2200&q=88");
  opacity:0;
}

.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.7) 0%,
      rgba(0,0,0,.35) 45%,
      rgba(0,0,0,.05) 100%
    );
}

.hero-content{
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  color:#fff;
}

.hero-copy{
  max-width:700px;
  padding-top:20px;
}

.kicker{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:2.8px;
  text-transform:uppercase;
}

.kicker.dark{
  color:#777;
}

.hero h1{
  font-family:"Playfair Display",serif;
  font-size:clamp(48px,6.2vw,84px);
  line-height:.98;
  letter-spacing:-2.2px;
  margin:20px 0 24px;
}

.hero h1 em,
.intro h2 em,
.editorial h2 em,
.store-copy h2 em,
.newsletter h2 em{
  font-weight:600;
}

.hero p{
  max-width:530px;
  font-size:16px;
  color:#f1f1f1;
  line-height:1.8;
  margin:0;
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border:1px solid var(--ink);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:800;
  transition:.25s;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-light{
  background:#fff;
  color:#111;
  border-color:#fff;
}

.btn-dark{
  background:#171717;
  color:#fff;
  border-color:#171717;
}

.text-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.1px;
  font-weight:800;
  border-bottom:1px solid #bbb;
  padding-bottom:6px;
}

.text-link span{
  transition:.25s;
}

.text-link:hover span{
  transform:translateX(5px);
}

.light-link{
  color:#fff;
  border-color:rgba(255,255,255,.6);
}

.hero-pager{
  position:absolute;
  bottom:38px;
  right:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:1px;
}

.pager-line{
  width:70px;
  height:1px;
  background:rgba(255,255,255,.7);
}

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

.section{
  padding:100px 0;
}

.intro{
  background:#fff;
}

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:end;
}

.intro h2,
.section-top h2,
.social-heading h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(38px,4.4vw,58px);
  line-height:1.03;
  letter-spacing:-1.5px;
  margin:15px 0 0;
}

.intro h2 em{
  color:#777;
}

.lead{
  font-size:18px;
  line-height:1.9;
  color:#5f5f5f;
  max-width:570px;
  margin:0 0 28px;
}

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

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

.section-top h2{
  font-size:clamp(36px,4vw,52px);
}

/* =========================
   CATEGORIES
========================= */

.categories-section{
  padding-top:30px;
}

.category-grid{
  display:grid;
  grid-template-columns:
    1.15fr
    1fr
    1fr
    1fr;

  grid-template-rows:
    260px
    260px;

  gap:14px;
}

.category-card{
  position:relative;
  overflow:hidden;
  background:#ddd;
}

.category-card.tall{
  grid-row:1/3;
}

.category-card.wide{
  grid-column:2/5;
}

.category-card:after,
.campaign:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0,0,0,.68)
    );
}

.category-card img,
.campaign img{
  transition:
    transform .65s cubic-bezier(.2,.65,.2,1);
}

.category-card:hover img,
.campaign:hover img{
  transform:scale(1.055);
}

.category-card span{
  position:absolute;
  z-index:2;
  bottom:20px;
  left:22px;
  color:#fff;
  font-size:19px;
  font-weight:700;
}

.category-card b{
  font-size:16px;
  margin-left:8px;
}

/* =========================
   CAMPAIGNS
========================= */

.campaign-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:14px;
}

.campaign{
  position:relative;
  min-height:520px;
  overflow:hidden;
}

.campaign-large{
  min-height:580px;
}

.campaign-copy{
  position:absolute;
  z-index:2;
  left:30px;
  bottom:30px;
  color:#fff;
}

.campaign-copy span{
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
}

.campaign-copy h3{
  font-family:"Playfair Display",serif;
  font-size:clamp(31px,3.5vw,48px);
  line-height:1.05;
  margin:9px 0 17px;
}

.campaign-copy b{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* =========================
   STATISTICS
========================= */

.stats-band{
  background:#171717;
  color:#fff;
  padding:52px 0;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.stats-grid>div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border-right:1px solid #3b3b3b;
}

.stats-grid>div:last-child{
  border-right:0;
}

.stats-grid strong{
  font-family:"Playfair Display",serif;
  font-size:42px;
  font-weight:600;
}

.stats-grid span{
  font-size:11px;
  line-height:1.5;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#c6c6c6;
}

/* =========================
   PRODUCTS
========================= */

.products-section{
  background:#f8f7f4;
}

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

.product-card{
  min-width:0;
}

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

.product-image img{
  transition:transform .5s;
}

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

.product-tag{
  position:absolute;
  z-index:2;
  left:12px;
  top:12px;
  background:#fff;
  padding:7px 9px;
  font-size:9px;
  font-weight:800;
  letter-spacing:1px;
}

.product-meta{
  padding:15px 2px 0;
}

.product-meta span{
  font-size:11px;
  color:#888;
  text-transform:uppercase;
  letter-spacing:1px;
}

.product-meta h3{
  font-size:14px;
  margin:6px 0 7px;
  font-weight:600;
}

.product-meta strong{
  font-size:14px;
}

/* =========================
   EDITORIAL
========================= */

.editorial{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  min-height:650px;
}

.editorial-image{
  min-height:600px;
}

.editorial-copy{
  background:var(--paper);
  display:flex;
  justify-content:center;
  flex-direction:column;
  padding:80px clamp(40px,7vw,110px);
}

.editorial-copy h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(40px,4.5vw,61px);
  line-height:1.02;
  letter-spacing:-1.5px;
  margin:16px 0 25px;
}

.editorial-copy p{
  max-width:490px;
  color:#666;
  line-height:1.85;
  margin:0 0 30px;
}

/* =========================
   STORE
========================= */

.store-section{
  background:#fff;
}

.store-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:70px;
  align-items:center;
}

.store-copy h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(42px,4.7vw,62px);
  line-height:1.02;
  letter-spacing:-1.5px;
  margin:16px 0 22px;
}

.store-copy p{
  color:#666;
  line-height:1.85;
  max-width:500px;
  margin-bottom:30px;
}

.store-feature{
  height:520px;
  position:relative;
  overflow:hidden;
}

.store-overlay{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  background:rgba(255,255,255,.94);
  padding:19px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.store-overlay span{
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800;
  color:#777;
}

.store-overlay strong{
  font-size:13px;
}

/* =========================
   SOCIAL
========================= */

.social-section{
  padding-top:50px;
}

.social-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:30px;
}

.social-heading p{
  color:#777;
  margin:0;
}

.social-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.social-grid img{
  aspect-ratio:1/1;
}

/* =========================
   NEWSLETTER
========================= */

.newsletter{
  background:var(--cream);
  padding:95px 0;
}

.newsletter-inner{
  text-align:center;
}

.newsletter h2{
  font-family:"Playfair Display",serif;
  font-size:clamp(42px,5vw,62px);
  line-height:1;
  letter-spacing:-1.5px;
  margin:16px 0;
}

.newsletter p{
  color:#666;
  margin:0 auto;
  max-width:520px;
}

.signup{
  width:min(590px,100%);
  margin:32px auto 0;
  border-bottom:1px solid #444;
  display:flex;
}

.signup input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  outline:0;
  padding:16px 4px;
  font-size:13px;
}

.signup button{
  border:0;
  background:transparent;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:800;
  cursor:pointer;
}

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

.footer{
  background:#171717;
  color:#fff;
  padding:65px 0 22px;
}

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

.footer-logo{
  color:#fff;
}

.footer-brand p{
  color:#a8a8a8;
  max-width:330px;
  line-height:1.7;
  font-size:13px;
}

.footer h4{
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#aaa;
  margin:4px 0 20px;
}

.footer-main>div:not(.footer-brand) a{
  display:block;
  color:#ddd;
  font-size:13px;
  margin:11px 0;
  transition:.2s;
}

.footer-main>div:not(.footer-brand) a:hover{
  color:#fff;
  transform:translateX(3px);
}

.footer-bottom{
  border-top:1px solid #333;
  margin-top:45px;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#888;
  font-size:10px;
  letter-spacing:.3px;
}

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

@media(max-width:1050px){

  .main-nav{
    gap:15px;
  }

  .main-nav a{
    font-size:10px;
  }

  .nav-wrap{
    gap:18px;
  }

  .category-grid{
    grid-template-columns:
      1fr
      1fr
      1fr;

    grid-template-rows:
      260px
      260px
      220px;
  }

  .category-card.tall{
    grid-row:1/3;
  }

  .category-card.wide{
    grid-column:1/4;
  }

  .intro-grid{
    gap:50px;
  }

  .store-grid{
    gap:45px;
  }
}

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

@media(max-width:820px){

  .container{
    width:min(var(--max),calc(100% - 32px));
  }

  .announcement-inner{
    justify-content:center;
  }

  .announcement-inner a{
    display:none;
  }

  .nav-wrap{
    min-height:68px;
  }

  .mobile-toggle{
    display:grid;
    order:0;
  }

  .brand{
    font-size:25px;
  }

  .main-nav{
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:10px 16px 20px;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }

  .main-nav.open{
    display:flex;
  }

  .main-nav a{
    padding:15px 5px;
    border-bottom:1px solid #eee;
  }

  .main-nav a:after{
    display:none;
  }

  .nav-actions{
    margin-left:auto;
  }

  .hero{
    height:680px;
    min-height:620px;
  }

  .hero-shade{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.2)
      );
  }

  .hero-copy{
    padding-top:0;
  }

  .hero h1{
    font-size:58px;
  }

  .hero p{
    font-size:15px;
  }

  .section{
    padding:76px 0;
  }

  .intro-grid,
  .editorial,
  .store-grid{
    grid-template-columns:1fr;
  }

  .intro-grid{
    gap:35px;
  }

  .category-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:
      240px
      240px
      240px;
  }

  .category-card.tall{
    grid-row:auto;
  }

  .category-card.wide{
    grid-column:1/3;
  }

  .campaign-grid{
    grid-template-columns:1fr;
  }

  .campaign,
  .campaign-large{
    min-height:500px;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;
    row-gap:30px;
  }

  .stats-grid>div:nth-child(2){
    border-right:0;
  }

  .product-grid{
    grid-template-columns:1fr 1fr;
  }

  .editorial-image{
    min-height:470px;
  }

  .editorial-copy{
    padding:65px 28px;
  }

  .store-feature{
    height:460px;
  }

  .social-grid{
    grid-template-columns:1fr 1fr;
  }

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

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

@media(max-width:560px){

  .announcement{
    font-size:9px;
    letter-spacing:.8px;
  }

  .nav-actions .nav-icon:nth-child(2){
    display:none;
  }

  .nav-wrap{
    gap:8px;
  }

  .hero{
    height:650px;
    min-height:620px;
  }

  .hero-content{
    align-items:flex-end;
    padding-bottom:76px;
  }

  .hero h1{
    font-size:45px;
    letter-spacing:-1.5px;
    margin:15px 0 18px;
  }

  .hero p{
    font-size:14px;
    line-height:1.7;
  }

  .hero-actions{
    gap:20px;
    flex-wrap:wrap;
    margin-top:27px;
  }

  .hero-pager{
    bottom:24px;
  }

  .section{
    padding:60px 0;
  }

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

  .section-top h2{
    font-size:35px;
  }

  .desktop-only{
    display:none;
  }

  .category-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:
      210px
      210px
      170px;
  }

  .category-card.wide{
    grid-column:1/3;
  }

  .category-card span{
    left:15px;
    bottom:14px;
    font-size:15px;
  }

  .campaign,
  .campaign-large{
    min-height:430px;
  }

  .campaign-copy{
    left:20px;
    bottom:20px;
  }

  .campaign-copy h3{
    font-size:35px;
  }

  .stats-band{
    padding:38px 0;
  }

  .stats-grid{
    grid-template-columns:1fr 1fr;
  }

  .stats-grid strong{
    font-size:34px;
  }

  .stats-grid span{
    font-size:9px;
  }

  .product-grid{
    gap:14px;
  }

  .product-meta h3{
    font-size:12px;
  }

  .product-meta strong{
    font-size:13px;
  }

  .editorial-image{
    min-height:360px;
  }

  .editorial-copy{
    padding:52px 20px;
  }

  .editorial-copy h2{
    font-size:40px;
  }

  .store-copy h2{
    font-size:42px;
  }

  .store-feature{
    height:360px;
  }

  .store-overlay{
    left:12px;
    right:12px;
    bottom:12px;
    display:block;
  }

  .store-overlay strong{
    display:block;
    margin-top:4px;
  }

  .social-heading{
    display:block;
  }

  .social-heading p{
    margin-top:10px;
  }

  .social-grid{
    gap:8px;
  }

  .newsletter{
    padding:70px 0;
  }

  .newsletter h2{
    font-size:43px;
  }

  .signup input{
    font-size:12px;
  }

  .signup button{
    font-size:9px;
  }

  .footer{
    padding-top:50px;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
    gap:35px 25px;
  }

  .footer-brand{
    grid-column:1/3;
  }

  .footer-bottom{
    display:block;
    line-height:1.8;
  }

  .footer-bottom span{
    display:block;
  }
}