@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("./fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #080320;
  --purple: #2F0147;
  --beige: #fbf6f2;
  --red: #d60500;
  --yellow: #febf40;
  --measure: 700px;
  --padding-page: 1.5rem;
  --font-stack: "Barlow Condensed", sans-serif;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--navy);
  background: white;
  font-family: var(--font-stack);
  font-size: 20px;
  line-height: 1.5;
}

::selection {
  background: var(--yellow);
  color: var(--navy);
}

a {
  color: var(--purple);
}

a:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.site-header {
  background: var(--purple);
  color: white;
  padding-block: calc(var(--padding-page) * 1.5);
  padding-inline: var(--padding-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header-logo {
  display: block;
  width: 100%;
  max-width: 450px;
  height: auto;
}

.brand {
  font-size: clamp(1.8rem, 7vw, 3.3rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: .035em;
}

.brand-subtitle {
  margin-top: 0.6em;
  font-size: clamp(0.8rem, 7vw, 2rem);
  font-weight: 850;
  letter-spacing: .18em;
  color: var(--yellow);
}

.toc {
  background: #f4f1f7;
  border-left: 4px solid var(--purple);
  border-radius: 0 .4rem .4rem 0;
  padding: .8rem 1.1rem;
  margin-bottom: 2rem;
  font-size: .82em;
  line-height: 1.4;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc ul ul {
  padding-left: .9rem;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

main {
  margin-inline: auto;
  max-width: var(--measure);
  padding-block: 1.2em;
  padding-inline: var(--padding-page);
  width: 100%;
  overflow-wrap: break-word;
}

h1 {
  color: var(--purple);
  font-size: 1.7em;
  line-height: 1.2;
  margin-top: 1.5em;
}

h2 {
  color: var(--purple);
  line-height: 1.2;
  margin-top: 1.25em;
}

h3 {
  color: var(--purple);
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: .5em;
}

h2+h3 {
  margin-top: 0.5em;
}

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

pre {
  overflow-x: auto;
  max-width: 100%;
}


table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5em;
  font-size: .9em;
}

th,
td {
  border-bottom: 1px solid #d9d6df;
  padding: .65em .55em;
  vertical-align: top;
}

th {
  background: #f4f1f7;
  color: var(--purple);
  font-weight: 700;
}

th:first-child,
td:first-child {
  text-align: left;
}

@media (max-width: 440px) {
  table {
    font-size: .75em;
  }

  th,
  td {
    padding: .55em .35em;
  }
}

.site-footer {
  background: var(--purple);
  color: white;
  font-size: .9em;
  padding-block: calc(var(--padding-page) * 1.5);
  padding-inline: var(--padding-page);
  text-align: center;
}

.site-footer p {
  margin: 0;
}

@media print {
  body {
    font-size: 14px;
  }

  .site-header,
  .site-footer {
    background: none;
    color: var(--navy);
  }

  .brand-subtitle {
    color: var(--navy);
  }

  main {
    max-width: none;
  }
}

.callout {
  --callout-accent: var(--purple);
  --callout-bg: #f4f1f7;

  margin-block: 1.5em;
  padding: .85em 1.1em;

  border-left: 5px solid var(--callout-accent);
  border-radius: 0 .35rem .35rem 0;

  background: var(--callout-bg);
  font-size: .92em;
}

.callout-warning {
  --callout-accent: #8a5900;
  --callout-bg: #fff5dc;
}

.callout-tip {
  --callout-accent: #266047;
  --callout-bg: #edf7f0;
}

.callout> :first-child {
  margin-top: 0;
}

.callout> :last-child {
  margin-bottom: 0;
}

.boxed {
  display: inline;
  padding: .08em .22em;
  border: 1px solid var(--purple);
  border-radius: .25em;
  background: #f4f1f7;
  color: var(--purple);
  font-size: .88em;
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}