.codex-grid {
  display:flex;
  flex-direction:column;
  gap:14px;
  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;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
  transition:var(--surface-transition);
}

.codex-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--surface-shadow-hover);
}

.codex-card:active {
  transform:translateY(-1px);
  box-shadow:var(--surface-shadow-active);
}

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

.codex-card-media {
  display:block;
  width:86px;
  height:86px;
  grid-row:1 / span 4;
  background:var(--surface-bg);
  overflow:hidden;
  margin:0;
  border-radius:var(--surface-radius-sm);
  box-shadow:var(--surface-shadow-soft);
}

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

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

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

.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-featured-story {
  max-width:820px;
  margin:0 auto 28px;
  padding:24px;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
  scroll-margin-top:calc(var(--nav-h) + 24px);
}

.codex-featured-story h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(34px, 5vw, 58px);
  font-weight:300;
  line-height:1.02;
  color:var(--void);
  margin:12px 0 18px;
}

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

.codex-featured-story-body p {
  margin-bottom:16px;
}

.codex-featured-story-link {
  display:inline-flex;
  margin-top:4px;
  font-size:9px;
  font-weight:300;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--ancient-stone);
  text-decoration:none;
  transition:color .25s;
}

.codex-featured-story-link:hover {
  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:0;
  margin-bottom:30px;
}

.codex-quick-answer {
  max-width:680px;
  margin:0 0 30px;
  padding:20px;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

.codex-quick-answer-label {
  font-size:8px;
  font-weight:300;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ancient-gold);
  margin-bottom:10px;
}

.codex-quick-answer p {
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-size:23px;
  font-weight:300;
  line-height:1.42;
  color:var(--void);
}

.codex-hero-image {
  width:min(220px, 100%);
  margin:0 0 34px;
  background:transparent;
}

.codex-hero-image img {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:cover;
}

.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);
  text-decoration:none;
}

.codex-evidence {
  margin:46px 0 8px;
  padding:26px;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

.codex-evidence-label {
  font-size:8px;
  font-weight:300;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--ancient-gold);
  margin-bottom:10px;
}

.codex-evidence h2 {
  margin-top:0;
}

.codex-evidence-item {
  margin:22px 0 26px;
}

.codex-evidence-item h3 {
  font-size:24px;
  margin:0 0 10px;
}

.codex-evidence-item p {
  margin-bottom:14px;
}

.codex-note {
  padding:18px;
  margin:28px 0;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
  font-family:'Cormorant Garamond',serif;
  font-size:22px;
  font-style:italic;
  line-height:1.45;
  color:var(--void);
}

.codex-related {
  margin-top:54px;
  padding:22px;
  background:var(--surface-bg);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

.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:12px;
  }
  .codex-card {
    grid-template-columns:64px minmax(0, 1fr);
    gap:0 14px;
    padding:16px;
  }
  .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-featured-story {
    margin-bottom:20px;
    padding-bottom:26px;
  }
  .codex-featured-story h2 {
    font-size:34px;
  }
  .codex-featured-story-body {
    font-size:12px;
    line-height:1.78;
  }
  .codex-article {
    padding:34px 16px 76px;
  }
  .codex-hero-image {
    width:180px;
  }
  .codex-hero-image img {
    max-height:170px;
  }
  .codex-quick-answer p {
    font-size:21px;
  }
}