@font-face {
  font-family: "Fraunces";
  src: url("assets/Fraunces_72pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("assets/outfit-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("assets/outfit-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --background: #f5f0e4;
  --foreground: #000;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--background); color: var(--foreground); }

.coming-soon {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 35% 31% 34%;
  justify-items: center;
  overflow: hidden;
  padding: clamp(30px, 4vh, 60px) 24px clamp(34px, 5vh, 70px);
}

.brand {
  align-self: start;
  width: min(410px, 32vw);
}
.logo { display: block; width: 100%; height: auto; }

.message { align-self: center; text-align: center; }
.message h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 6vw, 116px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -0.045em;
}

.contact {
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(34px, 4vh, 60px);
  font-family: "Outfit", Arial, sans-serif;
}
.arrow {
  font-size: clamp(25px, 1.8vw, 34px);
  line-height: 1;
}
address {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
  font-size: clamp(20px, 1.55vw, 30px);
  line-height: 1.18;
  text-align: center;
}
address a { color: inherit; text-decoration: none; }
address a:hover, address a:focus-visible { text-decoration: underline; text-underline-offset: .14em; }

@media (max-width: 700px) {
  .coming-soon {
    grid-template-rows: 34% 28% 38%;
    padding: 28px 20px 32px;
  }
  .brand { width: min(280px, 72vw); }
  .message h1 { font-size: clamp(48px, 16vw, 72px); white-space: nowrap; }
  .contact { gap: 30px; }
  address { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.22; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .coming-soon { grid-template-rows: 32% 30% 38%; padding-block: 20px; }
  .brand { width: min(230px, 25vw); }
  .message h1 { font-size: clamp(42px, 8vh, 64px); }
  .contact { gap: 16px; }
  address { font-size: 15px; }
}