html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: #16232e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: #1c5e8c; }

.sheet { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

.masthead {
  border-bottom: 2px solid #16232e;
  padding: 1.5rem 0 .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem 2rem;
}
.mark { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: #16232e; }
.mark span { font-weight: 400; color: #5a6b78; }
.role {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #5a6b78;
}
.menu { margin-left: auto; display: flex; gap: 1.4rem; font-size: .9rem; }
.menu a { color: #16232e; text-decoration: none; padding-bottom: .2rem; }
.menu a:hover { box-shadow: inset 0 -2px 0 #1c5e8c; }

.banner { margin: 1.5rem 0 0; }
.banner img { width: 100%; height: auto; display: block; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.6rem 0 .7rem; font-weight: 650; }
h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #5a6b78;
  margin: 2.4rem 0 .8rem;
  border-top: 1px solid #d7dfe5;
  padding-top: .9rem;
}
h3 { font-size: 1.02rem; margin: 0 0 .3rem; }
p { margin: 0 0 1rem; max-width: 42rem; }
.standfirst { font-size: 1.1rem; color: #33444f; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem; }
.card { border: 1px solid #d7dfe5; padding: 1.1rem 1.2rem; }
.card p { margin: 0; font-size: .94rem; color: #445664; }
.card .ref { font-size: .72rem; letter-spacing: .1em; color: #8a9aa6; text-transform: uppercase; }

.scope { width: 100%; border-collapse: collapse; font-size: .93rem; }
.scope th, .scope td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid #e4eaee; vertical-align: top; }
.scope th { font-weight: 600; width: 32%; }
.scope td { color: #445664; }
.tablewrap { overflow-x: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.split img { width: 100%; height: auto; display: block; }

.figcap { font-size: .8rem; color: #8a9aa6; margin: .4rem 0 0; }

.callout { background: #f1f5f8; padding: 1.1rem 1.3rem; border-left: 3px solid #1c5e8c; margin: 1.8rem 0; }
.callout p { margin: 0; }

.colophon {
  margin-top: 3.2rem;
  border-top: 1px solid #d7dfe5;
  padding: 1.1rem 0 3rem;
  font-size: .85rem;
  color: #5a6b78;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
}

@media (max-width: 40rem) {
  .split { grid-template-columns: 1fr; }
  .menu { margin-left: 0; width: 100%; gap: 1rem; }
}