@font-face { font-family: Bitter; src: url(/typsnitt/Bitter-Regular.ttf); font-weight: 400; font-display: swap; }
@font-face { font-family: Bitter; src: url(/typsnitt/Bitter-SemiBold.ttf); font-weight: 600; font-display: swap; }
:root { --papper: #FBFBF8; --bläck: #1A1A18; --dämpad: #56564F; --linje: #DEDED8; --mässing: #D9A514; }
@media (prefers-color-scheme: dark) {
  :root { --papper: #151514; --bläck: #F2F2EE; --dämpad: #A3A39B; --linje: #33332F; --mässing: #E0B02A; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papper); color: var(--bläck); font: 400 18px/1.6 Bitter, Georgia, serif; }
header, main, footer { max-width: 640px; margin: 0 auto; padding: 0 20px; }
header { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 8px; }
.hem { display: flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; color: var(--bläck); }
.hem img { border-radius: 10px; }
nav a { color: var(--dämpad); text-decoration: none; margin-left: 18px; }
nav a[aria-current] { color: var(--bläck); text-decoration: underline; text-underline-offset: 4px; }
main { padding-top: 32px; padding-bottom: 48px; }
h1 { font-weight: 600; font-size: 2rem; line-height: 1.2; margin: 0 0 16px; }
h2 { font-weight: 600; font-size: 1.2rem; margin: 36px 0 8px; }
p, li { color: var(--bläck); }
.dämpad { color: var(--dämpad); }
a { color: var(--bläck); text-decoration: underline; text-underline-offset: 3px; }
blockquote { margin: 20px 0; padding-left: 16px; border-left: 3px solid var(--mässing); color: var(--dämpad); }
.etikett { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dämpad); }
footer { border-top: 1px solid var(--linje); padding-top: 20px; padding-bottom: 40px; font-size: 0.9rem; color: var(--dämpad); }
footer p { color: var(--dämpad); margin: 6px 0; }