@layer patterns {
  .post-archive { background: #f5f1e8; }
  .post-archive__hero { height: 26.75rem; background: url("../images/pages/introduction/hero.jpg") no-repeat center / cover; }
  .post-archive__content { padding: 5.5rem var(--ikuta-gutter) 4rem; background: url("../images/pages/introduction/content-top.jpg") repeat-x top center, url("../images/pages/introduction/content-background.jpg") repeat-y top center / 100% auto; }
  .post-archive__panel { display: grid; grid-template-columns: 11.25rem minmax(0, 1fr); gap: 1.25rem; width: min(100%, 57.5rem); margin: 0 auto; padding: 1.25rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
  .post-archive__sidebar h2 { min-height: 2.5rem; margin: 0; padding: 0 0.625rem; color: #fff; font: 1rem/2.5rem var(--ikuta-font-gothic); background: #271545; }
  .post-archive__sidebar ul { margin: 0; padding: 0; list-style: none; }
  .post-archive__sidebar li:nth-child(n + 36) { display: none; }
  .post-archive__sidebar a { display: block; min-height: 2.5rem; padding: 0.45rem 0.625rem; color: #333; line-height: 1.6; text-decoration: none; border-block-end: 1px dashed #ccc; }
  .post-archive__sidebar a:hover { color: #6940ae; background: #f7f4fa; }
  .post-archive__list { display: grid; }
  .post-archive-item { min-width: 0; min-height: 18.625rem; padding-block-end: 1.25rem; }
  /* Article title, on the archive and on the article itself.

     This used to be a 700x60 PNG: a shrine crest on the left and a four pixel
     rule along the bottom that shaded from #96a224 to #cbd657. The rule is now
     a gradient and the crest is replaced by a bar down the left, so the title
     costs no request and grows with the text instead of being pinned to the
     image's height. */
  .post-archive-item__title,
  .post-single__title {
    --news-title-rule: linear-gradient(#96a224, #cbd657);

    min-height: 0;
    margin: 0 0 1.25rem;
    padding: 0.35rem 0 0.8rem 0.9rem;
    font: 500 1.25rem/1.6 var(--ikuta-font-mincho);
    background: var(--news-title-rule) no-repeat left bottom / 100% 4px;
    background-origin: border-box;
    border-block-end: 0;
    border-inline-start: 4px solid #96a224;
  }

  .post-archive-item__title a { color: #303030; text-decoration: none; }
  .post-archive-item__title a:hover { color: #6940ae; }
  .post-archive-item__date { max-width: none; margin: 0 0 1rem; }
  .post-archive-item__body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.25rem; align-items: start; min-height: 10rem; }
  .post-archive-item__excerpt p { max-width: none; margin: 0; line-height: 1.8; }
  .post-archive-item__image { display: block; overflow: hidden; width: 15rem; height: 10rem; background: #eee; text-decoration: none; }
  .post-archive-item__image img { width: 100%; height: 100%; object-fit: cover; }
  .post-archive-item__image span { display: grid; width: 100%; height: 100%; place-items: center; color: #777; font-family: var(--ikuta-font-mincho); }
  .post-archive-item__more { width: 18.75rem; margin: 1.25rem auto 0; }
  .post-archive-item__more a { display: block; min-height: 2.375rem; color: #fff; line-height: 2.375rem; text-align: center; text-decoration: none; background: linear-gradient(#6940ae, #271545); border: 1px solid #f6efe5; box-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
  /* Single post, sharing the archive's two-column panel. */
  .post-single { min-width: 0; }
  .post-single__date { max-width: none; margin: 0 0 1.25rem; }
  .post-single__image { margin: 0 0 1.5rem; }
  .post-single__image img { width: 100%; height: auto; }
  .post-single__body { min-width: 0; }
  .post-single__body > *:first-child { margin-block-start: 0; }
  /* 前後の記事. Two cards, each hugging its own side of the article. */
  .post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ikuta-color-gold);
  }

  .post-nav__link {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding: 0.9rem 1.1rem;
    color: var(--ikuta-color-ink);
    text-decoration: none;
    background: var(--ikuta-color-white);
    border: 1px solid var(--ikuta-color-border);
    border-block-start: 3px solid var(--ikuta-color-gold);
    transition: border-color var(--ikuta-motion-duration) var(--ikuta-motion-easing),
      box-shadow var(--ikuta-motion-duration) var(--ikuta-motion-easing);
  }

  .post-nav__link--previous { grid-column: 1; }
  .post-nav__link--next { grid-column: 2; text-align: end; }

  .post-nav__link:hover,
  .post-nav__link:focus-visible {
    border-color: var(--ikuta-color-purple);
    border-block-start-color: var(--ikuta-color-purple);
    box-shadow: 0 2px 6px rgb(39 21 69 / 0.16);
  }

  .post-nav__label {
    color: var(--ikuta-color-purple);
    font-family: var(--ikuta-font-gothic);
    font-size: var(--ikuta-font-small);
    letter-spacing: 0.08em;
  }

  .post-nav__link--previous .post-nav__label::before { content: "← "; }
  .post-nav__link--next .post-nav__label::after { content: " →"; }

  .post-nav__title {
    display: -webkit-box;
    overflow: hidden;
    font-family: var(--ikuta-font-mincho);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .post-archive-pagination { margin-block-start: 1.875rem; }
  .post-archive-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
  .post-archive-pagination a, .post-archive-pagination .current, .post-archive-pagination .dots { display: grid; min-width: 2.25rem; min-height: 2.25rem; padding: 0.25rem; place-items: center; color: #333; text-decoration: none; border: 1px solid #ddd; border-inline-start-width: 0; }
  .post-archive-pagination li:first-child > * { border-inline-start-width: 1px; }
  .post-archive-pagination a:hover { background: #eee; }
  .post-archive-pagination .current { background: #ddd; }

  @media (width < 48rem) {
    .post-archive__hero { height: 56.25vw; }
    .post-archive__content { padding: 3rem var(--ikuta-gutter); }
    .post-archive__panel { display: block; padding: 1rem; }
    /* The month picker sits above the article once the panel stops being two
       columns, pushing the article itself off the screen. Dropped on a phone. */
    .post-archive__sidebar { display: none; }
    .post-archive-item { min-height: 0; padding-block-end: 2.5rem; }
    .post-archive-item__title,
    .post-single__title { margin-block-end: 1rem; font-size: 1.125rem; line-height: 1.5; }
    .post-archive-item__date { font-size: 0.875rem; }
    .post-archive-item__body { grid-template-columns: minmax(0, 1fr) 35%; gap: 0.75rem; min-height: 0; }
    .post-archive-item__excerpt { font-size: 0.875rem; }
    .post-archive-item__image { width: 100%; height: auto; aspect-ratio: 3 / 2; }
    .post-archive-item__more { width: 80%; margin-block-start: 1rem; }
    .post-single__date { font-size: 0.875rem; }
    .post-nav { grid-template-columns: 1fr; gap: 0.75rem; }
    .post-nav__link--previous,
    .post-nav__link--next { grid-column: 1; }
  }
}