@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans+Condensed:wght@400;700&family=IBM+Plex+Serif:ital,wght@0,400;0,700;1,400&display=swap');

body {
  font-family: "IBM Plex Serif", serif;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 0 auto;
  color: #111;
  background-color: hsl(160, 20%, 98%);
}

main {
  flex: 3;
  font-size: 14pt;
  padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
  min-width: calc(320px - 4rem);
  max-width: calc(1200px - 4rem);
}

aside {
  flex: 1;
  padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 2vw, 2rem);
  font-size: 12pt;
  line-height: 1.4;
  color: #444;
  min-width: calc(320px - 4rem);
  max-width: calc(500px - 4rem);
  position: sticky;
  top: 0;
  height: calc(100vh - 128px);
}

@media (width < 575px) {
  aside {
    height: fit-content;
    position: static;
  }
  body:not(.home) {
    aside {
      order: 2;
    }
    main {
      order: 1;
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
}
h1 {
  margin-block: 0 0.5em;
}
h2, h3, h4, h5, h6 {
  margin-block: 1em 0.5em;
}

p {
  margin-block: 0 1rem;
  text-wrap: pretty;
}
div.lead {
  font-size: 16pt;
}

a {
  color: hsl(160, 20%, 35%);
  text-underline-offset: 2px;
  text-decoration-color: hsl(160, 20%, 35%);
  text-decoration-thickness: 1px;
}
a:hover {
  color: hsl(160, 20%, 60%);
  text-decoration-color: hsl(160, 20%, 60%);
}
aside a {
  text-decoration: none;
}

aside h2 {
  font-size: 36pt;
  margin-block: 0 0.5rem;
  line-height: 1;
}
aside .site-description {
  font-family: "IBM Plex Serif", sans-serif;
  text-transform: uppercase;
  font-size: 14pt;
  letter-spacing: 0.03ch;
  line-height: 1;
  margin-top: 8px;
}
/*
aside nav {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin-block: 1rem;
  font-size: 18pt;
}
aside nav a {
  text-wrap: nowrap;
}
aside nav.small {
  font-size: 13pt;
}
*/

.svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: hsl(160, 20%, 50%);
  padding-right: 5px;
  vertical-align: text-top;
}

a[href^='http']::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -5 28 22' width='20' height='20' %3E%3Cpath d='M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11' stroke='gray' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-left: 0.15em;
}

.email, .feed {
  font-family: "IBM Plex Sans Condensed", sans-serif;
  margin: 0;
}

ul {
  margin-top: 0;
}

.video-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
}

div.cover-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
div.cover-flex > * {
  height: 185px;
  width: 120px;
}
div.cover-flex > * > img {
  height: 100%;
}

div.group-flex {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
div.group-header {
  margin-block: 1rem;
  background: hsl(160, 20%, 80%);
  padding: 0.2rem 0.6rem;
}
div.group-header h3 {
  margin-block: 0;
}
div.group-header h3.isbn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16pt;
  letter-spacing: 0.1ch;
}

div.edition-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
div.edition {
  flex: 1;
  min-width: 200px;
  max-width: fit-content;
  background: hsl(160, 20%, 90%);
  padding: 0.4rem 0.8rem;  
}
div.edition h4 {
  margin-block: 0;
}

.text-9-11 {
  font-size: 0.9em;
  line-height: 1.1;
}

div.impression-group-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
div.impression-group-flex > * {
  max-width: 128px;
  flex: 1;
}
div.cover-container {
  height: 185px;
  width: 120px;
}
div.cover-container > img {
  height: 100%;
}
div.no-cover {
  width: 100%;
  height: 100%;
  background-color: hsl(160, 20%, 80%);
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

div.cover-design {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.8em;
  line-height: 1.1;
  margin-top: 0.2rem;
}
div.impression-group-publisher {
  font-size: 0.8em;
  line-height: 1.1;
  margin-top: 0.4rem;
  min-height: 40px;
}

div.impression-data {
  margin-top: 0.5rem;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 0.8em;
  line-height: 1.1;
}

div.impression-columns {
  columns: 2;
  column-gap: 0.5rem;
}