:root {
  --morpho: #1C6FE0; --pudra: #F9C9CC; --sabah: #F5F8FC; --murekkep: #18233A;
  --muted: #5B677D; --line: #DDE4EE; --surface: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root { --sabah: #0F1522; --murekkep: #E8EDF5; --muted: #9AA6BA; --line: #2A354B; --surface: #172033; --morpho: #7CC0FF; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sabah); color: var(--murekkep);
       font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.65; }
a { color: var(--morpho); }
header, main, footer { max-width: 760px; margin: 0 auto; padding-inline: 20px; }
header { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; gap: 12px; flex-wrap: wrap; }
.brand { font-family: "Young Serif", Georgia, serif; font-size: 1.6rem; text-decoration: none; color: var(--murekkep); }
nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: .95rem; }
nav a { text-decoration: none; color: var(--muted); }
nav a[aria-current="page"] { color: var(--murekkep); font-weight: 600; }
main { padding-block: 12px 48px; }
h1 { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1.15; margin: 8px 0 6px; }
h2 { font-size: 1.12rem; margin: 30px 0 6px; }
p, li { max-width: 68ch; }
ul { padding-left: 20px; }
.meta { color: var(--muted); font-size: .92rem; margin: 0 0 18px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.mail { font-weight: 600; user-select: all; }
footer { border-top: 1px solid var(--line); padding-block: 20px 36px; color: var(--muted); font-size: .9rem; display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
footer a { color: var(--muted); }