:root{
  --bg:#f6f3ee;
  --text:#161616;
  --muted:#5b5b5b;
  --line:#1f1f1f;
  --accent:#c72f2a;
  --panel:#fffdf8;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.5;
}

a{
  color:inherit;
}

.topbar{
  min-height:72px;
  padding:0 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}

.topbar div{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.topbar strong{
  font-size:1.1rem;
}

.topbar span,
.topbar a{
  color:var(--muted);
  text-decoration:none;
}

.topbar nav{
  display:flex;
  gap:22px;
  font-weight:700;
}

main{
  max-width:1180px;
  margin:0 auto;
  padding:64px 28px 90px;
}

.hero{
  max-width:820px;
  margin-bottom:70px;
}

small,
.template_grid span{
  display:block;
  margin-bottom:12px;
  color:var(--accent);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1{
  max-width:760px;
  margin-bottom:18px;
  font-size:clamp(2.7rem, 6vw, 5.6rem);
  line-height:.95;
}

.hero p{
  max-width:680px;
  color:var(--muted);
  font-size:1.18rem;
}

.section{
  padding:48px 0;
  border-top:1px solid var(--line);
}

.section_head{
  max-width:760px;
  margin-bottom:26px;
}

h2{
  margin-bottom:10px;
  font-size:clamp(2rem, 3.5vw, 3.3rem);
  line-height:1;
}

.template_grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.template_grid article{
  min-height:280px;
  padding:22px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:var(--panel);
}

h3{
  margin-bottom:10px;
  font-size:1.28rem;
}

.template_grid p,
.source_list span{
  color:var(--muted);
}

.template_grid a{
  margin-top:auto;
  font-weight:800;
  text-underline-offset:4px;
}

.source_list{
  display:grid;
  border-top:1px solid var(--line);
}

.source_list a{
  min-height:92px;
  padding:22px 0;
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:24px;
  align-items:center;
  border-bottom:1px solid var(--line);
  text-decoration:none;
}

.source_list strong{
  font-size:1.18rem;
}

.rules{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  list-style:none;
  counter-reset:rules;
}

.rules li{
  min-height:180px;
  padding:20px;
  border:1px solid var(--line);
  border-right:0;
  background:var(--panel);
  counter-increment:rules;
}

.rules li:last-child{
  border-right:1px solid var(--line);
}

.rules li::before{
  content:"0" counter(rules);
  display:block;
  margin-bottom:34px;
  color:var(--accent);
  font-weight:800;
}

@media (max-width:900px){
  .topbar,
  .topbar div,
  .topbar nav{
    align-items:flex-start;
    flex-direction:column;
  }

  .topbar{
    padding:20px;
  }

  .template_grid,
  .rules{
    grid-template-columns:1fr;
  }

  .rules li{
    border-right:1px solid var(--line);
    border-bottom:0;
  }

  .rules li:last-child{
    border-bottom:1px solid var(--line);
  }

  .source_list a{
    grid-template-columns:1fr;
    gap:6px;
  }
}