/* Madry Private Editions · richting "Collectors' Edition"
   Opbouw naar het patroon van een rustige, editoriale vastgoedsite; merk, kleur, letter en inhoud zijn van Madry. */

@font-face{font-family:"Pacella";src:url(fonts/pacella.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Maroni";src:url(fonts/maroni.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Mayonice";src:url(fonts/mayonice.woff2) format("woff2");font-display:swap}

:root{
  --mahonie:#3F201A; --mahonie-diep:#2C1611; --klei:#FFF5E9; --zand:#F2E6D5; --koraal:#E63323; --koraal-ink:#C42A1C; --zon:#FFCF53;
  --ink:var(--mahonie); --ink-70:rgba(63,32,26,.74); --ink-45:rgba(63,32,26,.5); --ink-12:rgba(63,32,26,.13);
  --klei-75:rgba(255,245,233,.78); --klei-45:rgba(255,245,233,.5); --klei-15:rgba(255,245,233,.16);
  --serif:"Pacella",Georgia,"Times New Roman",serif; --display:"Maroni",Impact,sans-serif; --script:"Mayonice",cursive;
  --ease:cubic-bezier(.7,.6,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --pad:max(20px,4.5vw); --gap:2.6vw;
  --t-marquee:16vw; --t-h2:clamp(40px,5.2vw,100px); --t-h3:clamp(30px,3.4vw,62px);
  --t-lead:clamp(19px,1.55vw,27px); --t-body:clamp(17px,1.2vw,21px); --t-small:clamp(15px,1vw,17px);
  --t-label:clamp(14px,.9vw,16px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{background:var(--klei);color:var(--ink);font-family:var(--serif);font-size:var(--t-body);line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--koraal);outline-offset:4px}
::selection{background:var(--koraal);color:var(--klei)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── merk ── */
.wm{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:.005em}
.wm sup{font-family:var(--serif);font-size:.3em;vertical-align:1.05em;margin-left:.12em}
.label{font-family:var(--display);text-transform:uppercase;font-size:var(--t-label);letter-spacing:.07em;line-height:1}
.boxed{--bt:1;--br:1;--bb:1;--bl:1;display:inline-block;padding:.72em 1.1em .6em;background:linear-gradient(currentColor,currentColor) left top/calc(var(--bt)*100%) 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px calc(var(--br)*100%) no-repeat,linear-gradient(currentColor,currentColor) right bottom/calc(var(--bb)*100%) 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px calc(var(--bl)*100%) no-repeat}
.ulink{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.ulink:hover,.ulink:focus-visible{background-size:100% 1px}
.mbleem{display:inline-block;width:var(--s,32px);height:var(--s,32px);flex:none;background:currentColor;-webkit-mask:url(img/m-bleem.png) center/contain no-repeat;mask:url(img/m-bleem.png) center/contain no-repeat}   /* M-bleem uit het brandbook */

/* ── balk bovenaan (scrolt mee weg) ── */
.bar{position:absolute;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(18px,2.4vw,40px) var(--pad);font-size:var(--t-small)}
.bar .wm{font-size:clamp(26px,2.3vw,42px);justify-self:center}
.bar .r{justify-self:end}

/* ── hero: doorlopende titel, vierkant beeld, tagline ── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero--dark{background:var(--mahonie);color:var(--klei)}
.marquee{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);white-space:nowrap;pointer-events:none;overflow:hidden}
.marquee .row{display:inline-flex;animation:loop var(--dur,46s) linear infinite;will-change:transform}
.marquee span{font-family:var(--serif);font-size:var(--t-marquee);line-height:1.04;letter-spacing:-.025em;padding-right:.28em}
@keyframes loop{to{transform:translateX(-50%)}}
.hero-visual{position:absolute;left:50%;top:50%;width:min(20vw,42vh);aspect-ratio:1;transform:translate(-50%,-56%);overflow:hidden;z-index:2;background:var(--zand)}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.hero-foot{position:absolute;left:50%;bottom:clamp(70px,9vh,110px);transform:translateX(-50%);text-align:center;z-index:3;width:min(42vw,620px)}
.hero-foot p{font-size:var(--t-lead);line-height:1.3;margin-bottom:1.1rem}
.corner{position:absolute;bottom:clamp(20px,3vw,48px);z-index:4;font-size:var(--t-small)}
.corner--l{left:var(--pad)}
.corner--r{right:var(--pad);display:flex;gap:10px;align-items:stretch}
.btn-sel{display:inline-flex;align-items:center;gap:1em;border:1px solid currentColor;padding:0 1.2em;height:clamp(46px,3.6vw,58px);transition:background .5s var(--ease),color .5s var(--ease)}
.btn-sel .dots{display:grid;grid-template-columns:repeat(2,4px);gap:4px}
.btn-sel .dots i{width:4px;height:4px;background:currentColor}
.btn-menu{width:clamp(46px,3.6vw,58px);aspect-ratio:1;display:grid;place-items:center;background:var(--ink);color:var(--klei);transition:background .5s var(--ease)}
.hero--dark .btn-menu{background:var(--klei);color:var(--ink)}
.btn-menu i{display:block;width:44%;height:1.5px;background:currentColor;box-shadow:0 6px 0 currentColor;transform:translateY(-3px)}
.btn-sel:hover{background:var(--ink);color:var(--klei)}
.hero--dark .btn-sel:hover{background:var(--klei);color:var(--ink)}
.btn-menu:hover{background:var(--koraal);color:var(--klei)}

/* edition: het vierkante beeld groeit uit tijdens het scrollen */
.grow-stage{position:relative;height:300svh;background:var(--mahonie)}
.grow-stage .hero{position:sticky;top:0}
.grow-stage .hero-visual{transform:translate(-50%,-56%)}

/* ── secties ── */
.sec{position:relative;padding:clamp(90px,13vw,220px) var(--pad)}
.sec--dark{background:var(--mahonie);color:var(--klei)}
.sec--zand{background:var(--zand)}
.rule{width:1px;height:clamp(48px,6vw,100px);background:currentColor;opacity:.35;margin:0 auto clamp(28px,3vw,52px)}
.statement{text-align:center}
.statement h2,.h2{font-family:var(--serif);font-weight:400;font-size:var(--t-h2);line-height:.98;letter-spacing:-.025em}
.statement h2{max-width:13.5em;margin:0 auto}
.statement p{max-width:32em;margin:clamp(22px,2.4vw,40px) auto 0;font-size:var(--t-lead);line-height:1.4;color:var(--ink-70)}
.sec--dark .statement p{color:var(--klei-75)}
.kicker{display:block;margin-bottom:clamp(18px,1.8vw,28px);color:var(--koraal-ink)}
.sec--dark .kicker{color:var(--zon)}

.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,5vw,96px);margin-top:clamp(48px,5vw,90px);padding-top:clamp(28px,3vw,48px);border-top:1px solid var(--ink-12)}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(44px,4.4vw,80px);line-height:1}
.stats span{display:block;margin-top:.7rem;color:var(--ink-70)}

/* galerij: zones van het appartement */
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding:0 var(--pad);margin-bottom:clamp(36px,4vw,70px)}
.gallery-head .h2{max-width:9em}
.gallery-head p{max-width:24em;color:var(--ink-70)}
.track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:0 var(--pad) 8px;scrollbar-width:none;align-items:flex-start;cursor:grab}
.track::-webkit-scrollbar{display:none}
.zcard{flex:none;width:clamp(240px,23vw,420px);scroll-snap-align:start;text-align:left}
.zcard:nth-child(even){margin-top:clamp(40px,7vw,130px)}
.zcard .ph{overflow:hidden;background:var(--zand)}
.zcard img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.zcard:hover img,.zcard:focus-visible img{transform:scale(1.04)}
.zcard .cap{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:1rem}
.zcard .cap b{font-weight:400;font-size:clamp(22px,1.7vw,32px);line-height:1.1}
.zcard .cap .label{color:var(--ink-70)}
.track.stair{--cw:clamp(240px,24vw,440px);display:block;position:relative;padding:0;overflow-x:clip;overflow-y:visible;scroll-snap-type:none;touch-action:pan-y;user-select:none}
.track.stair.dragging{cursor:grabbing}
.track.stair .zcard{position:absolute;left:0;top:0;width:var(--cw);margin:0;will-change:transform}
.track.stair img{-webkit-user-drag:none;pointer-events:none}
.track-nav{display:flex;justify-content:flex-end;gap:10px;padding:clamp(28px,3vw,48px) var(--pad) 0}
.round{width:clamp(48px,3.4vw,58px);aspect-ratio:1;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;transition:background .5s var(--ease),color .5s var(--ease)}
.round:hover{background:var(--ink);color:var(--klei)}
.round svg{width:38%;height:38%}
.round path,.arrow path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* doorlopende titel als band in de pagina */
.band{padding:clamp(40px,6vw,110px) 0;overflow:hidden;white-space:nowrap}
.band .row{display:inline-flex;animation:loop var(--dur,52s) linear infinite}
.band span{font-family:var(--serif);font-size:var(--t-marquee);line-height:1;letter-spacing:-.025em;padding-right:.28em}

/* detail + citaat */
.quote{text-align:center}
.quote .detail{width:clamp(110px,10vw,180px);aspect-ratio:1;object-fit:cover;margin:0 auto clamp(32px,3.4vw,60px)}
.quote blockquote{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.025em;max-width:15em;margin:0 auto}
.quote cite{display:block;margin-top:clamp(26px,2.6vw,44px);font-style:normal;color:var(--ink-70)}

/* parallax */
.parallax{position:relative;height:clamp(420px,62vw,1080px);overflow:hidden}
.parallax img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}

/* zigzag: foto en tekst afwisselend */
.rows{display:grid;gap:clamp(70px,9vw,170px)}
.row-z{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.row-z .ph{grid-column:1/6;overflow:hidden}
.row-z .ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* stapel: twee foto's liggen achter de hoofdfoto, een klik opent de slider */
.sec--rows{overflow-x:clip}
.zstack{position:relative;display:block;width:100%;text-align:left;overflow:visible!important}
.zstack .pm{position:relative;z-index:3;display:block;overflow:hidden}
.zstack .st{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--zand);transform-origin:50% 60%;transition:transform 1.1s var(--ease-out)}
.zstack .st img{height:100%;filter:brightness(.94)}
.zstack .st-1{z-index:2;transform:rotate(3deg) translate(3%,-2%)}
.zstack .st-2{transform:rotate(-4deg) translate(-3%,1.5%)}
.zstack:hover .st-1,.zstack:focus-visible .st-1{transform:rotate(6.5deg) translate(8%,-3%)}
.zstack:hover .st-2,.zstack:focus-visible .st-2{transform:rotate(-7.5deg) translate(-8%,2.5%)}
.zstack .cnt{position:absolute;z-index:4;left:clamp(12px,1.2vw,20px);bottom:clamp(12px,1.2vw,20px);background:var(--klei);color:var(--ink);padding:.75em .95em .6em}
.row-z .tx{grid-column:7/11}
.row-z:nth-child(even) .ph{grid-column:8/13;order:2}
.row-z:nth-child(even) .tx{grid-column:2/6;order:1}
.row-z h3{font-weight:400;font-size:var(--t-h3);line-height:1;letter-spacing:-.02em;margin-bottom:clamp(16px,1.6vw,28px)}
.row-z p{color:var(--ink-70);max-width:26em}
.row-z .label{display:block;margin-bottom:clamp(14px,1.4vw,22px);color:var(--koraal-ink)}

/* lang citaat */
.long{max-width:min(1200px,78vw);margin:0 auto}
.long p{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.02em}
.long .src{display:block;margin-top:clamp(24px,2.4vw,40px);color:var(--ink-70)}

/* pandfiche als certificaat */
.fiche{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.fiche .head{grid-column:1/5}
.fiche .head p{margin-top:1.2rem;color:var(--ink-70);max-width:20em}
.fiche dl{grid-column:6/13;display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--ink-12)}
.fiche dt,.fiche dd{padding:clamp(14px,1.3vw,22px) 0;border-bottom:1px solid var(--ink-12)}
.fiche dt{color:var(--ink-70)}
.fiche dd{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(15px,1.15vw,20px);text-align:right}
.seal{display:inline-flex;align-items:center;gap:1rem;margin-top:clamp(26px,2.6vw,44px);color:var(--ink-70)}
.seal .mbleem{--s:clamp(46px,3.6vw,64px);color:var(--ink)}

/* dossier: donker CTA-blok */
.cta{text-align:center}
.cta h2{max-width:12em;margin:0 auto}
.cta .lead{max-width:30em;margin:clamp(20px,2vw,34px) auto 0;font-size:var(--t-lead);color:var(--klei-75)}
.dossier-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin:clamp(30px,3vw,52px) auto 0;max-width:62em;color:var(--klei-75);font-size:var(--t-small)}
.dossier-list li{list-style:none}
.dossier-list li::before{content:"·";margin-right:.6rem;color:var(--zon)}
.form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0 clamp(14px,1.6vw,28px);align-items:end;max-width:1100px;margin:clamp(40px,4.4vw,80px) auto 0;text-align:left}
.form label{display:grid;gap:.5rem;color:var(--klei-75)}
.form input{font:inherit;color:var(--klei);background:transparent;border:0;border-bottom:1px solid var(--klei-45);padding:.6em 0;border-radius:0;width:100%}
.form input:focus{outline:none;border-color:var(--zon)}
.btn{display:inline-flex;align-items:center;gap:.9em;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1vw,17px);line-height:1;padding:1.15em 1.6em 1em;border:1px solid currentColor;transition:background .5s var(--ease),color .5s var(--ease)}
.sec--dark .btn{background:var(--klei);color:var(--ink);border-color:var(--klei)}
.sec--dark .btn:hover{background:var(--koraal);border-color:var(--koraal);color:var(--klei)}
.cta .alt{margin-top:clamp(22px,2.2vw,36px);color:var(--klei-75);font-size:var(--t-small)}
.cta .alt a{color:var(--klei)}
.cta .done{display:none;margin-top:1.6rem;color:var(--zon)}
.sig{font-family:var(--script);line-height:1;position:relative;top:.08em}

/* volgende Edition */
.next{position:relative;display:block;height:clamp(420px,58vh,640px);overflow:hidden;color:var(--klei);text-align:center}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.next::after{content:"";position:absolute;inset:0;background:rgba(44,22,17,.5)}
.next:hover img{transform:scale(1.04)}
.next .in{position:relative;z-index:1;height:100%;display:grid;place-content:center;gap:clamp(14px,1.4vw,22px)}
.next .pill{justify-self:center;border:1px solid currentColor;border-radius:999px;padding:.6em 1.1em .5em}
.next h2{font-size:var(--t-h2);font-weight:400;line-height:1;letter-spacing:-.025em}

/* lijst van de Editions (overzicht) */
.list{border-top:1px solid var(--ink-12)}
.ed{display:grid;grid-template-columns:clamp(70px,8vw,150px) minmax(0,1fr) auto auto clamp(28px,2vw,40px);align-items:center;gap:clamp(14px,2vw,36px);padding:clamp(22px,2.4vw,40px) 0;border-bottom:1px solid var(--ink-12);transition:padding .6s var(--ease)}
.ed .no{font-family:var(--display);font-size:clamp(34px,3.4vw,64px);line-height:.9;color:var(--ink-45);transition:color .6s var(--ease)}
.ed .ttl b{display:block;font-weight:400;font-size:clamp(26px,2.5vw,46px);line-height:1.05;letter-spacing:-.015em}
.ed .ttl i{display:block;font-style:normal;margin-top:.4em;color:var(--ink-70);font-size:var(--t-small)}
.ed .facts{color:var(--ink-70);white-space:nowrap;font-size:var(--t-small)}
.ed .st{white-space:nowrap}
.ed .st--live{color:var(--koraal-ink)}
.ed .arrow{width:100%;height:auto;transition:transform .6s var(--ease)}
a.ed:hover .no{color:var(--koraal)}
a.ed:hover .arrow{transform:translateX(.3em)}
a.ed:hover{padding-left:1vw}
.ed--sold{color:var(--ink-70)}

/* ── overlays ── */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(242,230,213,.62);opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.menu{position:fixed;right:var(--pad);bottom:clamp(20px,3vw,48px);z-index:80;width:min(30vw,470px);aspect-ratio:1;background:var(--mahonie);color:var(--klei);padding:clamp(28px,2.6vw,46px);display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease)}
.menu nav{display:grid;gap:.12em}
.menu nav a{font-size:clamp(34px,3.1vw,58px);line-height:1.04;letter-spacing:-.02em}
.menu nav a:hover{color:var(--zon)}
.menu .small{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:var(--t-small);color:var(--klei-75)}
.menu .small a:hover{color:var(--klei)}
.menu .x{position:absolute;top:clamp(16px,1.6vw,26px);right:clamp(16px,1.6vw,26px);width:44px;height:44px;display:grid;place-items:center}
.menu .x i{position:absolute;width:20px;height:1.5px;background:currentColor;transform:rotate(45deg)}
.menu .x i+i{transform:rotate(-45deg)}
html.menu-open .scrim{opacity:1;pointer-events:auto}
html.menu-open .menu{clip-path:inset(0 0 0 0)}

/* "Onze Editions": de pagina krimpt, de kaarten verschijnen erboven */
.page{transform-origin:50% 100%;transition:transform .9s var(--ease)}
html.sel-open{overflow:hidden}
html.sel-open body{background:var(--zand)}
html.sel-open .page{transform:translateY(var(--sel-y,0)) scale(.42);pointer-events:none;outline:1px solid var(--ink-12)}
.selection{position:fixed;left:0;right:0;top:0;z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding:clamp(20px,2.6vw,44px) var(--pad);height:54svh;overflow:hidden;visibility:hidden;pointer-events:none}
html.sel-vis .selection{visibility:visible}
html.sel-open .selection{pointer-events:auto}
.scard{--vt:clamp(28px,2.6vw,50px);--cp:clamp(14px,1.3vw,22px);position:relative;display:grid;grid-template-rows:1fr 38%;overflow:hidden}
.scard .ph{overflow:hidden}
.scard:hover .ph img{transform:scale(1.04)}
.scard .panel{position:relative;padding:var(--cp);display:flex;justify-content:space-between}
.scard .panel .mbleem{--s:clamp(26px,2vw,38px)}
.scard .vt{writing-mode:vertical-rl;font-size:var(--vt);line-height:1;letter-spacing:-.01em;align-self:flex-end}
.scard .ds{position:absolute;left:var(--cp);right:calc(var(--vt) + var(--cp) * 2);bottom:var(--cp);max-width:11em;font-size:var(--t-small);line-height:1.3}
.scard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.scard--live .panel{background:var(--mahonie);color:var(--klei)}
.scard--live .ph img{object-position:50% 28%}
.scard--soon .panel{background:var(--klei);color:var(--ink)}
.scard--soon .ph{background:var(--klei);border-top:1px solid var(--ink-12);display:grid;place-items:center;color:var(--ink-70)}
.scard--silent .panel{background:var(--mahonie-diep);color:var(--klei)}
.scard--silent .ph{background:var(--mahonie-diep);display:grid;place-items:center;color:var(--klei-45)}
.sel-close{position:fixed;z-index:61;right:var(--pad);top:calc(54svh + 8px);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
html.sel-open .sel-close{opacity:1;pointer-events:auto}

/* zone-modal met slider */
.zm{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto 1fr;color:var(--klei)}
.zm[hidden]{display:none}
.zm:focus{outline:none}
.zm-bg{position:absolute;inset:0;background:var(--mahonie)}
.zm-top{position:relative;z-index:3;display:flex;align-items:flex-end;gap:1.5rem;padding:clamp(18px,2.4vw,40px) var(--pad) clamp(10px,1.4vw,18px)}
.zm-top .label{color:var(--zon);margin-bottom:.7rem;display:block}
.zm-top h3{font-weight:400;font-size:clamp(34px,4vw,72px);line-height:.95;letter-spacing:-.02em}
.zm-count{margin-left:auto;font-family:var(--display);font-size:clamp(18px,1.5vw,24px);white-space:nowrap}
.zm-close{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-label);border:1px solid currentColor;padding:1em 1.3em .85em;transition:background .5s var(--ease),color .5s var(--ease)}
.zm-close:hover{background:var(--klei);color:var(--ink)}
.zm-stage{position:relative;z-index:1;overflow:hidden;touch-action:pan-y;cursor:grab}
.zm-track{position:absolute;top:50%;left:0;display:flex;align-items:center;gap:var(--zg,32px);will-change:transform}
.zm-slide{flex:none;width:var(--zw,360px);transition:opacity .45s}
.zm-slide img{display:block;width:100%;aspect-ratio:var(--zr,3/4);object-fit:cover;background:var(--mahonie-diep);pointer-events:none;user-select:none}
.zm-slide:not(.on){opacity:.32;cursor:pointer}
.zm-nav{position:absolute;z-index:3;top:calc(50% + 34px);color:var(--klei)}
.zm-nav:hover{background:var(--klei);color:var(--ink)}
.zm-nav[disabled]{opacity:.25;pointer-events:none}
.zm-prev{left:var(--pad)}.zm-next{right:var(--pad)}
.zm-fly{position:fixed;z-index:95;pointer-events:none;overflow:hidden}
.zm-fly img{width:100%;height:100%;object-fit:cover}

/* footer */
footer{padding:clamp(70px,8vw,140px) var(--pad) clamp(26px,3vw,44px)}
footer .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:2rem}
footer .wm{font-size:clamp(44px,5vw,96px)}
footer .c{text-align:center}
footer .c .sig{font-size:clamp(30px,2.6vw,46px);display:block;margin-bottom:.5rem;color:var(--koraal)}
footer .c span{color:var(--ink-70);font-size:var(--t-small)}
footer .r{justify-self:end;text-align:right;color:var(--ink-70);font-size:var(--t-small);display:grid;gap:.3rem}
footer .id{margin-top:clamp(40px,4vw,70px);padding-top:1.4rem;border-top:1px solid var(--ink-12);font-size:var(--t-small);line-height:1.6;color:var(--ink-70);max-width:70em}
footer .legal{margin-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-70);font-size:var(--t-small)}
footer a.ulink{color:var(--ink)}

/* reveal */
/* beweging: tot het script de beginstand gezet heeft, blijft wat gaat bewegen onzichtbaar (vangnet: na 3,5 s toch zichtbaar) */
html.pre .hero .bar>*,html.pre .hero .marquee,html.pre .hero-visual,html.pre .hero-foot>*,html.pre .hero .corner>*,html.pre .hero .corner--l,html.pre main .rv,html.pre main :is(h2,h3,p,blockquote,cite,.kicker,.src,.row-z .label){visibility:hidden}
.ln{display:block}

/* ── tablet ── */
@media (max-width:1024px){
  .track.stair{--cw:40vw}
  :root{--t-marquee:22vw}
  .hero-visual{width:min(34vw,40vh)}
  .hero-foot{width:min(70vw,560px)}
  .row-z .ph{grid-column:1/7}.row-z .tx{grid-column:8/13}
  .row-z:nth-child(even) .ph{grid-column:7/13}.row-z:nth-child(even) .tx{grid-column:1/6}
  .fiche .head{grid-column:1/13;margin-bottom:2rem}.fiche dl{grid-column:1/13}
  .selection{grid-template-columns:repeat(2,minmax(0,1fr));height:62svh}
  .sel-close{top:calc(62svh + 8px)}
  .menu{width:min(52vw,440px)}
}
/* ── gsm ── */
@media (max-width:650px){
  .track.stair{--cw:64vw}
  :root{--t-marquee:30vw;--gap:14px}
  .bar{grid-template-columns:1fr auto;}
  .bar .l{display:none}
  .bar .wm{justify-self:start}
  .hero-visual{width:58vw;transform:translate(-50%,-62%)}
  .marquee{transform:translateY(-62%)}
  .hero-foot{width:calc(100% - 2*var(--pad));bottom:96px}
  .corner--l{display:none}
  .corner--r{left:var(--pad);right:var(--pad);justify-content:space-between}
  .btn-sel{flex:1;justify-content:center}
  .grow-stage{height:220svh}
  .gallery-head{flex-direction:column;align-items:flex-start}
  .zcard{width:72vw}
  .zcard:nth-child(even){margin-top:36px}
  .row-z{grid-template-columns:1fr;row-gap:22px}
  .zstack .st-1{transform:rotate(2deg) translate(1.5%,-1.5%)}.zstack .st-2{transform:rotate(-2.5deg) translate(-1.5%,1%)}
  .row-z .ph,.row-z .tx,.row-z:nth-child(even) .ph,.row-z:nth-child(even) .tx{grid-column:1/-1;order:0}
  .long{max-width:none}
  .form{grid-template-columns:1fr;gap:18px}
  .form .btn{justify-self:start}
  .ed{grid-template-columns:auto 1fr;row-gap:10px}
  .ed .facts,.ed .st{grid-column:2}
  .ed .arrow{display:none}
  footer .top{grid-template-columns:1fr;justify-items:start}
  footer .c{text-align:left}
  footer .r{justify-self:start;text-align:left}
  .menu{left:var(--pad);right:var(--pad);width:auto;aspect-ratio:auto;min-height:62svh;bottom:20px}
  .selection{grid-template-columns:repeat(2,minmax(0,1fr));height:78svh;padding:16px var(--pad)}
  .scard{grid-template-rows:minmax(0,1fr) 32%}
  .scard{--vt:22px}
  .sel-close{top:calc(78svh + 6px)}
  html.sel-open .page{transform:translateY(var(--sel-y,0)) scale(.22)}
}
@media (prefers-reduced-motion:reduce){
  .marquee .row,.band .row{animation:none}
  .rv{opacity:1!important;transform:none!important}
  .grow-stage{height:auto}
  .grow-stage .hero{position:relative}
}

/* objecten tussen de woorden van een titel */
.ti{display:inline-block;height:.86em;width:auto;vertical-align:-.12em;margin:0 .04em;transform:rotate(var(--r,0deg));transition:transform .7s var(--ease-out);pointer-events:auto}
.ti:hover{transform:rotate(calc(var(--r,0deg) * -1.4)) scale(1.1)}

/* cursor (assets/cursor.js): enkel met een muis. Kleur van het bolletje en van het woord erin. */
:root{--cursor:#E63323;--cursor-ink:var(--klei)}
html.has-cursor,html.has-cursor *{cursor:none!important}
html.has-cursor input:not([type=submit]):not([type=button]),html.has-cursor textarea{cursor:text!important}
.mcursor{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}
.mcursor-label{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-size:13px;line-height:1;color:var(--cursor-ink);opacity:0;transition:opacity .25s;white-space:nowrap}
.mcursor-label.on{opacity:1}

/* schuine band in koraal op de naad tussen twee secties: twee rijen die elk een andere kant op lopen */
.tilt{position:relative;z-index:5;overflow:hidden;padding:clamp(22px,2.6vw,46px) 0;margin:calc(clamp(22px,2.6vw,46px) * -1) 0;background:linear-gradient(to bottom,var(--zand) 50%,var(--klei) 50%)}
.tilt-band{width:108%;margin-left:-4%;transform:rotate(-2.2deg);background:var(--koraal);color:var(--mahonie);padding:clamp(14px,1.8vw,28px) 0;overflow:hidden}
.tilt-band .row{display:flex;width:max-content;white-space:nowrap;animation:loop 38s linear infinite}
.tilt-band .row--rev{animation-direction:reverse;animation-duration:44s;color:var(--klei);margin-top:.05em}
.tilt-band span{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,5vw,88px);line-height:1;padding-right:.32em}
.tilt-band i{font-family:var(--script);font-style:normal;position:relative;top:.12em;padding:0 .1em}
@media (prefers-reduced-motion: reduce){.tilt-band .row{animation:none}}
/* deur iets groter; de sleutel ligt plat en draait één keer om zodra de titel verschijnt (en opnieuw bij hover) */
.ti--deur{height:1.06em;vertical-align:-.2em}
.ti--key{height:.6em;vertical-align:.06em;margin:0 .1em;animation:keyturn 1.3s .25s cubic-bezier(.65,0,.35,1) both}
.ti--key:hover{animation:keyturn2 1.1s cubic-bezier(.65,0,.35,1) both}
@keyframes keyturn{from{transform:rotate(var(--r)) perspective(400px) rotateX(0)}to{transform:rotate(var(--r)) perspective(400px) rotateX(360deg)}}
@keyframes keyturn2{from{transform:rotate(var(--r)) perspective(400px) rotateX(0)}to{transform:rotate(var(--r)) perspective(400px) rotateX(360deg)}}
@media (prefers-reduced-motion: reduce){.ti--key,.ti--key:hover{animation:none}}