@font-face {
  font-family: Inter;
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: Inter, system-ui, sans-serif;
  font-size: 100%;
  color: #202020;
  background: #fff;
  line-height: 1.6;
  color-scheme: light;
}

body { max-width: 52rem; margin: 2rem auto; padding: 0 1.25rem; }
.event-index { max-width: 80rem; }
.construction-banner { margin: 0 0 1.5rem; padding: .55rem .85rem; border: 1px solid #ead8a4; border-radius: .3rem; background: #fff8e6; color: #5a4518; font-size: .8125rem; line-height: 1.5; }
.site-header { margin: 0 0 1.25rem; }
.site-brand { display: block; width: 14rem; max-width: 100%; aspect-ratio: 56 / 13; }
/* Center the original padded PNG in a compact header slot; all ink stays visible. */
.site-brand img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-index h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1 { font-size: 1.5rem; line-height: 1.3; font-weight: 600; }
h2 { font-size: 1.125rem; line-height: 1.4; margin-top: 2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
p { margin: .65rem 0 1rem; }
a { color: #174ea6; text-underline-offset: .15em; overflow-wrap: anywhere; }
a:visited { color: #653699; }
a:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px; border-radius: 1px; }
.event-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.event-table th, .event-table td { padding: .9rem .75rem; vertical-align: top; border-bottom: 1px solid #dedede; overflow-wrap: anywhere; }
.event-table th:first-child, .event-table td:first-child { padding-left: 0; }
.event-table th:last-child, .event-table td:last-child { padding-right: 0; }
.event-table thead th { padding-top: .25rem; padding-bottom: .6rem; font-size: .875rem; color: #505050; font-weight: 500; }
.event-table thead th:nth-child(1) { width: 12%; }
.event-table thead th:nth-child(2) { width: 21%; }
.event-table thead th:nth-child(3) { width: 24%; }
.event-table thead th:nth-child(4) { width: 28%; }
.event-table thead th:nth-child(5) { width: 15%; }
.event-table tbody th { font-weight: 500; }
.cell-label { display: none; }
.event-date { font-variant-numeric: tabular-nums; }
.event-link { font-weight: 500; }
.muted { color: #505050; }
.source-links { white-space: normal; font-size: .875rem; }
.facts { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); gap: .5rem 1rem; }
dt { font-weight: 500; }
dd { margin: 0; overflow-wrap: anywhere; }
.courses { padding-left: 1.5rem; }
.courses > li { margin-bottom: 1.25rem; }
.sources { padding-left: 1.5rem; }
.sources > li { margin-bottom: 1rem; overflow-wrap: anywhere; }
.sources p { margin: .2rem 0; }
footer { margin-top: 3rem; font-size: .875rem; color: #505050; }
.skip-link { position: absolute; top: -10rem; left: 1rem; padding: .5rem; background: white; }
.skip-link:focus { top: .5rem; }
section { scroll-margin-top: 1rem; }
@media (max-width: 48rem) {
  /* Keep real headers and explicit table roles while reflowing each row. */
  .event-table, .event-table tbody { display: block; }
  .event-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .event-table tbody tr { display: block; padding: 1rem 0; border-bottom: 1px solid #dedede; }
  .event-table tbody tr:first-child { border-top: 1px solid #dedede; }
  .event-table tbody th, .event-table tbody td { display: flex; flex-wrap: wrap; gap: 0 .75rem; padding: .2rem 0; border: 0; }
  .event-table tbody th > span:last-child, .event-table tbody td > span:last-child { flex: 1 1 11rem; min-width: 0; }
  .cell-label { display: block; flex: 0 0 5.5rem; font-size: .875rem; font-weight: 400; color: #505050; }
}
@media (max-width: 30rem) {
  body { margin-top: 1.25rem; padding: 0 1rem; }
  .facts { grid-template-columns: 1fr; gap: .125rem; }
  dd { margin-bottom: .65rem; }
}

/* Compact, selectable timeline. The table remains the main reading surface. */
[hidden] { display: none !important; }
button, select { font: inherit; color: inherit; }
button, select, .timeline-month { touch-action: manipulation; }
button:focus-visible, select:focus-visible { outline: 3px solid #174ea6; outline-offset: 4px; }
.calendar-controls { margin: 2rem 0 1.5rem; }
.calendar-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
h2.calendar-title { margin: 0; font-size: 1rem; }
.timeline-key { color: #60646c; font-size: .8125rem; margin: .2rem 0 0; }
.country-control { display: flex; flex-wrap: wrap; min-width: 0; align-items: center; gap: .65rem; font-size: .875rem; }
.country-control select { box-sizing: border-box; min-width: 0; padding: .55rem 2rem .55rem .7rem; border: 1px solid #c8cdd4; border-radius: .3rem; background: white; max-width: 100%; }
.month-timeline { display: flex; overflow-x: auto; list-style: none; padding: .5rem .25rem .75rem; margin: 1rem -.25rem 0; gap: 0; }
.month-timeline li { flex: 1 0 6.2rem; min-width: 0; border-top: 1px solid #c8cdd4; }
.timeline-month { display: flex; flex-direction: column; padding: .75rem .8rem .6rem; min-height: 8rem; border-top: 3px solid transparent; margin-top: -2px; text-decoration: none; color: #333 !important; }
.timeline-month:hover { background: #f4f6f9; }
.timeline-month[aria-current] { border-top-color: #174ea6; background: #edf3fc; color: #174ea6 !important; }
.timeline-month:focus-visible { outline-offset: -3px; }
.timeline-year { font-size: .6875rem; color: #646b76; }
.timeline-label { font-size: .95rem; font-weight: 600; margin: .1rem 0 .65rem; }
.timeline-dots { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.2rem; align-content: flex-start; max-width: 4.4rem; }
.event-dot { width: .3rem; height: .3rem; background: #7088aa; border-radius: 50%; }
.timeline-month[aria-current] .event-dot { background: #174ea6; }
.timeline-count { font-size: .6875rem; color: #646b76; margin-top: auto; }
.timeline-month.is-empty .timeline-label { color: #737984; }
.calendar-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }
.calendar-summary p { margin: 0; font-size: .8125rem; color: #60646c; }
.calendar-summary button, #calendar-empty button { background: white; border: 1px solid #c8cdd4; border-radius: .3rem; padding: .45rem .75rem; cursor: pointer; font-size: .8125rem; }
.calendar-summary button[aria-pressed="true"] { color: #174ea6; border-color: #174ea6; background: #edf3fc; }
#calendar-empty { padding: 1rem 0 3rem; }
@media (max-width: 30rem) { .country-control { width: 100%; justify-content: space-between; } }