:root {
  --light: #fff6e2;
  --grey: #999;
  --accent1: #3d5b30;
  --green: #5ea730;
  --darker-green: rgb(80, 139, 44);
  --red: #d14334;
  --darker-red: rgb(154, 49, 41);
  --accent: var(--red);
  --darker-accent: var(--darker-red);
  --superlight: rgba(0, 0, 0, 0.1);
  --gold: #F8C03F;
}

@font-face {
  font-family: 'libre_baskerville';
  src: url('librebaskerville/librebaskerville-bold-webfont.woff2') format('woff2'), url('librebaskerville/librebaskerville-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'libre_baskerville';
  src: url('librebaskerville/librebaskerville-italic-webfont.woff2') format('woff2'), url('librebaskerville/librebaskerville-italic-webfont.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'libre_baskerville';
  src: url('librebaskerville/librebaskerville-regular-webfont.woff2') format('woff2'), url('librebaskerville/librebaskerville-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html, body {
  padding: 0;
  margin: 0;
}

body {
  background: url(so-white.png);
  font-family: Helvetica, sans-serif;
  color: #444;
}

header {
  margin: 0 auto;
  max-width: 900px;
}

#aboutme {
  display: grid;
  gap: 1em;
  grid-gap: 1em;
  padding: 1em;
  /* border: 1px solid #FAD; */
  background: #FFF;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border: 1px solid var(--superlight);
  transform: rotate(-1deg);
  margin: 2em 2em 3em;
  min-width: min-content;
  transition: transform 1s;
}


.portrait {
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  grid-row: 1 / 3;
}

.bio p:last-child {
  margin-bottom: 0;
}

.contact {
  align-self: end;
}


h1, h2 {
  font-weight: normal;
  margin: 0;
  font-family: librebaskerville, Georgia, 'Times New Roman', Times, serif;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-style: italic;
  padding-top: .3em;
}

p {
  margin: 1em 0;
  font-family: librebaskerville, Georgia, 'Times New Roman', Times, serif;
}

.button {
  appearance: none;
  background-color: var(--accent);
  border: 1px solid rgb(56, 97.3, 30.8, .15);
  border-radius: 6px;
  box-shadow: rgb(56, 97.3, 30.8, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5em;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  transition: background-color .5s;
}

.button:hover {
  background-color: var(--darker-accent);
}

.detail {
  color: var(--grey);
  font-size: 0.8em;
  margin: 0.5em 0;
}

.select-all-text {
  user-select: all;
  -moz-user-select: all;
  -webkit-user-select: all;
}

h3 {
  color: var(--accent1);
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 1px 1px var(--superlight);
}




:root {
  --book-width: 220px;
  --book-height: 360px;
  --book-depth: 15px;

  --article-width: 600px;
  --event-width: 600px;
}

#books {
  display: grid;
}

article {
  z-index: 1;
  perspective:3000px;
  justify-self: center;
  display: grid;
  row-gap: 1em;
  column-gap: 2em;
  grid-row-gap: 1em;
  grid-column-gap: 2em;
  padding: 1em;
  margin: 2em;
  max-width: var(--article-width);
}


.summary {
}

.summary p:last-child {
  margin-bottom: 0;
}

h4 {
  margin: 0.5em 0;
  padding: 0;
  font-family: librebaskerville, Georgia, 'Times New Roman', Times, serif;
  font-size: 1.5em;
}

.action {
  align-self: end;
}

.action .detail {
  display: inline-block;
  margin: 0 1em;
}

.book {
  grid-row: 1 / 3;
  margin: 0 auto;
  position: relative;
  display: block;
  width: var(--book-width);
  height: var(--book-height);
  border-radius: 2px 4px 4px 2px;
  box-shadow: 13px 13px 8px 0px rgba(151, 146, 153,0.6);
  box-shadow: rgba(0, 0, 0, 0.25) 10px 25px 50px -12px;
  box-shadow: rgba(0, 0, 0, 0.2) 10px 20px 25px -10px, rgba(0, 0, 0, 0.1) 5px 10px 10px -5px;
  transform-style: preserve-3d;
  transition: transform .5s;
}

.book:hover {
  transform: rotate3d(0,1,0.04,35deg);
}

.book .front {
  display: block;
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transition: transform .5s;
  transform: translate3d(0,0,calc(var(--book-depth) / 2));
}

.book .front .cover {
  display: block;
  position: absolute;
  width: var(--book-width);
  height: var(--book-height);
  overflow: hidden;
  border-radius: 0 3px 3px 0;
}

/* Shadow over cover */
.book .front .cover:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}

/* Bind shadow */
.book .cover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 10px;
  bottom: 0;
  width: 3px;
  background: rgba(0,0,0,0.1);
  box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.book img {
  height: 100%;
  float:right;
  z-index: 1;
}

.book .spine {
  display: block;
  position: absolute;
  width: var(--book-depth);
  left: calc(var(--book-depth) / -2);
  height: var(--book-height);
  transform: rotate3d(0,1,0,-90deg);
}

.spine.atonecoute {
  background: url(a_ton_ecoute.jpg) 0 0;
  background-size: auto var(--book-height);
  /* background-position: calc(var(--book-width) + var(--book-depth)) 0; */
  background-position: 0 0;
}

.spine.lumieredesfelures {
  background: #3b4547;
}

.spine.lumieredesfelures:after {
  content: '';
  position: absolute;
  top: 35px;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
}

#events ul {
  display: grid;
  padding: 0;
  margin: 0;
  justify-content: center;
}

#events li {
  list-style-type: none;
  gap: 1em;
  grid-gap: 1em;
  padding: 1em;
  margin: 1em 3em;
  max-width: var(--event-width);
  background: #FFF;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  border: 1px solid var(--superlight);
}

#events li.past {
  opacity: .5;
}

#events li.past .date {
  text-decoration: line-through;
}

li a {
  color: inherit;
  text-decoration: none;
}

li a:hover {
  text-decoration: underline;
}

li .img {
  text-align: center;
}

li img {
  max-width: 100%;;
}

.date {
  font-weight: bold;
  color: var(--accent);
}

#press {
  text-align: center;
}

#press img {
  
  max-width: 600px;
}


footer {
  color: var(--grey);
  font-size: .6em;
  text-align: center;
  margin: 6em 2em 4em;
}

@media (min-width: 600px) {
  
  #aboutme {
    grid-template-columns: auto 60%;
    transform: rotate(-4deg);
    margin: 4em;
  }

  .book {
    justify-self: end;
    margin: 0;
  }

  .summary {
    grid-column: 2;
    grid-row: 1;
  }

  h4 {
    margin: 0;
  }

  .action {
    justify-self: end;
  }

}

@media (min-width: 800px) {

  .contact p {
    display: block;
    float: right;
    line-height: 1em;
    margin-top: 1.25em;
    margin-bottom: 0;
  }
  .contact a {
    float: right;
    margin-left: 1em;
  }

}

@media (min-width: 1200px) {
  
  #books {
    grid-template-columns: repeat(2, fit-content(600px));
    gap: 2em;
    grid-gap: 2em;
    margin: 2em;
    justify-content: center;
  }

  article {
    margin: 0;
  }

  #events ul {
    grid-template-columns: repeat(2, fit-content(600px));
    gap: 2em;
    grid-gap: 2em;
    margin: 2em;
    justify-content: center;
  }

  #events li {
    margin: 0;
  }

}