/* Earth Tones — CUBE CSS */
:root {
  --text: #3d3833;
  --muted: #8a8279;
  --bg: #f7f5f0;
  --surface: #edeae3;
  --border: #d4cfc6;
  --accent: #5a7a5a;
  --measure: 38rem;
  --code-bg: #edeae3;
  --code-text: #3d3833;
  --highlight: #d4cfa0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #cec8be;
    --muted: #7d776d;
    --bg: #1c1b18;
    --surface: #26241f;
    --border: #3d3a33;
    --accent: #7da17d;
    --code-bg: #26241f;
    --code-text: #cec8be;
    --highlight: #4a4520;
  }
}

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

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: white;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Composition */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  max-width: var(--measure);
  margin-inline: auto;
  padding: 2.5rem 1.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Global */
a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }
img { max-width: 100%; height: auto; border-radius: 0.25rem; }

/* Site header */
body > header { margin-bottom: 3rem; }
body > header h1 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.625rem; }
body > header h1 a { color: inherit; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; }
nav a { font-size: 0.875rem; color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }

/* Article */
article + article { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
article header { margin-bottom: 0.75rem; }
article h1, article h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.25rem; }
article h2 a { color: inherit; text-decoration: none; }
article h2 a:hover { text-decoration: underline; text-decoration-color: var(--border); }
article p + p, article p + blockquote, article blockquote + p, article blockquote + blockquote { margin-top: 0.75rem; }

/* Article meta (date + tags on one line) */
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.5rem; font-size: 0.8125rem; color: var(--muted); margin-top: 0.25rem; }
.meta time { color: var(--muted); }

.meta a { font-size: 0.75rem; color: var(--muted); text-decoration: none; background: var(--surface); padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.meta a:hover { color: var(--accent); }

/* Standalone time (archive, search results) */
time { color: var(--muted); font-size: 0.8125rem; }

/* Typography */
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin: 1.5em 0 0.5em; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 1.5em 0 0.5em; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 1.5em 0 0.5em; }

/* Code */
pre {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0.75rem 0;
}
code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
}
:not(pre) > code {
  background: var(--surface);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Blockquote */
blockquote {
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  margin: 0.75rem 0;
}
blockquote p + p { margin-top: 0.5rem; }

/* Lists */
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.25rem; }
li input[type="checkbox"] { margin-right: 0.5rem; }

/* Nested lists */
ul ul, ol ol, ul ol, ol ul { margin: 0.25rem 0 0.25rem 1rem; }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.9375rem;
}
th, td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
th { background: var(--surface); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--surface); }

/* Footnotes */
.footnotes { font-size: 0.875rem; color: var(--muted); }
.footnotes ol { padding-left: 1.25rem; }

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

/* Pagination */
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.875rem; }
.pagination a { text-decoration: none; color: var(--muted); }
.pagination a:hover { color: var(--accent); }
.pagination > span:not(.pagination-spacer) { color: var(--muted); }
.pagination-spacer { min-width: 5rem; }

/* Post navigation */
.post-nav { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.post-nav a { flex: 1 1 10rem; text-decoration: none; color: var(--text); background: var(--surface); padding: 0.75rem 1rem; border-radius: 0.375rem; font-size: 0.8125rem; line-height: 1.4; }
.post-nav a:hover { background: var(--border); }
.post-nav a::before { display: block; font-size: 0.6875rem; color: var(--muted); letter-spacing: 0.03em; margin-bottom: 0.125rem; }
.post-nav-prev::before { content: 'Nyare'; }
.post-nav-next { text-align: right; }
.post-nav-next::before { content: 'Eldre'; }
.post-nav span { flex: 1 1 10rem; }

/* Footer */
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.8125rem; }

/* Archive & Tag lists */
.post-list { list-style: none; padding: 0; }
.post-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  align-items: baseline;
}
.post-list time {
  flex-shrink: 0;
  width: 5.5rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-cloud a {
  background: var(--surface);
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--muted);
}
.tag-cloud a:hover { color: var(--accent); }

/* Search */
.search-box { margin-bottom: 1.5rem; }
.search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: var(--bg);
  color: var(--text);
}
.search-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 122, 90, 0.15);
}
.search-results { margin-top: 1rem; }
.search-results mark, .search-result mark {
  background: var(--highlight);
  color: var(--text);
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
}
.search-results-list { list-style: none; padding: 0; }
.search-result { margin-bottom: 1.5rem; }
.search-result a { font-size: 1.125rem; font-weight: 500; }
.search-result time { display: block; color: var(--muted); font-size: 0.8125rem; margin: 0.25rem 0; }
.search-result .preview { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.no-results { color: var(--muted); font-style: italic; }

/* Syntax Highlighting */
code[class*="language-"] { color: var(--code-text); }
.token-keyword { color: #8b5e3c; }
.token-string { color: #5a7a5a; }
.token-docstring { color: #5a7a5a; font-style: italic; }
.token-comment { color: #8a8279; font-style: italic; }
.token-number { color: #7a6040; }
.token-function { color: #6b5a8e; }
.token-builtin { color: #7a6040; }
.token-operator { color: #8b5e3c; }
.token-punctuation { color: #8a8279; }
.token-property { color: #7a6040; }
.token-variable { color: #8b6540; }
.token-boolean { color: #7a6040; }
.token-tag { color: #5a7a5a; }
.token-attr-name { color: #7a6040; }
.token-attr-value { color: #5a7a5a; }
.token-selector { color: #5a7a5a; }
.token-pseudo { color: #6b5a8e; }
.token-color { color: #8b6540; }
.token-doctype { color: #8a8279; }

@media (prefers-color-scheme: dark) {
  .token-keyword { color: #c9956a; }
  .token-string { color: #7da17d; }
  .token-docstring { color: #7da17d; }
  .token-comment { color: #7d776d; }
  .token-number { color: #b8a07a; }
  .token-function { color: #a892c8; }
  .token-builtin { color: #b8a07a; }
  .token-operator { color: #c9956a; }
  .token-punctuation { color: #7d776d; }
  .token-property { color: #b8a07a; }
  .token-variable { color: #c9a06a; }
  .token-boolean { color: #b8a07a; }
  .token-tag { color: #7da17d; }
  .token-attr-name { color: #b8a07a; }
  .token-attr-value { color: #7da17d; }
  .token-selector { color: #7da17d; }
  .token-pseudo { color: #a892c8; }
  .token-color { color: #c9a06a; }
  .token-doctype { color: #7d776d; }
}

/* Print */
@media print {
  body { max-width: none; }
  nav, footer, .search-box, .pagination { display: none; }
}