/*
 * Exhibition stage. Everything inside is sized with --u (= scale × 1px) or
 * percentages; borders are always a literal 1px so strokes never thin out.
 * --s and --pad-ref are set by core/stage.js.
 */

.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Scale tokens, shared by the stage, the side panel and the page chrome. */
.stage, .page, .viewer {
  --s: 1;
  --pad-ref: 10;
  --u: calc(var(--s) * 1px);
  --pad: calc(var(--pad-ref) * var(--u));
  --fs-small: calc(14 * var(--u));
  --fs-tag: calc(12 * var(--u));
  --fs-title: calc(24 * var(--u));
  --edge: calc(20 * var(--u));
}

.stage {
  position: relative;
  flex: none;
  margin: auto;
  font-size: var(--fs-small);
  background: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}

/* 1px stroke around the photo, drawn on top so the photo keeps its exact size. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--line);
  pointer-events: none;
  z-index: 3;
}

/* Small note under the photo; its height is reserved by viewer.js (NOTE_REF_H). */
.photo-note {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding-top: calc(6 * var(--u));
  font-size: max(9px, calc(10 * var(--u))); /* stays legible on small screens */
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

/* Photo with crossfade */
.photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f2f2f2;
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
.photo img.is-entering { opacity: 0; transition: opacity 250ms linear; }
.photo img.is-entering.is-in { opacity: 1; }

/* Focus: same 1px box language, offset outward */
.stage :focus { outline: none; }
.stage :focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: calc(3 * var(--u));
}

/* Arrows */
.arrow {
  position: absolute;
  z-index: 5;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 200ms;
}
.arrow:hover { background: var(--hover); }
.arrow:focus-visible, .arrow:active { background: var(--ink); color: var(--paper); }
.arrow svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; overflow: visible; }
.arrow svg * { vector-effect: non-scaling-stroke; stroke-width: 1px; stroke: currentColor; fill: none; }
.arrow-up    { top: var(--edge);    left: calc(50% - 22 * var(--u)); }
.arrow-down  { bottom: var(--edge); left: calc(50% - 22 * var(--u)); }
.arrow-left  { left: var(--edge);   top: calc(50% - 22 * var(--u)); }
.arrow-right { right: var(--edge);  top: calc(50% - 22 * var(--u)); }

/* Hotspots */
.hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hotspot {
  position: absolute;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u));
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  pointer-events: auto;
  display: block;
}
.hotspot::before { /* larger hit area */
  content: "";
  position: absolute;
  inset: calc(-8 * var(--u));
  border-radius: 50%;
}
.hotspot:hover, .hotspot.is-open { background: var(--ink); }
.hotspot:focus-visible {
  /* white ring keeps the focus outline visible on dark photos */
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--paper);
}

/* Popup */
.popup {
  position: absolute;
  z-index: 20;
  width: calc(340 * var(--u));
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  font-size: var(--fs-small);
  pointer-events: auto;
}
.popup[hidden] { display: none; }
.popup.is-link { cursor: pointer; }
.popup-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(380 * var(--u));
  object-fit: contain;
  object-position: left top;
  background: var(--paper);
}
.popup-title { font-size: var(--fs-title); }
.popup-tags { display: flex; flex-wrap: wrap; gap: calc(var(--pad) / 2); }
.popup-tags .tag { padding: var(--pad); font-size: var(--fs-tag); }
.popup-rule { border: 0; border-top: var(--line); margin: 0; height: 0; }
.popup-more { text-decoration: none; }

/* Split view: photo (9/12) left, side panel (3/12) right, top-aligned; the group is centred. Sizes set by viewer.js. */
.viewer { display: flex; align-items: flex-start; }
.viewer > .stage { margin: 0; }
.side {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  min-width: 0;
}

/* Minimap */
.minimap { position: relative; align-self: flex-start; padding: var(--pad); }
.minimap-area { position: relative; }
.minimap-area > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* Uploaded map strokes are always 1px at every scale; override colours here if needed. */
.minimap-area > svg * { vector-effect: non-scaling-stroke; }
.minimap-area > svg [stroke]:not([stroke="none"]) { stroke-width: 1px; }
/* Points: grey discs (the LDA tag grey) so they read as buttons, not map drawing;
   black = you are here; hover/focus turns them black with a ring. */
.map-dot {
  position: absolute;
  z-index: 1;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin: calc(-9 * var(--u)) 0 0 calc(-9 * var(--u));
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: var(--tag-bg);
  cursor: pointer;
  transition: background-color 150ms, transform 150ms;
}
.map-dot::before { content: ""; position: absolute; inset: calc(-6 * var(--u)); border-radius: 50%; }
.map-dot:hover, .map-dot:focus-visible { background: var(--ink); transform: scale(1.25); }
.map-dot.is-current { background: var(--ink); box-shadow: 0 0 0 calc(3 * var(--u)) var(--paper), 0 0 0 calc(3 * var(--u) + 1px) var(--ink); }
.map-dot:focus-visible { border-radius: 50%; box-shadow: 0 0 0 calc(3 * var(--u)) var(--paper); }

/* Legend */
.legend { padding: var(--pad); display: flex; flex-direction: column; gap: calc(14 * var(--u)); font-size: var(--fs-small); }
.legend[hidden] { display: none; }
.legend-title { font-weight: 700; }
.legend-row { display: grid; grid-template-columns: calc(44 * var(--u)) 1fr; column-gap: calc(12 * var(--u)); align-items: start; }
.legend-icons { display: flex; gap: calc(8 * var(--u)); }
.legend-icon { display: inline-grid; place-items: center; flex: none; }
.legend-icon.is-arrow { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border: var(--line); background: var(--paper); }
.legend-icon.is-arrow svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); overflow: visible; }
.legend-icon.is-arrow svg * { vector-effect: non-scaling-stroke; stroke-width: 1px; stroke: currentColor; fill: none; }
.legend-icon.is-map, .legend-icon.is-map-current, .legend-icon.is-hotspot {
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: var(--line); border-radius: 50%;
}
.legend-icon.is-map { background: var(--tag-bg); }
.legend-icon.is-map-current { background: var(--ink); }
.legend-icon.is-hotspot { background: var(--paper); width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

/* Small floating label (minimap point names) */
.label {
  position: absolute;
  z-index: 30;
  padding: var(--pad);
  font-size: var(--fs-tag);
  white-space: nowrap;
  pointer-events: none;
}
.label[hidden] { display: none; }

/*
 * Public page: header, stage, footer stacked to fill the window height.
 * Header and footer run edge to edge (inside the 0.5% viewport padding,
 * 2% of the viewport height between the rows); the
 * stage is centred between them. Everything scales with the stage's --s,
 * which public.js solves so all three fit (see stage.js).
 */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1vh 0.5vw; /* 1% top/bottom, 0.5% sides */
  display: flex;
  flex-direction: column;
}
.page .app { min-height: 0; flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; }
.page .stage { margin: 0; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  margin-bottom: 2vh;
}
.site-title {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
  color: var(--ink);
  text-decoration: none;
}
/* All caps, tracking −30 (InDesign units = 1/1000 em). */
.site-name { font-family: var(--font-condensed); font-weight: 600; font-size: calc(36 * var(--u)); text-transform: uppercase; letter-spacing: -0.03em; }
.site-tagline { font-size: calc(12 * var(--u)); }
.site-back {
  display: inline-block;
  padding: var(--pad);
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms;
}
.site-back:hover { background: var(--hover); }
.page :focus-visible { outline: 1px solid var(--ink); outline-offset: calc(3 * var(--u)); }

.site-footer {
  margin-top: 2vh;
  font-size: calc(12 * var(--u));
}
.footer-rule { border: 0; border-top: var(--line); margin: 0 0 calc(16 * var(--u)); height: 0; }
/* Items spread over the full width: description at the left edge, logos flush right. */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(24 * var(--u));
}
.footer-row p { margin: 0; }
.footer-text { flex: 0 1 calc(900 * var(--u)); }
.footer-email a { color: var(--ink); text-decoration: none; }
.footer-email a:hover { color: var(--muted); }
.footer-logos { display: flex; gap: calc(32 * var(--u)); align-items: flex-start; }
/* Label and logo side by side, top-aligned with the rest of the footer text. */
.footer-logo { margin: 0; display: flex; flex-direction: row; align-items: flex-start; gap: calc(10 * var(--u)); }
.footer-logo figcaption { white-space: nowrap; }
.footer-logo img { display: block; mix-blend-mode: multiply; } /* size set inline from the file */

.ticker { white-space: nowrap; overflow: hidden; font-size: var(--fs-title); margin-bottom: calc(16 * var(--u)); }
.ticker-track { display: inline-flex; animation: ticker 40s linear infinite; }
.ticker-track .tx { display: inline-block; padding-right: calc(40 * var(--u)); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Desktop-only gate: big centred message between the same header and footer. */
.gate { display: none; }
/* Phones/tablets: 4% padding; scale so the smallest text (12px at 100%) is 16px. */
body.is-gated .page { --s: calc(16 / 12); min-height: 100vh; min-height: 100dvh; padding: 4vh 4vw; }
body.is-gated .app { display: none; }
body.is-gated .gate {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2vh 4vw;
}
.gate-message { font-size: 36px; font-weight: 700; margin: 0; max-width: 16em; }
body.is-gated .site-header { flex-wrap: wrap; }
body.is-gated .footer-row, body.is-gated .footer-logos { flex-wrap: wrap; }

.noscript { margin: 16px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .photo img.is-entering, .arrow, .site-back, .map-dot { transition: none; }
  .ticker-track { animation: none; }
}