:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; }
body { max-width: 48rem; margin: 2rem auto; padding: 0 1rem; }
header h1 { margin: 0; }
.tagline { opacity: .7; margin-top: .25rem; }
section { margin: 1.5rem 0; }
h2 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: .35rem 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.note { opacity: .7; font-size: .9em; margin-left: .5rem; }
footer { margin-top: 3rem; opacity: .7; font-size: .9em; }

/* logo + bio - optional site.yaml keys, key-guarded in base.html (scaffold, 2026-09-09) */
header { text-align: center; }
.logo { display: block; max-width: 320px; height: auto; margin: 0 auto 1rem; }
.bio { margin: 1rem 0 0; }
/* cindyfox - brand palette (2026-09-09), from _design/cindyfox_color-palette_v01.md:
   E8E9ED platinum = page ground - 1A1404 ink = text (as lettered in the mark)
   ECCBD9 petal frost = rule - 0EA1DC fox-eye blue = links - 9B5094 grape soda = hover/emphasis
   FFDD18 yellow = the mark's own field; it arrives inside the logo, not as the page ground */
:root { color-scheme: light; --bg: #E8E9ED; --fg: #1A1404; --deep: #ECCBD9; --accent: #0EA1DC; --hot: #9B5094; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
a:hover { color: var(--hot); }
footer { border-top: 1px solid var(--deep); padding-top: 1rem; }