/* ---------------------------------------------------------------------------
   Theme tokens injected from content/site.yaml at build time.
   Re-skinning the site is a config change, not a redesign.
   --------------------------------------------------------------------------- */
:root {
  --accent: #2f6f4f;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #7fd1a6;
  }
}

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */
:root {
  --bg: #fcfcfa;
  --surface: #ffffff;
  --surface-sunken: #f3f3ef;
  --text: #1b1d1c;
  --text-muted: #5c625e;
  --border: #e0e0da;
  --border-strong: #c8c9c2;
  --accent-contrast: #ffffff;
  --shadow: 0 1px 2px rgb(20 24 22 / 6%), 0 4px 12px rgb(20 24 22 / 4%);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --measure: 68ch;
  --wrap: 72rem;

  --code-bg: #f5f5f0;
  --code-border: #e4e4dc;
  --code-text: #24292f;
  --code-comment: #6a737d;
  --code-keyword: #a6237a;
  --code-string: #0a6b45;
  --code-number: #9a4b00;
  --code-title: #1f4bb8;
  --code-attr: #6f42c1;
  --code-meta: #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1b1e23;
    --surface-sunken: #22262c;
    --text: #e6e8e6;
    --text-muted: #a2a9a6;
    --border: #2b3038;
    --border-strong: #3b424c;
    --accent-contrast: #10221a;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);

    --code-bg: #1a1d22;
    --code-border: #2b3038;
    --code-text: #d7dbdf;
    --code-comment: #7f8a95;
    --code-keyword: #f08bc4;
    --code-string: #7fd1a6;
    --code-number: #ffb86b;
    --code-title: #8ab4ff;
    --code-attr: #c8a6ff;
    --code-meta: #97a1ab;
  }
}

/* ---------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 640;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 1.5rem + 1.6vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); }
h3 { font-size: 1.2rem; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  z-index: 100;
}
.skip-link:focus { left: var(--space-4); }

/* ---------------------------------------------------------------------------
   Preview ribbon & draft badge
   --------------------------------------------------------------------------- */
.preview-ribbon {
  position: sticky;
  top: 0;
  z-index: 50;
  background: repeating-linear-gradient(
    135deg, #8a5a00, #8a5a00 10px, #7a4f00 10px, #7a4f00 20px
  );
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4);
}

.draft-badge {
  display: inline-block;
  vertical-align: middle;
  margin-inline-start: var(--space-3);
  padding: 0.15em 0.6em;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a5a00;
  background: #ffe9b8;
  border: 1px solid #e0bb63;
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  .draft-badge { color: #ffd88a; background: #3a2c0a; border-color: #6b5316; }
}

/* ---------------------------------------------------------------------------
   Header & footer
   --------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.site-title {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.site-title:hover { color: var(--accent); }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.site-nav__list a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--text); }
.site-nav__list a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

main { flex: 1; padding-block: var(--space-7) var(--space-8); }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
}
.social { display: flex; gap: var(--space-4); list-style: none; padding: 0; }

/* ---------------------------------------------------------------------------
   Prose
   --------------------------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }

.prose blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--space-4);
  color: var(--text-muted);
  font-style: italic;
}

.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-6); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.prose th { font-weight: 640; }

.prose img { border-radius: var(--radius-md); margin-block: var(--space-5); }

.hero { max-width: var(--measure); margin-bottom: var(--space-7); }
.hero__lede {
  margin-top: var(--space-3);
  font-size: 1.1875rem;
  color: var(--text-muted);
  text-wrap: pretty;
}

.section-heading { margin-bottom: var(--space-5); }
.section-meta { color: var(--text-muted); margin-bottom: var(--space-5); }
.more-link { margin-top: var(--space-6); }
.empty-state { color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Code
   --------------------------------------------------------------------------- */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }

:not(pre) > code {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

pre.hljs {
  position: relative;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 2;
}
pre.hljs code { background: none; border: 0; padding: 0; font-size: inherit; }

pre.hljs[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.15em 0.6em;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--code-meta);
  background: var(--code-border);
  border-bottom-left-radius: var(--radius-sm);
}

/* highlight.js tokens — light and dark share these vars */
.hljs-comment, .hljs-quote { color: var(--code-comment); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: var(--code-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--code-string); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--code-number); }
.hljs-title, .hljs-title_, .hljs-title.function_, .hljs-section, .hljs-name { color: var(--code-title); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--code-attr); }
.hljs-type, .hljs-class .hljs-title, .hljs-built_in { color: var(--code-title); }
.hljs-meta, .hljs-comment .hljs-doctag { color: var(--code-meta); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-deletion { color: #b3261e; }

/* ---------------------------------------------------------------------------
   Post cards, tags, pagination
   --------------------------------------------------------------------------- */
.post-grid { display: grid; gap: var(--space-5); }

.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow);
}
.post-card__title { font-size: 1.25rem; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { color: var(--accent); text-decoration: underline; }
.post-card__meta { color: var(--text-muted); font-size: 0.8125rem; margin-top: var(--space-2); }
.post-card__excerpt { margin-top: var(--space-3); color: var(--text-muted); }

.post-header { margin-bottom: var(--space-6); }
.post-meta { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-2); }
.post-footer-nav { max-width: var(--measure); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-top: var(--space-3); }

.tag {
  display: inline-block;
  font-size: 0.8125rem;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
}
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag--heading { font-size: 0.5em; vertical-align: middle; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; }
.tag-cloud li { display: flex; align-items: center; gap: var(--space-2); }
.tag-count { color: var(--text-muted); font-size: 0.8125rem; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.pagination__status { color: var(--text-muted); font-size: 0.875rem; }

/* ---------------------------------------------------------------------------
   Forms — contact & search
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 0.875rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="search"], textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
input:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 8rem; }

.button {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--measure);
  margin-top: var(--space-6);
}

/* Off-screen rather than display:none — bots skip hidden inputs. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status { font-size: 0.9375rem; min-height: 1.5em; }
.form-status[data-state="error"] { color: #b3261e; }
.form-status[data-state="success"] { color: var(--accent); }
@media (prefers-color-scheme: dark) { .form-status[data-state="error"] { color: #ff9d92; } }

.search { max-width: var(--measure); margin-top: var(--space-6); }
.search__label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-2); }
.search__status { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-3); min-height: 1.5em; }
.search__results { list-style: none; padding: 0; max-width: var(--measure); display: grid; gap: var(--space-4); }
.search__result a { font-weight: 600; }
.search__excerpt { color: var(--text-muted); font-size: 0.9375rem; margin-top: var(--space-1); }
.search__empty, .search__fallback { color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Responsive & motion
   --------------------------------------------------------------------------- */
@media (min-width: 46rem) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 32rem) {
  .wrap { padding-inline: var(--space-4); }
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  main { padding-block: var(--space-5) var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}