/* Field notes keeps the portfolio palette in a quieter reading space. */
.blog-main, .post-main {
  --blog-paper: #fcfdff;
  --blog-paper-ink: #11113e;
  --blog-paper-soft: #505477;
  --blog-rule: rgba(6, 6, 68, .09);
  --blog-writing-line: rgba(6, 6, 68, .045);
  --blog-note: #d8eafa;
  --blog-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}
@media (prefers-color-scheme: dark) {
  .blog-main, .post-main {
    --blog-paper: #1a1a45;
    --blog-paper-ink: #f0f0fa;
    --blog-paper-soft: #babbd3;
    --blog-rule: rgba(232, 232, 247, .1);
    --blog-writing-line: rgba(232, 232, 247, .05);
    --blog-note: #252b5a;
  }
}

/* Homepage entry. */
.blog-preview-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent-ink);
  border-radius: 5px var(--radius) var(--radius) 5px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 14px 32px var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.blog-preview-link:hover { transform: translateY(-3px); box-shadow: 0 20px 40px var(--shadow-md); }
.blog-preview-link > span:first-child { display: grid; gap: 9px; }
.blog-preview-label, .blog-topic {
  color: var(--accent-ink);
  font: 500 .7rem/1.4 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-preview-link strong { font: 700 clamp(1.2rem, 2vw, 1.6rem)/1.1 var(--font-display); }
.blog-preview-arrow { font-size: 1.5rem; color: var(--accent-ink); }

/* Archive introduction and pinned quotation. */
.blog-main { background: var(--bg); }
section.blog-intro {
  padding: clamp(76px, 8vw, 124px) 0 clamp(76px, 8vw, 116px);
  background: radial-gradient(circle at 76% 38%, rgba(96, 148, 200, .14), transparent 35rem);
}
.blog-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .45fr);
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.blog-intro h1 {
  max-width: 850px;
  margin: 20px 0 28px;
  font: 400 clamp(3.5rem, 7vw, 7rem)/.94 var(--blog-serif);
  letter-spacing: -.065em;
  text-wrap: balance;
}
.blog-intro h1 em, .blog-list h2 em { color: var(--accent-ink); font-weight: 400; }
.blog-intro .lead { max-width: 640px; font-size: clamp(1.125rem, 1.65vw, 1.4rem); line-height: 1.6; }
.blog-open-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  margin-top: 30px;
  padding: 11px 21px;
  border-radius: 999px;
  background: var(--night);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.blog-open-link:hover { transform: translateY(-2px); background: var(--turban); }
.blog-intro-count { margin-top: 30px; color: var(--text-soft); font: 500 .75rem/1.5 var(--font-mono); letter-spacing: .04em; }
.blog-intro-count strong { margin-right: 5px; color: var(--text); font: 400 1.25rem/1 var(--blog-serif); }
.blog-intro-count span { padding-inline: 8px; }
.blog-note {
  position: relative;
  width: min(100%, 345px);
  justify-self: center;
  padding: 34px 32px 30px;
  background: var(--blog-note);
  color: var(--blog-paper-ink);
  box-shadow: 0 24px 42px var(--shadow-md);
  transform: rotate(3deg);
}
.blog-note::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 38%;
  width: 86px;
  height: 27px;
  background: rgba(255, 255, 255, .6);
  transform: rotate(-4deg);
}
.blog-note > span { color: var(--blog-paper-soft); font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.blog-note p { margin: 26px 0 16px; font: 400 clamp(1.7rem, 2.7vw, 2.4rem)/1.17 var(--blog-serif); letter-spacing: -.04em; }
.blog-note small { color: var(--blog-paper-soft); font: italic .9rem/1.4 var(--blog-serif); }

/* One index and one published essay, presented as an open notebook. */
section.blog-list { padding: clamp(52px, 6vw, 78px) 0 clamp(80px, 9vw, 130px); background: var(--bg-alt); }
.blog-list-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1120px; margin: 0 auto 30px; }
.blog-list h2 { margin: 8px 0 0; font: 400 clamp(2.6rem, 4.6vw, 4rem)/1 var(--blog-serif); letter-spacing: -.05em; }
.blog-list-head > p { max-width: 310px; color: var(--text-soft); line-height: 1.55; }
.blog-book {
  max-width: 1120px;
  margin-inline: auto;
  padding: 12px 12px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--night), #17174f);
  box-shadow: 0 28px 60px var(--shadow-md), 0 8px 18px var(--shadow-sm);
}
.blog-book-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 560px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--blog-paper);
}
.blog-index-page, .blog-feature-page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(30px, 4vw, 58px);
  color: var(--blog-paper-ink);
  background: repeating-linear-gradient(to bottom, transparent 0 32px, var(--blog-writing-line) 33px, transparent 34px), var(--blog-paper);
}
.blog-index-page { border-right: 1px solid var(--blog-rule); box-shadow: inset -18px 0 28px -26px rgba(6, 6, 68, .45); }
.blog-feature-page { box-shadow: inset 18px 0 28px -26px rgba(6, 6, 68, .45); }
.blog-folio { display: flex; justify-content: space-between; gap: 12px; color: var(--blog-paper-soft); font: 500 .65rem/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.blog-margin-note { margin: clamp(48px, 6vw, 86px) 0 16px; color: var(--accent-ink); font: italic 1rem/1.3 var(--blog-serif); }
.blog-index-page h3, .blog-feature-page h3 { margin: 0; color: var(--blog-paper-ink); font: 400 clamp(2.5rem, 4vw, 4rem)/1.02 var(--blog-serif); letter-spacing: -.055em; text-wrap: balance; }
.blog-index-page h3 em, .blog-feature-page h3 em { color: var(--accent-ink); font-weight: 400; }
.blog-index-intro { max-width: 390px; margin: 20px 0 28px; color: var(--blog-paper-soft); font: 1.05rem/1.55 var(--blog-serif); }
.blog-contents { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--blog-rule); }
.blog-contents a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; align-items: center; min-height: 54px; border-bottom: 1px solid var(--blog-rule); color: var(--blog-paper-ink); font: 1rem/1.35 var(--blog-serif); text-decoration: none; }
.blog-contents a:hover, .blog-feature-foot a:hover { color: var(--accent-ink); }
.blog-contents a span:first-child { color: var(--accent-ink); font: 500 .75rem/1.2 var(--font-mono); }
.blog-contents a span:last-child { color: var(--accent-ink); }
.blog-index-foot { margin: auto 0 0; padding-top: 24px; color: var(--blog-paper-soft); font: italic .95rem/1.4 var(--blog-serif); }
.blog-feature-page .blog-topic { margin: clamp(56px, 6vw, 84px) 0 20px; }
.blog-feature-deck { margin: 26px 0 16px; font: 400 clamp(1.25rem, 2vw, 1.55rem)/1.42 var(--blog-serif); }
.blog-feature-summary { max-width: 390px; color: var(--blog-paper-soft); line-height: 1.6; }
.blog-feature-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--blog-rule); }
.blog-feature-foot > span { color: var(--blog-paper-soft); font: 500 .68rem/1.5 var(--font-mono); }
.blog-feature-foot a { color: var(--blog-paper-ink); font-weight: 600; text-decoration-color: var(--accent-ink); text-underline-offset: 5px; }
.blog-feature-foot a span { color: var(--accent-ink); }
.blog-back-link { display: inline-flex; gap: 8px; margin-top: 28px; color: var(--text); text-decoration-color: var(--accent-ink); text-underline-offset: 5px; }
.blog-back-link span { color: var(--accent-ink); }

/* Essay: a contents rail beside a restrained paper reading column. */
.post-main { background: var(--bg-alt); }
.post-header { padding: clamp(56px, 6vw, 90px) 0 clamp(56px, 6vw, 80px); background: var(--bg); }
.post-header .section-inner { max-width: 1160px; }
.post-back { display: inline-flex; min-height: 30px; align-items: center; color: var(--text-soft); font: 500 .72rem/1.4 var(--font-mono); letter-spacing: .08em; text-decoration-color: var(--accent-ink); text-underline-offset: 5px; }
.post-header .eyebrow { margin: clamp(48px, 5vw, 72px) 0 18px; color: var(--accent-ink); }
.post-header h1 { max-width: 900px; margin: 0 0 25px; font: 400 clamp(3.1rem, 6.7vw, 6.4rem)/.98 var(--blog-serif); letter-spacing: -.06em; text-wrap: balance; }
.post-header h1 em { color: var(--accent-ink); font-weight: 400; }
.post-deck { max-width: 650px; color: var(--text-soft); font: 400 clamp(1.3rem, 2vw, 1.65rem)/1.5 var(--blog-serif); text-wrap: pretty; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: 650px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-soft); font: 500 .7rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.post-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); justify-content: center; align-items: start; gap: clamp(28px, 4vw, 60px); max-width: 1160px; margin-inline: auto; padding: clamp(48px, 5vw, 78px) 24px 42px; }
.post-toc { position: sticky; top: calc(var(--header-h) + 30px); padding-top: 18px; }
.post-toc > p { margin: 0 0 18px; color: var(--accent-ink); font: 500 .68rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.post-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-top: 1px solid var(--border); }
.post-toc li { border-bottom: 1px solid var(--border); }
.post-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 12px 0; color: var(--text-soft); font-size: .85rem; line-height: 1.42; text-decoration: none; }
.post-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--accent-ink); font: 500 .65rem/1.8 var(--font-mono); }
.post-toc a:hover { color: var(--text); }
.post-body { min-width: 0; padding: clamp(32px, 5vw, 66px); border: 1px solid var(--blog-rule); border-radius: 5px; background: var(--blog-paper); color: var(--blog-paper-ink); box-shadow: 0 20px 48px var(--shadow-sm); font: 400 clamp(1.125rem, 1.35vw, 1.25rem)/1.72 var(--blog-serif); counter-reset: post-section; }
.post-body .post-page-label { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 42px; padding-bottom: 14px; border-bottom: 1px solid var(--blog-rule); color: var(--blog-paper-soft); font: 500 .67rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.post-body p { margin: 0 0 1.25em; text-wrap: pretty; }
.post-body .lede { margin-bottom: 1em; font-size: clamp(1.3rem, 1.7vw, 1.5rem); line-height: 1.5; }
.post-body h2 { margin: 2.15em 0 .75em; padding-top: 28px; border-top: 1px solid var(--blog-rule); color: var(--blog-paper-ink); font: 400 clamp(1.9rem, 3vw, 2.5rem)/1.14 var(--blog-serif); letter-spacing: -.04em; text-wrap: balance; counter-increment: post-section; scroll-margin-top: calc(var(--header-h) + 24px); }
.post-body h2::before { display: block; margin-bottom: 13px; color: var(--accent-ink); content: counter(post-section, decimal-leading-zero); font: 500 .68rem/1.4 var(--font-mono); letter-spacing: .12em; }
.post-body blockquote { margin: 1.8em 0; padding: 10px 0 10px 22px; border-left: 3px solid var(--accent-ink); color: var(--blog-paper-ink); font: italic 400 clamp(1.5rem, 2.6vw, 2rem)/1.35 var(--blog-serif); }
.post-body .post-signoff { margin: 2.5em 0 0; padding-top: 25px; border-top: 1px solid var(--blog-rule); font-style: italic; }
.post-end { display: flex; justify-content: space-between; gap: 20px; max-width: 760px; margin: 0 auto; padding: 0 24px 88px; }
.post-end a { color: var(--text); text-decoration-color: var(--accent-ink); text-underline-offset: 5px; }
.blog-preview-link:focus-visible, .blog-open-link:focus-visible, .blog-contents a:focus-visible,
.blog-feature-foot a:focus-visible, .blog-back-link:focus-visible, .post-back:focus-visible,
.post-toc a:focus-visible, .post-end a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .post-layout { grid-template-columns: minmax(0, 760px); }
  .post-toc { position: static; padding: 0; }
  .post-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 860px) {
  .blog-intro-grid { grid-template-columns: 1fr; }
  .blog-note { justify-self: start; margin-left: 20px; }
  .blog-book-pages { grid-template-columns: 1fr; }
  .blog-index-page, .blog-feature-page { min-height: 0; }
  .blog-index-page { border-right: 0; border-bottom: 1px solid var(--blog-rule); box-shadow: none; }
  .blog-feature-page { box-shadow: none; }
  .blog-margin-note, .blog-feature-page .blog-topic { margin-top: 42px; }
  .blog-index-foot { margin-top: 24px; }
  .blog-feature-foot { margin-top: 42px; }
}
@media (max-width: 600px) {
  section.blog-intro { padding: 54px 0 76px; }
  .blog-intro h1 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .blog-intro-grid { gap: 62px; }
  .blog-note { width: min(310px, calc(100% - 20px)); }
  .blog-list-head { display: block; }
  .blog-list-head > p { margin-top: 15px; }
  .blog-book { padding: 8px 8px 12px; border-radius: 13px; }
  .blog-index-page, .blog-feature-page { padding: clamp(24px, 6vw, 34px); }
  .blog-index-page h3, .blog-feature-page h3 { font-size: clamp(2.3rem, 11vw, 3.3rem); }
  .post-header { padding: 40px 0 52px; }
  .post-header .eyebrow { margin-top: 48px; }
  .post-header h1 { font-size: clamp(3rem, 12.5vw, 4.6rem); }
  .post-layout { display: block; padding: 34px 0 0; }
  .post-toc { padding: 0 20px 34px; }
  .post-toc ol { grid-template-columns: 1fr; }
  .post-body { padding: 36px 20px 56px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
  .post-end { flex-direction: column; padding: 30px 20px 70px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blog-preview-link, .blog-open-link { transition: none; }
}