:root {
    --blue: #0A4FD4;
    --white: #fff;
    --black: #1D1D1B;
}

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

html {font-size: clamp(0px, 0.88vw, 15px); scroll-behavior: smooth; scroll-padding-top: 7.5rem;}
body {font-family: 'Inter'; font-size: 1.2rem; line-height: 1.7; font-weight: 400; color: var(--black);}
h2 {font-size: 2.4rem;}
h3 {font-size: 1.2rem; font-weight: 700;}
section:not(.simple) h2, p.large, h1, .footer h2, .header h2 {    
    font-family: "IBM Plex Serif";
    font-size: 3.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--blue);
}
h1 {line-height: 1.2;}
h1.small {font-size: 2rem!important;}
.header h2 {margin-bottom: 2.33rem;}
section.simple h1, section:not(.simple) h2, h1 {margin-bottom: 4rem;}
section.simple h1:not(.small) + p, h1:not(.small) + p, section:not(.simple) h2 + p {font-size: 2.1rem; font-family: "IBM Plex Serif"; line-height: 1.4;}
h1:not(.small) + p, body.home .content h2 + p, p.large {margin-bottom: 5rem;}
p {break-inside: avoid-column;}
p + p, ul + p, ol + p {margin-top: 1.3rem;}
p + h3 {margin-top: 1.7em;}
a {text-underline-offset: 0.25em; text-decoration-thickness: 0.1rem; color: var(--black); text-decoration-color: var(--blue); cursor: pointer;}
a:hover {color: var(--blue);}
.container {padding-inline: 2rem; width: 100%; max-width: 110rem; margin-inline: auto;}
.container.small {max-width: 93rem;}
.container.smaller {max-width: 73rem;}
section.simple h2 {font-size: 1.2rem; margin-top: 3rem;}
section.simple h2:first-child {margin-top: 0;}
body:not(.home) .content ul, body:not(.home) .content ol {margin-left: 2.25rem;}
body:not(.home) .content ul, body:not(.home) .content ol {margin-top: 1.3rem;}
section.simple h2 + *, .content li ol, .content li ul {margin-top: 0!important;}
img {max-width: 100%;}


.button {
    font-size: 2.133rem;
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    color: var(--black);
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 0.1rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    margin-top: 1rem;
    white-space: wrap;
}
.button:hover {color: var(--blue);}
.button.small {font-size: 1.66rem;}


/* HEADER */

.header {position: sticky; top: 0; width: 100%; border-bottom: 0.1333rem solid var(--blue); display: flex; flex-direction: column; z-index: 3;}
body.menuopen .header {min-height: 100vh;}
.header a {color: white; text-decoration: none;}
.header nav a {display: block;}
.header ul {font-family: "IBM Plex Serif";}
.header .logo img {width: clamp(0rem, calc(80vw - 11rem), 20rem); display: block;}

.header .menutoggle img {width: 2.26rem;}
.header .menutoggle img:nth-child(1) {display: block!important;}
.header .menutoggle img:nth-child(2) {display: none!important;}
body.menuopen .header .menutoggle img:nth-child(1) {display: none!important;}
body.menuopen .header .menutoggle img:nth-child(2) {display: block!important;}
body.menuopen .header > div:nth-child(2) {display: block;}
body.menuopen .content, body.menuopen .footer, body.menuopen .afterfooter {display: none;}

.header > div:nth-child(1) {background: white; height: 7.4rem;}
.header > div:nth-child(1) .container {display: flex; align-items: center; justify-content: space-between; height: 100%;}
.header > div:nth-child(1) .container > div {display: flex; align-items: center; gap: 2rem;}
.header > div:nth-child(1) .container > div a,
.header > div:nth-child(1) .container > div a img {display: block;}
.header a.cart img {width: 1.7rem;}
.header .cart {position: relative;}
.header .cart .notification {
    display: none;
    position: absolute;
    background: var(--blue);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 100%;
    top: 0;
    right: 0;
    margin-top: -0.75rem;
    margin-right: -0.75rem;
}


.header > div:nth-child(2) {background: var(--blue) url(/p/img/icon_white.svg) calc(50% + 30rem) 60% / auto 130% no-repeat; display: none; color: white; flex-grow: 1;}
.header > div:nth-child(2) .container {display: flex; flex-direction: column; min-height: calc(100vh - 7.4rem);}
.header > div:nth-child(2) .container > div {flex-grow: 1;}
.header > div:nth-child(2) h2 {color: white;}
.header > div:nth-child(2) nav ul {font-size: 3.2rem; margin: 0; padding-block: 3.5rem 4rem; border-bottom: 1px solid white; margin-bottom: 2.8rem;}
.header > div:nth-child(2) nav ul li {list-style: none;}
.header > div:nth-child(2) nav ul li a {padding-block: 0.5rem;}
.header > div:nth-child(2) .container > ul {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0rem 3rem; font-size: 0.933rem; margin-block: 3.5rem 0;}
.header > div:nth-child(2) .container > ul li {list-style: none;}
.header > div:nth-child(2) .container > ul li a {padding-block: 1.333rem; display: block;}

.header select {
    border: 0; 
    border-radius: 0; 
    font-family: 'Inter'; 
    font-size: 1.07rem; 
    line-height: 1.7; 
    background: transparent url(/p/img/chevrondown.svg) right center / 0.9rem auto no-repeat; 
    padding: 0 1rem 0 0;
}
select {-webkit-appearance: none; -moz-appearance: none; color: var(--black);}
select::-ms-expand {display: none;}

@media only screen and (max-width: 60rem) {
    .header > div:nth-child(2) .container > ul {justify-content: flex-start; margin-bottom: 1rem; margin-top: 6rem;}
    .header > div:nth-child(2) .container > ul li a {padding: 0.5rem 0;}
}

@media only screen and (max-width: 25rem) {
    .header > div:nth-child(1) {
        height: 6.4rem;
      }
}


/* CONTENT */

.content section {padding-block: 5.6rem 8rem;}
.content section:nth-child(even) {background: #FAF7F5;}
.content .twocolumns {column-width: 35rem; column-gap: 4rem;}

section#featured-books .container,
section#uitgelichte-boeken .container {position: relative;}
section#featured-books h2 + ul,
section#uitgelichte-boeken h2 + ul {position: absolute; right: 2rem; display: flex; top: 1rem; gap: 4rem;}
section#featured-books h2 + ul li,
section#uitgelichte-boeken h2 + ul li {list-style: none;}
section#featured-books h2 + ul li a,
section#uitgelichte-boeken h2 + ul li a {
    font-size: 2.133rem;
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    text-decoration-color: var(--blue);
    text-decoration-thickness: 0.1rem;
}
@media only screen and (max-width: 60rem) {
    section#featured-books h2,
    section#uitgelichte-boeken h2 {margin-top: 9rem;}
    section#featured-books h2 + ul,
    section#uitgelichte-boeken h2 + ul {position: absolute; top: 0; bottom: 2.5rem; gap: 1.25rem; right: auto; left: 2rem; margin-top: -2.5rem; flex-direction: column;} 
    section#featured-books > .container > *:not(h2 + ul),
    section#uitgelichte-boeken > .container > *:not(h2 + ul) {display: none;}
}


/* WRITER */
section.writer {padding-block: 8.5rem 9rem;}
section.writer .container {display: flex; gap: 12rem; align-items: center;}
section.writer .container > div:nth-child(1) {flex: 5;}
section.writer .container > div:nth-child(2) {flex: 4;}
section.writer h1 {color: var(--black); line-height: 1.1; margin-bottom: 2.66rem;}
section.writer .pretitle + img {display: none; margin-block: -1rem 2.66rem;}
section.writer p, section.writer .pretitle {
    font-family: 'Inter'; 
    font-size: 1.2rem; 
    line-height: 1.7;
}
section.writer h1 + p {margin-bottom: 0;}
section.writer h1 + p:last-child {margin-bottom: 0;}
section.writer .pretitle {font-weight: bold; margin-bottom: 2.66rem;}
@media only screen and (max-width: 60rem) {
    section.writer .container > div:nth-child(1) {display: none;}
    section.writer .pretitle + img {display: block;}
}


/* GRID */

.grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); grid-gap: 1.53rem; margin: 0!important;}
.grid li {list-style: none; background: #F2EFED; position: relative;}
.grid li a {display: block; aspect-ratio: 0.75; position: relative; text-decoration: none; height: 100%; width: 100%;}
.grid li a > span.book {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,calc(-50% - 2rem)); 
    display: block; 
    line-height: 0;
    height: 50%;
}
.grid li a > span.book > span.cover {
    overflow: hidden;
    display: block;
    position: relative;
    height: 100%;
}
.grid li a > span.book > span.shadow {
    position: absolute; 
    left: 0;
    top: 0;
    width: 111%;
    height: 115%;
    background: url(/p/img/shadow.png) center center / 100% 100% no-repeat;
    z-index: -1;
    opacity: 0.6;
}
.grid li a > span.book.large {
    height: calc(50% + 2rem);
    top: calc(50% - 1rem);
}
.grid li a > span.book.medium {
    height: calc(50% - 0rem);
    top: calc(50% + 0em);
}
.grid li a > span.book.small {
    height: calc(50% - 2rem);
    top: calc(50% + 1rem);
}
.grid li a > span.book > span.cover::before,.grid li a > span.book > span.cover::after {
    content: "";
    width: 1px;
    position: absolute;
    left: 3%;
    top: 0;
    height: 100%;
    background: black;
    opacity: 0.025;
}
.grid li a > span.book::after {left: calc(3% + 1px); background: white; opacity: 0.1;}
.grid li a > span.book img {width: auto; height: 100%; max-width: none;}
/*.grid li a[href]:hover {background: var(--blue); transition: background 0.2s ease-in-out;}*/
.grid li a > span.title {
    color: var(--black);
    font-weight: 300;
    font-size: 1.07rem;
    display: block;
    padding: 0 2rem 2rem;
    display: flex;
    text-align: center;
    line-height: 1.4;
    min-height: 5.5rem;
    align-items: center;
    justify-content: center;
    width: 100%; 
    bottom: 0; 
    position: absolute;
    text-wrap: balance
}
/*.grid li a:hover span {color: white;}*/
.grid li a.twoimages > img {height: 45%;}
.grid li a.twoimages > span.book:nth-child(1) {transform: translate(-80%,calc(-65% - 2rem)) scale(0.8); z-index: 2;}
.grid li a.twoimages > span.book:nth-child(2) {transform: translate(-20%,calc(-35% - 2rem)) scale(0.8); z-index: 1;}
.grid.small {grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));}
.grid.authors li div {
    position: relative; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-decoration: none; 
    height: 100%; 
    width: 100%;
    padding: 2.66rem; 
    aspect-ratio: 1; 
    font-weight: 300; 
    line-height: 1.3; 
    color: var(--black); 
    display: block;
}
.grid.authors li p {font-size: 1.6rem; font-family: 'Inter';}
.grid.authors li h2 {
    margin: 0 0 1.5rem;
    font-family: "IBM Plex Serif";
    font-size: 2.33rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    color: var(--blue);
    min-height: 6rem;
}
.grid.writers li a img + img {opacity: 0; pointer-events: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; box-shadow: none;}
.grid.writers li a:hover img + img {opacity: 1;}
.grid.books.first4 li {display: none;}
.grid.books.first4 li:nth-child(1), .grid.books li:nth-child(2), .grid.books li:nth-child(3), .grid.books li:nth-child(4) {display: block;}
.grid.writers li a > span.title {display: block;}
.grid.writers li a > img {opacity: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; position: absolute; pointer-events: none;}
.grid.writers li a:hover > img {opacity: 1;}
.grid li a > span.book.hardcover > span.cover {
    border-radius: 0.2rem; 
    border-top-left-radius: 0.4rem 0.2rem; 
    border-bottom-left-radius: 0.4rem 0.2rem; 
}
.grid li a > span.book.hardcover > span.cover::before {
    left: 0;
    width: 6%;
    background: linear-gradient( to right, black 0%, rgba(0,0,0,0.5) 30%, transparent 40%, transparent 47%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.5) 90%, transparent 100%);
    opacity: 0.35;
}
.grid li a > span.book.hardcover > span.cover::after {content: none}
@media only screen and (max-width: 60rem) {
    .grid.authors li h2 {min-height: 0;}
    .grid.authors li div {aspect-ratio: auto; padding-block: 2.66rem 3.66rem;}
}



/* FORMS */
select {
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    border-radius: 0;
}
form {max-width: 35rem;}
form > div {display: flex; flex-direction: column; margin-bottom: 1.25rem;}
form > div:last-child {margin-bottom: 0;}
form > div textarea, form > div input:not([type="submit"],[type="checkbox"],[type="radio"]) {
    border: 0;
    border-bottom: 0.1333rem solid var(--blue);
    padding-block: 0.4rem;
    font-family: 'Inter';
    font-weight: 300;
    font-size: 1.46rem;
    line-height: 1.7;
    width: 100%;
}
form > div select {
    border: 0;
    border-radius: 0;
    font-family: 'Inter';
    font-size: 1.46rem;
    line-height: 1.7;
    background: #FAF7F5 url(/p/img/chevrondown.svg) right center / 0.9rem auto no-repeat;
    padding-block: 0.4rem;
    padding-inline: 1rem;
    font-weight: 300;
}
form > div label {
    font-family: 'Inter';
    font-weight: 300;
    line-height: 1.7;
}
form > div textarea {resize: vertical; min-height: 10.5rem;}
form > div.placeholderlabel textarea {resize: none;}
form > div.placeholderlabel {position: relative;}
form > div.placeholderlabel label {position: absolute; top: 0; opacity: 0.5; padding-block: 0.4rem; display: none; pointer-events: none;}
form > div.placeholderlabel textarea:placeholder-shown + label,
form > div.placeholderlabel input:placeholder-shown + label {display: block;}
form > div.placeholderlabel ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent;
}
form > div.placeholderlabel :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent;
   opacity:  1;
}
form > div.placeholderlabel ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent;
   opacity:  1;
}
form > div.placeholderlabel :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent;
}
form > div.placeholderlabel ::-ms-input-placeholder { /* Microsoft Edge */
   color: transparent;
}
form > div.placeholderlabel ::placeholder { /* Most modern browsers support this now. */
   color: transparent;
}
input[type="search"] {background: url(/p/img/search.svg) right center / 2rem auto no-repeat!important;}
form > div fieldset input[type="search"] {padding-block: 0.2rem; background-color: transparent;}
form > div fieldset input[type="search"]:focus-visible, input:not([type="submit"]):focus-visible {background-color: #F2EFED!important; border-color: transparent;}

form > div.placeholderlabel textarea + label,
form > div.placeholderlabel input + label,
form:not(.boxes) > div textarea,
form:not(.boxes) > div input:not([type="submit"]) {transition: all 0.1s ease-in-out; left: 0;}
form:not(.boxes) > div textarea:focus-visible,
form:not(.boxes) > div input:not([type="submit"]):focus-visible {padding-inline: 0.85rem; background-position: calc(100% - 0.5rem) center !important;}
form > div.placeholderlabel textarea:focus + label,
form > div.placeholderlabel input:not([type="submit"]):focus-visible + label {left: 0.85rem;}



#header form > div label,
#footer form > div label {font-size: 1.06rem;}
#header form > div textarea, 
#footer form > div textarea, 
#header form > div input:not([type="submit"]),
#footer form > div input:not([type="submit"]) {border-color: white; background: transparent; font-size: 1.06rem; color: white;}
#header form > div textarea:focus-visible,
#header form > div input:not([type="submit"]):focus-visible,
#footer form > div textarea:focus-visible,
#footer form > div input:not([type="submit"]):focus-visible {background: white!important; color: var(--black);}
#header form > div input[type="submit"],
#footer form > div input[type="submit"] {
    border: 0; 
    background: transparent url(/p/img/arrowright_white.svg) center center / auto 1.33rem no-repeat;
    color: transparent;
    width: 1.33rem;
    height: 3.13rem;
    position: absolute;
    right: 0;
    bottom: 0;
    transition: right 0.1s ease-in-out;
    padding-inline: 1.66rem;
    margin-inline: -1rem;
}
#header form > div textarea:focus-visible + label + input[type="submit"],
#footer form > div textarea:focus-visible + label + input[type="submit"] {filter: invert(1); right: 0.65rem;}
#header .foot form, #footer .foot form {margin-top: 4rem; max-width: 100%; columns: 2; column-gap: 2rem;}
#header .foot form {margin-top: 4rem;}

.foot {display: flex; gap: 10rem;}
.foot > * {flex: 1;}
.foot > form {flex: 2;}
@media only screen and (max-width: 60rem) {
    .foot {flex-direction: column; margin-bottom: 5rem; gap: 2rem}
    #header .foot form, #footer .foot form {columns: 1; max-width: 40rem;}
}


/* LOGOS */

ul.logos {
    padding-block: 5rem 2.6rem;
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); 
    grid-gap: 3.5rem;
}
ul.logos li {list-style: none;}
ul.logos li a {display: block; text-align: center;}
ul.logos li a img {width: 9.5rem; height: 5rem; display: inline-block; object-fit: contain;}

@media only screen and (max-width: 60rem) {
    ul.logos {padding-block: 2.6rem 0rem;}
}



/* FOOTER */

.footer {background: var(--blue) url(/p/img/icon_white.svg) calc(50% - 34rem) calc(100% + 9.25rem) / auto 85.333rem no-repeat; padding-block: 8rem 4rem;}
.footer h2 {margin-bottom: 4rem; color: white!important;}
.footer {color: white; line-height: 1.7;}
.footer a {color: white; text-decoration: none;}
.afterfooter {background: var(--blue);}
.afterfooter .links {font-size: 0.933rem; padding-block: 1.333rem;}
.afterfooter .links ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 3rem; margin: 0!important;}
.afterfooter .links ul li {list-style: none;}
.afterfooter .links ul li a {color: white; font-family: "IBM Plex Serif"; text-decoration: none; display: block;}

@media only screen and (max-width: 60rem) {
    html {font-size: 12px;}
    section.simple h1 + p, h1 + p, section:not(.simple) h2 + p {font-size: 1.66rem;}
    p.large {font-size: 1.933rem;}
    .afterfooter .links ul {justify-content: flex-start; }
}