/* De Vrede van Overgave: one continuous blue-and-gold dream world. */
:root{--dream-navy:#080f23;--dream-gold:#efd39b;--dream-cream:#f7ead6}
html{background:var(--dream-navy)}
body{background:radial-gradient(ellipse at 90% 5%,#33244766,transparent 48%),linear-gradient(180deg,#0b142b,#0a1226 70%,#11182e);color:var(--dream-cream)}
body:before{opacity:.27}
.page-header,.home-nav,.shared-nav{background:#0b1329}
.page-header .inner-sky{aspect-ratio:auto;overflow:visible}
.page-header .inner-sky>img{display:block;position:static;width:100%;height:auto;max-width:100%;margin:0}
main:not(.site){margin-top:clamp(30px,5vw,65px)}
.card{background:linear-gradient(140deg,#15203ae8,#111a32ec);border-color:#d8b77a55;box-shadow:0 12px 40px #03071340;backdrop-filter:none}
h1,h2,h3{color:#f9dfaa}
.button{background:linear-gradient(135deg,#e6b9711f,#d2a3640b);border-color:#e4c2889c;box-shadow:0 0 18px #e6b9710b}
.button:hover,.button:focus-visible{background:#b98b3c40;box-shadow:0 0 22px #e6b97125}
footer{isolation:isolate;overflow:hidden;background:linear-gradient(#0a1228f2,#0a1228c9),url(droommeer.webp) center 70%/cover;border-top:1px solid #ddbe7950;padding-bottom:clamp(40px,7vw,90px)}
footer nav,footer p,footer .contact-mark{position:relative;z-index:1}
.home-disclaimer{background:linear-gradient(#0a1228f2,#0a1228c9),url(droommeer.webp) center 70%/cover}
.site .about{background:linear-gradient(135deg,#15213b,#0d172e);color:#f3e3c9;border-block:1px solid #d7b87952;align-items:stretch}
.site .about h1{color:#f9dfaa}.site .about a{background:linear-gradient(135deg,#d1a3602e,#172139);border:1px solid #d7b87999;color:#fbe6bb}
.site .about-picture{position:relative;align-self:stretch;width:100%;height:100%;min-height:350px;aspect-ratio:auto;overflow:hidden;background:#0c1730}
.site .about-picture img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:65% center}
.site .about-picture:after{content:"";position:absolute;inset:0;background:linear-gradient(#07102060,transparent 65%);pointer-events:none}
.site .about-picture blockquote{position:relative;z-index:1;margin:0 auto;padding:clamp(30px,5vw,60px) 24px 220px;max-width:400px;border:0;color:#ffe8bc;font-style:italic;text-align:center;font-size:clamp(23px,2.6vw,32px);line-height:1.4;text-shadow:0 2px 15px #020715}
.book-feature{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,44px);padding:clamp(24px,4vw,44px);background:linear-gradient(90deg,#101a30f2,#101a30db),url(droommeer.webp) center/cover;overflow:visible}
.book-cover-link{display:block;max-width:280px;text-decoration:none;box-shadow:0 15px 45px #02040d99,0 0 28px #e5c28220}
.book-cover-link img{display:block;width:100%;height:auto;border:1px solid #dcbf785e}
.book-description{min-width:0}.book-description h2{font-size:clamp(30px,4vw,46px);margin-top:0}.book-description h3{font-size:clamp(25px,3vw,34px)}
.book-description p{font-size:17px;line-height:1.7}.book-english,.translation-link{border-top:1px solid #dbbd7d3b;padding-top:16px}.translation-link a{font-size:16px}
.reading-page{background:#0b142cbd;border:1px solid #d5b6752b;border-radius:12px;padding:clamp(22px,4vw,42px);box-shadow:0 10px 50px #04081530}
@media(max-width:650px){.site .about-picture{min-height:320px;height:auto}.site .about-picture blockquote{padding:32px 28px 220px;max-width:340px}.book-feature{grid-template-columns:1fr;padding:26px 22px;gap:28px}.book-cover-link{width:min(74%,250px);margin:auto}.book-description h2{font-size:34px}.book-description .button{display:block;text-align:center;margin-right:0}.reading-page{margin-inline:12px;padding:24px 20px}}
@media print{body{background:white;color:#222}.reading-page{border:0;box-shadow:none;background:white}}

/* Homepage refinements: distinct destinations and a gentle night-sky transition. */
.site .portal.portal-rust{background-image:linear-gradient(transparent 12%,#071023ed 85%),url(illustraties/rust-01.webp);background-size:100% 100%,auto 145%;background-position:center,right 28%}
.site .portal.portal-contact{background-image:linear-gradient(transparent 12%,#071023ed 85%),url(illustraties/ruimte-03.webp);background-size:100% 100%,auto 130%;background-position:center,right 48%}
.site .about{border-bottom:0}
.site .about-picture{background:#0d172e}
.site .about-picture:after{background:linear-gradient(to bottom,#07102045,transparent 45%,transparent 80%,#0d172e)}
.site .about-picture blockquote{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:100%;max-width:400px;margin:0;padding:0 24px}
.site .closing:before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(12px,2vw,22px);z-index:1;background:linear-gradient(#0d172e,transparent);pointer-events:none}
@media(max-width:650px){.site .about-picture blockquote{max-width:340px;padding:0 28px}}

/* Illustrated bookshelf, 24 October 2026. */
.stories-page{max-width:1100px}
.stories-intro{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;margin:0 0 68px}
.stories-poster{display:block;max-width:430px;border-radius:22px;overflow:hidden;border:1px solid #e5c38a66;box-shadow:0 22px 65px #02061480,0 0 35px #dba55215}
.stories-poster img{display:block;width:100%;height:auto}
.stories-eyebrow{font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:#dfc18c}
.stories-welcome h1{font-size:clamp(37px,4.9vw,59px);line-height:1.15;margin-top:16px}
.stories-welcome .intro{font-size:21px}.stories-welcome .note{font-size:15px}
.story-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;scroll-margin-top:30px}
.story-shelf .story-card{padding:0;overflow:hidden;border-radius:20px;background:linear-gradient(150deg,#20243d,#0c172d);transition:transform .25s ease,box-shadow .25s ease}
.story-card:hover,.story-card:focus-within{transform:translateY(-5px);box-shadow:0 20px 45px #03061380,0 0 22px #e7bb6b18}
.story-cover{position:relative;display:block;padding:20px 30px 26px;background:radial-gradient(ellipse at center,#bc8e4d33,transparent 75%);text-decoration:none}
.story-cover img{display:block;width:100%;height:auto;aspect-ratio:420/596;object-fit:contain;border:1px solid #e4c48b75;box-shadow:5px 12px 25px #01071390;border-radius:2px 6px 6px 2px}
.story-cover span{display:block;text-align:center;font-size:15px;margin-top:17px;color:#f7dfad}
.story-details{padding:0 24px 24px}.story-details h2{margin-top:0;font-size:27px}.story-details p{font-size:16px}.story-details .story-invitation{min-height:3.5em;color:#f2dbb8}
.story-details a{ text-underline-offset:4px}.story-details .translation-link{margin-bottom:0}
footer .contact-mark{width:170px;height:170px;border-radius:50%;overflow:hidden}
footer .contact-mark img{mask-image:none;-webkit-mask-image:none;border-radius:50%}
@media(max-width:760px){.stories-intro{grid-template-columns:1fr;gap:30px;margin-bottom:42px}.stories-poster{width:min(100%,390px);margin:auto}.stories-welcome h1{font-size:42px}.story-shelf{grid-template-columns:1fr;max-width:460px;margin:auto;gap:30px}.story-cover{padding:26px 55px}.story-details .story-invitation{min-height:0}}
@media(prefers-reduced-motion:reduce){.story-shelf .story-card{transition:none}.story-card:hover,.story-card:focus-within{transform:none}}

/* Proef: warme uitnodiging en losse signatuur — oktober 2026 */
.site .about-copy{background:linear-gradient(135deg,#f3dfb8,#ecd0a0);color:#17253e;padding:clamp(28px,4vw,48px)}
.site .about-copy h1{color:#17253e}
.site .about-copy a{background:#17253e;color:#f8e6c6;border-color:#17253e;line-height:1.5}
.site .about-picture:after{background:linear-gradient(180deg,#071020a6,transparent 78%,#0d172e)}
.site .about-picture blockquote{top:15%;max-width:470px;font-size:clamp(22px,2.5vw,30px);line-height:1.5}
.site .closing{aspect-ratio:auto;min-height:220px;display:grid;place-items:center;isolation:isolate;padding:56px 24px}
.site .closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;z-index:-2}
.site .closing:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#08132988,#08132922);z-index:-1}
.site .closing blockquote{margin:0;max-width:900px;font-size:clamp(26px,3.3vw,39px);line-height:1.35;font-style:italic;text-align:center;color:#ffedcb;text-shadow:0 2px 12px #030b1d}
.contact-closing{position:relative;max-width:960px;margin:0 auto 24px;padding:54px 100px 65px;text-align:center;background:radial-gradient(ellipse at 60% 50%,#53365d33,transparent 68%)}
.contact-closing a{display:block;max-width:480px;margin:auto}
.contact-closing .contact-wordmark{display:block;width:100%;height:auto}
.contact-closing .contact-neon{position:absolute;right:7%;bottom:24px;width:72px;height:auto;opacity:.65}
@media(max-width:650px){.site .about-picture{min-height:370px}.site .about-picture blockquote{top:14%;max-width:370px;padding:0 25px;font-size:25px}.site .closing{min-height:210px;padding:40px 28px}.site .closing blockquote{font-size:28px;max-width:390px}.contact-closing{padding:42px 44px 75px}.contact-closing .contact-neon{width:48px;right:9%;bottom:22px}}

/* Op een telefoon rechtop eerst de uitnodiging, dan het beeld. */
@media(max-width:650px), (max-width:1000px) and (max-height:500px){.stories-intro{grid-template-columns:1fr;gap:36px;margin-bottom:42px}.stories-intro .stories-welcome{order:-1}.stories-intro .stories-poster{width:min(100%,390px);margin:auto}.stories-intro .stories-welcome h1{font-size:clamp(34px,9vw,42px)}}

/* Meer ruimte onder de tekst in de ronde navigatie, ook op tablets. */
.site .portal span,.site .portal small{transform:translateY(-8px)}

/* Een rustige, geïllustreerde afronding voor de twaalf luisterverhalen. */
.space-closing{position:relative;isolation:isolate;min-height:260px;display:grid;place-items:center;overflow:hidden;border-radius:14px;margin:48px 0 40px;background:#0c1528}
.space-closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2}
.space-closing:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#071124ab,#07112466);z-index:-1}
.space-closing blockquote{border:0;padding:38px 24px;margin:0;max-width:760px;text-align:center;color:#ffedcb;font-style:italic;font-size:clamp(24px,3vw,32px);line-height:1.5;text-shadow:0 2px 12px #030b1d}
@media(max-width:650px){.space-closing{min-height:230px;border-radius:8px}.space-closing blockquote{padding:34px 20px}}