@layer reset, base, site, layout;

@layer layout {
  .eyebrow {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .secondary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.4rem;
    font-size: 0.94rem;
  }

  .post-list { list-style: none; padding: 0; }
  .post-list > li { padding: 1.5rem 0; border-top: 1px solid var(--border-muted); }
  .post-list > li:first-child { border-top: 0; }
  .post-list time { font-size: 0.8rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
  .post-list h3 { margin: 0.45rem 0; font-size: 1.25rem; line-height: 1.55; }
  .post-list h3 a { color: var(--text); text-decoration: none; }
  .post-list h3 a:hover { color: var(--accent); }
  .post-excerpt { line-height: 1.8; font-size: 0.95rem; overflow-wrap: anywhere; }
  .post-list--compact > li { padding: 1.05rem 0; }
  .post-list--compact h3 { font-size: 1rem; margin-bottom: 0; }

  .post-tags {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    gap: 0.5rem;
    margin-top: 0.8rem;

    & a {
      display: inline-block;
      padding: 0.15rem 0.65rem;
      font-size: 0.76rem;
      color: var(--text-muted);
      border: 1px solid var(--border-muted);
      border-radius: 999px;
      text-decoration: none;
      background: var(--surface-subtle);
    }
  }

  .blog-index h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
  .post-count { font-size: 0.8rem; color: var(--text-soft); }
  .year-heading { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 1.4rem; }

  main > .page-content.blog-article {
    display: block;
    min-width: 0;
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
  }

  .article-header {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-muted);

    & .back-link { display: inline-block; margin-bottom: 2rem; font-size: 0.85rem; }
    & h1 { font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.45; margin: 0.65rem 0 1rem; overflow-wrap: anywhere; }
  }

  .article-prose {
    font-size: 1rem;
    line-height: 1.95;
    overflow-wrap: anywhere;

    & > * + * { margin-top: 1.25rem; }
    & :is(h1, h2) { font-size: 1.6rem; line-height: 1.5; margin-top: 2.25rem; scroll-margin-top: 6rem; }
    & h3 { font-size: 1.25rem; line-height: 1.5; margin-top: 1.75rem; }
    & :is(h1, h2, h3) a { color: inherit; text-decoration: none; }
    & p { color: var(--text); }
    & img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem auto; }
    & pre { padding: 1rem; overflow-x: auto; border-radius: 0.5rem; background: var(--surface-subtle); }
    & blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--border-muted); }
    & iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
    & font[size] { font-size: inherit; }
    & hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--border-muted); }
  }

  .article-neighbors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding-top: 1.5rem;
    margin-top: 2.5rem !important;
    border-top: 1px solid var(--border-muted);

    & a { display: grid; gap: 0.45rem; text-decoration: none; }
    & span { font-size: 0.8rem; color: var(--text-muted); }
    & strong { line-height: 1.6; font-size: 0.95rem; }
  }

  @media (max-width: 40rem) {
    .article-neighbors { grid-template-columns: minmax(0, 1fr); }
  }
}