@charset "UTF-8";
/* Variables */
:root {
  --color-primary: #462921;
  /* "ground" */
  --color-white: #fdf6ec;
  /* "soft white" */
  --color-white-darker: #f4ecdf;
  /* "slightly darker white" */
  --color-grey: #eee;
  /* "light grey" */
  --color-black: #1a1a1a;
  /* "off black" */
  --color-orange: #d44f2c;
  /* "terracotta" */
  --color-orange-darker: #c33e1b;
  /* "terracotta darker" */
  --color-green: #bfd4cb;
  /* "quiet green" */
  /* Setting 62.5%, makes it easier to
  set rem units (which are relative to the
  root font-size). This lets us convert 14px = 1.4rem.
  See also: https://snook.ca/archives/html_and_css/font-size-with-rem
  */
  --font-size-base: 62.5%;
  --font-size-regular: 1.8rem;
  --font-size-xlarge: 2.6rem;
  --font-size-large: 2.2rem;
  --font-size-medium: 1.8rem;
  --font-size-small: 1.5rem;
  --font-weight-regular: 400;
  --font-weight-heavy: 700;
  --hover-transition: all 0.1s ease-in-out; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

html {
  height: 100%;
  font-size: var(--font-size-base);
  scroll-behavior: smooth; }

:target:before {
  content: '';
  display: block;
  height: 50px;
  margin: -50px 0 0; }

license-module {
  margin-top: -50px;
  padding-top: 50px; }

body {
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-regular);
  font-family: 'source-sans-pro', sans-serif;
  font-synthesis: none;
  min-height: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }

h1 {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-heavy);
  line-height: 3rem;
  margin: 1rem 0;
  text-align: left;
  display: block; }

h2 {
  color: var(--color-orange);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-heavy); }

* + h2 {
  margin-top: 2rem; }

h3 {
  color: var(--color-black);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-heavy);
  margin-bottom: 1rem; }

h4 {
  color: var(--color-black);
  font-size: var(--font-size-regular);
  font-weight: var(--font-weight-heavy);
  margin-bottom: 1rem; }

p {
  margin: 1.5rem 0; }

a {
  color: var(--color-orange-darker);
  font-weight: var(--font-weight-regular);
  text-decoration: underline; }

strong {
  font-weight: var(--font-weight-heavy); }

ul,
ol {
  list-style-position: inside;
  margin: 1.5rem 0 1.5rem 1.5rem; }

li {
  margin-bottom: 0.375rem; }

.site-header {
  background-color: var(--color-orange-darker);
  color: var(--color-white);
  padding: 1rem 0; }
  .site-header__content {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: baseline; }
  .site-header a {
    color: var(--color-white);
    font-weight: var(--font-weight-heavy);
    text-decoration: none; }
  .site-header h1 {
    flex: 1 0 auto;
    margin-right: 2.4rem; }
  .site-header nav {
    flex: 1 1 auto; }
  .site-header nav a:focus,
  .site-header nav a:hover {
    text-decoration: underline; }
  .site-header nav ul {
    display: flex;
    list-style-type: none;
    margin: auto;
    gap: 0.8rem; }
  .site-header nav li {
    margin: 0rem 0.5rem;
    font-size: var(--font-size-regular); }
  .site-header nav ol {
    list-style-type: none;
    text-align: left;
    margin: 0rem; }
  .site-header nav ol li {
    margin: 0rem 0.1rem;
    padding: 0rem;
    font-size: var(--font-size-small);
    color: var(--font-color-orange);
    float: left; }
  .site-header nav ol li a {
    text-decoration: none; }
  .site-header nav li:first-child {
    margin-left: 0rem;
    display: inline; }

.site-wrapper {
  margin: 0 auto;
  max-width: 60rem; }
  .site-wrapper > * {
    margin: 1.5rem; }

.site-wrapper--wide {
  max-width: 100rem; }
  .site-wrapper--wide > * {
    margin: 1.5rem; }

.breadcrumbs {
  font-size: var(--font-size-small);
  min-height: 1.8rem; }
  .breadcrumbs ol,
  .breadcrumbs ul {
    list-style: none;
    margin: 0; }
  .breadcrumbs li {
    display: inline-block; }

.no-bullet ul {
  list-style-type: none;
  margin: 1rem; }

.no-bullet-wrapper ul {
  margin-left: 0; }

.no-bullet-wrapper ul li {
  list-style: none; }

.no-bullet-wrapper ul li li {
  margin-left: 1.5rem; }

.c-button {
  border: 2px solid var(--color-orange);
  background-color: transparent;
  padding: 0.6rem;
  font-weight: 700;
  color: var(--color-orange);
  border-radius: 10px;
  transition: var(--hover-transition); }
  .c-button:hover {
    background-color: var(--color-orange);
    color: var(--color-white); }
  .c-button:active {
    border-color: var(--color-white); }
  .c-button:disabled {
    background-color: transparent;
    color: #606060;
    border-color: #606060;
    box-shadow: initial; }
  .c-button svg {
    vertical-align: middle; }

/*
This component is only responsible for styling itself,
and makes no assumptions about it's width. Layout and such is
handled by the .license-page component.
*/
.license-builder {
  margin: 1rem 0rem; }
  .license-builder__title {
    margin-bottom: 2rem; }
  .license-builder h3 {
    margin: 2rem 0; }
  .license-builder .h3-light {
    font-weight: normal; }
  .license-builder__module-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1rem; }

.license-icon {
  display: inline-block;
  height: var(--font-size-regular);
  width: var(--font-size-regular);
  margin-right: 0.125rem;
  padding: 0.25rem 0.25rem 0.25rem 0.375rem;
  vertical-align: text-top; }
  .license-icon a {
    text-decoration: none !important; }
  .license-icon--large {
    height: var(--font-size-medium);
    width: var(--font-size-medium); }
  .license-icon--black {
    fill: var(--color-black); }
  .license-icon--orange {
    fill: var(--color-orange); }

@media (min-width: 850px) {
  .license-builder {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 25px);
    overflow-y: scroll; } }

.license-page {
  margin: 0 1.5rem; }
  .license-page__menu {
    position: relative;
    z-index: 10; }
  .license-page__menu {
    display: none; }
  .license-page__menu-on-mobile {
    position: sticky;
    z-index: 9;
    top: 0;
    display: block;
    margin: 0 -1.5rem; }

@media (min-width: 850px) {
  .license-page {
    display: flex;
    flex-flow: row wrap;
    gap: 5rem; }
    .license-page__header {
      flex: 100% 1 1; }
      .license-page__header > * {
        max-width: 500px; }
    .license-page__menu {
      display: block;
      flex: auto 1 1;
      width: 250px;
      order: 1; }
    .license-page__menu > * {
      border: 3px solid var(--color-orange);
      background-color: var(--color-white);
      padding: 1rem; }
    .license-page__menu-on-mobile {
      display: none; }
    .license-page__license {
      flex: 40% 1 1;
      margin-right: 1rem; }
  .license-builder__modules {
    overflow-y: scroll;
    max-height: 48vh;
    position: relative;
    width: calc(100% + 2rem);
    /* parent's padding-block = 1px */
    left: -1rem;
    padding-block: 1rem;
    padding-inline: 1rem;
    background-color: var(--color-white-darker); } }

.footer {
  font-size: var(--font-size-small);
  border-top: 1px solid var(--color-orange);
  padding-top: 0;
  padding-bottom: 6rem; }

.data-list {
  list-style: none;
  -moz-column-count: 1;
  -ms-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  -moz-column-fill: balance;
  -ms-column-fill: balance;
  -webkit-column-fill: balance;
  column-fill: balance;
  margin-left: 0; }

.data-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.formats {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-heavy);
  letter-spacing: 0.125rem;
  line-height: 0.625rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap; }

.formats > * {
  display: inline-block; }

blockquote {
  border-left: 0.25rem solid var(--color-green);
  padding-left: 1.25rem; }

pre {
  padding-left: 1.5rem;
  overflow-x: scroll;
  white-space: nowrap; }

code,
kbd {
  letter-spacing: 0.0625rem; }

cite {
  font-style: italic; }

cite::before {
  content: '— '; }

abbr {
  text-decoration: none; }

@media (min-width: 640px) {
  .site-header nav {
    text-align: right; }
  .site-header nav ul {
    justify-content: end; }
  .data-list {
    -moz-column-count: 2;
    -ms-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2; } }

a[target='_blank']::after {
  content: "";
  width: .8em;
  height: .8em;
  margin: 0 0.05em 0 0.1em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: baseline; }