/* ============================================================================
   blog.css — the archive and the reader, on the same type system as the rest.
   ========================================================================= */

/* ── archive ───────────────────────────────────────────────────────────── */

.arch-hero { padding-block: clamp(8rem, 24vh, 15rem) clamp(2rem, 5vw, 3.5rem); }

.arch-hero__title { font-size: var(--t-hero); }
.arch-hero__title .ln__i-mask:last-child { margin-left: clamp(0px, 7vw, 7rem); }

.arch-hero__row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: end; margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .arch-hero__row { grid-template-columns: 1.2fr 0.8fr; gap: 4rem; } }

.filters {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-block: 1.25rem; border-top: 1px solid var(--line);
}

.filters__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.search {
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid var(--line); padding: 0.4rem 0;
  min-width: min(100%, 260px); transition: border-color 0.3s ease;
}

.search:focus-within { border-color: var(--accent); }
.search span { font-family: var(--mono); font-size: var(--t-lbl); color: var(--accent); }
.search input { flex: 1; border: 0; background: transparent; outline: none; font-size: var(--t-sm); color: var(--ink); }
.search input::placeholder { color: var(--mute); }

.arch-list { padding-bottom: clamp(4rem, 12vh, 8rem); }

.blogs__empty { padding-block: 2.5rem; border-top: 1px solid var(--line); color: var(--mute); }
.blogs__empty b { color: var(--ink); font-weight: 500; }

/* ── article ───────────────────────────────────────────────────────────── */

.article { padding-block: clamp(6.5rem, 15vh, 9.5rem) clamp(4rem, 12vh, 7rem); }

.article__back { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.article__back:hover { color: var(--accent); }

.article__title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 400;
  font-size: clamp(2rem, 5.4vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.article__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem); padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.article__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }

.article__layout { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Grid items default to min-width:auto, so a wide diagram inside the prose
   column stretches the whole column — and the paragraphs with it. */
.article__layout > * { min-width: 0; }

@media (min-width: 1100px) {
  .article__layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 5rem; align-items: start; }
  .toc { position: sticky; top: 18vh; }
}

.toc { border-left: 1px solid var(--line); padding-left: 1.3rem; }
.toc .lbl { margin-bottom: 0.9rem; }
.toc a { display: block; font-size: 0.88rem; line-height: 1.45; color: var(--mute); padding-block: 0.4rem; transition: color 0.3s ease, transform 0.3s var(--ease); }
.toc a:hover { color: var(--ink); transform: translateX(3px); }
.toc a.is-on { color: var(--accent); }
.toc a[data-depth='3'] { padding-left: 0.9rem; font-size: 0.82rem; }

.article__nav { display: grid; grid-template-columns: 1fr; margin-top: clamp(3.5rem, 9vh, 6rem); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .article__nav { grid-template-columns: 1fr 1fr; } }

.article__nav a { padding: 1.6rem 0; display: flex; flex-direction: column; gap: 0.6rem; border-bottom: 1px solid var(--line); transition: color 0.3s ease; }
@media (min-width: 760px) { .article__nav a:last-child { text-align: right; align-items: flex-end; padding-left: 2rem; } }
.article__nav b { font-family: var(--serif); font-variation-settings: 'opsz' 30; font-weight: 400; font-size: 1.2rem; line-height: 1.12; letter-spacing: -0.012em; }
.article__nav a:hover { color: var(--accent); }

/* ── prose ─────────────────────────────────────────────────────────────── */

.prose { font-size: 1.09rem; line-height: 1.72; color: var(--ink-2); max-width: 70ch; }
.prose > * + * { margin-top: 1.3em; }

.prose h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 48;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.016em;
  color: var(--ink);
  margin-top: 2.4em; padding-top: 1.1em;
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

.prose h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 24;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 1.9em;
  scroll-margin-top: 6rem;
}

.prose h4 { font-family: var(--mono); font-size: var(--t-lbl); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 1.7em; }

.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); transition: text-decoration-color 0.3s ease; }
.prose a:hover { text-decoration-color: var(--accent); }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-family: var(--serif); font-variation-settings: 'opsz' 16; font-style: italic; font-size: 1.08em; color: var(--ink); }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ''; position: absolute; left: -1.15em; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--accent); font-family: var(--mono); font-size: 0.8em; }
.prose li + li { margin-top: 0.5em; }

.prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.1em 0 0.1em 1.4em;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36;
  font-style: italic;
  font-size: 1.4em;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.4em; }
.prose img, .prose video { width: 100%; height: auto; }

.prose code {
  font-family: var(--mono); font-size: 0.84em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 3px; padding: 0.12em 0.36em;
}

.prose pre {
  /* on the dark theme the page ground is already dark, so the block is a
     lifted panel rather than an inverted one */
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 0 0 4px 4px; padding: 1.3rem;
  overflow-x: auto; font-size: 0.86rem; line-height: 1.68; tab-size: 2;
}

.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--paper-2); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 4px 4px 0 0; padding: 0.6rem 1rem 0.2rem;
  font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--mute);
}

.code-head + pre { margin-top: 0 !important; }

.code-copy {
  border: 1px solid var(--line); background: transparent;
  color: var(--mute); font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.06em; border-radius: 100px; padding: 0.18rem 0.6rem; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.code-copy:hover, .code-copy.is-done { color: var(--accent); border-color: var(--accent); }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.94rem; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.9rem 0.7rem 0; text-align: left; vertical-align: top; }
.prose th { font-family: var(--mono); font-size: var(--t-lbl); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-bottom-color: var(--ink); }

.prose .anchor { color: var(--mute); text-decoration: none; margin-left: 0.35em; opacity: 0; font-size: 0.55em; vertical-align: super; transition: opacity 0.25s ease; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }

/* ── Prism, tuned for the dark block on warm paper ─────────────────────── */

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--mute); font-style: italic; }
.token.punctuation { color: var(--mute); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: #E0724C; }
:root:not([data-theme='light']) .token.property, :root:not([data-theme='light']) .token.tag,
:root:not([data-theme='light']) .token.constant, :root:not([data-theme='light']) .token.symbol,
:root:not([data-theme='light']) .token.deleted { color: #FF8A5C; }
.token.boolean, .token.number { color: #A8791F; }
:root:not([data-theme='light']) .token.boolean, :root:not([data-theme='light']) .token.number { color: #F2C078; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #5C8A46; }
:root:not([data-theme='light']) .token.selector, :root:not([data-theme='light']) .token.attr-name,
:root:not([data-theme='light']) .token.string, :root:not([data-theme='light']) .token.char,
:root:not([data-theme='light']) .token.builtin, :root:not([data-theme='light']) .token.inserted { color: #B9D9A1; }
.token.operator, .token.entity, .token.url, .token.variable { color: var(--ink-2); }
.token.atrule, .token.attr-value, .token.function, .token.class-name { color: #B5563C; }
:root:not([data-theme='light']) .token.atrule, :root:not([data-theme='light']) .token.attr-value,
:root:not([data-theme='light']) .token.function, :root:not([data-theme='light']) .token.class-name { color: #F5B0A0; }
.token.keyword { color: #3A7CA5; }
:root:not([data-theme='light']) .token.keyword { color: #97C9E9; }
.token.regex, .token.important { color: var(--accent); }
.token.important, .token.bold { font-weight: 700; }
.token.italic { font-style: italic; }

/* ── diagrams in prose ─────────────────────────────────────────────────── */

.prose figure.diagram {
  margin-block: 2.4em;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-2);
  overflow-x: auto;
}

.prose .diagram svg { width: 100%; min-width: 520px; height: auto; overflow: visible; display: block; }

/* one visual language, driven by the theme tokens */
.diagram .d-box        { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.diagram .d-ghost      { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.diagram .d-accent-box { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.diagram .d-accent-fill{ fill: var(--accent); stroke: none; }
.diagram .d-fill-rule  { fill: var(--mute); stroke: none; }
.diagram .d-rule       { fill: none; stroke: var(--mute); stroke-width: 1; }
.diagram .d-accent-line{ fill: none; stroke: var(--accent); stroke-width: 1.4; }

.diagram text { font-family: var(--mono); fill: var(--mute); }
.diagram .d-cap        { font-size: 11px; letter-spacing: 0.06em; }
.diagram .d-accent-cap { font-size: 11px; letter-spacing: 0.06em; fill: var(--accent); }
.diagram .d-key        { font-size: 15px; fill: var(--ink); letter-spacing: -0.01em; }
.diagram .d-on-accent  { font-size: 12px; fill: var(--on-accent); }

/* ── motion for diagrams ───────────────────────────────────────────────
   A small shared vocabulary, not per-post CSS. Everything here is killed
   by the global prefers-reduced-motion rule in base.css. */

.diagram .d-flow      { stroke-dasharray: 5 7; animation: d-march 1.1s linear infinite; }
.diagram .d-flow-slow { stroke-dasharray: 5 7; animation: d-march 2.8s linear infinite; }
.diagram .d-flow-fast { stroke-dasharray: 5 7; animation: d-march 0.5s linear infinite; }
.diagram .d-pulse     { animation: d-pulse 2.1s ease-in-out infinite; }
.diagram .d-blink     { animation: d-blink 1.1s steps(1) infinite; }
.diagram .d-grow      { transform-box: fill-box; transform-origin: left center; animation: d-grow 4s ease-in-out infinite; }
.diagram .d-sweep     { animation: d-sweep 9s linear infinite; }

.diagram .d-d1 { animation-delay: 0.2s; }
.diagram .d-d2 { animation-delay: 0.5s; }
.diagram .d-d3 { animation-delay: 0.9s; }
.diagram .d-d4 { animation-delay: 1.4s; }
.diagram .d-d5 { animation-delay: 1.9s; }
.diagram .d-d6 { animation-delay: 2.4s; }

@keyframes d-march { to { stroke-dashoffset: -24; } }
@keyframes d-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.22; } }
@keyframes d-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.12; } }
@keyframes d-grow  { 0% { transform: scaleX(0.04); } 62%, 100% { transform: scaleX(1); } }
@keyframes d-sweep { 0% { opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }