@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("../fonts/Alegreya-Variable.woff2") format("woff2-variations"),
       url("../fonts/Alegreya-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* (existing base.css content continues below) */

body {
  font-family: var(--lbr-font-body);
  font-size: var(--lbr-text-base);
  line-height: var(--lbr-leading);
  color: var(--lbr-ink);
  background: var(--lbr-bg);
}

h1, h2, h3, h4 {
  font-family: var(--lbr-font-display);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--lbr-ink);
}

h1 { font-size: var(--lbr-step-5); }
h2 { font-size: var(--lbr-step-4); }
h3 { font-size: var(--lbr-step-3); }
h4 { font-size: var(--lbr-step-2); }

p, li { font-size: var(--lbr-step-0); }
small, .lbr-meta { font-size: var(--lbr-step--1); color: var(--lbr-muted); }

a {
  color: var(--lbr-link);
  text-decoration: none;
  position: relative;
  transition: color var(--lbr-dur-1) var(--lbr-ease);
}
a:hover { color: var(--lbr-coral); }

/* Animated underline for prose links */
.entry-content a, .post-card a, p a, li a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

:focus-visible {
  outline: 3px solid var(--lbr-coral);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lbr-ink);
  color: var(--lbr-cream);
  padding: 8px 16px;
  z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

img { border-radius: var(--lbr-radius-sm); }