/* Variables
======================================== */

:root {
  --font-body: 'hoss-round', sans-serif;
  --font-heading: var(--font-body);
}

.light {
  --bg: #f5ebec;
	--bg-alt: #f0e2e6;
	--bg-alt-2: #f0ebe9;
	--bg-dark: #5a4f66;
	--bg-light: #111e23;
	--bg-highlight: hsla(315.8, 22.9%, 83.7%, 0.8);

  --bg-code: #ebdbe2;
  --bg-code-dark: #eedae1;
  --text-code: var(--text);
  
  --bg-warning: var(--bg-code);
  --border-warning: var(--complement);

  --text: #493b32;
  --text-reverse: #ecd6d6;
  --text-sub: #6a4951;

  --accent: #981a55;
  --complement: #86306ccf;
  --tertiary: #d55446;
  --highlight: #efce8e;

  --link: var(--accent);

  --border: #c8a7bb;
  --border-light: #e2ced7;

  --scrollbar-bg: #d4c1ca;
  --scrollbar-handle: #c4aab6;
  --scrollbar-handle-hover: #dfc8d3;
  --scrollbar-handle-active: #a58a96;

  --text-alarm: #bd0b2d;
}
.dark {
  --bg: #0b1715;
  --bg-alt: #02110e;
  --bg-light: #111e23;
  --bg-highlight: #1f444d;

  --bg-code: var(--bg-light);
  --bg-code-light: #1a2e36;
  
  --bg-warning: var(--bg-code);
  --border-warning: var(--complement);

  --text: #dfe8db;
  --text-reverse: #111111;
  --text-sub: #9ac2b9;

  --pink: #e565b3;
  --mint: #67E0B8;

  --accent: var(--pink);
  --complement: var(--mint);

  --border: #294e49;

  --scrollbar-handle: #1d323b;
  --scrollbar-bg: #02110e;
  --scrollbar-handle-hover: #525e87;
  --scrollbar-handle-active: #95a4da;
}

.cozy {

  --bg-light: #372727;
  --bg-dark: #1a1311;
  --bg: #271c1a;
  --bg-highlight: #bd7d2a;

  --yellow: #d09c3d;
  --pale-yellow: #f1b06b;

  --orange: #dd6a32;
  --light-orange: #e27352;
  --pale-orange: #d8845c;

  --red: #ca2727;
  --pale-red: #d75c5c;

  --pink: #ef7373;
  --pale-pink: #c98686;
  --pale-pink-2: #925a5a;

  --text: #c6b0a2;
  --text-faint: #bd896f;

  --border: #673f39;
  --border-warning: var(--pale-pink);
  --highlight: #b3597759;

  --accent: var(--yellow);
  --complement: var(--pale-orange);

  --link: var(--pale-yellow);
  --link-hover: var(--pale-orange);
}

.orange {
  --red: #c43d3d;
  --light-red: #e89393;
  --orange: #ff711f;
  /* --pale-orange: #ffac54; */
  --pale-orange: #fecb92;
  --dark-orange: #d84f00;
  --yellow: #ffd559;


  --bg: #fff1e2;
  --bg-light: #fffcf8;
  --bg-dark: #fde4d1;
  --text: #3a2515;
  --text-faint: #864322;

  --highlight: var(--yellow);
  --link: var(--text);
  --border: var(--pale-orange);
}


@media screen and (min-width: 700px) {
  :root {
    --width-content: 75ch;
    --w-container: 1400px;
    --w-container-lg: 1400px;

    --border-radius: 24px;
    --border-radius-inner: 16px;


    --wrap-container: 1fr minmax(auto, var(--w-container)) 1fr;
    --wrap-container-margins: 1fr minmax(0, 20ch) minmax(30ch, 55ch) minmax(10ch, 20ch) 1fr;

    --sp-sm: clamp(1rem, 3vw, 2rem);
    --sp: clamp(2rem, 6vw, 4rem);
    --sp-lg: clamp(4rem, 8vw, 6rem);
    --sp-xl: clamp(6rem, 10vw, 8rem);
    --sp-md: 5rem;
    --sp-xs: 1.25rem;  
    
    --sp-gap: 1.5em;
    --sp-edge: 2rem;
    --sp-hairline: 5px;

    --font-size: 20px;
    --font-xs: .75em;
    --font-sm: .85em;
    --font-md: 20px;
    --font-lg: 4em;

    --page-title: normal 200 var(--font-size-lg)/1 var(--font-title);

    --padding-sm: clamp(1rem, 2vw, 2rem);
    --padding-md: clamp(3rem, 6vw, 5rem);
  }
}
@media screen and (min-width: 700px) and (max-width: 1200px) {
  :root {
    --wrap-container-margins: 1fr minmax(35ch, 50ch) minmax(10ch, 20ch) 1fr;
  }
}
@media screen and (max-width: 700px) {
  :root {
    --w-container: 1100px;

    --wrap-container: 1fr minmax(auto, var(--w-container)) 1fr;
    --wrap-container-margins: minmax(var(--sp-edge), 1fr) minmax(auto, 50ch) minmax(var(--sp-edge), 1fr);


    --border-radius: 16px;
    --border-radius-inner: 8px;
    --sp-gap: 1em;

    --sp: 2rem;
    --sp-xl: 4rem;
    --sp-lg: 3rem;
    --sp-md: 2.5rem;
    /* --sp-md: 12vw; */
    --sp-sm: 1.5rem;
    --sp-xs: .75rem;
    /* --sp-edge: 1.25rem; */
    --sp-edge: 5vw;
    --sp-hairline: 4px;

    --padding-sm: clamp(1rem, 3vw, 3rem);
    --padding-md: 6vw;
    
    --font-size: 100%;
    --font-xs: .85em;
    --font-sm: .9em;
    --font-md: 1.75em;
    --font-lg: 2.5em;

    --page-title: normal 250 var(--font-size-lg)/1 var(--font-title);
  }
}


body {
  background: var(--bg);
  
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: 1.5;

  box-sizing: border-box;

  position: relative;
  margin: 0;
}

* {
  position: relative;
}
::selection {
  background: var(--highlight);
  color: var(--text);
}
a {
  color: var(--link);
  text-decoration-color: var(--pale-orange);
  text-decoration-thickness: 3px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
  transition: .2s ease-in-out;
  border-radius: 4px;
  padding: .15em 0 0;
}
a:hover {
  background: var(--yellow);
}
img {
  max-width: 100%;
}

.spoiler {
  background: var(--text);
  transition: .2s ease-in;
}
.spoiler:hover {
  background: none;
}



/* Nav 
================================== */

nav {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp) var(--sp-edge) 0;

  display: flex;
  gap: 1em;
}
nav a {
  color: var(--text-faint);
  transition: .2s ease-in-out;
}
nav a:hover {
  color: var(--pale-yellow);
}

.books-wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 1100px) 1fr;
  grid-column-gap: var(--sp-edge);
}



.books__icon {
  grid-column: 2 / 3;
  width: 2em;
  place-self: center;
}



/* Header 
================================== */

.page-header {
  grid-column: 2 / 3;
  padding: var(--sp-lg) 0 0;
}
.page-header > p { 
  font-family: var(--font-heading);
  font-size: clamp(1.5em, 6vw, 2.25em);
  font-weight: bold;
  line-height: 1.1;
  margin: 0;
}
.page__title {
  color: var(--dark-orange);
  font-size: 1.5em;
  font-weight: bold;
  letter-spacing: .25em;
  text-transform: uppercase;

  margin-block: 0;
}
/* .page__title::before {
  content: '☙—';
}
*/
.page__title::after {
  /* content: '—❧'; */
} 




main {
  padding-bottom: var(--sp-lg);
}

/* Filters
================================== */

#reading {
  grid-column: 2 / 3;
  width: 100%;
}
.books-controls {
  grid-column: 2 / 3;
  margin-bottom: 1em;
  width: 100%;

  font-size: var(--font-xs);
}

.books-controls__heading {
  color: var(--text-faint);
  font-variant: all-small-caps;
  font-weight: bold;
  letter-spacing: .1em;

  margin: 0 0 .5em;
}
button.pill {
  background: var(--bg-dark);
  border-radius: 8px;
  border: none;
  box-sizing: border-box;
  margin: 0 .1em .5em 0;
  outline: none;
  padding: .5em .5em .3em;

  color: var(--pale-yellow);
  font-family: var(--font-body);
  font-size: 1em;
  line-height: 1;

  cursor: pointer;
  transition: .2s ease-in-out;
}
button.pill:hover {
  background: var(--pale-orange);
}

button.pill--active {
  background: var(--yellow);
}
button.pill--active:hover {
  background: var(--yellow);
}

button.pill--outline {
  /* border: 1px solid var(--bg-light); */
  background: none;
}
button.pill--outline:hover {
  background: var(--bg-light);
}



/* Books
================================== */

.books {
  grid-column: 2 / 3;
}


.books {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: .5em;
}
.books h2 {
  grid-column: 1 / -1;
  margin-top: 2em;
  margin-bottom: 0;
  font-size: 1em;
}


.book__cover.wip {
  opacity: .6;
}


.book__cover img {
  border-radius: 4px;
}


.page-footer {
  font-size: var(--font-sm);
  padding: var(--sp-lg) var(--sp-edge);
  text-align: center;
}
.page-footer ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
}
.page-footer li {
  margin: 0 .5em;
}