:root {
  --text: #1a1a1a;
  --bg: #fefefe;
  --link: #0000ee;
  --link-visited: #551a8b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.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;
}

body {
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--link); }
a:visited { color: var(--link-visited); }

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Hide the browser-default focus outline that traces the <area> shape.
   The corresponding .hover-decoration is what lights up on focus, so
   the visual cue lives there instead — keyboard focus doesn't need to
   double up with the hit-target geometry. */
area:focus {
  outline: none;
}

main {
  display: flex;
  flex-direction: column;     /* mobile-first: stacked */
  max-width: 1320px;          /* fits both panels at full natural size */
  margin: 0 auto;
  padding: 0;
}

/* --- The two panels (doodle map + details border): same wrapper + image rules --- */

#dalma-world-map,
#dalma-world-details {
  position: relative;
  width: fit-content;       /* shrink wrapper to image's actual size so overlays align */
  margin: 0 auto;
}

#dalma-world-map img,
#dalma-world-details .border {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(950px, calc(100vh - 1rem));
  min-height: 550px;
}

/* --- Overlays stacked on the doodle: hotspots SVG, hover decorations, static layers --- */

.hotspot-overlay,
.hover-decoration,
.doodle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;     /* clicks pass through to the <area> underneath */
}

.hotspot-overlay {
  z-index: 1;
}

.hotspot-overlay > * {
  fill: transparent;
  /* fill: rgba(200, 162, 200, 0.45); */
}

.hover-decoration {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

/* Touch-device "constellation" mode: hover-decorations twinkle in/out
   randomly via the .twinkling class, driven by imagemap.js. */
.hover-decoration.twinkling {
  animation: twinkle 1.6s ease;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}

#dalma-world-details .details-inner {
  position: absolute;
  inset: clamp(3.5rem, 8vh, 5.5rem);   /* floor 56px (matches old behavior up to vh 800), grows with viewport, caps at 88px */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Hash-routed sections: only the :target article shows.
   Default (no hash) shows welcome. */
.details-inner article { display: none; }
.details-inner article:target { display: block; }
.details-inner:not(:has(:target)) article#dalma-world { display: block; }

.details-inner article > :first-child { margin-top: 0; }
.details-inner article > :last-child { margin-bottom: 0; }

/* Article h1s are programmatically focused on route change so screen
   readers announce the new section. They aren't a keyboard target
   (tabindex=-1), so the focus ring is noise for sighted users. */
.details-inner article h1:focus,
.details-inner article h2:focus {
  outline: none;
}

.visitor-counter {
  margin-top: auto;          /* push to bottom of flex column */
  padding-top: 2rem;         /* keep breathing room above when article is short */
  text-align: center;
}

.visitor-counter img {
  max-width: 100%;
  height: auto;
  border: 0;
}

.details-inner article img {
  width: 100%;
  height: auto;
}

.vimeo-embed {
  position: relative;
  padding-top: 50.08%;
}

.vimeo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#dalma-world-details h1,
#dalma-world-details h2,
#dalma-world-details h3 {
  font-weight: normal;
  font-style: italic;
}

#dalma-world-details h1,
#dalma-world-details h2 { font-size: 1.6rem; }

/* --- Wide viewports: side-by-side, doodle and details flush to outer edges --- */

/* Narrow viewports: drop min-height so the image can shrink freely while
   preserving aspect ratio. Above this threshold, min-height: 550 stays in
   effect but doesn't actually engage until the image gets very wide. */
@media (max-width: 400px) {
  #dalma-world-map img,
  #dalma-world-details .border {
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  main {
    flex-direction: row;
    align-items: center;     /* vertically center the row in main */
    justify-content: center; /* horizontally center the panels as a group */
    flex-wrap: wrap;         /* if panels don't fit at natural size, wrap to column-like */
  }

  #dalma-world-map,
  #dalma-world-details {
    margin: 0;
    flex: 0 0 auto;          /* both rigid -- they render at natural size (height-bound) and don't shrink to fill */
  }

}