/* Aigenwijs applies to Nu; the historical palette lives in theme.css. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/geist-variable.ttf') format('truetype');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('assets/fonts/sora-variable.ttf') format('truetype');
}

body.era-modern {
  --ui: 'Geist', 'Inter', system-ui, sans-serif;
  --heading: 'Sora', 'Inter', system-ui, sans-serif;
  --ink: #1a1815;
  --muted: #6a655e;
  --paper: #ffffff;
  --panel: #ffffff;
  --soft: #f7f7f8;
  --line: #d7d9e6;
  --accent: #7100f6;
  /* Legacy token used for links, controls and map pins, now brand purple. */
  --green: #7100f6;
  --focus: #7100f6;
  --label-bg: rgb(255 255 255 / 92%);
  --label-ink: #1a1815;
  --label-line: rgb(113 0 246 / 40%);
  --selected: #7100f6;
  --story: #212121;
  --story-soft: #f7f7f8;
  --shadow: 0 4px 20px rgb(26 24 21 / 9%);
  font-family: var(--ui);
}
.era-modern :is(button, a, select, input):focus-visible {
  outline-color: var(--focus);
}
.era-modern :is(.places, .tools, #landmark-panel, #modern-options, .navigation) {
  border-radius: 6px;
}
.era-modern .era-switch { border-color: var(--line); }
.era-modern #era-now[aria-pressed=true] {
  background: #00ff95;
  color: #1a1815;
  box-shadow: inset 0 -3px #1a1815;
}
.era-modern #era-now:hover:not(:disabled) { filter: none; }
.era-modern #places-toggle { font-size: 16px; }
.era-modern #places-content button { font-size: 15px; line-height: 1.45; }
.era-modern #places-content .category-switch button { font-size: 13px; }
.era-modern #places-content button.active { box-shadow: inset 3px 0 #b392ff; }
.era-modern #places-content .active small { color: #ffffff; }
.era-modern #places-content #story-links button.active { box-shadow: inset 3px 0 #b392ff; }
.era-modern #places-content :is(h2, #stories-category h2) {
  font-family: var(--heading);
  font-size: 12px;
  letter-spacing: .015em;
  text-transform: none;
}
.era-modern #places-content #stories-category h2 { font-size: 16px; }
.era-modern #landmark-panel h2,
.era-modern .building-story h3,
.era-modern dialog:not(.image-lightbox) h2 {
  font-family: var(--heading);
  font-weight: 600;
  letter-spacing: -.02em;
}
.era-modern #landmark-panel h2 { font-size: 30px; line-height: 1.2; }
.era-modern .building-story h3 { font-size: 23px; }
.era-modern #landmark-panel .story-lead { font-family: var(--ui); }
.era-modern :is(.story-evidence, .story-location, .story-sources, .story-memorials) :is(h3, h4) {
  font-family: var(--heading);
  font-weight: 600;
}
.era-modern .caption,
.era-modern .eyebrow { font-family: var(--heading); letter-spacing: .06em; }
.era-modern .tools.expanded .mobile-toggle { background: var(--soft); }
.era-modern .segmented button { font-size: 14px; }
.era-modern #landmark-markers .story-marker::before { background: var(--story); }
.era-modern #landmark-markers .story-marker .marker-name {
  background: rgb(33 33 33 / 92%);
  color: #ffffff;
  border-color: rgb(255 255 255 / 50%);
}
.era-modern #landmark-markers .story-marker.selected::before {
  box-shadow: 0 0 0 4px rgb(33 33 33 / 20%);
}
.era-modern #landmark-markers .marker-name { font-size: 13px; line-height: 1.35; }
.era-modern #landmark-markers .landmark-marker:is(:hover, :focus-visible) { outline-color: var(--focus); }
.era-modern dialog::backdrop { background: rgb(0 0 0 / 45%); backdrop-filter: none; }
.era-modern #intro-now { background: #7100f6; }
.era-modern .image-lightbox,
.era-modern .image-lightbox::backdrop { background: #1a1815; color: #ffffff; }
.era-modern .image-lightbox header { border-color: rgb(255 255 255 / 25%); }
.era-modern .image-lightbox button { background: #212121; border-color: #6a655e; }
.era-modern .image-lightbox button:focus-visible { outline-color: #b392ff; }
.era-modern .lightbox-caption .story-photo-credit { color: rgb(255 255 255 / 82%); }

/* A quiet maker credit in the menu, away from the map and source attribution. */
.places { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
#places-toggle { flex: 0 0 auto; }
#places-content { flex: 1 1 auto; min-height: 0; max-height: none; }
.project-credit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.project-credit span {
  max-width: 98px;
  color: var(--muted);
  font: 400 12px/1.5 var(--ui);
}
.project-credit a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-radius: 3px;
}
.project-credit img { display: block; width: 104px; height: auto; }
#places-content[hidden] + .project-credit { display: none; }
#about .project-credit { margin-top: 24px; padding: 12px 0 0; }
#about .project-credit span { max-width: none; font-size: 14px; }

@media(max-width:700px) {
  .era-modern #landmark-panel { border-radius: 12px 12px 0 0; }
  .era-modern #landmark-panel h2 { font-size: 26px; }
  .era-modern .era-switch button { font-size: 16px; }
  .era-modern .segmented button { font-size: 12px; }
  .era-modern #modern-attribution { font-size: 10px; }
  .era-modern #landmark-markers .marker-name { font-size: 13px; }
}