/* ==========================================================================
   THE SITE HEADER AND MENU (Marco, 14 Oct 2026). The landing becomes a small
   site: Guests, Programme and Party are pages of the same domain, and every
   page carries the same row. Our two marks in a black panel (a link home),
   the ADE mark beside them at the same height, and on the right the three
   pages: open in a black panel on a wide screen, a burger on the phone that
   opens a full screen menu over a black blur. Page changes cross fade (View
   Transitions, the row held still), jumps inside a page scroll smoothly.
   Shared by the landing, where the row rides on the hero video, and the
   pages. Tokens (--bg, --white, --grey, --yellow, --ink, --fm, --u) come from
   the page: the landing's inline styles or site.css.
   ========================================================================== */
:root{
  --hh:clamp(36px,11.6vw,54px);   /* one height for the panel, the ADE mark and the burger; the row fits a 320px phone */
  --hi:var(--u,10px);             /* the row's inset: inside the video on the landing, from the frame on the pages */
  --glide:cubic-bezier(.25,.46,.45,.94);
}
@media (min-width:900px){:root{--hh:60px;--hi:20px}}   /* Marco, 15 Oct 2026: the row was too tall at 70 */
html{scroll-behavior:smooth}

/* ---- the row: a navbar always on screen (Marco, 14 Oct 2026), fixed at the place it has on the landing's video,
   under the cookie banner (z-index 10). Its panels are dark glass, a lighter grey over a blur of what passes under
   them with a hairline edge, so they stand out from the black of the pages as well as from the video. While the
   phone menu is open the row steps back and the menu shows its own lockup. ---- */
.hbar{position:fixed;z-index:9;top:0;left:0;right:0;background-color:rgba(16,16,16,0);box-shadow:0 14px 18px -6px rgba(16,16,16,0);pointer-events:none;transition:opacity .4s var(--glide),background-color .4s var(--glide),box-shadow .4s var(--glide)}
/* the panels sit inside the frame of the page (1600px at most, centred), 30px from its edge on a wide screen as the
   content is, 20px on the phone */
.hbar__in{display:flex;align-items:flex-start;gap:6px;max-width:1600px;margin:0 auto;padding:calc(var(--u,10px) + var(--hi)) calc(var(--u,10px) + var(--hi)) 14px}
.hbar__in > *{height:var(--hh);pointer-events:auto}
/* once the page has moved (html.hscr, hdr.js) the row paints its own black band, fading at the foot, so nothing
   scrolls between or behind the panels; at the very top of the landing the video stays clear under the row */
html.hscr .hbar{background-color:var(--bg);box-shadow:0 14px 18px -6px var(--bg);pointer-events:auto}
.partners,.hnav,.bgr{background:rgba(30,30,30,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2) }
html.mnu-open .hbar{opacity:0;pointer-events:none}
/* the pages start under the row */
body.page--site #main{padding-top:calc(var(--u,10px) + var(--hi) + var(--hh))}
/* our two marks, a little larger than before, the ADE mark a little smaller: one group of one height */
.partners{position:relative;flex:none;overflow:hidden;border-radius:8px;display:grid;place-items:center;padding:0 calc(var(--hh) * .24);text-decoration:none;color:var(--white);view-transition-name:vt-hp}
.partners__in{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--hh) * .18);color:var(--white);min-width:0}
.partners__x{font-size:12px;text-transform:lowercase;color:var(--grey);flex:none}
.partners .lg-ptdja{height:calc(var(--hh) * .52);width:auto;flex:none}
.partners .lg-at{height:calc(var(--hh) * .35);width:auto;flex:none}
.hade{flex:none;width:var(--hh);height:var(--hh);filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));view-transition-name:vt-ha}

/* ---- the menu on a wide screen: open, the three pages in a black panel of the same height ---- */
.hnav{display:none}
.hnav a{position:relative;display:inline-flex;align-items:center;font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1;color:var(--white);text-decoration:none;white-space:nowrap;transition:color .45s var(--glide)}
.hnav a > span{display:inline-block;pointer-events:none}
.hnav a[aria-current="page"]{color:var(--yellow)}
/* the hover of the landings: the link tears for a third of a second, in steps, and turns yellow */
@keyframes hglitch{
  0%{clip-path:none;transform:none}
  16%{clip-path:inset(0 0 58% 0);transform:translate3d(-5px,0,0)}
  32%{clip-path:inset(48% 0 0 0);transform:translate3d(6px,0,0)}
  50%{clip-path:inset(24% 0 32% 0);transform:translate3d(-3px,0,0)}
  68%{clip-path:inset(0 0 14% 0);transform:translate3d(3px,0,0)}
  86%{clip-path:inset(0);transform:translate3d(-1px,0,0)}
  100%{clip-path:none;transform:none}
}
.hnav svg{display:none}
@media (hover:hover){.hnav a:hover{color:var(--yellow)}.hnav a:hover > span{animation:hglitch .3s steps(1,end) 1}}
@media (min-width:900px){
  .hbar__in{gap:10px}
  .partners{padding:0 20px}
  .partners__in{gap:18px}
  .partners .lg-ptdja{height:32px}
  .partners .lg-at{height:22px}
  .partners__x{font-size:13px}
  .hnav{display:flex;align-items:center;gap:28px;margin-left:auto;padding:0 24px;border-radius:8px;view-transition-name:vt-hn}
}
@media (min-width:1200px){.hnav{gap:32px;padding:0 28px}}

/* ---- the menu on the phone. A burger, two lines in a black square the height of the marks, fixed where the row
   ends so it follows the reader; it opens a full screen layer: black over a strong blur of the page, the Discovr
   lockup top left (a link home), the three pages right under it in Geist Mono, the free ticket and the dates at
   the foot. The layer fades in, each line rises a few px after the one before, the two lines turn into a cross.
   Both sit under the cookie banner (z-index 10 in the CMP configuration): Marco wants the cookies always on top. ---- */
.bgr{position:fixed;z-index:9;top:calc(var(--u,10px) + var(--hi));right:calc(var(--u,10px) + var(--hi));width:var(--hh);height:var(--hh);border-radius:8px;display:grid;place-items:center;padding:0;cursor:pointer;view-transition-name:vt-bgr}
/* the menu button, the simplest (Marco, 15 Oct 2026): two short rounded lines, the rounding of the site, that turn
   into a cross. Transforms only, on one soft curve */
.bgr i{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:2px;background:var(--white);transition:transform .5s var(--glide)}
.bgr i:nth-child(1){transform:translate3d(0,-3.5px,0)}
.bgr i:nth-child(2){transform:translate3d(0,3.5px,0)}
.bgr.is-open i:nth-child(1){transform:rotate(45deg)}
.bgr.is-open i:nth-child(2){transform:rotate(-45deg)}
.bgr:active{transform:scale(.96)}
/* the layer: the page stays visible behind, strongly blurred and darkened; the pages as small boxes right under the
   lockup, each with its name, a line and a number, as in Marco's reference; the free ticket and the dates at the foot */
.mnu{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;padding:calc(var(--u,10px) + var(--hi)) calc(var(--u,10px) + var(--hi)) calc(var(--u,10px) + var(--hi) + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.74);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s var(--glide),visibility 0s linear .45s}
.mnu.open{opacity:1;visibility:visible;transition:opacity .5s var(--glide),visibility 0s}
.mnu__top{display:flex;align-items:center;height:var(--hh);padding-right:calc(var(--hh) + 10px)}
.mnu__top a{display:block;color:var(--white)}
.mnu__top svg{display:block;width:min(150px,46vw);height:auto;fill:currentColor;color:var(--yellow);--ams:var(--white)}   /* the lockup yellow, Amsterdam white (Marco) */
/* one measure for every space in the menu, the margin of the layer itself (Marco: "come i margini") */
.mnu{--mg:20px}
.mnu__l{list-style:none;margin:0;padding:var(--mg) 0 0;display:grid;gap:14px}
/* small boxes, small words: the name, a line under it, the number on the right */
.mnu__a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"t n" "s n";align-items:center;gap:6px 14px;padding:17px 16px 18px;border-radius:10px;background:rgba(30,30,30,.82);font-family:var(--fm);line-height:1.15;color:var(--white);text-decoration:none;transition:background-color .35s var(--glide)}
.mnu__a b{grid-area:t;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.mnu__a span{grid-area:s;font-size:11px;color:var(--grey)}
.mnu__a em{grid-area:n;align-self:start;font-style:normal;font-size:11px;line-height:14px;color:var(--grey)}   /* the count, on the line of the name */
.mnu__a[aria-current="page"] b{color:var(--yellow)}
.mnu__a:active,.mnu__a:focus-visible{background:rgba(48,48,48,.9);outline:none}
.mnu__foot{display:grid;gap:var(--mg);margin-top:auto;padding-top:var(--mg)}
.mnu__cta{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:8px;background:var(--yellow);color:var(--ink);font-family:var(--fm);font-size:12px;font-weight:500;text-transform:uppercase;line-height:1;text-decoration:none}
.mnu__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font-family:var(--fm);font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey)}
.mnu__top,.mnu__l li,.mnu__foot{opacity:0;transform:translate3d(0,10px,0);transition:opacity .3s var(--glide),transform .3s var(--glide)}
.mnu.open .mnu__top,.mnu.open .mnu__l li,.mnu.open .mnu__foot{opacity:1;transform:none;transition:opacity .6s var(--glide),transform .6s var(--glide);transition-delay:calc(100ms + var(--i,0) * 60ms)}
html.mnu-open{overflow:hidden}
/* while the menu is open, the fixed bars of the page step back (the landing's ticket chip, the campus blocks' day bar and dock) */
html.mnu-open .topchip,html.mnu-open .dxp .bar,html.mnu-open .dxp .scrim,html.mnu-open .dxg .dock,html.mnu-open .dxg .scrim{opacity:0 !important;pointer-events:none !important}
@media (min-width:900px){.bgr,.mnu{display:none}}

/* ---- page changes (Marco, 14 Oct 2026: "mezzo effetto glitch, pulito e chiaro"): the old page goes in two quick
   tears, the new one cuts itself in with the hero's entrance glitch, short, a few px, in steps; the row and the
   burger stay where they are ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-gout .12s steps(1,end) both}
::view-transition-new(root){animation:vt-gin .28s steps(1,end) both}
@keyframes vt-gout{
  0%{opacity:1;clip-path:inset(0 0 56% 0);transform:translate3d(-6px,0,0)}
  50%{opacity:.6;clip-path:inset(42% 0 0 0);transform:translate3d(7px,0,0)}
  100%{opacity:0}
}
@keyframes vt-gin{
  0%{opacity:1;clip-path:inset(0 0 58% 0);transform:translate3d(-6px,0,0)}
  34%{clip-path:inset(32% 0 0 0);transform:translate3d(6px,0,0)}
  67%{clip-path:inset(0 0 16% 0);transform:translate3d(-3px,0,0)}
  100%{clip-path:inset(0);transform:none}
}
::view-transition-group(vt-hp),::view-transition-group(vt-ha),::view-transition-group(vt-hn),::view-transition-group(vt-bgr){animation-duration:.55s;animation-timing-function:var(--glide)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mnu,.mnu.open,.mnu__top,.mnu__l li,.mnu__foot,.bgr i,.hnav a,.hnav svg,.hbar{transition:none}
  .hnav a:hover{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ---- the campus blocks (Guests, Programme) as pages of the site: the same blocks the team keeps on the campus
   (build/next/sync_campus.py), set on the row of the header; their own strip of marks is hidden (the header
   carries the marks), the bio sheet and the filter changes are made soft ---- */
.blk{margin-top:clamp(36px,9vw,80px)}
/* anything the page scrolls to lands under the fixed row */
.blk .dxp .day,.blk .dxg [id]{scroll-margin-top:calc(var(--u,10px) + var(--hi) + var(--hh) + 20px)}
.blk .dxg .in,.blk .dxp .in{padding-top:0;padding-left:var(--hi);padding-right:var(--hi);background:none}
.blk .dxg .top{display:none}
/* Guests: the title first, then the yellow band, which is the yellow card of the home: the real lockup (the sprite's
   wordmark, never a drawn copy), the dates on the right, 13px, the same 8px inset; from a wide column the lockup is
   64px tall with the two calls to action on the right, as the card is on a wide screen */
.blk .dxg h1{margin-top:0}
.blk .dxg h1 + .band{margin-top:clamp(20px,5vw,32px);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:8px}
.blk .dxg .bl{display:block;flex:0 1 190px;min-width:0;max-width:190px}
.blk .dxg .bl .lk{display:block;width:100%;height:auto;fill:var(--ink)}
.blk .dxg .br{flex:none;justify-content:flex-start;gap:8px;font-size:13px;letter-spacing:0;line-height:1.08;text-align:right}
@container (min-width:1000px){
  .blk .dxg h1 + .band{align-items:stretch;gap:40px;padding:16px}
  .blk .dxg .bl{flex:none;max-width:none;width:auto;height:64px}
  .blk .dxg .bl .lk{width:auto;height:100%}
  .blk .dxg .br{justify-content:space-between;gap:12px;min-height:64px;font-size:15px}
  .blk .dxg .tc{align-self:stretch}
}
/* the cards on the phone (Marco, 15 Oct 2026): no dock at the foot (the navbar and the call to action under the
   band do its job), the cards nearly as wide as the screen so the faces are not cut, and the whole card inside the
   screen under the row: the words keep their size and the photo takes the rest */
.blk .dxg .dock,.blk .dxg .scrim{display:none}
.blk .dxg .in{padding-bottom:40px}
.blk .dxg .cta3{display:flex;align-items:center;justify-content:center;height:48px;margin-top:10px;border-radius:7px;background:var(--y);color:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1;text-decoration:none}
@container (min-width:1000px){.blk .dxg .cta3{display:none}}
/* every photo centred on the face: --fp per card (build_next.py reads campus/faces.json, hdr.js sets it) */
.blk .dxg .card .sl img{object-position:var(--fp,50% 22%)}
@container (max-width:599.98px){
  .blk .dxg .in{--card:min(100cqi - 24px,420px)}   /* on a child: a container query cannot restyle its own container */
  .blk .dxg .track{margin-left:calc(var(--hi) * -1);margin-right:calc(var(--hi) * -1)}   /* the track spans the screen exactly (the block's -14px assumed its own 14px padding): the card sits centred, under the arrows */
  /* the card and the two arrows under it inside the screen, under the row (Marco, 15 Oct 2026) */
  .blk .dxg .track .card{height:clamp(440px,calc(100svh - (var(--u,10px) + var(--hi) + var(--hh)) - 16px - 12px - 50px - env(safe-area-inset-bottom,0px)),760px)}
  .blk .dxg .card .ph{flex:1 1 auto;min-height:150px;aspect-ratio:auto}
  .blk .dxg .card .bd{flex:0 0 auto}
  /* the slider is two arrows only, centred under the card, glass, no counter and no bar */
  .blk .dxg .ctl{display:flex;justify-content:center;margin-top:12px}
  .blk .dxg .cnt,.blk .dxg .bar{display:none}
  .blk .dxg .arw{gap:8px;padding:0;border-radius:0;background:none}
  .blk .dxg .arw button{width:46px;height:38px;border-radius:8px;background:rgba(30,30,30,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--w)}
  .blk .dxg .arw button:disabled{color:rgba(250,250,250,.3)}
  .blk .dxg .arw svg{width:14px;height:14px;stroke-width:2.2}
}
/* Party on the phone (Marco, 15 Oct 2026, the cards too tall): each card its own height, the facts beside their
   labels, less room between the rows; the public /party keeps its cards until the site goes live */
@media (max-width:899.98px){
  .page--site .pts{grid-auto-rows:auto}
  .page--site .pt .pt__f{gap:6px;margin-top:10px}
  .page--site .pt .pt__f div{grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:baseline}
  .page--site .pt .pc__cta{padding-top:14px}
}
/* the bio sheet over the row, under the cookie banner, scrolling without a scrollbar */
.blk .dxg .sh{z-index:9}
.blk .dxg .pn{scrollbar-width:none}
.blk .dxg .pn::-webkit-scrollbar{display:none}
/* the two calls to action in the band (a wide column): Reserve free spot filled, Full programme dashed, like the call
   to action of the home card; no double edge */
.blk .dxg .tc a{border-radius:var(--u,10px)}
.blk .dxg .tc a::before{content:none}
.blk .dxg .tc1{background:var(--ink);color:var(--y);box-shadow:none}
.blk .dxg .tc2{background:transparent;color:var(--ink);box-shadow:none;border:1px dashed var(--ink)}
.blk .dxg .tc2:hover{background:var(--ink);color:var(--y);border-style:solid}
/* Programme: the one Reserve your free spot opens the side column at every width; under it Every day folds into an
   accordion (Marco, 14 Oct 2026), then the Calendar on a wide column, then the filters; the side column sticks
   under the row */
.blk .dxp .side a.cta{display:flex;width:100%;margin-top:22px}
.blk .dxp details.evd{display:block;margin:14px 0 0;border-radius:10px;background:var(--panel);overflow:hidden}
.blk .dxp .evd > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;height:auto;padding:14px;border-radius:0;background:none;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;color:var(--g);cursor:pointer;list-style:none}
.blk .dxp .evd > summary::before{content:none}
.blk .dxp .evd > summary .kk{flex:1}
.blk .dxp .evd__x{position:relative;flex:none;width:12px;height:12px}
.blk .dxp .evd__x::before,.blk .dxp .evd__x::after{content:"";position:absolute;left:0;top:5px;width:12px;height:1.5px;background:var(--y);transition:transform .5s var(--glide)}
.blk .dxp .evd__x::after{transform:rotate(90deg)}
.blk .dxp .evd[open] .evd__x::after{transform:rotate(0)}
.blk .dxp .evd__b{overflow:hidden}
.blk .dxp .evd .ev{margin:0;padding:0 14px 16px;border-radius:0;background:none}
.blk .dxp .evd .ev > .kk{display:none}
.blk .dxp .evd .ev p.r:first-of-type{padding-top:0}
@container (min-width:1000px){.blk .dxp .side a.cta{margin-top:0}}
/* the day you are on is a pill that slides from one day to the next (hdr.js), in the bar at the foot of the phone
   and in the Calendar, instead of jumping; the links keep their colours, the pill carries the background */
.blk .dxp .bar,.blk .dxp .cal{position:relative}
.blk .dxp .bar a,.blk .dxp .cal a{position:relative;z-index:1}
.blk .dxp.js-ind .bar a.on,.blk .dxp.js-ind .cal a.on{background:none}
.blk .dxp .ind{position:absolute;z-index:0;left:0;top:0;border-radius:7px;background:var(--y);pointer-events:none;transition:transform .55s var(--glide);will-change:transform}   /* the days are one width, only the place moves */
/* the DJ sets with the DJ's face (Marco, 19 Oct 2026; dj_faces in build_next.py): the photos at the left of the two
   lines, one per DJ of a b2b, overlapping a little with a ring of the box's own colour; black and white, cut from the
   line up's Post graphics. Smaller on a narrow block so a b2b of three keeps room for the names. */
.blk .dxp .par--dj{--dw:44px;--dh:54px;--ring:#23221A;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.blk .dxp li.dj .par--dj{--ring:#191911}
.blk .dxp .par--dj > .djp{grid-row:1 / span 2;display:flex}
.blk .dxp .par--dj > p{grid-column:2}
.blk .dxp .djp img{display:block;width:var(--dw);height:var(--dh);border-radius:5px;object-fit:cover;background:#262626;box-shadow:0 0 0 2px var(--ring)}
.blk .dxp .djp img + img{margin-left:calc(var(--dw) * -.3)}
@container (max-width:599.98px){.blk .dxp .par--dj{--dw:36px;--dh:44px;column-gap:10px}}
@container (min-width:1000px){.blk .dxp .cal .ind{background:#262626}}
/* the phone: the same room between the boxes of the side column */
.blk .dxp .fb{margin-top:14px}
@container (min-width:1000px){.blk .dxp .fb{margin-top:0}}
/* the side column sticks just under the band behind the row; taller than the screen (Every day open), it scrolls
   inside itself, so the filters are always within reach */
@media (min-width:900px){.blk .dxp .side{top:calc(var(--u,10px) + var(--hi) + var(--hh) + 36px);max-height:calc(100vh - (var(--u,10px) + var(--hi) + var(--hh) + 36px) - 20px);overflow-y:auto;scrollbar-width:none}.blk .dxp .side::-webkit-scrollbar{display:none}}
.blk .dxg .sh{transition:opacity .45s var(--glide)}
.blk .dxg .pn{transform:translate3d(0,12px,0);transition:transform .55s var(--glide)}
.blk .dxp .days.settle{animation:blk-settle .5s var(--glide) both}
@keyframes blk-settle{from{opacity:0;transform:translate3d(0,6px,0)}}
@media (prefers-reduced-motion:reduce){.blk .dxg .sh,.blk .dxg .pn,.blk .dxp .ind{transition:none}.blk .dxp .days.settle{animation:none}}