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

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

@font-face {
  font-family: 'adobe-garamond-pro';
  src: url('fonts/agaramondpro-bold-webfont.faebd169a0c7.woff2') format('woff2');
  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;

  &.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);
  &.left { grid-area: header-left; text-align: right; padding-right: 8px; }
  &.right { grid-area: header-right; text-align: left; padding-left: 8px; }
}

nav {
  grid-area: nav;
  padding-left: 50px;
  font-variant: small-caps;
  line-height: var(--line-height-xlarge);
  letter-spacing: 1px;
  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);
  &.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 & { margin-top: 20px; }

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

  .story nav & { padding-left: 120px; }
  .contact article & { 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;
  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 {
  header.left { padding-right: 4px; }
  header.right { padding-left: 16px; }
  nav { padding-top: 210px; padding-left: 0; }

  article {
    margin: auto;
    padding: 50px;

    p {
      text-indent: var(--text-indent-normal);
      max-width: 33em;
      margin: 0;

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

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

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

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

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

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

aside { grid-area: image; text-align: center; }

/* 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; }

  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;
    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; }
    aside { padding-right: 50px; }
  }

  .story {
    nav ul { padding-left: 100px; }

    article {
      padding: 50px 100px;
      p.section-break { margin: 10px; }
    }

    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;

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

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

    ul {
      display: none;

      &.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;
      }
    }
  }

  .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);
    svg { width: 2rem; height: 2rem; fill: var(--theme-text-reverse); }
  }

  article { padding-left: 60px; }

  .story {
    nav {
      padding-top: 110px;
      ul { padding-left: 15px; }
    }

    article {
      padding: 50px 150px 30px;
      p { text-indent: var(--text-indent-small); }
    }

    footer { margin-left: 0; padding-left: 10px; }
  }

  .about h1, .error h1 { text-align: center; }
  img { height: 350px; width: 350px; }
  .frame { height: 130px; width: 130px; top: 250px; left: 250px; }

  .books {
    img { height: 480px; width: 300px; }
    aside { padding: 0; }
  }
}

@media (width <= 820px) {
  .story {
    nav { padding-left: 20px; }
    article { padding: 50px 120px 30px; }
    footer { padding-left: 0; margin-left: 10px; }
  }

  img { height: 280px; width: 280px; }
  .frame { top: 180px; left: 180px; }

  .books {
    img { height: 400px; width: 250px; }
    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; }
    &.right { padding-left: 3px; }

    &.left {
      padding-right: 3px;
      a { color: var(--theme-text-reverse); }
    }
  }

  .story {
    header.left { padding-right: 3px; }
    header.right { padding-left: 3px; }
    article, aside.scrolltop { padding: 10px 80px; }
    aside.links { padding: 20px 80px; }

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

  .books {
    aside { padding-top: 40px; }
    img { height: 350px; width: 215px; }
    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; }
}

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