:root {
  color-scheme: light;
  --ivory: #faf8f4;
  --ink: #1d1916;
  --muted: #756a61;
  --sand: #d8c7b2;
  --taupe: #8a7867;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 1rem/1.55 "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

.landing {
  width: min(68rem, calc(100% - clamp(2rem, 8vw, 7rem)));
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 4.75rem) clamp(2rem, 5vw, 4rem);
  text-align: center;
}

.wordmark {
  position: relative;
  overflow: hidden;
  width: clamp(10.5rem, 21vw, 15rem);
  aspect-ratio: 1267 / 421;
  margin: 0 auto;
}

.wordmark img {
  /* Frame the original wordmark, including its full brand name. */
  position: absolute;
  top: -51.78%;
  left: -28.10%;
  width: 156.51%;
  height: auto;
}

.description {
  margin: .9rem 0 clamp(1.3rem, 3vw, 2.2rem);
  color: var(--muted);
  font-size: .93rem;
  letter-spacing: .03em;
}

.room {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.22;
  border-radius: 5px;
  background: var(--sand);
  object-fit: cover;
  object-position: center 57%;
}

.store {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

address {
  color: var(--muted);
  font-size: .94rem;
  font-style: normal;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem 1.15rem;
  margin-top: .85rem;
}

.actions a {
  display: inline-grid;
  place-items: center;
  min-height: 2.75rem;
  font-size: .875rem;
}

.whatsapp {
  padding: .55rem 1rem;
  background: var(--ink);
  color: var(--ivory);
  text-decoration: none;
}

.whatsapp:hover { background: #3b3027; }

.directions {
  padding-inline: .25rem;
  color: var(--ink);
  text-decoration-color: var(--taupe);
  text-underline-offset: .22em;
}

.actions a:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 4px;
}

@media (max-width: 42rem) {
  .room {
    aspect-ratio: 1.24;
    object-position: 57% center;
  }
}