/*
Theme Name: Michel de Valk — Dirigent
Theme URI: https://www.micheldevalk.nl/
Author: OpenAI
Description: Een grafisch, responsive one-page WordPress-thema voor dirigent Michel de Valk.
Version: 1.1.0
Text Domain: michel-de-valk
*/

:root{
  --ink:#0b2030;
  --navy:#0d5c82;
  --navy-deep:#073f5b;
  --red:#e52b28;
  --cream:#f4efe5;
  --paper:#fffdf8;
  --muted:#5c6870;
  --line:rgba(11,32,48,.13);
  --shadow:0 24px 60px rgba(11,32,48,.14);
  --radius:26px;
  --space-1:clamp(.55rem,.45rem + .25vw,.8rem);
  --space-2:clamp(.9rem,.8rem + .35vw,1.25rem);
  --space-3:clamp(1.35rem,1.15rem + .7vw,2rem);
  --space-4:clamp(2rem,1.6rem + 1.2vw,3.2rem);
  --space-5:clamp(3rem,2.4rem + 2vw,5rem);
  --space-6:clamp(4rem,3.2rem + 3vw,7rem);
  --container:min(1180px, calc(100vw - 2 * clamp(20px, 4vw, 54px)));
  --title:clamp(3.35rem, 7vw, 7.8rem);
  --h2:clamp(2.25rem, 4.2vw, 4.6rem);
  --h3:clamp(1.3rem, 2vw, 1.75rem);
  --body:clamp(1rem, .96rem + .18vw, 1.12rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-size:var(--body);
  line-height:1.64;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,a{outline-offset:4px}
::selection{background:var(--red);color:#fff}

.site-shell{position:relative;overflow:hidden}
.site-shell:before,
.site-shell:after{
  content:"";position:fixed;inset:auto;z-index:-2;border:1px solid rgba(13,92,130,.13);border-radius:50%;pointer-events:none
}
.site-shell:before{width:44vw;height:44vw;min-width:520px;min-height:520px;left:-18vw;top:5vh}
.site-shell:after{width:30vw;height:30vw;min-width:360px;min-height:360px;right:-10vw;bottom:10vh}

.wrap{width:var(--container);margin-inline:auto}
.eyebrow{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--red)}
.kicker{max-width:52rem;color:var(--muted);font-size:clamp(1.02rem,1rem + .35vw,1.28rem)}

.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(11,32,48,.08)
}
.header-inner{width:var(--container);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:84px}
.brand{display:flex;align-items:center;gap:.9rem;font-weight:900;letter-spacing:-.03em}
.brand img{width:66px;height:46px;object-fit:contain;background:#fff;border-radius:12px;padding:5px}
.brand span{line-height:1.05}.brand small{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);margin-top:.25rem}
.nav{display:flex;gap:1.3rem;align-items:center;font-weight:700;font-size:.94rem}
.nav a{position:relative;padding:.6rem 0}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:.42rem;height:2px;background:var(--red);transition:right .25s ease}
.nav a:hover:after,.nav a:focus-visible:after{right:0}
.menu-toggle{display:none;border:0;background:var(--ink);color:#fff;border-radius:999px;padding:.75rem 1rem;font-weight:800}

.hero{padding:var(--space-5) 0 var(--space-6)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:var(--space-5);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:var(--title);line-height:.83;letter-spacing:-.065em;margin:.18em 0 .22em;max-width:8ch}
.hero h1 .stroke{display:block;color:transparent;-webkit-text-stroke:2px var(--navy)}
.hero-lead{max-width:43rem;font-size:clamp(1.18rem,1.08rem + .55vw,1.58rem);line-height:1.5;color:#263c4a}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:var(--space-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.95rem 1.25rem;border-radius:999px;font-weight:900;border:2px solid var(--ink);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,32,48,.12)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.secondary{background:transparent}
.hero-visual{position:relative;min-height:620px}
.hero-photo{position:absolute;inset:0 0 0 6%;border-radius:44% 44% 24px 24px / 26% 26% 24px 24px;overflow:hidden;box-shadow:var(--shadow);background:var(--navy)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero-visual:before{content:"";position:absolute;width:72%;aspect-ratio:1;border:32px solid var(--navy);border-radius:50%;left:-13%;top:-7%;z-index:-1}
.hero-visual:after{content:"";position:absolute;width:58%;height:14%;border:18px solid var(--red);border-left:0;border-bottom:0;border-radius:0 100% 0 0;right:-10%;bottom:8%;transform:rotate(-10deg);z-index:3;pointer-events:none}
.hero-note{position:absolute;left:-3%;bottom:7%;z-index:5;background:var(--paper);padding:1rem 1.2rem;border-radius:18px;box-shadow:var(--shadow);max-width:240px;font-weight:800;line-height:1.25}
.hero-note span{display:block;color:var(--red);font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.35rem}

.marquee{border-block:1px solid var(--line);background:var(--paper);overflow:hidden}
.marquee-track{display:flex;white-space:nowrap;gap:2.4rem;padding:1rem 0;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--navy);animation:marquee 28s linear infinite}
.marquee-track span:after{content:"✦";color:var(--red);margin-left:2.4rem}
@keyframes marquee{to{transform:translateX(-50%)}}

.section{padding:var(--space-6) 0}
.section-head{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:var(--space-4);align-items:end;margin-bottom:var(--space-4)}
.section h2{font-size:var(--h2);line-height:.95;letter-spacing:-.05em;margin:.2rem 0}

.about-grid{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(0,1.25fr);gap:var(--space-5);align-items:start}
.about-photo{border-radius:var(--radius);overflow:hidden;position:sticky;top:120px;box-shadow:var(--shadow)}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 24%}
.about-copy{display:grid;gap:var(--space-3)}
.about-copy p{margin:0;font-size:clamp(1.06rem,1rem + .25vw,1.22rem)}
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:.4rem}
.fact{padding:1.2rem;border-top:4px solid var(--red);background:rgba(255,255,255,.62);border-radius:0 0 18px 18px}
.fact strong{display:block;font-size:1.35rem;letter-spacing:-.03em}.fact span{color:var(--muted);font-size:.9rem}

.choirs{background:var(--ink);color:#fff;position:relative}
.choirs:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(13,92,130,.22),transparent 40%),repeating-linear-gradient(0deg,transparent 0 36px,rgba(255,255,255,.035) 37px 38px);pointer-events:none}
.choirs .wrap{position:relative}
.choirs .kicker{color:#c7d3da}
.choir-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.choir-card{position:relative;padding:var(--space-3);min-height:300px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);background:rgba(255,255,255,.045);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.choir-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.075)}
.choir-index{font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;color:#85bad2}
.choir-card h3{font-size:clamp(1.55rem,2.2vw,2.2rem);line-height:1.05;letter-spacing:-.035em;margin:.5rem 0 1rem}
.choir-card p{color:#ced7dc;max-width:36rem;margin:0}
.card-link{margin-top:1.3rem;font-weight:900;color:#fff;display:inline-flex;align-items:center;gap:.45rem}
.card-link b{color:var(--red);font-size:1.2em}
.choir-card:after{content:"";position:absolute;width:120px;height:120px;border:10px solid rgba(229,43,40,.6);border-radius:50%;right:-58px;top:-50px}

.split-feature{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.feature{border-radius:var(--radius);padding:var(--space-4);min-height:520px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.feature.academy{background:var(--navy);color:#fff}
.feature.jury{background:var(--red);color:#fff}
.feature h3{font-size:clamp(2.2rem,4vw,4rem);line-height:.93;letter-spacing:-.05em;margin:.4rem 0 1rem;max-width:9ch}
.feature p{max-width:35rem;font-size:1.08rem}
.feature .ghost{position:absolute;right:-.06em;bottom:-.28em;font-size:clamp(10rem,24vw,24rem);font-weight:1000;line-height:1;color:rgba(255,255,255,.09);letter-spacing:-.08em;pointer-events:none}
.feature-list{display:grid;gap:.65rem;margin:1.5rem 0 0;padding:0;list-style:none;max-width:32rem}
.feature-list li{padding:.7rem 0;border-top:1px solid rgba(255,255,255,.25);font-weight:700}

.agenda{padding:var(--space-6) 0;background:var(--paper)}
.agenda-card{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4);align-items:center;background:var(--cream);border-radius:32px;padding:var(--space-4);position:relative;overflow:hidden}
.agenda-card:after{content:"";position:absolute;width:360px;height:360px;border:42px solid var(--navy);border-radius:50%;right:-150px;top:-190px;opacity:.2}
.agenda-card h2{margin:.1rem 0 .4rem}.agenda-actions{display:flex;justify-content:flex-end;position:relative;z-index:2}

.contact{padding:var(--space-6) 0;background:var(--navy-deep);color:#fff}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:end}
.contact h2{font-size:var(--h2);line-height:.94;letter-spacing:-.05em;margin:.2rem 0 .6rem}
.contact p{color:#d9e5eb;max-width:42rem}
.contact-links{display:grid;gap:.8rem;justify-items:start}
.contact-links a{font-weight:900;font-size:clamp(1.06rem,1rem + .35vw,1.3rem);border-bottom:2px solid rgba(255,255,255,.32);padding-bottom:.2rem}
.contact-links a:hover{border-color:var(--red)}

.site-footer{background:#071b29;color:#9eb1bd;padding:1.4rem 0;font-size:.85rem}
.footer-inner{width:var(--container);margin:auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media (max-width: 920px){
  .nav{display:none;position:absolute;left:clamp(20px,4vw,54px);right:clamp(20px,4vw,54px);top:78px;background:var(--paper);padding:1rem 1.2rem;border-radius:18px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}
  .nav.is-open{display:flex}.menu-toggle{display:inline-flex}
  .hero-grid,.about-grid,.section-head,.contact-grid{grid-template-columns:1fr}
  .hero-visual{min-height:560px;max-width:680px;width:100%;margin-inline:auto}
  .section-head{gap:var(--space-2)}
  .about-photo{position:relative;top:auto;max-width:650px}
  .about-photo img{aspect-ratio:16/11}
  .split-feature,.agenda-card{grid-template-columns:1fr}
  .agenda-actions{justify-content:flex-start}
}

@media (max-width: 640px){
  :root{--container:min(100% - 32px,1180px);--radius:22px}
  .header-inner{min-height:74px}.brand img{width:54px;height:40px}.brand span{font-size:.92rem}.brand small{font-size:.61rem}
  .hero{padding-top:var(--space-4)}
  .hero h1{max-width:9ch}
  .hero-visual{min-height:500px}.hero-photo{inset:0}.hero-note{left:10px;bottom:14px;max-width:210px}.hero-visual:before{left:-30%;top:-7%}.hero-visual:after{right:-18%;bottom:9%}
  .choir-grid{grid-template-columns:1fr}.choir-card{min-height:260px}
  .fact-grid{grid-template-columns:1fr}
  .split-feature{gap:1rem}.feature{min-height:440px;padding:var(--space-3)}
  .contact-links{gap:.6rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}.marquee-track{animation:none}.choir-card,.btn{transition:none}
}