body.fsp-page{background:#020b18}.fsp-page .site-content,.fsp-page #primary,.fsp-page .content-area{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}.fsp-page #primary{border:0!important}.fsp-project{background:var(--fsp-bg);color:var(--fsp-text);overflow:hidden}.fsp-project *{box-sizing:border-box}.fsp-hero{width:100%;height:auto;min-height:0;aspect-ratio:var(--fsp-hero-ratio,16 / 9);background-image:var(--fsp-hero);background-size:100% 100%;background-repeat:no-repeat;background-position:center;position:relative}.fsp-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,var(--fsp-bg) 100%)}.fsp-scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;text-decoration:none!important;text-transform:uppercase;letter-spacing:.18em;font-size:11px;text-shadow:0 2px 12px #000}.fsp-scroll i{font-size:25px;font-style:normal;animation:fspFloat 1.8s ease-in-out infinite}@keyframes fspFloat{50%{transform:translateY(6px)}}.fsp-intro{padding:clamp(70px,9vw,145px) 6vw;display:flex;justify-content:center;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--fsp-accent) 14%,transparent),transparent 45%)}.fsp-copy{width:min(950px,100%);text-align:center}.fsp-kicker,.fsp-section-head>span,.fsp-editorial>div>span,.fsp-credits>span{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--fsp-accent);font-weight:700}.fsp-copy h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(44px,7vw,100px);line-height:.96;margin:20px 0 16px;color:var(--fsp-text)}.fsp-subtitle{text-transform:uppercase;letter-spacing:.26em;opacity:.72;font-size:13px}.fsp-lead{font-size:clamp(18px,2vw,24px);line-height:1.75;max-width:760px;margin:42px auto 0;opacity:.9}.fsp-button{display:inline-flex;gap:18px;align-items:center;margin-top:35px;padding:14px 22px;border:1px solid color-mix(in srgb,var(--fsp-accent) 55%,transparent);color:var(--fsp-text)!important;text-decoration:none!important;text-transform:uppercase;letter-spacing:.13em;font-size:11px}.fsp-button:hover{background:var(--fsp-accent);color:var(--fsp-bg)!important}.fsp-music{padding:80px 0 120px;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--fsp-accent) 18%,transparent) 0%,color-mix(in srgb,var(--fsp-accent) 7%,transparent) 28%,transparent 58%),linear-gradient(180deg,color-mix(in srgb,var(--fsp-accent) 5%,var(--fsp-bg)),var(--fsp-bg))}.fsp-section-head{text-align:center;max-width:800px;margin:0 auto 60px}.fsp-section-head h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,5vw,64px);font-weight:400;margin:13px 0;color:var(--fsp-text)}.fsp-section-head p{opacity:.68}.fsp-records{max-width:none;margin:0}.fsp-records .rr-storefront__head{display:none!important}.fsp-records .rr-root,.fsp-records .rr-storefront{background:transparent!important}.fsp-records .rr-root{--rr-paper:transparent!important}.fsp-editorial{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:8vw;padding:clamp(80px,10vw,150px) max(6vw,30px);max-width:1450px;margin:auto;border-top:1px solid color-mix(in srgb,var(--fsp-text) 13%,transparent)}.fsp-editorial h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(36px,5vw,68px);font-weight:400;line-height:1.05;margin:16px 0;color:var(--fsp-text)}.fsp-prose{font-size:18px;line-height:1.9;opacity:.86}.fsp-credits{padding:60px max(6vw,30px) 110px;max-width:1450px;margin:auto;border-top:1px solid color-mix(in srgb,var(--fsp-text) 13%,transparent);display:grid;grid-template-columns:220px 1fr;gap:40px}.fsp-credits div{line-height:1.8;opacity:.8}.fsp-index{background:#030914;color:#fff;padding:90px 0 0}.fsp-index__head{padding:0 6vw 70px;max-width:1400px;margin:auto}.fsp-index__head span{letter-spacing:.28em;font-size:11px;opacity:.6}.fsp-index__head h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(50px,7vw,100px);font-weight:400;margin:12px 0}.fsp-index__head p{font-size:20px;opacity:.7}.fsp-index-card{height:min(72vh,760px);min-height:480px;display:flex;align-items:flex-end;position:relative;background-size:cover;background-position:center;text-decoration:none!important;color:#fff!important;overflow:hidden}.fsp-index-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03) 30%,rgba(0,0,0,.82) 100%);transition:.4s}.fsp-index-card:hover .fsp-index-card__shade{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.7))}.fsp-index-card__copy{position:relative;z-index:2;padding:5vw 6vw;display:grid;gap:7px}.fsp-index-card__copy small{letter-spacing:.25em}.fsp-index-card__copy strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,74px);font-weight:400}.fsp-index-card__copy em{font-style:normal;opacity:.75}.fsp-index-card__copy b{margin-top:15px;text-transform:uppercase;letter-spacing:.15em;font-size:11px}.fsp-index-card__copy b span{display:inline-block;margin-left:10px;transition:.25s}.fsp-index-card:hover b span{transform:translateX(8px)}
@media(max-width:700px){.fsp-hero{width:100%;height:auto;min-height:0;aspect-ratio:var(--fsp-hero-mobile-ratio,var(--fsp-hero-ratio,16 / 9));background-image:var(--fsp-hero-mobile,var(--fsp-hero));background-size:100% 100%;background-position:center}.fsp-intro{padding-left:24px;padding-right:24px}.fsp-music{padding-left:0;padding-right:0}.fsp-editorial{grid-template-columns:1fr;gap:35px}.fsp-credits{grid-template-columns:1fr;gap:18px}.fsp-index-card{height:62vh;min-height:420px}.fsp-index-card__copy{padding:35px 24px}}

/* Special Projects heeft bewust geen Astra-header of -footer. De banner begint direct bovenaan. */
body.fsp-page{margin:0!important;padding:0!important}
body.fsp-page.admin-bar .fsp-language-switcher{top:calc(22px + 32px)}
.fsp-project{position:relative;min-height:100vh}
.fsp-language-switcher{position:absolute;z-index:100;top:22px;right:clamp(18px,3vw,48px);padding:0;margin:0}
.fsp-language-switcher .sl-switcher{background:rgba(2,11,24,.58)!important;border-color:rgba(255,255,255,.28)!important;box-shadow:0 8px 30px rgba(0,0,0,.28)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fsp-language-switcher .sl-switcher__link{color:#fff!important}
.fsp-language-switcher .sl-switcher__link:hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
.fsp-language-switcher .sl-switcher__link.is-active{background:#fff!important;color:#071525!important}
@media(max-width:782px){body.fsp-page.admin-bar .fsp-language-switcher{top:calc(14px + 46px)}}
@media(max-width:700px){.fsp-language-switcher{top:14px;right:14px}.fsp-language-switcher .sl-switcher__link{min-width:30px;height:28px;padding:0 7px}}


/* Rustige teruglink naar de hoofdwebsite, als tegenhanger van de taalwisselaar. */
.fsp-back-site{position:absolute;z-index:100;top:22px;left:clamp(18px,3vw,48px);display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(2,11,24,.58);box-shadow:0 8px 30px rgba(0,0,0,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1;text-transform:uppercase;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.fsp-back-site span:first-child{font-size:17px;font-weight:400;line-height:.8;transition:transform .2s ease}
.fsp-back-site:hover,.fsp-back-site:focus{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.48);color:#fff!important}
.fsp-back-site:hover span:first-child,.fsp-back-site:focus span:first-child{transform:translateX(-3px)}
body.fsp-page.admin-bar .fsp-back-site{top:calc(22px + 32px)}
@media(max-width:782px){body.fsp-page.admin-bar .fsp-back-site{top:calc(14px + 46px)}}
@media(max-width:700px){.fsp-back-site{top:14px;left:14px;padding:8px 10px;font-size:10px;letter-spacing:.06em}.fsp-back-site span:first-child{font-size:15px}}

/* Per-project bannerhoogte. Automatisch behoudt de originele verhouding; vaste hoogtes gebruiken cover zonder vervorming. */
.fsp-hero.fsp-hero--fixed{height:var(--fsp-hero-height);aspect-ratio:auto;background-size:cover;background-position:var(--fsp-hero-position,center) center}
@media(max-width:700px){.fsp-hero.fsp-hero--fixed:not(.fsp-hero--mobile-fixed){height:auto;aspect-ratio:var(--fsp-hero-mobile-ratio,var(--fsp-hero-ratio,16 / 9));background-size:100% 100%}.fsp-hero.fsp-hero--mobile-fixed{height:var(--fsp-hero-mobile-height);aspect-ratio:auto;background-size:cover;background-position:var(--fsp-hero-position,center) center}}

/* 1.1.6: projectbanner vult altijd exact de dynamische viewport. */
.fsp-project .fsp-hero{height:100vh;height:100dvh;min-height:0;aspect-ratio:auto;background-size:cover;background-position:var(--fsp-hero-position,center) center;background-repeat:no-repeat}
@media(max-width:700px){.fsp-project .fsp-hero{height:100vh;height:100dvh;aspect-ratio:auto;background-image:var(--fsp-hero-mobile,var(--fsp-hero));background-size:cover;background-position:var(--fsp-hero-position,center) center}}

/* 1.1.7: redactionele projecttekst direct onder de banner. */
.fsp-project-story{padding:clamp(64px,8vw,120px) max(24px,6vw);background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--fsp-accent) 12%,transparent),transparent 48%)}
.fsp-project-story__inner{width:min(920px,100%);margin:0 auto}
.fsp-project-story h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5.2vw,70px);font-weight:400;line-height:1.05;margin:0 0 34px;color:var(--fsp-text);text-align:center}
.fsp-project-story__text{font-size:clamp(17px,1.55vw,20px);line-height:1.85;color:var(--fsp-text);opacity:.9}
.fsp-project-story__text p{margin:0 0 1.45em}.fsp-project-story__text p:last-child{margin-bottom:0}


/* 1.1.10: intro als onderdeel van de projectwereld, zonder los tekstvlak. */
.fsp-project-story{
 position:relative;
 overflow:hidden;
 padding:clamp(72px,8vw,112px) max(24px,6vw) clamp(64px,7vw,100px);
 background:
  radial-gradient(ellipse at 50% -10%,color-mix(in srgb,var(--fsp-accent) 20%,transparent) 0%,color-mix(in srgb,var(--fsp-accent) 8%,transparent) 30%,transparent 67%),
  linear-gradient(180deg,color-mix(in srgb,var(--fsp-accent) 3%,var(--fsp-bg)) 0%,var(--fsp-bg) 100%);
}
.fsp-project-story:before{
 content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:min(760px,70vw);height:1px;
 background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fsp-accent) 70%,white),transparent);opacity:.65
}
.fsp-project-story__inner{width:min(980px,100%);margin:0 auto;position:relative;padding-left:clamp(26px,3vw,42px)}
.fsp-project-story__inner:before{
 content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:1px;
 background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--fsp-accent) 85%,white) 18%,color-mix(in srgb,var(--fsp-accent) 40%,transparent) 82%,transparent 100%);
 box-shadow:0 0 18px color-mix(in srgb,var(--fsp-accent) 40%,transparent)
}
.fsp-project-story__text{font-size:clamp(18px,1.55vw,21px);line-height:1.82;color:var(--fsp-text);opacity:.94;letter-spacing:.005em}
.fsp-project-story__text p{margin:0 0 1.35em}.fsp-project-story__text p:last-child{margin-bottom:0}
.fsp-music{padding-top:clamp(45px,5vw,70px)}
@media(max-width:700px){
 .fsp-project-story{padding:56px 24px 52px}
 .fsp-project-story__inner{padding-left:22px}
 .fsp-project-story__text{font-size:17px;line-height:1.75}
 .fsp-music{padding-top:34px}
}


/* 1.1.11: compactere, duidelijk zichtbare intro en naadloze overgang naar records. */
.fsp-project-story{
 padding:clamp(62px,6vw,88px) max(24px,6vw) clamp(58px,5.5vw,82px);
 background:
  radial-gradient(ellipse 58% 95% at 26% 42%,color-mix(in srgb,var(--fsp-accent) 18%,transparent) 0%,color-mix(in srgb,var(--fsp-accent) 7%,transparent) 38%,transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--fsp-accent) 4%,var(--fsp-bg)) 0%,var(--fsp-bg) 82%);
}
.fsp-project-story:before{display:none}
.fsp-project-story__inner{width:min(880px,100%);padding-left:clamp(34px,4vw,54px)}
.fsp-project-story__inner:before{
 top:4px;bottom:auto;height:112px;width:2px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--fsp-accent) 95%,white),color-mix(in srgb,var(--fsp-accent) 34%,transparent),transparent);
 box-shadow:0 0 10px color-mix(in srgb,var(--fsp-accent) 75%,transparent),0 0 32px color-mix(in srgb,var(--fsp-accent) 35%,transparent)
}
.fsp-project-story__inner:after{
 content:"✦";position:absolute;left:-4px;top:-18px;color:color-mix(in srgb,var(--fsp-accent) 90%,white);font-size:13px;line-height:1;
 text-shadow:0 0 10px color-mix(in srgb,var(--fsp-accent) 90%,transparent),0 0 24px color-mix(in srgb,var(--fsp-accent) 55%,transparent)
}
.fsp-project-story__text{font-size:clamp(19px,1.5vw,22px);line-height:1.72;opacity:.96}
.fsp-project-story__text p:first-child{font-size:clamp(21px,1.75vw,25px);line-height:1.66}
.fsp-music{
 padding-top:clamp(34px,4vw,54px);
 background:
  radial-gradient(ellipse 70% 180px at 50% 0,color-mix(in srgb,var(--fsp-accent) 12%,transparent),transparent 72%),
  var(--fsp-bg)!important;
}
.fsp-records,.fsp-records .rr-root,.fsp-records .rr-storefront,.fsp-records .rr-storefront__body,.fsp-records .rr-grid{
 border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important
}
@media(max-width:700px){
 .fsp-project-story{padding:48px 24px 46px}
 .fsp-project-story__inner{padding-left:28px}
 .fsp-project-story__inner:before{height:86px}
 .fsp-project-story__inner:after{left:-4px;top:-16px}
 .fsp-project-story__text,.fsp-project-story__text p:first-child{font-size:18px;line-height:1.72}
 .fsp-music{padding-top:26px}
}


/* 1.1.12: zichtbare gloed achter de intro; intro en records vormen één doorlopend vlak. */
.fsp-project-story{
 position:relative;
 isolation:isolate;
 padding:clamp(52px,5vw,72px) max(24px,6vw) clamp(48px,4.5vw,66px);
 background:var(--fsp-bg)!important;
}
.fsp-project-story:after{
 content:"";
 position:absolute;
 z-index:-1;
 left:50%;
 top:50%;
 width:min(1100px,92vw);
 height:360px;
 transform:translate(-50%,-50%);
 pointer-events:none;
 background:radial-gradient(
  ellipse at center,
  color-mix(in srgb,var(--fsp-accent) 30%,transparent) 0%,
  color-mix(in srgb,var(--fsp-accent) 17%,transparent) 30%,
  color-mix(in srgb,var(--fsp-accent) 7%,transparent) 52%,
  transparent 76%
 );
 filter:blur(2px);
}
.fsp-project-story__inner{
 width:min(900px,100%);
 margin:0 auto;
 padding-left:44px;
 position:relative;
}
.fsp-project-story__inner:before{
 content:"";
 display:block!important;
 position:absolute;
 left:0;
 top:7px;
 width:2px;
 height:96px;
 background:linear-gradient(180deg,#dff7ff 0%,var(--fsp-accent) 38%,transparent 100%);
 box-shadow:0 0 8px #dff7ff,0 0 20px var(--fsp-accent),0 0 38px var(--fsp-accent);
 opacity:.95;
}
.fsp-project-story__inner:after{
 content:"✦";
 display:block!important;
 position:absolute;
 left:-5px;
 top:-13px;
 color:#eafaff;
 font-size:14px;
 text-shadow:0 0 8px #fff,0 0 18px var(--fsp-accent),0 0 30px var(--fsp-accent);
 opacity:.95;
}
.fsp-project-story__text{
 font-size:clamp(19px,1.45vw,22px);
 line-height:1.72;
 opacity:.98;
}
.fsp-project-story__text p:first-child{
 font-size:inherit;
 line-height:inherit;
}
.fsp-music{
 padding-top:clamp(34px,3.5vw,50px);
 background:var(--fsp-bg)!important;
}
.fsp-records{
 background:transparent!important;
}
@media(max-width:700px){
 .fsp-project-story{padding:42px 24px 44px}
 .fsp-project-story:after{width:120vw;height:300px}
 .fsp-project-story__inner{padding-left:28px}
 .fsp-project-story__inner:before{height:78px}
 .fsp-project-story__text{font-size:18px;line-height:1.7}
 .fsp-music{padding-top:24px}
}


/* 1.1.13 — intro en records zijn één visueel vlak, met een duidelijke editorial intro. */
.fsp-content-flow{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 background:
  radial-gradient(ellipse 68% 560px at 50% 11%,rgba(72,164,255,.22) 0%,rgba(34,101,180,.12) 32%,rgba(2,11,24,0) 72%),
  radial-gradient(ellipse 50% 420px at 16% 48%,rgba(36,112,210,.08) 0%,rgba(2,11,24,0) 74%),
  linear-gradient(180deg,#071526 0%,#04101f 38%,#020b18 78%,#020b18 100%)!important;
}
.fsp-content-flow:before{
 content:"";
 position:absolute;
 left:0;right:0;top:-90px;
 height:190px;
 background:linear-gradient(180deg,rgba(2,11,24,0),rgba(7,21,38,.82) 58%,rgba(7,21,38,0));
 pointer-events:none;
}
.fsp-project-story{
 position:relative;z-index:1;
 padding:clamp(70px,7vw,108px) 24px clamp(52px,4vw,72px)!important;
 background:transparent!important;
}
.fsp-project-story:before,.fsp-project-story:after{display:none!important}
.fsp-project-story__inner{
 width:min(960px,100%)!important;
 margin:0 auto!important;
 position:relative!important;
 padding:clamp(32px,3.5vw,48px) clamp(30px,4vw,58px) clamp(32px,3.5vw,48px) clamp(78px,7vw,104px)!important;
 border:1px solid rgba(164,220,255,.17)!important;
 border-left:0!important;
 border-radius:0 22px 22px 0!important;
 background:linear-gradient(110deg,rgba(18,47,79,.68),rgba(8,26,47,.45) 56%,rgba(5,18,34,.22))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 24px 80px rgba(0,0,0,.15)!important;
 backdrop-filter:blur(5px);
 -webkit-backdrop-filter:blur(5px);
}
.fsp-project-story__inner:before{
 content:""!important;display:block!important;position:absolute!important;
 left:0!important;top:0!important;bottom:0!important;width:3px!important;height:auto!important;
 background:linear-gradient(180deg,rgba(220,247,255,.18),#c8f1ff 22%,#55adff 52%,rgba(85,173,255,.22) 88%,transparent)!important;
 box-shadow:0 0 12px rgba(170,230,255,.9),0 0 34px rgba(61,158,255,.55)!important;
 opacity:1!important;
}
.fsp-project-story__inner:after{display:none!important}
.fsp-project-story__ornament{
 position:absolute;left:25px;top:50%;transform:translateY(-50%);
 display:flex;flex-direction:column;align-items:center;gap:12px;color:#e4f9ff;
}
.fsp-project-story__ornament:before,.fsp-project-story__ornament:after{
 content:"";width:1px;height:52px;background:linear-gradient(180deg,transparent,rgba(160,220,255,.76));
}
.fsp-project-story__ornament:after{background:linear-gradient(180deg,rgba(160,220,255,.76),transparent)}
.fsp-project-story__ornament span{font-size:16px;text-shadow:0 0 8px #fff,0 0 20px rgba(74,174,255,.95)}
.fsp-project-story__text{
 font-size:clamp(19px,1.45vw,22px)!important;line-height:1.78!important;color:var(--fsp-text)!important;opacity:.97!important;
}
.fsp-project-story__text p,.fsp-project-story__text p:first-child{font-size:inherit!important;line-height:inherit!important;margin:0 0 1.25em!important}
.fsp-project-story__text p:last-child{margin-bottom:0!important}
.fsp-music{position:relative;z-index:1;padding:clamp(28px,3vw,44px) 4vw 120px!important;background:transparent!important}
.fsp-records,.fsp-records .rr-root,.fsp-records .rr-storefront,.fsp-records .rr-storefront__body,.fsp-records .rr-grid{background:transparent!important}
@media(max-width:700px){
 .fsp-project-story{padding:46px 18px 38px!important}
 .fsp-project-story__inner{padding:30px 22px 30px 50px!important;border-radius:0 16px 16px 0!important}
 .fsp-project-story__ornament{left:13px}
 .fsp-project-story__ornament:before,.fsp-project-story__ornament:after{height:36px}
 .fsp-project-story__text{font-size:18px!important;line-height:1.7!important}
 .fsp-music{padding:18px 18px 80px!important}
}


/* 1.1.14 — banner eindigt in zwart; blauwe gloed stijgt vanuit de records omhoog. */
.fsp-content-flow{
 background:
   radial-gradient(ellipse 90% 760px at 50% 100%,
     rgba(62,151,255,.30) 0%,
     rgba(29,91,170,.18) 28%,
     rgba(10,42,85,.09) 50%,
     rgba(0,0,0,0) 76%),
   linear-gradient(180deg,
     #000 0%,
     #000 24%,
     #01050b 42%,
     #020b18 72%,
     #06182a 100%)!important;
}
.fsp-content-flow:before{
 display:none!important;
}
.fsp-project-story{
 background:transparent!important;
}
.fsp-project-story__inner{
 background:linear-gradient(110deg,
   rgba(10,18,28,.72) 0%,
   rgba(8,18,31,.52) 58%,
   rgba(6,20,36,.30) 100%)!important;
}
.fsp-music{
 background:transparent!important;
}


/* 1.1.15 — geen sectielijnen: zwart boven, gloed groeit vanuit de records omhoog. */
.fsp-content-flow{
 background:
   radial-gradient(ellipse 105% 900px at 50% 88%,
      rgba(61,151,255,.30) 0%,
      rgba(34,101,188,.20) 24%,
      rgba(15,58,116,.12) 43%,
      rgba(5,27,58,.055) 60%,
      rgba(0,0,0,0) 78%),
   linear-gradient(180deg,
      #000 0%,
      #000 18%,
      #01040a 35%,
      #020914 54%,
      #041326 73%,
      #071d35 100%)!important;
}
.fsp-content-flow:before,.fsp-content-flow:after{display:none!important}

/* Intro hoort bij de achtergrond; geen zichtbaar paneel of kader. */
.fsp-project-story{
 background:transparent!important;
 padding:clamp(72px,7vw,108px) 24px clamp(66px,5vw,88px)!important;
}
.fsp-project-story__inner{
 width:min(960px,100%)!important;
 margin:0 auto!important;
 padding:0 0 0 42px!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}
.fsp-project-story__inner:before{
 left:0!important;
 top:6px!important;
 bottom:auto!important;
 width:2px!important;
 height:92px!important;
 background:linear-gradient(180deg,#dff8ff 0%,#66baff 38%,rgba(70,165,255,.24) 74%,transparent 100%)!important;
 box-shadow:0 0 9px rgba(190,238,255,.75),0 0 24px rgba(55,151,255,.35)!important;
}
.fsp-project-story__ornament{display:none!important}
.fsp-project-story__text{max-width:900px}

/* Retro Records: alle bekende buitenlagen transparant en zonder kader/schaduw. */
.fsp-music,
.fsp-records,
.fsp-records > *,
.fsp-records .rr-root,
.fsp-records .rr-wrap,
.fsp-records .rr-container,
.fsp-records .rr-storefront,
.fsp-records .rr-storefront__body,
.fsp-records .rr-grid,
.fsp-records .rr-records,
.fsp-records .retro-records,
.fsp-records .retro-records-wrap{
 background:transparent!important;
 background-color:transparent!important;
}
.fsp-records,
.fsp-records > *,
.fsp-records .rr-root,
.fsp-records .rr-wrap,
.fsp-records .rr-container,
.fsp-records .rr-storefront,
.fsp-records .rr-storefront__body,
.fsp-records .retro-records,
.fsp-records .retro-records-wrap{
 border-color:transparent!important;
 box-shadow:none!important;
}
.fsp-music{
 padding-top:0!important;
 margin-top:0!important;
 border:0!important;
}
@media(max-width:700px){
 .fsp-project-story{padding:48px 20px 52px!important}
 .fsp-project-story__inner{padding-left:28px!important}
 .fsp-project-story__inner:before{height:72px!important}
}


/* 1.1.16 — eerst de basis goed: uitsluitend een vloeiende overgang van zwart naar recordachtergrond. */
.fsp-content-flow{
 background:linear-gradient(
   180deg,
   #000000 0%,
   #000000 12%,
   #01060c 28%,
   #06111d 48%,
   #0b1b2b 68%,
   #10283d 84%,
   #132f47 100%
 )!important;
}
.fsp-content-flow:before,
.fsp-content-flow:after{display:none!important}

/* Geen gloed of afzonderlijk introvlak. */
.fsp-project-story{
 background:transparent!important;
}
.fsp-project-story:before,
.fsp-project-story:after{display:none!important}
.fsp-project-story__inner{
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}
.fsp-project-story__inner:before{
 box-shadow:none!important;
}

/* Records laten de gezamenlijke verloopachtergrond door. */
.fsp-music,
.fsp-records,
.fsp-records > *,
.fsp-records .rr-root,
.fsp-records .rr-wrap,
.fsp-records .rr-container,
.fsp-records .rr-storefront,
.fsp-records .rr-storefront__body,
.fsp-records .rr-grid,
.fsp-records .rr-records,
.fsp-records .retro-records,
.fsp-records .retro-records-wrap{
 background:transparent!important;
 background-color:transparent!important;
}


/* 1.1.17 — definitieve basisovergang.
   Belangrijk: assetversie is nu ook verhoogd, zodat browsers/LiteSpeed deze CSS echt opnieuw laden. */
.fsp-project .fsp-hero__veil{
 background:linear-gradient(180deg,transparent 72%,rgba(0,0,0,.28) 86%,#000 100%)!important;
}

/* Bovenkant direct zwart. De kleur bouwt alleen verticaal op naar exact de kleur
   waarmee het recordgedeelte begint. Geen gloed, geen radiale gradient. */
.fsp-content-flow{
 --fsp-record-bg:color-mix(in srgb,var(--fsp-accent) 5%,var(--fsp-bg));
 background:#000!important;
}
.fsp-content-flow:before,
.fsp-content-flow:after{display:none!important}

.fsp-project-story{
 background:linear-gradient(
   180deg,
   #000 0%,
   #000 8%,
   color-mix(in srgb,#000 82%,var(--fsp-record-bg)) 30%,
   color-mix(in srgb,#000 58%,var(--fsp-record-bg)) 55%,
   color-mix(in srgb,#000 28%,var(--fsp-record-bg)) 78%,
   var(--fsp-record-bg) 100%
 )!important;
 margin:0!important;
}

/* Het recordgedeelte start exact op de eindkleur van bovenstaande gradient. */
.fsp-music{
 background:var(--fsp-record-bg)!important;
 margin:0!important;
 border:0!important;
}

/* Alleen de storefront zelf transparant; de release-cards behouden hun Retro Records styling. */
.fsp-records,
.fsp-records .rr-root,
.fsp-records .rr-storefront,
.fsp-records .rr-grid{
 background:transparent!important;
 background-color:transparent!important;
}
.fsp-records .rr-storefront{
 border:0!important;
 box-shadow:none!important;
}

/* Geen gloed rond de intro. */
.fsp-project-story__inner{
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}
.fsp-project-story__inner:before{
 box-shadow:none!important;
}


/* 1.1.18 — kleine gloed vanuit het midden van de records naar boven.
   De gloed blijft ruim onder de banner en verandert de basisgradient niet. */
.fsp-music{
 position:relative!important;
 isolation:isolate;
 overflow:visible!important;
}
.fsp-music:before{
 content:"";
 position:absolute;
 z-index:-1;
 pointer-events:none;
 left:50%;
 top:-210px;
 width:min(920px,78vw);
 height:470px;
 transform:translateX(-50%);
 background:radial-gradient(
   ellipse at 50% 72%,
   color-mix(in srgb,var(--fsp-accent) 19%,transparent) 0%,
   color-mix(in srgb,var(--fsp-accent) 11%,transparent) 28%,
   color-mix(in srgb,var(--fsp-accent) 5%,transparent) 48%,
   transparent 72%
 );
 filter:blur(12px);
 opacity:.82;
}
.fsp-records{
 position:relative;
 z-index:1;
}
@media(max-width:700px){
 .fsp-music:before{
   top:-150px;
   width:94vw;
   height:360px;
   opacity:.72;
 }
}


/* 1.1.19 — verloopkleur per project instelbaar. */
.fsp-content-flow{
 --fsp-record-bg:var(--fsp-gradient)!important;
}


/* 1.1.20 — kleurrollen gecorrigeerd:
   --fsp-gradient = kleur direct onder de banner / start van het verloop
   --fsp-bg       = achtergrondkleur van het recordgedeelte / einde van het verloop
   --fsp-accent   = ornament en gloed
*/
.fsp-content-flow{
 --fsp-record-bg:var(--fsp-bg)!important;
 background:var(--fsp-bg)!important;
}
.fsp-project-story{
 background:linear-gradient(
   180deg,
   var(--fsp-gradient) 0%,
   var(--fsp-gradient) 8%,
   color-mix(in srgb,var(--fsp-gradient) 82%,var(--fsp-bg)) 30%,
   color-mix(in srgb,var(--fsp-gradient) 58%,var(--fsp-bg)) 55%,
   color-mix(in srgb,var(--fsp-gradient) 28%,var(--fsp-bg)) 78%,
   var(--fsp-bg) 100%
 )!important;
}
.fsp-music{
 background:var(--fsp-bg)!important;
}


/* 1.1.21 — accentkleur daadwerkelijk toepassen op ornament + gloed.
   Geen color-mix met transparent voor de kernkleur: de ingestelde hexkleur
   wordt rechtstreeks gebruikt en transparantie gebeurt via opacity/mask. */

/* Streepje / ornament boven de introtekst */
.fsp-project-story__ornament{
 color:var(--fsp-accent)!important;
}
.fsp-project-story__ornament:before,
.fsp-project-story__ornament:after{
 background:var(--fsp-accent)!important;
 border-color:var(--fsp-accent)!important;
}
.fsp-project-story__ornament span{
 color:var(--fsp-accent)!important;
}

/* Subtiele gloed vanuit de records omhoog */
.fsp-music:before{
 background:radial-gradient(
   ellipse at 50% 72%,
   var(--fsp-accent) 0%,
   color-mix(in srgb,var(--fsp-accent) 70%,transparent) 24%,
   color-mix(in srgb,var(--fsp-accent) 32%,transparent) 46%,
   transparent 72%
 )!important;
 opacity:.24!important;
}


/* 1.1.23 — het zichtbare verticale streepje is ::before van __inner.
   Oude regel gebruikte vaste blauwe hexkleuren; nu volledig gekoppeld aan Accentkleur. */
.fsp-project-story__inner:before{
 background:linear-gradient(
   180deg,
   color-mix(in srgb,var(--fsp-accent) 45%,white) 0%,
   var(--fsp-accent) 38%,
   color-mix(in srgb,var(--fsp-accent) 24%,transparent) 74%,
   transparent 100%
 )!important;
 box-shadow:none!important;
}


/* 1.1.25 — subtiele 40px overlap tussen banner en verloop.
   De overlay ligt uitsluitend over de onderste 40px van de banner:
   boven volledig transparant, onder volledig de ingestelde verloopkleur. */
.fsp-hero{
 position:relative!important;
 overflow:hidden!important;
}
.fsp-hero:after{
 content:"";
 position:absolute;
 z-index:3;
 left:0;
 right:0;
 bottom:0;
 height:40px;
 pointer-events:none;
 background:linear-gradient(
   180deg,
   color-mix(in srgb,var(--fsp-gradient) 0%,transparent) 0%,
   color-mix(in srgb,var(--fsp-gradient) 16%,transparent) 28%,
   color-mix(in srgb,var(--fsp-gradient) 48%,transparent) 62%,
   var(--fsp-gradient) 100%
 );
}


/* 1.1.27 — Retro Records cardkleur per Special Project.
   Exacte Retro Records-selector: .rr-release.
   Alleen binnen Special Projects, dus elders blijft Retro Records onaangetast. */
.fsp-project .fsp-records .rr-root .rr-release,
.fsp-project .fsp-records .rr-root--grid3 .rr-release{
 background:var(--fsp-card)!important;
}
@media(max-width:700px){
 .fsp-project .fsp-records .rr-root .rr-release{
  background:var(--fsp-card)!important;
 }
}


/* 1.1.28 — contentbreedte gelijk aan de standaard Astra-container.
   Astra publiceert de ingestelde sitebreedte via --ast-container-default-xlg.
   Fallback is 1200px voor het geval de Astra-variabele niet beschikbaar is.
   De banner blijft volledig schermbreed. */


/* 1.1.29 — records volgen Astra-breedte, introtekst blijft als leesblok gecentreerd.
   1.1.28 maakte ook de intro zelf Astra-breed; daardoor verschoof de tekst optisch. */
.fsp-project .fsp-project-story__inner{
 width:calc(100% - 40px)!important;
 max-width:960px!important;
 margin-left:auto!important;
 margin-right:auto!important;
 box-sizing:border-box!important;
}
@media(max-width:544px){
 .fsp-project .fsp-project-story__inner{
  width:calc(100% - 32px)!important;
 }
}


/* 1.1.30 — rustige projectfooter met WP-menulocatie. */
.fsp-footer{
 background:var(--fsp-bg);
 color:var(--fsp-text);
 padding:72px 20px 34px;
}
.fsp-footer__inner{
 width:calc(100% - 40px);
 max-width:var(--ast-container-default-xlg,1200px);
 margin:0 auto;
 text-align:center;
}
.fsp-footer__line{
 display:block;
 width:72px;
 height:1px;
 margin:0 auto 25px;
 background:var(--fsp-accent);
 opacity:.8;
 box-shadow:0 0 14px color-mix(in srgb,var(--fsp-accent) 38%,transparent);
}
.fsp-footer__brand{
 display:inline-block;
 color:var(--fsp-text)!important;
 text-decoration:none!important;
 font-size:18px;
 font-weight:700;
 letter-spacing:.16em;
 text-transform:uppercase;
}
.fsp-footer__nav{margin-top:24px}
.fsp-footer__menu{
 list-style:none!important;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 gap:10px 24px;
 padding:0!important;
 margin:0!important;
}
.fsp-footer__menu li{margin:0!important;padding:0!important}
.fsp-footer__menu a{
 color:var(--fsp-text)!important;
 text-decoration:none!important;
 font-size:13px;
 letter-spacing:.08em;
 text-transform:uppercase;
 opacity:.72;
 transition:opacity .2s ease,color .2s ease;
}
.fsp-footer__menu a:hover,
.fsp-footer__menu a:focus{
 color:var(--fsp-accent)!important;
 opacity:1;
}
.fsp-footer__bottom{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:20px;
 margin-top:46px;
 padding-top:20px;
 border-top:1px solid color-mix(in srgb,var(--fsp-text) 10%,transparent);
 font-size:12px;
 opacity:.58;
}
.fsp-footer__bottom a{
 color:inherit!important;
 text-decoration:none!important;
}
.fsp-footer__bottom a:hover,
.fsp-footer__bottom a:focus{color:var(--fsp-accent)!important}
@media(max-width:700px){
 .fsp-footer{padding:58px 16px 28px}
 .fsp-footer__inner{width:100%}
 .fsp-footer__menu{gap:10px 18px}
 .fsp-footer__bottom{
  flex-direction:column;
  justify-content:center;
  gap:9px;
  margin-top:36px;
 }
}


/* 1.1.31 — apart taalafhankelijk footermenu uit Site Languages. */
.fsp-footer .sl-footer-language-menu{margin-top:24px!important}
.fsp-footer .sl-footer-language-menu__list{
 list-style:none!important;
 display:flex!important;
 flex-wrap:wrap!important;
 justify-content:center!important;
 align-items:center!important;
 gap:10px 24px!important;
 padding:0!important;
 margin:0!important;
}
.fsp-footer .sl-footer-language-menu__list li{margin:0!important;padding:0!important}
.fsp-footer .sl-footer-language-menu__list a{
 color:var(--fsp-text)!important;
 text-decoration:none!important;
 font-size:13px!important;
 letter-spacing:.08em!important;
 text-transform:uppercase!important;
 opacity:.72;
 transition:opacity .2s ease,color .2s ease;
}
.fsp-footer .sl-footer-language-menu__list a:hover,
.fsp-footer .sl-footer-language-menu__list a:focus,
.fsp-footer .sl-footer-language-menu__list .current-menu-item>a{
 color:var(--fsp-accent)!important;
 opacity:1;
}
@media(max-width:700px){
 .fsp-footer .sl-footer-language-menu__list{gap:10px 18px!important}
}


/* 1.1.32 — compactere overgang van laatste record naar footer.
   De vormgeving blijft gelijk; alleen de overtollige verticale ruimte is teruggebracht. */
.fsp-project .fsp-music{
 padding-bottom:55px!important;
}
.fsp-project .fsp-footer{
 padding-top:42px!important;
}
.fsp-project .fsp-footer__line{
 margin-bottom:22px!important;
}
.fsp-project .fsp-footer__bottom{
 margin-top:34px!important;
}
@media(max-width:700px){
 .fsp-project .fsp-music{
  padding-bottom:42px!important;
 }
 .fsp-project .fsp-footer{
  padding-top:36px!important;
 }
 .fsp-project .fsp-footer__bottom{
  margin-top:30px!important;
 }
}

/* 1.1.35 — mobiele Retro Records-breedte gelijk aan de standaard weergave.
   Special Projects voegt op mobiel zelf geen horizontale ruimte toe rond de shortcode;
   de Retro Records-plugin bepaalt daarmee, net als op een gewone pagina, de eigen inspringing. */
@media(max-width:700px){
 .fsp-project .fsp-music{
  padding-left:0!important;
  padding-right:0!important;
 }
 .fsp-project .fsp-music > .ast-container{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
 }
 .fsp-project .fsp-records{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
 }
}

/* Uitgebreide projectbeschrijving */
.fsp-project-read-link{display:inline-flex;align-items:center;gap:.55em;margin-top:1.5rem;padding:.65rem 0;color:var(--fsp-accent);font-size:clamp(17px,1.4vw,20px);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;transition:opacity .2s ease}
.fsp-project-read-link:hover,.fsp-project-read-link:focus-visible{opacity:.75;color:var(--fsp-accent)}
.fsp-project-story--more{min-height:35vh}