/* =========================================================================
   nicolas.hognon.com — blog (list + posts)
   Loaded after style.css; reuses its tokens, topbar, .wrap, .tag, .foot.
   ========================================================================= */

:root {
  --measure: 68ch;               /* reading column */
  --code-bg: #120d18;
}

.blog { max-width: 820px; }
.blog .lede h1 { line-height: 1.12; text-wrap: balance; }

/* Tags ------------------------------------------------------------------- */

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.tag--hash::before { content: "#"; color: var(--ink-mute); }
a.tag { transition: color .18s ease, border-color .18s ease, background .18s ease; }
a.tag:hover { color: var(--accent); border-color: var(--accent); background: rgba(110,231,168,.08); }

/* Tag filter (built by blog.js) ------------------------------------------ */

.tagbar { margin: 36px 0 0; display: flex; flex-direction: column; gap: 12px; }
.tagbar[hidden] { display: none; }
.tagbar__list { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: baseline; gap: .45em;
  font-family: var(--mono); font-size: .78rem;
  color: var(--ink-soft);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4em .85em;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.chip::before { content: "#"; color: var(--ink-mute); }
.chip__n { font-size: .68rem; color: var(--ink-mute); }
.chip:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: rgba(110,231,168,.10); }
.chip[aria-pressed="true"]::before, .chip[aria-pressed="true"] .chip__n { color: inherit; opacity: .7; }
.tagbar__meta { display: flex; gap: 14px; align-items: baseline; font-family: var(--mono); font-size: .74rem; color: var(--ink-mute); }
.tagbar__clear {
  font: inherit; color: var(--ink-mute); background: none; border: 0; padding: 0; cursor: pointer;
}
.tagbar__clear:hover { color: var(--accent); }
.tagbar__clear[hidden] { display: none; }

/* List page -------------------------------------------------------------- */

.posts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }

.post-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 4px 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.post-item__date {
  font-family: var(--mono); font-size: .78rem; color: var(--ink-mute);
  padding-top: .3em;
}
.post-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.post-item__title { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.post-item__title a { transition: color .18s ease; }
.post-item__title a::before {
  content: "→ "; color: var(--accent);
  opacity: 0; margin-left: -1.1em; transition: opacity .18s ease;
}
.post-item__title a:hover { color: var(--accent); }
.post-item__title a:hover::before { opacity: 1; }
.post-item__summary { margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.post-item[hidden] { display: none; }

.posts-empty { font-family: var(--mono); font-size: .85rem; color: var(--ink-mute); padding: 26px 0; }
.posts:has(.post-item) + .posts-empty { display: none; }
.posts-nomatch[hidden] { display: none; }

/* Post header ------------------------------------------------------------ */

.post__head { max-width: var(--measure); margin-bottom: 40px; }
.post__head .eyebrow a:hover { color: var(--ink); }
.post__head h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.12;
  margin: .4em 0 .45em; text-wrap: balance;
}
.post__lede { color: var(--ink-soft); font-size: 1.12rem; margin: 0 0 22px; text-wrap: pretty; }
.post__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .78rem; color: var(--ink-mute);
  padding-top: 18px; border-top: 1px solid var(--line);
}

/* Prose ------------------------------------------------------------------ */

.prose {
  max-width: var(--measure);
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.prose > * { margin-top: 0; margin-bottom: 1.15em; }

.prose h2, .prose h3 { color: var(--ink); letter-spacing: -.01em; line-height: 1.3; scroll-margin-top: 80px; }
.prose h2 { font-size: 1.5rem; font-weight: 600; margin: 2.2em 0 .7em; }
.prose h2::before { content: "## "; font-family: var(--mono); font-weight: 400; color: var(--accent); opacity: .55; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.8em 0 .5em; }

.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--facet-light);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--accent); font-family: var(--mono); }
.prose ul > li::marker { content: "– "; }

.prose blockquote {
  margin-left: 0; padding: .1em 0 .1em 1.2em;
  border-left: 2px solid var(--facet-mid);
  color: var(--ink-soft); font-style: italic;
}

.prose hr { border: 0; height: 1px; background: var(--line-2); margin: 2.6em 0; }

/* Callout: <aside class="note">…</aside> */
.prose .note {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
  background: rgba(110,231,168,.04);
  font-size: .96rem;
}
.prose .note > :last-child { margin-bottom: 0; }

/* Code */
.prose code, .prose kbd {
  font-family: var(--mono); font-size: .86em;
}
.prose :not(pre) > code {
  color: var(--lav);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .08em .35em;
  overflow-wrap: anywhere;
}
.prose kbd {
  color: var(--ink);
  border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; padding: .05em .4em;
}
.prose pre {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: .9rem;
  color: var(--ink);
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* Optional label: <pre data-lang="bash"> */
.prose pre[data-lang] { padding-top: 34px; }
.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: 9px; left: 18px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.prose pre code { font-size: inherit; }
/* File path above a block: <p class="file">~/<wbr>path/<wbr>file</p> (<wbr> lets it break after a slash) */
.prose .file { margin-bottom: .45em; font-family: var(--mono); font-size: .8rem; color: var(--ink-mute); overflow-wrap: break-word; }
/* Hand-marked tokens, no highlighter: <span class="c">comment</span>, <span class="p">$</span> prompt */
.prose pre .c { color: var(--ink-mute); }
.prose pre .p { color: var(--accent); user-select: none; }

/* Figures */
.prose figure { margin-left: 0; margin-right: 0; }
.prose img, .prose video { max-width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); }
.prose video { background: #000; }
/* Third-party player (YouTube): <div class="embed"><iframe …></iframe></div>, 16:9 */
.prose .embed { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.prose .embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.prose figcaption { margin-top: .6em; font-family: var(--mono); font-size: .76rem; color: var(--ink-mute); }

/* Tables */
.prose .table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .55em .8em; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-2); }

/* Post footer ------------------------------------------------------------ */

.post__foot { max-width: var(--measure); margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 560px) {
  .post-item { grid-template-columns: 1fr; padding: 22px 0; }
  .post-item__date { padding-top: 0; }
  .post-item__title a::before { display: none; }
  .prose { font-size: 1rem; line-height: 1.7; }
  .prose h2 { font-size: 1.32rem; }
  .prose pre { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; padding-left: 16px; padding-right: 16px; }
  .prose pre[data-lang]::before { left: 16px; }
}