/* 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; }
}

/*
 * The Society's two modes (docs/reference/COMPANION_MODES.md in the CMHS repository). cmhs-modes.css
 * draws the ribbon and the sub-bar panel; the rules below fit Cities to them.
 *
 * Standalone (and without JavaScript): the Society's ribbon sits above the header, so the header is a
 * sticky, solid dark band instead of a transparent bar fixed over the photographs. Its labels read against
 * that band, never against a photograph (C-002: 1.2-2.0:1 over the home hero before this).
 */
.site-header,
.site-header.scrolled {
  position: sticky;
  top: 0;
  height: 68px;
  background: var(--cmhs-stage);
  border-bottom-color: rgb(184 133 89 / 26%);
  backdrop-filter: none;
}
.hero { min-height: calc(96vh - 68px); padding-top: 82px; }
.city-hero { min-height: calc(78vh - 68px); padding-top: 82px; }

@media (max-width: 620px) {
  .hero { min-height: 792px; }
}

/*
 * Embedded: the Society's header is the only brand header (the brand link and the intro splash carry
 * data-cmhs-brand), and the Cities header becomes the sub-bar, the header's second row: the section links
 * and the city search on the Society's near-white panel. Everything below it keeps Cities' own look.
 * The frame grows to fit the document, so nothing may be sized from the viewport here, and dialogs sit in
 * the slice the visitor can see (--cmhs-vp-top, --cmhs-vp-height).
 */
html[data-cmhs-mode='embedded'] .site-header {
  height: auto;
  transition: none;
  backdrop-filter: none;
}
html[data-cmhs-mode='embedded'] .site-header nav {
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  min-width: 0;
}
html[data-cmhs-mode='embedded'] .site-header nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 .7rem;
  border-radius: 999px;
  color: var(--cmhs-chrome-ink);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
html[data-cmhs-mode='embedded'] .site-header nav > a:hover {
  color: var(--cmhs-chrome-ink);
  background: var(--cmhs-chrome-tab);
}
html[data-cmhs-mode='embedded'] .mobile-menu { display: none; }
html[data-cmhs-mode='embedded'] .search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: auto;
  min-height: 40px;
  margin-inline-start: auto;
  padding: 0 .95rem 0 .8rem;
  border: 1px solid var(--cmhs-chrome-edge);
  border-radius: 999px;
  color: var(--cmhs-chrome-ink);
  background: var(--cmhs-chrome-tab);
  font-size: .9rem;
  font-weight: 600;
}
html[data-cmhs-mode='embedded'] .search-trigger:hover { border-color: var(--cmhs-chrome-edge-strong); }
html[data-cmhs-mode='embedded'] .search-trigger span { display: inline; }
html[data-cmhs-mode='embedded'] .search-trigger kbd { display: none; }
html[data-cmhs-mode='embedded'] .search-trigger::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5a17' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

html[data-cmhs-mode='embedded'] main,
html[data-cmhs-mode='embedded'] .loading-shell { min-height: 0; }
html[data-cmhs-mode='embedded'] .hero { min-height: 640px; padding-top: 72px; }
html[data-cmhs-mode='embedded'] .city-hero { min-height: 520px; padding-top: 72px; }

@media (max-width: 620px) {
  html[data-cmhs-mode='embedded'] .hero,
  html[data-cmhs-mode='embedded'] .city-hero { min-height: 0; padding-top: 56px; }
  /* Two rows on a phone: the section links, then the search as a full-width row. */
  html[data-cmhs-mode='embedded'] .search-trigger { flex: 1 0 100%; justify-content: flex-start; margin-inline-start: 0; }
}

html[data-cmhs-mode='embedded'] .skip-link { top: calc(var(--cmhs-vp-top) + .75rem); }
html[data-cmhs-mode='embedded'] .search-dialog {
  top: calc(var(--cmhs-vp-top) + 12px);
  bottom: auto;
  margin-block: 0;
  max-height: calc(var(--cmhs-vp-height) - 24px);
}
html[data-cmhs-mode='embedded'] .search-results { max-height: max(120px, min(420px, calc(var(--cmhs-vp-height) - 200px))); }
html[data-cmhs-mode='embedded'] .lightbox {
  top: var(--cmhs-vp-top);
  bottom: auto;
  width: 100%;
  height: var(--cmhs-vp-height);
}
html[data-cmhs-mode='embedded'] .lightbox img { max-height: calc(var(--cmhs-vp-height) - 8rem); }
html[data-cmhs-mode='embedded'] .lightbox-close,
html[data-cmhs-mode='embedded'] .lightbox-nav { position: absolute; }