*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:#484848;
  background:#f2f2f2;
  -webkit-font-smoothing:antialiased;
}
a{color:#c0121b;text-decoration:none;transition:color .25s ease}
a:hover,a:focus{color:#161616;text-decoration:underline}

/* Header / Navbar */
.site-header{
  background:#161616;
  border-bottom:4px solid #c0121b;
}
.site-header .inner{
  max-width:1100px;
  margin:0 auto;
  padding:26px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.site-title{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:#fff;
}
.site-nav{
  background:#1c1c1c;
}
.site-nav ul{
  max-width:1100px;
  margin:0 auto;
  padding:0 14px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.site-nav li{margin:0}
.site-nav a{
  display:block;
  padding:12px 16px;
  color:#f2f2f2;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.site-nav a:hover{background:#c0121b;color:#fff;text-decoration:none}

/* Main */
main{
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px 20px;
}
h1{
  margin:0 0 30px;
  font-size:clamp(26px,5vw,44px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#161616;
  padding-bottom:16px;
  border-bottom:6px solid #161616;
  overflow-wrap:break-word;
}
article{
  background:#fff;
  padding:36px 40px;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  overflow-wrap:break-word;
}
article h2,article h3,article h4,article h5{
  color:#161616;
  line-height:1.3;
  font-weight:700;
  margin:1.6em 0 .6em;
}
article h2{font-size:28px;letter-spacing:1px}
article h3{font-size:22px;letter-spacing:1px}
article h4{font-size:18px}
article h5{font-size:13px;text-transform:uppercase;letter-spacing:2px}
article p{margin:0 0 1.2em}
article ul,article ol{margin:0 0 1.2em;padding-left:1.4em}
article blockquote{
  margin:1.5em 0;
  padding:10px 24px;
  border-left:4px solid #c0121b;
  font-style:italic;
  color:#161616;
}
article img{max-width:100%;height:auto}
article table{width:100%;border-collapse:collapse;margin-bottom:1.2em}
article td,article th{padding:10px;border-bottom:1px solid #e7e7e7;text-align:left}
article th{background:#f0f0f0}

.transition{
  margin:30px 0 0;
  padding:28px 40px;
  background:#fff;
  border-left:6px solid #c0121b;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.transition p{margin:0 0 1em}
.transition p:last-child{margin-bottom:0}

/* Links block */
.links-block{
  margin:30px 0 0;
  padding:32px 40px;
  background:#161616;
  color:#f2f2f2;
  border-top:5px solid #c0121b;
}
.links-block h3{
  margin:30px 0 14px;
  font-size:16px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff;
  padding-bottom:8px;
  border-bottom:1px solid #3a3a3a;
}
.links-block h3:first-child{margin-top:0}
.links-block ul{
  list-style:none;
  margin:0;
  padding:0;
  column-count:2;
  column-gap:40px;
}
.links-block li{
  break-inside:avoid;
  padding:6px 0;
  border-bottom:1px dotted #333;
  overflow-wrap:anywhere;
}
.links-block a{color:#f2f2f2}
.links-block a:hover{color:#ff5a62;text-decoration:underline}

/* Footer */
.site-footer{
  margin-top:50px;
  background:#10100f;
  border-top:4px solid #c0121b;
  color:#a6a6a6;
  text-align:center;
  padding:30px 20px;
}
.site-footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 24px;
}
.site-footer a{
  color:#eee;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}
.site-footer a:hover{color:#ff5a62}

@media (max-width:767px){
  body{font-size:15px;line-height:1.65}
  .site-header .inner{justify-content:center;text-align:center}
  main{padding:26px 12px 10px}
  article{padding:22px 18px}
  .transition{padding:20px 18px}
  .links-block{padding:24px 18px}
  .links-block ul{column-count:1}
  article h2{font-size:23px}
  article h3{font-size:19px}
}
@media (min-width:768px) and (max-width:1019px){
  article{padding:30px}
  .links-block{padding:28px 30px}
}