/* kurtismullins.com — typography is the design.
 *
 * One typeface, one measure, no decoration. No framework, no build step, no JS.
 *
 * Inter is self-hosted, subset from nixpkgs' `inter` package (never hotlinked):
 * variable, wght 400-600, Basic Latin plus the punctuation this site uses.
 * Regeneration command: docs/frontend-assets.md.
 */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1c1c1a;
  --ink-soft: #6b675f;
  --paper: #fbfaf7;
  --wash: #f1efe9;
  --rule: #e0dcd3;
  --measure: 65ch;
  --gap: 2.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e5e2db;
    --ink-soft: #96918a;
    --paper: #17171a;
    --wash: #1f1f23;
    --rule: #2e2e33;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--gap) 1.5rem 4rem;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 "Inter", system-ui, sans-serif;
  /* The face stops at 600; never let the browser fake a heavier one. */
  font-synthesis-weight: none;
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.011em; margin: var(--gap) 0 0.75rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1875rem; }
h3 { font-size: 1.0625rem; }
p, ul, ol, dl, pre, figure, table { margin: 0 0 1.25rem; }
strong, b { font-weight: 600; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--gap) 0; }
img { display: block; max-width: 100%; height: auto; }

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
pre { padding: 1rem 1.15rem; overflow-x: auto; background: var(--wash); }
pre code { font-size: inherit; }
blockquote { margin: 0 0 1.25rem; padding-left: 1.15rem; border-left: 1px solid var(--rule); color: var(--ink-soft); }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: var(--gap); }
.site-name { margin: 0; font-size: 1rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-nav a, .site-name a { text-decoration: none; }
.site-nav a:hover, .site-name a:hover { text-decoration: underline; }

.meta { color: var(--ink-soft); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.meta a { text-decoration: none; }
.meta a:hover { text-decoration: underline; }

.entries { list-style: none; padding: 0; }
.entries li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin-bottom: 0.65rem; }
.entries time { flex: none; }

.notes { list-style: none; padding: 0; }
.note { margin-bottom: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.note > :last-child { margin-bottom: 0; }

.tags { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; list-style: none; padding: 0; }

.intro { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem; }
.intro p { flex: 1 1 20rem; margin: 0; }
.intro img { flex: none; width: 108px; }
.availability { color: var(--ink-soft); }

.work-history { list-style: none; padding: 0; }
.work-history-item { margin-bottom: 1.25rem; }
.work-history-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; }
.work-history-employer { font-weight: 600; }
.work-history-years { color: var(--ink-soft); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.work-history-desc { margin: 0.15rem 0 0; color: var(--ink-soft); }

dt { margin-top: 1rem; font-weight: 600; }
dd { margin: 0.15rem 0 0; color: var(--ink-soft); }

.site-footer { margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 0.875rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.75rem; }
.site-footer p { margin: 0.25rem 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media print {
  :root { --ink: #000; --ink-soft: #444; --paper: #fff; --wash: #fff; --rule: #bbb; }
  body { max-width: none; padding: 0; font-size: 11pt; }
  .site-nav, .site-footer nav, .photo-grid, .intro img { display: none; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; word-break: break-all; }
  pre, blockquote, img, .work-history-item { break-inside: avoid; }
}