/* LCARS GTJ 3 */
@font-face {
  font-family: 'LCARSGTJ3';
  font-style: normal;
  font-weight: 400;
  src: local('LCARSGTJ3'), local('LCARSGTJ3'),
       url('font/LCARSGTJ3.woff') format('woff'),
       url('font/LCARSGTJ3.ttf') format('truetype');
}

/******************************
 * tiny layout
 ******************************/

html {
  height: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  min-height: 100%;
  background-color: #000;
  font-size: 16px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "header" "nav" "nav-main-sep" "main" "footer";
  padding: .5em;

  --side-bar-width: 5em;
  --LCARS-spacing: 0.028em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'LCARSGTJ3';
  font-size: 1em;
  font-weight: normal;
  letter-spacing: var(--LCARS-spacing);
}

code {
  padding: 1px;
  background-color: #333;
}

#header {
  grid-area: header;
  font-size: 2.5em;
  width: 100%;
  display: grid;
  grid-template-rows: 1em auto;
  grid-template-columns: .8em 1fr .8em;
  grid-template-areas:
    "hleft hspace hright"
    ". hlogo .";
  grid-gap: .2em;
}

#nav__container {
  grid-area: nav;
  padding: .5em 2.55em 0;
}

#main__container {
  grid-area: main;
  padding: .5em 2.55em 0;
  color: #99c;
  max-width: 65em;
}

#footer {
  grid-area: footer;
  font-size: 2.5em;
  width: 100%;
  padding-top: .25em;
  display: grid;
  grid-template-rows: 1em;
  grid-template-columns: .8em 1fr .8em;
  grid-gap: .2em;
  grid-template-areas: "fleft fspace fright"
}

/* bars */

.bar--left {
  display: block;
  background-color: #99f;
  border-radius: 1em 0 0 1em;
}

.bar--space {
  display: block;
  background-color: #c9c;
}

.bar--sep {
  display: none;
  position: relative;
  background-color: #c9c;
}

.bar--right {
  display: block;
  background-color: #99f;
  border-radius: 0 1em 1em 0;
}

/* header */

.header__header {
  height: 100%;
  text-align: center;
  line-height: 1;
}

.header--left {
  grid-area: hleft;
}

.header__logo {
  grid-area: hlogo;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.08em;
}

.header--space {
  grid-area: hspace;
}

.header--sep {
  grid-area: hsep;
  border-top-left-radius: 2em;
}

.header--right {
  grid-area: hright;
}

.header__name--short {
  text-transform: uppercase;
}

.header__name--long {
  display: none;
  text-transform: uppercase;
}

.header__link {
  text-decoration: none;
  color: #f90;
  font-family: 'LCARSGTJ3', 'sans-serif';
  font-size: 1.36em;
}

/* navigation */

.nav__list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: .5em;
  list-style-type: none;
  font-family: 'LCARSGTJ3', monospace;
}

.nav__link {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
  min-height: 48px;
  height: 2.3em;
  font-size: 1.25em;
  letter-spacing: var(--LCARS-spacing);
  background-color: #f96;
  border-radius: 2.3em;
  color: #000;
  text-decoration: none;
  padding: .2em 1.2em;
}

.nav__link:focus,
.nav__link:hover {
  background-color: #c9c;
  text-decoration: underline;
}

/* main-nav separator */

.bar__main-nav-separator {
  grid-area: nav-main-sep;
  display: grid;
  grid-template-columns: .7em 1fr .7em;
  grid-template-rows: 1em;
  grid-gap: .5em;
  grid-template-areas: "mleft mspace mright";
  padding: .5em 0 0;
}

.bar__main-nav--left {
  grid-area: mleft;
}

.bar__main-nav--space {
  grid-area: mspace;
}

.bar__main-nav--right {
  grid-area: mright;
}

/* footer */

.footer--left {
  grid-area: fleft;
}

.footer--space {
  grid-area: fspace;
}

.footer--sep {
  grid-area: fsep;
  border-bottom-left-radius: 2em;
}

.footer--right {
  grid-area: fright;
}

/* content */
#main__container h1,
#main__container h2,
#main__container h3,
#main__container h4 {
  color: #f90;
  font-family: 'LCARSGTJ3', sans-serif;
  margin: .1em 0 .3em;
}

#main__container h1 {
  font-size: 2.2em;
}

#main__container h2 {
  font-size: 1.8em;
}

#main__container h3 {
  font-size: 1.5em;
}

#main__container p {
  margin: 0 0 .7em;
  line-height: 1.4em;
}

#main__container ul {
  margin: 0 0 .7em;
  padding-left: 1.5em;
  line-height: 1.4em;
}

.news__header {
  margin: 0 0 .3em;
  display: flex;
  flex-direction: column;
}

.news__header--title {
  display: inline-block;
  flex-grow: 1;
}

.news__header--time {
  align-self: flex-end;
  flex-shrink: 0;
  font-size: .9em;
  color: #fc9;
}

#main__container a {
  font-style: italic;
  color: #f96;
  text-decoration: none;
}

#main__container img {
  display: block;
  max-width: 90%;
  margin: 0 auto 0.7em;
}

#main__container a:focus,
#main__container a:hover {
  text-decoration: underline;
}

#main__container > :first-child {
  margin-top: 0;
}

#main__container > :last-child {
  margin-bottom: 0;
}

strong {
  color: #c66;
}

.note {
  color: #f96;
}

dl {
  margin: 0 0 .7em;
  line-height: 1.4em;
}

dt {
  color: #c9c;
  font-style: italic;
  word-break: break-word;
}

dt:not(:first-child) {
  margin-top: .5em;
}

/******************************
 * small layout
 ******************************/

@media screen and (min-width: 35em) {
  /* header */

  #header {
    grid-template-rows: 1em;
    grid-template-columns: .8em auto 1fr .8em;
    grid-template-areas: "hleft hlogo hspace hright";
  }

  .header__name--short {
    width: unset;
    height: 1em;
  }

  /* navigation */

  .nav__list {
    grid-template-columns: 1fr 1fr;
  }

  /* content */

  .news__header {
    flex-direction: row;
    justify-content: space-between;
  }

  .news__header--time {
    align-self: center;
  }

  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .5em;
    row-gap: .5em;
  }

  dt:not(:first-child) {
    margin-top: 0;
  }
}

/******************************
 * medium layout
 ******************************/

@media screen and (min-width: 54em) {
  body {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header header" "nav main" "footer footer";
  }

  /* general bars */

  .bar--space {
    background-color: #99f;
  }

  .bar--sep {
    display: block;
  }

  .bar--left {
    display: none;
  }

  /* header */

  #header {
    grid-template-rows: 1em .25em;
    grid-template-columns: 7em 1fr auto .8em;
    grid-template-areas: "hsep hspace hlogo hright";
    grid-row-gap: 0;
  }

  .header--sep {
    height: 1em;
  }

  .header--sep::after {
    content: '';
    display: block;
    position: absolute;
    left: calc(var(--side-bar-width) - .25em);
    top: 1em;
    width: .25em;
    height: .25em;
    background-color: #000;
    border-top-left-radius: 100%;
  }

  .header--sep::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 1em;
    height: .25em;
    width: var(--side-bar-width);
    background-color: #c9c;
  }

  /* navigation */

  #nav__container {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: auto;
    padding: .5em 0;
  }

  .nav {
    padding: .5em 0;
  }

  .nav__bar--top {
    display: block;
    height: .8em;
    font-size: 2.5em;
    width: calc(var(--side-bar-width) - .25em);
    background-color: #99c;
  }

  .nav__list {
    grid-template-columns: 1fr;
    width: calc(var(--side-bar-width) * 2.5 - .625em);
  }

  .nav__bar--bottom {
    display: block;
    font-size: 2.5em;
    width: calc(var(--side-bar-width) - .25em);
    background-color: #99c;
  }

  .nav__link {
    justify-content: flex-end;
    border-radius: 0;
    background-color: #99f;
    padding-right: .4em;
  }

  .nav__link::before {
    content: attr(data-num);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 3.2em;
    color: #c69;
    background-color: none;
    height: 100%;
    width: .9em;
    min-height: 48px;
    line-height: 1em;
    left: 100%;
    top: 0;
    padding: 0.08em 2% 0;
  }

  .nav__link::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #99f;
    height: 100%;
    min-height: 48px;
    width: 1.6em;
    top: 0;
    left: calc(100% + 2.8em);
    border-radius: 0 1.6em 1.6em 0;
  }

  .nav__link.active,
  .nav__link.active::after {
    background-color: #f96;
  }

  .nav__link:focus,
  .nav__link:hover,
  .nav__link:focus::after,
  .nav__link:hover::after {
    background-color: #c9c;
  }

  /* main-nav separator */

  .bar__main-nav-separator {
    display: none;
  }

  /* main */

  #main__container {
    padding: .5em 2.55em 0 7em;
  }

  /* footer */

  #footer {
    grid-template-columns: 8em 1fr .8em;
    grid-template-areas: "fsep fspace fright"
  }

  .footer--sep::after {
    content: '';
    display: block;
    position: absolute;
    left: calc(var(--side-bar-width) - .25em);
    top: -.25em;
    width: .25em;
    height: .25em;
    background-color: #000;
    border-bottom-left-radius: 100%;
  }

  .footer--sep::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -.25em;
    height: .25em;
    width: var(--side-bar-width);
    background-color: #c9c;
  }
}