/* ==========================================================================
   Select Festival — selectfestival.nl
   Faithful static rebuild of the original Wix site
   (selectfestival.wixsite.com/mijnsite), archived June 2026.
   Design reference: 1440px artboard, 980px content column.
   ========================================================================== */

/* ---- Fonts (self-hosted, captured from the original site) ---- */
@font-face {
  font-family: 'ArialNarrow';
  src: url('../fonts/arial-narrow.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'ArialNarrowBold';
  src: url('../fonts/arial-narrow-bold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'SourceSansProBold';
  src: url('../fonts/source-sans-pro-bold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'SourceSansProBlack';
  src: url('../fonts/source-sans-pro-black.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'RobotoBold';
  src: url('../fonts/roboto-bold.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---- Theme ---- */
:root {
  --purple: #330066;       /* brand purple */
  --mint: #ccffcc;         /* pale mint */
  --aqua: #66ffcc;         /* bright aqua (page titles, buttons) */
  --navy: #000033;         /* dark page background */
  --site-width: 1440px;
  --content-width: 980px;
  --fn-narrow: 'ArialNarrow', 'Arial Narrow', Arial, sans-serif;
  --fn-narrow-bold: 'ArialNarrowBold', 'Arial Narrow', Arial, sans-serif;
  --fn-roboto: 'RobotoBold', Roboto, Arial, sans-serif;
  --fn-ssp-bold: 'SourceSansProBold', 'Source Sans Pro', sans-serif;
  --fn-ssp-black: 'SourceSansProBlack', 'Source Sans Pro', sans-serif;
  --fn-impact: Impact, 'ArialNarrowBold', 'Arial Narrow', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fn-narrow);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
}
img { display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Page wrapper — full viewport width. Coloured strips bleed edge-to-edge
   (like Wix column strips); inner content is centred in a ~980px band. */
.page {
  position: relative;
  width: 100%;
  overflow-x: clip;
}
.container {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* fixed glitch-art page background (home + boat party) */
body.has-glitch-bg { background: var(--navy); }
body.has-glitch-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Pin to a constant height. Using inset:0 (bottom:0) makes the element
     track the dynamic viewport, so on mobile the cover image rescales as the
     URL bar hides/shows on scroll — a visible "zoom". 100lvh is the largest
     (stable) viewport; 100vh is the fallback. */
  height: 100vh;
  height: 100lvh;
  background: url('../img/fbd2d9_db55a158d3ca4f10a83c446176c1d323~mv2.jpg') center / cover no-repeat;
  z-index: -1;
}
body.bg-mint { background: var(--mint); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus { left: 0; background: var(--mint); color: var(--purple); padding: 6px 12px; z-index: 100; }

/* ==========================================================================
   Header (shared) — transparent, sits on the page background
   ========================================================================== */
.site-header {
  position: relative;
  height: 124px;
  z-index: 10;
}
.site-header .container { height: 100%; }
.header-logo {
  position: absolute;
  left: 51px;
  top: 12px;
  width: 99px;
  height: 99px;
}
.header-logo img { width: 100%; height: 100%; object-fit: cover; }
.main-nav {
  position: absolute;
  left: 75px;
  top: 37px;
  width: 604px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  /* The nav box overlaps the logo on its left; let clicks fall through the
     empty area to the logo, but keep the links themselves clickable. */
  pointer-events: none;
}
.main-nav a {
  display: block;
  padding: 0 5px;
  font-family: var(--fn-narrow-bold);
  font-size: 18px;
  line-height: 50px;
  color: var(--purple);
  white-space: nowrap;
  pointer-events: auto;
}
.main-nav a.active { color: var(--mint); }
.btn-tickets {
  position: absolute;
  left: 692px;
  top: 40px;
  width: 118px;
  height: 43px;
  background: var(--purple);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fn-narrow-bold);
  font-size: 20px;
  color: var(--mint);
}
.header-social {
  position: absolute;
  left: 835px;
  top: 53px;
  display: flex;
  gap: 11px;
}
.header-social img { width: 20px; height: 20px; }

/* Hamburger toggle — injected by site.js, only shown on mobile */
.nav-toggle { display: none; }

/* ==========================================================================
   Footer (shared)
   ========================================================================== */
.site-footer {
  position: relative;
  height: 124px;
  background: var(--purple);
  z-index: 5;
}
.site-footer .container { height: 100%; }
.footer-gouda750 {
  position: absolute;
  left: 117px;
  top: 21px;
}
.footer-gouda750 img { width: 121px; height: 66px; object-fit: contain; }
.footer-copy {
  position: absolute;
  left: 335px;
  top: 47px;
  width: 115px;
  font-family: var(--fn-ssp-bold);
  font-size: 12px;
  color: var(--mint);
  text-align: center;
  white-space: nowrap;
}
.footer-privacy {
  position: absolute;
  left: 475px;
  top: 47px;
  width: 200px;
  font-family: var(--fn-ssp-bold);
  font-size: 12px;
  color: var(--mint);
  text-align: center;
  white-space: nowrap;
}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  border: 0;
  cursor: pointer;
}
.page-title {
  font-family: var(--fn-roboto);
  font-weight: 400;
  font-size: 95px;
  line-height: normal;
  color: var(--aqua);
  text-align: center;
}
.btn-voorpagina {
  width: 313px;
  height: 48px;
  margin: 0 auto;
  background: var(--aqua);
  font-family: var(--fn-roboto);
  font-size: 25px;
  line-height: 35px;
  color: var(--navy);
}

/* ==========================================================================
   Home
   ========================================================================== */
/* Equal-height gaps between the coloured blocks reveal the fixed glitch
   page background (as on the original Wix site). Hero→over and
   newsletter→footer stay seamless. */
.sec-playlists,
.sec-instagram,
.sec-contact,
.sec-newsletter { margin-top: 80px; }

.hero {
  position: relative;
  height: 780px;
}
.hero h1 {
  position: absolute;
  left: calc(50% - 380px);   /* 110px into the centred 980px band */
  top: 199px;
  width: 420px;
  font-family: var(--fn-narrow);
  font-weight: 700;
  font-size: 80px;
  line-height: normal;
  color: var(--purple);
  text-shadow: rgba(0, 0, 0, 0.4) 0 4px 5px;
}
.hero .btn-meerinfo {
  position: absolute;
  left: calc(50% - 380px);   /* aligned under the hero title */
  top: 639px;
  width: 286px;
  height: 55px;
  background: var(--purple);
  border-radius: 50px;
  font-family: var(--fn-narrow-bold);
  font-size: 35px;
  color: var(--mint);
}
.hero .hero-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 36px;
  width: 44px;
  height: 23px;
}

/* OVER section */
.sec-over {
  display: flex;
  min-height: 761px;
}
.sec-over .col-gallery {
  position: relative;
  width: 50%;
  background: #000;
  overflow: hidden;
}
.gallery-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img {
  height: 761px;
  width: auto;
  flex: 0 0 auto;
}
.gallery-next {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.gallery-next svg { display: block; }
.sec-over .col-about {
  width: 50%;
  background: #000033 url('../img/fbd2d9_7012aefb0bec465cb12c7bd1b6571d99~mv2.jpg') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sec-over .col-about .about-logo {
  width: 131px;
  height: 131px;
  margin-top: 49px;
}
.sec-over .col-about h2 {
  margin-top: 24px;
  font-family: var(--fn-narrow);
  font-weight: 700;
  font-size: 28px;
  line-height: normal;
  color: var(--purple);
}
.sec-over .col-about p {
  margin-top: 52px;
  width: 484px;
  max-width: 90%;
  font-family: var(--fn-narrow);
  font-size: 22px;
  line-height: normal;
  color: var(--purple);
}

/* PLAYLISTS & LINE-UP section */
.sec-playlists {
  display: flex;
  min-height: 735px;
}
.sec-playlists .col-media {
  width: 66.8%;   /* 962 / 1440 */
  background: var(--purple);
  text-align: center;
}
.sec-playlists .col-media h2 {
  margin-top: 60px;
  font-family: var(--fn-narrow);
  font-weight: 400;
  font-size: 28px;
  color: var(--mint);
}
.sec-playlists .col-media .yt-wrap {
  margin: 42px auto 0;
  width: 656px;
  max-width: 92%;
}
.sec-playlists .col-media .yt-wrap iframe {
  width: 100%;
  aspect-ratio: 656 / 372;
  border: 0;
}
.sec-playlists .col-media .spotify-wrap {
  margin: 50px auto 60px;
  width: 658px;
  max-width: 92%;
}
.sec-playlists .col-media .spotify-wrap iframe {
  width: 100%;
  height: 80px;
  border: 0;
}
.sec-playlists .col-lineup {
  width: 33.2%;   /* 478 / 1440 */
  background: #66ffcc url('../img/fbd2d9_7012aefb0bec465cb12c7bd1b6571d99~mv2.jpg') center / cover no-repeat;
  padding: 50px 0 40px 34px;
}
.sec-playlists .col-lineup h2 {
  font-family: var(--fn-narrow);
  font-weight: 400;
  font-size: 70px;
  line-height: 70px;
  color: var(--purple);
}
.sec-playlists .col-lineup .lineup {
  margin-top: 34px;
  font-family: var(--fn-impact);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--purple);
}
.sec-playlists .col-lineup .lineup p + .lineup-head { margin-top: 0; }
.sec-playlists .col-lineup .lineup .gap { height: 32px; }

/* INSTAGRAM section */
.sec-instagram {
  background: var(--purple);
  padding: 45px 0 46px;
  text-align: center;
}
.sec-instagram h2 {
  font-family: var(--fn-narrow);
  font-weight: 400;
  font-size: 28px;
  color: var(--mint);
}
.ig-grid {
  margin-top: 51px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}
.ig-grid a { flex: 0 0 auto; }
.ig-grid img {
  width: 360px;
  height: 360px;
  object-fit: cover;
}
.sec-instagram .btn-meer {
  margin: 37px auto 0;
  width: 144px;
  height: 48px;
  background: var(--mint);
  font-family: var(--fn-narrow);
  font-size: 20px;
  color: var(--purple);
}

/* CONTACT section */
.sec-contact {
  display: flex;
  min-height: 929px;
}
.sec-contact .col-photo {
  position: relative;
  width: 33.2%;
  background: rgba(0, 0, 0, 0.62);
}
.sec-contact .col-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sec-contact .social-col {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 310px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.sec-contact .social-col img { width: 75px; height: 75px; }
.sec-contact .col-form {
  position: relative;
  width: 66.8%;
  background: #66ffcc url('../img/fbd2d9_7012aefb0bec465cb12c7bd1b6571d99~mv2.jpg') center / cover no-repeat;
  padding: 82px 0 60px 140px;
}
.sec-contact h2 {
  font-family: var(--fn-narrow);
  font-weight: 400;
  font-size: 28px;
  color: var(--purple);
  margin-left: 7px;
}
.contact-form {
  margin-top: 25px;
  width: 660px;
  max-width: 94%;
}
.contact-form .row { display: flex; gap: 10px; }
.contact-form input,
.contact-form textarea {
  background: var(--purple);
  border: 0;
  color: var(--mint);
  font-family: var(--fn-narrow);
  font-size: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--mint); opacity: 1; }
.contact-form .in-naam { width: 339px; height: 36px; }
.contact-form .in-tel { width: 306px; height: 36px; }
.contact-form .in-email { width: 655px; height: 36px; }
.contact-form textarea { width: 655px; height: 145px; resize: vertical; }
.contact-form .mailto-link {
  display: block;
  font-family: var(--fn-roboto);
  font-size: 14px;
  font-style: italic;
  color: var(--navy);
  margin: 0 0 22px 2px;
}
.contact-form .btn-verzenden {
  width: 142px;
  height: 40px;
  background: var(--purple);
  font-family: var(--fn-narrow);
  font-size: 16px;
  color: var(--mint);
}
.contact-form .form-success {
  display: none;
  font-family: var(--fn-narrow);
  font-size: 18px;
  color: var(--purple);
  margin-top: 14px;
}
.contact-map {
  margin-top: 48px;
  width: 655px;
  max-width: 94%;
  height: 306px;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; }

/* NEWSLETTER section */
.sec-newsletter {
  background: var(--purple);
  padding: 45px 0 50px;
}
.sec-newsletter .nl-logo {
  width: 125px;
  height: 125px;
  margin: 0 auto;
}
.newsletter-form {
  width: 582px;
  max-width: 94%;
  margin: 0 auto;
  text-align: center;
}
.newsletter-form h2,
.newsletter-form h3 {
  font-family: var(--fn-ssp-bold);
  font-weight: 400;
  font-size: 22px;
  color: var(--mint);
}
.newsletter-form h2 { line-height: 30.8px; margin-top: 5px; }
.newsletter-form h3 { line-height: 35.2px; }
.newsletter-form .nl-row {
  margin-top: 37px;
  display: flex;
  gap: 17px;
  justify-content: center;
}
.newsletter-form input {
  width: 425px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--mint);
  color: var(--mint);
  font-family: var(--fn-narrow);
  font-size: 15px;
  padding: 0 12px;
}
.newsletter-form input::placeholder { color: var(--mint); opacity: 1; }
.newsletter-form .btn-abonneer {
  width: 111px;
  height: 42px;
  background: var(--mint);
  font-family: var(--fn-roboto);
  font-size: 16px;
  color: var(--navy);
  border-radius: 0;
}
.newsletter-form .form-success {
  display: none;
  font-family: var(--fn-ssp-bold);
  font-size: 18px;
  color: var(--mint);
  margin-top: 14px;
}

/* ==========================================================================
   Boat party — absolute collage layout on the 1440 artboard
   ========================================================================== */
/* Full-bleed mint content band; the glitch page background still shows
   behind the (transparent) header above it. */
.bp-section {
  width: 100%;
  background: var(--mint);
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}
.boatparty-canvas {
  position: relative;
  width: var(--site-width);
  flex: 0 0 var(--site-width);
  height: 3719px;
  font-family: var(--fn-narrow);
  color: var(--purple);
}
.boatparty-canvas .abs { position: absolute; }
.boatparty-canvas p,
.boatparty-canvas li {
  font-size: 24px;
  line-height: 33.6px;
}
.boatparty-canvas .b { font-weight: 700; }
.boatparty-canvas .pill {
  background: var(--purple);
  color: var(--mint);
  font-size: 20px;
  line-height: 28px;
}
.boatparty-canvas .tickets-head { font-family: var(--fn-narrow-bold); }
.boatparty-canvas .laatste-info {
  font-family: var(--fn-narrow-bold);
  font-size: 30px;
  letter-spacing: 0.3px;
  text-align: center;
}
.boatparty-canvas .blokje { margin-top: 33.6px; }
.boatparty-canvas .btn-voorpagina-bp {
  background: var(--purple);
  color: var(--mint);
  font-size: 25px;
  line-height: 35px;
  width: 313px;
  height: 48px;
}

/* ==========================================================================
   Dark pages (blog, posts, podcast, privacy)
   ========================================================================== */
body.bg-navy { background: var(--navy); }
/* On the dark pages the brand-purple nav links are near-invisible on navy;
   use white (active link keeps the aqua highlight). */
body.bg-navy .main-nav a { color: #fff; }
body.bg-navy .main-nav a.active { color: var(--aqua); }

/* Blog list */
.blog-list {
  width: 980px;
  max-width: 96%;
  margin: 39px auto 0;
  padding-top: 41px;
}
.post-card {
  display: flex;
  background: var(--navy);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 32px;
  min-height: 278px;
}
.post-card .card-img {
  flex: 0 0 45%;
  overflow: hidden;
}
.post-card .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-card .card-body {
  position: relative;
  flex: 1;
  padding: 26px 30px;
  color: #fff;
  font-family: var(--fn-roboto);
}
.post-card .card-meta {
  font-size: 12px;
  line-height: 18px;
  color: #fff;
}
.card-menu {
  position: absolute;
  top: 24px;
  right: 26px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.post-card h2 {
  margin-top: 18px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 400;
}
.post-card .excerpt {
  margin-top: 14px;
  font-size: 14px;
  line-height: 21px;
}
.blog-cta { margin: 60px 0 110px; }

/* Post article */
.post-page {
  width: 980px;
  max-width: 96%;
  margin: 0 auto;
  background: var(--navy);
  padding: 20px;
}
.post-article {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 65px 100px 60px;
  color: #fff;
  font-family: var(--fn-roboto);
}
.post-article .post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 21px;
}
.post-article .post-menu {
  position: absolute;
  top: 60px;
  right: 100px;
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.post-article .post-meta .dot::before { content: '·'; padding: 0 2px; }
.post-article h1 {
  margin-top: 28px;
  font-size: 40px;
  line-height: 50px;
  font-weight: 400;
}
.post-article .updated {
  margin-top: 18px;
  font-size: 14px;
  line-height: 21px;
}
.post-article .post-body {
  margin-top: 23px;
  font-size: 18px;
  line-height: 27px;
}
.post-article .post-body p { margin-bottom: 27px; }
.post-article .post-body img.inline-img {
  float: left;
  width: 370px;
  max-width: 55%;
  margin: 6px 20px 16px 0;
}
.post-article .post-body::after { content: ''; display: block; clear: both; }

.recent-posts {
  margin-top: 30px;
  color: #fff;
  font-family: var(--fn-roboto);
}
.recent-posts .recent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.recent-posts h2 { font-size: 18px; line-height: 27px; font-weight: 400; }
.recent-posts .all-link { font-size: 14px; color: #fff; }
.recent-posts .mini-card {
  margin-top: 20px;
  width: 291px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--navy);
}
.recent-posts .mini-card img {
  width: 289px;
  height: 162px;
  object-fit: cover;
}
.recent-posts .mini-card .mini-title {
  display: block;
  padding: 22px 24px 26px;
  font-size: 18px;
  color: #fff;
}

.comments {
  margin-top: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--navy);
  padding: 65px 100px;
  color: #fff;
  font-family: var(--fn-roboto);
}
.comments h2 { font-size: 16px; font-weight: 400; }
.comments .comment-box {
  margin-top: 60px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 16px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.post-footer-cta { margin: 60px 0 110px; }

/* Podcast */
.podcast-main {
  text-align: center;
  color: #fff;
}
.podcast-main .page-title { margin-top: 51px; }
.podcast-main .yt-main {
  margin: 58px auto 0;
  width: 980px;
  max-width: 96%;
}
.podcast-main .yt-main iframe {
  width: 100%;
  aspect-ratio: 980 / 520;
  border: 0;
}
.podcast-main h2 {
  margin-top: 44px;
  font-family: var(--fn-ssp-black);
  font-weight: 400;
  font-size: 32px;
  color: #fff;
}
.podcast-main .podcast-spotify { display: block; margin: 16px auto 0; width: 184px; }
.podcast-main .podcast-spotify img { width: 184px; height: 76px; object-fit: contain; }
.podcast-main .podcast-youtube { display: block; margin: 24px auto 0; width: 214px; }
.podcast-main .podcast-youtube img { width: 214px; height: 48px; object-fit: contain; }
.podcast-main .btn-voorpagina { margin: 123px auto 0; }
.podcast-main .podcast-end-spacer { height: 108px; }

/* Privacy */
.privacy-main {
  width: 927px;
  max-width: 94%;
  margin: 0 auto;
  padding: 16px 0 90px;
  color: #fff;
  font-family: var(--fn-roboto);
}
.privacy-main h2 {
  font-size: 28px;
  font-weight: 400;
  margin: 45px 0 19px;
}
.privacy-main p {
  font-size: 16px;
  line-height: normal;
  margin-bottom: 19px;
}
.privacy-main p.tight { margin-bottom: 0; }
.privacy-main a { color: #fff; text-decoration: underline; }

/* ==========================================================================
   Responsive — the original had a separate Wix mobile layout;
   this is a faithful-but-fluid adaptation.
   ========================================================================== */
@media (max-width: 1100px) {
  .site-header .container { transform-origin: top left; }
  .main-nav { left: 160px; width: auto; }
  .btn-tickets { left: auto; right: 120px; }
  .header-social { left: auto; right: 10px; }
}

@media (max-width: 860px) {
  /* Mobile header mirrors the Wix mobile layout: a large, centred logo with
     the hamburger top-right, TICKETS centred below, nav links in a drop-down. */
  .site-header { height: auto; }
  .site-header .container { position: relative; padding: 18px 0 8px; }
  .header-logo {
    position: static;
    display: block;
    margin: 0 auto;
    width: 92px;
    height: 92px;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    position: absolute;
    right: 16px;
    top: 40px;
    width: 38px;
    height: 38px;
    padding: 7px 6px;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 40;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--mint);
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
  }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .main-nav {
    position: absolute;
    top: 100%;            /* drop below the whole header (incl. TICKETS row) */
    left: 0;
    right: 0;
    width: 100%;
    height: auto;         /* override the fixed 50px desktop nav height */
    flex-direction: column;
    background: var(--purple);
    pointer-events: auto;
    display: none;
    padding: 6px 0 12px;
    z-index: 30;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  }
  .site-header.nav-open .main-nav { display: flex; }
  .main-nav a {
    color: var(--mint);
    font-size: 21px;
    line-height: 48px;
    text-align: center;
    padding: 0;
  }
  .main-nav a.active { color: var(--aqua); }
  .btn-tickets { position: static; margin: 12px auto 16px; }
  .header-social { display: none; }

  .hero { height: auto; padding: 26px 0 40px; }
  .hero h1 {
    position: static;
    width: auto;
    margin: 0 6%;
    font-size: 52px;
  }
  .hero .btn-meerinfo { position: static; margin: 30px 0 0 6%; }
  /* The hero scroll-cue chevron is a desktop affordation; drop it on mobile. */
  .hero .hero-arrow { display: none; }

  .sec-over, .sec-playlists, .sec-contact { flex-direction: column; }
  .sec-over .col-gallery, .sec-over .col-about,
  .sec-playlists .col-media, .sec-playlists .col-lineup,
  .sec-contact .col-photo, .sec-contact .col-form { width: 100%; }
  .sec-over .col-gallery { height: 420px; }
  .gallery-track img { height: 420px; }
  .sec-over .col-about { padding-bottom: 50px; }
  /* Contact photo becomes a compact banner with the three social icons
     in a tidy row across the bottom (the desktop column would otherwise
     stretch to a ~480px block and clip the YouTube icon off-screen). */
  .sec-contact .col-photo { min-height: 0; height: 240px; }
  .sec-contact .social-col {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);   /* centred in the banner, both axes */
    flex-direction: row;
    gap: 30px;
  }
  .sec-contact .social-col img { width: 50px; height: 50px; }
  .sec-contact .col-form { padding: 44px 5% 50px; }
  .contact-form .row { flex-direction: column; gap: 0; }
  .contact-form .in-naam, .contact-form .in-tel,
  .contact-form .in-email, .contact-form textarea { width: 100%; }
  .ig-grid { height: auto; flex-wrap: wrap; }
  .ig-grid img { width: 50vw; height: 50vw; }
  .newsletter-form .nl-row { flex-direction: column; align-items: center; }
  .newsletter-form input { width: 100%; }

  .page-title { font-size: 52px; }
  .post-card { flex-direction: column; }
  .post-card .card-img { flex: none; height: 220px; }
  .post-article { padding: 40px 6%; }
  .comments { padding: 40px 6%; }
  .post-article .post-body img.inline-img { float: none; width: 100%; max-width: 100%; margin: 0 0 16px; }

  .site-footer { height: auto; padding: 20px 0; }
  .footer-gouda750, .footer-copy, .footer-privacy {
    position: static;
    width: auto;
    margin: 8px auto;
    text-align: center;
  }
  .footer-gouda750 img { margin: 0 auto; }

  /* boat party collage falls back to a vertical flow */
  .bp-section { display: block; }
  .boatparty-canvas { width: 100%; flex: 1 1 auto; height: auto; padding: 20px 6% 60px; }
  .boatparty-canvas .abs { position: static; width: auto !important; left: auto !important; top: auto !important; margin: 22px auto; }
  .boatparty-canvas .abs img { max-width: 100%; height: auto; margin: 0 auto; }
  .boatparty-canvas p { font-size: 20px; line-height: 28px; }
}