@font-face {
  font-family: montserrat-fallback;
  src: local('Helvetica Neue'), local('Arial');
  size-adjust: 113%;
  ascent-override: 86%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: trade-gothic-fallback;
  src: local('Avenir Next Condensed Bold'), local('Avenir Next Condensed'), local('Roboto Condensed'), local('Arial Narrow'), local('Impact');
  font-stretch: condensed;
  size-adjust: 72%;
  ascent-override: 98%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-role-surface);
  color: var(--color-role-text);
  font-family: var(--font-family-base-body);
  font-size: var(--font-role-body-size);
  line-height: var(--font-role-body-leading);
}

body.appear {
  display: block;
}

header {
  height: var(--size-role-nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.title-1,
.title-2,
.title-3 {
  margin-top: var(--space-role-heading-above);
  margin-bottom: var(--space-role-heading-below);
  color: var(--color-role-text-heading);
  font-family: var(--font-family-base-display);
  font-weight: var(--font-weight-base-bold);
  line-height: var(--font-role-display-leading);
  letter-spacing: var(--letter-spacing-base-caps);
  text-transform: uppercase;
  overflow-wrap: break-word;
  scroll-margin: var(--space-role-block-gap);
}

/* The two smallest steps sit closer to the copy they introduce. */
h5,
h6,
.title-2,
.title-3 {
  margin-top: var(--space-role-heading-above-tight);
  margin-bottom: var(--space-role-heading-below-tight);
}

h1,
.display-1 { font-size: var(--font-role-display-1-size); }

h2,
.display-2 { font-size: var(--font-role-display-2-size); }

h3,
.display-3 { font-size: var(--font-role-display-3-size); }

h4,
.title-1 { font-size: var(--font-role-title-1-size); }

h5,
.title-2 { font-size: var(--font-role-title-2-size); }

h6,
.title-3 { font-size: var(--font-role-title-3-size); }

main h1 {
  max-width: var(--size-role-title-measure);
  margin-inline: auto;
  color: var(--color-role-accent-editorial);
  text-align: center;
  text-wrap: balance;
}

main > .section > div > h2 {
  color: var(--color-role-accent-editorial);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: var(--space-role-para);
}

/* Default-content lists only — a block brings its own list rhythm. */
main > .section > div > ul > li,
main > .section > div > ol > li {
  margin-bottom: var(--space-base-15);
}

main > .section > div > :is(p, ul, ol, dl, blockquote) :is(b, strong) {
  font-weight: var(--font-weight-base-semibold);
}

main > div {
  margin: var(--space-role-block-gap) var(--space-role-gutter);
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--color-role-link);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:hover {
  color: var(--color-role-link-hover);
  text-decoration: underline;
}

main > .section > div > ul a:any-link,
main > .section > div > ol a:any-link,
main > .section > div > p:not(.button-wrapper) a:any-link {
  font-weight: var(--font-weight-base-semibold);
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

/* sprite glyph (scripts/icons.js) and the per-file fallback for a token the sprite lacks */
.icon svg,
.icon img {
  height: 100%;
  width: 100%;
}

/* the injected symbol sheet: it defines glyphs, it never renders one */
.icon-sprite {
  display: none;
}

/* sections */
main > .section {
  margin: var(--space-role-block-gap) 0;
}

main > .section > div {
  max-width: var(--size-role-content-width);
  margin: auto;
  padding: 0 var(--space-role-gutter);
}

main > .section > div + div {
  margin-top: var(--space-role-block-gap);
}

main > .section:first-of-type {
  margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--color-role-surface-muted);
  margin: 0;
  padding: var(--space-role-block-gap) 0;
}