/* =============================================================================
   Vegeta — public site stylesheet
   -----------------------------------------------------------------------------
   Design: "cool & airy". A soft blue/lavender gradient washes the whole page
   and sits directly behind the text (no content card). To keep readability the
   priority, the gradient is held very pale and the body ink is a rich near-black
   slate at a regular (400) weight rather than the old thin 300 — thin type on a
   tinted background is what hurts legibility most.

   Every public page (index, post, archive, tag, about, error) links this one
   file via /style.css, so all design tokens live here. The admin UI uses a
   separate sheet (admin.css) and is intentionally untouched.
   ============================================================================ */

/* ── Design tokens ───────────────────────────────────────────────────────── */

:root {
  /* Page gradient — kept light (L ≈ 96–99%) so dark text always wins. */
  --grad-top:    #f7f8fe;
  --grad-mid:    #eef2fc;
  --grad-bottom: #e3eafa;

  /* Ink. A near-black slate reads as "black" to the eye but feels softer than
     pure #000 on a tinted ground. Muted/faint are for dates and metadata. */
  --ink:         #1c2733;
  --ink-muted:   #475264;  /* nav, blockquotes — clears AA on the gradient */
  --ink-faint:   #5e6878;  /* dates, footer metadata — ~4.5:1, still legible */
  --heading:     #131c28;

  /* Accent — a refined azure, a step calmer than the old neon #0083ff. */
  --accent:        #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft:   rgba(37, 99, 235, 0.09);

  /* Hairlines and surfaces, all derived from the ink so they tint with it. */
  --rule:        rgba(20, 30, 48, 0.10);
  --rule-soft:   rgba(20, 30, 48, 0.07);
  --panel:       rgba(255, 255, 255, 0.60);
  --code-bg:     rgba(20, 33, 61, 0.055);

  --content-width: 46rem;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--grad-top);
  background-image: linear-gradient(
    165deg,
    var(--grad-top) 0%,
    var(--grad-mid) 50%,
    var(--grad-bottom) 100%
  );
  background-repeat: no-repeat;
  /* Anchor the gradient to the viewport so it stays consistent on long pages
     and never stretches or tiles as the reader scrolls. */
  background-attachment: fixed;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(37, 99, 235, 0.18);
}

/* Visible keyboard focus for every interactive element. */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Site header ─────────────────────────────────────────────────────────── */

.site-header {
  text-align: center;
  padding: 2.75rem 1.5rem 1.5rem;
}

.site-name {
  display: block;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 800;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.site-name:hover {
  color: var(--heading);
}

.site-nav {
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.site-nav a:hover {
  color: var(--accent-strong);
}

.site-nav .sep {
  color: var(--ink-faint);
  margin: 0 0.55em;
  user-select: none;
}

.header-rule {
  border: none;
  border-top: 1px solid var(--rule-soft);
  margin: 0;
}

/* ── Content column ──────────────────────────────────────────────────────── */

.site-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

/* Page-level headings (Archive, Tagged: …) on list pages. */
.site-content > h1 {
  text-align: center;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading);
  margin: 0 0 2.5rem;
  line-height: 1.15;
}

/* ── Index page (river of posts + pagination) ────────────────────────────── */

.index-post {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}

.index-post:last-of-type {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.index-post-title {
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.index-post-title a {
  color: var(--heading);
  text-decoration: none;
  transition: color 0.15s ease;
}

.index-post-title a:hover {
  color: var(--accent-strong);
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.pagination a {
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.pagination a:hover {
  color: var(--accent-strong);
}

.empty {
  color: var(--ink-faint);
  text-align: center;
}

/* ── Post header (title + date + tags) ───────────────────────────────────── */

.post-header {
  text-align: center;
  margin-bottom: 2.75rem;
}

.post-title {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--heading);
  margin: 0 0 0.6rem;
  line-height: 1.15;
}

.post-date {
  display: block;
  color: var(--ink-faint);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.post-tags {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.post-tags a {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.post-tags a:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Post body ───────────────────────────────────────────────────────────── */

/* Body links carry a faint underline always (clearer affordance than hover-only)
   and deepen on interaction. */
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.35);
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.post-body a:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

.post-body h2 {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--heading);
  margin: 2.75rem 0 0.6rem;
  line-height: 1.25;
}

.post-body h3 {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--heading);
  margin: 2.25rem 0 0.4rem;
  line-height: 1.3;
}

.post-body h4 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--heading);
  margin: 1.75rem 0 0.3rem;
}

.post-body p {
  margin: 0 0 1.35rem;
}

.post-body ul,
.post-body ol {
  padding-left: 1.5rem;
  margin: 0 0 1.35rem;
}

.post-body li {
  margin-bottom: 0.4rem;
}

.post-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(20, 30, 55, 0.10);
}

.post-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.75rem auto;
  width: 40%;
}

.post-body blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.4rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

.post-body code {
  font-family: "SF Mono", "Fira Code", Menlo, "Courier New", monospace;
  font-size: 0.82em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.post-body pre {
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.55;
  margin: 0 0 1.35rem;
}

.post-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
}

/* ── Archive & tag list pages ────────────────────────────────────────────── */
/* These classes are emitted by templates/archive.js and templates/tag.js and
   previously had no styling at all — they fell back to browser defaults. */

.archive-year {
  margin-bottom: 2.5rem;
}

.archive-year-heading {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.archive-item:last-child {
  border-bottom: none;
}

.archive-item a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.15s ease;
}

.archive-item a:hover {
  color: var(--accent-strong);
}

.archive-date {
  flex-shrink: 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ── Site footer (copyright line) ────────────────────────────────────────── */
/* Rendered by templates/footer.js on the index, every tag page, and every post
   page. Small muted text so it reads as ancillary metadata; max-width matches
   the content column so the rule above it lines up with the text. */

.site-footer {
  max-width: var(--content-width);
  margin: 3rem auto 2.5rem;
  padding: 1.5rem 1.5rem 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: center;
}

/* ── Motion preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}