:root{
  --paper:#f7f5f0;
  --ink:#171715;
  --muted:#77736b;
  --line:#d9d4ca;
  --max:1420px;
}


/* -------------------------------------------------
   BASE
------------------------------------------------- */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

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

button,
input{
  font:inherit;
}

.wrap{
  width:min(var(--max),calc(100% - 64px));
  margin:auto;
}


/* -------------------------------------------------
   HEADER + NAVIGATION
------------------------------------------------- */

header{
  height:92px;
  display:flex;
  align-items:center;
  border-bottom:1px solid rgba(23,23,21,.12);
  background:rgba(247,245,240,.97);
  position:sticky;
  top:0;
  z-index:20;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0 40px;
}

.logo{
  flex:0 0 auto;
}

.logo img{
  width:180px;
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:multiply;
}

nav{
  display:flex;
  gap:34px;
  align-items:center;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}

nav a{
  transition:opacity .2s ease;
}

nav a:hover{
  opacity:.55;
}


/* -------------------------------------------------
   TYPE
------------------------------------------------- */

.eyebrow,
.section-kicker{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

h1,
h2,
h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.035em;
}

h1{
  font-size:clamp(48px,5vw,86px);
  line-height:.98;
  margin:0;
}

h2{
  font-size:clamp(36px,3.7vw,60px);
  line-height:1.05;
  margin:0;
}

p{
  color:#514e47;
}

.cta{
  display:inline-flex;
  margin-top:30px;
  padding:14px 0;
  border-bottom:1px solid var(--ink);
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
}


/* -------------------------------------------------
   PAGE HEADERS
------------------------------------------------- */

.page-head{
  padding:90px 0 65px;
}

.page-head-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end;
}

.page-head p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.6;
  margin:0;
  max-width:620px;
}


/* -------------------------------------------------
   FILTERS
------------------------------------------------- */

.filters{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:19px 0;
  margin-bottom:52px;
}

.filters a{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
}

.filters a.active{
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:6px;
}

.filter-empty{
  display:none;
  padding:55px 0 100px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  line-height:1.5;
  color:#514e47;
}


/* -------------------------------------------------
   GALLERY + CARDS
------------------------------------------------- */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:42px 28px;
  padding-bottom:120px;
}

.card{
  grid-column:span 4;
  min-width:0;
}

.artbox{
  background:#fbfaf7;
  aspect-ratio:1/1;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}

.artbox img{
  width:100%;
  height:100%;
  object-fit:cover;
  mix-blend-mode:multiply;
  transition:transform .45s ease;
}

.card:hover .artbox img{
  transform:scale(1.018);
}

.card .title{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.15;
  margin-top:15px;
}

.card .meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
  letter-spacing:.11em;
  line-height:1.45;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:7px;
}

.card .status{
  float:none;
  flex:0 0 auto;
  white-space:nowrap;
}

.card-details{
  font-size:11px;
  line-height:1.65;
  color:var(--muted);
  margin-top:5px;
}

.card-price{
  font-size:11px;
  line-height:1.65;
  letter-spacing:.05em;
  color:var(--muted);
  margin-top:7px;
}


/* -------------------------------------------------
   PRODUCT PAGES
------------------------------------------------- */

.product{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
  min-height:calc(100vh - 104px);
}

.product-media{
  background:#fbfaf7;
  padding:42px 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.product-media img{
  max-width:100%;
  max-height:calc(100vh - 190px);
  object-fit:contain;
  mix-blend-mode:multiply;
}

.product-info{
  padding:70px 7vw 70px 70px;
  display:flex;
  align-items:center;
  min-width:0;
}

.product-inner{
  max-width:520px;
  width:100%;
}

.product-inner h1{
  font-size:clamp(48px,5vw,78px);
}

.product-desc{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.65;
  margin:24px 0 0;
}

.product-price{
  font-family:Georgia,'Times New Roman',serif;
  font-size:28px;
  margin:24px 0 0;
}


/* -------------------------------------------------
   PRODUCT OPTIONS
------------------------------------------------- */

.option-group{
  margin-top:30px;
}

.option-label{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}

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

.option{
  border:1px solid var(--line);
  background:transparent;
  padding:14px 15px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  line-height:1.35;
  color:var(--ink);
}

.option strong{
  display:block;
  font-family:Georgia,'Times New Roman',serif;
  font-size:15px;
  font-weight:400;
  margin-bottom:4px;
}

.option.active{
  border-color:var(--ink);
  background:#fbfaf7;
}

.variant-note{
  font-size:11px;
  color:var(--muted);
  line-height:1.55;
  margin-top:12px;
}

.edition-line{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:5px;
}


/* -------------------------------------------------
   PRODUCT DETAILS + CHECKOUT
------------------------------------------------- */

.detail-list{
  margin:34px 0 0;
  border-top:1px solid var(--line);
}

.detail-row{
  display:flex;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line);
  padding:15px 0;
  font-size:12px;
  line-height:1.45;
}

.detail-row span:last-child{
  color:var(--muted);
  text-align:right;
}

.buy{
  display:block;
  width:100%;
  margin-top:32px;
  background:var(--ink);
  color:#fff;
  border:0;
  padding:18px 20px;
  text-align:center;
  font-size:11px;
  letter-spacing:.17em;
  text-transform:uppercase;
  cursor:pointer;
}

.buy:hover{
  opacity:.9;
}

.buy:disabled{
  opacity:.6;
  cursor:wait;
}

.note,
.secure-note{
  font-size:11px;
  color:var(--muted);
  line-height:1.55;
  margin-top:14px;
}


/* -------------------------------------------------
   THE OMEN IMAGE TREATMENT
------------------------------------------------- */

.omen-media{
  padding:70px 80px;
}

.omen-media img{
  max-width:100%;
  max-height:calc(100vh - 245px);
  mix-blend-mode:normal;
}


/* -------------------------------------------------
   EDITORIAL / STORY
------------------------------------------------- */

.editorial{
  padding:120px 0;
  border-top:1px solid var(--line);
}

.editorial-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:start;
}

.editorial p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.7;
  margin-top:26px;
}

.detail-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-top:55px;
}

.detail-images img{
  width:100%;
  background:#fbfaf7;
}


/* -------------------------------------------------
   ABOUT
------------------------------------------------- */

.about-hero{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:0;
  min-height:680px;
}

.about-copy{
  padding:90px max(32px,calc((100vw - var(--max))/2)) 90px 7vw;
  display:flex;
  align-items:center;
}

.about-copy p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.65;
  max-width:560px;
}

.about-photo{
  min-height:680px;
}

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


/* -------------------------------------------------
   SHOW SECTION
------------------------------------------------- */

.show-section{
  padding:110px 0;
}

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

.show-grid img{
  width:100%;
  height:620px;
  object-fit:cover;
}

.show-grid p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  line-height:1.65;
}


/* -------------------------------------------------
   COLLECTOR LIST
------------------------------------------------- */

.collector{
  padding:110px 0 125px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}

.collector p{
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:1.6;
  color:#5d5951;
  max-width:620px;
  margin:26px auto 35px;
}

.form{
  display:flex;
  max-width:560px;
  margin:auto;
  border-bottom:1px solid var(--ink);
}

.form input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  padding:16px 4px;
  font-size:15px;
  outline:0;
  color:var(--ink);
}

.form button{
  border:0;
  background:transparent;
  padding:0 4px 0 18px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  color:var(--ink);
}


/* -------------------------------------------------
   FOOTER
------------------------------------------------- */

footer{
  padding:65px 0 80px;
}

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

.footer-logo img{
  width:210px;
  height:70px;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:multiply;
}

.footer-right{
  text-align:right;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:2;
}

.footer-right a{
  transition:color .2s ease;
}

.footer-right a:hover{
  color:var(--ink);
}


/* -------------------------------------------------
   SMALL DESKTOP / TABLET LANDSCAPE
------------------------------------------------- */

@media(max-width:1100px){

  .nav{
    padding:0 20px;
  }

  .logo img{
    width:165px;
  }

  nav{
    gap:20px;
    font-size:11px;
    letter-spacing:.11em;
  }

  .product-info{
    padding-left:45px;
    padding-right:45px;
  }

}


/* -------------------------------------------------
   TABLET
------------------------------------------------- */

@media(max-width:900px){

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


  /* HEADER */

  header{
    height:auto;
    min-height:92px;
  }

  .nav{
    padding:12px 0;
    gap:18px;
  }

  .logo img{
    width:150px;
    max-height:58px;
  }

  nav{
    gap:15px;
    font-size:10px;
    letter-spacing:.09em;
  }


  /* PAGE HEAD */

  .page-head{
    padding:70px 0 50px;
  }

  .page-head-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .page-head p{
    max-width:700px;
  }


  /* FILTERS */

  .filters{
    gap:14px 20px;
    margin-bottom:42px;
  }


  /* GALLERY */

  .card{
    grid-column:span 6;
  }

  .gallery-grid{
    gap:46px 22px;
    padding-bottom:90px;
  }


  /* PRODUCT */

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

  .product-media{
    height:auto;
    min-height:0;
    padding:36px;
  }

  .product-media img{
    width:auto;
    max-width:100%;
    max-height:68vh;
  }

  .product-info{
    padding:60px 32px 80px;
  }

  .product-inner{
    max-width:620px;
    margin:auto;
  }


  /* THE OMEN */

  .omen-media{
    padding:50px 60px;
  }

  .omen-media img{
    max-height:62vh;
  }


  /* EDITORIAL */

  .editorial{
    padding:90px 0;
  }

  .editorial-grid,
  .show-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .detail-images{
    gap:20px;
  }


  /* ABOUT */

  .about-hero{
    grid-template-columns:1fr;
    min-height:0;
  }

  .about-photo{
    min-height:520px;
    height:60vh;
    order:-1;
  }

  .about-copy{
    padding:65px 24px;
  }


  /* SHOW */

  .show-section{
    padding:85px 0;
  }

  .show-grid img{
    height:auto;
    max-height:620px;
    object-fit:cover;
  }


  /* COLLECTOR */

  .collector{
    padding:90px 0 100px;
  }

}


/* -------------------------------------------------
   SMALL TABLET / LARGE PHONE
------------------------------------------------- */

@media(max-width:700px){

  .wrap{
    width:calc(100% - 32px);
  }


  /* HEADER */

  header{
    position:sticky;
    height:auto;
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:11px 0 12px;
  }

  .logo img{
    width:145px;
    max-height:52px;
  }

  nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,max-content);
    justify-content:start;
    gap:9px 20px;
    font-size:9.5px;
    line-height:1.4;
    white-space:normal;
  }


  /* TYPE */

  h1{
    font-size:clamp(44px,13vw,64px);
  }

  h2{
    font-size:clamp(34px,10vw,48px);
  }


  /* PAGE HEADER */

  .page-head{
    padding:55px 0 40px !important;
  }

  .page-head p{
    font-size:18px;
  }


  /* FILTERS */

  .filters{
    gap:13px 18px;
    padding:16px 0;
    margin-bottom:36px;
  }

  .filters a{
    font-size:10px;
    letter-spacing:.11em;
  }


  /* PRODUCT */

  .product-media{
    padding:22px 18px 28px;
  }

  .product-media img{
    width:100%;
    max-height:none;
    object-fit:contain;
  }

  .product-info{
    padding:50px 20px 70px;
  }

  .product-inner h1{
    font-size:clamp(44px,13vw,62px);
  }

  .product-desc{
    font-size:18px;
    line-height:1.6;
  }

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

  .option{
    padding:15px;
  }

  .detail-row{
    gap:20px;
  }


  /* OMEN */

  .omen-media{
    padding:38px 42px;
  }

  .omen-media img{
    max-height:none;
  }


  /* EDITORIAL */

  .editorial{
    padding:75px 0;
  }

  .editorial p{
    font-size:18px;
    line-height:1.65;
  }

  .detail-images{
    grid-template-columns:1fr;
    margin-top:40px;
  }


  /* ABOUT */

  .about-photo{
    min-height:0;
    height:auto;
  }

  .about-photo img{
    height:auto;
    object-fit:cover;
  }

  .about-copy{
    padding:55px 20px 70px;
  }

  .about-copy p,
  .show-grid p{
    font-size:18px;
  }


  /* COLLECTOR */

  .collector{
    padding:75px 0 85px;
  }

  .collector p{
    font-size:18px;
    margin:22px auto 28px;
  }

  .form input{
    font-size:16px;
  }


  /* FOOTER */

  footer{
    padding:50px 0 60px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:24px;
    align-items:start;
  }

  .footer-logo img{
    width:180px;
    height:auto;
  }

  .footer-right{
    text-align:left;
    line-height:2.2;
  }

}


/* -------------------------------------------------
   PHONE
------------------------------------------------- */

@media(max-width:560px){

  .wrap{
    width:calc(100% - 28px);
  }


  /* HEADER */

  .logo img{
    width:135px;
  }

  nav{
    grid-template-columns:repeat(3,max-content);
    gap:8px 15px;
    font-size:9px;
    letter-spacing:.07em;
  }


  /* PAGE SPACING */

  .page-head{
    padding:48px 0 34px !important;
  }


  /* FILTERS */

  .filters{
    gap:12px 15px;
    margin-bottom:32px;
  }

  .filters a.active{
    padding-bottom:4px;
  }


  /* GALLERY */

  .card{
    grid-column:span 12;
  }

  .gallery-grid{
    row-gap:48px;
    column-gap:0;
    padding-bottom:75px;
  }

  .card .title{
    margin-top:20px;
    font-size:22px;
    line-height:1.15;
  }

  .card .meta{
    gap:10px;
  }

  .card-details,
  .card-price{
    line-height:1.65;
  }

  .filter-empty{
    padding:35px 0 75px;
    font-size:20px;
  }


  /* PRODUCT */

  .product-media{
    padding:18px 14px 24px;
  }

  .product-info{
    padding:44px 18px 65px;
  }

  .product-price{
    font-size:26px;
  }

  .detail-row{
    font-size:11px;
    gap:14px;
  }

  .buy{
    padding:17px 15px;
  }


  /* OMEN */

  .omen-media{
    padding:32px 34px;
  }


  /* COLLECTOR */

  .collector{
    padding:68px 0 78px;
  }

  .collector p{
    max-width:420px;
  }

  .form{
    width:100%;
  }

  .form input{
    width:100%;
    padding:15px 2px;
  }

  .form button{
    flex:0 0 auto;
    padding-left:14px;
  }


  /* FOOTER */

  footer{
    padding:45px 0 55px;
  }

  .footer-logo img{
    width:165px;
  }

  .footer-right{
    font-size:10px;
    letter-spacing:.08em;
  }

}


/* -------------------------------------------------
   VERY SMALL PHONES
------------------------------------------------- */

@media(max-width:390px){

  .wrap{
    width:calc(100% - 24px);
  }

  .logo img{
    width:128px;
  }

  nav{
    gap:8px 11px;
    font-size:8.5px;
    letter-spacing:.055em;
  }

  .filters{
    gap:11px 13px;
  }

  .product-info{
    padding-left:16px;
    padding-right:16px;
  }

  .detail-row{
    gap:10px;
  }

  .omen-media{
    padding:26px 28px;
  }

}


/* -------------------------------------------------
   REDUCED MOTION
------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  .artbox img,
  nav a,
  .footer-right a{
    transition:none;
  }

  .card:hover .artbox img{
    transform:none;
  }

}