/* ronde 17: eigen poster van het event in zijn eigen verhouding, en een rustiger achtergrond voor de Next stop-sectie */
.n4-cover.n4-poster img{aspect-ratio:auto;object-fit:contain;background:var(--ma-ink)}
/* één doorlopende achtergrond over de wiel-sectie en Next stop heen, zodat ze in elkaar overlopen */
.flow{position:relative;background:var(--ma-ink);overflow:hidden;isolation:isolate}
.flow::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(70vmax 70vmax at 6% 2%, rgba(102,45,145,.50), transparent 70%),
  radial-gradient(62vmax 62vmax at 94% 24%, rgba(238,42,123,.22), transparent 70%),
  radial-gradient(58vmax 58vmax at 30% 98%, rgba(109,204,167,.16), transparent 70%)}
.flow > .wsec.w4,
.flow > .sec.n4.band-purple{background:transparent}
.flow .w4-bg{display:none}

/* Next stop: het eigen artwork groter en het blok in balans */
.sec.n4 .n4-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.18fr)}
.sec.n4 .n4-photos{padding-bottom:0;margin-top:0}
.sec.n4 .n4-cover.n4-poster{transform:none}
@media(max-width:860px){.sec.n4 .n4-grid{grid-template-columns:1fr}}

/* Next stop: geen wax-patroonlaag meer, zodat de achtergrond net zo rustig is als de sectie erboven */
.sec.n4 .n4-bg{display:none}

/* koppen in Chivo 900, gekozen door Brian; bodytekst blijft DM Sans.
   --f-head is de variabele die ronde 9 voor h1 en h2 gebruikt, --f-display de rest van het grote werk. */
:root{--f-head:"Chivo","DM Sans",system-ui,sans-serif;--f-display:"Chivo","DM Sans",system-ui,sans-serif}
h1,h2,h3,.display{font-weight:900}

/* spaarknop in de vaste speler: rond, rechts, met genoeg ruimte voor de titel ernaast */
.pw{width:clamp(320px,28vw,400px)}
.pw-save{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;
  color:var(--ma-ink);background:var(--ma-white);border-radius:50%;text-decoration:none;
  box-shadow:3px 3px 0 var(--ma-magenta);transition:transform 140ms var(--ease)}
.pw-save svg{width:20px;height:20px}
.pw-save:hover{transform:scale(1.07)}
.pw-save:focus-visible{outline:3px solid var(--ma-white);outline-offset:3px;box-shadow:0 0 0 6px var(--ma-magenta)}
.pw-now{min-width:0}
.pw-now b,.pw-now i{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}

/* landen zonder foto: ontworpen cover in de vlagkleuren, met de landnaam in de huisstijl */
.slot-typo{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:inherit;
  background:linear-gradient(115deg,var(--f1) 0 33%,var(--f2) 33% 66%,var(--f3) 66% 100%)}
.slot-typo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 18% 8%, rgba(21,10,34,.10), rgba(21,10,34,.86) 72%)}
.slot-typo .typo-code{position:absolute;z-index:1;top:14px;left:16px;font:900 .75rem/1 var(--f-body);
  letter-spacing:.2em;color:var(--ma-white);opacity:.9}
.slot-typo .typo-name{position:relative;z-index:1;font:900 clamp(1.3rem,2.6vw,2.2rem)/1 var(--f-head);
  color:var(--ma-white);text-transform:uppercase;letter-spacing:-.02em;text-shadow:0 2px 26px rgba(0,0,0,.55)}

/* cover in huisstijl voor afgelopen edities: stad, maand en land, geen feestfoto */
.cover-design{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  width:100%;height:100%;padding:10px 12px;overflow:hidden;border-radius:inherit;background:var(--ma-ink)}
.cover-design img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.cover-design::before{content:"";position:absolute;inset:0;
  background:radial-gradient(130% 130% at 10% 6%, var(--c), transparent 62%);opacity:.55}
.cover-design::after{content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, transparent 1px 11px),
                   repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 1px, transparent 1px 17px)}
.cover-design u{position:absolute;z-index:1;top:8px;left:12px;text-decoration:none;color:rgba(255,255,255,.7);
  font:900 .58rem/1 var(--f-body);letter-spacing:.22em}
.cover-design b{position:relative;z-index:1;color:#fff;text-transform:uppercase;letter-spacing:-.02em;
  font:900 clamp(.9rem,1.35vw,1.15rem)/1 var(--f-head);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.cover-design i{position:relative;z-index:1;font-style:normal;color:#fff;opacity:.82;
  font:800 .6rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase}

/* stad aanvragen per land */
.ask-wrap{margin-top:14px}
.ask-wrap .ask-open{width:100%;justify-content:center}
.ask-form{margin-top:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.ask-titel{margin:0 0 10px;font:800 .95rem/1.2 var(--f-head);color:#fff}
.ask-velden{display:grid;gap:10px}
.ask-velden label{display:grid;gap:4px}
.ask-velden span{font:700 .68rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ask-velden input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28);color:#fff;font:600 .95rem/1.2 var(--f-body)}
.ask-velden input:focus{outline:2px solid var(--ma-yellow);outline-offset:1px}
.ask-acties{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.ask-uitleg{font:500 .72rem/1.35 var(--f-body);color:rgba(255,255,255,.55);max-width:26ch}
.ask-fout{margin:8px 0 0;color:#FF8A8A;font:700 .78rem/1.3 var(--f-body)}
.ask-klaar{margin:0;color:var(--ma-mint);font:700 .85rem/1.35 var(--f-body)}
@media(min-width:520px){.ask-velden{grid-template-columns:1fr 1fr}}

/* leespagina's: privacy, terms, cookies */
.wrap-narrow{max-width:820px}
.legal-page{padding-top:clamp(26px,5vw,60px);padding-bottom:clamp(40px,7vw,90px)}
.legal-body{font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.86)}
.legal-body h2{margin:2em 0 .6em;font:800 clamp(1.15rem,2vw,1.5rem)/1.2 var(--f-head);color:#fff}
.legal-body h3{margin:1.6em 0 .5em;font:700 1.05rem/1.3 var(--f-head);color:#fff}
.legal-body p{margin:0 0 1em}
.legal-body ul,.legal-body ol{margin:0 0 1.2em 1.3em;display:grid;gap:.45em}
.legal-body li{padding-left:.2em}
.legal-body a{color:var(--ma-yellow);text-decoration:underline;text-underline-offset:2px}
.legal-body strong{color:#fff}
.legal-body .lead{color:rgba(255,255,255,.7)}
