/* dekmantelselectors.com, 2027 identity (Jan Tomson, "Selectors festival
   identity 2027" preview). STAGED on the preview Worker only; the live
   site keeps /sites/selectors/site.css until the launch switch.

   The identity in one paragraph: light grey ground (#f5f5fa), muted
   maroon text (#5b2f2f), one face in one weight (Eurostile Round
   Extended): capitals for names, headlines and buttons, sentence case
   for information and body text, and on curves around the logo. Colour
   blocks from the digital palette carry the sections; collage fragments
   are thrown on loosely, never on a grid.

   Colour is this sheet's own (--se-*), not the theme on <html>: the
   brands document still holds the 2026 identity for the live site. At
   the launch switch the palette moves to a `selectors-2027` theme.

   Face: Eurostile Round Extended Medium (URW; licence held by Jan Tomson,
   24 Oct 2026), Latin subset as WOFF2. Sizes and the -0.02em tracking are
   fitted to the mockup's measured line widths in this face.

   Scale: 11 meta / 13 body / 15 lead / 22 title / 34 feature. Spacing
   steps are the --sp-* roles from /tokens.css. */

@import url("../festival-base.css?v=10");

@font-face {
  font-family: "Selectors Display";
  src: url("/sites/selectors-2027/fonts/eurostile-round-extended-medium.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --se-bg: #f5f5fa;
  --se-ink: #5b2f2f;
  /* Digital palette (identity page 7). */
  --se-light-pink: #fccef8;
  --se-neon-pink: #fa00b5;
  --se-burning-red: #ff4600;
  --se-green-haze: #c3f8be;
  --se-saturation-green: #ccff66;
  --se-neon-green: #8ffb53;
  --se-bleached-peach: #fee9c2;
  --se-light-yellow: #fffa56;
  --se-orange-clay: #fc9845;
  --se-haze-gray: #dad7d9;
  --se-bleached-blue: #dbedf2;
  --se-silk-blue: #bdf3fe;
  --se-sky-blue: #62c6fe;
  --se-sunset-blue: #3083ef;
  --se-sea-blue: #055a68;
  --se-face: "Selectors Display", "Eurostile Extended", "Helvetica Neue", Arial, sans-serif;
  --se-track: -0.02em;
  /* Mockup units (website pages 32 and 33 are an 800 px wide artboard):
     --u is one mockup pixel of layout, --t one of type, held between
     1.35 and 2 px so text stays readable on phones and calm on wide
     screens. Sizes below are the mockup's, measured. */
  --u: calc(100vw / 800);
  --t: clamp(1.35px, 100vw / 800, 2px);
  /* The mockup's header: 42 px, the logo 95 px wide, the burger 13. */
  --se-header-h: max(56px, calc(42 * var(--t)));
  /* The hero's height: the initial viewport, whole (Luc, 26 Oct 2026);
     the cover crops to fill it. The fixed hero fragments place against it. */
  --se-hero-h: max(520px, 100svh);
  /* One curve for every slide: fast out, long settle. */
  --se-glide: cubic-bezier(0.22, 1, 0.36, 1);
}

html { background: var(--se-bg); overflow-x: hidden; scrollbar-width: thin; scrollbar-gutter: stable; }
body {
  /* The shared base and the consent box read --ink and --bg. */
  --ink: var(--se-ink);
  --bg: var(--se-bg);
  margin: 0;
  background: var(--se-bg);
  color: var(--se-ink);
  font: 13px/1.7 var(--se-face);
  letter-spacing: var(--se-track);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
a, button, summary { transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
h1, h2, h3 { margin: 0; font-weight: 400; }

.se-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Capitals: names, headlines, calls to action. */
.se-title, .fest-page h1, .fest-cta, .fest-nav a, .se-pill, .btn, .fest-btn, .se-names, .fest-faq-group h2, .prog-switch, .tt thead th, .tt-name, .fa-appearances h2, .fa-edition h3 {
  text-transform: uppercase;
  letter-spacing: var(--se-track);
}
.se-title { font-size: calc(17 * var(--t)); line-height: calc(19 * var(--t)); }

/* The pill: maroon, saturation green text (identity page 9, "PRE-REGISTER"). */
.se-pill, .btn, .fest-btn {
  display: inline-block;
  background: var(--se-ink);
  color: var(--se-saturation-green);
  border: 0;
  border-radius: 6px;
  padding: var(--sp-xs) var(--sp-md);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  /* Eurostile's line box sits the capitals high: trim it to the cap
     height and the baseline, so equal padding centres the word. */
  text-box: trim-both cap alphabetic;
}
.se-pill:hover, .btn:hover, .fest-btn:hover { background: var(--se-sea-blue); }

/* Header: burger at the left, the logo in the middle, the call to action
   as plain capitals at the right. Over the home photo it floats; on the
   other pages it sits on the ground. */
.fest-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--se-header-h);
  padding: 0 var(--gutter);
  background: var(--se-bg);
  pointer-events: none;
}
.fest-burger {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  margin-left: -13px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.fest-burger span { display: block; width: max(18px, calc(13 * var(--t))); height: 2px; background: currentColor; transition: transform 0.35s var(--se-glide), opacity var(--dur-fast) var(--ease); }
.fest-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fest-burger.open span:nth-child(2) { opacity: 0; }
.fest-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.fest-header .wordmark { grid-column: 2; grid-row: 1; display: flex; color: var(--se-ink); }
.wordmark-se27 { width: max(88px, calc(95 * var(--t))); height: auto; display: block; }
.fest-cta { grid-column: 3; grid-row: 1; justify-self: end; position: relative; z-index: 2; margin: 0; font-size: calc(13.3 * var(--t)); }
.fest-cta + .fest-cta { display: none; }
.fest-cta:hover { opacity: 0.7; }

/* The menu: a full-height panel that slides in from the left, at every
   width (the burger is the only way in, as in the mockup). It runs under
   the header, so the burger, now a cross, stays where it was; the links
   follow it in one by one. A maroon veil dims the page; a click on it
   closes the panel (festival.js toggles .open; site.js locks the scroll
   and moves the focus). */
.fest-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: min(480px, 100vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: calc(var(--se-header-h) + var(--sp-xxl)) var(--gutter) var(--sp-xxl);
  background: var(--se-silk-blue);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.5s var(--se-glide), visibility 0s linear 0.5s;
}
.fest-nav.open { visibility: visible; transform: none; transition: transform 0.5s var(--se-glide), visibility 0s; }
.fest-nav a {
  font-size: 34px;
  line-height: 1.1;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), color var(--dur) var(--ease);
}
.fest-nav.open a { opacity: 1; transform: none; transition: opacity 0.4s var(--ease) var(--se-step, 0.12s), transform 0.5s var(--se-glide) var(--se-step, 0.12s), color var(--dur) var(--ease); }
.fest-nav a:nth-child(2) { --se-step: 0.16s; }
.fest-nav a:nth-child(3) { --se-step: 0.2s; }
.fest-nav a:nth-child(4) { --se-step: 0.24s; }
.fest-nav a:nth-child(5) { --se-step: 0.28s; }
.fest-nav a:nth-child(6) { --se-step: 0.32s; }
.fest-nav a:nth-child(7) { --se-step: 0.36s; }
.fest-nav a:nth-child(n + 8) { --se-step: 0.4s; }
.fest-nav a:hover, .fest-nav a.active { color: var(--se-burning-red); }
.fest-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  /* No tint (Luc, 27 Oct 2026: the maroon veil made the photo redder);
     the layer stays to catch the click that closes the menu. */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
html.se-menu-open { overflow: hidden; }
html.se-menu-open body::after { opacity: 1; pointer-events: auto; }
/* Over the home photo the header has no ground; with the panel open the
   logo would sit half on it, so it steps back. */
html.se-menu-open .fest-header .wordmark { opacity: 0; }
/* The header bar drops its ground so the veil reaches the top edge. */
html.se-menu-open .fest-header { background: transparent; }

[data-page="home"] .fest-header { position: absolute; left: 0; right: 0; background: transparent; }
[data-page="home"] .fest-header .wordmark { visibility: hidden; }

/* Home hero (mockup page 32), 16:9 like Jan's cover. The photo fills; the lock-up
   SVG covers the hero in the mockup's coordinates (home.ts lockup());
   fragments land where the mockup puts them, in percent of the hero;
   five sunset frames at the foot. */
.se-hero {
  position: relative;
  height: var(--se-hero-h);
  overflow: hidden;
  color: var(--se-ink);
}
.se-hero-photo { position: absolute; inset: 0; display: block; }
.se-hero-photo img, video.se-hero-photo { width: 100%; height: 100%; object-fit: cover; }
/* Jan's covers are 16:9, the hero's own shape on a desktop. One shows
   (.is-on); the markup can stack more. */
.se-hero-photo.is-mockup img { position: absolute; inset: 0; object-position: 50% 50%; opacity: 0; }
.se-hero-photo.is-mockup img.is-on { opacity: 1; }
/* Jan's info lock-up 1 where his hero preview puts it (26 Oct): 32.3% from
   the left, at the top, 35.1% of the width. */
.se-lockup { position: absolute; left: 32.28%; top: calc(var(--se-hero-h) * 0.0045); width: 35.08%; color: var(--se-ink); }
.se-lockup-1 { display: block; width: 100%; height: auto; }
.se-lockup-art { display: block; width: 100%; height: 100%; overflow: visible; }
/* Glyph size of Jan's lock-up at the hero's logo width. */
.se-curve { font-family: var(--se-face); font-size: 15.2px; fill: currentColor; }

/* Collage fragments: sticky (Luc, 26 Oct 2026). Fixed to the screen, so
   every piece holds its spot through the entire scroll, never clipped,
   hidden or swapped. Slot positions are percentages of the screen. */
.se-frag { position: fixed; height: auto; pointer-events: none; }

/* With site.js the fragments sit in one layer on top of the page, above
   the header. */
.se-frag-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
/* The artwork stays with the menu open (Luc, 27 Oct 2026); the header,
   which holds the menu panel, rises above it (layer 150, footer 160). */
html.se-menu-open .fest-header { z-index: 170; }

/* Photos: still, in Jan's grade from the mockup's hero (site.js adds
   #se-grade and the class; the hero file has it baked in). */
.se-grade .se-tile-photo img, .se-grade .fa-hero img { filter: url(#se-grade); }
/* The artist card photo carries its own print scan: no grade over it. */
.se-grade .fa-hero img.se-card-photo { filter: none; }
/* A shared set's page: the members' card photos side by side. */
.fa-hero .se-set-photos { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.fa-hero .se-set-photos img { width: 100%; height: 100%; object-fit: cover; }
/* The set page: the members' mixes side by side; the photos fill the
   whole height of the text column, a square at least (desktop). */
.se-mixes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--t)); align-items: start; }
.se-mixes .se-mix { margin-top: calc(34 * var(--t)); }
.se-mixes .se-mix-title { font-size: calc(8.5 * var(--t)); }
.fa-page.is-set .fa-hero { aspect-ratio: auto; min-height: 50vw; }
/* Mockup positions (500 tall), shown in the 16:9 cover (450 from y 5);
   heights against the hero, as the fragments are fixed to the screen. */
.se-frag-ha { left: 1%; top: calc(var(--se-hero-h) * 0.136); width: 10.25%; }
.se-frag-hb { left: 80.25%; top: calc(var(--se-hero-h) * 0.238); width: 6.25%; }
.se-frag-hc { left: 93.1%; top: calc(var(--se-hero-h) * 0.236); width: 6.5%; }
.se-frag-hd { left: 11.1%; top: calc(var(--se-hero-h) * 0.88); width: 8.75%; }
.se-frag-he { left: 79%; top: calc(var(--se-hero-h) * 0.856); width: 11.4%; }
.se-strip { display: flex; gap: calc(12 * var(--u)); pointer-events: none; }
.se-strip img { width: calc(65 * var(--u)); height: auto; }
.se-hero-strip { position: absolute; left: 26.4%; bottom: 0; }

/* Intro on the ground (mockup page 32): the heading in two lines, a
   narrow centred column, the pill well below. */
.se-intro { padding: calc(68 * var(--t)) var(--gutter) calc(80 * var(--t)); text-align: center; }
.se-intro .se-title { margin: 0 auto calc(52 * var(--t)); max-width: calc(350 * var(--t)); }
.se-intro .se-body { max-width: calc(520 * var(--t)); margin: 0 auto; }
.se-body { font-size: calc(9.5 * var(--t)); line-height: calc(17 * var(--t)); }
.se-body .block-text, .se-body .block-intro { max-width: none; padding: 0; font-size: inherit; line-height: inherit; }
.se-body p { margin: 0 0 calc(17 * var(--t)); }
.se-body p:last-child { margin-bottom: 0; }
.se-body a { text-decoration: underline; text-underline-offset: 3px; }
.se-cta-row { margin: calc(66 * var(--t)) 0 0; }
/* The opening screen's call to action: violet with lime text (Jan's hero
   preview, 26 Oct 2026). */
.se-intro .se-pill { background: #8c00fe; color: var(--se-saturation-green); }
.se-intro .se-pill:hover { background: #6d00c6; }
.se-intro .se-pill { font-size: calc(13.3 * var(--t)); padding: calc(10 * var(--t)) calc(14 * var(--t)); border-radius: calc(4 * var(--t)); }

/* Tiles (mockup page 32): square halves, a colour block beside a photo,
   sides alternating; the title 64 mockup px from the top, the text in a
   column with 40 px either side. Fragments ride a layer over the whole
   row (.se-tile-frags), placed in percent of the 800 by 400 row. */
/* Two equal halves, never wider for long copy. The row is two squares
   tall at least and grows with its text; photo and text both fill it. */
.se-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); aspect-ratio: 2 / 1; }
.se-tile.is-flipped .se-tile-photo { order: 2; }
.se-tile-photo { position: relative; overflow: hidden; background: var(--se-haze-gray); }
.se-tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.se-tile-text { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: calc(64 * var(--t)) calc(40 * var(--u)) calc(40 * var(--t)); }
.se-tile-text .se-title { margin-bottom: calc(50 * var(--t)); }
/* About page: the band with the info lock-up over the tiles (the 2026
   Festival Info page's band, in the 2027 identity). */
.se-about-head { display: flex; justify-content: center; align-items: center; padding: calc(70 * var(--t)) var(--gutter) calc(80 * var(--t)); color: var(--se-ink); }
.se-about-head .se-lockup-1 { width: min(calc(420 * var(--t)), 76vw); height: auto; }
/* z-index: a flipped tile's photo has order 2, and grid items paint in
   that order, so without it the photo would cover the layer. */
.se-tile-frags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.se-frag-tf-dtl { left: 0.9%; top: calc(50vw * 0.055); width: 10.4%; }
.se-frag-tf-dbl { left: 11%; top: calc(50vw * 0.8875); width: 8.75%; }
.se-frag-tf-ptr1 { left: 80.25%; top: calc(50vw * 0.1625); width: 6.25%; }
.se-frag-tf-ptr2 { left: 93.1%; top: calc(50vw * 0.1625); width: 6.25%; }
.se-frag-tf-pbr { left: 78.75%; top: calc(50vw * 0.8625); width: 11.9%; }
.se-frag-tf-tl { left: 51%; top: calc(50vw * 0.05); width: 10%; }
.se-frag-tf-tr { left: 39%; top: calc(50vw * 0.05); width: 10%; }
.se-tile-strip { position: absolute; left: 0; right: 0; justify-content: center; top: 5%; }

.tone-sky { background: var(--se-sky-blue); }
.tone-peach { background: var(--se-bleached-peach); }
.tone-lime { background: var(--se-saturation-green); }
.tone-pink { background: var(--se-light-pink); }
.tone-silk { background: var(--se-silk-blue); }
.tone-yellow { background: var(--se-light-yellow); }

/* Program (mockup page 33): the lime block runs under the header; the
   names in capitals, three centred columns across the full width (two for
   the boat parties), 20.5 mockup px apart. */
[data-page="programme"] .fest-header, [data-page="about"] .fest-header { background: var(--se-saturation-green); }
.se-program { position: relative; padding: calc(26 * var(--t)) 0 calc(45 * var(--t)); text-align: center; overflow: hidden; }
.se-program .se-title { margin-bottom: calc(17 * var(--t)); }
.se-program.tone-sky { padding: calc(46 * var(--t)) 0 calc(84 * var(--t)); }
.se-program.tone-sky .se-title { margin-bottom: calc(36 * var(--t)); }
.se-program.is-empty { min-height: 60vh; }
.se-names { list-style: none; margin: 0 auto; padding: 0; font-size: calc(8.9 * var(--t)); line-height: calc(20.5 * var(--t)); column-gap: 0; }
.se-names.is-three { columns: 3; }
.se-names.is-two { columns: 2; }
/* A long name wraps inside its column (it never runs into the next one);
   its lines sit tight, and the padding keeps the 20.5 pitch between names. */
.se-names li { break-inside: avoid; padding: calc(4.9 * var(--t)) var(--sp-xs); line-height: calc(10.7 * var(--t)); text-wrap: balance; overflow-wrap: anywhere; }
.se-names a:hover { color: var(--se-burning-red); }
/* Sky frames: under the title, off to the left (program page); on the
   top edge, centred (artist page). */
.se-sky { display: flex; gap: calc(24 * var(--u)); pointer-events: none; }
.se-sky img { width: calc(30 * var(--u)); max-width: 51px; height: auto; }
.se-sky.is-left { margin: calc(-24 * var(--t)) 0 calc(14 * var(--t)) 12%; }
.se-sky.is-edge { justify-content: center; gap: calc(7 * var(--u)); margin: calc(-26 * var(--t)) 0 calc(24 * var(--t)); }
.se-sky.is-edge img { width: calc(36 * var(--u)); }
.se-frag-pa { left: 0; top: 25%; width: 5.6%; }
.se-frag-pb { left: 76.9%; top: 1.6%; width: 6.5%; }
.se-frag-pc { left: 91.6%; top: 1.6%; width: 6.5%; }
/* At the right edge, opposite the figure: the pieces are fixed to the
   screen, and only the edges stay clear of the names. */
.se-frag-pd { left: auto; right: -1%; top: 55%; width: 8%; max-width: 278px; }
.se-frag-pd img, picture.se-ov img { display: block; width: 100%; height: auto; }
.se-frag-pe, .se-frag-pf { display: none; }

/* Shared page kinds on the ground: about, FAQ, volunteers, privacy. */
.fest-page { max-width: 760px; margin: 0 auto; padding: var(--sp-huge) var(--gutter); }
.fest-page h1 { font-size: 22px; line-height: 1.15; text-align: center; margin-bottom: var(--sp-xxl); }
.fest-empty { text-align: center; }
.fest-body .block-text, .fest-body .block-intro { max-width: none; padding: 0; font-size: 13px; line-height: 1.75; }
.fest-body p { margin: 0 0 var(--sp-md); }
.fest-body a { text-decoration: underline; text-underline-offset: 3px; }
.fest-body h2 { font-size: 15px; text-transform: uppercase; margin: var(--sp-xxl) 0 var(--sp-sm); }
.fest-body h3 { font-size: 13px; text-transform: uppercase; margin: var(--sp-xl) 0 var(--sp-xs); }
.fest-faq-group h2 { font-size: 15px; margin-bottom: var(--sp-sm); }
.fest-faq { border-top: 1px solid var(--se-ink); }
.fest-faq:last-child { border-bottom: 1px solid var(--se-ink); }
.fest-faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
/* The FAQ filter: pills in the identity's colours, the active one maroon
   with lime text (like the call to action). */
.se-faq-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--t)); margin: 0 0 var(--sp-xxl); }
.se-faq-filter[hidden] { display: none; }
.se-faq-chip {
  border: 1px solid var(--se-ink); border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--se-ink);
  padding: calc(8 * var(--t)) calc(14 * var(--t));
  font: calc(9.5 * var(--t)) / 1 var(--se-face); letter-spacing: var(--se-track); text-transform: uppercase;
  text-box: trim-both cap alphabetic;
}
.se-faq-chip:hover { background: rgb(91 47 47 / 0.08); }
.se-faq-chip[aria-pressed="true"] { background: var(--se-ink); color: var(--se-saturation-green); }
.fest-faq-group[hidden] { display: none; }
.fest-faq summary { cursor: pointer; list-style: none; padding: var(--row-y) 0; font-size: 13px; display: flex; justify-content: space-between; gap: var(--sp-md); }

/* Timetable: the shared table in the identity's face and colours. */
.tt-page { max-width: 1400px; }
.prog-switch { display: flex; justify-content: center; gap: var(--sp-md); margin: calc(-1 * var(--sp-md)) 0 var(--sp-xxl); font-size: 13px; }
.prog-switch .is-current { opacity: 0.55; }
.tt-day h2 { font-size: 15px; text-transform: uppercase; margin: 0 0 var(--sp-lg); }
.tt th, .tt td { text-align: left; vertical-align: top; padding: var(--sp-xs) var(--sp-sm); border-top: 1px solid var(--se-ink); min-width: 170px; }
.tt thead th { font-size: 11px; border-top: 0; position: sticky; top: 0; background: var(--se-bg); z-index: 2; padding-bottom: var(--sp-sm); }
.tt .tt-time { min-width: 64px; width: 64px; white-space: nowrap; font-variant-numeric: tabular-nums; position: sticky; left: 0; background: var(--se-bg); z-index: 1; }
.tt-name { font-size: 11px; line-height: 1.2; }
.tt-when, .tt-kind { font-size: 11px; opacity: 0.7; }

/* Artist page (mockup page 33, right): name and bio at the left, the
   photo at the right, the sets below. */
.fa-page {
  max-width: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "name photo" "bio photo" "links photo" "sets sets";
  grid-template-rows: auto auto 1fr auto;
}
.fa-page h1 { grid-area: name; margin: calc(26 * var(--t)) 0 calc(14 * var(--t)); padding: 0 calc(45 * var(--u)); font-size: calc(17 * var(--t)); line-height: calc(19 * var(--t)); }
.fa-bio { grid-area: bio; padding: 0 calc(45 * var(--u)); text-align: center; font-size: calc(9.5 * var(--t)); line-height: calc(17 * var(--t)); }
.fa-bio .block-text, .fa-bio .block-intro { font-size: inherit; line-height: inherit; }
/* The set's program over its description (mockup: DAY PROGRAM in red). */
.se-set-label { margin: 0 0 calc(22 * var(--t)); font-size: calc(9.5 * var(--t)); text-transform: uppercase; color: var(--se-burning-red); }
/* The program lists replace the appearances (artist.ts lists()). */
[data-page="artist"] .fa-appearances { display: none; }
[data-page="artist"] main { position: relative; }
/* The artist page's three pieces: a window over the header, the name,
   bio and photo (the photo is 400 mockup px, 25 below the header); the
   top-right piece crosses the header, as in the mockup. */
.se-artist-frags { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.se-frag-aa { left: 0; top: calc(35 * var(--u)); width: 5.6%; }
.se-frag-ab { left: 87.5%; top: calc(28 * var(--u)); width: 10.25%; }
.se-frag-ac { left: 76%; top: calc(430 * var(--u)); width: 13.75%; }
.se-set-label a:hover { text-decoration: underline; }
.se-set-label.is-boat { color: var(--se-sky-blue); }
/* The artist's Dekmantel mix (artist.ts mix()): a pill in the identity's
   colours that starts dekmantel.com's player dock, the title under it.
   app.js marks the playing trigger aria-pressed and swaps the glyphs. */
.se-mix { margin: calc(34 * var(--t)) 0 0; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--t)); }
.se-mix-play {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--se-ink); color: var(--se-saturation-green);
  border: 0; border-radius: 6px; cursor: pointer;
  padding: calc(9 * var(--t)) calc(14 * var(--t));
  font: calc(11 * var(--t)) / 1 var(--se-face); letter-spacing: var(--se-track); text-transform: uppercase;
}
/* The label is a span inside the flex button: trim its own line box to
   the capitals, so it centres on the icon and in the pill. */
.se-mix-play .pb-label { display: block; text-box: trim-both cap alphabetic; }
.se-mix-play:hover { background: var(--se-sea-blue); }
.se-mix-play svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.se-mix-play .pb-ic-pause { display: none; }
.se-mix-play[aria-pressed="true"] .pb-ic-play { display: none; }
.se-mix-play[aria-pressed="true"] .pb-ic-pause { display: block; }
.se-mix-title { margin: 0; font-size: calc(9.5 * var(--t)); text-transform: uppercase; }
/* Tight lines: the title and each subtitle part (series, event) on its
   own line, so no separator dot is left at a line end. */
.se-mix-title { line-height: 1.3; text-wrap: balance; }
.se-mix-title span { display: block; text-transform: none; opacity: 0.7; margin-top: calc(4 * var(--t)); }
.se-mix-title span + span { margin-top: 0; }

/* A boat party's crew under its text (Jan's artist page layout). */
.se-set-lineup { margin: calc(17 * var(--t)) 0 0; text-transform: uppercase; }
.se-set-lineup span { text-transform: none; }
.se-set-lineup a:hover { text-decoration: underline; }
.fa-page .artist-links { grid-area: links; justify-content: center; padding: 0 var(--gutter) var(--sp-huge); margin: 0; }
.fa-hero { grid-area: photo; position: relative; aspect-ratio: 1 / 1; overflow: hidden; margin: calc(25 * var(--u)) 0 0; background: var(--se-haze-gray); }
.prog-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.fa-hero .prog-deco { display: none; }
.fa-appearances { grid-area: sets; margin: 0; padding: var(--sp-huge) var(--gutter); background: var(--se-saturation-green); text-align: center; }
.fa-appearances h2 { font-size: 22px; margin: 0 0 var(--sp-xl); }
.fa-edition { max-width: 760px; margin: 0 auto var(--sp-xl); }
.fa-edition h3 { font-size: 15px; margin: 0 0 var(--sp-xs); }
.fa-edition li { display: flex; flex-direction: column; gap: var(--sp-hair); padding: var(--sp-xs) 0; border-top: 1px solid var(--se-ink); }
.fa-where { font-size: 11px; }

/* Footer (mockup page 33): one black bar; DEKMANTEL at the left, the
   social links in the middle joined by dots, the legal line at the
   right. The links come from the sites document; the order and the dots
   are this sheet's. The wordmark is Jan's footer logo (Drive "Web / logo
   for footer", 26 Oct 2026), painted in the text colour through a mask. */
.fest-footer {
  background: #000;
  color: #fff;
  padding: calc(22 * var(--t)) calc(30 * var(--u)) calc(calc(22 * var(--t)) + var(--consent-reserve-foot));
  font-size: max(11px, calc(7.5 * var(--t)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm) calc(16 * var(--u));
  /* Above Jan's fixed layers (.se-frag-layer, z 150), so no piece ever
     covers the footer's links; the player dock stays above it. */
  position: relative;
  z-index: 160;
}
html.se-menu-open .fest-footer { z-index: auto; }
.fest-footer::before { content: ""; order: 0; height: max(14px, calc(10 * var(--t))); aspect-ratio: 1102.56 / 142.41; background: currentColor; -webkit-mask: url("/sites/selectors-2027/dekmantel-wordmark.svg") center / contain no-repeat; mask: url("/sites/selectors-2027/dekmantel-wordmark.svg") center / contain no-repeat; margin-right: calc(40 * var(--u)); }
.foot-row { display: contents; }
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-sm); white-space: nowrap; }
.foot-row > .foot-nav:first-child { order: 1; flex: 1; gap: 0; flex-wrap: nowrap; white-space: nowrap; }
.foot-row > .foot-nav:first-child a + a::before { content: "\2022"; display: inline-block; margin: 0 0.6em; text-decoration: none; }
.foot-mark { order: 2; margin: 0; }
.foot-row > .foot-nav:nth-child(2) { order: 3; }
.foot-row > .foot-nav:nth-child(3) { order: 4; }
.foot-row > .foot-nav:nth-child(n + 2) a { text-decoration: underline; text-underline-offset: 2px; }
.foot-nav a:hover { opacity: 0.7; }
.foot-social { display: none; }
.foot-sponsors { order: 5; display: flex; gap: var(--sp-xl); align-items: center; }
.foot-sponsors img { max-height: 28px; width: auto; filter: brightness(0) invert(1); }

/* Consent box (app.js). */
#dk-consent {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  max-width: 360px;
  background: var(--se-ink);
  color: var(--se-bg);
  padding: var(--sp-sm) var(--sp-md);
  font-size: 11px;
  border-radius: 6px;
  z-index: 200; /* above the fragment layers */
}
#dk-consent button {
  font: 11px var(--se-face);
  text-transform: uppercase;
  padding: var(--ctl-y) var(--ctl-x);
  margin-right: var(--sp-xs);
  border: 0;
  border-radius: 6px;
  background: var(--se-saturation-green);
  color: var(--se-ink);
  cursor: pointer;
}
#dk-consent button[data-consent="denied"] { background: transparent; color: var(--se-bg); box-shadow: inset 0 0 0 1px var(--se-bg); }

.rail-media img.rail-hover { display: none; }

@media (max-width: 768px) {
  :root { --se-header-h: 56px; }
  .wordmark-se27 { width: 88px; }
  .fest-nav { width: 100vw; }
  .fest-nav a { font-size: 28px; }
  /* The hero is taller than the mockup's 16:10 here: the lock-up keeps
     its proportions and fills the width, the arcs' left ends included. */

  .se-lockup { left: 12%; width: 76%; top: calc(var(--se-header-h) + 2%); }
  .se-frag-ha { width: 20vw; top: 12%; }
  .se-frag-hb { width: 13vw; left: 66%; top: 18%; }
  .se-frag-hc { width: 13vw; left: 84%; top: 18%; }
  .se-frag-hd { width: 18vw; top: 74%; }
  .se-frag-he { width: 22vw; left: 70%; top: 70%; }
  .se-hero-strip { left: 0; right: 0; justify-content: center; }
  .se-strip img { width: 15vw; }
  .se-tile, .se-tile.is-flipped { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .se-tile.is-flipped .se-tile-photo { order: 0; }
  .se-tile-photo { aspect-ratio: 1 / 1; }
  .se-tile-text { aspect-ratio: auto; padding: var(--sp-xxl) var(--gutter); }
  .se-frag-tf-ptr1, .se-frag-tf-ptr2, .se-frag-tf-pbr { display: none; }
  .se-frag-tf-dtl, .se-frag-tf-tl, .se-frag-tf-tr { left: 2%; top: 51%; width: 18vw; }
  .se-frag-tf-dbl { left: auto; right: 4%; top: auto; bottom: 2%; width: 16vw; }
  .se-tile-strip { left: 0; right: 0; justify-content: center; top: 2%; }
  .se-names.is-three, .se-names.is-two { columns: 1; }
  .se-sky.is-left { margin-left: var(--gutter); }
  .se-sky img, .se-sky.is-edge img { width: 9vw; }
  .se-frag-pa, .se-frag-pb, .se-frag-pc, .se-frag-pd { width: 14vw; }
  .fa-page { grid-template-columns: 1fr; grid-template-areas: "photo" "name" "bio" "links" "sets"; }
  .fa-hero { margin-top: 0; }
  .fa-page.is-set .fa-hero { aspect-ratio: 1 / 1; min-height: 0; }
  .se-mixes { grid-template-columns: 1fr; }
  .fa-page h1, .fa-bio { padding: 0 var(--gutter); }
  .se-frag-aa, .se-frag-ab { width: 16vw; }
  .se-frag-ac { display: none; }
  .se-artist-frags { height: 100vw; }
  .tt th, .tt td { min-width: 140px; }
  .fest-footer { flex-direction: column; align-items: flex-start; }
  .fest-footer::before { margin-right: 0; }
}

/* The player dock (player.css, shared with dekmantel.com) in the 2027
   identity: the Selectors face throughout, and above everything, Jan's
   fixed artwork layers included (Luc, 27 Oct 2026). !important beats the
   dock's own per-element faces (#dk-player:not(.expanded) .dkp-title). */
#dk-player { z-index: 2147483000; }
#dk-player, #dk-player * { font-family: var(--se-face) !important; }

/* Phones: no artwork layers for now. Jan's layers were drawn for the
   desktop frame and have no mobile layout yet (Luc, 27 Oct 2026). */
@media (max-width: 768px) {
  .se-frag-layer, .se-hero-frags, .se-frags, .se-artist-ov, .se-tile-frags, .se-frag { display: none !important; }
}