:root {
  color-scheme: dark;
  --white: #F0EBE9;
  --green: #46523D;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--white);
  background: var(--green);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
}

.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/foto-artezan.png") center center / cover no-repeat;
}

.content {
  width: 100%;
  max-width: 80rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(5rem, 23.5svh, 14rem);
}

.brand {
  position: relative;
  width: min(44vw, 46rem);
  aspect-ratio: 906 / 238;
  margin: 0;
  overflow: hidden;
}

.brand img {
  position: absolute;
  display: block;
  width: 137.9690949%;
  height: auto;
  max-width: none;
  left: -17.8807947%;
  top: -78.1512605%;
}

.contacts {
  margin-top: clamp(2rem, 5.9svh, 3.4rem);
  font-size: clamp(1.05rem, 1.75vw, 1.625rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgb(15 27 18 / 28%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}

.contacts-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: .55rem;
}

.contact {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--white);
  text-decoration: none;
  text-underline-offset: .22em;
  border-radius: .2rem;
}

.contact:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 6px;
}

@media (hover: hover) {
  .contact:hover span { text-decoration: underline; }
}

.icon {
  display: block;
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
}

.icon-phone { width: 1.55em; height: 1.6em; }
.icon-email { width: 1.55em; }
.icon-location { width: 1.2em; height: 1.55em; }
.location { text-align: center; }
.city { white-space: nowrap; }

.footer {
  margin-top: auto;
  padding-top: 5rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.footer img {
  display: block;
  width: 7.1rem;
  height: auto;
  filter: brightness(0) saturate(100%) invert(96%) sepia(8%) saturate(117%) hue-rotate(330deg) brightness(97%) contrast(94%);
}

@media (min-width: 1700px) {
  .contacts { font-size: 1.75rem; }
}

@media (max-width: 700px) {
  .page { padding-inline: 1.5rem; }
  .page::before {
    background-position: 46% center;
    background-image: linear-gradient(rgb(22 35 24 / 12%), rgb(22 35 24 / 20%)), url("assets/foto-artezan.png");
  }
  .content { padding-top: clamp(4rem, 17svh, 9rem); }
  .brand { width: min(100%, 30rem); }
  .contacts {
    width: 100%;
    margin-top: 2.75rem;
    gap: 1.1rem;
    font-size: 1.0625rem;
  }
  .contacts-row { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .contact { gap: .7rem; }
  .icon { width: 1.4rem; height: 1.4rem; }
  .icon-phone { width: 1.4rem; height: 1.6rem; }
  .icon-location { width: 1.25rem; height: 1.6rem; }
  .location { max-width: 21rem; align-items: flex-start; }
  .location .icon { margin-top: .14rem; }
  .location > span { text-align: left; }
  .footer { padding-top: 4rem; padding-bottom: 1.5rem; }
  .footer img { width: 6.3rem; }
}

@media (max-width: 359px) {
  .page { padding-inline: 1rem; }
  .contacts { font-size: 1rem; }
}

@media (max-height: 500px) and (min-width: 701px) {
  .content { padding-top: 2rem; }
  .brand { width: min(36vw, 25rem); }
  .contacts { margin-top: 1.5rem; }
  .footer { padding-top: 2rem; padding-bottom: 1rem; }
  .footer img { width: 5.5rem; }
}