:root { --bg:#111318; --text:#e4e4e7; --muted:#71717a; --surface:#1c1f27; --border:#27272a; --accent:#67e8d8; --primary:#38bdf8; }
@media (prefers-color-scheme: light) { :root { --bg:#f9f9f9; --text:#18181b; --surface:#fff; --border:#e4e4e7; --accent:#0d9488; --primary:#0284c7; } }
* { box-sizing: border-box; }
body { margin:0; font-family:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
main { max-width:660px; margin:0 auto; padding:1.5rem 1rem 4rem; }
a { color:var(--primary); text-decoration:none; } a:hover { text-decoration:underline; }
header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.brand { font-family:'Dancing Script',cursive; font-size:2.2rem; color:var(--accent); }
header nav a { margin-left:1rem; font-size:0.9rem; color:var(--muted); }
h1 { font-size:1.5rem; margin:0 0 0.5rem; } h2 { font-size:1.1rem; margin:2rem 0 0.75rem; }
.lead { color:var(--muted); margin:0 0 1.5rem; line-height:1.6; }
.quotes { list-style:none; padding:0; margin:0; display:grid; gap:0.75rem; }
.quote-card { background:var(--surface); border-radius:6px; padding:1.25rem 1.35rem 1rem; }
.quote-card blockquote { margin:0 0 0.6rem; font-style:italic; font-size:1.05rem; line-height:1.75; }
.quote-card blockquote a { color:var(--text); }
.meta { margin:0; font-size:0.8rem; color:var(--muted); letter-spacing:0.04em; }
.index { list-style:none; padding:0; margin:0; columns:2; column-gap:1.5rem; }
.index li { padding:0.3rem 0; break-inside:avoid; } .count { color:var(--muted); font-size:0.8rem; }
.pager { display:flex; justify-content:space-between; margin:1.5rem 0; color:var(--muted); font-size:0.9rem; }
.single .big { margin:0 0 1rem; } .single h1 { font-size:1.45rem; font-style:italic; font-weight:400; line-height:1.6; }
.button { display:inline-block; margin-top:1rem; padding:0.6rem 1.1rem; border-radius:999px; background:var(--accent); color:#111318; font-weight:600; }
footer { margin-top:3rem; border-top:1px solid var(--border); padding-top:1rem; font-size:0.85rem; color:var(--muted); }
@media (max-width:480px) { .index { columns:1; } }