/* Fonts */
@font-face {
  font-family: 'adobe-garamond-pro';
  src:
    url('fonts/agaramondpro-regular-webfont.c99f47d6152a.woff2') format('woff2'),
    url('fonts/agaramondpro-regular-webfont.e2aac56de253.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'adobe-garamond-pro';
  src:
    url('fonts/agaramondpro-italic-webfont.c7cf3351ddb8.woff2') format('woff2'),
    url('fonts/agaramondpro-italic-webfont.aca141f49ac7.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'adobe-garamond-pro';
  src:
    url('fonts/agaramondpro-bold-webfont.faebd169a0c7.woff2') format('woff2'),
    url('fonts/agaramondpro-bold-webfont.22226def4bf8.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* General page setup */
:root {
  --color-purple: #400186;
  --color-darkpurple: #351f65;
  --color-lightpurple: #5949a7;
  --color-gray: #b1b3b3;
  --color-darkgray: #53565a;
  --color-lightgray: #0000001f;
  --color-black: #000000;
  --color-white: #ffffff;

  --theme-background: var(--color-white);
  --theme-background-reverse: var(--color-black);
  --theme-background-button: var(--color-lightpurple);
  --theme-text-light: var(--color-darkgray);
  --theme-text-reverse: var(--color-white);
  --theme-text: var(--color-black);
  --theme-nav-text: var(--color-gray);
  --theme-accent: var(--color-darkpurple);
  --theme-highlight: var(--color-purple);
  --theme-box-shadow: var(--color-lightgray);

  --font-size-small: 1.2rem;
  --font-size-normal: 1.5rem;
  --font-size-medium: 2.3rem;
  --font-size-big: 4rem;
  --text-indent-normal: 3rem;
  --text-indent-small: 2rem;
  --line-height-normal: 1.8;
  --line-height-large: 2.6;
  --line-height-xlarge: 4;
}

/* Layout */
body {
  display: grid;
  grid-template:
    '.      header-left header-right .' 230px
    'main   image       image        nav' 1fr
    / 3fr 1fr 2fr 2fr;
  min-height: 100vh;
  margin: 0;
  box-sizing: border-box;
  padding: 10px;
  background:
    linear-gradient(
      to right,
      var(--theme-background) 50%,
      var(--theme-background-reverse) 50%
    );
  font-family: 'adobe-garamond-pro', serif;
  font-feature-settings: 'liga', 'kern';
  font-size: var(--font-size-normal);
  color: var(--theme-text);
  -webkit-tap-highlight-color: transparent;
}

body.story {
  grid-template:
    '.      header-left header-right'
    'image  image       nav'
    'main   main        nav' 1fr
    'links  links       .'
    'scroll scroll      footer'
    / 3fr 1fr 1fr;
  background:
    linear-gradient(
      to right,
      var(--theme-background) 80%,
      var(--theme-background-reverse) 80%
    );
}

/* Main content */
a { text-decoration: none; list-style-type: none; color: var(--theme-text-light); padding: 5px; }

header { padding-top: 15px; font-variant: small-caps; font-size: var(--font-size-medium); }
header.left { grid-area: header-left; text-align: right; padding-right: 8px; }
header.right { grid-area: header-right; text-align: left; padding-left: 8px; }
.story header.left { padding-right: 4px; }
.story header.right { padding-left: 16px; }

nav {
  grid-area: nav;
  padding-left: 50px;
  font-variant: small-caps;
  line-height: var(--line-height-xlarge);
  letter-spacing: 1px;
}

.story nav { padding-top: 210px; padding-left: 0; }

nav li a { color: var(--theme-nav-text); }
article li a { line-height: var(--line-height-large); }
.links a { padding: 0; }

.books article a {
  display: inline-block;
  color: var(--theme-text-reverse);
  background-color: var(--theme-accent);
  box-shadow: 0 1px 1px var(--theme-box-shadow), 0 2px 2px var(--theme-box-shadow);
  padding: 10px;
  margin-top: 50px;
  border-radius: 4px;
  text-align: left;
  letter-spacing: 1px;
  font-variant: all-small-caps;
}

nav a:focus, nav a:hover { color: var(--theme-text-reverse); }
.error article a { color: var(--theme-text); }
header.left a { color: var(--theme-text); }
header.right a { color: var(--theme-text-reverse); }
article a:focus, article a:hover { color: var(--theme-highlight); }
.error article p a { padding: 0; }
.error article a:focus, .error article a:hover { color: var(--theme-highlight); }
nav span { color: var(--theme-text-reverse); padding: 5px; cursor: default; }

.books article a:focus, .books article a:hover {
  background: var(--theme-background-button);
  color: var(--theme-text-reverse);
}

article p a span { border-bottom: 1px solid var(--theme-highlight); }
article p a span.inset { border-bottom: 1px solid var(--theme-text-reverse); }
.stories article a:focus, .stories article a:hover { text-decoration: underline; }

ul { list-style-type: none; }
nav ul { margin-top: 20px; }

article ul {
  text-align: left;
  padding-top: 10px;
  padding-left: 0;
  font-variant: all-small-caps;
  letter-spacing: 1px;
}

.story nav ul { padding-left: 120px; }
.contact article ul { margin-top: 50px; padding: 10px; text-align: center; }

h1 {
  text-align: center;
  font-variant: small-caps;
  font-size: var(--font-size-medium);
  letter-spacing: 1px;
  margin: 10px 0 30px;
}

h2 {
  text-align: left;
  font-size: var(--font-size-normal);
  font-style: italic;
  font-weight: normal;
  margin: 3px 0 20px;
}

.stories h1, .books h1 { text-align: left; }
.about h1, .error h1 { text-align: right; }
.story h2 { text-indent: 0; text-align: center; }

article { grid-area: main; padding: 10px 10px 50px 80px; }
article p { text-align: justify; line-height: var(--line-height-normal); }
.contact article p { padding-top: 50px; text-align: center; }
.books article { padding-right: 50px; padding-bottom: 80px; }
.story article { margin: auto; padding: 50px; }
.story article p { text-indent: var(--text-indent-normal); max-width: 33em; margin: 0; }

.story article p.section-break {
  padding: 10px 0;
  margin: 20px 0;
  text-indent: 0;
  text-align: center;
}

.story footer { grid-area: footer; padding-top: 25px; padding-left: 10px; }

.story footer p {
  text-align: center;
  margin: auto;
  font-size: var(--font-size-small);
  color: var(--theme-text-reverse);
}

.story aside.scrolltop { grid-area: scroll; text-align: center; padding-top: 50px; }
.story aside.scrolltop a { color: var(--theme-text-light); font-size: var(--font-size-normal); }

aside { grid-area: image; text-align: center; }
.story aside.links { grid-area: links; text-align: center; padding-top: 10px; }
.story aside.links p { font-size: var(--font-size-normal); }
.story aside.links a { color: var(--theme-text); border-bottom: 1px solid var(--theme-highlight); }

.story aside.links a:focus,
.story aside.links a:hover,
.story aside.scrolltop a:focus,
.story aside.scrolltop a:hover {
  color: var(--theme-highlight);
}

/* Images and decoration */
img { height: 480px; width: 480px; }
.frame-container { position: relative; display: inline-block; }

.frame {
  position: absolute;
  z-index: -1;
  top: 280px;
  left: 280px;
  border: 3px solid var(--theme-highlight);
  height: 240px;
  width: 240px;
}

.books aside { padding-right: 160px; }

.books img {
  height: 640px;
  width: 400px;
  box-shadow: 4px 8px 14px -1px var(--theme-background-reverse);
}

/* Responsive design */
@media (width <= 1440px) {
  html { font-size: 80%; }
  nav { padding-left: 25px; }
  nav ul { margin-top: 0; }
  article { padding-left: 80px; }
  img { height: 400px; width: 400px; }
  .frame { height: 150px; width: 150px; }
  .contact article p { padding-top: 25px; }
  .books img { height: 540px; width: 330px; }
  .books aside { padding-right: 50px; }
  .story nav ul { padding-left: 100px; }
  .story article { padding: 50px 100px; }
  .story article p.section-break { margin: 10px; }
  .story footer { margin-left: 20px; padding-left: 0; }
}

@media (width <= 1080px) {
  html { font-size: 70%; }

  body {
    grid-template:
      '.     header-left  header-right  nav' 180px
      'main  image        image         .' 1fr
      / 3fr 1fr 2fr 2fr;
  }

  body.books {
    grid-template:
      '.     header-left  header-right  nav' 180px
      'main  main         image         image' 1fr
      / 3fr 1fr 2fr 2fr;
  }

  nav { text-align: center; padding: 0; }
  nav a { margin: 35px; }
  nav ul { display: none; }

  nav ul.open {
    display: block;
    position: absolute;
    z-index: 3;
    background: var(--theme-background-reverse);
    border-radius: 3px;
    box-shadow: 0 1px 1px var(--theme-box-shadow), 0 2px 2px var(--theme-box-shadow);
    padding: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 10px;
  }

  .story nav { padding-top: 110px; }
  .story nav ul { padding-left: 15px; }
  .menu-container { display: inline-block; position: relative; }

  #show-menu {
    display: block;
    color: var(--theme-text-reverse);
    font-size: var(--font-size-big);
    line-height: var(--line-height-normal);
  }

  #show-menu svg { width: 2rem; height: 2rem; fill: var(--theme-text-reverse); }

  article { padding-left: 60px; }
  .story article { padding: 50px 150px 30px; }
  .story article p { text-indent: var(--text-indent-small); }
  .about h1, .error h1 { text-align: center; }
  .story footer { margin-left: 0; padding-left: 10px; }
  img { height: 350px; width: 350px; }
  .frame { height: 130px; width: 130px; top: 250px; left: 250px; }
  .books img { height: 480px; width: 300px; }
  .books aside { padding: 0; }
}

@media (width <= 820px) {
  .story nav { padding-left: 20px; }
  .story article { padding: 50px 120px 30px; }
  .story footer { padding-left: 0; margin-left: 10px; }
  img { height: 280px; width: 280px; }
  .frame { top: 180px; left: 180px; }
  .books img { height: 400px; width: 250px; }
  .books aside { padding-right: 5px; }
}

@media (width <= 700px) {
  body, body.books {
    grid-template:
      'header-left header-right'
      'nav         nav'
      'image       image'
      'main        main' 1fr
      / 1fr 1fr;
    background: none;
    padding: 0;
  }

  body.story {
    grid-template:
      'header-left header-right'
      'nav         nav'
      'image       image'
      'main        main' 1fr
      'links       links'
      'scroll      scroll'
      'footer      footer'
      / 1fr 1fr;
    background: none;
  }

  header, nav { background: var(--theme-background-reverse); }
  nav { padding-left: 10px; }
  article { padding: 10px 50px; }
  aside { padding: 10px; }
  img { height: 180px; width: 180px; }
  .frame { display: none; }
  nav ul.open { margin: 0; }
  .story nav { padding-top: 0; padding-left: 10px; }

  header a { padding: 3px; }
  header.right { padding-left: 3px; }
  header.left { padding-right: 3px; }
  header.left a { color: var(--theme-text-reverse); }
  .story header.left { padding-right: 3px; }
  .story header.right { padding-left: 3px; }
  .books aside { padding-top: 40px; }
  .books img { height: 350px; width: 215px; }
  .books article a { text-align: center; display: table; margin: 50px auto 0; }
  .stories article ul { text-align: left; display: table; margin: 0 auto; }
  .stories h1, .books h1, h2 { text-align: center; }
  .story article, .story aside.scrolltop { padding: 10px 80px; }
  .story aside.links { padding: 20px 80px; }

  .story footer {
    margin-left: 0;
    padding: 20px 20px 15px;
    background: var(--theme-background-reverse);
  }
}

@media (width <= 425px) {
  .story article, .story aside.scrolltop { padding: 10px 40px; }
  .story aside.links { padding: 20px 40px; }
}