@font-face {
  font-family: Lora;
  src: url("assets/lora.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url("assets/manrope.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --heading-font-size: clamp(32px, 2.3vw, 48px);
  color-scheme: dark;
  font-family: Manrope, Arial, sans-serif;
  color: #fff;
  background: #10200c;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { -webkit-tap-highlight-color: transparent; }

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: 53.426svh 7.5vw 9svh;
  overflow: hidden;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #10200c url("assets/birkenwald.webp") center center / cover no-repeat;
}

.shade { position: absolute; inset-inline: 0; pointer-events: none; }
.shade-top {
  top: 0;
  height: 64.141%;
  background: linear-gradient(to bottom, #000, #ddd 64.532%, #fff);
  mix-blend-mode: multiply;
}
.shade-green {
  bottom: 0;
  height: 43.889%;
  background: linear-gradient(to bottom, #fff, #18470f);
  mix-blend-mode: multiply;
}
.shade-bottom {
  bottom: 0;
  height: 64.141%;
  background: linear-gradient(to top, #00000080, #ddd 64.532%, #fff);
  mix-blend-mode: multiply;
}

.brand {
  position: absolute;
  top: 5.556svh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(180px, 13.125vw, 252px);
}
.brand img { display: block; width: 100%; height: auto; }
.content { max-width: 1632px; margin-inline: auto; }
h1, h2 { margin: 0; font-family: Lora, Georgia, serif; font-weight: 700; }
h1 {
  font-size: var(--heading-font-size);
  line-height: 1.20834;
  text-shadow: 0 0 5px #000;
  text-wrap: balance;
}
.intro p {
  margin: clamp(14px, 1.042vw, 20px) 0 0;
  font-size: calc(var(--heading-font-size) * 0.5833333333);
  line-height: 1.7143;
  text-shadow: 0 0 5px #000;
}
.contact { margin-top: clamp(64px, 5.417vw, 104px); }
.contact h2 {
  margin-bottom: clamp(22px, 1.25vw, 24px);
  font-size: calc(var(--heading-font-size) * 0.75);
  line-height: 1.28;
}
.contact-details {
  display: flex;
  gap: clamp(48px, 3.8021vw, 73px);
  align-items: start;
  font-size: calc(var(--heading-font-size) * 0.5);
  line-height: 1.33334;
}
address { margin: 0; font-style: normal; }
dl, dd { margin: 0; }
dl { display: grid; row-gap: 1.33334em; padding-top: 2px; }
dl > div { display: grid; grid-template-columns: 3.08334em auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.phone { text-decoration: none; white-space: nowrap; }
.phone:hover { text-decoration: underline; }
.email { color: #76b82a; }
.email:hover { color: #b3e17f; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

@media (max-width: 767px) {
  .page { padding: max(310px, 42svh) 7.2vw 48px; }
  .brand { top: 36px; width: 180px; }
  h1 { max-width: 560px; }
  .intro p { margin-top: 18px; line-height: 1.65; max-width: 520px; }
  .contact { margin-top: 48px; }
  .contact h2 { margin-bottom: 24px; }
  .contact-details { flex-wrap: wrap; gap: 25px 44px; line-height: 1.6; }
  dl { row-gap: 12px; padding: 0; }
  dl > div { grid-template-columns: 3.05em auto; }
  .shade-bottom { height: 80%; background: linear-gradient(to top, #000c, #0003 72%, transparent); mix-blend-mode: normal; }
  .backdrop { background-position: 57% center; }
}