@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#f4efe7;--ink:#1d1b18;--muted:#7a7268;--gold:#a8875a;--accent:#f4efe7;--serif:"Fraunces",Georgia,serif;--sans:"Inter",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--accent);color:var(--ink);font:400 16px/1.65 var(--sans);transition:background-color 1.2s ease;-webkit-font-smoothing:antialiased}
a{color:inherit}
header.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,5vw,72px);backdrop-filter:blur(14px);background:color-mix(in srgb,var(--accent) 72%,transparent);border-bottom:1px solid rgba(168,135,90,.18)}
.logo{font:400 22px var(--serif);letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.logo .mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--gold) 22%,#f4efe7);color:var(--gold);font:500 10px/1 var(--sans);letter-spacing:.08em;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.logo i{color:var(--gold)}
nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;margin-left:28px;color:var(--muted)}
nav a:hover{color:var(--ink)}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.02em}
.hero{min-height:88vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6vw;padding:6vh clamp(20px,6vw,96px) 10vh}
.hero h1{font-size:clamp(52px,8.4vw,132px);margin:22px 0 28px}.hero h1 em{font-style:italic;color:var(--gold)}
.hero p{max-width:30em;color:var(--muted);font-size:18px}
.btn{display:inline-flex;gap:12px;align-items:center;margin-top:36px;padding:16px 30px;border:1px solid var(--ink);text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;transition:.4s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--ink);color:#f4efe7}.btn.solid:hover{background:var(--gold);border-color:var(--gold)}
.btn.pill{border:0;border-radius:999px;background:var(--gold);color:#faf6ef;padding:17px 34px;box-shadow:0 10px 28px -14px rgba(120,80,30,.55)}
.btn.pill:hover{background:#8f6d42;color:#faf6ef;transform:translateY(-1px)}
.spread .btn.pill{margin-top:28px}
.stack{position:relative;aspect-ratio:1/1;perspective:1600px}
.stack .book{position:absolute;width:56%;}
.stack .book:nth-child(1){left:2%;top:14%;transform:rotate(-8deg)}
.stack .book:nth-child(2){left:38%;top:4%;transform:rotate(5deg)}
.stack .book:nth-child(3){left:22%;top:34%;transform:rotate(-1deg)}
/* book object */
.book{display:block;aspect-ratio:4/5;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cover{position:absolute;inset:0;background:var(--c);color:var(--k);border-radius:2px 5px 5px 2px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,.15),18px 30px 60px -18px rgba(40,30,20,.45);display:flex;flex-direction:column;justify-content:space-between;padding:9% 10%}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4.5%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.12) 60%,rgba(0,0,0,.08))}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);transform:translateX(-60%);transition:transform 1s ease;pointer-events:none}
.tilt:hover .cover::after{transform:translateX(60%)}
.tilt:hover{transform:rotateY(-14deg) rotateX(4deg) translateY(-6px)}
.cover svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.cover .ct{position:relative;font:300 clamp(18px,2.4vw,40px)/1 var(--serif)}
.cover .ca{position:relative;font-size:10px;letter-spacing:.3em;text-transform:uppercase}
/* grid */
section.wrap{padding:12vh clamp(20px,6vw,96px)}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:10vh}
.intro h2{font-size:clamp(40px,5vw,76px)}
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:4vw;align-items:center;min-height:80vh;padding:8vh 0;border-top:1px solid rgba(0,0,0,.08)}
.spread .vis{grid-column:span 5}.spread .txt{grid-column:7/span 6}
.spread:nth-child(even) .vis{grid-column:8/span 5;order:2}.spread:nth-child(even) .txt{grid-column:1/span 6}
.spread h3{font-size:clamp(40px,5vw,80px);margin:14px 0 6px}
.spread .sub{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--muted)}
.spread blockquote{font:300 italic clamp(22px,2vw,30px)/1.3 var(--serif);margin:34px 0;padding-left:22px;border-left:1px solid var(--gold)}
.facts{display:flex;gap:40px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.facts b{display:block;font:400 22px var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
footer{padding:10vh clamp(20px,6vw,96px) 6vh;border-top:1px solid rgba(0,0,0,.1);font-size:13px;color:var(--muted);display:grid;gap:14px}
footer .logo{color:var(--ink)}
footer .aff{max-width:42em;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--gold) 10%,transparent);border:1px solid color-mix(in srgb,var(--gold) 28%,transparent);color:var(--ink);font-size:13px;line-height:1.55}
/* detail */
.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;padding:6vh clamp(20px,6vw,96px) 10vh;align-items:center}
.detail .big{max-width:520px;margin:auto;width:100%}
.detail h1{font-size:clamp(48px,6.5vw,104px);margin:16px 0 8px}
.price{font:300 34px var(--serif);margin:28px 0 0}
.ad{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--muted);padding:2px 7px;margin-left:10px;color:var(--muted);vertical-align:middle}
.alt{display:block;margin-top:14px;font-size:13px;color:var(--muted)}
/* inkijk */
.inkijk{padding:12vh clamp(20px,6vw,96px);text-align:center;background:rgba(255,255,255,.35)}
.inkijk h2{font-size:clamp(36px,4.5vw,64px);margin:12px 0 40px}
.open{position:relative;width:min(860px,100%);aspect-ratio:8/5;margin:0 auto;perspective:2400px}
.page{position:absolute;top:0;width:50%;height:100%;background:#fbf8f2;box-shadow:inset 0 0 40px rgba(120,100,70,.08)}
.page.left{left:0;padding:9%;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset -30px 0 40px -30px rgba(0,0,0,.25)}
.page.right{right:0;overflow:hidden;box-shadow:inset 30px 0 40px -30px rgba(0,0,0,.25)}
.page.right svg{width:100%;height:100%}
.page .pt{font:300 italic 26px/1.2 var(--serif)}.page small{display:block;margin-top:18px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.flip{position:absolute;right:0;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.6,.05,.25,1);cursor:pointer;z-index:3;border:0;padding:0;background:none}
.flip .face{position:absolute;inset:0;backface-visibility:hidden}
.flip .front{display:block}
.flip .front .cover{border-radius:0 5px 5px 0;align-items:flex-start;text-align:left}
.flip .back{transform:rotateY(180deg);background:#f3eee5;display:flex;align-items:center;justify-content:center;font:300 italic 18px var(--serif);color:var(--muted)}
.open.is-open .flip{transform:rotateY(-180deg)}
.hint{margin-top:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hint button{font:inherit;letter-spacing:inherit;background:none;border:0;border-bottom:1px solid;cursor:pointer;color:var(--ink);padding:4px 0}

/* inkijk-teaser (home) */
.teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:center;margin:0 clamp(20px,6vw,96px);padding:10vh 0;border-top:1px solid rgba(168,135,90,.28);border-bottom:1px solid rgba(168,135,90,.28)}
.teaser h2{font-size:clamp(40px,5vw,76px);margin:16px 0 22px}.teaser h2 em{font-style:italic;color:var(--gold)}
.teaser p{color:var(--muted);font-size:18px;max-width:28em}
.teaser-alt{display:block;margin-top:18px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;width:max-content}.teaser-alt:hover{color:var(--ink);border-color:currentColor}
.mini-open{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:8/5;text-decoration:none;color:var(--ink);box-shadow:0 30px 60px -30px rgba(60,40,20,.45);transform:rotate(-1.2deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mini-open:hover{transform:rotate(0) translateY(-4px)}
.mp{position:relative;background:#fbf8f2;overflow:hidden}
.mp.left{padding:9%;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset -30px 0 40px -30px rgba(0,0,0,.25)}
.mp.right{box-shadow:inset 30px 0 40px -30px rgba(0,0,0,.25)}.mp.right svg{display:block;width:100%;height:100%}
.mp .pt{display:block;margin-top:10px;font:300 italic clamp(18px,1.8vw,26px)/1.25 var(--serif)}
.mp small{display:block;margin-top:16px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.teaser{grid-template-columns:1fr;padding:8vh 0}.mini-open{order:-1;transform:none}}
@media(max-width:820px){
 nav a:not(:last-child){display:none}
 .hero,.detail,.intro{grid-template-columns:1fr}.hero{min-height:auto;padding-top:4vh}
 .stack{width:92%;margin:0 auto}
 .spread{grid-template-columns:1fr;min-height:auto}.spread .vis,.spread .txt,.spread:nth-child(even) .vis,.spread:nth-child(even) .txt{grid-column:1;order:0}
 .spread .vis{width:78%;margin:0 auto}
 .open{aspect-ratio:4/5;width:92%}.page.left{display:none}.page.right{width:100%}.flip{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.tilt:hover{transform:none}}

/* ===== echte catalogus (preview) ===== */
.book{aspect-ratio:auto}
.cv{margin:0;position:relative}
.cv img{display:block;width:100%;height:auto}
.cv-flat img{border-radius:2px 4px 4px 2px;box-shadow:0 2px 3px rgba(0,0,0,.14),18px 30px 60px -18px rgba(40,30,20,.45)}
.cv-obj img{filter:drop-shadow(14px 24px 26px rgba(40,30,20,.28))}
.stack{aspect-ratio:1/1.05}
.stack .book{width:50%}
.spread .vis{max-width:440px;width:100%;justify-self:center}
.spread:nth-child(even) .vis{justify-self:center}
.spread blockquote{font-size:clamp(20px,1.7vw,26px)}
.center{text-align:center;margin-top:8vh}
.credit,.credits{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
footer .credits{text-transform:none;letter-spacing:0;font-size:12px}
/* teaser: echte spread */
.mini-shot{display:block;position:relative;background:#fff;border-radius:6px;padding:4% 4% 0;text-decoration:none;color:var(--ink);box-shadow:0 30px 60px -30px rgba(60,40,20,.45);transform:rotate(-1deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mini-shot:hover{transform:rotate(0) translateY(-4px)}
.mini-shot img{display:block;width:100%;height:auto}
.mini-shot .cap{display:block;padding:14px 4px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.mini-shot .cap b{font:italic 400 15px var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
/* detail */
.detail .big{max-width:460px}
.meta .sub{font:italic 22px/1.3 var(--serif);color:var(--muted)}
.meta .by{margin-top:10px;font-size:14px;letter-spacing:.06em}.meta .by span{color:var(--muted)}
.meta blockquote{font:300 italic 22px/1.4 var(--serif);margin:28px 0;padding-left:20px;border-left:1px solid var(--gold)}
.isbn{margin-top:22px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.price small{display:block;font:400 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
/* inkijk-viewer */
.inkijk h2 em{font-style:italic;color:var(--gold)}
.viewer{display:grid;grid-template-columns:auto minmax(0,760px) auto;gap:22px;align-items:center;justify-content:center}
.stage{position:relative;aspect-ratio:1/1;background:#fff;border-radius:8px;box-shadow:0 40px 80px -40px rgba(60,40,20,.5);overflow:hidden}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .7s ease}
.stage img.on{opacity:1}
.nav-b{width:52px;height:52px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);background:rgba(255,255,255,.6);color:var(--gold);font-size:18px;cursor:pointer;transition:.3s}
.nav-b:hover{background:var(--gold);color:#faf6ef}
.stage-cap{margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stage-cap b{font:italic 400 16px var(--serif);letter-spacing:0;text-transform:none;color:var(--ink)}
.thumbs{display:flex;gap:14px;justify-content:center;margin-top:24px}
.thumbs button{width:84px;aspect-ratio:1;padding:4px;background:#fff;border:1px solid transparent;border-radius:6px;cursor:pointer;opacity:.6;transition:.3s}
.thumbs button.on,.thumbs button:hover{opacity:1;border-color:var(--gold)}
.thumbs img{width:100%;height:100%;object-fit:contain;display:block}
.more-wrap{padding-top:8vh}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw;margin-top:26px}
.more-i{text-decoration:none;display:grid;gap:14px;font:italic 18px var(--serif)}
.more-i .cv{max-width:200px}
/* collectie */
.coll-head{padding-bottom:4vh}.coll-head h1{font-size:clamp(52px,7vw,110px);margin:18px 0 14px}.coll-head h1 em{font-style:italic;color:var(--gold)}
.coll-head p{color:var(--muted);font-size:18px;max-width:32em}
.grid-wrap{padding-top:2vh}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 4vw}
.card{text-decoration:none;color:var(--ink);display:block}
.card-vis{background:var(--c);border-radius:10px;aspect-ratio:4/4.4;display:flex;align-items:center;justify-content:center;padding:12% 18%;margin-bottom:22px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-vis{transform:translateY(-4px)}
.card-vis .cv{width:100%}
.card h3{font-size:clamp(26px,2.4vw,36px);margin:8px 0 4px}
.card .by{color:var(--muted);font-size:14px}
.card-meta{display:flex;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid rgba(168,135,90,.3);font-size:13px;color:var(--muted)}
.card-meta .pr{font:400 18px var(--serif);color:var(--ink)}
.card-cta{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
 .stack{aspect-ratio:1/1.1}
 .viewer{grid-template-columns:1fr;gap:14px}.viewer .nav-b{display:none}
 .thumbs button{width:72px}
 .more{grid-template-columns:repeat(2,1fr)}
 .grid{grid-template-columns:1fr;gap:48px}
 .detail .big{max-width:300px}
}
.card-vis .cv-obj{transform:scale(1.4)}
.spread .vis .cv-obj{transform:scale(1.45)}

/* SEO-statische pagina's */
.crumbs{padding:14px clamp(20px,6vw,96px) 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--gold)}
.crumbs a{text-decoration:none}
.err{min-height:60vh;display:grid;place-content:center;text-align:center;gap:10px;padding:10vh 20px}
.err h1{font-size:clamp(44px,6vw,88px)}

.crumbs a{margin-left:0;font-size:inherit;letter-spacing:inherit}