:root {
  color-scheme: light;
  --focus: #c99422;
  --page: #071827;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--page);
  font-family: Arial, Helvetica, sans-serif;
}

.landing {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.landing::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -28px;
  background:
    linear-gradient(rgba(7, 24, 39, .20), rgba(7, 24, 39, .20)),
    url("assets/landing-approved.png") center / cover no-repeat;
  filter: blur(20px) saturate(.9);
  transform: scale(1.05);
}

.landing::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(7, 24, 39, .38) 0%,
    rgba(7, 24, 39, .06) 18%,
    rgba(7, 24, 39, .06) 82%,
    rgba(7, 24, 39, .38) 100%);
  pointer-events: none;
}

.artwork-wrap {
  position: relative;
  width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  box-shadow: 0 0 42px rgba(0, 0, 0, .26);
}

picture,
.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artwork {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.language-links {
  position: absolute;
  inset: 0;
}

.language-card {
  position: absolute;
  top: 53.6%;
  height: 25.3%;
  border-radius: clamp(12px, 1.6vw, 25px);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: 0 solid transparent;
}

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

.language-card:focus-visible {
  outline: clamp(3px, .35vw, 6px) solid var(--focus);
  outline-offset: clamp(2px, .2vw, 4px);
}

.italian { left: 14.2%; width: 12.7%; }
.english { left: 27.5%; width: 13.0%; }
.french  { left: 41.1%; width: 13.4%; }
.spanish { left: 55.6%; width: 13.2%; }
.german  { left: 70.1%; width: 13.3%; }

@media (max-width: 700px) {
  .landing::before {
    inset: -24px;
    background:
      linear-gradient(rgba(7, 24, 39, .18), rgba(7, 24, 39, .18)),
      url("assets/landing-mobile.png") center / cover no-repeat;
    filter: blur(18px) saturate(.92);
  }

  .landing::after {
    background: rgba(7, 24, 39, .12);
  }

  .artwork-wrap {
    width: min(100vw, 66.666dvh);
    aspect-ratio: 2 / 3;
    box-shadow: 0 0 28px rgba(0, 0, 0, .28);
  }

  .language-card {
    border-radius: 5%;
    height: 20.8%;
  }

  .italian { top: 38.7%; left: 8.1%; width: 26.8%; }
  .english { top: 38.7%; left: 36.7%; width: 26.6%; }
  .french  { top: 38.7%; left: 65.3%; width: 26.7%; }
  .spanish { top: 61.1%; left: 21.9%; width: 27.0%; }
  .german  { top: 61.1%; left: 51.2%; width: 27.0%; }
}

/* Mobile viewport correction: fill the entire screen without top or side gaps. */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .landing {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: block;
    overflow: hidden;
  }

  .artwork-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: 2 / 3;
    margin: 0;
    transform: translateX(-50%);
    box-shadow: none;
  }

  picture,
  .artwork {
    width: 100%;
    height: 100%;
  }

  .artwork {
    object-fit: fill;
  }
}