/* Generated by scripts/build-website-css.js. Edit the source stylesheets. */

/* Self-hosted faces for the shared header and footer. Private family names keep
   the chrome identical on every layout, whichever fonts the page itself loads.
   The files are the same ones the book page and guides already serve. */
@font-face {
  font-family: "Site Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/book/inter-v20-latin-400-800-3100e775e8.woff2) format("woff2");
}

@font-face {
  font-family: "Site Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/book/ibm-plex-mono-v20-latin-400-08949f728d.woff2) format("woff2");
}

@font-face {
  font-family: "Site Serif";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(/fonts/book/newsreader-v26-latin-400-500-6e4f2958c3.woff2) format("woff2");
}

/* The shared site header (src/_includes/site-header.njk). One navigation
   layout with restrained dark and light colour variants; every page currently
   uses the dark variant. Fonts come from chrome-fonts.css so the header looks
   the same whichever fonts the page itself loads. */
.unified-header {
  --nav-text: #415164;
  --nav-strong: #232f3e;
  --nav-background: #ffffff;
  --nav-border: #dce3e8;
  --nav-menu-background: #ffffff;
  --nav-menu-text: #232f3e;
  position: sticky;
  top: 0;
  z-index: 50;
  flex: 0 0 auto;
  color: var(--nav-strong);
  background: var(--nav-background);
  border-bottom: 1px solid var(--nav-border);
  font-family: "Site Inter", "Inter", system-ui, sans-serif;
  line-height: 1.5;
}

.unified-header--dark {
  --nav-text: #a9bac7;
  --nav-strong: #f1f8f8;
  --nav-background: rgba(5, 9, 13, 0.94);
  --nav-border: rgba(137, 176, 186, 0.18);
  --nav-menu-background: #05090d;
  --nav-menu-text: #d8e5e7;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.unified-header__row {
  width: min(calc(100% - (clamp(18px, 5vw, 64px) * 2)), 1220px);
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.unified-header a,
.unified-header a:hover,
.unified-header__mobile a,
.unified-header__mobile a:hover {
  text-decoration: none;
}

.unified-header .unified-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: 0 0 auto;
  color: var(--nav-strong);
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.unified-header__brand .brand-word span,
.unified-header__brand .brand-mark {
  color: #5aa9f0;
}

.unified-header__brand .brand-mark {
  flex: none;
  width: 1.2em;
  height: auto;
}

.unified-header__desktop {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 3px;
}

.unified-header__desktop a {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border-bottom: 2px solid transparent;
  color: var(--nav-text);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease;
}

.unified-header__desktop a:hover,
.unified-header__desktop a:focus-visible,
.unified-header__desktop a[aria-current="page"] {
  color: var(--nav-strong);
  border-bottom-color: #38bdf8;
}

.unified-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.unified-header .unified-header__cross-link {
  color: var(--nav-text);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.unified-header .unified-header__cross-link:hover,
.unified-header .unified-header__cross-link:focus-visible {
  color: var(--nav-strong);
}

.unified-header .unified-header__sign-in {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nav-text);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.unified-header .unified-header__sign-in:hover,
.unified-header .unified-header__sign-in:focus-visible {
  color: var(--nav-strong);
}

.unified-header .unified-header__cta,
.unified-header__mobile .unified-header__mobile-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: 7px;
  color: #081019;
  background: #9fbfe3;
  font-size: 0.86rem;
  font-weight: 750;
  white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms ease;
}

.unified-header .unified-header__cta:hover,
.unified-header__mobile .unified-header__mobile-cta:hover {
  background: #bdd3ea;
  transform: translateY(-1px);
}

.unified-header__toggle {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  border: 1px solid var(--nav-border);
  border-radius: 8px;
  color: var(--nav-strong);
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.unified-header__mobile[hidden] {
  display: none !important;
}

.unified-header__mobile {
  --nav-border: #dce3e8;
  --nav-menu-background: #ffffff;
  --nav-menu-text: #232f3e;
  font-family: "Site Inter", "Inter", system-ui, sans-serif;
  line-height: 1.5;
  display: none;
  position: fixed;
  top: 76px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  padding: 18px clamp(18px, 5vw, 64px) 32px;
  background: var(--nav-menu-background);
  overflow-y: auto;
}

.unified-header__mobile--dark {
  --nav-border: rgba(137, 176, 186, 0.18);
  --nav-menu-background: #05090d;
  --nav-menu-text: #d8e5e7;
}

.unified-header__mobile a:not(.unified-header__mobile-cta) {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nav-border);
  color: var(--nav-menu-text);
  font-family: "Site Serif", "Newsreader", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.unified-header__mobile a[aria-current="page"] {
  color: #0369a1;
}

.unified-header__mobile .unified-header__mobile-cross {
  margin-top: 12px;
  border-top: 1px solid var(--nav-border);
}

.unified-header__mobile--dark a[aria-current="page"] {
  color: #38bdf8;
}

.unified-header__mobile-cta {
  width: 100%;
  margin-top: 22px;
}

.unified-header a:focus-visible,
.unified-header button:focus-visible,
.unified-header__mobile a:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

body.menu-open {
  overflow: hidden;
}

@media (max-width: 1120px) {
  .unified-header__desktop,
  .unified-header .unified-header__cta,
  .unified-header .unified-header__cross-link {
    display: none;
  }

  .unified-header__toggle {
    display: grid;
  }

  .unified-header__mobile:not([hidden]) {
    display: block;
  }
}

@media (max-width: 600px) {
  .unified-header__row {
    min-height: 68px;
  }

  .unified-header__mobile {
    top: 68px;
  }
}

@media (max-width: 560px) {
  .unified-header__actions {
    gap: 10px;
  }

  .unified-header .unified-header__sign-in {
    display: none;
  }

}

/* The shared site footer (src/_includes/site-footer.njk). Self-contained:
   every rule is namespaced so page stylesheets cannot restyle it. */
.site-foot {
  margin-top: auto;
  color: #98a9b2;
  background: #05090d;
  font-family: "Site Inter", "Inter", system-ui, sans-serif;
  line-height: 1.5;
}

.site-foot__shell {
  width: min(calc(100% - (clamp(18px, 5vw, 64px) * 2)), 1220px);
  margin-inline: auto;
}

.site-foot__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 50px;
  padding-block: 64px 54px;
}

.site-foot a {
  color: inherit;
  text-decoration: none;
}

.site-foot .site-foot__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #f1f8f8;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.site-foot__wordmark .brand-word span,
.site-foot__wordmark .brand-mark {
  color: #5aa9f0;
}

.site-foot__wordmark .brand-mark {
  flex: none;
  width: 1.2em;
  height: auto;
}

.site-foot__brand p {
  max-width: 360px;
  margin: 18px 0 0;
  color: #8195a0;
  font-size: 0.82rem;
  line-height: 1.65;
}

.site-foot .site-foot__col h2 {
  margin: 0 0 15px;
  color: #dce7e8;
  font-family: "Site Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-foot .site-foot__col a {
  display: block;
  margin-top: 9px;
  color: #9aabb4;
  font-size: 0.82rem;
}

.site-foot .site-foot__col a:hover,
.site-foot .site-foot__col a:focus-visible,
.site-foot .site-foot__policies a:hover,
.site-foot .site-foot__policies a:focus-visible {
  color: #38bdf8;
  text-decoration: none;
}

.site-foot__bottom {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #18252e;
  color: #7a8e98;
  font-family: "Site Mono", "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-foot__policies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.site-foot a:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .site-foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
    padding-block: 52px 42px;
  }

  .site-foot__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .site-foot__grid {
    gap: 28px 18px;
  }

  .site-foot__col {
    min-width: 0;
  }

  .site-foot .site-foot__col a {
    overflow-wrap: anywhere;
  }

  .site-foot__bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-block: 18px;
  }
}