/* juicerblog — a hand-coded blog theme for juicer.
 *
 * Conventions follow juicerdocs: CSS variables for tokens, [data-theme="dark"]
 * overrides, semantic .juicerblog-* class names. No utility framework.
 *
 * Default palette is warm-neutral (cream paper + deep ink + amber accent) —
 * pleasant out of the box, easy to override per-site via site.toml. Body type
 * is a serif stack so prose reads like a blog post; headings stay serif too
 * for tonal cohesion. */

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Brand */
  --brand:        #c2410c;          /* amber-700 */
  --brand-strong: #9a3412;          /* amber-800 */
  --brand-soft:   #fed7aa;          /* amber-200 */
  --accent:       #4338ca;          /* indigo-700 (links) */
  --leaf:         #16a34a;          /* green-600 (success/badges) */

  /* Surfaces */
  --bg:        #fdfcf8;             /* cream paper */
  --surface:   #ffffff;             /* card background */
  --ink:       #1c1917;             /* deep ink for body text */
  --ink-soft:  #44403c;             /* secondary text */
  --ink-faint: #78716c;             /* meta text */
  --rule:      #e7e5e4;             /* hairlines */
  --rule-soft: #f5f5f4;             /* subtler hairlines */

  /* Code */
  --code-bg:     #f5f5f4;
  --code-border: #e7e5e4;
  --code-ink:    #1c1917;

  /* Type */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Iowan Old Style", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif;
  --font-mono:    "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace;

  /* Sizing */
  --measure:      38rem;            /* prose column width */
  --gutter:       1.5rem;
  --gutter-wide:  3rem;

  /* Radii + transitions */
  --radius:       0.375rem;
  --radius-lg:    0.625rem;
  --transition:   0.15s ease;
}

[data-theme="dark"] {
  --brand:        #fb923c;          /* amber-400 */
  --brand-strong: #fdba74;          /* amber-300 */
  --brand-soft:   rgba(251, 146, 60, 0.18);
  --accent:       #a5b4fc;          /* indigo-300 */
  --leaf:         #4ade80;          /* green-400 */

  --bg:        #1c1917;             /* deep ink */
  --surface:   #292524;
  --ink:       #fafaf9;
  --ink-soft:  #d6d3d1;
  --ink-faint: #a8a29e;
  --rule:      #44403c;
  --rule-soft: #292524;

  --code-bg:     #292524;
  --code-border: #44403c;
  --code-ink:    #fafaf9;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}
a:hover { color: var(--brand); }

img, video, svg { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}
code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 0.1em 0.35em;
  color: var(--code-ink);
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  overflow-x: auto;
  line-height: 1.55;
}
pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1.125rem;
  border-left: 3px solid var(--brand);
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================================
   Layout shell
   ============================================================ */
.juicerblog-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.juicerblog-main {
  flex: 1;
  max-width: 64rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Prose column — the readable measure for post bodies + lists. */
.juicerblog-prose {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ============================================================
   Topbar
   ============================================================ */
.juicerblog-topbar {
  border-bottom: 1px solid var(--rule);
  padding: 1.25rem var(--gutter);
  background: var(--bg);
}
.juicerblog-topbar-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.juicerblog-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.juicerblog-brand:hover { color: var(--brand); }
.juicerblog-brand-logo {
  width: 1.75rem;
  height: 1.75rem;
}
.juicerblog-brand-name { display: inline; }
.juicerblog-tagline {
  color: var(--ink-faint);
  font-size: 0.95rem;
  font-style: italic;
}
.juicerblog-nav {
  display: flex;
  gap: 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.juicerblog-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}
.juicerblog-nav a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   Homepage variant (layout: home on _index.md)
   ============================================================
   Distinct shape from `folder.html`: hero + curated recent strip
   + tag-cloud cluster, with a link out to /archive/ for the full
   chronological list. The hero gives the site a face; the recent
   strip stops at five so the page doesn't become a paginated
   archive in disguise. */
.juicerblog-hero {
  max-width: var(--measure);
  margin: 2.5rem auto 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--rule);
}
.juicerblog-hero-title {
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.375rem;
  color: var(--ink);
}
.juicerblog-hero-tagline {
  font-size: 1.125rem;
  color: var(--brand);
  font-style: italic;
  margin: 0 0 1.25rem;
}
.juicerblog-hero-intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.juicerblog-hero-intro p { margin: 0; }

.juicerblog-home-section-head {
  max-width: var(--measure);
  margin: 2.5rem auto 0.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.juicerblog-home-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.juicerblog-home-section-link {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  flex-shrink: 0;
}
.juicerblog-home-section-link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The home post list overrides the default top margin so it sits
   tight under its own section head instead of carrying folder.html's
   `margin: 2rem auto` above. */
.juicerblog-home-recent .juicerblog-postlist,
.juicerblog-home-browse .juicerblog-tag-cloud {
  margin-top: 0.25rem;
}

.juicerblog-home-tag-cloud {
  margin-bottom: 3rem;
}

@media (max-width: 640px) {
  .juicerblog-hero-title { font-size: 2rem; }
}

/* ============================================================
   Home / archive — post list
   ============================================================ */
.juicerblog-home-intro {
  padding: 2rem 0 1rem;
  max-width: var(--measure);
  margin: 0 auto;
}
.juicerblog-home-intro h1 {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.015em;
}

.juicerblog-postlist {
  list-style: none;
  padding: 0;
  margin: 2rem auto;
  max-width: var(--measure);
}
.juicerblog-postlist li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.juicerblog-postlist li:last-child { border-bottom: 0; }

.juicerblog-postlist-title {
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.juicerblog-postlist-title a {
  color: var(--ink);
  text-decoration: none;
}
.juicerblog-postlist-title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-postlist-summary {
  margin: 0.5rem 0;
  color: var(--ink-soft);
}
.juicerblog-postlist-meta {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-faint);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.juicerblog-postlist-meta time { color: inherit; }
.juicerblog-postlist-meta .juicerblog-sep { color: var(--rule); }

/* ============================================================
   Single-post byline + series badge
   ============================================================
   The byline lives between the title and the post-meta line. Avatars
   stack with a small negative margin when multi-author so they read as
   "the people behind this" without taking three rows of vertical space.
   The series badge — when the post is part of one — sits below the
   byline as a soft pill that names the series and the position. */
.juicerblog-byline {
  max-width: var(--measure);
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.juicerblog-byline-avatars {
  display: flex;
  flex-shrink: 0;
}
.juicerblog-byline-avatar-link {
  display: inline-block;
  line-height: 0;            /* kill the inline-baseline gap under <img> */
  border-radius: 9999px;
  transition: transform var(--transition);
}
.juicerblog-byline-avatar-link:hover {
  transform: translateY(-1px);
}
.juicerblog-byline-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid var(--bg);
  object-fit: cover;
  background: var(--rule-soft);
}
/* Multi-author overlap — second avatar slides left over the first, etc. */
.juicerblog-byline-avatar-link + .juicerblog-byline-avatar-link {
  margin-left: -0.625rem;
}
.juicerblog-byline-line { margin: 0; }
.juicerblog-byline-name {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.juicerblog-byline-name:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.juicerblog-series-badge {
  max-width: var(--measure);
  margin: 0 auto 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--brand-strong);
  width: fit-content;
}
.juicerblog-series-badge-name { font-weight: 600; }
.juicerblog-series-badge-sep { color: color-mix(in srgb, var(--brand) 40%, transparent); }
.juicerblog-series-badge-pos { font-variant-numeric: tabular-nums; }

[data-theme="dark"] .juicerblog-series-badge {
  /* The amber-soft token is already a low-alpha overlay in dark mode;
     just bump the brand-strong text color so it sits above it cleanly. */
  color: var(--brand-strong);
}

/* ============================================================
   Single post
   ============================================================ */
.juicerblog-post {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 0 1.5rem;
}
.juicerblog-post-title {
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}
.juicerblog-post-meta {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.juicerblog-post-meta .juicerblog-sep { color: var(--rule); }

.juicerblog-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.juicerblog-content > * + * { margin-top: 1.25rem; }

/* Prose-link polish — keep the always-visible underline (WCAG) but grow
   it on hover. Subtle: 1px → 2px thickness and a 1px lift toward the
   text. Reads as "the link reacts" without the cartoonish color flip. */
.juicerblog-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    text-decoration-thickness var(--transition),
    text-underline-offset    var(--transition),
    color                    var(--transition);
}
.juicerblog-content a:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.juicerblog-content h2 {
  font-size: 1.625rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}
.juicerblog-content h3 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
}
.juicerblog-content h4 {
  font-size: 1.0625rem;
  margin: 1.5rem 0 0.5rem;
}
.juicerblog-content p { margin: 0 0 1.25rem; }
.juicerblog-content ul,
.juicerblog-content ol { margin: 0 0 1.25rem 1.25rem; padding: 0; }
.juicerblog-content li { margin: 0.25rem 0; }

.juicerblog-content figure {
  margin: 1.75rem 0;
  text-align: center;
}
.juicerblog-content figure figcaption {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: 0.5rem;
  font-family: var(--font-sans);
}

.juicerblog-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}
.juicerblog-content th,
.juicerblog-content td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.juicerblog-content th {
  background: var(--rule-soft);
  font-weight: 600;
}

/* ============================================================
   Tag pills + meta
   ============================================================ */
.juicerblog-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.juicerblog-tag {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.juicerblog-tag:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* ============================================================
   Tag list / archive
   ============================================================ */
.juicerblog-archive-title {
  font-size: 1.875rem;
  margin: 2rem auto 0.5rem;
  max-width: var(--measure);
  letter-spacing: -0.01em;
}
.juicerblog-archive-sub {
  margin: 0 auto 2rem;
  max-width: var(--measure);
  color: var(--ink-faint);
  font-style: italic;
}

.juicerblog-tag-cloud {
  max-width: var(--measure);
  margin: 1.5rem auto 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.juicerblog-tag-cloud .juicerblog-tag {
  font-size: 0.9375rem;
  padding: 0.25rem 0.875rem;
}
.juicerblog-tag-cloud .juicerblog-tag-count {
  color: var(--ink-faint);
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

/* ============================================================
   Site-wide archive (layout: archive)
   ============================================================
   Year sections with a tight per-post line — date + title, no summary
   or reading time. Date column is left-aligned and tabular for a clean
   vertical rhythm; titles can wrap. Year heading is itself a link to
   the deeper /<year>/ index for the richer per-year view. */
.juicerblog-archive-year {
  max-width: var(--measure);
  margin: 2.25rem auto 0;
}
.juicerblog-archive-year-title {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--rule);
}
.juicerblog-archive-year-title a {
  color: var(--ink);
  text-decoration: none;
}
.juicerblog-archive-year-title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.juicerblog-archive-year-count {
  color: var(--ink-faint);
  font-size: 0.875rem;
  font-weight: 400;
  font-family: var(--font-sans);
  margin-left: 0.5rem;
}

.juicerblog-archive-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.juicerblog-archive-list li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding: 0.375rem 0;
  font-size: 0.95rem;
  align-items: baseline;
}
.juicerblog-archive-date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.juicerblog-archive-link {
  color: var(--ink);
  text-decoration: none;
}
.juicerblog-archive-link:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .juicerblog-archive-list li {
    grid-template-columns: 1fr;
    gap: 0.125rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
}

/* ============================================================
   Empty state — shown when an archive (folder, tag-page, author-page,
   date-month) has no posts to render. Either the list is genuinely
   empty or every entry got filtered out by `static: true`. */
.juicerblog-empty {
  max-width: var(--measure);
  margin: 2.5rem auto;
  text-align: center;
  font-style: italic;
  color: var(--ink-faint);
  padding: 1.5rem 1rem;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  background: var(--rule-soft);
}
.juicerblog-empty-row {
  /* When the empty state lives inside an <ol class="juicerblog-postlist">
     wrapper (tag-page / author-page / date-month all do this so the list
     bullets/dividers don't render around the message), strip the list
     styling for that one row. */
  list-style: none;
  border-bottom: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   Pagination
   ============================================================ */
.juicerblog-paginator {
  max-width: var(--measure);
  margin: 2rem auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--ink-faint);
}
.juicerblog-paginator a {
  color: var(--accent);
  text-decoration: none;
}
.juicerblog-paginator a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-paginator-pos {
  font-variant-numeric: tabular-nums;
}

/* "In this series" sidebar — shown when .page.series is set. */
.juicerblog-series {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface-alt, var(--bg));
}
.juicerblog-series-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--brand);
}
.juicerblog-series-name {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
  color: var(--muted);
}
.juicerblog-series-list {
  margin: 0;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
}
.juicerblog-series-item.is-current {
  font-weight: 600;
}

/* Prev / next at the bottom of single posts. */
.juicerblog-prev-next {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.juicerblog-prev-next-link {
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-sans);
}
.juicerblog-prev-next-link .juicerblog-prev-next-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.juicerblog-prev-next-link .juicerblog-prev-next-title {
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1rem;
}
.juicerblog-prev-next-link:hover .juicerblog-prev-next-title { color: var(--brand); }
.juicerblog-prev-next > .juicerblog-prev-next-next {
  text-align: right;
}

/* ============================================================
   Footer
   ============================================================ */
.juicerblog-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem var(--gutter);
  margin-top: 3rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.juicerblog-footer-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.juicerblog-footer a { color: inherit; }
.juicerblog-footer a:hover { color: var(--brand); }

/* ============================================================
   Code-block enhancements (language label + copy button)
   ============================================================
   Both surfaces require `<pre>` to be a positioning context — already
   the case once these absolutely-position children are added below.
   The language label and copy button are wired by juicerblog.js:
   - language label = `data-language="X"` lifted from `code.language-X`
   - copy button    = `<button class="juicerblog-copy-btn">Copy</button>`
                      appended as the last child of the <pre>. */
.juicerblog-content pre {
  position: relative;
  /* Make headroom for the small uppercase language chip + the copy
     button, which both sit above the first code line. Plain blocks
     without a language still benefit visually from the headroom — keep
     it consistent across all <pre>s rather than branching on attr. */
  padding-top: 1.875rem;
}
.juicerblog-content pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0.5rem;
  left: 1.125rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  pointer-events: none;
}

.juicerblog-copy-btn {
  position: absolute;
  top: 0.375rem;
  right: 0.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  cursor: pointer;
  /* Keeps the button out of the way until the user hovers/focuses the
     <pre>. Becomes opaque on hover so it doesn't compete with the code
     for visual weight while reading. */
  opacity: 0;
  transition: opacity var(--transition), color var(--transition),
              border-color var(--transition), background var(--transition);
}
.juicerblog-content pre:hover .juicerblog-copy-btn,
.juicerblog-copy-btn:focus-visible {
  opacity: 1;
}
.juicerblog-copy-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}
/* Reading-progress hairline — fixed 2px bar at the very top of the
   viewport, fills left-to-right via scaleX as the reader scrolls
   through a dated post. Only attached by juicerblog.js when the
   page actually has a `.juicerblog-post--dated` article. */
.juicerblog-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 1000;
  pointer-events: none;
  /* Smooth out the per-frame jumps on fast scrolls. */
  transition: transform 60ms linear;
}

.juicerblog-copy-btn.is-copied {
  color: var(--leaf);
  border-color: var(--leaf);
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
  /* Force visibility once the user actually clicked, regardless of
     whether the cursor is still over the <pre>. */
  opacity: 1;
}

/* ============================================================
   Syntax highlighting
   ============================================================
   Server-side via the `highlighter` lib (TextMate grammars). When juicer
   sees a `<src>/grammars/<lang>.tmLanguage.json`, it parses it once,
   wires markdown's `codeHighlighter` callback, and emits `<span
   class="hl-keyword">…</span>` etc. inside the existing `<pre><code>`.
   The theme owns the colors via these classes; sites without a
   grammars/ dir get plain `<pre><code>` and these styles are inert.

   Palette is tuned to juicerblog's warm-neutral substrate — amber-family
   keywords, green strings, indigo/violet types-and-functions, faded
   comments. Dark-mode swaps to lighter, slightly cooler tones so the
   accents don't burn against the dark `--code-bg`. */
.juicerblog-content .hl-keyword     { color: #9a3412; font-weight: 600; }
.juicerblog-content .hl-string      { color: #166534; }
.juicerblog-content .hl-comment     { color: #78716c; font-style: italic; }
.juicerblog-content .hl-number      { color: #b45309; }
.juicerblog-content .hl-type        { color: #1d4ed8; }
.juicerblog-content .hl-function    { color: #6d28d9; }
.juicerblog-content .hl-variable    { color: inherit; }
.juicerblog-content .hl-operator    { color: #44403c; }
.juicerblog-content .hl-punctuation { color: #78716c; }

[data-theme="dark"] .juicerblog-content .hl-keyword     { color: #fb923c; }
[data-theme="dark"] .juicerblog-content .hl-string      { color: #86efac; }
[data-theme="dark"] .juicerblog-content .hl-comment     { color: #a8a29e; }
[data-theme="dark"] .juicerblog-content .hl-number      { color: #fdba74; }
[data-theme="dark"] .juicerblog-content .hl-type        { color: #93c5fd; }
[data-theme="dark"] .juicerblog-content .hl-function    { color: #c4b5fd; }
[data-theme="dark"] .juicerblog-content .hl-operator    { color: #d6d3d1; }
[data-theme="dark"] .juicerblog-content .hl-punctuation { color: #a8a29e; }

/* ============================================================
   Author archive
   ============================================================ */
.juicerblog-author-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 3rem;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.juicerblog-author-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.125rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.juicerblog-author-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.juicerblog-author-avatar-lg {
  width: 5rem;
  height: 5rem;
}
.juicerblog-author-meta { flex: 1; min-width: 0; }
.juicerblog-author-name {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
  letter-spacing: -0.005em;
}
.juicerblog-author-name a {
  color: var(--ink);
  text-decoration: none;
}
.juicerblog-author-name a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-author-bio {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.juicerblog-author-stats {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

/* Author *page* — bigger header, links, then a post list. */
.juicerblog-author-header {
  max-width: var(--measure);
  margin: 2rem auto 2.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.juicerblog-author-name-lg {
  font-size: 2rem;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
}
.juicerblog-author-bio-lg {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.juicerblog-author-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.juicerblog-author-links a {
  color: var(--accent);
  text-decoration: none;
}
.juicerblog-author-links a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-archive-section-title {
  max-width: var(--measure);
  margin: 2rem auto 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.juicerblog-archive-count {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.9375rem;
  margin-left: 0.25rem;
  font-family: var(--font-sans);
}

/* ============================================================
   Date archives
   ============================================================ */
.juicerblog-month-roll {
  list-style: none;
  padding: 1rem 1.25rem;
  margin: 1rem auto 1.5rem;
  max-width: var(--measure);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.juicerblog-month-roll a {
  color: var(--accent);
  text-decoration: none;
}
.juicerblog-month-roll a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-month-count {
  color: var(--ink-faint);
  margin-left: 0.25rem;
  font-size: 0.8125rem;
}

.juicerblog-breadcrumb {
  max-width: var(--measure);
  margin: 1.5rem auto 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.juicerblog-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.juicerblog-breadcrumb a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.juicerblog-breadcrumb .juicerblog-sep { margin: 0 0.5rem; }

/* ============================================================
   Static-page variant of file.html (no `date:` frontmatter)
   ============================================================ */
.juicerblog-post--static {
  /* Same column + spacing as a dated post, but the title can sit lower
     since there's no meta line beneath it. */
  padding-top: 3rem;
}
.juicerblog-post--static .juicerblog-post-title {
  margin-bottom: 1.5rem;
}

/* ============================================================
   Alias / redirect page
   ============================================================ */
.juicerblog-redirect {
  max-width: var(--measure);
  margin: 5rem auto;
  text-align: center;
  font-family: var(--font-serif);
}
.juicerblog-redirect h1 {
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  margin: 0 0 0.75rem;
}
.juicerblog-redirect p { margin: 0.5rem 0; }
.juicerblog-redirect-meta {
  color: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

/* ============================================================
   404
   ============================================================ */
.juicerblog-404 {
  max-width: var(--measure);
  margin: 4rem auto;
  text-align: center;
}
.juicerblog-404 h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

/* ============================================================
   Small screens
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .juicerblog-topbar-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .juicerblog-home-intro h1,
  .juicerblog-post-title { font-size: 1.875rem; }
  .juicerblog-content h2 { font-size: 1.5rem; }
  .juicerblog-prev-next { grid-template-columns: 1fr; }
  .juicerblog-prev-next > .juicerblog-prev-next-next { text-align: left; }
}