/* Homepage grids kept below the first viewport and loaded without render blocking. */
.corpus-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.corpus-card { display: flex; min-height: 250px; padding: 22px; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s, color .2s, transform .2s; }
.corpus-card:hover { background: var(--night); color: #fff; transform: translateY(-3px); }
.corpus-card:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.corpus-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5f625d; }
.corpus-card-top b { color: var(--coral); font-size: 9px; }
.corpus-card-top em { font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.corpus-card > strong { max-width: 250px; margin-top: 38px; font-family: var(--font-display); font-size: 21px; line-height: 1.18; }
.corpus-card > span:not(.corpus-card-top) { margin-top: 14px; color: #696c68; font-size: 11px; line-height: 1.62; }
.corpus-card:hover > span { color: #bcc5ca; }
.corpus-card > small { margin-top: auto; padding-top: 22px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.editorial-section { padding-top: 28px; padding-bottom: 118px; }
.editorial-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.editorial-card { display: flex; min-height: 245px; padding: 25px; flex-direction: column; border: 1px solid var(--line); border-right: 0; transition: background .2s, color .2s; }
.editorial-card:last-child { border-right: 1px solid var(--line); }
.editorial-card:hover { background: #ebe6db; }
.editorial-card:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.editorial-card p { margin: 48px 0 10px; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.editorial-card strong { display: block; max-width: 285px; font-family: var(--font-display); font-size: 17px; line-height: 1.4; }
.editorial-card small { margin-top: auto; padding-top: 22px; color: var(--coral); font-size: 9px; font-weight: 800; }

@media (max-width: 980px) {
  .corpus-grid, .editorial-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial-card:nth-child(2) { border-right: 1px solid var(--line); }
  .editorial-card:nth-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 700px) {
  .corpus-grid, .editorial-grid { grid-template-columns: 1fr; }
  .editorial-card { min-height: 210px; border-right: 1px solid var(--line); border-bottom: 0; }
  .editorial-card:nth-child(-n+2) { border-bottom: 0; }
  .editorial-card:last-child { border-bottom: 1px solid var(--line); }
  .editorial-card p { margin-top: 34px; }
}