/* ============================================================
 * Layout — Page structure (wrapper, main, sidebar, banner, footer)
 * ============================================================ */

#wrapper {
  display: flex;
  flex-direction: row-reverse;
  min-height: 100vh;
}

/* Main */
#main {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
}
#main > .inner {
  padding: 0 6em 0.1em 6em;
  margin: 0 auto;
  max-width: 110em;
}
#main > .inner > section {
  padding: var(--space-section) 0 var(--space-section-bottom) 0;
  border-top: solid 2px var(--color-border);
}
#main > .inner > section:first-of-type {
  border-top: 0 !important;
}
@media screen and (max-width: 1680px) {
  #main > .inner {
    padding: 0 5em 0.1em 5em;
  }
  #main > .inner > section {
    padding: 5em 0 3em 0;
  }
}
@media screen and (max-width: 1280px) {
  #main > .inner {
    padding: 0 4em 0.1em 4em;
  }
  #main > .inner > section {
    padding: 4em 0 2em 0;
  }
}
@media screen and (max-width: 736px) {
  #main > .inner {
    padding: 0 2em 0.1em 2em;
  }
  #main > .inner > section {
    padding: 3em 0 1em 0;
  }
}
@media screen and (max-width: 480px) {
  #main > .inner {
    padding: 0 1.25em 0.1em 1.25em;
  }
}

/* Sidebar */
#search form {
  text-decoration: none;
  position: relative;
}
#search form:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
#search form:before {
  transform: scaleX(-1);
  color: var(--color-text);
  content: '\f002';
  cursor: default;
  display: block;
  font-size: 1.5em;
  height: 2em;
  line-height: 2em;
  opacity: 0.325;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 2em;
}
#search form input[type='text'] {
  padding-right: 2.75em;
}

#sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  transition:
    margin-left 0.5s ease,
    box-shadow 0.5s ease;
  background-color: var(--color-bg-sidebar);
  font-size: 0.9em;
  position: relative;
  width: 26em;
}
#sidebar h2 {
  font-size: 1.38889em;
}
#sidebar > .inner {
  padding: 2.22222em 2.22222em 2.44444em 2.22222em;
  position: relative;
  width: 26em;
}
#sidebar > .inner > * {
  border-bottom: solid 2px var(--color-border);
  margin: 0 0 3.5em 0;
  padding: 0 0 3.5em 0;
}
#sidebar > .inner > * > :last-child {
  margin-bottom: 0;
}
#sidebar > .inner > *:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
#sidebar > .inner > .alt {
  background-color: var(--color-bg-sidebar-alt);
  border-bottom: 0;
  margin: -2.22222em 0 4.44444em -2.22222em;
  padding: 2.22222em;
  width: calc(100% + 4.44444em);
}
#sidebar .toggle {
  text-decoration: none;
  transition: left 0.5s ease;
  border: 0;
  display: block;
  height: 7.5em;
  left: 26em;
  line-height: 7.5em;
  outline: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-indent: -15em;
  white-space: nowrap;
  top: 0;
  width: 6em;
  z-index: 10000;
}
#sidebar .toggle:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
#sidebar .toggle:before {
  content: '\f0c9';
  font-size: 2rem;
  height: inherit;
  left: 0;
  line-height: inherit;
  position: absolute;
  text-indent: 0;
  top: 0;
  width: inherit;
}
#sidebar.inactive {
  margin-left: -26em;
}
@media screen and (max-width: 1680px) {
  #sidebar {
    width: 24em;
  }
  #sidebar > .inner {
    padding: 1.66667em 1.66667em 1.33333em 1.66667em;
    width: 24em;
  }
  #sidebar > .inner > .alt {
    margin: -1.66667em 0 3.33333em -1.66667em;
    padding: 1.66667em;
    width: calc(100% + 3.33333em);
  }
  #sidebar .toggle {
    height: 6.25em;
    left: 24em;
    line-height: 6.25em;
    text-indent: 5em;
    width: 5em;
  }
  #sidebar .toggle:before {
    font-size: 1.5rem;
  }
  #sidebar.inactive {
    margin-left: -24em;
  }
}
@media screen and (max-width: 1280px) {
  #sidebar {
    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 10000;
  }
  #sidebar.inactive {
    box-shadow: none;
  }
  #sidebar > .inner {
    -webkit-overflow-scrolling: touch;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
  }
  #sidebar > .inner:after {
    content: '';
    display: block;
    height: 4em;
    width: 100%;
  }
  #sidebar .toggle {
    text-indent: 6em;
    width: 6em;
  }
  #sidebar .toggle:before {
    font-size: 1.5rem;
    margin-left: -0.4375em;
  }
  body.is-preload #sidebar {
    display: none;
  }
}
@media screen and (max-width: 736px) {
  #sidebar .toggle {
    text-indent: 7.25em;
    width: 7.25em;
  }
  #sidebar .toggle:before {
    color: var(--color-text);
    margin-left: -0.0625em;
    margin-top: -0.25em;
    font-size: 1.1rem;
    z-index: 1;
  }
  #sidebar .toggle:after {
    background: var(--color-toggle-bg);
    border-radius: var(--radius);
    content: '';
    height: 3.5em;
    left: 1em;
    position: absolute;
    top: 1em;
    width: 5em;
  }
}

#banner {
  display: flex;
}
#banner h1 {
  margin-top: -0.125em;
}
#banner .content {
  flex-grow: 1;
  flex-shrink: 1;
  width: 50%;
}
#banner .image {
  flex-grow: 0;
  flex-shrink: 0;
  display: block;
  margin: 0 0 var(--space-element) 4em;
  width: 50%;
}
#banner .image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}
@media screen and (orientation: portrait) {
  #banner {
    flex-direction: column-reverse;
  }
  #banner h1 br {
    display: none;
  }
  #banner .content {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
  }
  #banner .image {
    flex-grow: 0;
    flex-shrink: 0;
    margin: 0 0 4em 0;
    height: 25em;
    max-height: 50vh;
    min-height: 18em;
    width: 100%;
  }
}
@media screen and (orientation: portrait) and (max-width: 480px) {
  #banner .image {
    max-height: 35vh;
  }
}
@media screen and (max-width: 736px) {
  #banner {
    flex-direction: column-reverse;
  }
  #banner .content {
    width: 100%;
  }
  #banner .image {
    width: 100%;
    margin: 0 0 2em 0;
    height: auto;
    max-height: 40vh;
    min-height: 15em;
  }
}

/* Footer */
#footer .copyright {
  color: var(--color-meta);
  font-size: 0.9em;
}
#footer .copyright a {
  color: inherit;
}