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

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

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

    nav { margin-top: 4em; }
  }

  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;
    }
  }

  nav { font-size: 1.25rem; }

  .direction {
    display: flex;
    align-items: center;

    &.back {
      margin: 0 0 6em -1.5em;
      & > span { margin-right: .5em; }
    }

    &.forward {
      & > span { margin-left: .5em; }
    }

    a {
      border-bottom: none;

      span { border-bottom: .09375em solid #000; }

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

  h1 { font-size: 3.5rem; }
  h2, h3 { font-size: 1.75rem; }

  .interior > header {
    h1 { font-size: 1.25em; }
    h2 { font-size: 3.5rem }
  }

  /* The capital "R" looks out of alignment. */
  #register > header {
    h2 { margin-left: -.0625em; }
  }

  .notice, .alert { margin-bottom: 4em; }
  .alert { color: #cf292f; }

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

  .forget {
    font-size: 1rem;
    margin-top: 1.625em;
  }

  section {
    margin-bottom: 3em;

    header { margin-bottom: 1em; }
  }

  .wrapper > footer { margin-top: 10em; }

  .field {
    margin-bottom: 1.25em;

    h3 { margin-bottom: .75em; }
    h3 + .detail {
      margin: -.5em 0 1.5em;
    }

    p { font-size: 1.25em; }

    .detail { margin-bottom: 1em; }

    .responses {
      display: flex;
      margin-left: .125em;
    }

    .instruction { margin-top: .875em; }

    .error {
      color: #cf292f;
      margin-top: .875em;
    }
  }

  .questions {
    .field { margin-bottom: 3.75em; }
  }

  .hidden { display: none; }

  label {
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 .5em .25em;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    border: .125em solid #aaa;
    border-radius: .25em;
    padding: .5em;
    font-size: 1.25rem;

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

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

  .radio_button {
    font-size: 1.25em;
    font-weight: normal;
    margin: 0 1.75em 0 0;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 1em;

    &:hover { cursor: pointer; }
  }

  input[type="radio"] {
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: .125em solid currentColor;
    border-radius: 50%;
    display: grid;
    place-content: center;

    &::before {
      content: "";
      width: .75em;
      height: .75em;
      border-radius: 50%;
      transform: scale(0);
      transition: 30ms transform ease-in-out;
      box-shadow: inset 1em 1em #cf292f;
      background-color: CanvasText;
    }

    &:checked::before {
      transform: scale(1);
    }
  }

  .checkbox {
    font-size: 1.25em;
    font-weight: normal;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 1em;

    &:hover { cursor: pointer; }
  }

  input[type="checkbox"] {
    font: inherit;
    color: currentColor;
    width: 1.25em;
    height: 1.25em;
    border: .125em solid currentColor;
    border-radius: .25em;
    display: grid;
    place-content: center;

    &::before {
      content: "";
      width: .75em;
      height: .75em;
      transform: scale(0);
      transition: 30ms transform ease-in-out;
      box-shadow: inset 1em 1em #cf292f;
      background-color: CanvasText;
    }

    &:checked::before {
      transform: scale(1);
    }
  }

  .select {
    border-radius: .25em;
    border: .125em solid #aaa;
    padding: 0 .5em 0 0;
    font-size: 1.25rem;
    display: grid;
    grid-template-areas: "select";
    align-items: center;

    &::after {
      content: "";
      width: .75em;
      height: .55em;
      background-color: #aaa;
      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    }

    &:after {
      grid-area: select;
      justify-self: end;
    }

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

      &::after { background-color: #000; }
    }
  }

  select {
    grid-area: select;
    padding: .5em;

    &:hover { cursor: pointer; }
  }

  .action {
    background-color: #000;
    border-radius: .25em;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    margin-top: 1em;
    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;
    }
  }

  .pronouns {
    .select + div { margin-top: 1.25em; }
  }

  .address {
    input { display: block; }
    input + input { margin-top: 1em; }

    div { margin-bottom: 1.25em; }
  }

  .representation {
    div { margin-bottom: 1.25em; }
    .responses + div { margin-top: 2.5em; }
  }

  #apply, #signature {
    border-left: .25em solid #000;
    margin-left: -2em;
    padding: 1em 1.75em .5em;
  }

  #faq {
    li { margin-bottom: 3em; }
    h2 { margin-bottom: .5em; }
  }

  #submission {
    ol {
      margin-left: -2em;

      li {
        border-left: .25em solid #000;
        padding: 1em 0em 1em 1.75em;
        margin-bottom: 2em;

        h3 {
          line-height: 1.5;
          margin-bottom: .5em;
        }

        h3 > span,
        nav > span { color: #000; }

        p { margin-bottom: .5em; }

        .direction a span { line-height: 1.5; }
        .action { margin-bottom: .5em; }

        h3 + p,
        h3 + nav { margin-top: -.25em; }

        &.unavailable, &.complete {
          color: #ccc;
        }

        &.unavailable {
          border-color: #ccc;

          h3 { margin-bottom: 0; }
        }

        &.complete {
          border-left: none;
          padding-left: 2rem;

          h3 { text-decoration: line-through; }

          & + .complete {
            margin-top: -2em;
          }
        }
      }
    }

    ul {
      font-size: 1.25em;

      li { margin-bottom: 1.26em; }
    }
  }

  #declaration {
    margin-bottom: 0;

    pre {
      font-family: TimesNewRoman, "Times New Roman", Times, serif;
      font-size: 1.25rem;
      line-height: 1.25;
      white-space: pre-line;
    }
  }

  #agreement {
    font-family: TimesNewRoman, "Times New Roman", Times, serif;

    header { margin-bottom: 2em; }

    h1 {
      font-size: 2.25rem;
      margin-bottom: .5em;
    }

    h2 { margin-bottom: .5em; }
    p { line-height: 1.25; }
    strong { font-weight: 700; }
  }

  #signature {
    .full_name {
      font-family: TimesNewRoman, "Times New Roman", Times, serif;
      font-size: 1.75em;
    }

    .field { margin-bottom: 3.125em; }
    .action { margin-bottom: 1em; }
  }
}