/* Monospace grid: every size is a multiple of one character (1ch) or one line (--line), so text,
   rules and tables all snap to the same grid, like a terminal but without the costume. */

/* JetBrains Mono, served from this site (SIL Open Font License: fonts/OFL.txt) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --line: 1.5rem;
  --measure: 80ch;
}

/* Terminal palettes: background, raised surface, text, muted text, rules, and accents */
[data-theme="mocha"] { /* Catppuccin Mocha */
  --bg: #1e1e2e; --surface: #181825; --text: #cdd6f4; --muted: #7f849c; --rule: #45475a;
  --accent: #89b4fa; --green: #a6e3a1; --yellow: #f9e2af; --mauve: #cba6f7; --peach: #fab387; --sky: #89dceb;
}
[data-theme="tokyo"] { /* Tokyo Night */
  --bg: #1a1b26; --surface: #16161e; --text: #c0caf5; --muted: #737aa2; --rule: #3b4261;
  --accent: #7aa2f7; --green: #9ece6a; --yellow: #e0af68; --mauve: #bb9af7; --peach: #ff9e64; --sky: #7dcfff;
}
[data-theme="gruvbox"] { /* Gruvbox Dark */
  --bg: #282828; --surface: #1d2021; --text: #ebdbb2; --muted: #928374; --rule: #504945;
  --accent: #83a598; --green: #b8bb26; --yellow: #fabd2f; --mauve: #d3869b; --peach: #fe8019; --sky: #8ec07c;
}

* { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 15px;
  line-height: var(--line);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  transition: background-color 200ms ease, color 200ms ease;
}

body { margin: 0; }

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--line) * 2) 2ch calc(var(--line) * 3);
}

h1, h2, p, table, dl, ul { margin: 0 0 var(--line); }
.prose > :last-child { margin-bottom: 0; }

h1 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

em { font-style: normal; color: var(--peach); }

a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 180ms ease;
}
a:hover, a:focus-visible { background-size: 100% 1px; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.muted { color: var(--muted); }
.right { text-align: right; }

/* Masthead */
.masthead-row { display: flex; justify-content: space-between; gap: 2ch; }
.masthead h1 { margin: 0; }
.meta { color: var(--muted); }
.role { color: var(--muted); margin: 0 0 calc(var(--line) / 2); }

.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0 0 var(--line); }
hr.double {
  height: 4px;
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  margin-bottom: var(--line);
}

/* Section headings: "── projects ─────────" */
h2.rule {
  display: flex;
  align-items: center;
  gap: 1ch;
  font-size: 1rem;
  font-weight: 400;
  color: var(--mauve);
  margin-top: calc(var(--line) * 2);
}
h2.rule::before { content: "──"; color: var(--rule); }
h2.rule::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

/* Tables on the grid */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  text-align: left;
  font-weight: 400;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding: 0 2ch 0 0;
}
table.grid td { padding: 0 2ch 0 0; vertical-align: top; white-space: nowrap; }
/* Only the description wraps; the short columns stay on the grid */
table.grid td:nth-child(4) { white-space: normal; width: 100%; }
table.grid th:last-child, table.grid td:last-child { padding-right: 0; }
table.grid tbody tr { transition: background-color 120ms ease; }
table.grid tbody tr:hover { background: var(--surface); }

.lang-rust { color: var(--peach); }
.lang-go { color: var(--sky); }

.state::before { content: "● "; }
.state.active { color: var(--green); }
.state.release { color: var(--accent); }
.state.design { color: var(--yellow); }
.state.design::before { content: "○ "; }

/* Key-value lists */
dl.pairs { display: grid; grid-template-columns: 12ch 1fr; column-gap: 2ch; }
dl.pairs dt { color: var(--muted); }
dl.pairs dd { margin: 0; }

/* Writing log */
ul.log { list-style: none; padding: 0; }
ul.log li { display: grid; grid-template-columns: 8ch 1fr auto; column-gap: 2ch; }
ul.log time { color: var(--muted); }

/* Footer and theme switcher */
.footer { margin-top: calc(var(--line) * 3); }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2ch; }
.themes { display: inline-flex; gap: 1ch; }
.themes button {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.themes button::before { content: "["; }
.themes button::after { content: "]"; }
.themes button[aria-pressed="true"] { color: var(--accent); }

/* Phones: drop the "what" column and let the table scroll rather than squash */
@media (max-width: 640px) {
  html { font-size: 14px; }
  .page { padding-left: 16px; padding-right: 16px; }
  table.grid th:nth-child(4), table.grid td:nth-child(4) { display: none; }
  dl.pairs { grid-template-columns: 10ch 1fr; }
  ul.log li { grid-template-columns: 8ch 1fr; }
  ul.log li .muted { display: none; }
}

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