* { box-sizing: border-box; }
html { background: #1a120c; }
body {
  margin: 0; color: #f3e6d2; line-height: 1.55;
  font: 17px/1.55 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: #f2c14e; }
.hero {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 20px;
  background: linear-gradient(rgba(20,12,6,.55), rgba(20,12,6,.85)), url(img/battle.jpg) center/cover no-repeat;
}
.hero img.icon { width: 148px; height: 148px; border-radius: 32px; box-shadow: 0 8px 28px rgba(0,0,0,.55); }
.hero h1 { margin: 22px 0 4px; font-size: 44px; color: #f2c14e; text-shadow: 0 3px 0 #5a3312, 0 6px 18px rgba(0,0,0,.6); }
.hero .sub { font-size: 24px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.hero p.lead { max-width: 560px; margin: 22px auto; font-size: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.badge { display: inline-block; margin-top: 8px; padding: 10px 22px; border-radius: 999px;
  background: rgba(242,193,78,.16); border: 1px solid rgba(242,193,78,.5); font-weight: 600; }
footer { padding: 22px 16px; text-align: center; font-size: 14px; color: #b9a58c; }
footer a { margin: 0 10px; }
.doc { max-width: 780px; margin: 0 auto; padding: 28px 20px 48px; }
.doc h1 { color: #f2c14e; font-size: 30px; line-height: 1.25; }
.doc h2 { color: #f2c14e; font-size: 21px; margin-top: 30px; }
.doc .back { font-size: 15px; }
.doc .date { color: #b9a58c; font-size: 15px; }
.doc li { margin: 4px 0; }