:root {
  --ink: #f6f2ed;
  --gold: #d0b08a;
  --black: #090909;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--black); }
body { min-height: 100%; margin: 0; overflow: hidden; color: var(--ink); background: var(--black); font-family: Montserrat, Arial, sans-serif; }
a { color: inherit; }
main { height: 100svh; min-height: 100dvh; display: grid; grid-template-rows: clamp(3.8rem, 8vh, 5rem) minmax(0, 1fr); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -35%, #4a4a49 0, #151515 45%, #090909 75%);
}

.wordmark {
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: .9;
  padding-left: .22em;
  text-decoration: none;
}

.choice-grid { min-height: 0; display: grid; grid-template-rows: 2fr 1fr 1fr; }
.panel {
  --image: none;
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: #171514 var(--image) center / cover no-repeat;
  text-decoration: none;
}
.panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: inherit;
  transition: transform 850ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}
.panel__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.84) 92%);
  transition: background 450ms ease;
}
.main-brand { --image: url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=85&w=1400"); background-position: 53% center; }
.collection { --image: url("https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&q=85&w=1400"); background-position: 53% center; }
.studio { --image: url("https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=85&w=1400"); background-position: center; }

.panel__content { align-self: end; width: 100%; padding: clamp(1.1rem, 3vh, 2.25rem) clamp(1.4rem, 5vw, 4rem); transform: translateY(.2rem); transition: transform 450ms ease; }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: .67rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3.4vw, 3.75rem); font-weight: 600; letter-spacing: .13em; line-height: 1.08; }
.domain { margin: .75rem 0 0; font: italic 1.45rem/1.05 "Cormorant Garamond", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.domain span { font-family: Montserrat, sans-serif; font-size: .8em; opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.panel:hover::before, .panel:focus-visible::before { transform: scale(1.055); filter: brightness(1.12); }
.panel:hover .panel__shade, .panel:focus-visible .panel__shade { background: linear-gradient(180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.76) 90%); }
.panel:hover .panel__content, .panel:focus-visible .panel__content { transform: translateY(-.35rem); }
.panel:hover .domain span, .panel:focus-visible .domain span { opacity: 1; transform: translate(.25rem, -.15rem); }
.panel:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }

@media (max-width: 600px) {
  .choice-grid { grid-template-rows: 2fr 1fr 1fr; }
  .main-brand { background-position: 50% 32%; }
  .collection { background-position: center; }
  .panel__content { padding: .85rem 1.25rem; }
  .eyebrow { margin-bottom: .36rem; font-size: .48rem; letter-spacing: .22em; }
  .main-brand h1 { font-size: clamp(2rem, 10vw, 3.25rem); }
  .collection h2, .studio h2 { font-size: clamp(.95rem, 4.7vw, 1.35rem); }
  .collection h2 br { display: none; }
  .domain { margin-top: .28rem; font-size: .78rem; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}