.codex-grid {
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0 0 88px;
  max-width:920px;
  margin:0 auto;
}

.codex-card {
  display:grid;
  grid-template-columns:86px minmax(0, 1fr);
  gap:0 22px;
  align-items:start;
  text-decoration:none;
  color:inherit;
  min-width:0;
  padding:18px 0;
  border-bottom:1px solid rgba(200,195,176,.28);
}

.codex-card-featured {
  grid-column:auto;
}

.codex-card-media {
  display:block;
  width:86px;
  height:86px;
  grid-row:1 / span 4;
  background:var(--solar-corona);
  overflow:hidden;
  margin:0;
}

.codex-card-featured .codex-card-media {
  width:86px;
  height:86px;
}

.codex-card-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}

.codex-card:hover .codex-card-media img {
  transform:scale(1.035);
}

.codex-card-kicker,
.codex-article-kicker,
.codex-back,
.codex-related-label {
  font-size:8px;
  font-weight:300;
  letter-spacing:.46em;
  text-transform:uppercase;
  color:var(--ancient-gold);
}

.codex-card-title {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:23px;
  font-weight:300;
  line-height:1.12;
  color:var(--void);
  margin:6px 0 7px;
}

.codex-card-excerpt {
  display:block;
  font-size:12px;
  font-weight:300;
  line-height:1.62;
  letter-spacing:.04em;
  color:var(--ash);
  margin-bottom:10px;
  max-width:680px;
}

.codex-card-read {
  font-size:9px;
  font-weight:300;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--ancient-stone);
  transition:color .25s;
}

.codex-card:hover .codex-card-read {
  color:var(--ancient-gold);
}

.codex-article {
  max-width:820px;
  margin:0 auto;
  padding:48px 32px 92px;
}

.codex-back {
  display:inline-flex;
  text-decoration:none;
  color:var(--ash);
  margin-bottom:34px;
  transition:color .25s;
}

.codex-back:hover {
  color:var(--void);
}

.codex-article-kicker {
  margin-bottom:16px;
}

.codex-article h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px, 5vw, 58px);
  font-weight:300;
  line-height:1.02;
  color:var(--void);
  margin-bottom:16px;
}

.codex-deck {
  font-size:14px;
  font-weight:300;
  line-height:1.85;
  letter-spacing:.05em;
  color:var(--ancient-stone);
  max-width:680px;
  margin-bottom:18px;
}

.codex-meta {
  font-size:9px;
  font-weight:300;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ash);
  padding-bottom:24px;
  border-bottom:1px solid rgba(200,195,176,.3);
  margin-bottom:30px;
}

.codex-hero-image {
  width:min(280px, 100%);
  margin:0 0 34px;
  background:var(--solar-corona);
}

.codex-hero-image img {
  display:block;
  width:100%;
  max-height:220px;
  object-fit:contain;
}

.codex-hero-image figcaption {
  padding:10px 0 0;
  font-size:9px;
  font-weight:300;
  letter-spacing:.18em;
  color:var(--ash);
}

.codex-body {
  font-size:14px;
  font-weight:300;
  line-height:1.9;
  letter-spacing:.035em;
  color:var(--ancient-stone);
}

.codex-body h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:30px;
  font-weight:300;
  line-height:1.12;
  color:var(--void);
  margin:42px 0 14px;
}

.codex-body h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-weight:300;
  line-height:1.18;
  color:var(--void);
  margin:28px 0 10px;
}

.codex-body p {
  margin-bottom:18px;
}

.codex-body ul {
  padding-left:18px;
  margin:0 0 20px;
}

.codex-body li {
  margin-bottom:8px;
}

.codex-body a {
  color:var(--ancient-gold);
  border-bottom:1px solid rgba(201,168,76,.35);
  text-decoration:none;
}

.codex-note {
  border-left:1px solid var(--ancient-gold);
  padding-left:18px;
  margin:28px 0;
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-style:italic;
  line-height:1.45;
  color:var(--void);
}

.codex-related {
  margin-top:54px;
  padding-top:26px;
  border-top:1px solid rgba(200,195,176,.3);
}

.codex-related-title {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:24px;
  font-weight:300;
  color:var(--void);
  margin:8px 0 4px;
  text-decoration:none;
}

.codex-related-text {
  font-size:12px;
  font-weight:300;
  line-height:1.75;
  letter-spacing:.04em;
  color:var(--ash);
}

@media(max-width:900px) {
  .codex-grid {
    max-width:100%;
  }
}

@media(max-width:640px) {
  .codex-grid {
    gap:0;
  }
  .codex-card {
    grid-template-columns:64px minmax(0, 1fr);
    gap:0 14px;
    padding:16px 0;
  }
  .codex-card-media,
  .codex-card-featured .codex-card-media {
    width:64px;
    height:64px;
  }
  .codex-card-title {
    font-size:20px;
  }
  .codex-card-excerpt {
    font-size:11px;
    line-height:1.55;
  }
  .codex-article {
    padding:34px 16px 76px;
  }
  .codex-hero-image {
    width:180px;
  }
  .codex-hero-image img {
    max-height:170px;
  }
}