:root {
  --bg: #1f2330;
  --bg-elev: #262b3a;
  --text: #ffffff;
  --text-muted: #e6eaf2;
  --text-dim: #c8d0de;
  --accent: #7ee787;
  --accent-dim: #4a8a52;
  --info: #7eb8e7;
  --info-dim: #4a7596;
  --rule: #313749;
  --link: #b6c2d8;
  --link-hover: #ffffff;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --col: 720px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2.4em;
  margin-bottom: 0.6em;
  line-height: 1.2;
  color: #ffffff;
}
h1 { font-size: 2.6rem; margin-top: 0.3em; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; color: var(--text); }

p, ul, ol, blockquote, pre, table { margin: 0 0 1.2em 0; }

ul, ol { padding-left: 1.4em; }
li + li { margin-top: 0.3em; }

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--bg-elev);
  color: #e0e6f0;
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
pre {
  background: var(--bg-elev);
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  border-left: 2px solid var(--accent-dim);
}
pre code { background: transparent; padding: 0; }

blockquote {
  border-left: 2px solid var(--accent-dim);
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.2em;
  color: var(--text-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5em 0;
}

/* ===== Header ===== */
.site-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  border: none;
}
.brand:hover { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-weight: 500;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--link);
  font-size: 0.95rem;
  border: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--link-hover); }
.site-nav a.active {
  color: var(--link-hover);
  border-bottom-color: var(--accent);
}

/* ===== Page layout ===== */
.page {
  max-width: var(--col);
  margin: 60px auto 80px;
  padding: 0 var(--gutter);
  position: relative;
}
.page-home .page { max-width: 1140px; }
.page-projects .page { max-width: 1140px; }
.page-guides .page { max-width: 1140px; }
.page-timeline .page { max-width: 1140px; }

/* Timeline page is a two-column layout: the timeline itself on the
   left, and the résumé card pinned to a right-side aside so it never
   overlaps with the timeline cards. */
.timeline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 40px;
  align-items: start;
}
.timeline-layout__main { min-width: 0; }
.timeline-layout__aside { min-width: 0; }

@media (max-width: 920px) {
  .timeline-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .timeline-layout__aside {
    max-width: 320px;
  }
}

/* Résumé card on the timeline page: a single guide-card scaled down
   to fit the right-hand sidebar. */
.resume-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.resume-card-list .guide-card__preview {
  height: 220px;
}

/* Mobile: iframe-PDF preview renders as a giant placeholder on most
   mobile browsers, so drop the preview and keep the title + download
   CTA only. */
@media (max-width: 920px) {
  .resume-card-list .guide-card__preview { display: none; }
}

/* ===== Guides (PDF cards) ===== */
.guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg-elev);
  border-radius: 8px;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--info-dim);
  overflow: hidden;
}
.guide-card__preview {
  width: 100%;
  height: 280px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.guide-card__preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #ffffff; /* PDF viewer expects light backdrop */
}
.guide-card__meta {
  padding: 14px 18px 6px;
}
.guide-card__name {
  font-family: var(--mono);
  font-size: 1rem;
  margin: 0 0 4px 0;
  color: var(--link-hover);
  line-height: 1.3;
}
.guide-card__size {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.guide-card__download {
  display: block;
  margin: 12px 18px 18px;
  padding: 10px 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--info);
  background: rgba(126, 184, 231, 0.08);
  border: 1px solid var(--info-dim);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.guide-card__download:hover {
  background: var(--info);
  color: var(--bg);
  border-color: var(--info);
}
@media (max-width: 820px) {
  .guide-list { grid-template-columns: 1fr; }
}

/* ===== Adventures (photo gallery) ===== */
.page-adventures .page { max-width: 1140px; }

.adventure-gallery {
  list-style: none;
  padding: 0;
  margin: 32px 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.adventure-gallery li {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
}
.adventure-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.adventure-gallery li:hover img {
  transform: scale(1.04);
}

@media (max-width: 560px) {
  .adventure-gallery { grid-template-columns: 1fr; }
}

.page--with-toc {
  max-width: 1100px;
  display: grid;
  grid-template-columns: minmax(0, var(--col)) 220px;
  gap: 60px;
  align-items: start;
}
.page--with-toc .prose { max-width: var(--col); min-width: 0; }

.prose > *:first-child { margin-top: 0; }

/* ===== Home page ===== */
/* The first H1 + the paragraph that follows it are the hero. */
.page-home .prose > h1:first-child {
  font-size: 3rem;
  margin: 0 0 0.2em 0;
}
.page-home .prose > h1:first-child + p {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 640px;
  margin-bottom: 60px;
}

/* Section headers on the home page get the small-caps eyebrow treatment. */
.page-home .prose > h2 {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 3em 0 1em 0;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--rule);
}

/* The trailing "More at…" / "Full list on…" paragraphs that sit directly
   after a feed list. Scoped narrowly so body paragraphs elsewhere keep
   regular styling. */
.substack-feed + p,
.project-list + p {
  margin-top: 1.4em;
  font-family: var(--mono);
  font-size: 0.9rem;
}

/* The "Elsewhere" list — only top-level UL on the home page rendered straight
   from markdown (the substack feed and project list are includes that carry
   their own classes). `:not([class])` targets just the bare list. */
.page-home .prose > ul:not([class]) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.page-home .prose > ul:not([class]) > li {
  margin: 0;
  padding: 14px 18px;
  background: var(--bg-elev);
  border-radius: 6px;
  border-left: 2px solid var(--accent-dim);
}

/* ===== Substack feed ===== */
.substack-feed {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.substack-feed li {
  margin: 0;
  padding: 18px 20px;
  background: var(--bg-elev);
  border-radius: 8px;
  border-left: 2px solid var(--accent-dim);
}
.substack-feed__placeholder { color: var(--text-muted); }
.substack-feed__title {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--link-hover);
  margin-bottom: 6px;
  border: none;
}
.substack-feed__title:hover { color: var(--accent); }
.substack-feed__meta {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-bottom: 8px;
}
.substack-feed__snippet { margin: 0; color: var(--text-muted); font-size: 0.96rem; }

/* ===== Project cards ===== */
.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}
.page-projects .project-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.page-home .project-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .page-projects .project-list,
  .page-home .project-list {
    grid-template-columns: 1fr;
  }
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 24px;
  background: var(--bg-elev);
  border-radius: 8px;
  border-left: 2px solid var(--accent-dim);
}
/* Push links to the bottom so all cards in a row visually balance. */
.project-card__links { margin-top: auto; }
.project-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px; /* row gap, column gap — keeps wrapped badge tight to title */
  margin-bottom: 0.4em;
}
.project-card__name {
  font-family: var(--mono);
  font-size: 1.2rem;
  margin: 0;
  color: var(--link-hover);
  /* Allow the title to wrap inside its flex slot so the status badge can
     stay on the same line when possible, or drop to a new line cleanly. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.project-card__status {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  border-radius: 4px;
}
.status--public { color: var(--accent); border-color: var(--accent-dim); }
.status--shipped { color: var(--accent); border-color: var(--accent-dim); }
.status--private { color: var(--text-muted); }
.project-card__one-liner {
  font-size: 1rem;
  color: var(--text);
  margin: 0 0 0.8em 0;
}
.project-card__summary { color: var(--text); font-size: 0.94rem; line-height: 1.55; }
.project-card__summary p { margin: 0 0 0.7em 0; }
.project-card__summary p:last-child { margin-bottom: 0; }

/* Hover popover — anchored below the card; shows the full body/summary
   prose. Card itself stays compact at rest with header, one-liner, stack,
   and links visible. */
.project-card__hover-card {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 10;
  padding: 18px 22px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.project-card:hover .project-card__hover-card,
.project-card:focus-within .project-card__hover-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Bridge: invisible hover-zone below the card so the cursor doesn't drop
   the hover when traveling down to the popover. */
.project-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
.project-card__hover-card::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22px;
  border: 6px solid transparent;
  border-bottom-color: var(--bg-elev);
}

@media (hover: none) {
  .project-card__hover-card {
    position: static;
    margin-top: 14px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .project-card__hover-card::before { display: none; }
  .project-card::after { display: none; }
}
.project-card__stack {
  list-style: none;
  padding: 0;
  margin: 1em 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.project-card__stack li {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 9px;
  border-radius: 4px;
  margin: 0;
}
.project-card__links {
  list-style: none;
  padding: 0;
  margin: 1em 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.88rem;
}
.project-card__links li { margin: 0; }
.project-card__link-label { color: var(--text-dim); }

/* ===== Timeline ===== */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.timeline-entry {
  display: grid;
  grid-template-columns: 80px 28px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin: 0;
  padding-bottom: 36px;
}
.timeline-entry + .timeline-entry { padding-top: 4px; }
.timeline-entry:last-child { padding-bottom: 0; }

.timeline-entry__year {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-align: right;
  padding-right: 16px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.timeline-entry__year-start { color: var(--text); }
.timeline-entry__year-sep {
  color: var(--text-dim);
  font-size: 0.75rem;
  margin: 1px 0;
}
.timeline-entry__year-end {
  color: var(--text-dim);
}
.timeline-entry:first-child .timeline-entry__year-end {
  color: var(--accent);
  font-weight: 700;
}

.timeline-entry__rail {
  position: relative;
  width: 28px;
  align-self: stretch;
}
.timeline-entry__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -36px;
  width: 1px;
  background: var(--rule);
  transform: translateX(-50%);
}
.timeline-entry:last-child .timeline-entry__rail::before { bottom: 0; }
.timeline-entry__dot {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-dim);
  transform: translateX(-50%);
  z-index: 1;
}
.timeline-entry:first-child .timeline-entry__dot {
  background: var(--accent);
  border-color: var(--accent);
  animation: timeline-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes timeline-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 231, 135, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(126, 231, 135, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-entry:first-child .timeline-entry__dot {
    animation: none;
    box-shadow: 0 0 0 4px rgba(126, 231, 135, 0.15);
  }
}
.timeline-entry--education .timeline-entry__dot {
  border-style: dashed;
}

.timeline-entry__card {
  position: relative;
  background: var(--bg-elev);
  border-radius: 8px;
  border-left: 2px solid var(--accent-dim);
  padding: 22px 28px 24px;
  margin-left: 4px;
}
/* Work cards mirror their popover: blue left edge. */
.timeline-entry--work .timeline-entry__card {
  border-left-color: var(--info-dim);
}

/* Subtle eyebrow label above the background prose to distinguish it from
   the primary description when both expand on hover. */
.timeline-entry__background-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* On touch devices (no hover) keep the content visible — there's no way to
   reveal it otherwise. */
.timeline-entry--education .timeline-entry__card {
  border-left-color: var(--rule);
}

.timeline-entry__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 14px;
}
.timeline-entry__stack {
  list-style: none;
  padding: 0;
  margin: 0 0 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.timeline-entry__stack li {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 9px;
  border-radius: 4px;
  margin: 0;
}
.timeline-entry__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: transparent;
  flex-shrink: 0;
}
.timeline-entry--work .timeline-entry__logo,
.timeline-entry--education .timeline-entry__logo {
  width: auto;
  max-width: 130px;
  max-height: 64px;
}
.timeline-entry__org-badge {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.timeline-entry__meta { min-width: 0; }
.timeline-entry__role {
  font-family: var(--mono);
  font-size: 1.15rem;
  margin: 0 0 4px 0;
  color: var(--link-hover);
  line-height: 1.3;
}
.timeline-entry__org {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.timeline-entry__org-name { color: var(--text); }
.timeline-entry__sep { margin: 0 6px; color: var(--text-dim); }
.timeline-entry__type-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  border-radius: 3px;
  align-self: start;
  margin-top: 2px;
}
.timeline-entry--work .timeline-entry__type-tag {
  color: var(--info);
  border-color: var(--info-dim);
}
.timeline-entry--education .timeline-entry__type-tag {
  color: var(--accent-dim);
  border-color: var(--accent-dim);
}
/* Hover popover — appears to the right of the card when hovered or
   focused. The card itself stays compact at rest. On narrower viewports
   (where there's no room to the right), the popover falls back to inline
   below the card. */
.timeline-entry__hover-card {
  position: absolute;
  top: 0;
  left: calc(100% + 14px);
  width: 360px;
  z-index: 10;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.timeline-entry__card:hover .timeline-entry__hover-card,
.timeline-entry__card:focus-within .timeline-entry__hover-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Bridge: invisible hover-zone to the right of the card so the cursor stays
   "in" the card while traveling sideways to the popover. */
.timeline-entry__card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 14px;
}

/* Triangle pointing left from the popover toward its card. */
.timeline-entry__hover-card::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 100%;
  border: 6px solid transparent;
  border-right-color: var(--bg-elev);
}

/* Fall back to inline-below when there isn't horizontal room. With the
   timeline page now at 1140px, the side popover needs a viewport ≥ ~1900px
   to avoid clipping — drop to inline-below on anything narrower. */
@media (max-width: 1900px) {
  .timeline-entry__hover-card {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    transform: translateY(-4px);
  }
  .timeline-entry__card:hover .timeline-entry__hover-card,
  .timeline-entry__card:focus-within .timeline-entry__hover-card {
    transform: translateY(0);
  }
  .timeline-entry__card::after {
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 12px;
  }
  .timeline-entry__hover-card::before {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 22px;
    border-right-color: transparent;
    border-bottom-color: var(--bg-elev);
  }
}

.timeline-entry__hover-card p { margin: 0; }
.timeline-entry__hover-card p + p { margin-top: 0.7em; }

/* Eyebrow at the top of every popover. Always green regardless of entry type. */
.timeline-entry__background-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* Work entries get a blue left edge on the popover to match the work tag.
   Education entries keep the default green from .timeline-entry__hover-card. */
.timeline-entry--work .timeline-entry__hover-card {
  border-left-color: var(--info);
}

/* Touch devices have no hover — render the popover inline below the card. */
@media (hover: none) {
  .timeline-entry__hover-card {
    position: static;
    width: auto;
    margin-top: 12px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .timeline-entry__hover-card::before { display: none; }
  .timeline-entry__card::after { display: none; }
}

@media (max-width: 640px) {
  .timeline-entry {
    grid-template-columns: 56px 22px minmax(0, 1fr);
  }
  .timeline-entry__year {
    font-size: 0.72rem;
    padding-right: 10px;
  }
  .timeline-entry__header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .timeline-entry__type-tag {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

/* ===== Sticky TOC ===== */
.toc {
  position: sticky;
  top: 40px;
  align-self: start;
  font-family: var(--mono);
  font-size: 0.85rem;
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
.toc nav { display: flex; flex-direction: column; gap: 10px; }
.toc a {
  color: var(--text-dim);
  border: none;
  border-left: 2px solid transparent;
  padding: 4px 10px;
  margin-left: -20px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.toc a:hover { color: var(--text); }
.toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(126, 231, 135, 0.06);
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding: 28px var(--gutter);
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--text-muted); border: none; }
.site-footer a:hover { color: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .page--with-toc {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .toc {
    position: static;
    border-left: none;
    border-top: 1px solid var(--rule);
    padding: 18px 0 0;
    order: -1;
  }
}

@media (max-width: 560px) {
  html, body { font-size: 16px; }
  .page-home .prose > h1:first-child { font-size: 2.2rem; }
  .site-nav { gap: 18px; }
  .project-card__header { flex-direction: column; align-items: flex-start; }
}