@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  --bg:#050505;
  --fg:#f2f2ef;
  --muted:#9a9a95;
  --line:#343434;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% -10%, #171717 0, #090909 30%, var(--bg) 60%),
    var(--bg);
  color:var(--fg);
  font-family:"Space Grotesk",Arial,sans-serif;
  letter-spacing:.02em;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:10;
  opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
.topbar{
  height:58px; margin:0 4.3vw;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  font:500 12px "DM Mono",monospace;
  letter-spacing:.28em;
}
.wordmark{font-size:13px}
.shop-link{transition:opacity .2s}.shop-link:hover{opacity:.55}

.hero{
  min-height:68vh;
  display:grid; place-items:center;
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.hero:after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(transparent,rgba(255,255,255,.025));
  pointer-events:none;
}
.hero-inner{text-align:center; position:relative; z-index:1; padding:70px 20px}
.eyebrow,.drop-label{
  font:400 10px "DM Mono",monospace;
  letter-spacing:.22em; color:var(--muted);
}
.brand-mark{
  display:block; width:min(310px,62vw); height:auto;
  margin:34px auto 22px;
  filter:grayscale(1) contrast(1.2) brightness(1.2);
}
.drop-label{color:var(--fg); letter-spacing:.42em}
.hero-arrow{
  display:block; margin-top:70px; font-size:22px;
  opacity:.65; animation:float 2.2s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(6px);opacity:.35}}

.drop{padding:30px 4.1vw 100px}
.section-head{
  display:flex; justify-content:space-between; align-items:center;
  font:400 10px "DM Mono",monospace; letter-spacing:.25em;
  color:var(--muted); margin-bottom:18px;
}
.products{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.1vw;
}
.product-image{
  display:block; background:#0a0a0a; overflow:hidden;
  border:1px solid #242424;
}
.product-image img{
  width:100%; display:block; aspect-ratio:1.28/1; object-fit:cover;
  filter:saturate(.75) contrast(1.05);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .3s;
}
.product-image:hover img{transform:scale(1.025);filter:saturate(.9) contrast(1.08)}
.product-meta{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; padding:14px 2px 34px;
  border-bottom:1px solid var(--line);
}
h2{
  font-size:17px; line-height:1; margin:0 0 11px;
  font-weight:500; letter-spacing:.18em;
}
.product-meta p{
  margin:0; color:var(--muted);
  font:400 9px "DM Mono",monospace; letter-spacing:.13em;
}
.product-meta strong{font:400 13px "DM Mono",monospace; white-space:nowrap}
.buy-line{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:26px 0; border-bottom:1px solid var(--line);
  font:400 9px "DM Mono",monospace; letter-spacing:.18em; color:var(--muted);
}
.buy-line span:nth-child(2){text-align:center}.buy-line span:last-child{text-align:right}
.instagram-cta{
  display:flex; justify-content:space-between; align-items:center;
  padding:30px 0; border-bottom:1px solid var(--line);
  font:500 11px "DM Mono",monospace; letter-spacing:.18em;
  transition:opacity .2s;
}
.instagram-cta:hover{opacity:.55}

footer{
  padding:45px 4.1vw 55px; text-align:center;
  font:400 10px "DM Mono",monospace; letter-spacing:.24em;
  color:var(--muted);
}
.footer-mark{font-family:serif;font-size:35px;color:var(--fg);line-height:1;margin-bottom:10px}
footer a{display:inline-block;margin-top:24px;color:var(--fg)}
.footer-location{margin-top:15px;font-size:8px;letter-spacing:.17em}

@media (max-width:700px){
  .topbar{height:52px;margin:0 22px}
  .hero{min-height:72vh}
  .hero-inner{padding:55px 15px}
  .brand-mark{width:min(280px,75vw)}
  .products{grid-template-columns:1fr;gap:35px}
  .product-meta{padding-bottom:22px}
  .drop{padding:22px 20px 70px}
  .section-head{margin-bottom:12px}
  .buy-line{grid-template-columns:1fr;gap:12px}
  .buy-line span{text-align:left!important}
  .instagram-cta{font-size:9px}
  .footer-location{line-height:1.8}
}