/* ---------- tokens ---------- */

:root {
  color-scheme: light dark;
  --bg: light-dark(#fbfaf7, #141416);
  --text: light-dark(#1d1d1f, #e7e5e0);
  --muted: light-dark(#6e6b66, #9b978f);
  --line: light-dark(#e7e3dc, #2a2a2f);
  --surface: light-dark(#f3f1ec, #1c1c20);
  --accent: light-dark(#c2410c, #ff8a5c);
  --accent-soft: light-dark(#ffe0cc, #4a2516);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); }

a { color: var(--accent); }

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

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1; padding: .5rem .75rem; background: var(--bg); }

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
main { flex: 1; }

/* ---------- header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 2.5rem 0 3.5rem;
  font: .9rem var(--mono);
}

.logo {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.cursor {
  display: inline-block;
  width: .55em;
  height: 1.1em;
  margin-left: .2em;
  vertical-align: -.2em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.site-header nav { display: flex; align-items: center; gap: 1.25rem; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--text); }
.site-header nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 6px;
}

.theme-toggle {
  display: inline-flex;
  padding: .25rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { transition: transform .4s ease; }
:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle svg { transform: rotate(180deg); }
}

/* ---------- home ---------- */

.intro { margin-bottom: 3.5rem; font-size: 1.15rem; }
.intro p { margin: 0; }

.wave { display: inline-block; transform-origin: 70% 70%; }
.intro:hover .wave { animation: wave 1.2s ease-in-out; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
}

.year { margin-bottom: 2.5rem; }
.year h2 {
  margin: 0 0 .75rem;
  color: var(--muted);
  font: 600 .85rem var(--mono);
}

.post-list { margin: 0; padding: 0; list-style: none; }
.post-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem 0;
}
.post-list time { color: var(--muted); font: .85rem var(--mono); }
.post-list a { color: var(--text); font-weight: 600; text-decoration: none; }
.post-list a::after {
  content: " →";
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.post-list a:hover { color: var(--accent); }
.post-list a:hover::after { opacity: 1; transform: none; }
.post-list p { margin: .1rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }

@media (max-width: 30rem) {
  .post-list li { grid-template-columns: 1fr; gap: 0; }
}

.empty { color: var(--muted); }

.badge {
  margin-left: .35rem;
  padding: .05rem .35rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--accent);
  font: 600 .7rem var(--mono);
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- posts ---------- */

.post-header { margin-bottom: 2.5rem; }
.post-header h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.meta { margin: 0; color: var(--muted); font: .85rem var(--mono); }

.prose { overflow-wrap: break-word; }

.prose h2, .prose h3, .prose h4 {
  position: relative;
  margin: 2.5rem 0 .75rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.2rem; }
.prose h4 { font-size: 1rem; }

.anchor {
  position: absolute;
  left: -1.1em;
  width: 1em;
  color: var(--accent);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s;
}
.prose :is(h2, h3, h4):hover .anchor { opacity: 1; }
@media (max-width: 46rem) { .anchor { display: none; } }

.prose a, .intro a {
  color: inherit;
  text-decoration: underline 2px var(--accent);
  text-underline-offset: 3px;
  transition: background-color .15s;
}
.prose a:hover, .intro a:hover { background-color: var(--accent-soft); }

.prose :not(pre) > code {
  padding: .15em .35em;
  border-radius: 4px;
  background: var(--surface);
  font: .875em var(--mono);
}

.prose blockquote {
  margin: 1.5rem 0;
  padding: .1rem 0 .1rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--muted); }

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 8px;
}

.prose hr { margin: 3rem 0; border: 0; color: var(--muted); text-align: center; }
.prose hr::after { content: "· · ·"; letter-spacing: .5em; }

.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .95rem;
}
.prose th, .prose td { padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- code blocks (shiki) ---------- */

.code { position: relative; margin: 1.5rem 0; }

.shiki {
  margin: 0;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: .85rem/1.65 var(--mono);
  tab-size: 2;
}
.shiki, .shiki span { color: light-dark(var(--shiki-light), var(--shiki-dark)); }

.code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: .45rem;
  right: .7rem;
  color: var(--muted);
  font: .7rem var(--mono);
  pointer-events: none;
  transition: opacity .15s;
}

.copy {
  position: absolute;
  top: .4rem;
  right: .45rem;
  padding: .1rem .45rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font: .7rem var(--mono);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.copy:hover { color: var(--text); }
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.code:hover::before, .code:focus-within::before { opacity: 0; }
@media (hover: none) {
  .copy { opacity: 1; }
  .code[data-lang]::before { display: none; }
}

/* ---------- post nav, about, 404 ---------- */

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.post-nav a { color: var(--text); font-weight: 600; line-height: 1.4; text-decoration: none; }
.post-nav a:hover { color: var(--accent); }
.post-nav small { display: block; margin-bottom: .25rem; color: var(--muted); font: 400 .8rem var(--mono); }
.post-nav .newer { text-align: right; }

.not-found h1 {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--accent);
  font: 700 clamp(4rem, 20vw, 7rem)/1 var(--mono);
  letter-spacing: -.04em;
  transform: rotate(-4deg);
}
.not-found code { padding: .15em .35em; border-radius: 4px; background: var(--surface); font: .9em var(--mono); }

/* ---------- footer ---------- */

.site-footer {
  margin-top: 5rem;
  padding: 2rem 0 3rem;
  color: var(--muted);
  font: .8rem/1.7 var(--mono);
}
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }

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