/* Exhibition title and header layout update — 2026-08-20 */

.exhibition-header,
.home-page .exhibition-header,
.inner-page .exhibition-header {
  height: auto !important;
  min-height: 300px !important;
  box-sizing: border-box !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  align-items: center !important;
}

.exhibition-header .heading {
  min-width: 0 !important;
  align-self: center !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(28px, auto) !important;
  align-content: center !important;
}

.exhibition-header .heading h1,
.home-page .exhibition-header .heading h1,
.inner-page .exhibition-header .heading h1 {
  width: 100% !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.exhibition-header .heading h1 span,
.home-page .exhibition-header .heading h1 span,
.inner-page .exhibition-header .heading h1 span {
  font-size: clamp(27px, 2.65vw, 47px) !important;
  line-height: 1.08 !important;
}

.exhibition-header .heading h1 .title-line {
  display: block !important;
}

.exhibition-header .heading > p,
.home-page .exhibition-header .heading > p,
.inner-page .exhibition-header .heading > p {
  margin: 15px 0 0 !important;
  font-size: clamp(12px, 0.95vw, 16px) !important;
  line-height: 1.45 !important;
}

.exhibition-header .utility.language-switcher,
.home-page .exhibition-header .utility.language-switcher,
.inner-page .exhibition-header .utility.language-switcher {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 96px 52px 52px 96px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;
  width: 100% !important;
  min-height: 28px !important;
  margin-top: 17px !important;
}

.exhibition-header .utility.language-switcher a,
.home-page .exhibition-header .utility.language-switcher a,
.inner-page .exhibition-header .utility.language-switcher a {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.exhibition-header .utility.language-switcher a:nth-child(1) { grid-column: 1 !important; }
.exhibition-header .utility.language-switcher a:nth-child(2) { grid-column: 2 !important; }
.exhibition-header .utility.language-switcher a:nth-child(3) { grid-column: 3 !important; }
.exhibition-header .utility.language-switcher a:nth-child(4) { grid-column: 4 !important; }

.home-page .exhibition-header .utility.language-switcher a:nth-child(1) { grid-column: 2 !important; }
.home-page .exhibition-header .utility.language-switcher a:nth-child(2) { grid-column: 3 !important; }
.home-page .exhibition-header .utility.language-switcher a:nth-child(3) { grid-column: 4 !important; }

html body.inner-page main .intro-section > h2,
html body.section-one-page main .section-one-intro > h2,
html body.section-two-page main .chapter-summary > h2,
html body.section-three-page main .chapter-summary > h2,
html body.section-four-page main .peaceful-atom-summary > h2 {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto 34px !important;
  padding: 0 !important;
  color: #173f70 !important;
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif !important;
  font-size: clamp(40px, 3.45vw, 56px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body.inner-page main .intro-section > h2 span,
html body.section-four-page main .peaceful-atom-summary > h2 span {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

html[lang="kk"] body.inner-page main .intro-section > h2,
html[lang="kk"] body.section-one-page main .section-one-intro > h2,
html[lang="kk"] body.section-two-page main .chapter-summary > h2,
html[lang="kk"] body.section-three-page main .chapter-summary > h2,
html[lang="kk"] body.section-four-page main .peaceful-atom-summary > h2 {
  font-family: "Segoe UI", "Noto Sans", Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.008em !important;
  font-kerning: normal !important;
  text-rendering: optimizeLegibility !important;
}

html body.foreword-page .president-quote .president-attribution span,
html body.foreword-page .president-quote .president-attribution time {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: clamp(19px, 1.45vw, 27px) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}

html body.foreword-page .president-quote .president-attribution time {
  margin-top: 0 !important;
}

/* Foreword header must use exactly the same geometry as sections I–IV. */
html body.foreword-page header.exhibition-header.inner-header {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) 70px !important;
  grid-template-areas: "logo heading icons" !important;
  align-items: center !important;
  min-height: 300px !important;
  padding: 28px 7.7% !important;
}

html body.foreword-page header.exhibition-header .emblem {
  grid-area: logo !important;
  display: grid !important;
  place-items: center !important;
  justify-self: start !important;
  gap: 5px !important;
}

html body.foreword-page header.exhibition-header .heading {
  grid-area: heading !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(28px, auto) !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
}

html body.foreword-page header.exhibition-header .heading > p {
  margin: 15px 0 0 !important;
  font-size: clamp(12px, 0.95vw, 16px) !important;
  line-height: 1.45 !important;
}

html body.foreword-page header.exhibition-header .utility.language-switcher {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 96px 52px 52px 96px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;
  width: 100% !important;
  min-height: 28px !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
}

html body.foreword-page header.exhibition-header .utility.language-switcher a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
}

html body.foreword-page header.exhibition-header .utility.language-switcher a:nth-child(1) { grid-column: 1 !important; }
html body.foreword-page header.exhibition-header .utility.language-switcher a:nth-child(2) { grid-column: 2 !important; }
html body.foreword-page header.exhibition-header .utility.language-switcher a:nth-child(3) { grid-column: 3 !important; }
html body.foreword-page header.exhibition-header .utility.language-switcher a:nth-child(4) { grid-column: 4 !important; }

html body.foreword-page header.exhibition-header .header-icons {
  grid-area: icons !important;
  display: grid !important;
  justify-self: end !important;
  gap: 15px !important;
}

/* Never split ordinary words or personal names in exhibition copy. */
html body .foreword-copy .lead,
html body .foreword-prose p,
html body .intro-section p,
html body .chapter-description,
html body .chapter-description p,
html body .archive-meta h3,
html body .archive-meta p,
html body .archive-source,
html body .viewer-caption h3,
html body .viewer-caption p {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  text-wrap: pretty !important;
}

/* Make source links legible on the dark foreword panel in both languages. */
html body.foreword-page .foreword-copy a {
  color: #f4cf75 !important;
  background: rgba(244, 207, 117, 0.1) !important;
  border-radius: 3px !important;
  padding: 0 0.14em 0.05em !important;
  font-weight: 700 !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(244, 207, 117, 0.88) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: color 160ms ease, background-color 160ms ease !important;
}

html body.foreword-page .foreword-copy a::after {
  content: " ↗";
  display: inline-block;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: 0.12em;
  text-decoration: none !important;
}

html body.foreword-page .foreword-copy a:hover {
  color: #153f6b !important;
  background: #f4cf75 !important;
}

html body.foreword-page .foreword-copy a:focus-visible {
  outline: 3px solid #f4cf75 !important;
  outline-offset: 3px !important;
}

.viewer-caption .viewer-date,
.viewer-caption .viewer-source {
  display: block !important;
}

.viewer-caption .viewer-date {
  margin-bottom: 8px !important;
  color: #d3a64e !important;
  font-weight: 700 !important;
}

.viewer-caption .viewer-source {
  margin-top: 0 !important;
}

html body.foreword-page main.foreword-main .president-quote {
  padding-bottom: 20px !important;
}

html body.foreword-page .foreword-copy .section-heading {
  width: 100% !important;
  margin: 0 0 30px !important;
  padding: 46px 0 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

html body.foreword-page .foreword-copy .section-heading h2 {
  color: #ffffff !important;
}

html body.foreword-page .foreword-copy .section-heading > span:empty {
  display: none !important;
}

@media (max-width: 900px) {
  .exhibition-header,
  .home-page .exhibition-header,
  .inner-page .exhibition-header {
    min-height: 280px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .exhibition-header .heading h1 span,
  .home-page .exhibition-header .heading h1 span,
  .inner-page .exhibition-header .heading h1 span {
    font-size: clamp(23px, 4.1vw, 35px) !important;
  }
}

@media (max-width: 700px) {
  .exhibition-header,
  .home-page .exhibition-header,
  .inner-page .exhibition-header {
    min-height: 0 !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .exhibition-header .heading h1 span,
  .home-page .exhibition-header .heading h1 span,
  .inner-page .exhibition-header .heading h1 span {
    font-size: clamp(18px, 5.15vw, 25px) !important;
    line-height: 1.12 !important;
  }

  .exhibition-header .heading > p,
  .home-page .exhibition-header .heading > p,
  .inner-page .exhibition-header .heading > p {
    margin-top: 10px !important;
    font-size: clamp(8px, 2.45vw, 11px) !important;
    line-height: 1.4 !important;
  }

  .exhibition-header .utility.language-switcher,
  .home-page .exhibition-header .utility.language-switcher,
  .inner-page .exhibition-header .utility.language-switcher {
    margin-top: 13px !important;
    grid-template-columns: 60px 36px 36px 60px !important;
    column-gap: 8px !important;
  }

  .exhibition-header .utility.language-switcher a,
  .home-page .exhibition-header .utility.language-switcher a,
  .inner-page .exhibition-header .utility.language-switcher a {
    font-size: 11px !important;
  }

  html body.inner-page main .intro-section > h2,
  html body.section-four-page main .peaceful-atom-summary > h2 {
    margin-bottom: 28px !important;
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  html body.foreword-page main.foreword-main .president-quote {
    padding-bottom: 18px !important;
  }

  html body.foreword-page .foreword-copy .section-heading {
    padding: 34px 0 0 !important;
  }

  html body.foreword-page header.exhibition-header.inner-header {
    grid-template-columns: 58px minmax(0, 1fr) 38px !important;
    min-height: 0 !important;
    padding: 20px 15px !important;
  }

  html body.foreword-page header.exhibition-header .utility.language-switcher {
    grid-template-columns: 60px 36px 36px 60px !important;
    column-gap: 8px !important;
    margin-top: 13px !important;
  }

  html body.foreword-page header.exhibition-header .utility.language-switcher a {
    font-size: 11px !important;
  }
}

/*
 * Canonical header navigation.
 * The foreword is the source of truth for every page and section.
 */
html body.inner-page header.exhibition-header.inner-header {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) 70px !important;
  grid-template-areas: "logo heading icons" !important;
  align-items: center !important;
  min-height: 300px !important;
  padding: 28px 7.7% !important;
}

html body.inner-page header.exhibition-header.inner-header > .emblem {
  grid-area: logo !important;
}

html body.inner-page header.exhibition-header.inner-header > .heading {
  grid-area: heading !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(28px, auto) !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.inner-page header.exhibition-header.inner-header > .header-icons {
  grid-area: icons !important;
  justify-self: end !important;
}

html body header.exhibition-header div.heading div.utility.language-switcher {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 96px 52px 52px 96px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 18px !important;
  gap: 0 18px !important;
  width: 100% !important;
  min-height: 28px !important;
  margin: 17px 0 0 !important;
  padding: 0 !important;
  inset: auto !important;
  transform: none !important;
}

html body header.exhibition-header div.heading div.utility.language-switcher > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

html body header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(1) { grid-column: 1 !important; }
html body header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(2) { grid-column: 2 !important; }
html body header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(3) { grid-column: 3 !important; }
html body header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(4) { grid-column: 4 !important; }

/* The start page has no back link, so its three controls occupy columns 2–4. */
html body.home-page header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(1) { grid-column: 2 !important; }
html body.home-page header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(2) { grid-column: 3 !important; }
html body.home-page header.exhibition-header div.heading div.utility.language-switcher > a:nth-child(3) { grid-column: 4 !important; }

@media (max-width: 900px) {
  html body.inner-page header.exhibition-header.inner-header {
    grid-template-columns: 130px minmax(0, 1fr) 60px !important;
    min-height: 280px !important;
    padding: 22px 4% !important;
  }
}

@media (max-width: 700px) {
  html body.inner-page header.exhibition-header.inner-header {
    grid-template-columns: 58px minmax(0, 1fr) 38px !important;
    min-height: 0 !important;
    padding: 20px 15px !important;
  }

  html body header.exhibition-header div.heading div.utility.language-switcher {
    grid-template-columns: 60px 36px 36px 60px !important;
    column-gap: 8px !important;
    gap: 0 8px !important;
    margin-top: 13px !important;
  }

  html body header.exhibition-header div.heading div.utility.language-switcher > a {
    font-size: 11px !important;
  }
}