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

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html, body {
  height: 100%;
}
body{
  font-size: 1.5em;
  font-size: calc(.6vw + .9em);
  line-height: 1.4;
  background: #eee;
}



li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}

p {
  margin-bottom: 1em;
}

.header {
  margin: 2.5rem;
}

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header p{
  width: calc(40vw);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#splash {
  /* overflow: hidden; */
  margin: 2.5rem;
}
#splash svg {
  width: 100%; 
  height: 100%; 
  object-fit: contain;
}

@media screen and (orientation: portrait){
  #splash {
    padding-bottom: 45vw;  
  }
  #splash div{
    width: 100%;
    transform: rotate(90deg) scaleY(-1);
  }
  #splash img {
    object-fit: inherit;
    width: auto;
    height: calc(100vw - 3em);
  }
}
.js svg .book {
  opacity: 0;
}
.book.visible {
  animation: fadeIn 50ms ease-out forwards;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

main {
  margin: 2.5rem;
}

sup {
  position: relative;
  top: .1em;
  line-height: 1;
}
main a {
  border-bottom: 1px solid;
}

.break-all {
  word-break: break-all;
}


h1, h2, h3, h4 {
  font-weight: 400;
  margin-bottom: 1em;
  padding-left: 2em;
  font-size: 1em;
}

.home p,
.publishers p,
.intro p,
.text p {
  max-width: 35em;
}

.intro p + p,
.details p + p,
.text p + p {
  margin-top: -1em;
  text-indent: 2em;
}
.home p,
.text p {
  margin-bottom: 1em;
}
.details,
.subpages,
.publishers {
  margin-top: 2em;
}

.details,
.boombook,
.books {
  font-size: 1rem;
}
.books h2 {
  font-size: 1.5em;
  margin-top: 0;
  font-size: calc(.6vw + .9em);
}
.details h4 {
  max-width: 35em;
  padding-left: 0;
  margin: 1.25em 0 1em;
}
.details p,
.details ul,
.details ol,
.details blockquote,
.details figure {
  max-width: 41em;
  padding-left: 6em;
}
.book {
  margin-bottom: .5em;
  text-indent: calc(-3em - .4ch);
  padding-left: 3em;

  }
.book span{
  display: inline-block;
  width: 3em;
  text-align: right;
}

.sizer {
  width: calc(33% - 2rem);
}
.gutter {
  width: 2rem;
}
.gallery{
  margin-top: 2em;
  clear: both;
}

.gallery::after {
    content: "";
    display: table;
    clear: both;
}
.gallery .item {
    -moz-transition: opacity 250ms;
    -o-transition: opacity 250ms;
    -webkit-transition: opacity 250ms;
    transition: opacity 250ms;
    width: calc(33% - 2rem);
    padding: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
    display: block;
    margin-bottom: 2rem;
    float: left;
    margin-right: 2rem;
}
.gallery .item.item-big {
    width: calc(66% - 2rem);
}
.gallery .item.item-small {
    width: calc(33% - 2rem);
}
.gallery .books.item-big{
  columns: 2;
  column-gap: 2rem;
}
.gallery .books.item-big li{
  break-inside: avoid;
}


@media screen and (max-width: 60rem) {
  .gallery .item  {width: calc(33% - 2rem);}
  .gallery .item.books {width: calc(66% - 2rem);}
  .gallery .item.item-big {
    width: 100%;
  }
}

@media screen and (max-width: 40rem) {
  .gallery .item,
  .gallery .item.item-big,
  .gallery .item.books,
  .gallery .item.item-small {
    width: 100%;
    columns: 1;
    column-gap: 0;
  }
}
.boombook h3{
  margin: 1em 0;
}

.details figure {
  padding-left: 0;
  max-width: 44em;
  margin: 1em 0 2em;
}
.details figure.big {
  max-width: calc(100% - 6em);
}
.inline-gallery-caption,
figure figcaption{
  margin-top: 1em;
  font-size: .85rem;
  margin-left: 1rem;
  color: rgba(0, 0, 0, 0.6);
}
.inline-gallery-caption {
  margin-bottom: 2rem;
}
.inline-gallery-caption:before,
figure figcaption:before{
  content: "—  ";
  display: inline-block;
}

.details .inline-gallery {
    padding: 0;
    max-width: calc(88em + 2em);
    display: grid;
    grid-template-columns: 44em 22em;
    grid-template-rows: 1fr 1fr;
    grid-gap: 2em 2em;
    margin-bottom: 1em;
}
.details .inline-gallery li:first-child {
  grid-row-start: 1;
  grid-row-end: span 2

}
.details .inline-gallery img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}


@media screen and (max-width: 40rem) {
  body{font-size:1.25em; font-size: calc(.6vw + .9em);}

  .header { padding: 1.5rem 1.5rem 0; margin: 0; }
  main,
  #splash { margin: 1.5rem; }
  .header p,
  .header {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .intro div{
    font-size: .85em;
  }
  .details p, .details ul, .details ol, .details blockquote, .details figure{
    padding-left: 0;
  }
  .details figure.big {
    max-width: 100%;
  }
  .details .inline-gallery {
    max-width: 100%;
    display: block;
  }
}

@media screen and (max-width: 30rem) {
  body{font-size:1em; font-size: calc(.6vw + .9em);
  .header { padding: 1rem 1rem 0; margin: 0; }
  main,
  #splash { margin: 1rem; }
}