:root{--cream:#f3f0e8;--paper:#faf8f2;--ink:#282a24;--olive:#53533c;--olive-dark:#343629;--clay:#9b6f5b;--line:#c8c1b3;--white:#fff;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;--sans:Arial,"Helvetica Neue",sans-serif;--typewriter:"Special Elite","Courier New",Courier,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:400;line-height:1.04}
em{font-weight:400;color:var(--clay)}

.site-header{height:108px;padding:0 clamp(28px,6vw,92px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(55,54,45,.18);background:rgba(243,240,232,.96);position:relative;z-index:20}
.site-header-light{position:absolute;inset:0 0 auto;height:112px;background:linear-gradient(rgba(19,22,16,.48),transparent);border:0;color:var(--white)}
.wordmark{display:flex;flex-direction:column;text-align:center;line-height:1}.wordmark span{font-size:26px;letter-spacing:.18em;text-transform:uppercase}.wordmark small{font:400 10px/1.2 var(--typewriter);letter-spacing:.14em;text-transform:uppercase;margin-top:9px}
.site-header nav{display:flex;align-items:center;gap:clamp(22px,3vw,48px);list-style:none;margin:0;padding:0}.site-header nav li{list-style:none}
.site-header nav a{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;position:relative;padding:10px 0}
.site-header nav a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .25s ease}.site-header nav a:hover:after,.site-header nav a:focus-visible:after{right:0}

.hero{height:min(92vh,920px);min-height:650px;position:relative;background:url('../images/sera-lux-header.png') center center/cover no-repeat;color:var(--white);display:grid;place-items:center;text-align:center;overflow:hidden}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,27,18,.52),rgba(32,29,20,.24) 52%,rgba(21,24,16,.42)),linear-gradient(0deg,rgba(19,20,14,.4),transparent 58%)}
.hero-content{position:relative;z-index:2;width:min(950px,88vw);padding-top:66px;text-shadow:0 2px 25px rgba(0,0,0,.35)}
.hero-content h1{font-size:clamp(48px,6vw,88px);letter-spacing:-.025em;margin:22px 0 36px}.hero-content h1 em{font-style:italic;color:#ece5d9}
.eyebrow{font:400 12px/1.4 var(--typewriter);letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px}
.button{display:inline-flex;align-items:center;justify-content:center;min-width:190px;padding:15px 24px;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;border:1px solid;transition:background .25s,color .25s,transform .25s}.button:hover{transform:translateY(-2px)}
.button-light{border-color:rgba(255,255,255,.8);background:rgba(245,242,233,.94);color:var(--ink);text-shadow:none}.button-light:hover{background:var(--white)}
.button-dark{background:var(--olive-dark);border-color:var(--olive-dark);color:var(--white)}.button-dark:hover{background:transparent;color:var(--olive-dark)}
.scroll-cue{position:absolute;z-index:3;bottom:25px;right:35px;display:flex;gap:10px;align-items:center;font:500 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}.scroll-cue span{width:42px;height:1px;background:currentColor}

.section{padding:clamp(90px,10vw,150px) clamp(26px,7vw,110px)}
.welcome{text-align:center;max-width:1040px;margin:auto}.welcome h2{font-size:clamp(38px,4.6vw,64px);margin:0 0 30px}.lead{max-width:710px;margin:0 auto 32px;color:#5e5e54;font-size:18px}.text-link{display:inline-flex;gap:13px;align-items:center;font:600 10px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:8px}.text-link span{transition:transform .2s}.text-link:hover span{transform:translateX(5px)}

.book-showcase{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-heading{max-width:1250px;margin:0 auto 75px;display:grid;grid-template-columns:1.45fr .7fr;gap:90px;align-items:end}.section-heading h2{font-size:clamp(40px,4.3vw,62px);margin-bottom:0}.section-heading>p{color:#626157;border-left:1px solid var(--line);padding-left:35px;margin:0 0 5px}
.book-grid,.books-page-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.book-card{text-align:center}.book-cover-link{position:relative;display:block;margin:0 auto 33px;width:min(100%,330px);transition:transform .35s ease,filter .35s ease;filter:drop-shadow(0 15px 17px rgba(48,42,30,.17))}.book-cover-link:hover{transform:translateY(-9px);filter:drop-shadow(0 22px 19px rgba(48,42,30,.22))}.book-cover-link img{aspect-ratio:2/3;object-fit:cover;width:100%}.book-number{position:absolute;right:-12px;top:24px;z-index:1;background:var(--cream);border:1px solid var(--line);width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font:600 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}.book-card .eyebrow{color:var(--clay);margin-bottom:9px}.book-card h3{font-size:36px;margin:0 0 12px}.book-line{font-style:italic;color:#666358;max-width:330px;margin:0 auto 20px;min-height:56px}.book-card .text-link{font-size:9px}

.quote-band{background:var(--olive-dark);color:#eee9dc;text-align:center;padding:105px 28px}.quote-band .eyebrow{color:#c8c0ab}.quote-band blockquote{font-size:clamp(37px,4.5vw,65px);line-height:1.17;margin:0 auto 24px;font-weight:400}.quote-band>span{font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.about-teaser{display:grid;grid-template-columns:minmax(320px,1fr) minmax(340px,.85fr);gap:clamp(60px,9vw,140px);align-items:center;max-width:1250px;margin:auto}
.botanical-window{aspect-ratio:4/5;position:relative;background:linear-gradient(rgba(34,38,28,.18),rgba(34,38,28,.38)),url('../images/sera-lux-hero.png') 6% center/auto 100% no-repeat;display:grid;place-items:center}.botanical-window:after{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.55)}.botanical-window span{color:#f2ede2;font-size:clamp(70px,10vw,150px);font-style:italic;line-height:1;z-index:1}
.about-copy h2{font-size:clamp(46px,5vw,70px);margin-bottom:28px}.about-copy>p:not(.eyebrow){color:#5d5c53}.about-copy .button{margin-top:1.65em}

.site-footer{background:#302f26;color:#ded9cb;padding:80px clamp(28px,6vw,92px) 28px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px}.footer-intro h2{font-size:clamp(32px,3.5vw,50px);margin:0}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}.footer-links div{display:flex;flex-direction:column;gap:8px}.footer-links p{font:600 9px/1 var(--sans);text-transform:uppercase;letter-spacing:.22em;color:#a9a391;margin-bottom:8px}.footer-links a,.footer-links span{font-size:15px;color:#ded9cb}.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(222,217,203,.22);padding-top:24px;margin:25px 0 0;font:500 9px/1 var(--sans);text-transform:uppercase;letter-spacing:.16em;color:#989385}
.about-signoff{font-family:var(--typewriter);font-size:15px;letter-spacing:.03em;margin-top:-4px}

.page-intro{text-align:center;padding:110px 28px 105px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.page-intro:after{content:"SL";position:absolute;right:-20px;bottom:-85px;font-size:260px;font-style:italic;color:rgba(86,83,59,.055);line-height:1}.page-intro h1{font-size:clamp(60px,8vw,110px);margin:5px 0 22px}.page-intro>p:last-child{max-width:610px;margin:auto;color:#626157}.books-page-grid{padding-top:105px;padding-bottom:115px}.series-note{text-align:center;padding:80px 28px;background:#ded8ca}.series-note h2{font-size:42px;margin:0 0 18px}.series-note>p:last-child{font:500 11px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0}

.book-detail{min-height:760px;padding:100px clamp(28px,8vw,130px) 120px;display:grid;grid-template-columns:minmax(320px,470px) minmax(420px,590px);gap:clamp(70px,10vw,155px);justify-content:center;align-items:center;background:var(--paper);position:relative;overflow:hidden;isolation:isolate}
.detail-botanical{position:absolute;z-index:-1;right:clamp(-85px,-4vw,-38px);bottom:clamp(-70px,-4vw,-34px);width:clamp(520px,52vw,760px);max-width:none;pointer-events:none;mix-blend-mode:multiply;opacity:.54;transform:rotate(-2deg)}
.detail-art,.detail-copy{position:relative;z-index:1;min-width:0}
.detail-art{position:relative;padding:35px 0 0 35px}.detail-art:before{content:"";position:absolute;inset:0 35px 35px 0;border:1px solid var(--line)}.detail-art img{position:relative;width:100%;filter:drop-shadow(0 18px 20px rgba(42,37,27,.2))}.detail-number{position:absolute;right:-25px;top:12px;z-index:2;writing-mode:vertical-rl;font:600 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase}
.detail-copy h1{font-size:clamp(64px,7vw,102px);margin:3px 0 19px}.detail-tagline{font-size:24px;font-style:italic;color:var(--clay);line-height:1.35}.fine-rule{height:1px;background:var(--line);width:100%;margin:32px 0}.detail-copy>p:not(.eyebrow,.detail-tagline){color:#5d5c53}.detail-copy,.book-description,.book-description p{max-width:100%;overflow-wrap:anywhere;word-break:normal}.buy-block,.coming-soon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:27px 0;margin:35px 0}.buy-block .eyebrow,.coming-soon .eyebrow{margin-bottom:15px}.buy-links{display:flex;gap:10px;flex-wrap:wrap}.buy-links a{padding:12px 17px;background:var(--olive-dark);color:var(--white);font:600 9px/1 var(--sans);text-transform:uppercase;letter-spacing:.13em}.buy-links a:hover{background:var(--clay)}.coming-soon p:last-child{margin:0}

.page-intro-about{background:#e5e0d4}.about-page-content{max-width:1150px;margin:auto;position:relative;isolation:isolate}.about-intro-grid{display:grid;grid-template-columns:.72fr 1fr;gap:clamp(65px,10vw,140px);align-items:center}.over-botanical{position:absolute;z-index:-1;left:clamp(-460px,-32vw,-400px);top:50%;width:clamp(650px,55vw,780px);max-width:none;transform:translateY(-50%) rotate(2deg);clip-path:inset(0 0 0 60%);mix-blend-mode:multiply;opacity:.72;pointer-events:none}.author-mark{aspect-ratio:4/5;background:rgba(52,54,41,.94);color:#ebe5d8;display:grid;place-items:center;position:relative;box-shadow:0 20px 40px rgba(50,46,36,.12)}.author-mark:before,.author-mark:after{content:"";position:absolute;border:1px solid rgba(235,229,216,.45);inset:20px}.author-mark:after{inset:35px}.author-mark span{font-size:180px;font-style:italic;line-height:1}.author-mark small{position:absolute;bottom:60px;font:400 12px/1 var(--typewriter);letter-spacing:.18em;text-transform:uppercase}.about-page-content article h2{font-size:clamp(48px,5vw,68px)}.about-page-content article>p:not(.eyebrow){color:#57564d}.about-page-ending{margin-top:30px}.about-page-ending p{color:#57564d;margin-bottom:0}.about-page-ending .button,.contact-hero>div>.button{margin-top:1.65em}.quote-band-light{background:#cfc8b8;color:var(--ink)}.quote-band-light blockquote{max-width:960px;font-size:clamp(34px,4vw,55px)}

.contact-hero{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.2fr .7fr;gap:clamp(70px,9vw,140px);align-items:center;min-height:650px}.contact-hero h1{font-size:clamp(58px,7vw,96px);margin:8px 0 30px}.contact-hero>div>p:not(.eyebrow){max-width:630px;color:#5d5c53}.contact-hero>div>p a{border-bottom:1px solid var(--clay)}.contact-card{background:#ddd6c8;border:1px solid var(--line);padding:50px}.contact-card>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid #aaa294;padding:20px 0}.contact-card span{font-size:25px}.contact-card small,.contact-card>div>a{font:600 9px/1.4 var(--sans);letter-spacing:.1em;color:#716d61}.contact-card small{text-transform:uppercase;letter-spacing:.15em}.contact-card>div>a{border-bottom:1px solid #aaa294}.contact-note{border-top:1px solid #aaa294;padding-top:22px;margin:0;color:#666156;font-size:14px}

@media(max-width:900px){.site-header{height:auto;min-height:105px;padding:20px 28px;gap:22px}.site-header nav{gap:18px}.section-heading{grid-template-columns:1fr;gap:30px}.section-heading>p{padding:0;border:0;max-width:580px}.book-grid,.books-page-grid{gap:28px}.book-line{font-size:15px}.about-teaser,.about-intro-grid,.contact-hero,.book-detail{grid-template-columns:1fr}.about-teaser{max-width:700px}.botanical-window{max-width:540px;width:100%;margin:auto}.book-detail{gap:70px}.detail-botanical{right:-155px;bottom:-55px;width:600px;opacity:.46}.detail-art{max-width:440px;margin:auto}.detail-copy{max-width:650px;margin:auto}.author-mark{max-width:440px;width:100%;margin:auto}.over-botanical{left:-350px;top:31%;width:700px;opacity:.62}.contact-card{max-width:520px}.site-footer{grid-template-columns:1fr}}
@media(max-width:650px){body{font-size:16px}.site-header,.site-header-light{position:relative;background:var(--cream);color:var(--ink);min-height:0;height:auto;display:block;text-align:center;padding:18px 16px}.site-header-light{position:absolute;background:linear-gradient(rgba(18,21,15,.65),transparent);color:var(--white)}.wordmark{align-items:center}.wordmark span{font-size:20px}.wordmark small{display:none}.site-header nav{justify-content:center;gap:14px;margin-top:15px}.site-header nav a{font-size:8px;letter-spacing:.12em}.hero{min-height:680px;height:92svh;background-position:48% center}.hero-content{padding-top:75px}.hero-content h1{font-size:45px}.scroll-cue{right:18px}.section{padding:80px 22px}.welcome h2 br,.quote-band br,.footer-intro br{display:none}.book-grid,.books-page-grid{grid-template-columns:1fr;gap:75px}.book-card{max-width:380px;margin:auto}.book-line{min-height:0}.section-heading{margin-bottom:55px}.quote-band{padding:80px 22px}.quote-band blockquote{font-size:36px}.site-footer{padding:65px 24px 25px}.footer-links{grid-template-columns:1fr;gap:25px}.page-intro{padding:80px 24px}.books-page-grid{padding-top:80px;padding-bottom:90px}.book-detail{padding:75px 23px 90px;grid-template-columns:minmax(0,1fr)}.detail-botanical{right:-220px;bottom:-35px;width:490px;opacity:.43}.detail-art{padding-left:22px}.detail-number{right:-12px}.detail-copy h1{font-size:61px}.buy-links{display:grid}.buy-links a{text-align:center}.about-page-content{gap:60px}.over-botanical{left:-300px;top:27%;width:610px;opacity:.54}.author-mark span{font-size:130px}.contact-hero{min-height:0}.contact-card{padding:35px 27px}.contact-card span{font-size:21px}.contact-card>div{align-items:flex-start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Serrebeeld en uitgebreide boekinformatie */
.book-detail{padding-right:clamp(80px,10vw,175px);grid-template-columns:minmax(320px,440px) minmax(420px,620px);gap:clamp(65px,8vw,125px);align-items:start}
.detail-botanical,.over-botanical{display:none}
.detail-scene{position:absolute;z-index:-1;right:-115px;top:150px;width:330px;height:520px;background:linear-gradient(90deg,var(--paper) 0%,rgba(250,248,242,.18) 42%),url('../images/sera-lux-hero.png') 82% center/auto 100% no-repeat;opacity:.82;pointer-events:none}
.book-description p{color:#5d5c53;margin-bottom:18px}
.trope-block{margin:32px 0 25px;padding:27px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trope-block .eyebrow{margin-bottom:17px}
.trope-block ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.trope-block li{border:1px solid #aaa491;background:rgba(243,240,232,.82);padding:9px 12px;font:400 10px/1.2 var(--typewriter);letter-spacing:.04em}
.content-warning{font-size:13px!important;font-style:italic;line-height:1.55;margin-bottom:30px}
.about-intro-grid{grid-template-columns:.78fr 1fr}
.author-scene{aspect-ratio:4/5;position:relative;overflow:hidden;box-shadow:0 20px 40px rgba(50,46,36,.14);margin:0 0 0 clamp(-95px,-7vw,-40px);background:#d8d1c3}
.author-scene:after{content:"";position:absolute;inset:20px;border:1px solid rgba(255,255,255,.58);pointer-events:none}
.author-scene img{width:100%;height:100%;object-fit:cover;object-position:52% center}
.ebook-note{margin:clamp(65px,8vw,100px) 0 0;padding:clamp(40px,5vw,64px) 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ebook-note h3{font-size:clamp(29px,3vw,38px);margin:0 0 22px;color:var(--ink)}
.ebook-note p{color:#57564d}

@media(max-width:900px){
  .book-detail{padding-right:80px}
  .detail-scene{right:-150px;top:510px;width:300px;height:470px;opacity:.68}
  .author-scene{max-width:470px;width:100%;margin-left:-70px}
  .about-intro-grid{gap:60px}
}

.menu-toggle{display:none;background:transparent;border:1px solid currentColor;padding:9px 12px;font:600 9px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:inherit}
.content-default{max-width:900px;margin:auto;min-height:55vh}.content-default h1{font-size:clamp(48px,7vw,88px)}
@media(max-width:650px){.menu-toggle{display:inline-block;margin-top:13px;cursor:pointer;position:relative;z-index:2}.site-header #main-menu{display:none;width:100%}.site-header #main-menu.is-open{display:block}.site-header nav{flex-direction:column;gap:3px;margin-top:12px}.site-header nav a{display:block;padding:12px 18px}.site-header-light #main-menu{background:rgba(30,32,24,.96);margin:10px -16px -18px;padding:10px 0 18px}.site-header-light .menu-toggle{border-color:rgba(255,255,255,.8)}}
@media(max-width:650px){
  .book-detail{display:block;width:100%;padding:75px 23px 90px;overflow:hidden}
  .detail-art{width:min(100%,420px);margin:0 auto 70px}
  .detail-copy{display:block;width:100%;max-width:100%;margin:0}
  .detail-copy h1{font-size:clamp(48px,16vw,61px);overflow-wrap:normal}
  .detail-tagline{font-size:20px}
  .detail-scene{right:-165px;top:525px;width:255px;height:410px;opacity:.52}
  .trope-block ul{display:grid;grid-template-columns:1fr 1fr}
  .author-scene{width:calc(100% + 28px);margin-left:-36px}
  .author-scene img{object-position:54% center}
}