@font-face {
  font-family: "National";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("https://www.sfchronicle.com/css/core/fonts/national/NationalWeb-Bold.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/css/core/fonts/national/NationalWeb-Bold.woff")
      format("woff");
}
@font-face {
  font-family: "National";
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("https://www.sfchronicle.com/css/core/fonts/national/NationalWeb-Book.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/css/core/fonts/national/NationalWeb-Book.woff")
      format("woff");
}

@font-face {
  font-family: "Tiempos";
  font-display: swap;
  font-style: normal;
  src: url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-Regular.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-Regular.woff")
      format("woff");
}
@font-face {
  font-family: "Tiempos";
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-RegularItalic.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-RegularItalic.woff")
      format("woff");
}
@font-face {
  font-family: "Tiempos";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-Bold.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-Bold.woff")
      format("woff");
}
@font-face {
  font-family: "Tiempos";
  font-display: swap;
  font-style: italic;
  font-weight: 700;
  src: local("Tiempos Bold Italic"),
    url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-BoldItalic.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/fonts/tiempos/TiemposTextWeb-BoldItalic.woff")
      format("woff");
}
/* @font-face {
  font-family: 'Tiempos Headline';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url("https://www.sfchronicle.com/fonts/tiempos/TiemposHeadlineWeb-Medium.woff2") format("woff2"), url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposHeadlineWeb-Medium.woff") format("woff");
} */
@font-face {
  font-family: "Tiempos Headline";
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src: url("https://www.sfchronicle.com/fonts/tiempos/TiemposHeadlineWeb-Medium.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposHeadlineWeb-Medium.woff")
      format("woff");
}
@font-face {
  font-family: "Tiempos Headline";
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src: url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposHeadlineWeb-Black.woff2")
      format("woff2"),
    url("https://www.sfchronicle.com/css/core/fonts/tiempos/TiemposHeadlineWeb-Black.woff")
      format("woff");
}

/* TYPOGRAPHY STYLES */

:root {
  --hed: "Tiempos Headline", "Baskerville", Georgia, serif;
  --body: "Tiempos", "Baskerville", Georgia, serif;
  --secondary: "National", Arial, Helvetica, sans-serif;
}

.hed {
  font-family: var(--hed);
  line-height: 1.2;
  font-size: 3.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.deck {
  font-family: var(--secondary);
  font-size: calc(1.25rem + 1px);
  line-height: 1.2;
  font-weight: 400;
}

.byline {
  font-family: var(--secondary);
  font-size: 1rem;
}

.subhead,
.subhead-bold {
  font-family: var(--hed);
  font-size: 2.75rem;
  line-height: 1.4;
}

.hed,
.subhead,
.subhead-sm {
  font-weight: 500;
}
.hed-heavy,
.subhead-bold {
  font-weight: 900;
}

.hed-lg {
  font-size: 4rem;
}

.hed-sm {
  font-size: 3rem;
}

.subhead-sm {
  font-family: var(--hed);
  line-height: 1.2;
  font-size: 2rem;
}

.subhead-sans,
.subhead-xs {
  font-family: var(--secondary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.serif-copy,
.body-copy {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
}

.sans-copy,
.secondary-copy {
  font-family: var(--secondary);
  font-size: calc(1rem + 1px);
  line-height: 1.25;
}

.lead-in {
  font-family: var(--secondary);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}

.label {
  font-family: var(--secondary);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #909090;
}

.caption {
  font-family: var(--secondary);
  font-size: 0.875rem;
  line-height: 1.25;
}

.credit {
  color: #909090;
  font-size: 0.875rem;
  font-family: var(--secondary);
}

.ui-text {
  font-family: var(--secondary);
  font-size: 0.875rem;
  color: #909090;
}

.ui-text a {
  color: #909090;
}

.note-text {
  font-family: var(--secondary);
  font-size: 0.875rem;
}

.dropcap:first-letter {
  font-family: var(--hed);
  font-size: 7rem;
  float: left;
  line-height: 0.75;
  margin: 1rem 0.5rem 0 0.25rem;
}

.recirc-label {
  font-family: var(--secondary);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(1.0625rem + 1px);
  font-variant: lining-nums;
}

.party-label {
  font-size: 0.75rem;
}

.short-description {
  font-size: calc(1rem - 1px);
}

.back-to-top-text {
  font-size: 30px;

  p {
    font-size: 0.875rem;
  }
}

@media (max-width: 640px) {
  .hed {
    font-size: 2.5rem;
  }
  .deck {
    font-size: 1.25rem;
    text-align: left;
  }
  .subhead,
  .subhead-bold {
    font-size: 1.75rem;
  }
  .hed-lg {
    font-size: 3rem;
  }
  .hed-sm {
    font-size: 2rem;
  }
  .subhead-sm {
    font-size: 1.5rem !important;
  }
  .subhead-sans,
  .subhead-xs {
    font-size: 1.25rem;
  }
  .note-text {
    font-size: calc(0.875rem - 1px);
  }
  .serif-copy,
  .body-copy {
    font-size: 1rem;
  }
  .sans-copy,
  .secondary-copy {
    font-size: 1rem;
  }
  .lead-in {
    font-size: 1rem;
  }
  .label {
    font-size: 0.875rem;
  }
  .dropcap:first-letter {
    font-size: 6rem;
  }
  .party-label {
    font-size: 0.6875rem;
  }
  .short-description {
    font-size: 0.875rem;
  }
  .back-to-top-text {
    font-size: 35px;
  }
}