.blog-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  --blog-measure: 40rem;
}
.blog-page main:focus { outline: none; }

.blog-index { flex: 1; padding-block: clamp(3rem, 7.4vw, 6rem) 4rem; }
.blog-index-intro { padding-bottom: clamp(2rem, 5vw, 4.25rem); }
.blog-index h1 {
  font: 400 clamp(3.2rem, 11.6vw, 9.5rem)/1.03 var(--serif);
  letter-spacing: -.063em;
  text-wrap: balance;
}
.blog-index-intro p {
  margin-top: clamp(.8rem, 2vw, 1.5rem);
  font-size: clamp(1rem, 2.1vw, 1.3rem);
  color: var(--secondary);
}
:lang(ko) .blog-index h1,
:lang(ko) .blog-entry h2,
:lang(ko) .blog-article h1,
:lang(ko) .blog-missing h1 {
  font-family: 'Newsreader', 'Noto Serif KR', 'Batang', var(--sans);
  letter-spacing: -.05em;
}

.blog-entry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 2rem;
  grid-template-areas: 'cover copy arrow';
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-block: clamp(1.25rem, 3vw, 2rem);
  border-block: 1px solid var(--rule);
}
.blog-entry-copy { grid-area: copy; }
.blog-category { font-size: .875rem; color: var(--secondary); }
.blog-entry h2 {
  margin-block: .45rem .35rem;
  font: 400 clamp(1.95rem, 4.1vw, 3.6rem)/1.13 var(--serif);
  letter-spacing: -.043em;
}
.blog-entry:hover h2 { text-decoration: underline; text-decoration-thickness: .045em; text-underline-offset: .14em; }
.blog-entry-copy > p:last-child { max-width: 40ch; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.blog-entry-arrow { grid-area: arrow; justify-self: end; }
.blog-entry-arrow svg, .blog-back svg { display: block; width: 1.5rem; height: 1.5rem; }
.blog-cover {
  grid-area: cover;
  min-height: clamp(8.5rem, 16vw, 11.5rem);
  padding: clamp(1rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  background: var(--action);
  color: var(--on-action);
}
.blog-cover img {
  grid-row: 1;
  grid-column: 2;
  align-self: start;
  width: 3.2rem;
  height: 3.2rem;
  filter: invert(1);
}
[data-theme='dark'] .blog-cover img { filter: none; }
.blog-cover-word { display: block; font: 400 clamp(1.7rem, 3.3vw, 2.85rem)/1.1 var(--sans); letter-spacing: -.045em; }
.blog-cover-note { display: block; margin-top: .35rem; font-size: .875rem; }

.blog-reader {
  display: grid;
  grid-template-columns: minmax(5rem, .28fr) minmax(0, var(--blog-measure)) minmax(0, .28fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 7vw, 5.25rem) clamp(4rem, 9vw, 7.5rem);
}
.blog-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; width: fit-content; color: var(--secondary); }
.blog-back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .22em; }
.blog-back svg { transform: rotate(180deg); }
.blog-article-header { margin-bottom: clamp(1.8rem, 5vw, 3.2rem); }
.blog-article h1, .blog-missing h1 {
  margin-top: .65rem;
  font: 400 clamp(2.65rem, 6vw, 5.5rem)/1.05 var(--serif);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.blog-prose {
  font-size: clamp(1.0625rem, 1.6vw, 1.2rem);
  line-height: 1.78;
  overflow-wrap: anywhere;
}
.blog-prose:lang(ko) { line-height: 1.88; word-break: keep-all; }
.blog-prose p + p { margin-top: 1.45em; }
.blog-prose strong { font-weight: 650; }
.blog-missing { flex: 1; padding-block: clamp(3rem, 9vw, 7rem); }
.blog-missing p { margin-block: 1.2rem .6rem; }

@media (max-width: 48rem) {
  .blog-reader { display: block; }
  .blog-reader > .blog-back { margin-bottom: 1.2rem; }
  .blog-article { max-width: var(--blog-measure); margin-inline: auto; }
}

@media (max-width: 38rem) {
  .blog-index { padding-block: 3.2rem; }
  .blog-entry {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    grid-template-areas: 'copy arrow' 'cover cover';
    gap: 1.1rem .75rem;
  }
}