/* The approved 4J artwork is the page, with semantic links over its six doors. */
body {
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 24px;
}
.world-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  container-type: size;
}
.world-scene {
  position: relative;
  width: min(100%, 150cqh);
  aspect-ratio: 3 / 2;
  align-self: center;
  justify-self: center;
  container-type: inline-size;
}
.world-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.world-brand {
  position: absolute;
  top: 3%;
  left: 42%;
  width: 47%;
  height: 28%;
  border-radius: 12px;
}
.world-mobile-lulla { display: none; }
.world-destinations {
  position: absolute;
  left: 42.513%;
  top: 32.227%;
  width: 52.995%;
  height: 55.274%;
  display: grid;
  grid-template-columns: 251fr 272fr 274fr;
  grid-template-rows: 286fr 270fr;
  column-gap: .521cqw;
  row-gap: .651cqw;
}
.world-door { position: relative; min-width: 0; min-height: 0; }
.world-door-create { --x: 653; --y: 330; --w: 251; --h: 286; }
.world-door-app { --x: 912; --y: 330; --w: 272; --h: 286; }
.world-door-library { --x: 1192; --y: 330; --w: 274; --h: 286; }
.world-door-about { --x: 653; --y: 626; --w: 251; --h: 270; }
.world-door-account { --x: 912; --y: 626; --w: 272; --h: 270; }
.world-door-private { --x: 1192; --y: 626; --w: 274; --h: 270; }
.world-link {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 1.8cqw;
  text-decoration: none;
  transition: box-shadow 140ms ease;
}
.world-link:hover { box-shadow: inset 0 0 0 2px #b7894380; }
.world-link:focus-visible, .world-brand:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.world-replacement {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 92%;
  height: 77%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7%;
  background-color: #fff6e2;
}
.world-replacement img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.world-replacement-create img,
.world-replacement-library img {
  mix-blend-mode: darken;
  filter: brightness(1.04);
}
.world-replacement-app img {
  width: auto;
  max-width: 100%;
  height: 97%;
  border: 1px solid #a18b6566;
  border-radius: 1cqw;
  box-shadow: 0 2px 4px #82683725;
}
.world-label {
  position: absolute;
  left: 3%;
  bottom: 2.5%;
  width: 94%;
  height: 18.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 1cqw;
  color: var(--ink);
  font-family: "Avenir Next Condensed", "Arial Narrow", "Trebuchet MS", sans-serif;
  font-size: 1.8cqw;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
  /* Reuse a blank parchment patch from the same image over the baked labels. */
  background-image: var(--scene);
  background-size: 614.4% 1861.818%;
  background-position: 77.7605% 0;
  border-radius: 10%;
}
.world-info {
  position: absolute;
  right: 0;
  bottom: 2%;
  width: clamp(24px, 2.6cqw, 40px);
  height: clamp(24px, 2.6cqw, 40px);
  display: grid;
  place-items: center;
  padding: 0;
  color: #6d6241;
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.world-info span {
  display: grid;
  place-items: center;
  width: clamp(14px, 1.3cqw, 20px);
  height: clamp(14px, 1.3cqw, 20px);
  background: #fff8eccc;
  border: 1px solid #c3a568;
  border-radius: 50%;
  font: italic 700 clamp(10px, .85cqw, 13px) Georgia, serif;
}
.world-info:hover span, .world-info:focus-visible span {
  color: #fffaf1;
  background: var(--green);
}
.world-info:focus-visible { outline: 2px solid var(--green); }
.world-guide {
  position: fixed;
  inset: 0;
  width: min(430px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 34px 28px 28px;
  overflow: auto;
  color: var(--ink);
  background: #fff7e7;
  border: 1px solid #d1b075;
  border-radius: 20px;
  box-shadow: 0 16px 50px #162b2740;
}
.world-guide:not([open]) { display: none; }
.world-guide::backdrop { background: #243c3659; backdrop-filter: blur(3px); }
.world-guide h2 {
  margin: 0 24px 14px 0;
  color: var(--green);
  font: 400 30px/1.15 Georgia, serif;
}
.world-guide p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; }
.guide-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  color: var(--green);
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 28px;
}
.guide-close:focus-visible, .guide-go:focus-visible { outline: 3px solid #b88139; outline-offset: 2px; }
.guide-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  color: #fffaf1;
  background: var(--green);
  border-radius: 24px;
  text-decoration: none;
}
.guide-go:hover { background: #294a2b; }

/* On a phone, rearrange views of the same approved artwork into readable doors. */
@media (max-width: 600px) and (orientation: portrait) {
  .world-scene {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    display: grid;
    grid-template-rows: auto minmax(80px, 1fr) auto;
    gap: 6px;
    padding: 0 8px 6px;
  }
  .world-art { display: none; }
  .world-brand {
    position: relative;
    inset: auto;
    width: min(100%, 65.16cqh);
    justify-self: center;
    height: auto;
    aspect-ratio: 896 / 330;
    background-image: var(--scene);
    background-size: 171.4286% 310.303%;
    background-position: 100% 0;
  }
  .world-mobile-lulla {
    display: block;
    justify-self: center;
    align-self: center;
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 650 / 1024;
    background-image: var(--scene);
    background-size: 236.3077% 100%;
    background-position: 0 0;
  }
  .world-destinations {
    position: relative;
    inset: auto;
    width: min(100%, 64cqh);
    justify-self: center;
    height: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 6px;
  }
  .world-door {
    aspect-ratio: 1;
    background-image: var(--scene);
    background-size: calc(1536 / var(--w) * 100%) calc(1024 / var(--h) * 100%);
    background-position: calc(var(--x) / (1536 - var(--w)) * 100%) calc(var(--y) / (1024 - var(--h)) * 100%);
    border-radius: 14px;
  }
  .world-link { border-radius: 14px; }
  .world-label {
    font-size: clamp(11px, 3.15vw, 17px);
    letter-spacing: -.01em;
    padding-right: 12px;
    left: 2%;
    width: 96%;
    height: 24%;
    bottom: 1%;
  }
  .world-replacement { height: 75%; top: 3%; }
  .world-replacement-app img { border-radius: 6px; }
  .world-info { width: 24px; height: 28px; right: -2px; bottom: 0; }
  .world-info span { width: 14px; height: 14px; font-size: 10px; }
}