:root {
  --color-accent: #db545a;
  --color-accent-hover: #d63b42;
  --color-link: #478ac9;
  --color-link-hover: #387cbd;
  --color-text: #111111;
  --color-text-muted: #666666;
  --color-border: #454545;
  --color-shade-1: #f2f2f2;
  --color-shade-2: #e5e5e5;
  --color-footer-bg: #333333;
  --font-heading: "Titillium Web", sans-serif;
  --font-title: "Roboto", sans-serif;
  --font-body: "Open Sans", sans-serif;
}

* { box-sizing: border-box; }

/* Anchor scrolling is animated at a constant speed in script.js,
   so the native (eased) smooth behaviour is intentionally not used. */
/* Reserve the scrollbar gutter at all times. The calendar/research tables are
   filled in by script.js, so on the first frame those pages are short enough
   not to need a scrollbar; without a reserved gutter the layout would jump
   sideways by the scrollbar width once the rows are inserted. */
html {
  font-size: 16px;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
}

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

a { color: inherit; text-decoration: none; }

/* Fixed container widths (matching the original); the gap between the
   container and the viewport supplies the side gutters, so no padding. */
.container {
  max-width: 1140px;
  margin: 0 auto;
}

.section { padding: 0; scroll-margin-top: 57px; display: flow-root; }

/* breathing room between the last section and the footer */
main { padding-bottom: 48px; }
#milestones { margin-top: 20px; }

/* Header / nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-accent);
  color: #fff;
}

.site-header__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 7px 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}

.site-header__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}

.site-header__title a { color: #fff; }

.site-header__kofi { display: none; margin-left: 12px; line-height: 0; min-width: 0; }
.site-header__kofi img { height: auto; max-height: 36px; }

.site-nav {
  display: flex;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}

.site-nav__list a {
  display: block;
  padding: 11px 18px;
  line-height: 1;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__list a:hover,
.site-nav__list a:focus,
.site-nav__list a.is-current {
  color: #111111;
  background: #ffffff;
}

/* Section titles / lede */

.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 3.75rem;
  line-height: 1.1;
  color: var(--color-accent);
  text-align: center;
  margin: 60px 0 0;
}

/* Section headings inside the page body are dark, not the accent colour */
.section-title--left {
  text-align: left;
  font-size: 3rem;
  line-height: 1.1;
  color: var(--color-text);
  margin: 24px 0 0;
}

.section-title-rule {
  width: 141px;
  height: 8px;
  background: var(--color-accent);
  margin: 30px auto 0;
}

.lede {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 1.125rem;
  width: 800px;
  max-width: 100%;
  margin: 30px auto 0;
}

/* the left-aligned intro lines are plain body text, not grey italics */
.lede--left {
  text-align: left;
  color: var(--color-text);
  font-style: normal;
  width: auto;
  max-width: none;
  margin: 0;
}

#calendar .lede--left,
#research .lede--left { line-height: 1.2; }

.hero-image {
  max-height: 460px;
  width: auto;
  margin: 30px auto 50px;
}

/* Community */

.section--community {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJkZWZhdWx0LWltYWdlLXNvbGlkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDAwIDI2NSIgc3R5bGU9IndpZHRoOiA0MDBweDsgaGVpZ2h0OiAyNjVweDsiPg0KPHJlY3QgZmlsbD0iI0M2RDhFMSIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNjUiLz4NCjxwYXRoIGZpbGw9IiNEOUUzRTgiIGQ9Ik0zOTUuMyw5Ni4yYy01LTAuOC02LjEsMS4xLTguNSwyLjljLTEtMi4zLTIuNi02LjItNy43LTVjMS41LTUuMy0yLjYtOC40LTcuNy04LjRjLTAuNiwwLTEuMiwwLjEtMS44LDAuMg0KCWMtMS44LTQuMS02LTYuOS0xMC43LTYuOWMtNi41LDAtMTEuOCw1LjMtMTEuOCwxMS44YzAsMC40LDAsMC45LDAuMSwxLjNjLTEuMi0wLjgtMi41LTEuMy0zLjktMS4zYy00LjMsMC03LjksNC4yLTcuOSw5LjQNCgljMCwxLjIsMC4yLDIuNCwwLjYsMy41Yy0wLjUtMC4xLTEtMC4xLTEuNi0wLjFjLTYuOSwwLTEyLjUsNS41LTEyLjcsMTIuNGMtMC45LTAuMi0xLjktMC40LTIuOS0wLjRjLTYuNCwwLTExLjcsNS4yLTEyLjUsMTEuOA0KCWMtMS4yLTAuNC0yLjUtMC42LTMuOS0wLjZjLTUuOSwwLTEwLjgsMy44LTEyLjEsOC45Yy0yLjQtMi01LjUtMy4yLTguOS0zLjJjLTYsMC0xMS4xLDMuNy0xMi44LDguOGMtMS41LTEuNC0zLjgtMi4zLTYuMy0yLjMNCgljLTIuMSwwLTQuMSwwLjYtNS41LDEuN2gtMC4xYy0xLjMtNS41LTYuMi05LjUtMTIuMS05LjVjLTIuNCwwLTQuNywwLjctNi42LDEuOWMtMS40LTAuNy0zLTEuMi00LjgtMS4yYy0wLjMsMC0wLjUsMC0wLjgsMA0KCWMtMS41LTQuMS01LjItNy05LjUtN2MtMy4xLDAtNS45LDEuNS03LjgsMy45Yy0yLjItNC44LTYuOC04LjItMTIuMi04LjJjLTUuNiwwLTEwLjUsMy43LTEyLjUsOC44Yy0yLjEtMC45LTQuNC0xLjUtNi45LTEuNQ0KCWMtNi44LDAtMTIuNSwzLjktMTQuNSw5LjNjLTAuMiwwLTAuNSwwLTAuNywwYy01LjIsMC05LjYsMy4yLTExLjQsNy44Yy0yLjctMi44LTctNC41LTExLjgtNC41Yy0zLjMsMC02LjQsMC45LTguOSwyLjMNCgljLTIuMS02LjUtOC0xMi4yLTE4LjEtOS45Yy0yLjctMi4zLTYuMy0zLjctMTAuMS0zLjdjLTIuNSwwLTQuOCwwLjYtNi45LDEuNmMtMi4yLTUuOS03LjktMTAuMS0xNC42LTEwLjFjLTguNiwwLTE1LjYsNy0xNS42LDE1LjYNCgljMCwwLjksMC4xLDEuNywwLjIsMi41Yy0yLjYtNS03LjgtOC40LTEzLjgtOC40Yy04LjMsMC0xNS4xLDYuNS0xNS42LDE0LjZjLTIuOS0zLjItNy01LjMtMTEuNy01LjNjLTcuNCwwLTEzLjUsNS4xLTE1LjIsMTINCgljLTIuOS0zLjUtOS44LTYtMTQuNy02djExOS4yaDQwMFYxMDJDNDAwLDEwMiw0MDAsOTcsMzk1LjMsOTYuMnoiLz4NCjxwYXRoIGZpbGw9IiM4RUE4QkIiIGQ9Ik00MDAsMjA2LjJjMCwwLTI1LjMtMTkuMi0zMy42LTI1LjdjLTEzLjQtMTAuNi0yMy4xLTEyLjktMzEuNy03cy0yMy45LDE5LjctMjMuOSwxOS43cy01OC45LTYzLjktNjEuNS02Ni40DQoJYy0xLjUtMS40LTMuNi0xLjctNS41LTAuOWMtNS4yLDIuNC0xNy42LDkuNy0yNC41LDEyLjdjLTYuOSwyLjktNDEtNTAuNy00OS42LTUzcy04NC4zLDgzLjMtMTAxLjQsNzUuMXMtMjYuOS0yLjMtMzUuNCwzLjUNCgljLTguNiw1LjktMTEsNS45LTE1LjksOC4ycy0xNy4xLTUuOS0xNy4xLTUuOVYyNjVjMCwwLDQwMCwwLjIsNDAwLDB2LTU4LjhINDAweiIvPg0KPHBhdGggZmlsbD0iIzdFOTZBNiIgZD0iTTMzMy40LDE3OWMtMTMuMS05LjMtNDAsNC42LTU1LjEsMTAuN2MtMjMuNiw5LjYtOTQtNTQuNC0xMDcuMi01OS43YzAsMC00LjIsMy43LTkuNiw3LjYNCgljLTMuNS0wLjQtOC40LTUuNy05LjktNC43Yy00LjYsMy4xLTE3LjgsMTUuNC0yOC4zLDI2LjZjLTEwLjUsMTEuMy0xMS43LDAtMTUuOC0wLjZjLTIuNS0wLjQtNTQuMSw0Mi41LTU4LjcsNDMuMQ0KCUMyMi4zLDIwNS4zLDAsMTk3LjUsMCwxOTcuNVYyNjVsNDAwLTAuMXYtNTMuM0M0MDAsMjExLjYsMzQ0LjgsMTg3LjEsMzMzLjQsMTc5eiIvPg0KPHBhdGggZmlsbD0iIzc4OEY5RSIgZD0iTTAsMjY0Ljl2LTU4LjZjMCwwLDguMiwxLjgsMTEuMyw1LjNjMy4xLDMuNiwyNi4xLTQuMiwyNi4xLDQuN3MwLjUsNC4yLDAuNSwxNC44YzAsMTAuNywyMy00LjIsMzguMS0xOC40DQoJczM0LjktNDkuMiwzNi0zNWMxLDE0LjItMTUuMSwzOS4yLTI0LDU2LjRDNzkuMSwyNTEuNCw1MS43LDI2NSw1MS43LDI2NXpNMCwyNjQuOXoiLz4NCjxwYXRoIGZpbGw9IiM3ODhGOUUiIGQ9Ik0xMDAsMjY1YzAsMCw2Ni43LTEyNS4xLDY4LjMtMTE2LjhzLTYuOCwyOS43LDIuMSwyNi4xYzguOS0zLjYsMTQuNi0xNiwxOC44LTkuNXMxNi4yLDM4LjYsMjEuOSwzMy44DQoJYzUuNy00LjcsMjEuNC0xMy4xLDIyLjQtNi41YzEsNi41LTEsNS4zLTUuNywyMC4yQzIyMy4xLDIyNy4xLDIwMCwyNjUsMjAwLDI2NWgtMTBjMCwwLDYtMjQuOCw4LjYtMzQuOWMyLjYtMTAuMS0zLjctMTktMTItOC4zDQoJcy0yMywyMi0yNCwxNy44cy01LjctMzAuMy0xOC44LTE0LjJjLTEzLDE2LTMzLjgsMzkuNy0zMy44LDM5LjdoLTEwVjI2NXoiLz4NCjxwYXRoIGZpbGw9IiM3ODhGOUUiIGQ9Ik0yNDUsMjY1YzAsMCwxOS44LTU0LjcsMzMuNC02NC4yczUzLjctMjcuOSw0Ni45LTEzLjZjLTYuOCwxNC4yLTExLDM0LjQtMjAuMyw0OS44DQoJYy05LjQsMTUuNC0xOC44LDI2LjEtMTQuMSwxMy42YzQuNy0xMi41LDYuNC0yMy4zLDMuNy0yMy4xQzI3MS4zLDIyOS4xLDI2MCwyNjUsMjYwLDI2NUgyNDV6Ii8+DQo8L3N2Zz4NCg==");
  background-size: cover;
  background-position: center;
}

.community-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1.1;
  margin: 57px 0 0;
}

.community-text {
  font-size: 1.5rem;
  margin: 31px 0 0;
}

.cta-btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.875rem;
  text-transform: uppercase;
  padding: 3px 30px 5px;
  margin: 25px 0 60px;
  border: 0;
  cursor: pointer;
}

.cta-btn:hover, .cta-btn:focus { background: var(--color-accent-hover); }

/* Tabs (Milestones) */

.tabs { margin: 22px 0 5px; }

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  gap: 10px;
}

.tabs__tab {
  /* basis picks how many tabs share a row: 6 here, fewer at each breakpoint */
  flex: 1 1 15%;
  min-width: 0;
  background: #fff;
  border: 0;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 1rem;
  /* buttons don't inherit line-height from body, so set it explicitly */
  line-height: 1.6;
  text-align: center;
  cursor: pointer;
  color: var(--color-text);
}

.tabs__tab:hover { background: var(--color-shade-1); }

.tabs__tab.is-active {
  background: var(--color-accent);
  color: #fff;
}

.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

.tabs__panel h4 {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
}

.panel-rule {
  width: 100%;
  height: 3px;
  background: var(--color-border);
  margin-bottom: 20px;
}

.tabs__panel p { margin: 0 0 20px; }

.tabs__panel a { color: var(--color-link); text-decoration: underline; }

/* Stacked, full-width images (the Oct 2022 milestone) */
.panel-image {
  display: block;
  max-width: 100%;
  /* keeps a tall image from running down the whole page; the width
     scales down with it so the aspect ratio is preserved */
  max-height: 440px;
  width: auto;
  height: auto;
  margin: 20px auto 0;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
  cursor: zoom-in;
}

/* Justified gallery: script.js sizes each image so every row is the same
   height and fills the width, with the width set from the image's own
   aspect ratio. Replaces the original's hand-positioned per-image sizes. */
.panel-images {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* a trailing row that doesn't fill the width sits centred */
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.panel-images img {
  height: auto;
  max-width: 100%;
  box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.4);
}

/* Cumulative-studies chart (Research) */

.chart {
  margin: 20px 0 0;
  padding: 12px 16px 8px;
  border: 1px solid var(--color-shade-2);
  background: #fff;
}

.chart__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

.chart__subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.chart__plot {
  position: relative;
  margin-top: 4px;
}

.chart__plot svg { display: block; width: 100%; touch-action: pan-y; }

.chart__grid { stroke: var(--color-shade-2); stroke-width: 1; }
.chart__axis { stroke: #bbb; stroke-width: 1; }

.chart__tick {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
}

.chart__area { fill: var(--color-accent); fill-opacity: 0.12; }

.chart__line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.chart__total {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
}

.chart__cutoff { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 2 3; }

.chart__cutoff-label {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
}

.chart__crosshair { stroke: var(--color-text-muted); stroke-width: 1; stroke-dasharray: 3 3; }

.chart__marker {
  fill: var(--color-accent);
  stroke: #fff;
  stroke-width: 2;
}

.chart__empty {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
}

.chart__tooltip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  padding: 6px 9px;
  border: 1px solid var(--color-shade-2);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}

.chart__tooltip b { display: block; font-family: var(--font-title); }
.chart__tooltip span { color: var(--color-text-muted); }

@media (max-width: 767px) {
  .chart { padding: 10px 10px 6px; }
}

/* Tables (Calendar / Research) */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  margin-top: 16px;
}

.filters__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}

.filters__field input,
.filters__field select {
  font: inherit;
  font-size: 1rem;
  padding: 6px 8px;
  border: 1px solid #bbb;
  background: #fff;
  color: inherit;
}

.filters__field input:focus,
.filters__field select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

#researchSearch { min-width: 220px; }
#researchAuthor { max-width: 220px; }

.filters__end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 6px;
}

.filters__reset {
  font: inherit;
  padding: 6px 14px;
  border: 1px solid #bbb;
  background: #fff;
  color: inherit;
  cursor: pointer;
}

.filters__reset:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.filters__count {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.filter input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border: 2px solid var(--color-border);
  padding: 5px;
  text-align: left;
  vertical-align: middle;
}

#calendarTable tbody td:nth-child(4) { padding: 10px; }

.data-table thead th {
  background: var(--color-accent);
  color: #fff;
}

.data-table th.is-sortable {
  position: relative;
  padding-right: 20px;
  cursor: pointer;
  user-select: none;
}

.data-table th.is-sortable::after {
  content: "\2195"; /* up-down arrow: sortable but not currently sorted */
  position: absolute;
  right: 5px;
  opacity: 0.5;
}

.data-table th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
.data-table th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }

.data-table th.is-sortable:hover::after { opacity: 1; }

#calendarTable tbody td:nth-child(1),
#calendarTable tbody td:nth-child(2) {
  background: var(--color-shade-1);
}

#researchTable tbody td:nth-child(1) {
  background: var(--color-shade-2);
}

.data-table a { color: var(--color-link); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

.data-table tr.related-vp td { font-weight: 700; }

/* Fullscreen image viewer (milestones) */

.tabs__panel img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox[hidden] { display: none; }

/* keep the scroll-to-top arrow out of the way while the viewer is open */
.lightbox-open .back-to-top { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.lightbox__close:hover,
.lightbox__nav:hover { opacity: 1; }

.lightbox__close:focus,
.lightbox__nav:focus { outline: none; }

.lightbox__close {
  top: 14px;
  right: 18px;
  /* fixed square box, so the focus ring is a neat square rather than
     a tall sliver wrapped around the glyph */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 4rem;
  padding: 0 18px;
}

.lightbox__nav--prev { left: 4px; }
.lightbox__nav--next { right: 4px; }

.lightbox__counter {
  position: absolute;
  top: 22px;
  left: 22px;
  color: #fff;
  font-size: 0.95rem;
  opacity: 0.75;
}

@media (max-width: 575px) {
  .lightbox { padding: 40px 8px; }
  .lightbox__nav { font-size: 2.5rem; padding: 0 8px; }
}

/* Comments (third-party htmlcommentbox widget) — restyle its injected markup
   to match the rest of the page. Its own ads are stripped in script.js. */


#HCB_comment_box h3 {
  font-family: var(--font-title);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 20px 0 8px;
}

#HCB_comment_box #no_comments { font-size: 1.125rem; }

/* Footer / back to top */

.site-footer {
  background: var(--color-footer-bg);
  color: #fff;
  text-align: center;
  padding: 22px 20px;
  font-size: 1rem;
}

.site-footer p { margin: 0; }

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-link);
  border: 0;
  padding: 15px;
  cursor: pointer;
  /* fades in/out rather than popping */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.back-to-top.is-visible {
  opacity: 0.85;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover { opacity: 1; }
.back-to-top svg { width: 100%; height: 100%; fill: #fff; }

/* Responsive — breakpoints and sizes measured from the original site */

@media (max-width: 1199px) {
  .container,
  .site-header__inner { max-width: 940px; }
  .community-title { font-size: 4.5rem; }
}

@media (max-width: 991px) {
  .container,
  .site-header__inner { max-width: 720px; }
  .tabs__tab { flex-basis: 18%; }
}

@media (max-width: 767px) {
  .container,
  .site-header__inner { max-width: 540px; }
  .site-header__inner { padding: 3px 0 7px; }
  .site-header__title { font-size: 1.875rem; }
  .site-nav__list a { padding: 9px 12px; }
  .community-title { font-size: 3.75rem; }
  .section-title--left { font-size: 2.25rem; }
  .lede { font-size: 1rem; }
  .tabs__tab { flex-basis: 22%; }
}

@media (max-width: 575px) {
  .container,
  .site-header__inner { max-width: 340px; }
  .site-header__inner { padding: 10px 0; gap: 8px; }
  .site-header__title { font-size: 1.5rem; }
  .site-nav__list a { padding: 7px 8px; font-size: 0.875rem; }
  .section-title { font-size: 2.25rem; }
  .community-title { font-size: 3rem; }
  .section-title--left { font-size: 1.875rem; }
  .hero-image { max-height: 302px; }
  .tabs__tab { flex-basis: 45%; }
}