/* generated by tools/build.py -- edit there, not here */
:root {
  --bg:#fdfdfb; --fg:#1c1c1a; --muted:#63635e; --rule:#e2e1da;
  --card:#ffffff; --accent:#8a5a2b; --accent2:#6b431d;
  --shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px -8px rgba(0,0,0,.12);
  --font:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --headfont:system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#15161a; --fg:#e8e8e4; --muted:#9a9a94; --rule:#2c2e34;
    --card:#1c1e23; --accent:#d9a066; --accent2:#e8c096;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.6);
  }
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; }
.wrap { width:min(100% - 2.5rem, 68rem); margin-inline:auto; }
a { color:var(--accent2); text-underline-offset:.15em; text-decoration-thickness:.06em; }
a:hover { color:var(--accent); }
img,video { max-width:100%; height:auto; border-radius:6px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; background:var(--card); padding:.6rem 1rem;
  border-radius:6px; z-index:100; box-shadow:var(--shadow); }

/* header */
.topbar { border-bottom:1px solid var(--rule); background:var(--bg);
  position:sticky; top:0; z-index:50; }
.bar { display:flex; align-items:center; gap:1.25rem; min-height:4rem; flex-wrap:wrap; }
.brand { font-family:var(--headfont); font-weight:700; font-size:1.15rem;
  letter-spacing:-.01em; text-decoration:none; color:var(--fg); margin-right:auto; }
nav { display:flex; gap:1.1rem; flex-wrap:wrap; }
nav a { font-size:.86rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:600; text-decoration:none; color:var(--muted); padding:.35rem 0;
  border-bottom:2px solid transparent; white-space:nowrap; }
nav a:hover { color:var(--fg); }
nav a.active { color:var(--accent2); border-bottom-color:var(--accent); }
.burger { display:none; }

/* hero */
.hero { padding:4.5rem 0 3rem; border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), var(--bg)); }
.hero h1 { font-family:var(--headfont); font-size:clamp(2.2rem,6vw,3.4rem);
  line-height:1.1; margin:0 0 .6rem; letter-spacing:-.02em; }
.hero .tagline { margin:0; font-size:1.15rem; color:var(--muted); max-width:44rem; }

main { padding:2.75rem 0 4rem; }
h1.pagetitle { font-family:var(--headfont); font-size:clamp(1.9rem,4.5vw,2.6rem);
  margin:.2rem 0 1.5rem; letter-spacing:-.02em; line-height:1.15; }
.secheading { font-family:var(--headfont); font-size:1rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted); margin:3rem 0 1.25rem;
  padding-bottom:.5rem; border-bottom:1px solid var(--rule); font-weight:700; }
.secheading a { color:inherit; text-decoration:none; }
.secheading a:hover { color:var(--accent); }

.crumbs { font-size:.82rem; color:var(--muted); margin-bottom:1.5rem;
  text-transform:uppercase; letter-spacing:.06em; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--accent); }
.crumbs span { opacity:.45; margin:0 .35rem; }

/* article */
.post h1 { font-family:var(--headfont); font-size:clamp(1.9rem,4.6vw,2.75rem);
  line-height:1.15; letter-spacing:-.02em; margin:.2rem 0 1.75rem; max-width:34ch; }
.prose { max-width:38rem; }
.prose.lead { font-size:1.08rem; color:var(--muted); max-width:44rem; }
.prose p { margin:0 0 1.35rem; }
.prose h2,.prose h3,.prose h4,.prose h5 { font-family:var(--headfont);
  line-height:1.25; margin:2.5rem 0 .9rem; letter-spacing:-.01em; }
.prose h2 { font-size:1.6rem; } .prose h3 { font-size:1.3rem; }
.prose h4 { font-size:1.12rem; } .prose h5 { font-size:1rem; }
.prose ul,.prose ol { margin:0 0 1.35rem; padding-left:1.4rem; }
.prose li { margin:.4rem 0; }
.prose blockquote { margin:1.75rem 0; padding:.25rem 0 .25rem 1.4rem;
  border-left:3px solid var(--accent); color:var(--muted); font-style:italic; }
.prose blockquote p:last-child { margin-bottom:0; }
.prose img,.prose video { display:block; margin:1.75rem auto; box-shadow:var(--shadow); }
.prose table { border-collapse:collapse; width:100%; margin:1.75rem 0; font-size:.94rem; }
.prose td,.prose th { border:1px solid var(--rule); padding:.6rem .75rem; text-align:left; }
.prose hr { border:0; border-top:1px solid var(--rule); margin:2.5rem 0; }

/* listings */
.cards,.tiles { list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.cards { grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); }
.tiles { grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); }
.card,.tile { background:var(--card); border:1px solid var(--rule);
  border-radius:10px; padding:1.35rem; box-shadow:var(--shadow);
  transition:transform .15s ease, border-color .15s ease; }
.card:hover,.tile:hover { transform:translateY(-2px); border-color:var(--accent); }
.card h3,.tile h3 { font-family:var(--headfont); margin:0 0 .5rem;
  font-size:1.12rem; line-height:1.3; letter-spacing:-.01em; }
.card h3 a,.tile h3 a { color:var(--fg); text-decoration:none; }
.card h3 a:hover,.tile h3 a:hover { color:var(--accent2); }
.card p,.tile p { margin:0; font-size:.92rem; color:var(--muted); line-height:1.55; }
.tile .count { display:block; margin-top:.75rem; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--accent2); font-weight:600; }

footer { border-top:1px solid var(--rule); padding:2.5rem 0 3.5rem;
  font-size:.88rem; color:var(--muted); }
footer p { margin:.2rem 0; }
.muted { color:var(--muted); }

@media (max-width:44rem) {
  body { font-size:17px; }
  .bar { min-height:3.5rem; }
  .burger { display:flex; flex-direction:column; gap:4px; cursor:pointer; padding:.4rem; }
  .burger span { width:22px; height:2px; background:var(--fg); border-radius:2px; }
  nav { display:none; width:100%; flex-direction:column; gap:0;
    padding-bottom:.75rem; }
  #navtoggle:checked ~ nav { display:flex; }
  nav a { padding:.6rem 0; border-bottom:1px solid var(--rule); }
  nav a.active { border-bottom-color:var(--rule); }
  .hero { padding:3rem 0 2.25rem; }
  main { padding:2rem 0 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}