.content-page { background-image: radial-gradient(ellipse 50% 25% at 80% 0%,rgba(232,160,176,.07),transparent 75%); }
.content-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 5rem 0 3rem; border-bottom: 1px solid var(--hair); }
.content-hero p { margin: 0; }
.content-hero h1 { margin: 1rem 0 .75rem; font: 400 clamp(4rem, 7vw, 6rem)/1 var(--serif); letter-spacing: -.055em; }
.content-hero h1 em { color: var(--rose); font-style: normal; }
.content-hero div > p:last-child { color: var(--mute); font-size: .88rem; }
.content-stamp { display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid #483334; border-radius: 50%; color: var(--rose); font-size: 1.6rem; }
.content-layout { display: grid; grid-template-columns: 220px minmax(0,700px); gap: 5rem; padding-top: 3.4rem; }
.content-layout aside { color: var(--ghost); font-size: .73rem; line-height: 1.6; }
.content-layout aside p { margin: 0 0 .7rem; }
.content-layout aside a { display: inline-block; margin-top: 1rem; color: var(--rose); font-weight: 600; }
.content-layout aside a:hover { text-decoration: underline; text-underline-offset: 3px; }
.content-prose { color: var(--mute); font-size: .88rem; line-height: 1.85; }
.content-prose > :first-child { margin-top: 0; }
.content-prose h2 { margin: 2.5rem 0 .65rem; color: var(--ink); font: 400 1.8rem/1.2 var(--serif); letter-spacing: -.025em; }
.content-prose p { margin: 0 0 1rem; }
.content-prose ul { padding-left: 1.2rem; }
.content-prose li { padding-left: .3rem; margin-bottom: .55rem; }
.content-prose li::marker { color: var(--rose-deep); }
.content-prose code { padding: .1rem .3rem; border-radius: 3px; background: #211b1b; color: var(--rose); font: .8em var(--mono); }
.content-prose article { margin-bottom: 2.5rem; padding: 1.5rem; border: 1px solid var(--hair-2); border-radius: 9px; background: #171310; }
.content-prose article h2 { margin: .8rem 0; }
.content-prose article .eyebrow, .content-prose article .eyebrow-ui { color: var(--rose); font: .6rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.content-prose article ul { margin-bottom: 0; }
@media (max-width: 700px) {
  .content-hero { padding: 3.4rem 0 2.5rem; }
  .content-hero h1 { font-size: clamp(3.4rem, 12vw, 5rem); }
  .content-stamp { width: 54px; height: 54px; font-size: 1.2rem; }
  .content-layout { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .content-layout aside { padding-bottom: 1rem; border-bottom: 1px solid var(--hair); }
}
