@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 300 800; font-stretch: 100% 125%;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
:root { --night: #081430; --mist: #e8edf6; --slate: #a3b0c9; --gold: #e2b160; --gold-hi: #f5d08a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--mist); font: 17px/1.65 "Archivo", system-ui, sans-serif; }
main { width: min(720px, 100% - 32px); margin: 0 auto; padding: 56px 0 96px; }
.back { color: var(--gold-hi); text-decoration: none; font-weight: 600; font-stretch: 115%; }
.back:hover { text-decoration: underline; }
h1 { font-stretch: 125%; font-weight: 600; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; margin: 40px 0 16px; }
h2 { font-stretch: 112%; font-weight: 600; font-size: 1.15rem; margin: 36px 0 8px; }
p { color: var(--slate); margin: 0; }
a { color: var(--gold-hi); }
.todo { color: #1a1205; background: var(--gold); padding: 12px 16px; border-radius: 10px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; }