/* Archive additions to the deeltwee.be theme: the banner on every archived
   page and the landing page. Colours and type come from the original theme. */

/* --- Banner -------------------------------------------------------------- */

#archive-banner {
  box-sizing: border-box;
  height: 30px;
  background: #FE4902;
  color: #fff;
  font: 12px/18px "Century Gothic", Century, Helvetica, sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 6px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The logo and slogan images have the page gradient baked in; move the
   gradient down by the banner height so they line up again. */
body {
  background-position: 0 30px;
}

/* --- Landing page -------------------------------------------------------- */

.landing,
.landing * {
  box-sizing: border-box;
}

.landing {
  margin: 0;
  min-height: 100vh;
  /* The theme's background.png: a light blue fade into white. */
  background: #fff linear-gradient(#a4cdda, #fff 151px) no-repeat;
  color: #17120A;
  font-family: "Century Gothic", Century, Helvetica, sans-serif;
  font-size: 200%;
  line-height: 1.35;
}

.landing-wrapper {
  max-width: 840px;
  margin: 0 auto;
  padding: 65px 0 2em;
}

.landing-logo {
  margin: 0;
  line-height: 0;
}

.landing-logo img {
  max-width: 100%;
  height: auto;
}

/* The theme's menu bar, as a dark band under the logo. */
.landing-slogan {
  margin: 20px 0 1.2em;
  padding: 4px 12px;
  background: #17120A;
  border-radius: 0 0 5px 5px;
  color: #fff;
  font-size: 45%;
  font-style: italic;
  text-transform: lowercase;
}

.landing p {
  max-width: 24em;
  margin: 0 0 0.6em 0;
}

.landing strong {
  color: #FE4902;
  font-weight: normal;
}

.landing a {
  color: #FE4902;
  text-decoration: none;
  border-bottom: 1px solid #DCDBDA;
}

.landing a:hover,
.landing a:focus {
  border-bottom-color: #17120A;
}

.landing .landing-credits {
  margin-top: 2em;
  color: #736756;
  font-family: "Lucida Grande", Helvetica, sans-serif;
  font-size: 40%;
}

/* Keep the 65px top padding: the logo has the gradient baked in. */
@media (max-width: 880px) {
  .landing-wrapper {
    padding: 65px 16px 2em;
  }
}

@media (max-width: 600px) {
  .landing {
    font-size: 130%;
  }

  .landing .landing-credits {
    font-size: 60%;
  }
}