/* site.css — Terminal style. Self-contained (no Tufte dependency).
   Monospace, blue accent, highlight-swipe emphasis. Respects dark mode. */

:root {
  --bg:       #f6f6f4;
  --fg:       #16181d;
  --fg-soft:  #565a63;
  --fg-faint: #8b8f98;
  --rule:     #dcdcd6;
  --accent:   #1f6feb;   /* blue — links, marks, hovers */
  --code-bg:  #ecece7;
  --sel:      #cfe0fb;   /* light-blue highlight for emphasis */
  --measure:  44rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       #0d0f12;
    --fg:       #d4d7dd;
    --fg-soft:  #8b909a;
    --fg-faint: #5c6068;
    --rule:     #1e2127;
    --accent:   #58a6ff;
    --code-bg:  #16191e;
    --sel:      #1a3352;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code",
               "Fira Code", Menlo, Consolas, monospace;
  line-height: 1.7;
  font-size: .95rem;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sel); }

/* article shell (used by all pages) */
article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* nav */
.site-nav {
  font-size: .85rem;
  color: var(--fg-faint);
  margin: 2rem 0 0;
}
.site-nav a { color: var(--fg-soft); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

/* headings */
h1, h2, h3 { font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; margin: 2.5rem 0 .5rem; }
h2 { font-size: 1.15rem; margin: 3rem 0 1rem; color: var(--fg); }
h3 { font-size: 1rem;  margin: 2.2rem 0 .8rem; }
h1::before { content: "# ";  color: var(--accent); }
h2::before { content: "## "; color: var(--accent); }
h3::before { content: "### "; color: var(--accent); }

.subtitle { color: var(--fg-soft); font-size: 1rem; margin: 0 0 2.5rem; }
.byline   { color: var(--fg-faint); font-size: .8rem; margin: .4rem 0 2.5rem; }
.byline::before { content: "// "; }

/* body text */
p { margin: 0 0 1.2rem; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }

/* emphasis: highlight swipe instead of italics */
em, i {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--sel) 62%);
}
strong, b { color: var(--fg); font-weight: 700; }

code {
  background: var(--code-bg);
  padding: .1em .35em;
  border-radius: 3px;
  color: var(--accent);
  font-size: .9em;
}
pre {
  background: var(--code-bg);
  border-left: 2px solid var(--rule);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border-radius: 4px;
  line-height: 1.5;
}
pre code { background: none; padding: 0; color: var(--fg); }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--accent);
  color: var(--fg-soft);
}

ul, ol { padding-left: 1.4rem; }
li { margin: .3rem 0; }

hr { border: 0; border-top: 1px dashed var(--rule); margin: 3rem 0; }

img { max-width: 100%; height: auto; }

/* home intro */
.lead { color: var(--fg); font-size: 1.05rem; margin: 1.5rem 0 3rem; }

/* section lists (projects, posts) */
.entry-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.entry-list li { margin: 0; }
.entry {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 0;
  padding: .9rem 0 .9rem 1.4rem;
  position: relative;
  border-left: 2px solid var(--rule);
}
.entry::before {
  content: "›";
  position: absolute;
  left: .35rem;
  color: var(--fg-faint);
}
.entry:hover { border-left-color: var(--accent); }
.entry:hover::before { color: var(--accent); }
.entry:hover .entry-title { color: var(--accent); }
.entry-title { display: block; font-weight: 700; }
.entry-desc  { display: block; color: var(--fg-soft); font-size: .88rem; margin-top: .15rem; }
.entry-date  { display: block; color: var(--fg-faint); font-size: .78rem; margin-top: .3rem;
               font-variant-numeric: tabular-nums; }
.entry-date::before { content: "["; }
.entry-date::after  { content: "]"; }

/* footers */
.post-footer,
.contact {
  color: var(--fg-faint);
  font-size: .82rem;
  margin: 4rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
}
.post-footer p { margin: 0; }
.contact { display: flex; gap: 1.2rem; }
.contact a { color: var(--fg-soft); }
.contact a:hover { color: var(--accent); }

@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  article { padding: 0 1.1rem 3rem; }
}