@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* Day lighting */
:root {
  color-scheme: light;
  --panel: #eef0ea;
  --surface: #f8f9f5;
  --ink: #16211c;
  --muted: #55665d;
  --line: #c6cec6;
  --amber: #8f5300;
  --green: #0b6b43;
  --sky: #5d9fd0;
  --ground: #a5763f;
  --dial-line: #ffffff;
  --bezel: #1b2722;
  --aircraft: #ffc24a;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Night lighting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --panel: #0f1613;
    --surface: #161f1b;
    --ink: #d7e4dc;
    --muted: #8aa597;
    --line: #2c3d35;
    --amber: #f0b33c;
    --green: #6fe0a4;
    --sky: #1f4a6b;
    --ground: #5a3f22;
    --dial-line: #d7e4dc;
    --bezel: #000000;
    --aircraft: #f0b33c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --panel: #0f1613;
  --surface: #161f1b;
  --ink: #d7e4dc;
  --muted: #8aa597;
  --line: #2c3d35;
  --amber: #f0b33c;
  --green: #6fe0a4;
  --sky: #1f4a6b;
  --ground: #5a3f22;
  --dial-line: #d7e4dc;
  --bezel: #000000;
  --aircraft: #f0b33c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
}

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--amber); }

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

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.5rem;
  padding: 0.7rem max(1rem, calc((100vw - 68rem) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  font: 500 0.8rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand { font-weight: 700; text-decoration: none; }
.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a { color: var(--muted); text-decoration: none; }
.topbar nav a:hover { color: var(--amber); }

.lighting {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.lighting[hidden] { display: none; }
.lighting:hover { border-color: var(--amber); }
.lamp { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--amber); }

/* Intro */
main { max-width: 68rem; margin: 0 auto; padding: 0 1rem 5rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem);
  align-items: center;
  gap: 2rem 4rem;
  padding: 5rem 0 3rem;
}

h1 {
  margin: 0;
  font: 600 clamp(1.75rem, 3.1vw, 2.6rem)/1.15 var(--mono);
  letter-spacing: -0.03em;
  white-space: pre-line;
}

.bio { max-width: 36rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 1.1rem; }

/* Attitude indicator */
.horizon { display: block; width: 100%; height: auto; }
.bezel { fill: var(--bezel); }
.sky { fill: var(--sky); }
.ground { fill: var(--ground); }
.ladder { stroke: var(--dial-line); stroke-width: 1.5; }
.ladder.strong { stroke-width: 2.5; }
.ticks line { stroke: #d7e4dc; stroke-width: 2; }
.aircraft path { fill: none; stroke: var(--aircraft); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.aircraft circle { fill: var(--aircraft); }
.horizon-card {
  transform: rotate(var(--roll, -7deg)) translateY(var(--pitch, 4px));
  transform-origin: 100px 100px;
  transition: transform 0.35s ease-out;
}

/* Readouts */
.readouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.readout { padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.readout dt { color: var(--muted); font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.readout dd { margin: 0.15rem 0 0; color: var(--green); font: 600 1.05rem/1.4 var(--mono); white-space: pre-line; }

/* Sections */
.panel { margin-top: 5rem; }

h2 {
  margin: 0 0 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--amber);
  font: 600 0.85rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h3 { margin: 0; font: 600 1.05rem/1.4 var(--mono); letter-spacing: -0.01em; }

/* Checklist */
.checklist { margin: 0; padding: 0; list-style: none; }
.checklist > li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.checklist > li:first-child { padding-top: 0; }
.checklist p { max-width: 42rem; margin: 0.3rem 0 0; color: var(--muted); }
.check-line { display: flex; align-items: baseline; gap: 0.6rem; }
.leader { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line); }
.check { color: var(--green); font: 600 0.8rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* Interests */
.interests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.interest { padding: 1.25rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.interest p { margin: 0.5rem 0 0; color: var(--muted); }

/* Contact */
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; padding: 0; list-style: none; font: 600 1.25rem/1.6 var(--mono); }

/* Blog */
.page-heading { padding: 3.5rem 0 0; }
.page-heading h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
.page-heading p { margin: 0.75rem 0 0; color: var(--muted); }

.post-list h3 a { text-decoration: none; }
.post-list h3 a:hover { color: var(--amber); }
.post-list .check { font-weight: 500; white-space: nowrap; }

.tag-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }

.tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font: 500 0.75rem/1.6 var(--mono);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}
.tag:hover { border-color: var(--amber); color: var(--amber); }
.tag[aria-current="page"] { border-color: var(--amber); background: var(--amber); color: var(--panel); }
.tag-filter .tag { padding: 0.35rem 0.7rem; }

.post-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.badge { color: var(--amber); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.all-posts { margin: 1.25rem 0 0; font: 600 0.9rem/1.6 var(--mono); }

.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0;
  font: 600 0.85rem/1.6 var(--mono);
}
.pagination a { display: inline-block; padding: 0.4rem 0; }
.pagination [rel="next"] { justify-self: end; }
.page-count { color: var(--muted); font-weight: 500; }

.post { max-width: 44rem; margin: 0 auto; padding-top: 3.5rem; }
.back { color: var(--muted); font: 500 0.8rem/1.4 var(--mono); text-decoration: none; }
.post h1 { margin-top: 1.25rem; font-size: clamp(1.75rem, 5vw, 2.5rem); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 0; color: var(--muted); font: 500 0.85rem/1.4 var(--mono); }
.post-meta .post-tags { margin: 0; }

.prose { margin-top: 2.5rem; overflow-wrap: break-word; }
.prose h2 {
  margin: 2.5rem 0 0.75rem;
  padding: 0;
  border: 0;
  color: var(--ink);
  font: 600 1.35rem/1.3 var(--mono);
  letter-spacing: -0.01em;
  text-transform: none;
}
.prose h3 { margin: 2rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; }
.prose li { margin: 0.25rem 0; }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: 6px; }
.prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--amber); color: var(--muted); }
.prose code { font: 0.88em var(--mono); }
.prose pre { overflow-x: auto; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.prose table { display: block; overflow-x: auto; margin: 1.5rem 0; border-collapse: collapse; }
.prose th, .prose td { padding: 0.4rem 0.7rem; border: 1px solid var(--line); text-align: left; }

@media (max-width: 44rem) {
  .topbar { padding-inline: 1rem; }
  .brand { flex: 1; }
  .topbar nav { order: 3; width: 100%; margin-left: 0; }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; }
  .horizon { width: min(60%, 14rem); margin: 0 auto; }
  .panel { margin-top: 3.5rem; }
  .interests { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .horizon-card { transition: none; }
}

.tag-filter-note { margin: 1.5rem 0 0; color: var(--muted); }