/* This site's own additions to the lgkm look (home, whoami, 404, field notes, topics). Load after tokens.css and lg.css,
 * which are copies of the same files in sbennito/branding; never edit those here. The fonts are served from here because
 * the site's CSP allows no other origin. */
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }

/* The page gutter, and room at the foot of the page. */
body { padding: 0 var(--space-4) var(--space-16); }

/* Pages here lay out their own columns, so a paragraph takes the width of its column. */
p { max-width: none; }

/* A toggle button (Follow) shows its pressed state in signal-ink. */
.lg-btn[aria-pressed="true"] { border-color: var(--signal-ink); color: var(--signal-ink); }

/* Cards here hold a link in the title rather than being one, so the title link carries the hover. */
.lg-card:focus-within { border-color: var(--line-strong); }
.lg-card:hover .lg-card-title { color: inherit; }
.lg-card-title a { color: var(--ink); text-decoration: none; transition: color var(--duration); }
.lg-card-title a:hover, .lg-card-title a:focus-visible { color: var(--signal-ink); text-decoration: underline; }
@media (max-width: 560px) { .lg-card { padding: var(--space-4); } }