* {
  box-sizing:border-box
}

body {
  margin:0;
  color:#203743;
  background:#fafaf7;
  font:17px/1.7 system-ui,sans-serif
}

a {
  color:#8a4800;
  text-underline-offset:3px
}

a:hover {
  color:#432600
}

a:focus-visible {
  outline:3px solid #cf6600;
  outline-offset:4px
}

.top {
  background:#233f4d;
  color:white;
  font-size:13px
}

.top>div {
  max-width:1120px;
  margin:auto;
  padding:9px 24px
}

.top a {
  float:right;
  color:white
}

header {
  max-width:1120px;
  margin:auto;
  padding:30px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.logo {
  width:230px;
  height:auto;
  display:block
}

.button {
  background:#a45100;
  color:white;
  padding:12px 20px;
  border-radius:5px;
  text-decoration:none;
  font-weight:650
}

.button:hover {
  background:#773b00;
  color:white
}

nav {
  border-block:1px solid #e0e3df;
  display:flex;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  padding:14px 20px;
  background:white
}

nav a {
  color:#203743;
  text-decoration:none;
  font-size:15px
}

nav [aria-current] {
  font-weight:750;
  text-decoration:underline;
  text-decoration-color:#bd6000;
  text-decoration-thickness:3px;
  text-underline-offset:8px
}

main {
  max-width:960px;
  margin:56px auto 80px;
  padding:0 24px;
  min-height:45vh
}

h1 {
  font-size:clamp(30px,4vw,45px);
  line-height:1.2;
  letter-spacing:-1px;
  margin:0 0 28px
}

h2 {
  font-size:24px
}

.eyebrow {
  font-size:12px;
  letter-spacing:2px;
  font-weight:700;
  color:#995000
}

p {
  margin:0 0 22px
}

img {
  max-width:100%;
  height:auto
}

footer {
  border-top:1px solid #d7ddd9;
  padding:28px 24px;
  max-width:1120px;
  margin:auto;
  font-size:13px
}

footer p {
  margin-bottom:6px
}

.topics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:38px
}

.topics a {
  border-top:3px solid #b35b00;
  background:white;
  padding:24px;
  text-decoration:none;
  display:grid;
  color:#203743
}

.topics span {
  font-size:14px;
  margin-top:18px
}

.skip {
  position:absolute;
  left:-10000px
}

.skip:focus {
  left:20px;
  background:white;
  padding:10px;
  z-index:5
}

@media(max-width:650px) {
  header {
  align-items:flex-start;
  flex-direction:column;
  padding:24px
}

.logo {
  width:200px
}

nav {
  gap:18px;
  justify-content:flex-start
}

.topics {
  grid-template-columns:1fr
}

main {
  margin-top:36px
}

.button {
  font-size:14px
}


}