@font-face {
  font-family: "Pacifico";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Pacifico-Regular.woff2") format("woff2");
}

:root {
  color-scheme: only light;
  --paper: #faf9f6;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #293537;
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  min-inline-size: 20rem;
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding:
    max(2rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(2rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  background: var(--paper);
}

.visit-card {
  inline-size: min(100%, 51.25rem);
  text-align: center;
}

.artwork,
.artwork img {
  display: block;
  inline-size: 100%;
}

.artwork {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-inline-size: 51.25rem;
  margin-inline: auto;
}

.artwork img {
  block-size: auto;
}

.artwork::before,
.artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(
    6% 59%,
    19% 57%,
    36% 59%,
    51% 57%,
    68% 59%,
    82% 57%,
    94% 59%,
    93% 89%,
    80% 92%,
    20% 92%,
    7% 89%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 55%,
    #000 63%,
    #000 84%,
    transparent 93%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 55%,
    #000 63%,
    #000 84%,
    transparent 93%
  );
}

.artwork::before {
  background-image: url("assets/alpine-lake-watercolor.webp");
  background-position: center;
  background-size: 100% 100%;
  mix-blend-mode: soft-light;
  opacity: 0.3;
  filter: saturate(1.12) contrast(1.06);
  transform-origin: center 75%;
  animation: lake-reflection-shift 12s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.artwork::after {
  background-image: repeating-linear-gradient(
    177deg,
    transparent 0 0.72rem,
    rgb(255 255 255 / 24%) 0.78rem,
    transparent 0.88rem 1.55rem
  );
  background-position: 0 0;
  background-size: 100% 3.2rem;
  mix-blend-mode: soft-light;
  opacity: 0.24;
  transform-origin: center 75%;
  animation: lake-glimmer 10s ease-in-out infinite alternate;
  will-change: transform, opacity, background-position;
}

@keyframes lake-reflection-shift {
  0% {
    transform: translate3d(-0.48%, 0, 0) scaleX(1.006);
    filter: saturate(1.09) contrast(1.04);
  }

  52% {
    transform: translate3d(0.14%, 0.1%, 0) scaleX(0.996);
    filter: saturate(1.15) contrast(1.08);
  }

  100% {
    transform: translate3d(0.52%, -0.08%, 0) scaleX(1.004);
    filter: saturate(1.11) contrast(1.06);
  }
}

@keyframes lake-glimmer {
  0% {
    transform: translate3d(-0.55%, 0, 0) scaleX(0.996);
    background-position: 0 0;
    opacity: 0.18;
  }

  48% {
    transform: translate3d(0.18%, 0.1%, 0) scaleX(1.004);
    background-position: 0.7rem 0.22rem;
    opacity: 0.34;
  }

  100% {
    transform: translate3d(0.62%, -0.07%, 0) scaleX(0.994);
    background-position: -0.55rem 0.35rem;
    opacity: 0.24;
  }
}

.contact {
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-size: clamp(0.96rem, 1.5vw, 1.08rem);
  line-height: 1.65;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.contact a {
  color: #16778a;
  font-weight: 400;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

.contact a:hover {
  text-decoration: underline;
}

.contact a:focus-visible {
  border-radius: 0.2em;
  outline: 0.18rem solid #9ad9df;
  outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .artwork::before,
  .artwork::after {
    animation: none;
    will-change: auto;
  }
}

@media (max-height: 38rem) and (min-width: 42rem) {
  body {
    place-items: start center;
  }
}