.feature-page {
  min-height: 100vh;
  background: var(--night);
  color: var(--paper);
  font-family: 'DM Sans', sans-serif;
}

.feature-page .topbar { position: relative; background: var(--night); border-bottom: 1px solid var(--line); }
.feature-page .content { max-width: 1180px; }

.page-intro {
  padding-top: clamp(90px, 13vw, 190px);
  padding-bottom: clamp(60px, 9vw, 120px);
  border-bottom: 1px solid var(--line);
}

.page-intro h1 {
  max-width: 900px;
  margin-top: 24px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(4.8rem, 12vw, 11rem);
  font-weight: 700;
  line-height: .74;
  letter-spacing: -.09em;
}

.page-intro h1 em { color: var(--steel); font-weight: 500; }
.page-intro p { max-width: 560px; margin-top: 30px; color: var(--mist); font-size: 1.0625rem; }

.feature-posts { padding-top: 10px; padding-bottom: 100px; }

.feature-post {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4vw;
  padding: clamp(55px, 8vw, 100px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 30px;
}

.feature-post-meta { color: var(--steel); font-family: 'DM Mono', monospace; font-size: .75rem; letter-spacing: .07em; line-height: 1.8; text-transform: uppercase; }
.feature-post h2 { margin: 0 0 30px; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(2.8rem, 5.6vw, 6.3rem); font-weight: 500; line-height: .86; letter-spacing: -.075em; }
.feature-post p { margin: 0 0 1.3em; color: var(--mist); font-size: 1.05rem; line-height: 1.8; }

.feature-page .footer { max-width: 1180px; margin: auto; padding-right: 5vw; padding-left: 5vw; }

.feature-links { max-width: 860px; padding-top: 40px; padding-bottom: 100px; }
.feature-link { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.feature-link:first-child { border-top: 1px solid var(--line); }
.feature-link:hover h2 { color: var(--steel); }
.feature-link h2 { margin: 0 0 8px; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.feature-link p { margin: 0; color: var(--mist); }
.feature-link-mark { display: none; }

.feature-doc { max-width: 860px; padding-top: 55px; padding-bottom: 100px; }
.feature-doc h2 { margin: 55px 0 16px; font-family: 'Bodoni Moda', Georgia, serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; line-height: .92; letter-spacing: -.06em; }
.feature-doc p { margin: 0 0 1.25em; color: var(--mist); font-size: 1.05rem; line-height: 1.8; }
.feature-doc a { color: var(--paper); text-underline-offset: 4px; }

@media (max-width: 700px) {
  .feature-page .topbar { padding: 0 6vw; }
  .feature-page .content { padding-right: 6vw; padding-left: 6vw; }
  .page-intro { padding-top: 100px; }
  .page-intro h1 {
    font-size: clamp(3rem, 13vw, 4.75rem);
    line-height: .84;
    letter-spacing: -.075em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .feature-post { display: block; padding: 65px 0; }
  .feature-post-meta { display: block; margin-bottom: 30px; }
  .feature-post h2 { font-size: 3.15rem; }
  .feature-page .footer { padding-right: 6vw; padding-left: 6vw; }
  .feature-links, .feature-doc { padding-bottom: 70px; }
}