:root {
  color-scheme: dark;
  --black: #050505;
  --gold: #d9aa43;
  --gold-light: #f1d482;
  --cream: #f5efe3;
  --muted: #aaa59c;
  --line: rgba(217, 170, 67, 0.34);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font-family: "Montserrat", Arial, sans-serif;
}

.page-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(24px, 4vw, 54px);
  background:
    linear-gradient(90deg, rgba(3,3,3,.62) 0%, rgba(3,3,3,.82) 34%, rgba(3,3,3,.88) 58%, rgba(3,3,3,.52) 100%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    url("/assets/menswear-hero-v2.png") center / cover no-repeat,
    radial-gradient(circle at 50% 35%, #18130a 0, #080705 34%, #030303 70%);
  background-size: auto, 54px 54px, 54px 54px, cover, auto;
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(217, 170, 67, .28);
  pointer-events: none;
}

.page-shell::after {
  content: "";
  position: absolute;
  inset: clamp(23px, 2.8vw, 40px);
  border: 1px solid rgba(217, 170, 67, .08);
  pointer-events: none;
}

.gold-glow {
  position: absolute;
  width: 42vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(205, 149, 39, .1);
  filter: blur(110px);
  z-index: -1;
}
.gold-glow--top { top: -30vw; right: -10vw; }
.gold-glow--bottom { bottom: -34vw; left: -14vw; }

.hero {
  width: min(980px, 90vw);
  text-align: center;
  padding: clamp(34px, 4vw, 58px) 0 clamp(20px, 3vw, 40px);
  text-shadow: 0 2px 20px rgba(0,0,0,.82);
}

.eyebrow {
  margin: 0 0 clamp(20px, 3vh, 34px);
  color: var(--gold-light);
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 600;
  letter-spacing: .5em;
}

.logo {
  display: block;
  width: clamp(170px, 19vw, 275px);
  aspect-ratio: 1.08 / 1;
  object-fit: cover;
  object-position: center;
  margin: 0 auto;
  filter: drop-shadow(0 12px 32px rgba(201, 143, 28, .16));
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px auto clamp(16px, 2vh, 24px);
}
.ornament span { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament span:last-child { transform: rotate(180deg); }
.ornament i { width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); }

h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(58px, 8vw, 108px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.035em;
}

.intro {
  width: min(680px, 88%);
  margin: clamp(22px, 3vh, 34px) auto clamp(30px, 4vh, 48px);
  color: var(--muted);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.8;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  background: rgba(4, 4, 4, .46);
  backdrop-filter: blur(8px);
}

.features article { padding: clamp(20px, 3vw, 34px) 18px; }
.features article + article { border-left: 1px solid var(--line); }

.feature-mark {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  font-family: "Cormorant Garamond", serif;
  font-size: 10px;
  margin-bottom: 14px;
}
.feature-mark--diamond { width: 18px; height: 18px; border-radius: 0; transform: rotate(45deg); margin: 5px 5px 19px; }

.features h2 {
  margin: 0 0 9px;
  color: var(--cream);
  font-size: clamp(9px, .9vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.features p { margin: 0; color: #7f7b74; font-size: clamp(9px, .8vw, 11px); line-height: 1.5; }

footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 44px);
  color: #817661;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .34em;
}
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }

@media (max-width: 680px) {
  .page-shell {
    padding: 18px;
    background-position: center, center, center, 62% center, center;
  }
  .page-shell::before { inset: 10px; }
  .page-shell::after { inset: 16px; }
  .hero { width: min(88vw, 480px); padding-block: 28px; }
  .eyebrow { letter-spacing: .3em; line-height: 1.7; }
  .logo { width: 158px; }
  .features { grid-template-columns: 1fr; }
  .features article { padding: 18px; }
  .features article + article { border-left: 0; border-top: 1px solid var(--line); }
  footer { flex-wrap: wrap; gap: 9px; line-height: 1.5; }
}

@media (max-height: 760px) and (min-width: 681px) {
  .hero { padding-block: 20px; }
  .logo { width: 150px; }
  h1 { font-size: 64px; }
  .intro { margin-block: 16px 22px; }
  .features article { padding-block: 16px; }
  footer { margin-top: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: reveal .9s ease-out both; }
  .logo { animation: glow 5s ease-in-out infinite; }
  @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes glow { 50% { filter: drop-shadow(0 12px 42px rgba(222, 164, 48, .28)); } }
}