/*!
Theme Name: CH
Theme URI: https:/camillehope.com/
Author: CH
Author URI: https://camillehope.com/
Description: Theme for CamilleHope.com
Version: 1.0.0
Text Domain: ch
*/

/*!-------------------------------------------------------------
### COLOR/FONT VARIABLES
---------------------------------------------------------------- */

:root {
  /* Primary colors */
  --c-accent:   #be53a7;  /*  190, 83, 167   */
  --c-link:     #4565af;  /*  69, 101, 175   */
  --c-link2:    #31477a;  /*  49, 71, 122    */
  --c-navy:     #385597;  /*  56, 85, 151    */
  --c-override: #999087;  /*  153, 144, 135  */

  /* Grays */
  --c-333:  #363432;  /*  54, 52, 50     */
  --c-555:  #57524e;  /*  87, 82, 78     */
  --c-777:  #78726c;  /*  120, 114, 108  */
  --c-999:  #999087;  /*  153, 144, 135  */
  --c-aaa:  #a29b92;  /*  179, 170, 161  */
  --t-aaa:  invert(68%) sepia(13%) saturate(219%) hue-rotate(354deg) brightness(91%) contrast(85%);
  --c-ddd:  #dbd6cf;  /*  219, 214, 207  */
  --c-eee:  #edeae7;  /*  236, 234, 231  */
  
  /* Fonts */
  --font-serif:   lora,serif;
  --font-head:    tungsten-narrow,sans-serif;
  }



/*!-----------------------------------------------------------
#
### Setup
#
==============================================================
==============================================================*/

/*!Normalize
--------------------------------------------- */
/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}


/*!Viewport
--------------------------------------------- */
@viewport {width: device-width;} @-ms-viewport {width: device-width;}


/*!Box sizing
--------------------------------------------- */
/*!Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*, ::after, ::before {box-sizing: border-box;} html {box-sizing: border-box;}



/*!-----------------------------------------------------------
#
### Base
#
==============================================================
==============================================================*/

/*!Typography
--------------------------------------------- */
/*! Define base font size so that 1rem ~ 10px */
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 400;
  overflow: auto;
  }

h1, h2, h3, h4 {
  margin: 0 0 1rem;
  line-height: 1.5;
  font-weight: 700;
  clear: both;
  }
h1 { font-size: 3rem; line-height: 1.2; }
h2 { font-size: 2.6rem; line-height: 1.4; }
h3 { font-size: 1em; margin-bottom: 0; }
h4 { font-size: 0.9em; margin-top: 0.8rem; margin-bottom: 0; }
.home h1, .home h2 {
  margin: 0;
  }
.home h1 { font-size: 4.8rem; line-height: 0.8; }
.home h2, section h2, .ui-dialog h2 {
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: 400;
  line-height: 0.85;
  text-transform: uppercase;
  }
.home h3 { font-size: 2.8rem; line-height: 1.4; }

@media only screen and (min-width:800px) {
  .home h2, section h2, .ui-dialog h2 { font-size: 6rem; }
  }
@media only screen and (min-width:1000px) {
  .home h1 { font-size: 6rem; }
  .home h2, section h2, .ui-dialog h2 { font-size: 7rem; }
  .home h3 { font-size: 3.4rem; }
  }

h1:focus, h2:focus, h3:focus { outline: none; }

p {
  margin: 0;
  margin-bottom: 1.5rem;
  }
p:last-child {
  margin-bottom: 0;
  }

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
  }
*::selection {
  background: rgba(190, 83, 167, 0.3);
  }
.sub {
  font-size: 0.8em;
  line-height: 1.5;
  color: var(--c-777);
  }



/*!Elements
--------------------------------------------- */
body {
  background: #fff;
  color: var(--c-333);
  }
hr {
  background-color: var(--c-ddd);
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
  }
embed, iframe, object {
  /* Make sure embeds and iframes fit their containers */
  max-width: 100%;
  }
img {
  height: auto;
  max-width: 100%;
  }
figure {
  margin: 0;
  }
figure img {
  display: block;
  width: 100%;
  height: auto;
  }
figure.is-resized img {
  width: auto;
  }
figcaption {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: var(--c-555);
  }

blockquote {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 4px;
  margin: 0;
  font-style: italic;
  }
:not(figure) > blockquote {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 18px 18px 18px 12px;
  border-radius: 5px;
  color: var(--c-333);
  }
blockquote > * {
  grid-column: 2 / span 1;
  font-size: 2rem;
  }
blockquote::before, blockquote p:last-child::after, blockquote p:only-of-type::after {
  font-family: var(--font-fa);
  font-weight: bold;
  opacity: 0.8;
  color: var(--c-ddd);
  }
blockquote::before {
  content: '\f10d';
  font-size: 0.8em;
  position: relative;
  top: -.2em;
  padding: 0 2px;
  }
  @media only screen and (min-width:1000px) {
    blockquote {
      column-gap: 6px;
      }
    :not(figure) > blockquote {
      padding: 20px 24px 24px;
      }
    blockquote::before {
      font-size: 1.4em;
      top: -.2em;
      }
    }
blockquote p:last-child::after, blockquote p:only-of-type::after {
  content: '\f10e';
  margin-left: 0.2em;
  padding: 0 2px;
  font-size: 0.6em;
  vertical-align: text-top;
  }
blockquote p:only-of-type {
  margin-bottom: 0.5rem;
  }
blockquote cite {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: normal;
  }



/*!Lists
--------------------------------------------- */
ol, ul {
  margin: 0 0 1.8rem;
  }
p + ol, p + ul {
  margin-top: -0.4rem;
  }
ul {
  list-style: disc;
  }
ol {
  list-style: decimal;
  }
li>ol, li>ul {
  margin-bottom: 0;
  margin-left: 1.5em;
  }
dt {
  font-weight: 700;
  }
dd {
  margin: 0 0 .5em;
  }



/*!Links
--------------------------------------------- */
a {
  color: var(--c-link);
  text-decoration: none;
  }
a:active, a:focus, a:hover {
  color: var(--c-link2);
  }
a:active, a:hover {
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px
  }
.external-link a {
  display: grid;
  grid-template-columns: 1fr auto;
  }
.external-link a::after {
  content: "\f08e";
  position: relative;
  top: .1em;
  padding-left: .1em;
  font-family: var(--font-fa);
  font-size: .6em;
  font-weight: normal;
  }

main a.more-link {
  font-family: var(--font-serif);
  white-space: nowrap;
  }




/*!-----------------------------------------------------------
#
### !LAYOUT
#
==============================================================
==============================================================*/

:root {
  /* Layout setup */
  --branding-padding-top: 2rem;
  --branding-padding-bottom: 2rem;
  --pghdr-padding-top: 3rem;
  --content-padding-top: 2rem;
  --content-padding-bottom: 4rem;
  --column-gap: 2rem;
  }
@media (min-width:640px) {
 :root {
    /* Layout setup */
    --branding-padding-top: 3rem;
    --pghdr-padding-top: 4rem;
    }
  }
@media (min-width:800px) {
 :root {
    /* Layout setup */
  --branding-padding-bottom: 3rem;
  --column-gap: 4rem;
    }
  }
@media (min-width:1000px) {
 :root {
    /* Layout setup */
  --column-gap: 5rem;
    }
  .book {
    --content-padding-top: 3rem;
    }
  }


.body {
  border-top: 6px solid var(--c-accent);
  min-width: 200px;
  max-width: 1500px;
  margin: 0 auto;
  }

*:has(> .contain), *:has(> .wp-block-group__inner-container) {
  display: grid;
  padding-left: 2rem;
  padding-right: 2rem;
  }
*:has(> .contain) *:has(> .wp-block-group__inner-container) {
  padding-left: 0;
  padding-right: 0;
  }
.contain, .wp-block-group__inner-container {
  width: 100%;
  }
  @media only screen and (min-width:400px) {
    *:has(> .contain), *:has(> .wp-block-group__inner-container) {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
      }
    }
  @media only screen and (min-width:640px) {
    /* Shift from liquid to fixed max-width */
    *:has(> .contain), *:has(> .wp-block-group__inner-container) {
      justify-items: center;
      padding-left: 0;
      padding-right: 0;
      }
    .contain, .wp-block-group__inner-container {
      max-width: 580px;
      }
    }
  @media only screen and (min-width:800px) {
    .contain, .wp-block-group__inner-container {
      max-width: 720px;
      }
    }
  @media only screen and (min-width:1000px) {
    .contain, .wp-block-group__inner-container {
      max-width: 920px;
      }
    }
  @media only screen and (min-width:1200px) {
    .contain, .wp-block-group__inner-container {
      max-width: 1080px;
      }
    }
.contain .contain, .wp-block-group__inner-container .contain, .contain .wp-block-group__inner-container {
  max-width: none;
  }



/*! Variations (layout)
--------------------------------------------- */
:root {
  /* Overlap values */
  --fimg-width: 12rem;
  --main-title-size: 4rem;
  --main-title-padding-top: 0.5rem;
  --available-line-height: 0rem;
  --available-padding-top: 0rem;
  --section-padding-top: 3rem;
  --section-padding-bottom: 4rem;
  
  /* Do not use variable - use value below when setting margin-bottom for overlapping img */
  --overlap-total-push: calc( ( var(--overlap-add) + var(--bottom-padding-to-cross) + var(--top-padding-to-cross) ) * -1);
  /* Do not use variable - use value to calc height of lower part of overhang */
  --lower-overhang: calc( var(--overlap-add) + var(--top-padding-to-cross) );
  }

.about {
  --fimg-height: var(--fimg-width);
  }
.book {
  --fimg-height: calc( var(--fimg-width) * 1.5 );
  --available-line-height: 1.5rem;
  --available-padding-top: 0.5rem;
  --main-title-size: 4rem;
  }

@media (min-width:400px) {
 :root {
    /* Overlap values */
    --fimg-width: 15rem;
    --main-title-size: 6rem;
    }
 .book {
    /* Overlap values */
    --main-title-size: 6rem;
    }
  }
@media (min-width:640px) {
 :root {
    /* Overlap values */
    --fimg-width: 15rem;
    --main-title-size: 6rem;
    --main-title-padding-top: 1rem;
    --section-padding-top: 4rem;
    --section-padding-bottom: 5rem;
    }
 .book {
    /* Overlap values */
    --main-title-size: 7.5rem;
    }
  body.book, .book.featured, body.about {
    --fimg-width: 20rem;
    }
  }
@media (min-width:800px) {
 :root {
    /* Overlap values */
    --fimg-width: 15rem;
    --main-title-size: 7rem;
    }
 .book {
    /* Overlap values */
    --main-title-size: 7rem;
    }
  body.book, .book.featured, body.about {
    --fimg-width: 26rem;
    }
  }
@media (min-width:1000px) {
 :root {
    /* Overlap values */
    --fimg-width: 16rem;
    --main-title-size: 8rem;
    --section-padding-top: 7rem;
    --section-padding-bottom: 8rem;
    }
 .book {
    /* Overlap values */
    --main-title-size: 9rem;
    }
  body.book, .book.featured, body.about {
    --fimg-width: 32rem;
    }
  }
  
  
.img-over .page-hdr {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: var(--column-gap);
  padding-top: var(--pghdr-padding-top);
  }
@media only screen and (min-width:250px) {
  .img-over .page-hdr .fimg {
    /* img height - (h1 line height x 2 lines) */
    margin-bottom: calc( ( var(--fimg-height) - ( var(--main-title-padding-top) ) - ( var(--main-title-size) * 0.9 * 2 ) - ( var(--available-line-height) ) - ( var(--available-padding-top) ) ) * -1 );
    }
  }
.img-over .branding h1 {
  text-align: left;
  }
.img-over .overbot {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: var(--column-gap);
  row-gap: 1.6rem;
  }
.img-over .overbot .os {
  --os-min-height: calc( var(--fimg-height) - ( var(--main-title-size) * 0.9 * 2 ) - var(--main-title-padding-top) - var(--branding-padding-bottom) - var(--content-padding-top) - ( var(--available-line-height) ) - ( var(--available-padding-top) ) );
  min-height: var(--os-min-height);
  /* remove background & relative positioning */
  /*
  background: green;
  opacity: 0.5;
  position: relative;
  z-index: 10;
  */
  /* remove background & relative positioning */
  }
  body.book.img-over .overbot .os {
    min-height: calc( var(--os-min-height) - var(--cover-shift) );
    }

  @media only screen and (min-width:430px) {
    .img-over .overbot {
      row-gap: 2rem;
      }
    }
  @media only screen and (min-width:800px) {
    .img-over .page-hdr .fimg {
      /* img height - (h1 line height) */
      margin-bottom: calc( ( var(--fimg-height) - ( var(--main-title-padding-top) ) - ( var(--main-title-size) * 0.9 ) - ( var(--available-line-height) ) - ( var(--available-padding-top) ) ) * -1 );
      }
    .img-over .overbot {
      grid-template-columns: auto 1fr;
      }
    .img-over .overbot .os {
      width: var(--fimg-width);
      --os-min-height: calc( var(--fimg-height) - ( var(--main-title-size) * 0.9 ) - var(--main-title-padding-top) - var(--branding-padding-bottom) - var(--content-padding-top) - ( var(--available-line-height) ) - ( var(--available-padding-top) ) );
      /* Seeing if we can correctly calculate height of bottom overhang */
      min-height: var(--os-min-height);
      /* remove background & relative positioning */
      /*
      background: green;
      opacity: 0.5;
      position: relative;
      z-index: 10;
      */
      /* remove background & relative positioning */
      }
    body.book.img-over .overbot .os {
      min-height: calc( var(--os-min-height) - var(--cover-shift) );
      margin-bottom: 2rem;
      }
    }




/*!-----------------------------------------------------------
#
### BOOKS
#
==============================================================
==============================================================*/

/*!Layout
--------------------------------------------- */
body .book {
  display: grid;
  position: relative;
  z-index: 5;
  grid-template-columns: calc( var(--fimg-width) - var(--cover-shift) ) 1fr;
  grid-template-rows: auto 1fr;
  justify-items: start;
  align-items: end;
  column-gap: var(--column-gap);
  row-gap: 1rem;
  text-align: left;
  }
body .book, body.book .info {
  font-size: 2rem;
  }
.book .naming {
  }
.book .info {
  display: grid;
  grid-gap: 1rem;
  grid-column: 1 / span 2;
  }
.book.img-over .info {
  grid-column: 1 / span 2;
  }
.book-list {
  background-color: var(--c-eee);
  padding-top: var(--section-padding-top);
  padding-bottom: 0;
  }
.book-list > * > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: var(--column-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  }
.book-list li.book {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 46%;
  margin: 0;
  padding: 0;
  margin-bottom: var(--section-padding-bottom);
  }
  @media (min-width:640px) {
    body .book {
      align-items: start;
      row-gap: 0.5rem;
      }
    .book .fimg {
      grid-row: 1 / span 2;
      grid-column: 1;
      max-width: none;
      }
    .book .info {
      grid-column: 2;
      }
    .book .naming {
      padding-bottom: 0;
      }
    }
  @media (min-width:800px) {
    body .book {
      column-gap: 3rem;
      row-gap: 0.6rem;
      }
    body .book.featured {
      column-gap: var(--column-gap);
      }
    .book.img-over .info {
      grid-column: 2;
      }
    }
  @media (min-width:1000px) {
    body .book {
      column-gap: 3rem;
      row-gap: 1rem;
      }
    body .book.featured {
      column-gap: var(--column-gap);
      }
    }


/*!Book header & title
--------------------------------------------- */
.book {
  --cover-shift: calc( var(--fimg-width) * 0.09375 );
  }
.book .branding, .books .branding {
  background-color: var(--c-override); /* override this */
  background-size: contain;
  background-position: right center;
  background-image: linear-gradient(90deg, #78726c, #807972, #888179, #908880, #999087); /* override this */
  color: #fff;
  }
.books .branding {
  background-color: var(--c-999);
  background-image: url('/img/bg_books1.jpg');
  background-size: cover;
  background-position: center top;
  background-blend-mode: multiply;
  }

.book header.site .logo::before, .books header.site .logo::before {
  filter: invert(100%);
  }

.book header.site .title, .books header.site .title {
  color: #fff;
  font-weight: 500;
  }
.book .title {
  margin: 0.4rem 0 0;
  font-family: var(--font-head);
  font-size: 5rem;
  font-weight: 500;
  line-height: 0.9;
  text-align: left;
  text-transform: uppercase;
  }
.book .title a {
  color: var(--c-333);
  text-underline-offset: auto;
  }
.book .title a:hover {
  color: var(--c-link);
  }
.book .title a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  @media (min-width:1000px) { 
    .book.featured .title {
      font-size: 7rem;
      }
    }

/*!Cover
--------------------------------------------- */
.book .fimg {
  width: var(--fimg-width);
  min-width: 9rem;
  margin-left: calc( var(--cover-shift) * -1 );
  margin-bottom: calc( var(--cover-shift) * -1 )
  }
body.book .fimg, .book.featured .fimg {
  width: var(--fimg-width);
  }


/*!Available
--------------------------------------------- */
.book .available {
  display: flex;
  width: auto;
  align-items: center;
  justify-content: flex-start;
  column-gap: 0.5rem;
  padding-top: var(--available-padding-top);
  font-size: 1rem;
  line-height: var(--available-line-height);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--c-aaa)
  }
.book header .available {
  mix-blend-mode: overlay;
  color: #fff;
  }
body .book .available {
  margin-bottom: 0.8rem;
  }
.book .available.soon::before {
  content: '';
  background-image: url("/img/_icons/alarm-clock-solid.svg");
  background-repeat: no-repeat;
  background-size: contain; /* 512 x 512 */
  aspect-ratio: 1 / 1;
  width: 12px;
  height: auto;
  opacity: 0.5;
  filter: invert(45%) sepia(39%) saturate(951%) hue-rotate(261deg) brightness(87%) contrast(83%);
  }
.book header .available.soon::before {
  filter: invert(100%);
  opacity: 0.8;
  }
  @media (min-width: 640px) { .book .available { font-size: 1.2rem; } }
  @media (min-width: 1000px) { 
    body .book .available { margin-bottom: 1rem; }
    }


/*!OneSentence & Summary
--------------------------------------------- */
.book .one-sentence {
  margin-bottom: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1.05;
  color: var(--c-override);
  }
.book .summary {
  margin-bottom: 0.5rem;
  font-style: italic;
  font-size: 1.8rem;
  color: var(--c-777);
  }
.book .more-link {
  position: relative;
  }
.book .more-link::after {
  content: '\2009\2192';
  font-style: normal;
  font-size: 0.9em;
  }
  @media (min-width: 640px) { 
    body.book .one-sentence, .book.featured .one-sentence { font-size: 3.8rem; }
    }
  @media (min-width: 800px) { 
    body.book .summary, .book.featured .summary { font-size: 2.1rem; }
    }
  @media (min-width:1000px) { 
    body.book .one-sentence, .book.featured .one-sentence { font-size: 4.4rem; }
    body.book .summary, .book.featured .summary { font-size: 2.4rem; }
    }


/*!Overlap content (book page only)
--------------------------------------------- */
.book .overbot {
  /* overlap bottom content */
  padding-bottom: 2rem;
  }
.book .os {
  /* overlap spacer */
  margin-left: calc( var(--cover-shift) * -1 );
  }
.book .ac {
  /* adaptive content */
  display: grid;
  row-gap: 1rem;
  margin-bottom: 1.5rem;
  }


/*!Remainder (book page only)
--------------------------------------------- */
.book .remainder {
  display: grid;
  row-gap: 3rem;
  align-items: start;
  column-gap: var(--column-gap);
  }
.book .remainder h3 {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-999);
  letter-spacing: 0.05em;
  }
  @media (min-width:800px) {
    .book .remainder {
      grid-template-columns: 2.4fr 1fr;
      grid-template-rows: auto 1fr;
      }
    .book .r-action {
      grid-column: 2;
      grid-row: 1;
      }
    .book .r-primary {
      grid-column: 1;
      grid-row: 1 / span 2;
      }
    .book .r-secondary {
      grid-column: 2;
      grid-row: 2;
      }
    .book .remainder h3 {
      margin-bottom: 1rem;
      font-size: 3rem;
      }
    }


/*!Sources (shop)
--------------------------------------------- */
.book .sources {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1.6rem;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
  }
.book .sources li {
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
  display: grid;
  row-gap: 0.5rem;
  }
.book .sources .edition {
  font-size: 1.2rem;
  line-height: 1.5;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--c-aaa);
  }
body .book .edition, section.book .sources .edition {
  display: none;
  }
.book .sources a {
  background: rgba(255, 255, 255, 0.5);
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 1rem 1.5rem;
  text-indent: -900vw;
  font-size: 0.1px;
  border: 0.5px solid var(--c-ddd);
  border-radius: 0.5rem;
  }
.book .sources a:hover {
  background: rgba( 255, 255, 255, 0.8);
  }
.book .sources a::before {
  content: '';
  display: block;
  height: 2.4rem;
  aspect-ratio: 2.656 / 1;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  filter: grayscale(60%);
  }
.book .sources a:hover::before {
  opacity: 1;
  filter: grayscale(0);
  }
.book .sources .amazon a::before {
  background-image: url('/img/_logos/logo_amazon.svg');
  }
.book .sources .bn a::before {
  background-image: url('/img/_logos/logo_barnesandnoble.svg');
  }
  @media (min-width:1000px) {
    .book.featured .sources a::before {
      height: 3.0rem;
      }
    }

/*!PubData
--------------------------------------------- */
.book .data {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.8;
  }
.book .data .isbn {
  text-indent: 1em;
  }
.book .data strong {
  font-size: 0.78em;
  text-transform: uppercase;
  color: var(--c-999);
  }
.book .data strong::after {
  content: ' \00B7';
  }


/*!Featured (book)
--------------------------------------------- */
section.featured {
  background: linear-gradient(to bottom, #ffffff, #faf9f9, #f6f4f3, #f1efed, #edeae7);
  padding-top: var(--section-padding-top);
  padding-bottom: 0;
  position: relative;
  }
  @media (min-width:1000px) {
    .illus::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      background-image: url("/img/img-emy-cropped.png");
      background-repeat: no-repeat;
      background-position: top 40px right;
      background-size: 214px 774px;
      opacity: 0.1;
      }
    }


/*!Content Warning
--------------------------------------------- */
.cw {
  background: rgba(219,214,207,0.5);
  margin: 1.8rem 0 0;
  padding: 1.8rem 2rem 2rem;
  border-radius: 1rem;
  font-size: 0.9em;
  color: var(--c-555);
  text-align: center;
  }
.cw strong {
  display: block;
  font-weight: bold;
  font-size: 0.85em;
  line-height: 1.9;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  }
.cw .spice {
  display: block;
  line-height: 2.4rem;
  }
.spice > * {
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-position: center;
  display: inline-block;
  width: 15px;
  height: 24px;
  margin-left: -1px;
  font-weight: normal;
  font-style: normal;
  text-indent: -200vw;
  }
.spice b {
  background-image: url("/img/_icons/pepper-color.svg");
  }
.spice i {
  background-image: url("/img/_icons/pepper-grayscale.svg");
  }




/*!-----------------------------------------------------------
#
### MISC
#
==============================================================
==============================================================*/

/*!Social list
--------------------------------------------- */
.social {
  display: flex;
  column-gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  }
.social li {
  display: block;
  maring: 0;
  padding: 0;
  }
.social a, .social a:hover, .social a:active {
  text-decoration: none;
  }
.social a::before {
  display: block;
  content: '';
  padding: 0 .05em;
  opacity:0.7;
  background-size: 21px 24px;
  background-position: center;
  background-repeat: no-repeat;
  width: 21px;
  height: 24px;
  mix-blend-mode: overlay;
  }
.social a:hover::before {
  mix-blend-mode: normal;
  }
.link-instagram a::before { /*! "fab fa-instagram" */ background-image: url("/img/_icons/fab-instagram.svg"); }
.link-goodreads a::before { /*! "fab fa-goodreads-g" */ background-image: url("/img/_icons/fab-goodreads.svg"); width:18; background-size: 18px 24px; }
.link-threads a::before { /*! "fab fa-threads" */ background-image: url("/img/_icons/fab-threads.svg"); }
.link-amazon a::before { /*! "fab fa-amazon" */ background-image: url("/img/_icons/fab-amazon.svg"); }



/*!Accessibility
--------------------------------------------- */
.screen-reader-text, .sr-only, .screen-reader-response {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  }
.screen-reader-text:focus, .sr-only:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: .875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  }
/*!Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
  }
.jumplink {
  margin-top: 1.2em;
  margin-bottom: 1.5em;
  font-size: 1.6rem;
  }
.jumplink a::before {
  content: '\f33d';
  margin-right: 0.25em;
  font-family: var(--font-fa);
  font-weight: 300;
  font-size: .8em;
  }
  @media only screen and (min-width:640px) {
    .jumplink {
      display: none;
      }
    }


/*!General
--------------------------------------------- */
.fimg img {
  display: block;
  }
main.content > .contain {
  padding-top: var(--content-padding-top);
  padding-bottom: 4rem;
  }
main.generic > .contain {
  max-width: 80rem;
  }
main.content > .contain:has(> .alignfull) {
  padding-top: 0;
  padding-bottom: 0;
  }
.content .contain:has(> .alignfull) {
  max-width: none;
  }
  @media only screen and (min-width:640px) {
    main.content > .contain {
      padding-bottom: 6rem;
      }
    main.content > .contain:has(> .alignfull) {
      padding-top: 0;
      padding-bottom: 0;
      }
    }

.redacted {
  color: black;
  background-color: black;
  transform: rotate(.8deg) skewx(-12deg);
  box-shadow:3px 0 2px #444;
  border: 1px dotted #555;
  border-width: 0 0 1px;
  pointer-events: none;
  cursor: default;
  }

/* Add a few more selectors with slightly varying styles */
.redacted:first-child {
  -moz-transform: rotate(-.8deg);
  }
.redacted:first-child + .redacted {
  -moz-transform: rotate(3deg);
  }

/* "Redacted" effect */
.redacted::selection, p:has(.redacted)::selection, div:has(> .redacted)::selection, .redacted strong::selection {
  background: transparent;
  cursor: default;
  }