/* site/assets/blog.css — the blog's "stilled world" reading experience.
   Same palette and world as the landing page, quieted for long-form reading:
   Mono for chrome (brand), a self-hosted serif for body text (legibility). */

:root {
  --bg: #040508;
  --ink: #d8cfc2;               /* body text */
  --ink-dim: rgba(216, 207, 194, 0.60); /* ~5:1 on --bg — AA for the secondary reading text it carries */
  --ink-faint: rgba(216, 207, 194, 0.30); /* decorative only (dot separators, rules) */
  --warm: #ffe7c2;              /* accent / title / link hover — the point's light */
  --cool: #96aacd;             /* the lantern/terrain hue — rules & quiet marks */
  --panel: #0c0e15;             /* lifted surface for code */
  --rule: rgba(150, 170, 205, 0.16);
  --mono: "Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Border-box: the horizontal padding is INSIDE these widths (2rem each side at
     desktop), so --measure 42rem leaves ~36rem of text ≈ 65 characters per line
     at the body size — measured, not estimated. */
  --measure: 42rem;             /* prose reading measure (~65ch) */
  --wide: 52rem;                /* math / figures / code / tables bleed wider than the text */
}

@font-face { font-family: "Mono"; font-display: swap; font-weight: 400;
  src: url("/assets/fonts/mono.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-display: swap; font-weight: 400; font-style: normal;
  src: url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-display: swap; font-weight: 400; font-style: italic;
  src: url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-display: swap; font-weight: 500; font-style: normal;
  src: url("/assets/fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-display: swap; font-weight: 600; font-style: normal;
  src: url("/assets/fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-display: swap; font-weight: 600; font-style: italic;
  src: url("/assets/fonts/newsreader-latin-600-italic.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.blog {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: clamp(17px, 1.05rem + 0.2vw, 20px);
  line-height: 1.72; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Entrance: fade up from black, like the landing page. */
body.blog { opacity: 0; animation: page-in 1.2s ease forwards; }
@keyframes page-in { to { opacity: 1; } }

/* The quiet terrain sits farthest back; a soft scrim seats the text over it. */
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: -2; }
body.blog::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 75% at 50% 42%, rgba(4, 5, 8, 0.72), rgba(4, 5, 8, 0) 78%);
}

/* Return-home identity, top-left, echoing the wordmark. */
.home-return {
  position: fixed; top: clamp(14px, 3.2vh, 30px); left: clamp(16px, 4vw, 44px); z-index: 3;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.32em; text-transform: lowercase;
  color: var(--ink); opacity: 0.42; text-decoration: none; text-shadow: 0 0 10px rgba(4, 5, 8, 0.9);
  transition: opacity 400ms ease, color 400ms ease;
}
.home-return:hover, .home-return:focus-visible { opacity: 0.9; color: var(--warm); }
.home-return .hr-arrow { margin-right: 0.15em; opacity: 0.7; }

/* Once the column (or a wide table/figure) reaches the left margin, a fixed link
   would sit on top of the scrolling text — so put it back in the flow instead. */
@media (max-width: 72rem) {
  .home-return {
    position: static; display: inline-block;
    margin: clamp(1.4rem, 4vh, 2rem) 0 0 clamp(1.3rem, 6vw, 2rem);
  }
  .reading { padding-top: clamp(1.8rem, 4vh, 2.6rem); }
}

/* Reading column ---------------------------------------------------------- */
.reading {
  max-width: var(--measure); margin: 0 auto;
  padding: clamp(4.5rem, 12vh, 8rem) clamp(1.3rem, 6vw, 2rem) 5rem;
}

.post-head { margin-bottom: 2.6rem; }
/* Titles are the serif's job, not Mono's. Mono on this site is a *label* voice —
   small and letterspaced, like the wordmark; blown up to headline size it reads
   as a terminal banner and fights the hush. Warm, because on the landing page
   warm is the colour of the light: the title is what the lantern has found. */
.post-head h1 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; line-height: 1.13;
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.05rem); color: var(--warm);
  margin: 0 0 0.85rem; text-wrap: balance;
}
/* The standing line under the title — the essay's dek, set in the reading serif. */
.post-dek {
  font-style: italic; font-size: 1.08rem; line-height: 1.6; color: var(--ink-dim);
  margin: 0 0 1.1rem; max-width: 34rem; text-wrap: pretty; /* deliberately shorter than the body */
}
.post-meta {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0;
}

/* Body typography --------------------------------------------------------- */
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.4rem; }
/* Section headings speak in the serif too. Mono set as a whole sentence reads
   like a code comment dropped into the prose — and it wrapped to two lines on a
   phone. Warm italic lets a section glow faintly under the same light as the
   title without competing with it; h3 drops to roman ink, a step quieter. */
.post-body h2, .post-body h3 {
  font-family: var(--serif); letter-spacing: 0; line-height: 1.28; scroll-margin-top: 5rem;
}
.post-body h2 {
  font-style: italic; font-weight: 400; font-size: 1.46rem;
  color: var(--warm); opacity: 0.92; margin: 3rem 0 0.9rem;
}
.post-body h3 { font-weight: 600; font-size: 1.12rem; color: var(--ink); margin: 2.2rem 0 0.7rem; }

.post-body a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: rgba(255, 231, 194, 0.35); text-underline-offset: 0.18em;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.post-body a:hover { color: var(--warm); text-decoration-color: var(--warm); }

.post-body strong { color: var(--warm); font-weight: 600; }
.post-body em { font-style: italic; }

.post-body blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.4rem; border-left: 2px solid var(--rule);
  font-style: italic; color: var(--ink-dim);
}
.post-body blockquote em { color: var(--ink); }

.post-body ul, .post-body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.post-body li { margin: 0.3rem 0; }
/* Markers are punctuation, not accents: they stay in the ink family and recede.
   (Cool is reserved for what it means on the landing page — the cold terrain and
   the lantern's light — so it never shows up as stray blue inside the prose.) */
.post-body li::marker { color: var(--ink-dim); }

.post-body hr { border: 0; height: 1px; background: var(--rule); margin: 2.6rem 0; }

/* Wide media — math, figures, and code bleed symmetrically wider than the
   text measure, centered on the column axis (clamped to the viewport). */
.post-body > figure,
.post-body > pre,
.post-body > .table-wrap,
.post-body > p.katex-block {
  width: min(var(--wide), 92vw);
  margin-left: 50%; transform: translateX(-50%);
  margin-top: 1.9rem; margin-bottom: 1.9rem;
}

/* Figures ----------------------------------------------------------------- */
.post-body figure { text-align: center; }
.post-body img {
  max-width: 100%; height: auto; border-radius: 3px;
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.5); border: 1px solid rgba(150, 170, 205, 0.08);
}
.post-body figcaption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-dim);
  margin-top: 0.9rem; line-height: 1.5;
}

/* Code -------------------------------------------------------------------- */
.post-body code {
  font-family: var(--mono); font-size: 0.86em;
  background: rgba(150, 170, 205, 0.08); padding: 0.12em 0.38em; border-radius: 3px; color: #e4d9c6;
}
.post-body pre.code, .post-body pre {
  padding: 1.05rem 1.2rem; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 5px;
  font-size: 0.82rem; line-height: 1.62;
}
.post-body pre code { background: none; padding: 0; color: #cbc3b4; font-size: inherit; }

/* Muted, on-palette syntax theme (warm + cool + ink; nothing loud). */
.hljs-comment, .hljs-quote { color: #828693; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #d6a878; }
.hljs-string, .hljs-meta-string { color: #9fb59f; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #8fa6c4; }
.hljs-title, .hljs-name, .hljs-section, .hljs-title.function_ { color: #e7dcc8; }
.hljs-built_in, .hljs-class .hljs-title, .hljs-type { color: #b7c3d8; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #c9b79a; }
.hljs-params { color: #bdb6a8; }
.hljs-meta { color: #828693; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* Math -------------------------------------------------------------------- */
.post-body p.katex-block { text-align: center; }
.post-body .katex-display { margin: 0; overflow-x: auto; overflow-y: hidden; padding: 0.3rem 0.2rem; }
.post-body .katex { color: var(--ink); }
/* On narrow screens an equation wider than the column would clip on the LEFT and be
   unreachable when centered; left-align so overflow accrues on the scrollable right edge. */
@media (max-width: 48rem) {
  .post-body p.katex-block, .post-body .katex-display { text-align: left; }
}

/* Tables ------------------------------------------------------------------ */
.post-body > .table-wrap { overflow-x: auto; }
.post-body table {
  border-collapse: collapse; width: 100%; font-size: 0.92rem;
}
.post-body td:first-child, .post-body th:first-child { white-space: nowrap; }
.post-body th, .post-body td { padding: 0.5rem 0.9rem; text-align: left; border-bottom: 1px solid var(--rule); }
.post-body th {
  font-family: var(--mono); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-dim);
}
.post-body td { color: var(--ink); }

/* Footnotes --------------------------------------------------------------- */
.post-body hr.footnotes-sep { display: none; } /* .footnotes' border-top is the rule */
.post-body .footnotes {
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--ink-dim);
}
.post-body .footnotes ol { padding-left: 1.2rem; }
.post-body .footnotes li { margin: 0.6rem 0; }
.post-body .footnote-ref a {
  text-decoration: none; color: var(--warm); opacity: 0.78; font-size: 0.78em; padding: 0 0.1em;
  vertical-align: super; line-height: 0;
}
.post-body .footnote-ref a:hover { opacity: 1; }
.post-body .footnote-backref { text-decoration: none; color: var(--ink-dim); }
.post-body .footnote-backref:hover { color: var(--warm); }

/* Post footer ------------------------------------------------------------- */
.post-foot {
  margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: lowercase;
}
.post-foot a { color: var(--ink-dim); text-decoration: none; transition: color 250ms ease; }
.post-foot a:hover { color: var(--warm); }
.post-foot .dot { color: var(--ink-faint); margin: 0 0.7em; }

/* Index ------------------------------------------------------------------- */
.index-head { margin-bottom: 2.8rem; }
.index-head h1 {
  font-family: var(--mono); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
  letter-spacing: 0.06em; color: var(--warm); text-transform: lowercase; margin: 0 0 0.5rem;
}
.index-sub { font-style: italic; color: var(--ink-dim); margin: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.pl-item { border-top: 1px solid var(--rule); }
.pl-item:last-child { border-bottom: 1px solid var(--rule); }
.pl-item a {
  display: block; padding: 1.5rem 0.4rem; text-decoration: none; color: inherit;
  transition: background 300ms ease;
}
.pl-item a:hover, .pl-item a:focus-visible {
  background: radial-gradient(120% 120% at 20% 50%, rgba(150, 170, 205, 0.06), rgba(150, 170, 205, 0) 70%);
}
.pl-title {
  display: block; font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--ink);
  transition: color 250ms ease, text-shadow 250ms ease;
}
.pl-item a:hover .pl-title, .pl-item a:focus-visible .pl-title {
  color: var(--warm); text-shadow: 0 0 22px rgba(255, 231, 194, 0.28);
}
.pl-meta {
  display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0.5rem 0 0.4rem;
}
.pl-summary { display: block; font-style: italic; color: var(--ink-dim); line-height: 1.6; }
.empty { color: var(--ink-dim); font-style: italic; }

/* Focus & motion ---------------------------------------------------------- */
:focus-visible { outline: 2px solid rgba(255, 240, 220, 0.85); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.blog { opacity: 1; animation: none; }
  * { transition: none !important; }
}