/* City of Boston brand tokens, from unfairly.ai/brand-guidelines/boston (checked 2026-10-30).
   Sizes, spacing and components were measured on https://www.boston.gov/ (Page anatomy measured from computed styles on boston.gov at 1440 and 390 (2026-10-30); tokens from the open-source Fleet stylesheets; rules from the boston.gov Brand Guidelines and Writing guide.).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name City of Boston's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F3F3F3;
  --color-ink: #091F2F;
  --color-ink-muted: #58585B;
  --color-accent: #1871BD;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #FB4D42;
  --color-night: #091F2F;
  --color-on-night: #FFFFFF;
  --color-white: #FFFFFF;
  --color-charles-blue: #091F2F;
  --color-optimistic-blue: #1871BD;
  --color-freedom-trail-red: #FB4D42;
  --color-freedom-red-dark: #D22D23;
  --color-supporting-blue-near-black: #061622;
  --color-supporting-blue-footer: #0C2639;
  --color-supporting-blue-desaturated: #45789C;
  --color-supporting-blue-bright: #51ACFF;
  --color-optimistic-blue-light-screen-reader: #28A7DF;
  --color-optimistic-blue-hover: #175182;
  --color-hero-alt-blue: #2D82CF;
  --color-body-text-gray: #58585B;
  --color-supporting-gray-rule: #D2D2D2;
  --color-supporting-gray-border: #E0E0E0;
  --color-supporting-gray-ground: #F2F2F2;
  --color-fleet-gray-000: #F3F3F3;
  --color-fleet-gray-200: #C8C8C8;
  --color-fleet-gray-300: #828282;
  --color-yellow: #FCB61A;
  --color-black: #000000;
  --color-event-ribbon-blue: #288BE4;
  --color-news-ribbon-stroke: #ECECEC;
  --color-guide-tile-underlay: #69A3D4;
  --color-button-primary-fill: #1871BD;
  --color-button-primary-text: #FFFFFF;
  --color-resource-card-fill: #FFFFFF;
  --color-news-card-fill: #FFFFFF;
  --color-video-card-fill: #FFFFFF;
  --color-event-card-fill: #F2F2F2;
  --color-person-card-fill: #F3F3F3;
  --color-text-input-fill: #FFFFFF;
  --font-display: Montserrat, Montserrat, Arial, sans-serif;
  --font-body: Lora, Lora, Georgia, serif;
  --font-mono: Montserrat, Montserrat, Arial, sans-serif;
  --page-margin: 120px;
  --section-padding: 56px;
  --container-max: 1200px;
  --hero-text-max: 1200px;
  --card-gap: 28px;
  --nav-height: 65px;
  --grid-gutter: 28px;
  --grid-columns: 4;
  --text-display-xl-size: 90px;
  --text-display-xl-line: 1;
  --text-display-xl-weight: 700;
  --text-display-xl-tracking: -1px;
  --text-display-l-size: 45px;
  --text-display-l-line: 1;
  --text-display-l-weight: 700;
  --text-display-l-tracking: -1px;
  --text-kicker-size: 35px;
  --text-kicker-line: 1.32;
  --text-kicker-weight: 400;
  --text-lead-size: 30px;
  --text-lead-line: 1.5;
  --text-lead-weight: 400;
  --text-title-xl-size: 30px;
  --text-title-xl-line: 1;
  --text-title-xl-weight: 700;
  --text-title-l-size: 30px;
  --text-title-l-line: 1.08;
  --text-title-l-weight: 600;
  --text-title-l-tracking: 1px;
  --text-title-m-size: 28px;
  --text-title-m-line: 1;
  --text-title-m-weight: 700;
  --text-card-title-size: 25px;
  --text-card-title-line: 1.32;
  --text-card-title-weight: 400;
  --text-news-title-size: 22px;
  --text-news-title-line: 1.27;
  --text-news-title-weight: 400;
  --text-news-title-tracking: 0.4px;
  --text-body-size: 18px;
  --text-body-line: 2.17;
  --text-body-weight: 400;
  --text-body-s-size: 18px;
  --text-body-s-line: 1.5;
  --text-body-s-weight: 400;
  --text-caption-size: 16px;
  --text-caption-line: 1.5;
  --text-caption-weight: 400;
  --text-date-size: 18px;
  --text-date-line: 1;
  --text-date-weight: 700;
  --text-label-l-size: 18px;
  --text-label-l-line: 1.1;
  --text-label-l-weight: 400;
  --text-button-size: 16px;
  --text-button-line: 1.125;
  --text-button-weight: 700;
  --text-button-tracking: 1px;
  --text-label-size: 16px;
  --text-label-line: 1.4;
  --text-label-weight: 700;
  --text-label-tracking: 1px;
  --text-meta-size: 16px;
  --text-meta-line: 1.22;
  --text-meta-weight: 400;
  --text-nav-size: 14px;
  --text-nav-line: 4.64;
  --text-nav-weight: 400;
  --text-nav-tracking: 1px;
  --text-footer-size: 14px;
  --text-footer-line: 1;
  --text-footer-weight: 500;
  --text-footer-tracking: 1px;
  --text-banner-size: 13.32px;
  --text-banner-line: 1.3;
  --text-banner-weight: 400;
  --radius-button-primary: 0px;
  --radius-resource-card: 0px;
  --radius-news-card: 0px;
  --radius-event-card: 0px;
  --radius-person-card: 0px;
  --radius-text-input: 0px;
  --ease-button-hover: none (instant);
  --ease-card-hover: none (instant);
  --ease-menu: opacity 0.5s;
  --ease-language-cycle: not published;
  --icon-experiential: 100px;
  --icon-small-circular: 65px;
}
/* Phone values measured at 390px; City of Boston's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 39px;
    --section-padding: 35px;
    --text-display-xl-size: 40px;
    --text-display-l-size: 20px;
    --text-kicker-size: 18px;
    --text-lead-size: 18px;
    --text-title-xl-size: 20px;
    --text-title-l-size: 18px;
    --text-title-m-size: 21.45px;
    --text-card-title-size: 18px;
    --text-news-title-size: 19.56px;
    --text-body-size: 16px;
    --text-body-s-size: 15px;
    --text-caption-size: 14px;
    --text-date-size: 16px;
    --text-label-l-size: 16px;
    --text-button-size: 14px;
    --text-label-size: 14px;
    --text-meta-size: 14.2px;
    --text-nav-size: 12px;
    --text-footer-size: 12px;
    --text-banner-size: 11.84px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 62px; padding: 0 22.5px; border-radius: 0px;
  background: #1871BD; color: #FFFFFF;
  font: 700 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #FB4D42; color: #FFFFFF; } /* published */
.button-primary:disabled { background-color: #E0E0E0; color: #828282; } /* published */