/* ============================================================================
   Joenit public site — the show room, Dutch Audio Event 2026 (ticket #5135).
   Layered on styles.css (the shared chrome). The room's outfit is the three
   WALL banners (Voorwand 900x290, Zijwand Links/Rechts 1000x290), never the
   steel blue of the pop-up brand banners (Wim, 2026-10-06).

   THE COLOURS, converted ONCE from the print PDFs (CMYK, FOGRA39) to sRGB:
   the PDFs rendered by PDFium (PDFtoImage) at 46 and 300 dpi, the swatches
   sampled from the render, the named CMYK values checked against FOGRA39.
   ========================================================================== */
:root{
  --dae-fond:#57585A;        /* fond      C0 M0 Y0 K80   (render: #57585A)        */
  --dae-k15:#E1E1E2;         /* wave line K15                                     */
  --dae-k45:#A2A3A5;         /* wave line K45                                     */
  --dae-red:#CB4431;         /* red dots  C5 M85 Y84 K16 (render: #CB4431)        */
  --dae-black:#1D1D1B;       /* deep black C30 M30 Y30 K100                       */
  --dae-wave:#F36D2A;        /* the wave as the PDFs actually render it (orange)  */
  --dae-white:#FFFFFF;       /* the logos                                         */

  --dae-fond-hi:#646567;     /* one step lighter than the fond, for panels        */
  --dae-fond-lo:#46474A;     /* one step darker, the room's floor                 */
  --dae-ink-soft:#C9CACC;    /* quiet text on the fond                            */
}

/* ---- the page sits on the banner's fond ---------------------------------- */
body.dae{background:var(--dae-fond); color:var(--dae-white)}
.dae-main{max-width:960px; margin:0 auto; padding:0 16px clamp(2rem,6vw,3.5rem)}

/* ---- the scanned brand's door back to its catalogue ---------------------- */
.qrbar{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem 16px; background:var(--dae-black); color:var(--dae-white);
  text-decoration:none; font-weight:600; font-size:.92rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.qrbar__dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--dae-red); flex:0 0 auto}
.qrbar__text{flex:1 1 auto; overflow-wrap:anywhere}
.qrbar__arrow{flex:0 0 auto; opacity:.8}
.qrbar:hover .qrbar__text, .qrbar:focus-visible .qrbar__text{text-decoration:underline}

/* ---- the hero ------------------------------------------------------------ */
/* the door view IS the hero: the title hangs in the room's ceiling */
.dae-hero{
  position:absolute; left:0; right:0; top:0; z-index:2; pointer-events:none;
  padding:clamp(.9rem,3vw,1.6rem) 16px 2.4rem;
  background:linear-gradient(180deg, rgba(29,29,27,.92), rgba(29,29,27,.55) 70%, transparent);
}
.dae-hero a{pointer-events:auto}
.dae-eyebrow{margin:0; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dae-ink-soft)}
.dae-title{
  margin:.3rem 0 0; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,5.6vw,2.4rem); line-height:1.15; color:var(--dae-white);
}
.dae-lead{margin:0; max-width:42rem; font-size:1rem; line-height:1.55; color:var(--dae-k15)}
.dae-lead--below{margin:1.1rem 0 0}
.dae-status{
  display:flex; align-items:center; gap:.55rem; margin:.45rem 0 0;
  font-size:.86rem; line-height:1.4; font-weight:600; color:var(--dae-white);
}
.dae-status[hidden]{display:none}
.dae-status--quiet{color:var(--dae-ink-soft); font-weight:500; font-style:italic}
.dae-status .led{flex:0 0 auto}

/* the red dot of the banner, as a pulsing "on air" light */
.led{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--dae-red)}
.led--on{animation:dae-pulse 1.6s ease-in-out infinite}
@keyframes dae-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(203,68,49,.7)}
  50%{box-shadow:0 0 0 .45rem rgba(203,68,49,0)}
}

/* ---- the room ------------------------------------------------------------ */
.room{margin:0 -16px}
.stage{
  position:relative; overflow:hidden; height:var(--stage-h,60vh);
  perspective-origin:50% 47%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.05), transparent 60%),
    var(--dae-black);
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
}
.stage.is-dragging{cursor:grabbing}
.scene{
  position:absolute; left:50%; top:47%; width:0; height:0;
  transform-style:preserve-3d;
}
.scene *{transform-style:preserve-3d}

/* A wall is a frame; its artwork lives in 1 m strips (.wall__seg) so a strip
   that would reach behind the eye can be left out (see dae-2026.js applyCam). */
.wall{position:absolute; left:0; top:0; cursor:pointer}
.wall__seg{
  position:absolute; top:0; height:100%;
  background-color:var(--dae-fond); background-repeat:no-repeat;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.wall__seg::before{                             /* the skirting: where wall meets floor */
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.22); pointer-events:none;
}
.wall__seg::after{                              /* the playing wall's light, seamless over the strips */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background:linear-gradient(0deg, rgba(203,68,49,.55), rgba(203,68,49,.12) 45%, rgba(203,68,49,.3));
  box-shadow:inset 0 6px 0 var(--dae-red), inset 0 -6px 0 var(--dae-red);
}
.wall__seg--first::after{box-shadow:inset 0 6px 0 var(--dae-red), inset 0 -6px 0 var(--dae-red), inset 6px 0 0 var(--dae-red)}
.wall__seg--last::after{box-shadow:inset 0 6px 0 var(--dae-red), inset 0 -6px 0 var(--dae-red), inset -6px 0 0 var(--dae-red)}
.wall.is-playing .wall__seg::after{opacity:1}
.wall__onair{
  position:absolute; left:50%; top:22px; transform:translateX(-50%) translateZ(2px);
  display:none; align-items:center; gap:10px; padding:8px 18px;
  background:var(--dae-red); color:var(--dae-white); border-radius:999px;
  font:700 22px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.wall.is-playing .wall__onair{display:inline-flex}
.wall__onair .led{background:var(--dae-white); width:12px; height:12px}

/* The floor reads as a floor: lit from the far wall, dark at the door, and a
   faint metre grid that carries the perspective. */
.floor{position:absolute; left:0; top:0; background:
  linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
  linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
  linear-gradient(180deg, var(--dae-fond-lo), #2b2b2a 55%, var(--dae-black));
  backface-visibility:hidden; -webkit-backface-visibility:hidden}

/* the triptych: speaker - rack - speaker, standing on the floor before the wall */
.kit{position:absolute; left:0; top:0}
.kit__card{
  position:absolute; left:0; top:0; overflow:hidden;
  background:#F2F2F2; border-radius:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.kit__card img{width:100%; height:100%; object-fit:contain; display:block}
.kit__rack{
  position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:3px;
  padding:4px; background:var(--dae-black); border-radius:4px;
  box-shadow:0 10px 24px rgba(0,0,0,.5);
}
.kit__rack .kit__shelf{flex:1 1 0; min-height:0; background:#F2F2F2; border-radius:3px; overflow:hidden}
.kit__rack .kit__shelf img{width:100%; height:100%; object-fit:contain; display:block}
/* the system total, a price tag on the floor at the foot of the rack */
.kit__total{
  position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center;
  background:var(--dae-black); color:var(--dae-white); border:1px solid rgba(255,255,255,.25);
  border-radius:4px; font:700 13px/1 var(--font); white-space:nowrap;
}
.wall.is-playing .kit__total{background:var(--dae-red); border-color:var(--dae-red)}
.kit__shadow{position:absolute; left:0; top:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent)}

.stage__hint{
  position:absolute; left:0; right:0; bottom:10px; margin:0; text-align:center;
  font-size:.78rem; color:var(--dae-ink-soft); pointer-events:none;
  transition:opacity .4s ease;
}
.stage__hint.is-gone{opacity:0}

/* ---- the wall chips + tools --------------------------------------------- */
.roomnav{display:flex; align-items:center; justify-content:center; gap:.3rem; padding:.7rem 16px 0}
.roomnav__chip, .roomnav__arrow, .roomtool{
  font:600 .88rem/1 var(--font); color:var(--dae-white);
  background:var(--dae-fond-hi); border:1px solid rgba(255,255,255,.14);
  border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.roomnav__chip{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .75rem; min-height:40px}
.roomnav__arrow{width:40px; height:40px; font-size:1.4rem; padding:0}
.roomnav__chip.is-here{background:var(--dae-white); color:var(--dae-black)}
.roomnav__led{width:.5rem; height:.5rem; border-radius:50%; background:rgba(255,255,255,.25)}
.roomnav__chip.is-here .roomnav__led{background:rgba(0,0,0,.2)}
.roomnav__chip.is-playing .roomnav__led{background:var(--dae-red); animation:dae-pulse 1.6s ease-in-out infinite}
.roomtools{display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; padding:.6rem 16px 0}
.roomtool{padding:.55rem .9rem; font-weight:500; font-size:.82rem; background:transparent}
.roomtool[hidden]{display:none}
.roomtool--gyro.is-on{background:var(--dae-red); border-color:var(--dae-red)}
.roomnav__chip:focus-visible, .roomnav__arrow:focus-visible, .roomtool:focus-visible{outline:2px solid var(--dae-white); outline-offset:2px}

/* ---- the wall card ------------------------------------------------------- */
.wallcard{
  margin:1.1rem 0 0; padding:1rem 1rem .9rem;
  background:var(--dae-fond-hi); border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
}
.wallcard.is-playing{border-color:var(--dae-red); box-shadow:0 0 0 1px var(--dae-red)}
.wc__eyebrow{margin:0; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dae-ink-soft)}
.wc__head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.25rem 0 .2rem}
.wc__name{margin:0; font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--dae-white)}
.wc__onair{
  display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
  padding:.3rem .6rem; border-radius:999px; background:var(--dae-red);
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.wc__onair .led{background:var(--dae-white); width:.45rem; height:.45rem}
.wc__line{margin:0 0 .5rem; font-size:.9rem; color:var(--dae-k15)}
.wc__list{list-style:none; margin:.4rem 0 0; padding:0}
.wc__item{
  display:grid; grid-template-columns:56px 1fr auto; gap:.75rem; align-items:center;
  padding:.6rem 0; border-top:1px solid rgba(255,255,255,.1);
}
.wc__item:first-child{border-top:0}
.wc__thumb{width:56px; height:56px; border-radius:8px; background:#F2F2F2; overflow:hidden}
.wc__thumb img{width:100%; height:100%; object-fit:contain; display:block}
.wc__role{display:block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dae-ink-soft)}
.wc__title{display:block; font-weight:600; font-size:.98rem; color:var(--dae-white); line-height:1.3}
.wc__title a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.wc__title a:hover{border-bottom-color:var(--dae-white)}
.wc__where{display:block; margin-top:.15rem; font-size:.74rem; color:var(--dae-ink-soft); text-decoration:none}
.wc__where:hover{text-decoration:underline}
.wc__price{font-weight:700; font-size:.98rem; white-space:nowrap; text-align:right}
.wc__noprice{font-weight:500; font-size:.8rem; color:var(--dae-ink-soft); text-align:right}
.wc__unit{display:block; font-weight:500; font-size:.78rem; color:var(--dae-ink-soft)}
.wc__sum{display:block}
.wc__variant{display:inline-block; margin-top:.2rem; padding:.12rem .45rem; border-radius:999px;
  font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--dae-white); color:var(--dae-black)}
.wc__item.is-alt{opacity:.55}
.wc__item.is-alt .wc__variant{background:transparent; color:var(--dae-ink-soft); border:1px solid rgba(255,255,255,.3)}
.wc__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  margin-top:.4rem; padding-top:.75rem; border-top:2px solid rgba(255,255,255,.25);
}
.wc__total span{font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dae-ink-soft)}
.wc__total b{font-size:1.25rem; font-family:var(--font-display); font-weight:600}
.wc__vat{margin:.5rem 0 0; font-size:.74rem; color:var(--dae-ink-soft)}

/* ---- the programme ------------------------------------------------------- */
.programme{margin:1.4rem 0 0}
.programme h2{margin:0 0 .2rem; font-family:var(--font-display); font-weight:600; font-size:1.05rem}
.programme__days{margin:0 0 .6rem; font-size:.85rem; color:var(--dae-ink-soft)}
.programme ol{list-style:none; margin:0; padding:0}
.programme li{
  display:grid; grid-template-columns:7.2rem 1fr; gap:.6rem; align-items:center;
  padding:.5rem .7rem; border-radius:10px; font-size:.92rem;
}
.programme li:nth-child(odd){background:rgba(0,0,0,.12)}
.programme time{font-variant-numeric:tabular-nums; color:var(--dae-k15)}
.programme li.is-now{background:var(--dae-red); color:var(--dae-white)}
.programme li.is-now time{color:var(--dae-white)}

/* ---- afterwards + the sample note ---------------------------------------- */
.dae-after{margin:1.4rem 0 0; padding:1rem; border-radius:14px; background:var(--dae-black)}
.dae-after[hidden]{display:none}
.dae-after p{margin:0 0 .8rem; color:var(--dae-k15)}
.dae-btn{
  display:inline-block; padding:.65rem 1.1rem; border-radius:999px;
  background:var(--dae-red); color:var(--dae-white); font-weight:700; text-decoration:none;
}
.dae-sample{margin:1.2rem 0 0; font-size:.72rem; color:var(--dae-ink-soft); text-align:center}
.dae-sample[hidden]{display:none}

/* ---- wider screens: the card beside the programme ------------------------ */
@media (min-width:860px){
  .room{margin:.4rem 0 0; border-radius:16px; overflow:hidden}
}

/* ---- kiosk (?kiosk=1): the room alone, the playing wall large ------------ */
html.kiosk, html.kiosk body{height:100%; overflow:hidden; background:var(--dae-black)}
html.kiosk .jband, html.kiosk .chrome, html.kiosk .qrbar, html.kiosk .footer,
html.kiosk .dae-hero, html.kiosk .dae-lead, html.kiosk .roomnav, html.kiosk .roomtools,
html.kiosk .programme, html.kiosk .dae-after, html.kiosk .dae-sample,
html.kiosk .stage__hint{display:none !important}
html.kiosk .dae-main{max-width:none; padding:0}
html.kiosk .room{margin:0}
html.kiosk .stage{height:100vh; cursor:default; perspective-origin:50% 34%}
html.kiosk .scene{top:34%}
html.kiosk .wallcard{
  position:fixed; left:2vw; right:2vw; bottom:2vh; margin:0; z-index:5;
  background:rgba(29,29,27,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:1.2vw 1.6vw;
}
html.kiosk .wc__list{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); column-gap:1.4rem}
html.kiosk .wc__item{grid-template-columns:56px 1fr; row-gap:.2rem}
html.kiosk .wc__price, html.kiosk .wc__noprice{grid-column:2; text-align:left}
html.kiosk .wc__item:first-child, html.kiosk .wc__item{border-top:0}
html.kiosk .wc__name{font-size:clamp(1.3rem,2.4vw,2.2rem)}

@media (prefers-reduced-motion:reduce){
  .led--on, .roomnav__chip.is-playing .roomnav__led{animation:none}
}

/* share: the link line where no clipboard exists, and the toast */
.sharelink{margin:.5rem 16px 0; padding:.5rem .75rem; border-radius:8px; background:rgba(0,0,0,.25);
  font-size:.78rem; color:var(--dae-white); text-align:center; word-break:break-all; user-select:all; -webkit-user-select:all}
.sharelink[hidden]{display:none}
.dae-toast{position:fixed; left:50%; bottom:24px; z-index:10000; transform:translate(-50%, 12px);
  padding:.6rem 1.1rem; border-radius:999px; background:var(--dae-black); color:var(--dae-white);
  font-size:.86rem; font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease}
.dae-toast.is-on{opacity:1; transform:translate(-50%, 0)}
html.kiosk .sharelink{display:none !important}
@media (prefers-reduced-motion: reduce){ .dae-toast{transition:none} }