/* blog.yalla.dev — shared stylesheet (mocks-1, lisi theme)
   Tokens: copied verbatim from lisi docs/design/tokens.css (--lisi-*).
   Blog-only additions are prefixed --blog-*. Fonts are self-hosted from ./fonts; no network. */

@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("fonts/sg-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/sg-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("fonts/sg-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jbm-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("fonts/jbm-500.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("fonts/jbm-600.woff2") format("woff2"); }

:root { color-scheme: light dark; }

:root {
  /* ---------- lisi tokens (verbatim) ---------- */
  --lisi-ground:         light-dark(oklch(0.972 0.005 250), oklch(0.165 0.026 256));
  --lisi-surface:        light-dark(oklch(0.995 0.002 250), oklch(0.192 0.028 256));
  --lisi-surface-sunk:   light-dark(oklch(0.952 0.007 250), oklch(0.145 0.024 256));
  --lisi-surface-raised: light-dark(oklch(0.935 0.012 250), oklch(0.235 0.032 256));
  --lisi-ink:            light-dark(oklch(0.225 0.032 258), oklch(0.950 0.010 250));
  --lisi-ink-2:          light-dark(oklch(0.385 0.030 258), oklch(0.820 0.020 252));
  --lisi-ink-3:          light-dark(oklch(0.480 0.028 258), oklch(0.715 0.024 254));
  --lisi-ink-inverse:    light-dark(oklch(0.985 0.004 250), oklch(0.180 0.028 256));
  --lisi-rule-soft:      light-dark(oklch(0.915 0.008 250), oklch(0.255 0.026 256));
  --lisi-rule:           light-dark(oklch(0.845 0.012 250), oklch(0.330 0.030 256));
  --lisi-rule-strong:    light-dark(oklch(0.300 0.034 258), oklch(0.640 0.030 254));
  --lisi-fail:           light-dark(oklch(0.520 0.165 27),  oklch(0.760 0.120 25));
  --lisi-info:           light-dark(oklch(0.480 0.100 232), oklch(0.790 0.080 228));
  --lisi-focus-ring:     0 0 0 2px var(--lisi-ground), 0 0 0 4px var(--lisi-ink);

  --lisi-font:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --lisi-prose: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lisi-prose-reply: 1rem;       /* 16 */
  --lisi-prose-lead:  1.0625rem;  /* 17 */
  --lisi-prose-title: 1.25rem;    /* 20 */
  --lisi-text-micro:  0.6875rem;  /* 11 */
  --lisi-text-label:  0.75rem;    /* 12 */
  --lisi-text-data:   0.8125rem;  /* 13 */
  --lisi-text-heading: 1.375rem;  /* 22 */
  --lisi-radius-1: 2px;
  --lisi-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lisi-dur-hover: 120ms;

  /* ---------- blog additions: long-form reading ---------- */
  --blog-body:      var(--lisi-prose-lead);  /* 17 px on a phone */
  --blog-leading:   1.65;
  --blog-measure:   34.5em;                  /* 621 px at 18 px: measured ~67 characters per line (mocks-2) */
  --blog-gutter:    1.25rem;
  --blog-h1:        1.75rem;                 /* 28 */
  --blog-h2:        1.5rem;                  /* 24 */
  --blog-h3:        1.3125rem;               /* 21 */
}

@media (min-width: 45rem) {
  :root {
    --blog-body:   1.125rem;                   /* 18 px on desktop */
    --blog-gutter: 2rem;
    --blog-h1:     2rem;                       /* 32 */
    --blog-h2:     1.625rem;                   /* 26 */
    --blog-h3:     var(--lisi-text-heading);   /* 22 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --lisi-dur-hover: 0ms; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lisi-ground);
  color: var(--lisi-ink);
  font: 400 var(--blog-body) / var(--blog-leading) var(--lisi-prose);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lisi-ink); color: var(--lisi-ink-inverse); }
* { scrollbar-width: thin; scrollbar-color: var(--lisi-rule) transparent; }

.wrap {
  /* the measure is set in body ems so it tracks the reading size */
  max-width: calc(var(--blog-measure) + 2 * var(--blog-gutter));
  margin: 0 auto;
  padding: 0 var(--blog-gutter);
}

/* Links, focus, icons ------------------------------------------------- */

a {
  color: var(--lisi-info);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklch, var(--lisi-info) 40%, transparent);
  transition: text-decoration-color var(--lisi-dur-hover) var(--lisi-ease);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: var(--lisi-focus-ring); border-radius: var(--lisi-radius-1); }

svg.i {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* Mono meta: dates, handles, counts, nav -------------------------------- */

.meta {
  font: 400 var(--lisi-text-micro) / 1.5 var(--lisi-font);
  color: var(--lisi-ink-3);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font: 500 var(--lisi-text-label) / 1.4 var(--lisi-font);
  color: var(--lisi-ink-2);
  text-decoration: none;
}
.back-link:hover { color: var(--lisi-ink); text-decoration: underline; text-decoration-color: var(--lisi-rule); }

/* Link chip (lisi): hairline, 2 px radius, 11 px ink-2 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--lisi-rule);
  border-radius: var(--lisi-radius-1);
  font: 400 var(--lisi-text-micro) / 1.4 var(--lisi-font);
  color: var(--lisi-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--lisi-dur-hover) var(--lisi-ease), color var(--lisi-dur-hover) var(--lisi-ease);
}
.chip:hover { border-color: var(--lisi-rule-strong); color: var(--lisi-ink); }
.chip svg.i { width: 12px; height: 12px; }

/* Section head (lisi .nowh): mono title, faint count, hairline to the edge */
.nowh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 var(--lisi-text-label) / 1.4 var(--lisi-font);
  color: var(--lisi-ink-2);
}
.nowh .n { color: var(--lisi-ink-3); font-weight: 400; }
.nowh .fill { flex: 1; height: 1px; background: var(--lisi-rule-soft); min-width: 16px; }

/* Site header / footer ------------------------------------------------- */

.site-header { padding: 48px 0 32px; }
@media (min-width: 45rem) { .site-header { padding: 96px 0 48px; } }

.site-title {
  margin: 0;
  font: 600 var(--blog-h1) / 1.15 var(--lisi-prose);
  letter-spacing: -0.012em;
}
.site-title a { color: inherit; text-decoration: none; }
.site-sub { margin: 8px 0 0; }

.site-footer {
  margin-top: 96px;
  padding: 16px 0 48px;
  border-top: 1px solid var(--lisi-rule-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.site-footer .meta a { color: var(--lisi-ink-3); }

/* Index ---------------------------------------------------------------- */

.posts-head { margin-bottom: 8px; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 20px 0 22px; border-bottom: 1px solid var(--lisi-rule-soft); }
.post-list h2 {
  margin: 0;
  font: 600 var(--lisi-prose-title) / 1.3 var(--lisi-prose);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.post-list h2 a { color: var(--lisi-ink); text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--lisi-rule-strong); }
.post-list p {
  margin: 4px 0 0;
  font-size: var(--lisi-prose-reply);
  line-height: 1.5;
  color: var(--lisi-ink-2);
}
.post-list .meta { display: block; margin-top: 8px; }

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

.post-nav { padding-top: 24px; }
@media (min-width: 45rem) { .post-nav { padding-top: 48px; } }

.post-header { margin: 32px 0 40px; }
@media (min-width: 45rem) { .post-header { margin: 48px 0 48px; } }
.post-header h1 {
  margin: 0;
  font: 600 var(--blog-h1) / 1.15 var(--lisi-prose);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.post-header .meta { margin-top: 12px; }

.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose h2, .prose h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
.prose h2 { font-size: var(--blog-h2); line-height: 1.2; margin-top: 2em; }
.prose h3 { font-size: var(--blog-h3); line-height: 1.25; margin-top: 1.75em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.5em; }
.prose em { font-style: normal; font-weight: 500; }  /* upright emphasis (BDA; no true italic) */
.prose strong { font-weight: 600; }

.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--lisi-ink-3); }

.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1em;
  border-left: 2px solid var(--lisi-rule);
  color: var(--lisi-ink-2);
}

.prose code {
  font-family: var(--lisi-font);
  font-size: 0.8125em;
  background: var(--lisi-surface-sunk);
  padding: 0.1em 0.3em;
  border-radius: var(--lisi-radius-1);
}
.prose pre {
  font: 400 var(--lisi-text-data) / 1.6 var(--lisi-font);
  background: var(--lisi-surface-sunk);
  border: 1px solid var(--lisi-rule-soft);
  padding: 16px;
  border-radius: 0;
  overflow-x: auto;
  tab-size: 2;
}
.prose pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

/* Comments (Bluesky) --------------------------------------------------- */

.comments { margin-top: 64px; }
.comments-head { display: flex; align-items: center; gap: 8px; }
.comments-head .nowh { flex: 1; }

.comments-status { margin: 16px 0 0; }
.comments-status.is-empty { font: 400 var(--lisi-text-data) / 1.5 var(--lisi-font); color: var(--lisi-ink-3); }
.comments-status.is-loading { font: 400 var(--lisi-text-data) / 1.5 var(--lisi-font); color: var(--lisi-ink-3); min-height: 120px; }
.comments-status.is-error { font: 400 var(--lisi-text-label) / 1.5 var(--lisi-font); color: var(--lisi-ink-2); }
.comments-status .w { color: var(--lisi-fail); }

.link-button {
  font: inherit;
  color: var(--lisi-info);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklch, var(--lisi-info) 40%, transparent);
}
.link-button:hover { text-decoration-color: currentColor; }

.replies { list-style: none; margin: 0; padding: 0; }
.comments > .replies { margin-top: 8px; }
.comments > .replies > .reply { border-bottom: 1px solid var(--lisi-rule-soft); padding: 16px 0; }
.replies .replies {
  margin: 12px 0 0 15px;
  padding-left: 16px;
  border-left: 1px solid var(--lisi-rule-soft);
}
.replies .replies .reply + .reply { margin-top: 12px; }
.replies .replies .replies { margin-left: 11px; padding-left: 12px; }

.reply-card { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; }
.replies .replies .reply-card { grid-template-columns: 24px 1fr; column-gap: 10px; }

.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--lisi-radius-1);
  background: var(--lisi-surface-raised);   /* initials only: no avatar images, no Bluesky CDN */
  color: var(--lisi-ink-3);
  font: 500 var(--lisi-text-micro) / 1 var(--lisi-font);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.reply-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  font: 400 var(--lisi-text-micro) / 1.5 var(--lisi-font);
  color: var(--lisi-ink-3);
}
.reply-name { font: 500 var(--lisi-text-data) / 1.4 var(--lisi-prose); color: var(--lisi-ink); }
.reply-meta a { color: inherit; text-decoration: none; }
.reply-meta a:hover { text-decoration: underline; }

.reply-text {
  margin: 4px 0 0;
  font: 400 var(--lisi-prose-reply) / 1.55 var(--lisi-prose);
  color: var(--lisi-ink);
  overflow-wrap: anywhere;
}
@media (max-width: 44.99rem) { .reply-text { font-size: 0.9375rem; } }

/* The live client swaps loading/error states inside this container. */
#comments-content > .replies { margin-top: 8px; }
#comments-content > .replies > .reply { border-bottom: 1px solid var(--lisi-rule-soft); padding: 16px 0; }
/* Preserve every returned reply; stop adding indentation after three levels. */
.replies .replies .replies .replies { margin-left: 0; padding-left: 0; border-left: 0; }
.reply-card > div { min-width: 0; }
.reply-meta { overflow-wrap: anywhere; }