@font-face {
  font-family: "Lora";
  font-weight: 500 700;
  src: url("/assets/fonts/lora-variable-regular.woff2");
}

@font-face {
  font-family: "Cera Stencil";
  font-weight: 500;
  src: url("/assets/fonts/cera-stencil-medium.woff2");
}

:root {
  --color-begonia: oklch(69.45% 0.157 35.84);
  --color-morning-snow: oklch(96.35% 0.0067 97.35);
  --color-tundora: oklch(44.95% 0.005 91.5);
  --color-tundora-dark: oklch(29.95% 0.005 91.5);
  --color-white: oklch(100% 0 0);
  --font-family-body: Lora, Charter, "Bitstream Charter", "Sitka Text", Cambria,
    serif;
  --font-family-display: "Cera Stencil", Avenir, Montserrat, Corbel,
    "URW Gothic", source-sans-pro, sans-serif;
  --font-size-body-m: 1rem; /* 16px */
  --font-size-body-l: 1.125rem; /* 18px */
  --font-size-2xl: 2.25rem; /* 36px */
  --font-size-3xl: 3rem; /* 48px */
  --font-size-display-m: var(--font-size-2xl);
  --font-weight-medium: 500;
  --line-height-m: 1.5;
}

* {
  box-sizing: border-box;
}

body {
  align-items: center;
  background: var(--color-morning-snow) url("/assets/images/timbering-60.svg");
  background-size: 14rem auto;
  color: var(--color-tundora-dark);
  display: grid;
  gap: 3rem;
  grid-template-rows: 1fr auto auto 8rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-m);
  margin: 0;
}

img {
  vertical-align: middle;
  width: 100%;
}

h1 {
  margin-block: 4rem 0;
  margin-inline: auto;
  max-width: 16rem;
  width: 40%;
}

h1 img + img {
  display: none;
}

p.opening {
  color: var(--color-begonia);
  font-family: var(--font-family-display);
  font-size: var(--font-size-display-m);
  margin-block: 2rem;
  text-align: center;
}

section h2 {
  color: var(--color-begonia);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

section p {
  margin: 0 2rem 4rem;
  text-align: center;
}

section a {
  color: var(--color-begonia); 
}

section .address {
  color: var(--color-begonia);
}

section .address span {
  vertical-align: baseline;
}

section svg {
  height: 1.5rem;
  vertical-align: bottom;
  width: 1.5rem;
}

section img {
  border-block-width: 0.125rem;
  display: block;
  margin-inline: auto;
}

ul {
  display: flex;
  list-style-type: none;
  margin-block: 2rem;
  margin-inline: auto;
  padding-inline-start: 0;
  width: max-content;
}

li a {
  display: block;
  padding: 0.75rem;
}

li a span {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

svg {
  --icon-fill: var(--color-begonia);
  --icon-line: var(--color-tundora);
}

@media (min-aspect-ratio: 1/1) {
  :root {
    --font-size-display-m: var(--font-size-3xl);
  }

  h1 {
    max-width: 40rem;
  }

  h1 img {
    display: none;
  }
  h1 img + img {
    display: inline-block;
  }
}

@media (min-width: 60rem) {
  body {
    font-size: var(--font-size-body-l);
    height: 100vh;
    height: 100dvh;
  }

  h1 {
    margin-block-start: 8rem;
  }

  section {
    margin-inline: auto;
    max-width: 75%;
  }

  section p {
    margin-inline: auto;
    width: 50%;
  }
}