/* org.tdgdigital.com — tijdelijke homepage Internationaal Orgelfestival Haarlem.
   Huisstijl overgenomen van organfestival.nl: Cabin, paars balk, magenta/blauw vlakken, schulprand, kruisjespatroon, noten. */
:root{
  --paars:#751169;
  --magenta:#bb2795;
  --roze:#c40079;
  --blauw:#459bda;
  --tekst:#333;
  --grijs:#666;
  --wit:#fff;
  --max:67.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--grijs);font:400 1.0625rem/1.7 Cabin,Helvetica,Arial,sans-serif;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:Cabin,Helvetica,Arial,sans-serif;color:var(--tekst);line-height:1.15;margin:0 0 .5em;overflow-wrap:break-word;hyphens:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* knoppen zoals op organfestival.nl: 3px radius, 2px rand */
.knop{display:inline-block;padding:.45em 1.1em;border:.125rem solid currentColor;border-radius:.1875rem;font-weight:500;font-size:1.1875rem;line-height:1.5;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.knop--lijn{color:var(--wit)}
.knop--lijn:hover,.knop--lijn:focus-visible{background:var(--wit);color:var(--paars);border-color:var(--wit)}
.knop--vol{background:var(--magenta);border-color:var(--magenta);color:var(--wit)}
.knop--vol:hover,.knop--vol:focus-visible{background:var(--paars);border-color:var(--paars)}
.knop--wit{color:var(--wit)}
.knop--wit:hover,.knop--wit:focus-visible{background:var(--wit);border-color:var(--wit);color:var(--blauw)}
.voet .knop--wit:hover,.voet .knop--wit:focus-visible{color:var(--magenta)}
:focus-visible{outline:.1875rem solid #ffd400;outline-offset:.1875rem}

.bovenregel{text-wrap:balance;margin:0 0 .6em;font-weight:600;font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- balk ---------- */
.balk{position:relative;z-index:5;background:var(--paars);height:6.875rem}
.balk__in{max-width:72rem;margin:0 auto;padding:0 1rem;height:100%;display:flex;align-items:center;justify-content:flex-end}
.logo{position:absolute;top:0;left:max(1rem,calc(50% - 35rem));width:7.5rem}
.logo img{width:7.5rem}
.balk__nav{display:flex;align-items:center;gap:1.75rem}
.balk__nav>a:not(.knop){color:var(--wit);text-decoration:none;font-weight:500;font-size:1.1875rem;padding:.5rem 0}
.balk__nav>a:not(.knop):hover{text-decoration:underline;text-underline-offset:.25rem}

/* ---------- opening ---------- */
.opening{position:relative;color:var(--wit);text-align:center;padding:6rem 1rem 7.5rem;
  background:linear-gradient(rgba(117,17,105,.86),rgba(117,17,105,.92)),url(img/bavo.webp) center/cover;overflow:hidden}
.opening__in{position:relative;z-index:1;max-width:60rem;margin:0 auto}
.opening h1{color:var(--wit);font-weight:500;font-size:clamp(2rem,4.6vw,3.375rem);max-width:17em;margin:0 auto .45em;text-wrap:balance}
.opening__lead{font-size:clamp(1.125rem,1.7vw,1.3125rem);margin:0 auto 2.5rem;max-width:32em}
.opening__noten{position:absolute;top:2.5rem;width:16.25rem;opacity:.75;pointer-events:none}
.opening__noten--l{left:-3.75rem;transform:rotate(-8deg)}
.opening__noten--r{right:-3.125rem;transform:scaleX(-1) rotate(-6deg)}
@media (prefers-reduced-motion:no-preference){
  .opening__noten--l{animation:zweef 9s ease-in-out infinite alternate}
  .opening__noten--r{animation:zweefR 11s ease-in-out infinite alternate}
}
@keyframes zweef{to{transform:translateY(1.5rem) rotate(-4deg)}}
@keyframes zweefR{to{transform:scaleX(-1) translateY(1.875rem) rotate(-10deg)}}

/* schulprand onderaan, zoals de programmategels */
.schulp{position:absolute;left:0;right:0;bottom:-1px;height:2.75rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='44'%3E%3Cg fill='%23fff'%3E%3Crect y='40' width='360' height='4'/%3E%3Ccircle cx='36' cy='50' r='18'/%3E%3Ccircle cx='108' cy='50' r='26'/%3E%3Ccircle cx='180' cy='50' r='36'/%3E%3Ccircle cx='252' cy='50' r='26'/%3E%3Ccircle cx='324' cy='50' r='18'/%3E%3C/g%3E%3C/svg%3E") repeat-x center bottom/22.5rem 2.75rem}

/* ---------- video (lite-embed: pas bij klik laadt YouTube) ---------- */
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:.1875rem;overflow:hidden;box-shadow:0 1.125rem 3.125rem rgba(40,0,35,.35)}
.video__knop{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.video__knop img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.video__knop:hover img{transform:scale(1.025);filter:brightness(.92)}
.video__knop:focus-visible{outline:.1875rem solid #ffd400;outline-offset:-.1875rem}
.video__play{position:absolute;left:50%;top:50%;width:5.25rem;height:5.25rem;margin:-2.625rem 0 0 -2.625rem;border-radius:50%;background:var(--magenta);box-shadow:0 .375rem 1.5rem rgba(0,0,0,.35);transition:transform .2s,background-color .2s}
.video__play::after{content:"";position:absolute;left:2.125rem;top:1.625rem;border-style:solid;border-width:1rem 0 1rem 1.625rem;border-color:transparent transparent transparent var(--wit)}
.video__knop:hover .video__play{transform:scale(1.08);background:var(--roze)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__onder{font-size:.9375rem;margin:.875rem 0 0;opacity:.85}
.video__onder--donker{color:var(--grijs);opacity:1;text-align:center}

/* ---------- vrienden ---------- */
.vrienden{padding:4.5rem 1rem 6.875rem;
  background:var(--wit) url("data:image/svg+xml;base64,PHN2ZyAgZmlsbD0icmdiYSgwLDAsMCwwLjA0KSIgaGVpZ2h0PSI3MnB4IiB3aWR0aD0iNzJweCIgdmlld0JveD0iMCAwIDcyIDcyIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwb2x5Z29uIHBvaW50cz0iNDAgMjQgMzIgMjQgMzIgMzIgMjQgMzIgMjQgNDAgMzIgNDAgMzIgNDggNDAgNDggNDAgNDAgNDggNDAgNDggMzIgNDAgMzIgNDAgMjQiLz48L3N2Zz4=") 0 0/4.5rem 4.5rem}
.vrienden__in{max-width:60rem;margin:0 auto}
.vrienden h2{text-align:center;font-weight:700;font-size:clamp(1.75rem,3.4vw,2.5rem);color:var(--paars);max-width:18em;margin-left:auto;margin-right:auto;text-wrap:balance}
.vrienden__intro{text-align:center;max-width:36em;margin:0 auto 2.75rem;font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
.bijdrage{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-top:3.5rem;align-items:start}
.bijdrage h3{font-size:1.375rem;font-weight:600;margin-bottom:.6em}
.bijdrage ul{list-style:none;margin:0;padding:0}
.bijdrage li{position:relative;padding:.75rem 0 .75rem 2.125rem;border-top:1px solid rgba(117,17,105,.18);color:var(--tekst)}
.bijdrage li:last-child{border-bottom:1px solid rgba(117,17,105,.18)}
.bijdrage li::before{content:"♪";position:absolute;left:.25rem;top:.625rem;color:var(--magenta);font-size:1.25rem;line-height:1.4}
.vraag{font-size:clamp(1.375rem,2.3vw,1.75rem);font-weight:500;line-height:1.3;color:var(--tekst);margin:0 0 1.5rem}

/* ---------- 2028 ---------- */
.tot2028{position:relative;background:var(--blauw);color:var(--wit);text-align:center;padding:9.375rem 1rem 6rem}
.golf{position:absolute;left:0;right:0;top:-1px;height:6.25rem;
  background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDB2NjBzNTczLjA5IDgwIDEyODAgODBWMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAwdjMwczU3My4wOSAxMTAgMTI4MCAxMTBWMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAwczU3My4wOSAxNDAgMTI4MCAxNDBWMHoiLz48L2c+PC9zdmc+") 0 0/100% 100% no-repeat}
.tot2028__in{max-width:45rem;margin:0 auto}
.tot2028 h2{color:var(--wit);font-weight:700;font-size:clamp(1.625rem,3vw,2.25rem);text-wrap:balance}
.datum{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;margin:0 0 1.25rem}
.tot2028 p:not(.datum):not(.bovenregel){margin:0 auto 2rem;max-width:34em}

/* ---------- voet ---------- */
.voet{position:relative;background:var(--magenta);color:var(--wit);padding:4.5rem 1rem 1.75rem;overflow:hidden}
.voet::before{content:"";position:absolute;right:-2.5rem;top:-1.875rem;width:18.75rem;height:32.5rem;background:url(img/noten.webp) top/contain no-repeat;opacity:.45;pointer-events:none}
.voet__in{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.voet h2{color:var(--wit);font-size:1.5rem;font-weight:600}
.voet p{margin:0 0 1em}
.voet a:not(.knop){text-underline-offset:.1875rem}
.voet .voet__klein{position:relative;max-width:var(--max);margin:3.5rem auto 0;font-size:.875rem;text-align:center;opacity:.9}

/* ---------- tablet / mobiel ---------- */
@media (max-width:980px){
  .opening__noten{width:11.875rem}
  .bijdrage{gap:2.5rem}
}
@media (max-width:760px){
  body{font-size:1rem}
  .balk{height:5rem}
  .logo,.logo img{width:5.375rem}
  .balk__nav{gap:1rem}
  .balk__nav>a:not(.knop){display:none}
  .balk .knop{font-size:1rem;padding:.55em 1em}
  .opening{padding:9.375rem 1rem 6.25rem}
  .opening__noten{width:8.75rem;top:5.625rem;opacity:.55}
  .opening__noten--l{left:-3.125rem}
  .opening__noten--r{right:-3.125rem}
  .opening__lead{margin-bottom:1.75rem}
  .video__play{width:4rem;height:4rem;margin:-2rem 0 0 -2rem}
  .video__play::after{left:1.625rem;top:1.25rem;border-width:.75rem 0 .75rem 1.1875rem}
  .vrienden{padding:3.5rem 1rem 5.625rem}
  .bijdrage{grid-template-columns:1fr;gap:2.25rem;margin-top:2.5rem}
  .bijdrage__vraag{text-align:center}
  .tot2028{padding:6.875rem 1rem 4.5rem}
  .golf{height:3.75rem}
  .voet__in{grid-template-columns:1fr;gap:2rem}
  .voet::before{width:12.5rem;height:21.875rem;opacity:.3}
}

/* liggende telefoon: lage hoogte, logo kleiner en kop vrij van het logo zodat hij boven de vouw blijft */
@media (orientation:landscape) and (max-height:500px){
  .balk{height:4rem}
  .logo,.logo img{width:4rem}
  .balk__nav>a:not(.knop){display:inline;font-size:1.0625rem}
  .balk .knop{font-size:1rem;padding:.55em 1em}
  .opening{padding:1.625rem 6rem 5.625rem}
  .opening h1{font-size:clamp(1.625rem,4.2vw,2.125rem)}
  .opening__lead{font-size:1.0625rem;margin-bottom:1.5rem}
  .opening__noten{display:none}
  .video--opening,.video--talents{max-width:35rem;margin-left:auto;margin-right:auto}
}

/* Brede schermen: boven 1440 px schaalt het hele ontwerp mee (alle maten in rem) */
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}

/* cookiebalk (organfestival.nl) */
body:has(#cookiebar:not([hidden])) .voet{padding-bottom:13rem}
@media (min-width:700px){body:has(#cookiebar:not([hidden])) .voet{padding-bottom:12.5rem}}