:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #1d282d;
  color: #fff;
}

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: #1d282d;
  background-image:
    linear-gradient(115deg, rgb(4 13 18 / 24%), rgb(4 13 18 / 5%) 48%, rgb(4 13 18 / 31%)),
    url("molde-panorama-1b.jpg");
  background-position: center 48%;
  background-size: cover;
  background-repeat: no-repeat;
}

.navigation {
  min-height: inherit;
}

.landing-footer {
  position: absolute;
  right: max(2rem, 7vw);
  bottom: max(0.75rem, 2vh);
  font-size: 0.78rem;
}

.landing-footer a {
  color: rgb(255 255 255 / 82%);
}

.panel {
  position: absolute;
  width: min(31rem, calc(100vw - 3rem));
  padding: clamp(1.35rem, 2.7vw, 2.35rem);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 0.35rem;
  background: rgb(13 24 30 / 46%);
  box-shadow: 0 1.1rem 3.5rem rgb(0 0 0 / 20%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}

.panel-albums {
  top: max(2rem, 8vh);
  left: max(2rem, 7vw);
}

.panel-writing {
  right: max(2rem, 7vw);
  bottom: max(2rem, 8vh);
}

h2 {
  margin: 0 0 1rem;
  color: rgb(255 255 255 / 94%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 95%), 0 0 10px rgb(0 0 0 / 70%);
}

ul {
  display: grid;
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: grid;
  gap: 0.16rem;
}

a,
.pending {
  width: fit-content;
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.45;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 100%), 0 0 8px rgb(0 0 0 / 78%);
}

a {
  text-decoration-color: rgb(255 255 255 / 48%);
  transition: text-decoration-color 150ms ease, color 150ms ease;
}

a:hover {
  color: #fff8d8;
  text-decoration-color: currentColor;
}

a:focus-visible {
  border-radius: 0.12rem;
  outline: 3px solid #fff3a8;
  outline-offset: 0.28rem;
}

a span,
.pending,
small {
  color: rgb(255 255 255 / 70%);
}

small {
  font-size: 0.78rem;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 100%), 0 0 7px rgb(0 0 0 / 85%);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.legal-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1rem, 4vw, 3.5rem);
  background-color: #1d282d;
  background-image:
    linear-gradient(115deg, rgb(4 13 18 / 30%), rgb(4 13 18 / 12%) 48%, rgb(4 13 18 / 36%)),
    url("molde-panorama-1b.jpg");
  background-position: center 48%;
  background-size: cover;
  background-repeat: no-repeat;
}

.legal-card {
  width: min(48rem, 100%);
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3.2rem);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 0.35rem;
  background: rgb(10 20 26 / 76%);
  box-shadow: 0 1.1rem 3.5rem rgb(0 0 0 / 28%);
  -webkit-backdrop-filter: blur(15px) saturate(110%);
  backdrop-filter: blur(15px) saturate(110%);
}

.legal-card h1,
.legal-card h2,
.legal-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgb(0 0 0 / 95%);
}

.legal-card h1 {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
}

.legal-card h2 {
  margin: 2.4rem 0 1rem;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.legal-card h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.18rem;
}

.legal-card p,
.legal-card address {
  margin: 0.75rem 0;
  color: rgb(255 255 255 / 90%);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.65;
}

.legal-card .back-link {
  margin: 0 0 1.7rem;
  font-size: 0.88rem;
}

.legal-card .back-link-end {
  margin: 2.5rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(255 255 255 / 18%);
}

.error-page {
  display: grid;
  place-items: center;
}

.error-card {
  max-width: 42rem;
}

.error-card .error-code {
  margin: 0 0 0.35rem;
  color: rgb(255 255 255 / 62%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
}

@media (max-width: 700px) {
  .landing {
    min-height: 100svh;
    overflow: auto;
    background-position: 57% center;
  }

  .navigation {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    padding:
      max(1.25rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      max(3.5rem, env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
  }

  .panel {
    position: static;
    width: min(100%, 30rem);
    padding: 1.35rem;
    background: rgb(12 23 29 / 52%);
  }

  .panel-writing {
    align-self: flex-end;
  }

  .landing-footer {
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.15rem, env(safe-area-inset-bottom));
  }

  .legal-page {
    padding:
      max(0.75rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.75rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    background-position: 57% center;
  }

  .legal-card {
    padding: 1.35rem;
    background: rgb(9 19 25 / 84%);
  }
}

@media (prefers-reduced-motion: reduce) {
  a {
    transition: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .panel,
  .legal-card {
    background: rgb(10 20 26 / 88%);
  }
}