.blog-main {
  padding-block: clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 7vw, 5.5rem);
}

.blog-hero {
  display: grid;
  align-items: center;
  gap: clamp(1.6rem, 5vw, 4.2rem);
  padding-block-end: clamp(2.2rem, 6vw, 4.4rem);
  border-block-end: 1px solid var(--rule);
}

.blog-hero h1, .post h1 {
  margin-block: .5rem .85rem;
  font-size: clamp(2.2rem, calc(3.5vw + 1.25rem), 4rem);
  letter-spacing: -.05em;
  line-height: 1.08;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.blog-kicker, .archive-page {
  color: var(--gold);
  font: 400 .96rem/1.5 var(--body);
  letter-spacing: 0;
}

.archive-page {
  display: block;
  margin-block-start: .65rem;
}

.blog-hero-copy > p:last-child, .post-lead {
  max-inline-size: 49ch;
  color: var(--muted);
  font-size: clamp(1rem, calc(.55vw + .85rem), 1.22rem);
}

.blog-cover {
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--rule);
  border-radius: 1.1rem;
  box-shadow: 0 .7rem 2.6rem #100a1b45;
}

.post-grid {
  display: grid;
  gap: 1rem;
  margin-block-start: clamp(1.4rem, 4vw, 2.6rem);
}

.post-card {
  position: relative;
  padding: clamp(1.1rem, 2.5vw, 1.65rem);
  border: 1px solid var(--rule);
  border-radius: .9rem;
  background: linear-gradient(145deg, #35223b, #25182c);
}

.post-card:hover, .post-card:focus-within { border-color: #a98268; }

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  margin-block-end: .8rem;
  color: var(--gold);
  font-size: .83rem;
}

.post-card-meta time { color: var(--muted); }

.post-card h2, .blog-app h2, .related-posts h2 {
  color: var(--paper);
  font-size: clamp(1.28rem, calc(.75vw + 1.1rem), 1.7rem);
  letter-spacing: -.025em;
  line-height: 1.25;
}

.post-card h2 a { text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; }
.post-card h2 a:hover { color: var(--gold); }
.post-card p { margin-block-start: .65rem; color: var(--muted); }

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-block-start: clamp(1.4rem, 4vw, 2.65rem);
}

.blog-pagination > * {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: .55rem;
  border: 1px solid var(--rule);
  border-radius: .55rem;
  color: var(--paper);
  text-decoration: none;
}

.blog-pagination a:hover { border-color: var(--gold); }
.blog-pagination [aria-current] { color: var(--night); background: var(--gold); border-color: var(--gold); }

.post, .blog-app, .related-posts {
  inline-size: min(100%, 48rem);
  margin-inline: auto;
}

.blog-back {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin-block-end: 1.1rem;
  color: var(--gold);
  text-underline-offset: .25em;
}

.post-cover { margin-block: clamp(1.4rem, 4vw, 2.35rem); }

.post-body {
  color: var(--paper);
  font-size: clamp(1.025rem, calc(.3vw + .96rem), 1.13rem);
  line-height: 1.77;
  overflow-wrap: break-word;
}

.post-body p + p, .post-body figure, .post-body p + ul, .post-body p + ol { margin-block-start: .85rem; }
.post-body figure { margin-block-end: 1rem; }
.post-body figure img { block-size: auto; border-radius: .6rem; }
.post-body ul, .post-body ol { padding-inline-start: 1.4rem; }
.post-body li + li { margin-block-start: .25rem; }

.post-body h2, .post-body h3, .post-body h4 {
  margin-block: 1.65rem .55rem;
  color: var(--gold);
  font: 400 1.28em/1.27 var(--display);
}
.post-body h3, .post-body h4 { font-size: 1.13em; }
.post-body hr { margin-block: 1.55rem; border: 0; border-block-start: 1px solid var(--rule); }
.post-body a { color: var(--gold); text-underline-offset: .22em; }

.post-origin {
  margin-block-start: 1.35rem;
  color: var(--muted);
  font-size: .87rem;
}

.blog-app {
  margin-block-start: clamp(1.7rem, 4vw, 3.3rem);
  padding: clamp(1.2rem, 4vw, 2.6rem);
  border: 1px solid #937154;
  border-radius: 1.1rem;
  background: radial-gradient(ellipse at 10% 0%, #60364f 0%, #37223f 48%, #28192e 100%);
}

.blog-app h2 { margin-block-start: .55rem; }
.blog-app p { margin-block-start: .55rem; color: var(--muted); }
.blog-app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin-block-start: 1rem; }
.blog-store { display: inline-flex; }
.blog-store img { inline-size: auto; block-size: 3rem; }
.blog-more, .related-posts a { color: var(--gold); text-underline-offset: .23em; }

.related-posts { margin-block-start: 2rem; }
.related-posts ul { margin-block: .5rem 0; padding-inline-start: 1.2rem; }
.related-posts li + li { margin-block-start: .35rem; }
.blog-footer { border-block-start: 1px solid var(--rule); }

@media (min-width: 38rem) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 57rem) {
  .blog-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}