:root {
  --paper: #f5f1e9;
  --ink: #172c49;
  --red: #963c38;
  --muted: #5c6170;
  --line: #d4c9b8
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--paper);
  color: #262b32;
  font: 18px/1.65 Georgia,serif
}

.wrap {
  max-width: 1080px;
  margin: auto;
  padding: 0 28px
}

.mast {
  padding: 32px 0 16px;
  border-bottom: 4px solid var(--red);
  /*background-image: url("/assets/images/logo_slim.png");
  background-repeat: no-repeat;
  background-size: 300px 100px;*/
}

.brand {
  font: bold clamp(27px,5vw,54px)/1.05 Impact,'Arial Narrow',sans-serif;
  letter-spacing: .035em;
  color: var(--ink);
  text-decoration: none
}

  .brand span {
    display: block
  }

.mast p, .kicker {
  font: 700 13px/1.5 Arial,sans-serif;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--red)
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

a {
  color: #123e71
}

nav a {
  font: 700 15px Arial,sans-serif;
  text-decoration: none;
  color: var(--ink)
}

  nav a:hover, a:hover {
    text-decoration: underline
  }

main {
  padding: 35px 0 65px
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.2
}

h1 {
  font-size: clamp(38px,6vw,70px);
  max-width: 800px;
  margin: 12px 0 24px
}

h2 {
  font-size: 32px
}

h3 {
  font-size: 23px
}

p, li {
  max-width: 780px
}

li {
  margin: 9px 0
}

.lead {
  font-size: clamp(21px,3vw,27px);
  color: #454b55
}

.hero {
  padding: 40px 0 65px
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}

.button {
  background: var(--ink);
  color: white;
  text-decoration: none;
  padding: 13px 20px;
  font: 700 15px Arial,sans-serif
}

  .button.secondary {
    background: var(--red)
  }

section {
  margin: 40px 0
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap: 20px
}

  .cards article, .notice {
    border: 1px solid var(--line);
    background: #fffaf2;
    padding: 24px
  }

.notice {
  border-left: 5px solid var(--red)
}

footer {
  border-top: 1px solid var(--line);
  padding: 25px 0 45px;
  color: var(--muted);
  font: 14px/1.5 Arial,sans-serif
}

@media(max-width:600px) {
  .wrap {
    padding: 0 18px
  }

  nav {
    gap: 14px
  }

  main {
    padding-top: 15px
  }

  .hero {
    padding-top: 20px
  }
}