/* General style sheet */

/* Fonts */
@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: bold;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'Lato';
  src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

/* General */

html {
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

html, body {
  min-width: 18rem;
  padding: 1.5rem;
}

body {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 2rem;
  font-size: 1.25rem;
  color: #333;
}

/* Headings */

h1, h2, h3 { line-height: 1 }
header > h1 { font-size: 4rem; margin-top: 0; margin-bottom: 0; }
h1, h2 { font-size: 2rem; }
:not(header) > h1 { line-height:1.25; }
h3 { font-size: 1.5rem; }

time.single {
  display: block;
  font-size: 1rem;
  line-height: 1;
  font-weight: normal;
  color: gray;
  text-align: left;
  margin-top: -0.3rem;
}

/* Figures and images */

img {
  max-width: 100%;
}

/*
  Set images to full width by default. This also stops
  images from “jumping” during layout (which happens if only
  max-width is set.
*/
main img {
  width: 100%;
}

figure {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0;
  margin-right: 0;
}

figcaption {
  font-size: 1rem;
  font-style: oblique;
  line-height: 1.5;
  text-align: center;
  font-weight: bold;
}

/*
  Screenshots of windows with drop shadows don’t appear to take up 100%
  of the width. Adjust them optically.
*/
.window-with-shadow > img {
  max-width: 110%;
  width: 110%;
  margin-left: -5%;
  margin-right: -5%;
}

/*
  And also pull the figure captions up so that the margin doesn’t take the drop
  shadow into consideration.
*/
.window-with-shadow > figcaption, .window-with-shadow > figcaption > p:first-of-type {
  margin-top: -1rem;
}

/*
  Don’t add additional space between an H3 and a figure that immediately follows
  it to improve grouping.
*/
h3 + figure {
  margin-top: 0;
}

/* For windows with shadow, tighten up the spacing even further. */
h3 + figure.window-with-shadow {
  margin-top: -0.5rem;
}


/* Video */

video, video[poster] { width: 100%; }
figure > video { margin-bottom: 1rem; }

/* Block quotes */

blockquote {
  margin-left: -1.3rem;
  border-left: 0.3rem solid lightgray;
  padding-left: 1rem;
  font-style: italic;
  color: slategray;
}

blockquote a {
  color: slategray;
}

/* Code */

pre {
  background-color: lightpink;
  border-radius: 1rem;
  overflow: scroll;
}

.chroma {
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Links */

a {
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid lightcoral;
}

header > a {
  border: none;
}

/* Lists */

ol, ul {
  padding-left: 0;
}

li::marker {
  font-size: 1.5rem;
  color: darkgray;
}

/* Icons */

header {
  display: grid;
  grid-template-columns: 1fr 2.25rem 2.4rem 2.25rem 2.25rem;
  grid-gap: 0.25rem;
  margin-bottom: 2.7rem;
}

.email, .mastodon, .rss, .p2p {
  height: 26px;
  margin-top: 2rem;
}

/* Footnotes */

.footnote-ref { font-size: 0.9rem; margin-left: 0.15rem; }
.footnotes { font-size: 1rem; margin-top: 2rem; }
.footnotes > hr { border: 0.5px solid; color: darkcyan; }
.footnotes li::marker { font-size: 1rem; color: #333; }

.footnotes::before { content: "Footnotes"; font-size: 1.5rem; }

/* Footer */

footer {
  border-top: 1px solid darkcyan;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
}

/* Break point: title goes to two lines. */

/* Move icons down. */
@media (max-width: 580px) {
  .email, .mastodon, .rss, .p2p {
    margin-top: 6rem;
  }
}

/* Break point: narrow portrait viewports */

@media (max-width: 420px) {
  html {
    font-size: 0.9rem;
  }

  html, body {
    padding: 0.5rem;
  }

  /*
  Remove the border radius so the background color of code blocks appears in
  full bleed.
  */
  .chroma {
    border-radius: 0;
  }

  /* Let the figure captions breath, even on images with shadows */
  .window-with-shadow > figcaption, .window-with-shadow > figcaption > p:first-of-type {
    margin-top: 0;
  }

  /* Sadly, there’s not enough room to make list text flush left. */
  li { list-style-position: inside; }

}