:root{
  --bg:#0c0f14; --bg2:#131820; --ink:#eef2f7; --dim:#93a1b1; --faint:#5d6b7a;
  --rule:#232c38; --gold:#c9a227; --accent:#d8dee7;
  --f-white:#ffffff; --f-blue:#0039a6; --f-red:#d52b1e; --f-black:#0a0a0a; --f-gold:#ffd900;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#faf8f4; --bg2:#ffffff; --ink:#15191f; --dim:#5a6674; --faint:#8895a3;
    --rule:#e2ded6; --gold:#9a7b16; --accent:#2b3441;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.7 Georgia,"Times New Roman",serif;-webkit-text-size-adjust:100%}
.wrap{max-width:820px;margin:0 auto;padding:0 22px}
.sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

header{border-bottom:1px solid var(--rule)}
.mast{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 0;flex-wrap:wrap}
.mast .name{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600}
.mast .sub{font-size:13px;color:var(--faint);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

.hero{padding:44px 0 30px;border-bottom:1px solid var(--rule)}
h1{font-size:38px;line-height:1.18;margin:0 0 14px;font-weight:400;letter-spacing:-.01em}
.dek{font-size:19px;color:var(--dim);margin:0;max-width:60ch}
.hero-flag{margin:28px 0 0}
.hero-flag svg{display:block;width:100%;height:auto;border-radius:3px;
  box-shadow:0 10px 34px rgba(0,0,0,.34)}
.cap{margin-top:10px;font-size:13px;color:var(--faint);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

/* таймлайн */
.tl{margin:0;padding:0;list-style:none;position:relative}
.tl::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--rule)}
@media (min-width:700px){ .tl::before{left:118px} }
.ev{position:relative;padding:34px 0 34px 24px}
.ev::before{content:"";position:absolute;left:-4px;top:44px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--bg)}
.yr{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.06em;color:var(--gold);margin-bottom:6px}
.ev h2{font-size:22px;font-weight:400;margin:0 0 8px;line-height:1.3}
.ev p{margin:8px 0;color:var(--dim);font-size:16.5px}
.ev .flag{margin:16px 0 4px;max-width:280px}
.ev .flag svg{display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 4px 16px rgba(0,0,0,.28)}
.ev .flagcap{font-size:12.5px;color:var(--faint);margin-top:7px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
@media (min-width:700px){
  .ev{padding-left:158px}
  .ev::before{left:114px}
  .yr{position:absolute;left:0;top:36px;width:100px;text-align:right;margin:0}
}

.pull{border-left:2px solid var(--gold);background:var(--bg2);padding:16px 20px;margin:30px 0;
  border-radius:0 6px 6px 0}
.pull p{margin:0;color:var(--ink);font-size:16.5px}
.pull strong{color:var(--gold)}

footer{border-top:1px solid var(--rule);margin-top:44px}
footer .wrap{padding:22px 22px 36px;color:var(--faint);font-size:13.5px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}