/* Reference theme: legibility only, no design opinions (ADR-0026). */
html { font-family: Georgia, serif; line-height: 1.6; color: #1a1a1a; background: #fdfdfb; }
main { max-width: 34rem; margin: 3rem auto; padding: 0 1rem; }
h1, h2, h3 { line-height: 1.25; font-weight: 600; text-wrap: balance; }
/* Line breaking belongs to the browser, which knows the line box no engine-side guess can see (ADR-0045). */
p, li, figcaption { text-wrap: pretty; }
a { color: #1a4d7a; }
img { max-width: 100%; height: auto; }
pre, code { font-family: ui-monospace, monospace; font-size: 0.9em; }
pre { overflow-x: auto; padding: 0.75rem; background: #f3f2ee; }
/* Enough structure to read the demonstration; a real theme starts over (ADR-0026). */
header, footer { max-width: 34rem; margin: 1.5rem auto; padding: 0 1rem; font-size: 0.9em; }
header .site { font-weight: 600; margin: 0 0 0.25rem; }
nav.sections a, nav.languages a, nav.tags a { margin-right: 0.75rem; }
nav.sequence, nav.ends { display: flex; gap: 1rem; justify-content: space-between; margin: 1.5rem 0; }
ul.extras, ol.archive { padding-left: 1.25rem; }
.kind { color: #6b6b6b; font-size: 0.85em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.gallery figure { margin: 0; }
@media (prefers-color-scheme: dark) {
  html { color: #e8e6e1; background: #16161a; }
  a { color: #8ab4dd; }
  pre { background: #22222a; }
  .kind { color: #9a9a9a; }
}