@font-face {
  font-family: "Archivo";
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("media/fonts/archivo-latin.woff2") format("woff2");
}
:root {
  --night: #0a0d10;
  --panel: #13181c;
  --edge: rgba(255, 255, 255, 0.09);
  --ink: #f5f3ee;
  --soft: #aab2b8;
  --ember: #ff6b33;
  --ember-pale: #ffc7a8;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--night); }
body { font: 400 17px/1.6 "Archivo", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--ember-pale); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.bar { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: rgba(10, 13, 16, 0.8); border-bottom: 1px solid var(--edge); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.mark { font-weight: 900; font-stretch: 125%; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.bar nav { display: flex; gap: 26px; }
.bar nav a { color: var(--soft); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.bar nav a[aria-current="page"], .bar nav a:hover { color: var(--ink); }

article { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 96px; }
h1 { font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: 1; letter-spacing: -0.012em; font-size: clamp(32px, 6vw, 56px); }
.updated { margin-top: 14px; color: var(--soft); font-size: 15px; }
.summary { margin-top: 32px; padding: 22px 24px; border-radius: 18px; background: var(--panel); box-shadow: 0 0 0 1px var(--edge); }
h2 { margin-top: 44px; font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: 19px; letter-spacing: 0.01em; }
article p, article li { margin-top: 12px; color: #d9dcd8; }
article ul { padding-left: 22px; }
article li { margin-top: 8px; }
b { color: var(--ink); }

footer { border-top: 1px solid var(--edge); padding: 30px 0 44px; color: var(--soft); font-size: 14.5px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--soft); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .bar nav { gap: 16px; }
  .bar nav a { font-size: 14px; }
  article { padding-top: 48px; }
}