@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600;700&display=swap");

:root {
  --mb-cols: 12;
  --mb-bl: 8px;
  --mb-lh: 24px;
  --mb-gutter: 24px;
  --mb-maxw: 1296px;
  --mb-ink: #111315;
  --mb-muted: #565e67;
  --mb-paper: #ffffff;
  --mb-soft: #f4f5f6;
  --mb-line: #d9dde3;
  --mb-accent: #e5252a;
  --mb-col: rgba(229, 37, 42, 0.075);
  --mb-edge: rgba(229, 37, 42, 0.42);
  --mb-base: rgba(0, 134, 126, 0.28);
  --mb-base-min: rgba(0, 134, 126, 0.12);
}

html {
  background: var(--mb-paper) !important;
}

body {
  color: var(--mb-ink) !important;
  background: var(--mb-paper) !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

body,
p,
li,
td,
summary {
  line-height: var(--mb-lh) !important;
}

h1,
h2,
h3,
h4,
.title,
.brand,
.box-title {
  color: var(--mb-ink) !important;
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

h1 {
  font-size: 4rem !important;
  line-height: 64px !important;
  font-weight: 900 !important;
}

.hero h1 {
  font-size: 3rem !important;
  line-height: 48px !important;
}

h2 {
  font-size: 2.5rem !important;
  line-height: 48px !important;
  font-weight: 900 !important;
}

h3 {
  font-size: 1.25rem !important;
  line-height: var(--mb-lh) !important;
  font-weight: 800 !important;
}

p,
li {
  color: var(--mb-muted) !important;
}

a {
  text-underline-offset: 4px;
}

.site-shell {
  background: var(--mb-paper) !important;
}

.site-header {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--mb-line) !important;
  box-shadow: none !important;
}

.site-header .header-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.site-header .header-actions > * {
  flex: 0 0 auto;
}

.desktop-nav a,
.footer-links a,
.header-cta,
.button,
.btn,
button {
  font-family: "IBM Plex Sans", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

.eyebrow,
.kicker,
.meta,
.article-meta,
small {
  color: var(--mb-accent) !important;
  font-family: "IBM Plex Mono", "IBM Plex Sans", monospace !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.container,
.article-layout,
.breadcrumb,
.editorial-media-pack {
  width: min(100% - 32px, var(--mb-maxw)) !important;
  margin-inline: auto !important;
}

.hero,
.article-hero,
.hero-media {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.82)),
    var(--mb-paper) !important;
  border-bottom: 1px solid var(--mb-line) !important;
}

.hero .container,
.article-hero .container,
.hero-media .container {
  display: grid !important;
  grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)) !important;
  column-gap: var(--mb-gutter) !important;
  row-gap: var(--mb-lh) !important;
  padding-block: 96px !important;
  padding-inline: 0 !important;
}

.hero .container > *,
.article-hero .container > *,
.hero-media .container > * {
  grid-column: 1 / 9;
}

.hero img.topic-hero-picto,
.article-hero img.topic-hero-picto {
  grid-column: 10 / 13;
  grid-row: 1 / span 4;
  align-self: start;
  width: 100% !important;
  max-height: 336px;
  object-fit: contain;
  opacity: 0.82;
  filter: grayscale(1);
}

.hero p,
.article-hero p,
.hero-media p,
.article-summary,
.lead {
  max-width: 760px !important;
  font-size: 1.125rem !important;
  line-height: 32px !important;
}

.section {
  padding-block: 72px !important;
  background: var(--mb-paper) !important;
}

.section-heading {
  max-width: 860px !important;
  margin-bottom: 32px !important;
}

.grid {
  gap: var(--mb-gutter) !important;
}

.grid.two,
.grid.three,
.grid.four,
.cards,
.overview-grid,
.feature-grid,
.resource-grid {
  display: grid !important;
  gap: var(--mb-gutter) !important;
}

.card,
.editorial-card,
.overview-panel,
.note-box,
.quote-box,
.source-box,
.listen-box,
.share-box,
.media-box,
.intro-box,
.key-idea,
.avoid-section,
details {
  border: 1px solid var(--mb-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--mb-paper) !important;
}

.overview-panel,
.note-box,
.quote-box,
.source-box,
.listen-box,
.share-box,
.media-box,
.intro-box,
.key-idea,
.avoid-section,
.card,
.editorial-card,
details {
  padding: 24px !important;
}

.overview-panel,
.quote-box,
.key-idea {
  border-left: 4px solid var(--mb-accent) !important;
}

.editorial-card:hover,
.card:hover {
  border-color: var(--mb-accent) !important;
  transform: none !important;
}

.content,
.container.content,
.article-content,
#article-content {
  max-width: none !important;
}

.container.content,
.content.container,
.article-layout {
  display: grid !important;
  grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)) !important;
  column-gap: var(--mb-gutter) !important;
  row-gap: var(--mb-lh) !important;
}

.container.content > *,
.content.container > *,
.article-content,
#article-content {
  grid-column: 2 / 9;
}

.container.content > figure,
.content.container > figure,
.article-inline-visual,
.article-image,
.editorial-media-pack {
  grid-column: 1 / -1 !important;
}

.article-sidebar {
  grid-column: 10 / 13 !important;
}

.editorial-media-pack {
  display: grid !important;
  grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr)) !important;
  column-gap: var(--mb-gutter) !important;
  row-gap: var(--mb-lh) !important;
  padding-block: 72px !important;
  border-block: 1px solid var(--mb-line);
}

.media-pack-copy {
  grid-column: 1 / 6 !important;
}

.media-pack-poster {
  grid-column: 7 / 13 !important;
}

img,
video,
iframe {
  border-radius: 0 !important;
}

pre,
code {
  font-family: "IBM Plex Mono", monospace !important;
}

pre {
  padding: 24px !important;
  border: 1px solid var(--mb-line);
  background: var(--mb-soft);
  overflow-x: auto;
}

.links,
.hero-actions,
.card-actions,
.article-actions,
.share-actions,
.listen-actions {
  gap: 12px !important;
}

.button,
.btn,
.header-cta,
.listen-actions button,
.share-actions button {
  min-height: 40px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.button:not(.secondary),
.btn:not(.secondary),
.header-cta {
  color: #ffffff !important;
  background: var(--mb-ink) !important;
  border-color: var(--mb-ink) !important;
}

.button.secondary,
.btn.secondary {
  color: var(--mb-ink) !important;
  background: var(--mb-paper) !important;
  border-color: var(--mb-line) !important;
}

.mb-grid-toggle {
  display: none;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  color: var(--mb-ink);
  background: #ffffff;
  border: 1px solid var(--mb-line);
  border-radius: 0;
  font: 800 0.75rem/1 "IBM Plex Sans", Arial, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.mb-grid-toggle.is-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 120;
}

@media (min-width: 980px) and (max-width: 1120px) {
  .site-header .mb-grid-toggle {
    position: fixed !important;
    top: 84px;
    right: 16px;
    z-index: 120;
  }
}

.mb-grid-toggle[aria-pressed="true"] {
  color: #ffffff;
  background: var(--mb-accent);
  border-color: var(--mb-accent);
}

.mb-grid-frame {
  position: relative;
}

.mb-grid-guides {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

body.grid-on .mb-grid-guides,
body.grid-on .grid-guides {
  opacity: 1;
}

.mb-guide-cols,
.guide-cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--mb-cols), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
}

.mb-guide-cols span,
.guide-cols span {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--mb-col);
  box-shadow: inset 1px 0 0 var(--mb-edge), inset -1px 0 0 var(--mb-edge);
}

.mb-guide-cols span::before,
.guide-cols span::before {
  content: attr(data-col);
  position: absolute;
  top: var(--mb-bl);
  left: 0;
  right: 0;
  color: var(--mb-accent);
  font: 800 10px/1 "IBM Plex Mono", monospace;
  text-align: center;
}

.mb-guide-rows,
.guide-rows {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--mb-base) 0 1px, transparent 1px var(--mb-lh)),
    repeating-linear-gradient(to bottom, var(--mb-base-min) 0 1px, transparent 1px var(--mb-bl));
}

.footer {
  background: var(--mb-ink) !important;
  border-top: 1px solid var(--mb-line);
}

.footer p,
.footer a {
  color: rgba(255, 255, 255, 0.82) !important;
}

@media (min-width: 720px) {
  .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid.three,
  .cards,
  .overview-grid,
  .feature-grid,
  .resource-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 980px) {
  .mb-grid-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 860px) {
  :root {
    --mb-cols: 6;
    --mb-gutter: 16px;
  }

  h1 {
    font-size: 2.5rem !important;
    line-height: 40px !important;
  }

  .hero h1 {
    font-size: 2.25rem !important;
    line-height: 40px !important;
  }

  h2 {
    font-size: 1.75rem !important;
    line-height: 32px !important;
  }

  .hero .container,
  .article-hero .container,
  .hero-media .container {
    padding-block: 64px !important;
  }

  .hero .container > *,
  .article-hero .container > *,
  .hero-media .container > *,
  .hero img.topic-hero-picto,
  .article-hero img.topic-hero-picto,
  .container.content > *,
  .content.container > *,
  .article-content,
  #article-content,
  .article-sidebar,
  .media-pack-copy,
  .media-pack-poster {
    grid-column: 1 / -1 !important;
  }

  .hero img.topic-hero-picto,
  .article-hero img.topic-hero-picto {
    max-height: 160px;
  }

  .grid.three,
  .grid.four,
  .cards,
  .overview-grid,
  .feature-grid,
  .resource-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  .container,
  .article-layout,
  .breadcrumb,
  .editorial-media-pack {
    width: min(100% - 32px, var(--mb-maxw)) !important;
  }

  .button,
  .btn {
    width: 100%;
  }

  .site-header {
    padding-inline: 16px !important;
    gap: 8px !important;
  }

  .brand-mark img,
  .brand img {
    width: min(170px, 48vw) !important;
  }

  .site-header .header-cta,
  .site-header .dyslexic-toggle {
    display: none !important;
  }

  .site-header .header-actions {
    flex: none !important;
    margin-left: auto !important;
  }
}