:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
  background: #030303;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: #030303;
}

body {
  min-height: 100svh;
}

.home {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(121, 63, 22, .14), transparent 48%),
    #030303;
}

.artboard {
  position: relative;
  width: min(100vw, 177.778svh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #030303;
  box-shadow: 0 0 80px rgba(0, 0, 0, .9);
}

.artboard picture,
.home-art,
.hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-art {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  position: absolute;
  border: 1px solid transparent;
  border-radius: clamp(5px, .7vw, 11px);
  color: transparent;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

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

.hotspot:hover,
.hotspot:focus-visible {
  outline: none;
  border-color: rgba(255, 208, 99, .92);
  background: rgba(255, 175, 49, .075);
  box-shadow: 0 0 10px rgba(255, 170, 42, .7), inset 0 0 24px rgba(255, 170, 42, .12);
  transform: translateY(-1px);
}

/* Desktop composition — supplied 1280 × 720 artwork. */
.photography { left: 2.65%; top: 43.75%; width: 22.75%; height: 18.65%; }
.charlie     { left: 26.00%; top: 43.75%; width: 23.80%; height: 18.65%; }
.client      { left: 50.30%; top: 43.75%; width: 23.80%; height: 18.65%; }
.pr          { left: 74.75%; top: 43.75%; width: 22.70%; height: 18.65%; }
.store       { left: 2.65%; top: 63.25%; width: 17.35%; height: 23.20%; }
.interactive { left: 20.45%; top: 63.25%; width: 59.10%; height: 23.20%; }
.studio      { left: 80.05%; top: 63.25%; width: 17.45%; height: 23.20%; }

.route-note {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 28px));
  padding: 14px 56px 14px 18px;
  transform: translateX(-50%);
  border: 1px solid #d99b3d;
  border-radius: 10px;
  color: #eadbc3;
  background: rgba(10, 7, 4, .96);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .75), 0 0 24px rgba(220, 133, 27, .22);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.route-note strong,
.route-note span {
  display: block;
}

.route-note strong {
  margin-bottom: 3px;
  color: #f7c974;
  letter-spacing: .035em;
}

.route-note button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  color: #f3d6a0;
  background: transparent;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

@media (max-width: 720px), (orientation: portrait) {
  .artboard {
    width: min(100vw, 56.25svh);
    aspect-ratio: 9 / 16;
  }

  /* Mobile composition — supplied 720 × 1280 artwork. */
  .interactive { left: 3.45%; top: 32.80%; width: 93.05%; height: 16.65%; }
  .client      { left: 3.45%; top: 49.95%; width: 46.15%; height: 12.90%; }
  .charlie     { left: 50.55%; top: 49.95%; width: 45.90%; height: 12.90%; }
  .photography { left: 3.45%; top: 63.40%; width: 46.15%; height: 13.35%; }
  .studio      { left: 50.55%; top: 63.40%; width: 45.90%; height: 13.35%; }
  .pr          { left: 3.45%; top: 77.35%; width: 46.15%; height: 14.35%; }
  .store       { left: 50.55%; top: 77.35%; width: 45.90%; height: 14.35%; }

  .route-note {
    font-size: 12px;
  }
}

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