:root {
  color-scheme: dark light;
  --text-nav: clamp(1.5rem, 2.2vw, 2.35rem);
  --text-nav-mobile: clamp(1.35rem, 5.5vw, 2rem);
  --leading-tight: 1.05;
  --tracking-display: 0.01em;
  --page-dark: #222221;
  --focus: #f0ce83;
}

* { box-sizing: border-box; }

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

html { background: var(--page-dark); }

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--page-dark);
  font-family: var(--font-body);
}

.home {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.artboard {
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--page-dark);
}

.artboard--desktop {
  width: min(100%, calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.79189));
  aspect-ratio: 1678 / 937;
}

.artboard--mobile {
  display: none;
  width: min(100%, calc((100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.5628));
  aspect-ratio: 941 / 1672;
}

.artwork {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
html:not(.theme-ready) .artwork { opacity: 0; }

.destination,
.theme-toggle {
  position: absolute;
  z-index: 2;
  display: block;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.destination:hover { background: rgb(240 206 131 / 0.055); }

.destination:focus-visible,
.theme-toggle:focus-visible {
  outline: 3px dashed var(--focus);
  outline-offset: -5px;
  background: rgb(240 206 131 / 0.08);
}

.theme-toggle { padding: 0; border-radius: 50%; }


/* Desktop destinations, measured against the 1678 x 937 composition. */
.artboard--desktop .destination--ai      { left: 16.1%; top: 4.2%; width: 18.7%; height: 35.5%; }
.artboard--desktop .destination--tools   { left: 66.5%; top: 1.7%; width: 20.2%; height: 41%; }
.artboard--desktop .destination--notes   { left: 12.8%; top: 43.9%; width: 20.4%; height: 43%; }
.artboard--desktop .destination--contact { left: 38.4%; top: 27.2%; width: 23.2%; height: 42%; z-index: 3; border-radius: 50%; }
.artboard--desktop .destination--tesol   { left: 38.5%; top: 72.5%; width: 23.5%; height: 27.5%; }
.artboard--desktop .destination--start   { left: 65%; top: 50.5%; width: 20%; height: 39%; }
.artboard--desktop .theme-toggle         { left: 92.4%; top: 86.9%; width: 5.1%; height: 9.1%; }

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

@media (max-width: 899px) and (orientation: portrait) {
  .artboard--desktop { display: none; }
  .artboard--mobile { display: block; }

  .artboard--mobile .destination--contact { left: 31.5%; top: 6.8%; width: 37%; height: 21%; z-index: 3; border-radius: 50%; }
  .artboard--mobile .destination--ai      { left: 24%; top: 27.5%; width: 52%; height: 15%; }
  .artboard--mobile .destination--tools   { left: 5.4%; top: 43.1%; width: 41.4%; height: 28.4%; }
  .artboard--mobile .destination--notes   { left: 52.7%; top: 43.1%; width: 41.5%; height: 28.4%; }
  .artboard--mobile .destination--tesol   { left: 7%; top: 73%; width: 38.2%; height: 25%; }
  .artboard--mobile .destination--start   { left: 52.4%; top: 73%; width: 39.5%; height: 25%; }
  .artboard--mobile .theme-toggle         { left: 1.7%; top: 1%; width: 13.5%; height: 7.6%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .destination, .theme-toggle { border: 1px solid transparent; }
}