/* Shared typography for the Russian and English atlas. */
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/pt-sans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/pt-sans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/pt-serif-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Serif";
  src: url("/fonts/pt-serif-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "PT Serif", Georgia, serif;
  --font-text: "PT Sans", Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;
  --text-micro: 8px;
  --text-caption: 10px;
  --text-ui: 12px;
  --text-body: 14px;
  --text-title: 18px;
  --text-subheading: 20px;
  --text-brand: 24px;
  --text-section: 32px;
  --text-hero: 40px;
  --leading-title: 1.2;
  --leading-ui: 1.5;
  --leading-body: 1.65;
  --tracking-label: .1em;
}

/* Text and controls always use the same sans serif. */
body {
  font: var(--weight-regular) var(--text-body)/var(--leading-ui) var(--font-text);
  font-synthesis: none;
}
button, input, select, kbd { font: inherit; }
p { line-height: var(--leading-body); }

/* Serif is reserved for the identity, historical names and headings. */
.brand h1, #currentEra, .card-title, .hover-preview strong,
.detail-body h2, .about-dialog h2, .about-grid h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-title);
  letter-spacing: 0;
}
.brand h1 { font-size: var(--text-brand); margin: 0; }
.detail-body h2, .about-dialog h2 { font-size: var(--text-section); }
.about-grid h3 { font-size: var(--text-subheading); }
.hover-preview strong, #currentEra { font-size: var(--text-title); }
#currentEra { font-weight: var(--weight-bold); }

/* Rulers stand out; other information cards share one type scale and size. */
.card-title { font-size: var(--text-body); }
.entity-card[data-type="states"] .card-title,
.entity-card[data-type="dynasties"] .card-title,
.entity-card[data-type="rulers"] .card-title { font-size: var(--text-title); }
.period-card.compact-period .card-title { font-size: var(--text-body); }
.entity-card:not(.period-card) { padding: 10px; }
.entity-card .card-main { gap: 3px; }
.entity-card[data-type="events"] { padding-left: 15px; }
.entity-card[data-type="family"] .card-subtitle,
.entity-card[data-type="events"] .card-subtitle,
.entity-card[data-type="statesmen"] .card-subtitle,
.entity-card[data-type="contemporaries"] .card-subtitle { -webkit-line-clamp: 1; }

/* Dates retain tabular figures everywhere, including detail dialogs. */
#visibleRange, .year-form input, .year-label, .overview-ticks,
.overview-label span, .card-dates, .search-year, .duration-date,
.year-period-date, .detail-dates dd {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
#visibleRange, .year-form input, .detail-dates dd {
  font-size: var(--text-body);
  line-height: var(--leading-ui);
}
.card-dates, .duration-date, .year-period-date, .year-label,
.overview-ticks, .overview-label span, .search-results .search-year {
  font-size: var(--text-caption);
  line-height: 1.25;
}
.year-period-date { font-weight: var(--weight-bold); }
.period-card.compact-period .card-dates { font-size: var(--text-micro); }

/* One control size instead of a different size for each widget. */
.text-button, .search-wrap input, .search-wrap kbd, .year-form label,
.zoom-controls > span, .zoom-controls select, .layer-button,
.layer-menu label, .era-nav button, .language-switch a,
.related-items button, .primary-button {
  font-size: var(--text-ui);
  line-height: var(--leading-ui);
}
.layer-button .layer-name { font: inherit; }
.layer-button > span:not(.layer-name) { font-size: var(--text-caption); }
.language-switch a { font-weight: var(--weight-bold); letter-spacing: 0; }
.icon-button, .year-form button, .clear-period {
  font-size: var(--text-title);
  line-height: 1;
}
.dialog-close { font-size: var(--text-brand); line-height: 1; }

/* Labels share a restrained weight and tracking. */
.eyebrow, .nav-label, .overview-label, .track-label .track-no,
.year-track .track-label strong, .detail-type, .detail-dates dt,
.detail-body h3 {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
}
.brand small {
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  letter-spacing: 0;
}
.overview-label span { font-weight: var(--weight-regular); letter-spacing: 0; }
.track-label strong, .search-results strong, .method-note strong {
  font-size: var(--text-ui);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
}

/* Body copy and supporting information. */
.detail-description, .about-dialog > p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.empty-lane, .search-results p, .hover-preview p,
.image-note, .detail-subtitle, .fact-list dt, .fact-list dd,
.source-list li, .about-grid p, .method-note p,
.about-dialog .external-note {
  font-family: var(--font-text);
  font-size: var(--text-ui);
  font-style: normal;
  line-height: var(--leading-body);
}
.track-label small,
.search-results small, .search-result-count, .hover-preview small,
.image-credit, .symbol-figure figcaption {
  font-size: var(--text-caption);
  line-height: var(--leading-ui);
}
.card-subtitle, .entity-card .heraldic-tag, .mini-flag small {
  font-size: var(--text-micro);
  line-height: 1.25;
}
.card-open { font-size: var(--text-caption); }
.entity-card .heraldic-tag {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-data-banner { font-size: var(--text-body); }

/* Decorative initials follow the display face, without introducing a third font. */
.portrait .monogram, .detail-monogram, .period-marker {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 1;
}
.portrait .monogram { font-size: var(--text-brand); }
.detail-monogram { font-size: calc(var(--text-hero) * 2); }
.period-marker { font-size: var(--text-title); }

@media (min-width: 1600px) {
  :root { --text-hero: 48px; }
}
@media (max-width: 760px) {
  :root { --text-brand: 20px; --text-section: 28px; --text-hero: 32px; }
  #currentEra { font-size: var(--text-body); }
  .detail-monogram { font-size: calc(var(--text-brand) * 2); }
  .year-track .track-label strong { font-size: var(--text-micro); }
  .overview-label { font-size: var(--text-micro); }
  .timeline-heading > div:first-child { flex-wrap: wrap; gap: 4px 7px; }
}