/* noAarchitecten - info pages on a warm light grey
   ---------------------------------------------------------------------------
   All five info pages carry body.info (vision, people, archive, contact,
   credits), so one rule covers them and nothing else. Work pages, project
   pages and the homepage stay white.

   A grey warmed towards the yellow the site already uses, rather than a
   neutral one, so the two read as the same family.

   An override on top of app.css, loaded after it. Nothing here is compiled, so
   it can go up over FTP; the proper home for this is app.less, whenever the
   site is next built.

   To switch it off, remove the <link> that loads this file.
   --------------------------------------------------------------------------- */

:root{
  --noaa-info-paper: #f2f0ea;
}

/* On the body rather than html, so it fills the canvas beyond the content too
   - no white band under a short page, none on overscroll. */
body.info{
  background-color:var(--noaa-info-paper);
}

/* the search field on these pages is drawn on white; give it the same ground */
body.info input[type="search"]{
  background-color:transparent;
}

/* ---- the same top arrangement as the work index --------------------------
   At 1024px and up app.css pins the wordmark and the info menu into a column
   down the left. These keep them across the top at every width, and the menu
   horizontal with it - the way it already reads on a narrow window.
   Line length is unaffected: .richtext still caps at 72 characters. */

@media screen and (min-width: 1024px){

  body.info #main-header{
    position:static;
    width:auto;
    height:auto;
    padding:var(--offsetblockmargin);
    padding-bottom:0;
  }

  body.info #main-header .nav-bar{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    width:100%;
  }

  body.info main{
    margin-left:0;
    padding:var(--offsetblockmargin);
    padding-top:var(--blockmargin);
  }

  body.info main > .sidebar{
    position:static;
    width:auto;
    padding:0;
  }

  /* vision / people / archive / contact / notices, in a row */
  body.info nav.info{
    margin-bottom:var(--blockmargin);
  }
  body.info nav.info ul{
    display:flex;
  }
  body.info nav.info ul li + li{
    margin-left:1ch;
  }
}