:root[data-scheme=midnight] {
  --paper: light-dark(#FAF8F6, #1A070B);
  --paper-2: light-dark(#F0ECEA, #260A10);
  --paper-3: light-dark(#E7E0DD, #100407);
  --ink: light-dark(#1B1717, #F2ECEA);
  --ink-2: light-dark(#514746, #C0B4B2);
  --ink-3: light-dark(#756968, #988A88);
  --rule: light-dark(#E1D8D5, #45151B);
  --rule-strong: light-dark(#1B1717, #F2ECEA);
  --accent: light-dark(#7A1018, #D97880);
  --accent-ink: light-dark(#5B0B12, #F0A4A9);
  --field: light-dark(#5B1018, #3B1018);
  --field-deep: light-dark(#450C13, #280A0E);
  --accent-tint: light-dark(#F5E4E5, #301519);
  --on-field-2: light-dark(#E8BFC2, #F0C9CB);
  --spark: light-dark(#B74752, #F08B91);
  --note: light-dark(#7A1018, #D97880);
  --on-danger: light-dark(#FAF8F6, #171516);
  --code-bg: light-dark(#1B1717, #100407);
  --code-rule: light-dark(transparent, #45151B);
  --code-keyword: #F08B91;
  --code-btn: #321117;
  --code-btn-rule: #54232A;
  --code-btn-ink: #E8BFC2;
  --code-btn-hover: #F08B91;
  --on-highlight: #1B1717;
  --backdrop: rgb(23 21 22 / .45);
}

.wordmark {
  padding-bottom: 0;
  font-size: calc(var(--t-wordmark) * 1.2);
}

.foot-id .wordmark {
  font-size: calc(var(--t-wordmark-foot) * 1.2);
}

.wordmark-dot {
  color: var(--accent);
}

.post-grid .about-content {
  grid-column: 4 / span 8;
  max-width: none;
}

.about-side .toc {
  display: block;
}

.about-content h2 {
  scroll-margin-top: var(--s-5);
}

.about-content .about-portrait {
  width: min(100%, 28rem);
  margin: var(--flow-block) 0;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

.about-contents {
  margin-block: 0 var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--line-2) solid var(--rule-strong);
}

.about-contents > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
  color: var(--ink);
  font-size: var(--t-subheading);
  font-weight: var(--w-bold);
  cursor: pointer;
  list-style: none;
}

.about-contents > summary::-webkit-details-marker {
  display: none;
}

.about-contents-icon {
  display: grid;
  width: 2.5rem;
  aspect-ratio: 1;
  place-items: center;
  border: var(--line-2) solid var(--rule);
  color: var(--accent);
}

.about-contents-icon::before {
  content: "−";
  font-size: 1.5rem;
  line-height: 1;
}

.about-contents:not([open]) .about-contents-icon::before {
  content: "+";
}

.about-contents > ul {
  margin-bottom: 0;
}

.about-content > h2 .h-text {
  color: var(--ink);
}

article.h-entry .post-side .post-toc {
  display: block;
}

.timeline {
  grid-template-columns: repeat(var(--timeline-cols, var(--cols)), minmax(0, 1fr));
}

@media (max-width: 860px) {
  .timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-grid .about-side,
  .post-grid .about-content {
    grid-column: 1 / -1;
  }

  .about-side {
    grid-row: 1;
    margin-top: 0;
  }

  .post-grid .about-content {
    grid-row: 2;
  }

  .post-grid > .post-side {
    grid-row: 1;
    margin-top: 0;
  }

  .post-grid > .prose {
    grid-row: 2;
  }
}

@media (max-width: 700px) {
  .about-contents > summary {
    font-size: var(--t-item);
  }
}

@supports not (color: light-dark(#000, #fff)) {
  :root[data-scheme=midnight] {
    --paper: #FAF8F6;
    --paper-2: #F0ECEA;
    --paper-3: #E7E0DD;
    --ink: #1B1717;
    --ink-2: #514746;
    --ink-3: #756968;
    --rule: #E1D8D5;
    --rule-strong: #1B1717;
    --accent: #7A1018;
    --accent-ink: #5B0B12;
    --field: #5B1018;
    --field-deep: #450C13;
    --accent-tint: #F5E4E5;
    --on-field-2: #E8BFC2;
    --spark: #B74752;
    --note: #7A1018;
    --on-danger: #FAF8F6;
    --code-bg: #1B1717;
    --code-rule: transparent;
    --code-keyword: #B74752;
    --code-btn: #2A2021;
    --code-btn-rule: #493536;
    --code-btn-ink: #E8BFC2;
    --code-btn-hover: #B74752;
    --on-highlight: #1B1717;
    --backdrop: rgb(23 21 22 / .45);
  }
}