:root { --walnut:#1C1714; --raised:#2E2722; --cream:#F3EAD8; --dim:rgba(243,234,216,.72); --yellow:#FDB827; }
* { box-sizing: border-box; }
body { margin:0; background:var(--walnut); color:var(--cream); font:17px/1.6 Futura, "Avenir Next", "Trebuchet MS", system-ui, sans-serif; }
main { max-width: 680px; margin: 0 auto; padding: 48px 20px 80px; }
.band { display:flex; height:4px; width:120px; margin:14px 0 28px; }
.band span { flex:1; } .g{background:#61BB46}.y{background:#FDB827}.o{background:#F5821F}.r{background:#E03A3E}.p{background:#963D97}.b{background:#009DDC}
h1 { font-weight:500; font-size:44px; line-height:1.1; margin:0; text-transform:lowercase; }
h2 { font-weight:500; font-size:22px; margin:36px 0 8px; }
h3 { font-size:17px; margin:22px 0 4px; }
p, li { color: var(--dim); } strong { color: var(--cream); font-weight:500; }
a { color: var(--yellow); }
nav { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.card { background:var(--raised); border-radius:16px; padding:18px 20px; margin:18px 0; }
.lang { margin-top:56px; padding-top:28px; border-top:1px solid rgba(243,234,216,.2); }
footer { margin-top:56px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }