/* Portfolio extras on top of shared/base.css. Theme tokens only, no literal colours.
   shared/ and themes/ are copied from the tools site (make sync-theme); edit this file instead. */

/* Anchored sections land below the sticky 64px nav. */
[id] { scroll-margin-top: 80px; }

/* ---------- Top area ---------- */
.hero { padding-block: 3rem 2rem; }
@media (min-width: 768px) { .hero { padding-block: 4.5rem 2.5rem; } }
.hero h1 { margin-bottom: 0.25rem; }
.hero .handle { font-family: var(--font-mono); color: var(--fg-2); margin-bottom: 1rem; }
.hero .lead { margin-bottom: 1.5rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-row .btn svg { width: 16px; height: 16px; }
.contact-list { list-style: none; margin: 0; padding: 0; }

/* On phones the nav links are hidden by base.css; show section jumps under the hero. */
.jump { margin-top: 1.5rem; }
@media (min-width: 640px) { .jump { display: none; } }

/* ---------- Placeholder text AK still has to fill ---------- */
.ph {
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.btn.is-placeholder { border-style: dashed; color: var(--fg-2); }

/* ---------- Work experience ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.timeline .card { display: grid; gap: 4px; }
.timeline h3 { margin: 0; font-size: 1rem; }
.timeline .when { font-family: var(--font-mono); font-size: 0.875rem; color: var(--fg-2); }
.timeline p { margin: 0; }

/* ---------- Blog ---------- */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.post-meta { font-family: var(--font-mono); font-size: 0.875rem; color: var(--fg-2); }
.prose img { height: auto; }
.math { overflow-x: auto; margin: 0 0 1rem; }
.timeline h4 { margin: 0; font-size: 1rem; }
.nowrap { white-space: nowrap; }