:root { --bg: #f8f9f8; --surface: #fff; --ink: #23292a; --muted: #6b7372; --line: #dde3dd; --accent: #4f6b57; --accent-soft: #e8efe7;
  --display: "Newsreader", Georgia, serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif }
@media (prefers-color-scheme: dark) { :root { --bg: #151a17; --surface: #1c231f; --ink: #e6ebe7; --muted: #a3ada6; --line: #2e3831; --accent: #a9c7ad; --accent-soft: #1f2d24; color-scheme: dark } }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.7 }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)) }
header { border-bottom: 1px solid var(--line) }
header .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; flex-wrap: wrap }
.brand { font-family: var(--display); font-size: 1.3rem; color: var(--ink); text-decoration: none }
.brand small { display: block; font-family: var(--body); font-size: .8rem; color: var(--muted) }
header nav { display: flex; gap: 18px; font-size: .95rem }
header nav a { color: var(--ink); text-decoration: none }
a { color: var(--accent) }
main { padding-block: 48px 64px }
.crumb { font-size: .85rem; color: var(--muted) }
.crumb a { color: var(--muted) }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.2; text-wrap: balance }
h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 12px 0 20px }
h2 { font-size: 1.5rem; margin: 40px 0 12px }
.lead { font-size: 1.15rem; color: var(--muted) }
p { margin: 0 0 14px }
ul { padding-left: 1.2em; margin: 0 0 14px; display: grid; gap: 6px }
.cta { margin-top: 48px; background: var(--accent-soft); padding: 28px; border-radius: 12px }
.cta h2 { margin-top: 0 }
.btn { display: inline-block; background: var(--accent); color: var(--bg); padding: 12px 22px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-top: 6px }
.author { display: flex; gap: 14px; align-items: center; margin-top: 32px; font-size: .92rem; color: var(--muted) }
.author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 30% }
.more { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px }
.list { list-style: none; padding: 0; display: grid; gap: 0 }
.list li { border-bottom: 1px solid var(--line); padding: 18px 0 }
.list a { font-family: var(--display); font-size: 1.3rem; text-decoration: none; color: var(--ink) }
.list a:hover { color: var(--accent) }
.list p { margin: 6px 0 0; color: var(--muted); font-size: .95rem }
.note { font-size: .85rem; color: var(--muted); margin-top: 32px }
footer { border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted) }
footer .wrap { padding-block: 24px }