body.home {
  > main {
    > .news {
      .items {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: stretch;
        overflow-y: auto;
      }
      .news-item-card {
        flex-basis: 20em;
        max-width: 90vw;
        border-radius: .5em;
        padding: 0 .75em;
        border: 1px solid #f0f0f0;
        margin-right: 1em;

        .title {
          font-weight: normal;
          a {
            text-decoration: none;
          }
        }

        div.excerpt p {
          font-size: 90%;
          line-height: 1.6;
        }
      }
    }

    > .browse-concepts {
      flex-shrink: 0;

      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;

      background: rgba(white, 0.8);

      input.search-string,
      a.browse-concepts {
        background-color: #f7f7f7;
        padding: .5em .75em;
        border-radius: .5em;
        border: 0;
        cursor: pointer;
      }

      .section-title {
        span {
          white-space: nowrap;
          margin-right: 1em;
        }
        a {
          white-space: nowrap;
          text-transform: none;
          font-size: 90%;
        }
      }

      a.browse-concepts {
        text-decoration: none;
        background: $linkColor;
        color: $linkColorInverse;
      }

      .search-controls {
        flex-shrink: 0;

        display: flex;
        flex-flow: row wrap;
        align-items: center;
        margin-bottom: 1em;

        input.search-string {
          margin-right: 1em;
          margin-left: -.5em;
        }

        .refine {
          display: flex;
          flex-flow: row wrap;
          align-items: center;

          > * {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
          }

          input[type=checkbox], label {
            cursor: pointer;
          }
        }
      }

      .search-results {
        flex: 1;
        align-self: stretch;
        overflow: auto;

        padding-bottom: 1em;

        table {
          width: 100%;
          font-size: 90%;

          tr.main {
            font-weight: bold;
            td {
              border-top: 2px solid #f0f0f0;
            }
            &:first-child td {
              border-top: 0;
            }
          }

          td, th {
            padding: .5em;
            &:nth-child(1) { // ID
              width: 3.5em;
            }
            &:nth-child(2) { // Language
              width: 3em;
            }
          }

          th {
            background: #f7f7f7;
            font-weight: bold;
            text-align: left;
          }

          td {
            a {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  &.browser-expandable {
    > main {
      > .browse-concepts {
        .section-title {
          display: flex;
          flex-flow: row wrap;
          align-items: center;

          button.toggle {
            background: transparent;
            border: 0;
            cursor: pointer;
          }
        }
      }
    }
  }

  &.browser-expanded {
    > header {
      margin-top: -1em;
      padding-bottom: 0;

      .site-title .description {
        transition: width .5s linear;
        width: 0;
        height: 0;
        overflow: hidden;
        display: inline-block;
      }
    }
    > main {
      flex-shrink: 1;
      min-height: 300px;
      // ^^ value out of thin air approximating minimally acceptable main height,
      // otherwise on very short viewports footer overlaps main due to its flex-shrink: 1,
      // which we want to restrict main height to viewport so that search results
      // can be scrolled within their own div.
      // Another (better?) solution could be to scope flex-shrink: 1
      // to tall enough viewports with a media query.

      > section.browse-concepts {
        flex-shrink: 1;
        min-height: 256px;
        padding-bottom: 0;
      }
      > section.news {
        display: none;
      }
    }
  }
}