*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #0b0b0b;
  color: #efe8dc;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
}

a { color: inherit; }

.top {
  display: flex;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top nav { display: flex; gap: 1.25rem; }
.top a { text-decoration: none; }
.top a:hover { text-decoration: underline; }

.intro {
  padding: 8vh 1.5rem 10vh;
}

.intro h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 0.92;
}

.intro em { font-style: italic; color: #c9a66b; }

.plate {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 2rem 1.5rem;
}

.plate h2 {
  margin: 0.35rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 500;
}

.plate span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.plate-a { background: linear-gradient(160deg, #1a1410, #3a2418); }
.plate-b { background: linear-gradient(160deg, #101612, #1e2c22); }
.plate-c { background: linear-gradient(160deg, #141018, #2a1830); }
.plate-d { background: linear-gradient(160deg, #161410, #2c2818); }

.end {
  padding: 5rem 1.5rem 6rem;
  max-width: 38rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.end a { color: #c9a66b; }