/* Shared CMHS presentation layer: self-hosted type, warm reading paper, and dark stage chrome. */
@font-face {
  font-family: "Playfair Display CMHS";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/playfair-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Playfair Display CMHS";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/playfair-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display CMHS";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/playfair-cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display CMHS";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/playfair-latin-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02FF, U+1D00-1DBF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-cyrillic-ext.woff2") format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-latin-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Source Sans CMHS";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/cmhs/sourcesans-cyrillic-italic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --sans: "Source Sans CMHS", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --serif: "Playfair Display CMHS", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --wine: #541e1b;
  --wine-bright: #8a2c22;
  --wine-deep: #2f0f0d;
  --night: #0a0c0c;
  --plum: #17140f;
  --paper: #f4efe6;
  --gold: #a8712a;
  --ochre: #a8712a;
  --gold-soft: #d9ae4a;
  --line: rgb(168 113 42 / 28%);
  --cmhs-paper-raised: #fff;
  --cmhs-paper-sunk: #f3eee5;
  --cmhs-paper-edge: #e6ded0;
  --cmhs-ink: #1d1a18;
  --cmhs-ink-soft: #4a4340;
  --cmhs-ink-mute: #756c66;
  --cmhs-stage: #0a0c0c;
  --cmhs-stage-2: #101212;
  --cmhs-stage-ink: #efe5d2;
  --cmhs-stage-soft: #c9bda6;
  --cmhs-focus: #0b63b5;
  --shadow: 0 14px 34px rgb(29 26 24 / 14%);
}

html,
html[lang="mk"] {
  --sans: "Source Sans CMHS", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --serif: "Playfair Display CMHS", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  background: var(--cmhs-stage);
}

body {
  color: var(--cmhs-ink);
  background-color: var(--paper);
  background-image: image-set(
    url("./assets/design/texture-parchment.avif") type("image/avif"),
    url("./assets/design/texture-parchment.webp") type("image/webp")
  );
  background-repeat: repeat;
  background-size: 620px 620px;
  background-attachment: fixed;
  font-family: var(--sans);
  font-size: clamp(1.0125rem, .9637rem + .2439vw, 1.1619rem);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body::before { background: linear-gradient(120deg, rgb(84 30 27 / 3%), transparent 38%, rgb(168 113 42 / 4%)); }
.page-noise { opacity: .045; mix-blend-mode: multiply; }
h1, h2, h3 { font-family: var(--serif); }
a { text-decoration-color: rgb(138 44 34 / 35%); text-underline-offset: .18em; }
:focus-visible { outline-color: var(--cmhs-focus); outline-width: 3px; }
.skip-link { color: #fff; background: var(--wine-bright); }

/* Dark stage elements retain the image-first character while matching CMHS chrome. */
.intro-splash,
.site-header,
.site-header.scrolled,
.mobile-menu > div,
.hero,
.city-hero,
.atlas-panel,
.source-grid,
.search-dialog,
.lightbox,
.tabs {
  color: var(--cmhs-stage-ink);
}
.intro-splash { background: radial-gradient(circle at center, #2b211a 0%, var(--cmhs-stage-2) 52%, var(--cmhs-stage) 100%); }
.site-header.scrolled { background: rgb(10 12 12 / 94%); border-color: rgb(184 133 89 / 26%); }
.mobile-menu > div { background: rgb(13 16 16 / 98%); }
.hero::after { background: linear-gradient(90deg, rgb(10 12 12 / 96%) 0%, rgb(10 12 12 / 64%) 53%, rgb(10 12 12 / 18%) 100%), linear-gradient(0deg, var(--cmhs-stage), transparent 42%); }
.city-hero::after { background: linear-gradient(0deg, var(--cmhs-stage) 2%, rgb(10 12 12 / 24%) 75%), linear-gradient(90deg, rgb(10 12 12 / 92%), transparent 72%); }
.atlas-panel { background: linear-gradient(145deg, #211d17, var(--cmhs-stage-2) 58%, #251612); border-color: rgb(184 133 89 / 32%); }
.map-side p, .map-hover, .atlas-panel .eyebrow { color: var(--cmhs-stage-soft); }
.map-shape { fill: #3c2922; stroke: #a8712a; }
.map-link:hover .map-shape, .map-link:focus .map-shape, .map-link.active .map-shape { fill: var(--wine-bright); }

/* Reading areas use paper and white surfaces, with restrained burgundy and ochre detail. */
.section-head,
.country-story,
.country-facts-section,
.city-body,
.noscript,
.section-head p:last-child,
.country-title > p,
.country-chapters p,
.country-source span,
.country-source small,
.fact span,
.person-card p,
.quiet-note,
.village-tools,
.village-card p,
.monastery-card > p:not(.eyebrow),
.editorial-note p,
.profile-sources a,
.static-media-grid figcaption,
.static-city dd,
.noscript p { color: var(--cmhs-ink-mute); }
.country-chapters article { border-color: var(--cmhs-paper-edge); }
.country-source { background: rgb(255 255 255 / 62%); border-color: var(--ochre, #a8712a); }
.country-citations a,
.city-quick-nav button,
.profile-sources a { color: var(--cmhs-ink-soft); border-color: var(--cmhs-paper-edge); background: rgb(255 255 255 / 56%); }
.country-fact-card,
.known-card,
.person-card,
.stat-card,
.fact-card,
.celebrity-card,
.village-card,
.monastery-card,
.legacy-details,
.editorial-note {
  color: var(--cmhs-ink);
  background: rgb(255 255 255 / 88%);
  border-color: var(--cmhs-paper-edge);
  box-shadow: 0 1px 2px rgb(29 26 24 / 5%);
}
.country-fact-card::after { border-color: rgb(168 113 42 / 18%); box-shadow: 0 0 0 24px rgb(168 113 42 / 4%), 0 0 0 48px rgb(168 113 42 / 2%); }
.city-intro { border-color: var(--cmhs-paper-edge); }
.city-intro .lead,
.reading-prose,
.prose p,
.fact-card p,
.celebrity-card .celebrity-copy > p:not(.celebrity-type) { color: var(--cmhs-ink-soft); }
.stats-grid { background: var(--cmhs-paper-edge); }
.village-tools input { color: var(--cmhs-ink); background: #fff; border-color: var(--cmhs-paper-edge); }
.legacy-details { background: rgb(84 30 27 / 5%); }

/* Feature bands provide the same dark/light rhythm as the parent CMHS site. */
.fact-strip {
  color: var(--cmhs-stage-ink);
  background: var(--cmhs-stage-2);
  border-color: rgb(184 133 89 / 26%);
  box-shadow: 0 0 0 100vmax var(--cmhs-stage-2);
  clip-path: inset(0 -100vmax);
}
.fact-strip .fact { border-color: rgb(184 133 89 / 22%); }
.fact-strip .fact span { color: var(--cmhs-stage-soft); }
.archive-callout { background: var(--cmhs-paper-raised); color: var(--cmhs-ink); border-color: var(--cmhs-paper-edge); }
.archive-collage { background: var(--wine); }
.archive-copy .eyebrow { color: var(--wine-bright); }
.archive-copy p { color: var(--cmhs-ink-soft); }
.source-item { background: var(--cmhs-stage-2); color: var(--cmhs-stage-ink); }
.source-item span { color: var(--cmhs-stage-soft); }
.city-card, .media-button::after { color: var(--cmhs-stage-ink); }
.noscript-cities a { color: var(--cmhs-ink); }

.tabs { background: rgb(10 12 12 / 95%); border-color: rgb(184 133 89 / 26%); }
.tab { color: var(--cmhs-stage-soft); }
.tab.active, .button.primary { color: #fff; background: var(--wine-bright); border-color: var(--wine-bright); }
.item-source, .eyebrow, .city-intro h2, .known-card span, .stat-card dt { color: var(--ochre, #a8712a); }
.search-dialog { background: var(--cmhs-stage-2); }
.search-field input { color: var(--cmhs-stage-ink); background: var(--cmhs-stage); }
.search-summary { color: var(--cmhs-stage-soft); background: var(--cmhs-stage-2); }

@media (prefers-reduced-transparency: reduce) {
  .site-header.scrolled, .tabs, .city-crest-wrap { backdrop-filter: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .intro-splash, .page-noise, .tabs { display: none !important; }
}