/* Open Honest Foundation
   One stylesheet for every page. Page sections carry their own inline
   layout; this file holds the type, the color, the chrome, and the
   narrow-screen overrides. */

html { box-sizing: border-box }
*, *::before, *::after { box-sizing: inherit }

body {
  margin: 0;
  background: #FAFAF9;
  color: #1A1A17;
  font-family: Spectral, Georgia, serif;
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400 }
p { margin: 0 }
img, svg { max-width: 100%; height: auto }
a { color: #1B4D4B }
a:hover { color: #0E2E2C }
table { border-collapse: collapse; width: 100% }

.page { min-height: 100vh; display: flex; flex-direction: column }
.wrap { max-width: 1180px; margin: 0 auto }

/* Type helpers */
.mono { font-family: 'IBM Plex Mono', monospace }
.lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #8A8A7E;
}
.num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  color: #8A8A7E;
  padding-top: 3px;
}

/* Status chips */
.chip, .chipfill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  display: inline-block;
  padding: 3px 7px;
  white-space: nowrap;
}
.chip { color: #5A5A52; border: 1px solid #C9C6BC }
.chipfill { color: #FFFFFF; background: #1B4D4B }

/* Header */
.site-header { border-bottom: 1px solid #E4E2DC; background: #FFFFFF }
.site-header .wrap {
  padding: 22px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #1A1A17;
}
.brand-mark {
  font-family: 'IBM Plex Mono', monospace;
  width: 30px;
  height: 30px;
  border: 1.5px solid #1A1A17;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
}
.brand-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.nav {
  font-family: 'IBM Plex Mono', monospace;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  font-size: 13.5px;
}
.nav a { text-decoration: none; color: #1A1A17 }
.nav a:hover { color: #1B4D4B }
.nav a[aria-current="page"] { color: #1B4D4B }

/* Footer */
.site-footer { border-top: 1px solid #E4E2DC; margin-top: auto; background: #FFFFFF }
.site-footer .wrap {
  font-family: 'IBM Plex Mono', monospace;
  padding: 26px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  font-size: 13px;
  color: #6B6B62;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 22px }

/* Home page tooltips. The marker is a button so a keyboard reaches it. */
.i {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 0;
  background: none;
  border: 1px solid #A8A69C;
  border-radius: 50%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
  color: #6B6B62;
  margin-left: 8px;
  cursor: help;
  position: relative;
  vertical-align: 2px;
}
.i:hover, .i:focus-visible { background: #1A1A17; color: #FFFFFF; border-color: #1A1A17 }
.ai {
  display: inline-block;
  background: #8C4A2F;
  color: #FFFFFF;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 6px;
  margin-left: 8px;
  cursor: help;
  position: relative;
  vertical-align: 2px;
}
.i .tip, .ai .tip { display: none }
.i:hover .tip, .ai:hover .tip,
.i:focus-visible .tip, .ai:focus-visible .tip {
  display: block;
  position: absolute;
  left: 24px;
  top: -10px;
  width: 330px;
  background: #1A1A17;
  color: #F2F1EC;
  font-family: Spectral, Georgia, serif;
  font-size: 14.5px;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 13px 16px;
  z-index: 60;
  text-align: left;
  cursor: default;
  font-weight: 400;
}

/* Narrow screens. The section paddings are inline, so these overrides
   need !important to take effect. */
@media (max-width: 760px) {
  .wrap { padding-left: 20px !important; padding-right: 20px !important }
  .nav { gap: 16px; font-size: 13px }
  .chip, .chipfill { white-space: normal }
  .i .tip, .ai .tip,
  .i:hover .tip, .ai:hover .tip { width: 250px; left: 0; top: 24px }
}
@media (max-width: 420px) {
  body { font-size: 17px }
}

@media print {
  .site-header, .site-footer { display: none }
  body { background: #FFFFFF }
}