html {
  font-size: 100%;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.15rem;
  line-height: 1.4;

  color: #101824;

  background: #e6e8ea;
}

/* ==========================================================================
   REMOVE ORIGINAL GRAV LOGO
   ========================================================================== */
/*
.navbar-section.logo {
  display: none;
}
*/

/* ==========================================================================
   HEADER / TOP SPACING
   ========================================================================== */

section#start {
  padding-top: 0 !important;
}

.header-fixed #body-wrapper {
  padding-top: 0.8rem;
}

#header,
.header-fixed #header {
  position: relative !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.article-title,
.article-content h2,
.article-content h3,
.navbar {
  font-family: 'Merriweather', serif;
  font-weight: 600;

  color: #000000;
}

/* ==========================================================================
   ARTICLE LAYOUT
   ========================================================================== */

.article-content {

  max-width: 68ch;

  margin: 0 auto;

  background: #f5f6fa;

  padding: 2rem 2.4rem;

  border-radius: 10px;

  border: 1px solid rgba(0,0,0,.05);

  box-sizing: border-box;
}

/* ==========================================================================
   ARTICLE TITLE
   ========================================================================== */

.article-title {

  font-family: 'Merriweather', serif;

  font-size: 33px;

  font-variation-settings:
    "wght" 575,
    "wdth" 94,
    "opsz" 33,
    "ital" 0;

  line-height: 42px;

  letter-spacing: -0.02em;

  color: #000000;

  margin-bottom: 0.6rem;
}

/* ==========================================================================
   ARTICLE TYPOGRAPHY
   ========================================================================== */

.article-content p {
  margin-top: 0;
  margin-bottom: 0.55rem;
}

.article-content h2 {

  font-family: 'Merriweather', serif;

  margin-top: 2rem;
  margin-bottom: 0.9rem;

  color: #000000;

  font-size: 26px;

  font-variation-settings:
    "wght" 575,
    "wdth" 100,
    "opsz" 26,
    "ital" 0;

  line-height: 32px;

  letter-spacing: 0;
}

.article-content h3 {

  font-family: 'Merriweather', serif;

  margin-top: 1.6rem;
  margin-bottom: 0.4rem;

  color: #000000;

  font-size: 22px;

  font-variation-settings:
    "wght" 600,
    "wdth" 94,
    "opsz" 22,
    "ital" 0;

  line-height: 28px;

  letter-spacing: -0.02rem;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.article-content ul {

  list-style: none;

  padding-left: 0;
  margin-left: 1rem;

  margin-top: -0.35rem;
  margin-bottom: 0.7rem;
}

.article-content li {

  margin-bottom: 0;
  line-height: 1.3;
}

/* Override theme spacing */

.article-content ul li {
  margin-top: 0 !important;
}

.article-content li::before {
  content: "–";
  margin-right: 0.35rem;
}

/* ==========================================================================
   STRONG / EMPHASIS
   ========================================================================== */

.article-content strong {
  font-weight: 600;
}

/* ==========================================================================
   TABLES
   ========================================================================== */

.article-content table {

  width: 100%;
  border-collapse: collapse;

  margin: 2rem 0;

  font-size: 0.96rem;

  border: 1px solid #ABABAB;

  table-layout: auto;
}


/* Cells */

.article-content th,
.article-content td {

  padding: 0.55rem 0.8rem;

  border: 1px solid #d8d8d8;

  text-align: left;

  line-height: 1.35;

  vertical-align: top;
}


/* Header */

.article-content th {

  background: #DBDBDB;

  font-weight: 600;

  color: #202020;
}


/* Zebra rows */

.article-content tbody tr:nth-child(even) td {

  background: #ececec;
}


/* Hover */

.article-content tbody tr:hover td {

  background: #e3e3e3;
}
/* ==========================================================================
   TABLE STRONG
   ========================================================================== */

.article-content table strong {

  font-weight: 600;
}


/* ==========================================================================
   NAVBAR LAYOUT
   ========================================================================== */

.navbar {
  position: relative;

  z-index: 20;
}


/* ==========================================================================
   CATEGORY LIST
   ========================================================================== */

.category-list {

  list-style: none;

  padding: 0;

  margin: 2rem 0;
}

.category-list li {

  margin-bottom: 0.9rem;
}

.category-list a {

  font-family: 'Source Sans 3', sans-serif;

  font-size: 1.15rem;
  font-weight: 600;

  color: #1f2933;

  text-decoration: none;
}

.category-list a:hover {

  text-decoration: underline;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {

  margin-top: 4rem;

  padding-top: 3rem;
  padding-bottom: 2rem;

  border-top: 1px solid #dddddd;
}

.footer-inner {

  max-width: 1100px;

  margin: 0 auto;

  padding-left: 2rem;
  padding-right: 2rem;
}

.footer-brand h3 {

  font-family: 'Merriweather', serif;

  font-size: 1.8rem;

  margin-bottom: 0.4rem;
}

.footer-brand p {

  max-width: 700px;

  line-height: 1.6;

  margin-bottom: 2rem;
}

.footer-nav {

  display: flex;

  gap: 1.4rem;

  flex-wrap: wrap;
}

.footer-nav a {

  text-decoration: none;

  color: #444444;

  font-weight: 600;
}

.footer-nav a:hover {

  color: #000000;
}

.footer-bottom {

  margin-top: 3rem;

  padding-left: 2rem;
  padding-right: 2rem;

  font-size: 0.95rem;

  color: #666666;
}
/* =========================================================
   LOGO (SINGLE SOURCE OF TRUTH)
========================================================= */

/* HEADER + DEFAULT */
.site-logo img,
.footer-logo img {

  width: 180px;

  height: auto;

  display: block;
}


/* =========================================================
   HEADER POSITION
========================================================= */

.site-logo {

  position: absolute;

  left: 3rem;

  top: 0.7rem;

  z-index: 10;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .site-logo {

    position: relative;

    left: auto;

    top: auto;

    display: flex;

    justify-content: center;

    margin: 0.8rem 0 0.4rem 0;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

  .site-logo img,
  .footer-logo img {

    width: 180px;
  }
}
/* =========================================================
   FOOTER LOGO - FORCE OVERRIDE
========================================================= */

.footer-logo {
  width: 180px;
  margin-bottom: -0.9rem;
  height: auto;
}


/* =========================================================
   IPAD LOGO FIX
========================================================= */

@media (max-width: 1024px) {

  .site-logo,
  .footer-logo {

    width: 200px !important;
    max-width: 200px !important;
  }

  .site-logo img,
  .footer-logo img {

    width: 100% !important;
    height: auto !important;
  }
}