main {
   max-width: 60ch;
   margin: 0 auto;
   padding: 0 1.5rem;
}

/* Thoughts index header — hero-sized title. On a topic page the eyebrow
   ("Thoughts ›") sits on the same line as the "#topic" title. */
.thoughts-header {
   padding: 0;
   margin-bottom: var(--space-2);
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 0 0.5em;
}
.thoughts-header h1 {
   margin: 0;
   font-size: clamp(2.5rem, 8vmin, 5rem);
   line-height: 1.05;
   font-weight: 700;
   color: var(--text-1);
}
.thoughts-eyebrow {
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-2);
}
.thoughts-eyebrow a { color: var(--text-2); }

/* Topic chips: "#tag" followed by a small octagon badge holding the
   number of posts in that topic. */
.topic-chip {
   display: inline-flex;
   align-items: center;         /* vertically centre the badge with the text */
   font-weight: 600;
}
.topic-chip::after { content: none; }      /* drop the base link underline slide */
.topic-chip small {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 1.7em;
   height: 1.7em;
   margin-left: 0.4em;
   padding: 0 0.35em;
   font-size: 0.7em;
   font-weight: 700;
   line-height: 1;
   color: #fff;
   background-color: var(--primary);
   /* regular octagon */
   clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

.home-article {
   display: grid;
   grid-template-columns: 1fr;
   padding: 10vmin 0;
   margin-bottom: 2rem;
}
.home-article aside {
   max-width: 400px;
}

@media screen and (min-width: 722px) {
   .home-article {
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      align-items: start;
   }
   .home-article aside {
      position: sticky;
      top: 2em;
   }
}

.home-article svg {
   background-color: var(--surface-2);
}

.home-section {
}

.home-section h2 {
   font-size: min(5vw, 3em);
   color: var(--text-2);
}

/* Article list — same compact date + title rows as the homepage. */
.blog-articles-list {
   padding-left: 0;
   list-style: none;
   margin: var(--space-2) 0 0;
}
.blog-article-link {
   display: grid;
   grid-template-columns: 3.5em 1fr;
   align-items: baseline;
   padding: 0.1em 0.3em;
   text-decoration: none;
   color: var(--text-1);
   transition: background 0.3s ease-in-out;
}
.blog-article-link::after,
.blog-article-link a::after { display: none; }
.blog-article-link:hover { background-color: var(--surface-2); }
.blog-article-link span { display: block; }
.blog-article-link date { font-size: 0.5em; color: var(--text-2); }


.projects-list {
   padding: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   row-gap: 0.5ch;
   column-gap: 0.5ch;
}
.project-button {
   background-color: var(--surface-4);
   color: var(--text-2);
   display: inline-flex;
   align-items: center;
   column-gap: 0.5ch;
   width: max-content;
   padding: 0.2em 0.6em;
}
.project-button img {
   height: 1em;
   width: auto;
}

/* section {
   max-width: 40rem;
   margin-left: auto;
   margin-right: auto;
} */