* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  background: #ffffff;
  color: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Floating archive panel over the full-bleed map.
   Bottom-left, clearly narrower than the old 50% split, non-edge-touching. */
.panel--archive {
  position: absolute;
  left: 26px;
  bottom: 26px;
  z-index: 800;
  display: flex;
  flex-direction: column;
  width: 40vw;
  max-width: 660px;
  min-width: 320px;
  max-height: calc(100vh - 104px);
  background: #ffffff;
  border: 1px solid #e3e3e3;
}

/* Collapse control: a small, neutral circular button at the panel's right
 * side (top-right corner, inset 12px from the right edge and straddling the
 * top border). It never moves between states, and its position is identical
 * whether the panel is expanded or collapsed. The chevron is drawn with two
 * thin 1px lines (CSS pseudo-elements, currentColor, no fill) whose bounding
 * box is exactly centered in the button via grid place-items. */
.archive-collapse {
  position: absolute;
  top: -14px;
  right: 12px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e3e3e3;
  border-radius: 50%;
  background: #ffffff;
  color: #555555;
  cursor: pointer;
}

.archive-collapse:hover {
  color: #111111;
}

/* MacOS-like soft chevron: an inline SVG of two simple open strokes (no fill,
 * no triangle) with rounded caps/joins and a ~1.5px stroke in dark gray. The
 * 16x9 viewBox is centered in the circular button via grid; flipping to the
 * collapsed state rotates the whole glyph 180 deg about its own centre, so it
 * never shifts position. */
.archive-chevron {
  display: block;
  width: 16px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.panel--archive.is-collapsed .archive-chevron {
  transform: rotate(180deg);
}

/* Collapsed: hide only the archive table header and the list (rows + scroll
 * area). The metadata + cadence section stays, the panel keeps its exact
 * expanded width, and the list is merely display:none so the current record
 * and its scroll position survive a collapse/expand round trip. */
.panel--archive.is-collapsed .colheads,
.panel--archive.is-collapsed .list {
  display: none;
}

/* Base stage container (also used by the About page's editorial video). The
 * About stage is sized by script.js (layoutInfoVideo) to exactly match the
 * rendered video rectangle, keeping the paratext anchored to the image. */
.video-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Floating video stage over the map. Dimensions/position are set by
 * script.js (layoutVideo) to exactly match the rendered video rectangle.
 * The close control sits at its top-right corner. */
#catalog-view .video-stage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 700;
  background: #000000;
}

.video-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: #2b2b2b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.video-close:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
}

.video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
  transform-origin: center center;
}

/* Archival/console-style paratext pinned to the bottom-right of the actual
 * rendered video rectangle (the .video-stage). No shadow/border, near-zero
 * radius, dark semi-transparent backdrop. */
.video-paratext {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 6px 9px;
  box-sizing: border-box;
  background: rgba(35, 35, 35, 0.80);
  color: #e8e8e8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  border-radius: 2px;
  white-space: pre-line;
  pointer-events: none;
}

/* About-page variant: same console/archival style but pinned to the bottom
   LEFT of the rendered video image instead of the bottom right. Still
   anchored to the actual fitted image rectangle, not the black viewer. */
.video-paratext--bl {
  right: auto;
  left: 8px;
}

/* Header */

.header {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 22px;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
}

.header-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.header-nav {
  display: flex;
  gap: 30px;
}

.header-title:hover {
  color: #111111;
}

.header-nav a {
  font-size: 12px;
  color: #666666;
}

.header-nav a:hover {
  color: #111111;
}

/* Map */
/* The map fills the entire catalog viewport (below the persistent header). */
.map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #eef1f4;
}

.leaflet-container {
  background: #eef1f4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Map attribution: bottom-left, discreet */

.leaflet-control-attribution {
  left: calc(26px + min(38vw, 640px) + 10px);
  right: auto;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.65);
  color: #8b8b8b;
  font-size: 9px;
  letter-spacing: 0.01em;
}

.leaflet-control-attribution a {
  color: #9a9a9a;
}

.leaflet-control-attribution svg {
  display: none;
}

/* Map markers — provenance colours and selection hierarchy.
   Non-selected markers are desaturated blue-grey; the selected marker is
   the strongest blue point of its provenance type. */

.mapdot {
  background: transparent;
}

.map-dot {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #69A9C2;      /* non-selected own: muted blue / cyan-blue */
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.map-dot--contributed {
  background: #9B6FAE;      /* non-selected contributed: muted violet / purple */
}

/* Selected marker: same provenance hue, more saturated/darker than its
   inactive version, and provenance-distinct (blue vs violet), never grey. */
.map-dot.active-map {
  z-index: 10;
  background: #1F6FA5;      /* selected own: strong dark blue */
  border-width: 2px;
  box-shadow: 0 0 0 1px #333333;
}

.map-dot--contributed.active-map {
  background: #6F3F8F;      /* selected contributed: strong dark violet */
}

.map-dot.active-map::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

/* Selected record info panel */

.info {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 105px;
  box-sizing: border-box;
  padding: 10px 22px;
  background: #ffffff;
  border-bottom: 1px solid #e3e3e3;
}

.info-col {
  min-width: 0;
}

.info-col--left {
  flex: 1 1 58%;
}

.info-col--right {
  flex: 1 1 42%;
}

.info-col p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.45;
}

.info-divider {
  flex: none;
  align-self: center;
  width: 1px;
  height: 74px;
  background: #e3e3e3;
}

.info-coord {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #5a5a5a;
  letter-spacing: 0.02em;
}

.info-place {
  font-size: 12px;
  font-weight: 400;
  color: #111111;
  margin-top: 4px;
}

.info-archive {
  font-size: 12px;
  color: #5f5f5f;
  margin-top: 3px;
}

.info-finder {
  font-size: 12px;
  color: #5f5f5f;
  margin-top: 3px;
}

.info-cadence-head {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #666666;
  text-transform: uppercase;
  line-height: 1;
}

.info-cadence {
  margin-top: 6px;
}

.cadence-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
}

.sq {
  flex: none;
  width: 13px;
  height: 13px;
}

.sq--on {
  background: #ffffff;
  border: 1px solid #111111;   /* outlined white square */
}

.sq--off {
  background: #111111;         /* filled black square */
}

.cadence-label {
  flex: none;
  width: 30px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #111111;
}

.cadence-val {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 400;
  color: #111111;
}

/* Grid list columns
   Compact: narrow fixed-width fields (ID, DATE, cadence ON/OFF) leave the
   roomiest space to FOUND BY so contributor names like "Katharina
   Zimmerhackl" display fully rather than with an ellipsis. */
.grid,
.row {
  display: grid;
  grid-template-columns:
    40px
    minmax(84px, 1.35fr)
    minmax(40px, 0.6fr)
    72px
    minmax(76px, 1.95fr)
    42px
    42px;
  gap: 10px;
  align-items: center;
}

/* Column headings (always visible above the scrolling list) */

.colheads {
  flex: none;
  border-bottom: 1px solid #e3e3e3;
  background: #ffffff;
}

.colheads .head {
  padding: 5px 16px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a9a;
  white-space: nowrap;
}

.head--id {
  font-variant-numeric: tabular-nums;
}

/* Archive-list cadence column headers: larger, higher contrast, and
   centered above their numeric columns (which are right-aligned). */
.head--on,
.head--off {
  font-size: 15px;
  line-height: 1;
  padding-right: 0;
  color: #111111;
  justify-self: stretch;
  text-align: right;
}

.head--on {
  color: #222222;
}

.head--off {
  color: #111111;
}

/* List */

.list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  background: #ffffff;
}

/* Lower-left anchored panel: cap the scrollable list so the whole panel
 * stays compact in the lower-left zone instead of stretching vertically.
 * Roughly half the previous list height; internal scrolling is preserved. */
.panel--archive .list {
  max-height: calc(50vh - 120px);
}

/* Narrow, always-visible scrollbar (Chrome/WebKit) so it is clear the
   archive list continues. Light-grey track, medium-grey thumb. */
.list::-webkit-scrollbar {
  width: 8px;
}

.list::-webkit-scrollbar-track {
  background: #eeeeee;
}

.list::-webkit-scrollbar-thumb {
  background: #b5b5b5;
  border-radius: 4px;
}

.list::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}

.list {
  scrollbar-width: thin;
  scrollbar-color: #b5b5b5 #eeeeee;
}

.row {
  height: 34px;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.row:hover {
  background: #f5f5f5;
}

/* Active row: subtle light-grey fill with a thin left indicator.
   No heavy black fill; cadence and text stay legible. */
.row.active {
  background: #ebebeb;
  box-shadow: inset 3px 0 0 #9aa3ad;
}

.row.active .col {
  color: #111111;
}

.col {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.col--id {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #9a9a9a;
}

.row.active .col--id {
  color: #6f6f6f;
}

.col--place {
  font-weight: 400;
  color: #111111;
}

.col--country {
  color: #4d4d4d;
  font-size: 12.5px;
}

.col--date {
  font-variant-numeric: tabular-nums;
  color: #4d4d4d;
  font-size: 12.5px;
}

.col--finder {
  color: #777777;
  font-size: 12.5px;
}

.row.active .col--finder {
  color: #555555;
}

.col--on,
.col--off {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: #111111;
  text-align: right;
}

.row.active .col--on,
.row.active .col--off {
  color: #111111;
}

/* Mobile (minimal changes) */

@media (max-width: 768px) {
  .panel--archive {
    width: auto;
    left: 12px;
    right: 12px;
    max-width: none;
    min-width: 0;
    max-height: calc(100vh - 76px);
  }

  .info {
    min-height: 148px;
  }

  .grid,
  .row {
    grid-template-columns:
      52px minmax(90px, 1.4fr) minmax(70px, 1fr) 84px minmax(80px, 1fr) 44px 44px;
    gap: 8px;
  }

  .leaflet-control-attribution {
    left: 12px;
    max-width: calc(100% - 24px);
    white-space: normal;
  }
}

/* ==========================================================================
   INFO / CATALOG VIEW SWITCHING
   One of the two views is visible at a time, driven by the view-catalog /
   view-info classes on <body>. Catalog keeps its own full-viewport, internal
   archive scrolling; Info scrolls as one normal page document (via body).
   ========================================================================== */

.view {
  display: none;
}

body.view-catalog #catalog-view {
  display: block;
}

body.view-info #info-view {
  display: block;
}

.view--catalog {
  position: relative;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* ==========================================================================
   INFO VIEW (editorial document)
   Black / white / grey, generous whitespace, left-aligned body text with a
   comfortable line length. No boxes, cards, shadows, gradients, rounded
   corners, big hero type or justified text.
   ========================================================================== */

#info-view {
  background: #ffffff;
  color: #111111;
  min-width: 0;
}

/* First section: restrained 50/50 split. The hero stops short of the viewport
   bottom (viewport-based height) so the start of the following section — the
   Gardel quotation — is already visible on load. No scroll arrows/animation. */
.info-hero {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 12rem);
  min-height: 420px;
}

.info-hero-video {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  background: #000000;
  min-width: 0;
}

/* Full-bleed centering area for the video inside the black column; the
 * cadence strip below it consumes only its own height. */
.info-video-area {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.info-hero-video .video {
  width: 100%;
  height: 100%;
}

/* Cadence strip below the hero video: white bar with a thin neutral progress
 * line (drawing left → right in sync with the looping video) and, on the
 * right, the small ON/OFF cadence legend only when analysis data exists. */
.info-cadence-strip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 46px;
  padding: 0 22px;
  box-sizing: border-box;
  background: #ffffff;
}

.info-cadence-line {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: #e8e8e8;
}

.info-cadence-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #3a3a3a;
}

.info-cadence-legend {
  flex: none;
  display: none;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 12px;
  color: #111111;
}

.info-cadence-strip.has-cadence .info-cadence-legend {
  display: flex;
}

.info-cadence-legend .sq--off {
  margin-left: 18px;
}

.info-cadence-legend .cadence-val {
  font-size: 12.5px;
}

.info-hero-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 40px 6vw 48px;
  min-width: 0;
}

.info-blinks {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #111111;
  margin-bottom: 2px;
  text-align: right;
}

.info-archive-range {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #111111;
  text-align: right;
}

.info-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
  margin-top: 6px;
  text-align: right;
}

.info-lede {
  max-width: 46em;
  font-size: 15px;
  line-height: 1.7;
  color: #111111;
  margin-top: 24px;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.info-contribution {
  max-width: 36.5em;
  font-size: 14px;
  line-height: 1.7;
  color: #111111;
  margin: 26px auto 0;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.info-contribution a {
  color: #7aa7d1;
  border-bottom: none;
  white-space: nowrap;
}

.info-contribution a:hover {
  color: #4a7fb0;
}

.info-credit {
  margin-top: 30px;
  margin-left: auto;
  max-width: 46em;
  font-size: 12px;
  line-height: 1.6;
  color: #777777;
  text-align: right;
}

.info-credit a {
  color: #777777;
  border-bottom: none;
}

.info-credit a:hover {
  color: #111111;
}

/* Second section: white, two-column editorial layout. No cards/boxes/headings. */
.info-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1200px;
  padding: 80px 7vw 120px;
}

.info-textcol {
  min-width: 0;
}

.info-body .quote {
  margin: 0 0 22px;
  max-width: 46em;
}

.info-body .quote p {
  margin: 0 0 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: #111111;
}

.info-body .quote cite {
  display: block;
  font-style: normal;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #666666;
}

.info-text {
  max-width: 46em;
  font-size: 15px;
  line-height: 1.75;
  color: #111111;
  margin: 0 0 22px;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Narrow-screen fallback: stack the hero video above the text, single
   text column. */
@media (max-width: 768px) {
  .info-hero {
    flex-direction: column;
    height: auto;
  }

  .info-hero-video {
    width: 100%;
    height: 62vh;
    flex: none;
  }

  .info-hero-text {
    padding: 40px 24px;
  }

  .info-body {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 64px 24px 96px;
  }

  .info-body .quote {
    margin-bottom: 40px;
  }
}