#editorial-stories,
#editorial-stories * {
  box-sizing: border-box;
}

body #banner {
  box-sizing: border-box;
}

#editorial-stories {
  clear: both;
  width: calc(100% - 24px);
  max-width: 778px;
  margin: 29px auto 32px;
  padding: 12px 0 0;
  color: #333333;
  background: transparent;
  border-top: 3px solid #000066;
  font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
  text-align: left;
}

#editorial-stories .home-stories-heading {
  margin-bottom: 18px;
  text-align: center;
}

#editorial-stories .home-stories-label,
#editorial-stories .home-story-category {
  margin: 0 0 8px;
  color: #333399;
  font: 700 11px/1.5 Tahoma, Arial, sans-serif;
}

#editorial-stories h2 {
  margin: 0 0 12px;
  color: #990000;
  font: 700 16px Verdana, Arial, Helvetica, sans-serif;
}

#editorial-stories .home-stories-heading > p:last-child {
  max-width: 630px;
  margin: 0 auto;
  color: #333333;
  font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

#editorial-stories .home-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#editorial-stories .home-stories-grid > li {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#editorial-stories .home-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 12px;
  background: #F5F5F5;
  border: 2px solid #333333;
}

#editorial-stories h3 {
  margin: 0 0 12px;
  color: #333333;
  font: 700 14px/1.4 Verdana, Arial, Helvetica, sans-serif;
  overflow-wrap: anywhere;
}

#editorial-stories h3 a,
#editorial-stories h3 a:visited {
  color: #9900FF;
  text-decoration: none;
}

#editorial-stories h3 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

#editorial-stories h3 a:hover,
#editorial-stories .home-story-card:hover .home-story-read {
  color: #FF6600;
}

#editorial-stories a:focus-visible {
  outline: 2px solid #000066;
  outline-offset: 3px;
}

#editorial-stories h3 a:focus-visible {
  outline: none;
}

#editorial-stories h3 a:focus-visible::after {
  outline: 2px solid #000066;
  outline-offset: 3px;
}

#editorial-stories .home-story-date {
  margin: 0 0 12px;
  color: #666666;
  font: 10px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

#editorial-stories .home-story-description {
  margin: 0 0 16px;
  color: #333333;
  font: 12px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

#editorial-stories .home-story-read {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  color: #9900FF;
  font: 700 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
}

#editorial-stories .home-stories-footer {
  margin-top: 18px;
  text-align: center;
}

#editorial-stories .home-stories-button,
#editorial-stories .home-stories-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 36px;
  padding: 8px 18px;
  color: #333399;
  background: #CCCCCC;
  border: 1px solid #000000;
  font: 700 12px/1.5 Tahoma, Arial, sans-serif;
  text-decoration: none;
}

#editorial-stories .home-stories-button:hover {
  color: #fff;
  background: #FF6600;
}

@media (max-width: 850px) {
  #editorial-stories {
    width: calc(100% - 24px);
    padding: 12px 0 0;
  }

  #editorial-stories .home-stories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Let the archived home template fit the same viewport as the new cards. */
  body #banner {
    width: auto;
    height: auto;
    box-sizing: border-box;
  }

  #banner img {
    max-width: calc(100% - 20px);
    height: auto;
  }

  body #bar {
    display: flow-root;
    width: auto;
    margin: 0 12px;
  }

  #bar #nav > li {
    width: 25%;
  }

  #bar #nav > li > a {
    width: auto;
    min-height: 36px;
    padding: 7px 6px;
    box-sizing: border-box;
  }

  body #wrapper {
    display: flow-root;
    width: calc(100% - 24px);
    margin: 24px auto;
  }

  #wrapper #primary,
  #wrapper #secondary {
    float: none;
    width: 100%;
    box-sizing: border-box;
  }

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

  #secondary {
    margin-top: 20px;
  }
}

@media (max-width: 600px) {
  #bar #nav > li {
    width: 50%;
  }

  #editorial-stories {
    width: calc(100% - 24px);
    padding: 12px 0 0;
    margin-top: 29px;
  }

  #editorial-stories .home-stories-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 12px;
  }
}