@font-face {
  font-family: Bricolage;
  src: url("assets/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --carbone: #171817;
  --bronze: #a8834e;
  --beige: #d8c7ae;
  --creme: #f0eae0;
  --blanc: #fff;
  font-family: Bricolage, system-ui, sans-serif;
  background: var(--carbone);
  color: var(--blanc);
}

* { box-sizing: border-box; }
body, h1, p, figure { margin: 0; }
main {
  max-width: 780px;
  margin: auto;
  padding: clamp(32px, 5svh, 52px) clamp(18px, 5vw, 24px) 32px;
  text-align: center;
}
.logo {
  width: clamp(194px, 43vw, 258px);
  height: auto;
  display: block;
  margin: auto;
}
.baseline {
  color: var(--creme);
  font-size: clamp(.83rem, 2.5vw, .94rem);
  letter-spacing: .075em;
  line-height: 1.38;
}
.baseline::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 19px auto 12px;
  background: var(--bronze);
}
figure {
  margin: clamp(20px, 3vw, 28px) 0 0;
}
.salon {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
}
section { margin-top: clamp(23px, 3.5vw, 32px); }
h1 {
  font-size: clamp(1.68rem, 5.4vw, 2.5rem);
  font-weight: 550;
  line-height: 1.09;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.intro {
  margin: 9px auto 0;
  color: var(--beige);
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  line-height: 1.4;
  text-wrap: balance;
}
.destinations {
  display: grid;
  gap: 12px;
  margin: clamp(23px, 3vw, 30px) auto 0;
}
.destinations > * {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 12px clamp(12px, 3vw, 20px);
  min-height: 56px;
  border-radius: 5px;
  font: inherit;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1.25;
  text-align: left;
}
.instagram {
  border: 1px solid var(--bronze);
  background: var(--carbone);
  color: var(--blanc);
  text-decoration: none;
}
.instagram:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }
@media (hover: hover) {
  .instagram:hover { background: var(--beige); color: var(--carbone); }
  .instagram:hover svg { color: inherit; }
}
.site { background: var(--beige); color: var(--carbone); }
.destinations svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.instagram svg { color: var(--beige); }
.point { fill: currentColor; stroke: none; }
.end { margin-inline-start: auto; }
@media (max-width: 480px) {
  .salon {
    aspect-ratio: 40 / 27;
    object-fit: cover;
  }
  h1 { font-size: clamp(1.375rem, 7vw, 1.68rem); }
  .baseline {
    margin-inline: -10px;
    font-size: clamp(.68rem, 3.45vw, .94rem);
    letter-spacing: .015em;
  }
}