:root { --bg: oklch(15% .01 280); --bg-2: oklch(19% .015 280); --ink: oklch(94% .01 90); --muted: oklch(72% .02 90); --gold: oklch(80% .12 85); --line: color-mix(in oklch, var(--gold) 25%, transparent); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 300 1.0625rem/1.7 "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--gold); text-underline-offset: 3px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem clamp(1rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.logo { font: 400 1.35rem "Fraunces", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; }
.logo b { color: var(--gold); font-weight: 500; }
header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
header nav a { color: var(--muted); text-decoration: none; } header nav a:hover, header nav a[aria-current] { color: var(--gold); }
main { max-width: 48rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 5vw, 2rem); }
h1 { font: 350 clamp(2rem, 6vw, 3.25rem)/1.1 "Fraunces", Georgia, serif; text-wrap: balance; margin-bottom: .5rem; }
h2 { font: 400 1.5rem/1.2 "Fraunces", Georgia, serif; margin: 2.5rem 0 .75rem; color: var(--gold); }
p, ul, ol { margin-bottom: 1rem; color: color-mix(in oklch, var(--ink) 88%, transparent); } ul, ol { padding-left: 1.4rem; } li { margin-bottom: .35rem; }
.meta { color: var(--muted); font-size: .9rem; margin-bottom: 2rem; }
.note { border: 1px dashed var(--gold); border-radius: .8rem; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: .92rem; color: var(--muted); background: var(--bg-2); }
mark.todo { background: color-mix(in oklch, var(--gold) 25%, transparent); color: var(--gold); padding: 0 .3em; border-radius: .25em; }
footer { border-top: 1px solid var(--line); padding: 2rem clamp(1rem, 5vw, 4rem); text-align: center; color: var(--muted); font-size: .85rem; }
footer a { margin: 0 .6rem; color: var(--muted); } footer a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; padding: .45rem .8rem; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: " ▾"; color: var(--gold); }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + .4rem); list-style: none; padding: .4rem; margin: 0; min-width: 9rem; background: var(--bg-2); border: 1px solid var(--gold); border-radius: .8rem; z-index: 10; }
.lang-switch li { margin: 0; } .lang-switch li a { display: block; padding: .45rem .7rem; border-radius: .5rem; color: var(--muted); text-decoration: none; }
.lang-switch li a:hover, .lang-switch li a[aria-current] { color: var(--gold); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin-bottom: 1rem; }
dl.facts dt { color: var(--muted); } dl.facts dd { margin: 0; }
@media (max-width: 34rem) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: .5rem; } }

main, header nav, footer { overflow-wrap: anywhere; hyphens: auto; }
dl.facts > * { min-width: 0; }