:root {
  color-scheme: light;
  --page-width: 650px;

  /* Exact colors found in the Word document */
  --word-red: #ff0000;
  --word-blue: #4f81bd;
  --word-dark-blue: #1f497d;
  --word-green: #008000;
  --word-teal: #32849b;
  --word-purple: #3e003f;
  --word-black-soft: #0f0f0f;
  --word-black: #000000;
  --word-white: #ffffff;
  --word-yellow: #ffff00;
  --word-cyan-bg: #2dfdfc;
  --word-lime-bg: #29fd2f;
  --word-offwhite-bg: #f4f5f0;
  --word-run-white-bg: #ffffff;
  --word-highlight-green: #00ff00;
  --word-light-green: #c6d5a1;

  --text-color: var(--word-black);
  --link-color: var(--word-blue);
  --mark-color: var(--word-yellow);

  /* Word point sizes converted for the browser: 10pt = 13.333px */
  --size-9pt: 12px;
  --size-10pt: 13.333px;
  --size-12pt: 16px;
  --size-14pt: 18.667px;
  --size-22pt: 29.333px;
  --size-29pt: 38.667px;
  --size-35pt: 46.667px;
  --size-36pt: 48px;
  --size-37pt: 49.333px;
  --size-38pt: 50.667px;
  --size-39pt: 52px;
  --size-40pt: 53.333px;
}

* { box-sizing: border-box; }

html { font-size: var(--size-10pt); }

body {
  margin: 0;
  background: #fff;
  color: var(--text-color);
  font-family: Verdana, Geneva, sans-serif;
  font-size: var(--size-10pt);
  line-height: 1.35;
  text-align: center;
}

.page {
  width: min(var(--page-width), calc(100vw - 32px));
  margin-inline: auto;
  padding-block: 28px 40px;
}

/* Keep every major document band on the same centered 650px measure.
   Header, content sections, figures, rules, and footer now share the
   exact same outer width instead of mixing full-width and inline widths. */
.page > header,
.page > section,
.page > footer,
.page > figure,
.page > p,
.program,
.information,
.site-footer {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page > *,
.program-item,
.program-item > *,
.information,
.information > *,
.site-footer,
.site-footer > *,
figure,
figcaption {
  text-align: center;
}

p, h1, h2, h3 { margin-block: 0 0rem; padding-top: 0.35rem; padding-bottom: 0.35rem; }

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 400;
}

h1 {
  font-size: var(--size-40pt);
  letter-spacing: 0;
}

h2 {
  color: var(--word-teal);
  font-size: var(--size-10pt);
  margin-top: 1.4rem;
}

h3 {
  color: var(--word-black-soft);
  font-size: var(--size-12pt);
  margin-top: 0.8rem;
}

strong { font-weight: 700; }

mark {
  background: var(--mark-color);
  color: inherit;
  padding-inline: 0.08em;
}

a {
  color: var(--link-color);
  overflow-wrap: anywhere;
}

.program-item a, .word-black-link, .word-black, .c0 { color: var(--word-black); }
.word-red-link { color: var(--word-red); }
.word-purple { color: var(--word-purple); }

/* Additional exact background/highlight colors found in the Word document. */
.bg-word-yellow { background-color: var(--word-yellow); }
.bg-word-cyan { background-color: var(--word-cyan-bg); }
.bg-word-lime { background-color: var(--word-lime-bg); }
.bg-word-offwhite { background-color: var(--word-offwhite-bg); }
.bg-word-white { background-color: var(--word-run-white-bg); }

.color-word-teal { color: var(--word-teal); }
.color-word-darkblue { color: var(--word-dark-blue); }
.word-red { color: var(--word-red); }
.word-blue { color: var(--word-blue); }
.word-yellow { color: var(--word-yellow); }
.small-9pt { font-size: var(--size-9pt); }

.word-highlight-yellow {
  display: block;
  background-color: var(--word-yellow);
  color: var(--word-dark-blue);
  padding-inline: 0.08em;
}

.location-heading {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.12rem 0.22rem;
  font-size: var(--size-10pt);
}

.location-heading a,
.location-heading u { color: inherit; }


img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

.inline-icon {
  width: 1.35em;
  max-width: 1.35em;
}

figure { margin: 0; margin-block: 0; }

figcaption {
  margin-top: 0.4rem;
  font-size: var(--size-10pt);
}

.rule {
  height: 1px;
  margin-block: 1rem;
  background: repeating-linear-gradient(
    to right,
    var(--text-color) 0,
    var(--text-color) 6px,
    transparent 6px,
    transparent 10px
  );
}

.background-note {
  margin-block: 1.25rem;
  padding-block: 0.35rem;
  color: var(--word-red);
  font-family: Verdana, Geneva, sans-serif;
  font-size: var(--size-10pt);
  text-align: center;
}

.event-date {
  margin-top: 1.5rem;
  color: var(--word-blue);
}

.intro {
  margin-block: 1.2rem 1.5rem;
  text-align: center;
}

.flag-header {
  position: relative;
  padding: 0.85rem 0.75rem 0.95rem;
}

.intro.compact {
  margin-top: 1.4rem;
  padding-block: 0.8rem 0.95rem;
}

.fit-line {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.fit-line .fit-text {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.05;
  transform-origin: center;
}

/* Exact Word colors and Word-size CSS fallbacks before JavaScript fitting runs. */
.flag-header h1 .fit-text,
.intro.compact .flag-blue .fit-text { font-size: clamp(1.6rem, 8vw, var(--size-40pt)); }

.flag-darkblue .fit-text { font-size: clamp(0.62rem, 2.2vw, var(--size-10pt)); }
.flag-red .fit-text { font-size: clamp(1.35rem, 7.5vw, var(--size-37pt)); }
.flag-green .fit-text { font-size: clamp(1.35rem, 7.5vw, var(--size-38pt)); }
.flag-green-text .fit-text { font-size: clamp(1.2rem, 6.6vw, var(--size-38pt)); }
.flag-header .flag-green-text:first-of-type .fit-text { font-size: clamp(1rem, 5vw, var(--size-22pt)); }
.flag-header .years .fit-text,
.intro.compact .years .fit-text { font-size: clamp(0.72rem, 2.6vw, var(--size-14pt)); }

.flag-blue { color: var(--word-blue); }
.flag-darkblue { color: var(--word-dark-blue); }
.flag-red-text { color: var(--word-red); }
.flag-green-text, .word-green, a.word-green { color: var(--word-green); }
.word-light-green { color: var(--word-light-green); }


.flag-red,
.flag-green {
  display: inline-block;
  width: 100%;
  padding: 0.08em 0.18em 0.12em;
  color: var(--word-white);
  text-align: center;
}

.flag-red {
  background: var(--word-red);
  color: var(--word-white);
}

.flag-red::first-letter { color: var(--word-red); }

.flag-green {
  background: var(--word-green);
  color: var(--word-white);
}

.years {
  color: var(--word-red);
  word-spacing: 0.3em;
}

.program-item {
  width: 100%;
  max-width: 100%;
  margin-block: 1.6rem;
}

.program-item h2:nth-of-type(1) { font-size: var(--size-10pt); }

.inline-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-inline: 0.2em;
  vertical-align: -0.25em;
}

.information {
  margin-block: 1.5rem;
  font-size: var(--size-10pt);
}

.information h2 {
  color: var(--word-dark-blue);
  font-size: var(--size-10pt);
}

.information h2 mark,
.information p mark {
  background: var(--word-yellow);
  color: var(--word-dark-blue);
}

.information .word-highlight-yellow {
  background: var(--word-yellow);
  color: var(--word-dark-blue);
}

.address-line {
  padding-inline: 0.08em;
}

.information p:nth-of-type(-n+6),
.information p:nth-of-type(8),
.information p:nth-of-type(9) {
  color: var(--word-blue);
}

.site-footer {
  margin-top: 1.5rem;
  font-size: var(--size-10pt);
  text-align: center;
}

header,
footer,
.site-footer { text-align: center; }

.sound-button {
	height: 16px;
  width: 16px;
  display: inline;
	vertical-align: baseline;
}

@media (max-width: 420px) {
  .page {
    width: min(var(--page-width), calc(100vw - 20px));
    padding-block: 18px 28px;
  }

  .flag-header { padding-inline: 0.55rem; }
}

/* Word-derived paragraph background mapping:
   FFFF00 = yellow exhibition headings; 2DFDFC = cyan video-space headings;
   29FD2F = lime sound-space headings; F4F5F0 = off-white run shading. */
.program-item .location-heading.color-word-teal { color: var(--word-teal); }
.program-item .location-heading.color-word-darkblue { color: var(--word-dark-blue); }
.program-item .location-heading.bg-word-yellow { background-color: var(--word-yellow); }
.program-item .location-heading.bg-word-cyan { background-color: var(--word-cyan-bg); }
.program-item .location-heading.bg-word-lime { background-color: var(--word-lime-bg); }


/* Final width safeguard: all text content follows the same measure as header/footer. */
.program-item > *,
.information > *,
.site-footer > *,
.intro > * {
  max-width: 100%;
}