@layer base {
  body { font-family: trade-gothic-next, sans-serif; }

  #preview { display: none; }

  .wrapper { margin: 0 1em 6em 3.25em; }

  .wrapper > header {
    margin: 16em 0 8em;

    h1 { margin-bottom: .25em }
    p { font-size: 1.25rem; }
  }

  main {
    max-width: 43.75em;

    & > div {
      max-width: 40em;
      margin-bottom: 4.5em;
    }

    p {
      font-size: 1.25rem;
      line-height: 1.5;
      margin-bottom: 1.25em;
    }
  }

  section { max-width: 40em; }

  a {
    background-color: initial;
    border-bottom: .09375em solid #000;
    padding-bottom: .09375em;
    color: #000;

    &:hover {
      border-color: #cf292f;
      color: #cf292f;
    }

    &:active {
      background-color: #cf292f;
      color: #fff;
    }
  }

  h1 {
    font-size: 3.5rem;
    margin-left: -.0625em;
  }

  h2 { font-size: 1.75rem; }

  section {
    margin-bottom: 4.5em;

    header { margin-bottom: 1em; }
  }

  form { margin: 3em 0 1.5em; }

  .field {
    margin-bottom: 1.25em;
    max-width: 20em;
  }

  input[type="email"] {
    width: 100%;
    border: .125em solid #aaa;
    border-radius: .25em;
    padding: .5em;
    font-size: 1.25rem;

    &:focus,
    &:hover { border-color: #000; }

    &::placeholder { color: #ccc; }
  }

  .action {
    background-color: #000;
    border-radius: .25em;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    padding: .75em;
    min-width: 10.5em;
    text-transform: uppercase;

    &:hover {
      cursor: pointer;
      color: #fff;
    }

    &:active {
      background-color: #cf292f;
      color: #fff;
    }

    &:disabled,
    &:disabled:active {
      background-color: #eee;
      color: #ccc;
      cursor: default;
    }
  }

  #register {
    border-left: .25em solid #000;
    margin-left: -2em;
    padding: 1em 1.75em .5em;

    .formkit-alert {
      font-size: 1.25rem;
      font-weight: bold;
    }
  }
}