@font-face {
  font-family: EconomistSerif;
  src: url('https://cdn.design-system.economist.com/assets/7.5.1/common/static/fonts/economist-serif-roman.woff2');
  font-style: normal;
}

@font-face {
  font-family: EconomistSerif;
  src: url('https://cdn.design-system.economist.com/assets/7.5.1/common/static/fonts/economist-serif-italic.woff2');
  font-style: italic;
}

@font-face {
  font-family: EconomistSans;
  src: url('https://cdn.design-system.economist.com/assets/7.5.1/common/static/fonts/economist-sans-roman.woff2');
  font-style: normal;
}

@font-face {
  font-family: EconomistSans;
  src: url('https://cdn.design-system.economist.com/assets/7.5.1/common/static/fonts/economist-sans-italic.woff2');
  font-style: italic;
}

:root {
  --ds-color-economist-red: hsl(2, 91%, 47%);

  --ds-color-los-angeles-25: hsl(51, 22%, 25%);
  --ds-color-los-angeles-95: hsl(51, 22%, 95%);

  --ds-color-bg-accent: var(--ds-color-los-angeles-95);

  --ds-color-london-5: hsl(0, 0%, 5%);
  --ds-color-london-20: hsl(0, 0%, 20%);
  --ds-color-london-35: hsl(0, 0%, 35%);
  --ds-color-london-85: hsl(0, 0%, 85%);
  --ds-color-london-95: hsl(0, 0%, 95%);
  --ds-color-london-100: white;

  --ds-border-rule: 0.0625rem solid var(--ds-color-london-85);
  --ds-border-rule--inverse: 0.0625rem solid var(--ds-color-london-35);

  --ds-color-base: white;
  --ds-color-text: var(--ds-color-london-5);

  --ds-grid-gap: 0.75rem;
  --ds-grid-gutter: calc(var(--ds-grid-gap) * 2);

  --ds-type-system-serif: 'EconomistSerif', 'Hoefler Text', Georgia,
    TimesNewRoman, 'Times New Roman', Times, serif;
  --ds-type-system-sans: 'EconomistSans', 'Roboto Condensed', Seravek,
    'Arial Nova', 'Nimbus Sans', Arial, sans-serif;

  --type-size-large: 46px;
  --leading-large: 55px;

  --type-size-small: 20px;
  --leading-small: 28px;

  --header-spacing: 4rem;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --ds-color-bg-accent: var(--ds-color-los-angeles-25);
    --ds-color-text: var(--ds-color-london-95);
    --ds-color-base: var(--ds-color-london-5);
  }
} */

body {
  margin: 0;
  padding: 0;
  color: var(--ds-color-text);
  background-color: var(--ds-color-base);
}

h1 {
  font-weight: 400;
  font-size: var(--type-size-large);
  line-height: var(--leading-large);
  font-family: var(--ds-type-system-serif);
}

p,
h3,
ol li::marker {
  font-family: var(--ds-type-system-serif);
  font-size: var(--type-size-small);
  line-height: var(--leading-small);
}

h3 {
  margin-top: 2rem;
  font-family: var(--ds-type-system-sans);
  font-weight: bold;
}

ol {
  padding-inline-start: 1.5rem;
}

.container {
  max-width: min(700px, calc(100vw - var(--ds-grid-gutter) * 2));
  margin: 0 auto;
}

.top-header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 1rem 0;
}

main {
  margin: 2rem 0 0;
}

.article-header {
  background: var(--ds-color-bg-accent);
  padding: var(--header-spacing) 0;
  margin-bottom: var(--header-spacing);
}

.container ol {
  list-style: decimal;
}
.container ul {
  list-style: initial;
}

/* masthead */
.ds-masthead {
  background: transparent;
  padding: 1rem 0 2rem;
}
.ds-layout-masthead {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 89.5rem;
  padding: 0 var(--ds-grid-gap);
  position: relative;
}
.ds-masthead-logo {
  display: none;
}
.ds-masthead-monogram {
  display: inline-block;
  height: 4rem;
  vertical-align: top;
  width: 4rem;
}
.ds-masthead-nav {
  align-items: center;
  border-bottom: var(--ds-border-rule);
  border-top: var(--ds-border-rule);
  display: flex;
  flex: 1;
  flex-direction: row-reverse;
  margin: 0 0 0 1rem;
  width: 100%;
}
.ds-masthead--secondary .ds-masthead-nav {
  flex-direction: row;
}
.ds-masthead-nav-beta {
  display: flex;
  margin: 0 0 0 auto;
}

@media (min-width: 22.5rem) {
  .ds-masthead {
    padding-top: 1.25rem;
  }
  .ds-masthead-nav {
    flex-direction: row;
  }
}
@media (min-width: 37.5rem) {
  .ds-masthead {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    padding-top: 1.25rem;
  }
  .ds-layout-masthead {
    padding-left: var(--ds-grid-gutter);
    padding-right: var(--ds-grid-gutter);
  }
  .ds-masthead-logo {
    display: inline-block;
    height: 4rem;
    vertical-align: top;
    width: 8rem;
  }
  .ds-masthead-monogram {
    display: none;
  }
}
@media (min-width: 67.9375rem) {
  .ds-masthead {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
  }
}

/* footer */
menu,
ol,
ul {
  list-style: none;
}

.ds-footer-secondary {
  background-color: var(--ds-color-london-20);
  color: var(--ds-color-london-100);
  padding: 2rem var(--ds-grid-gap) 0.3125rem;
  -webkit-text-size-adjust: 100%;
  margin-top: 3rem;
}

.ds-footer-secondary-cols-alpha {
  border-bottom: var(--ds-border-rule--inverse);
  margin: 0 auto 1.5rem;
  max-width: 89.5rem;
  padding: 0 0 0.625rem;
}
.ds-footer__link-list {
  padding: 0;
}

.ds-navigation-link {
  align-items: center;
  display: inline-flex;
  font-family: var(--ds-type-system-sans);
  font-size: var(--ds-type-scale-1);
  font-weight: 400;
  line-height: var(--ds-type-leading-border-link);
  text-decoration: none;
}
.ds-navigation-link--inverse.ds-navigation-link--secondary {
  font-size: var(--ds-type-scale-0);
}
.ds-footer-secondary-cols-alpha__lead .ds-navigation-link {
  display: inline-block;
  margin: 0 0 1.375rem;
}
.ds-navigation-link--inverse.ds-navigation-link--secondary.ds-navigation-link--major {
  font-weight: 700;
}
.ds-navigation-link span {
  border-bottom: 0.125rem solid transparent;
  color: var(--ds-color-london-5);
  transition: all var(--ds-interactions-transition);
  will-change: border-color, color;
}

.ds-footer-secondary-cols-omega {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 89.5rem;
}
.ds-footer-secondary-cols-omega ul {
  display: flex;
  flex-wrap: wrap;
}
.ds-footer-secondary-cols-omega .ds-navigation-link {
  margin: 0 var(--ds-grid-gap) 0.6875rem 0;
}

.ds-footer-secondary__copyright {
  color: var(--ds-color-london-70);
  display: block;
  font-family: var(--ds-type-system-sans);
  font-size: var(--ds-type-scale--1);
  font-weight: 400;
  line-height: var(--ds-type-leading-lower);
  margin: 0 0 0.6875rem;
}

@media (min-width: 22.5rem) {
  .ds-footer-secondary-cols-alpha__lead .ds-footer__link-list {
    column-gap: var(--ds-grid-gutter);
    column-count: 2;
  }

  .ds-navigation-link--inverse span {
    color: var(--ds-color-london-100);
  }
}

@media (min-width: 37.5rem) {
  .ds-footer-secondary {
    padding-left: var(--ds-grid-gutter);
    padding-right: var(--ds-grid-gutter);
  }

  .ds-footer-secondary-cols-alpha__lead .ds-footer__link-list {
    column-count: 3;
  }

  .ds-navigation-link--inverse.ds-navigation-link--secondary span {
    border-bottom-width: 0.0625rem;
    color: var(--ds-color-london-85);
  }
}

@media (min-width: 60rem) {
  .ds-footer-secondary-cols-alpha {
    padding-bottom: 0.625rem;
  }
  .ds-footer-secondary-cols-alpha__lead {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .ds-footer-secondary-cols-alpha__lead .ds-footer__link-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
  }

  .ds-footer__link-list li {
    margin-right: var(--ds-grid-gutter);
  }
  .ds-navigation-link--inverse.ds-navigation-link--secondary.ds-navigation-link--major
    span {
    color: var(--ds-color-london-100);
  }
  .ds-footer__link-list li {
    margin-right: var(--ds-grid-gutter);
  }
}