/* ==========================================================================
   grid.css - replaces bootstrap.min.css (227 KB -> ~3 KB)

   Bootstrap defines 2006 classes. This site uses seventeen, and most of those
   (.btn, .card, .nav, .badge, .modal, .pagination, .lead) are the site's own
   classes that merely share a name - style.css styles them itself. Only the
   grid was genuinely Bootstrap's work, and it is reproduced verbatim below at
   the same breakpoints, so the layout is identical.

   The Reboot section is included too. Dropping Bootstrap also drops its
   normalisation, and without it the browser's own defaults return for anything
   style.css does not set - heading margins, list indents, form font
   inheritance. Those are what would have shifted the page, not the grid.
   ========================================================================== */

/* ---------- Reboot (the parts anything on this site relies on) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
ul, ol {
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
ul ul, ol ul, ul ol, ol ol {
  margin-bottom: 0;
}
dl, dd {
  margin-bottom: 0.5rem;
}
dt {
  font-weight: 700;
}
dd {
  margin-left: 0;
}
b, strong {
  font-weight: bolder;
}
small {
  font-size: 0.875em;
}
sub, sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
img, svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input, button, select, optgroup, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button, select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
summary {
  display: list-item;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}

/* ---------- Containers ---------- */
.container,
.container-xxl {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
.container-xxl {
  max-width: 1320px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---------- Grid ---------- */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.col {
  flex: 1 0 0%;
}
@media (min-width: 992px) {
  .col-lg   { flex: 1 0 0%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
}

/* ---------- Gutters ---------- */
.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}
@media (min-width: 1200px) {
  .g-xl-5 {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 3rem;
  }
}

/* ---------- The two utilities in use ---------- */
.align-items-center {
  align-items: center !important;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}