/* Preview only: the versions to compare (classes set on <html> by variants.js), and the options panel itself.
   The site's own choices are in site.css; nothing here goes to the real site. */

/* ---------- start page ---------- */
.v-hn-off .home-next { display: none; }
.v-hb-shade .is-home .player, .v-hb-shade .is-home .corner { filter: drop-shadow(0 0 7px rgba(40, 20, 80, .5)); }
.v-hb-purple .is-home .player:not(.is-playing):not(:hover), .v-hb-purple .is-home .nl-btn:not(:hover):not([aria-expanded="true"]) { color: var(--purple); }
.v-hh-orange .is-home .menu a:hover, .v-hh-orange .is-home .menu a:focus-visible,
.v-hh-orange .home-next a:hover, .v-hh-orange .home-next a:focus-visible { color: var(--orange); }
@media (max-width: 899px) {
  /* the start photo on phones: other versions (made by tools/phone_home.py from the same photo) */
  .v-hp-near .home-photo, .v-hp-far .home-photo, .v-hp-soft .home-photo, .v-hp-frame .home-photo, .v-hp-before .home-photo { background: #5d4a9a 50% 62% / cover no-repeat; }
  .v-hp-near .home-photo { background-image: url(../img/home-phone-near-1170.webp); }
  .v-hp-far .home-photo { background-image: url(../img/home-phone-far-1170.webp); }
  .v-hp-soft .home-photo { background-image: url(../img/home-phone-soft-1170.webp); }
  .v-hp-frame .home-photo { background-image: url(../img/home-phone-frame-1170.webp); background-position: 50% 100%; }
  .v-hp-before .home-photo { background-image: url(../img/home-elefsina-1440.webp); background-position: 48% 50%; }
  .v-hp-near .home-photo img, .v-hp-far .home-photo img, .v-hp-soft .home-photo img, .v-hp-frame .home-photo img, .v-hp-before .home-photo img, .v-hp-whole .home-photo img { visibility: hidden; }
  /* yesterday's version: both of you small, in a painted purple space */
  .v-hp-whole .home-photo { background: linear-gradient(to right, #5f4b94, #9179d1 50%, #745da2) top / 100% 50.5% no-repeat, linear-gradient(to right, #b9a2f3, #d6c9fb 50%, #cfbef9) bottom / 100% 50% no-repeat, #9179d1; }
  .v-hp-whole .home-photo::before { content: ""; position: absolute; left: 0; right: 0; top: 56%; transform: translateY(-50%); aspect-ratio: 4617 / 3404; background: url(../img/home-elefsina-960.webp) center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 84%, transparent 100%); }
}

/* ---------- works ---------- */
.v-ws-big .works-list li { font-size: calc(35 * var(--u)); line-height: calc(41 * var(--u)); letter-spacing: calc(-2.5 * var(--u)); }
.v-wp-off .works-list .peek { display: none; }
.v-wf-off .peek-film { display: none; }
.v-hf .hero-film { display: block; }
.v-wx-x .xl .x-dots, .v-wx-cur .xl .x-dots { display: none; }
.v-wx-x .xl .x-x { display: inline; }
.v-wx-cur .xl .x-cur { display: inline-block; }
.v-wx-x .x-line .xl { display: none; }   /* the x page: no "x" before "working" */
/* the works list level with the menu: the first title on the line of "works" */
@media (min-width: 900px) {
  .v-wtop .works-col { padding-top: calc(15.7 * var(--u)); }
  .v-wtop .works-list { padding-top: 0; }
  .v-wtop.v-ws-big .works-col { padding-top: calc(11 * var(--u)); }
  .v-wtop.v-ws-big .works-list li { line-height: calc(35 * var(--u)); }
}
/* the x page: the sentence at the top, level with "works" (on phones: where the pages start) */
.v-xtop .x-page { min-height: 0; display: block; place-items: start; padding: calc(4.5 * var(--u)) 0 0 calc(208 * var(--u)); }
.v-xtop .x-page .center-inner { justify-items: start; text-align: left; }
.v-xtop .x-page .x-line { justify-content: flex-start; }
@media (max-width: 899px) {
  .v-xtop .x-page { padding: 150px 16px 0; }
  .v-xtop .x-page .x-line { align-items: flex-start; }
}
@media (max-width: 899px) {
  .v-ws-big .works-list li { font-size: 30px; line-height: 32px; letter-spacing: -2px; }
  .v-wph-small .works-list .peek, .v-wph-big .works-list .peek { display: block; position: static; width: 100%; opacity: 1; transform: none; }
  .v-wph-small .works-list .peek.has-film, .v-wph-big .works-list .peek.has-film { display: block; position: relative; inset: auto; }
  .v-wph-small .works-list li:not(.li-x) { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .v-wph-small .works-list li:not(.li-x) > a { grid-column: 2; grid-row: 1; }
  .v-wph-small .works-list .peek { grid-column: 1; grid-row: 1; }
  .v-wph-small .works-list .peek img { aspect-ratio: 3 / 2; object-fit: cover; }
  .v-wph-small .works-list li.li-x { padding-left: 98px; }
  .v-wph-big .works-list li:not(.li-x) { display: flex; flex-direction: column-reverse; gap: 10px; }
  .v-wph-big .works-list li + li { margin-top: 30px; }
}

/* ---------- work pages ---------- */
.v-read .col:not(.dates-col):not(.works-col):not(.about-col) .text { max-width: calc(470 * var(--u)); }
.v-read .text .lead { font-size: max(15px, calc(15 * var(--u))); line-height: 1.45; }
.v-read .press blockquote p { font-size: max(13px, calc(12.5 * var(--u))); line-height: 1.5; }
.v-just .text p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.v-cred .credits { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: calc(20 * var(--u)); row-gap: calc(7 * var(--u)); }
.v-cred .credits div { display: contents; }
.v-cred .credits dt { display: block; padding-top: .12em; font: 400 max(10.5px, calc(10 * var(--u)))/1.62 var(--mono); letter-spacing: -0.02em; color: var(--grey); }
.v-cred .credits dt::after { content: none; }
.v-cred .credits dd { display: block; }
@media (max-width: 899px) {
  .v-read .text .lead { font-size: 17.5px; line-height: 1.45; }
  .v-read .press blockquote p { font-size: 15px; }
  .v-cred .credits { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .v-cred .credits dd { margin-bottom: 9px; }
}

/* your first idea: the credits right after the photos, then next dates, press (and the Orangerie photos) */
.v-cfirst .work .blk-credits { order: 1; margin-top: calc(32 * var(--u)); }
.v-cfirst .work .blk-dates, .v-cfirst .work > .press, .v-cfirst .work > .series { order: 2; }
.v-cfirst .work > .next-work { order: 3; }
/* as before: next dates and credits stay in the column, also on computers */
@media (min-width: 1100px) {
  .v-side-off .work > .work-side, .v-side-off .work-side > .side-in { display: contents; position: static; }
  .v-side-off .work-side .blk-dates { margin-top: calc(32 * var(--u)); }
  .v-side-off .work-side .section-title { font-size: calc(23 * var(--u)); letter-spacing: calc(-2.5 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .v-side-off .work-side .dates.next tr:not(.yr) { grid-template-columns: calc(88 * var(--u)) auto minmax(0, 1fr); grid-template-areas: "d c v"; padding: calc(6 * var(--u)) 0 calc(7 * var(--u)); }
  .v-side-off .work-side .dates.next .v::before { content: "·"; content: "·" / ""; }
  .v-side-off .work-side .dates { font-size: max(12px, calc(11.5 * var(--u))); }
  .v-side-off .work-side .dates-note { margin-top: 10px; }
}

/* ---------- dates ---------- */
.v-tot .totals { display: block; }
.v-tot .dates-col > .totals + .filters { margin-top: calc(16 * var(--u)); }

/* ---------- player: a long song title ends with … and does not move (option) ---------- */
.v-ttl-still .player.is-playing .pl-title.is-long .plt-in { animation: none; display: inline; }
.v-ttl-still .player.is-playing .pl-title.is-long .plt-gap, .v-ttl-still .player.is-playing .pl-title.is-long .plt-b { display: none; }
.v-ttl-still .player.is-playing .pl-title.is-long .plt-clip { text-overflow: ellipsis; -webkit-mask-image: none; mask-image: none; }

/* ---------- player: what moves while a song plays (default: nothing) ---------- */
/* the letters of "songs i love" dance, one after the other (the version before 1 Nov) */
.v-pl-dance .player.is-playing .pl-letters i { animation: cg-bob 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * .085s); }
@keyframes cg-bob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(calc(-2.6 * var(--u))); } }
.v-pl-bars .player.is-playing .pl-letters i, .v-pl-line .player.is-playing .pl-letters i, .v-pl-none .player.is-playing .pl-letters i,
.v-pl-dot .player.is-playing .pl-letters i { animation: none; }
.v-pl-bars .pl-eq { display: inline-flex; }
.v-pl-line .pl-prog { display: block; }
/* letters jump on the beat, each a little differently (--lvl comes from site.js) */
.v-pl-beat .player.is-playing .pl-letters i { animation: none; transform: translateY(calc(var(--lvl, 0) * var(--w, 0) * -6 * var(--u))); }
/* each letter turns around once, one after the other, like a pirouette going through the word */
.v-pl-spin .player.is-playing .pl-letters i { animation: cg-spin 3.4s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: calc(var(--i) * .26s); }
@keyframes cg-spin { 0% { transform: rotateY(0); } 12%, 100% { transform: rotateY(360deg); } }
/* a colour wave, orange to purple, travelling through the letters */
.v-pl-hue .player.is-playing .pl-letters i { animation: cg-hue 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .11s); }
@keyframes cg-hue { 0%, 100% { color: var(--orange); } 50% { color: var(--purple); } }
/* a little dot hopping from letter to letter */
.v-pl-dot .player.is-playing .pl-ball { display: block; animation: cg-ball-x 3.6s linear infinite alternate, cg-ball-y .3s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
@keyframes cg-ball-x { from { left: 0; } to { left: calc(100% - 4.5 * var(--u)); } }
@keyframes cg-ball-y { from { transform: translateY(0); } to { transform: translateY(calc(-6 * var(--u))); } }

/* ---------- player: the list of songs ---------- */
/* to the right of the sign (the version before 1 Nov): the song playing bigger, to the right of the list sign,
   the others unfolding above; when the list is closed, the title small above the bar */
@media (min-width: 900px) {
  .v-pq-right .pl-side { position: relative; }
  .v-pq-right .pl-now { display: block; }
  .v-pq-right .pl-queue { left: calc(10 * var(--u)); bottom: calc(100% + 9 * var(--u)); }
  .v-pq-right .pl-queue .is-now { display: none; }
  .v-pq-right .player .pl-title { font-size: max(11px, calc(10.5 * var(--u))); line-height: 1.2; bottom: calc(100% + 5px); max-width: calc(184 * var(--u)); white-space: normal; }
  .v-pq-right .player .pl-title::before { content: none; }
  .v-pq-right .player .pl-title { transition: opacity .2s ease; }
  /* in one line to the right of the sign: the song playing, then the next ones, fading out to the right */
  .v-pq-line .pl-side { position: relative; }
  .v-pq-line .pl-queue .is-now button::before { content: none; }
  .v-pq-line .pl-queue { display: block; left: calc(10 * var(--u)); bottom: 0; white-space: nowrap; max-width: 62vw; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 70%, transparent); mask-image: linear-gradient(to right, #000 70%, transparent); }
  .v-pq-line .pl-queue li, .v-pq-line .pl-queue .is-now { display: inline-block; }
  .v-pq-line .pl-queue .is-now button { font-size: calc(17.5 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); }
  .v-pq-line .pl-queue li + li::before { content: "·"; margin: 0 .7em; color: var(--orange); }
  .v-pq-line .pl-queue li { transform: translateX(-8px); }
  .v-pq-line .pl-queue::before { display: none; }   /* one line next to the bar: no veil needed */
  .v-pq-line .is-home .pl-queue button { color: var(--orange); }
}

/* ---------- the colour stays when the list of songs opens (default when a colour is on) ---------- */
/* the white veil that hides the page text behind the list moves under the colour: page text < veil < colour < songs;
   like the veil of the real site, it rises from the bottom edge at the pace of the songs unfolding */
.qveil { display: none; }
:is(.v-gl-aurora, .v-gl-stain, .v-gl-curtain):not(.v-gq-white) .qveil { display: block; position: fixed; z-index: 25; left: 0; right: 0; top: var(--qv-top, 60vh); bottom: 0; pointer-events: none;
  background: var(--bg); opacity: 0; transform: translateY(100%); transition: opacity .15s ease calc(var(--qn, 10) * 22ms + .12s), transform calc(var(--qn, 10) * 22ms + .25s) cubic-bezier(.45, 0, .85, .6);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 118px); mask-image: linear-gradient(to bottom, transparent, #000 118px); }
:is(.v-gl-aurora, .v-gl-stain, .v-gl-curtain):not(.v-gq-white) .site:has(.player.q-open) .qveil { opacity: 1; transform: none;
  transition: opacity .15s ease, transform calc(.25s + var(--qn, 10) * 45ms) cubic-bezier(.25, .6, .3, 1); }
:is(.v-gl-aurora, .v-gl-stain, .v-gl-curtain):not(.v-gq-white) .pl-queue::before { display: none !important; }
:is(.v-gl-aurora, .v-gl-stain, .v-gl-curtain):not(.v-gq-white) .is-home .qveil { display: none; }   /* start page: no veil on the photo (as before) */
@media (max-width: 899px) {
  :is(.v-gl-aurora, .v-gl-stain, .v-gl-curtain):not(.v-gq-white) .qveil { background: #fff; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 46px); mask-image: linear-gradient(to bottom, transparent, #000 46px); }
}

/* ---------- the colour in the bottom left corner ---------- */
/* The layer reaches past the left and bottom edges of the screen (by --gx / --gy), so that when it swells and
   drifts with the music its own edges stay hidden outside the screen (they used to show as a straight line). */
.glow { --gx: 8vw; --gy: 10vh; --gw: 60vw; --gh: 66vh;
  display: none; position: fixed; z-index: 26; left: calc(-1 * var(--gx)); bottom: calc(-1 * var(--gy)); width: calc(var(--gw) + var(--gx)); height: calc(var(--gh) + var(--gy));
  pointer-events: none; opacity: var(--glow-still, .3); transition: opacity 3s ease;
  -webkit-mask-image: radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) calc(100% - var(--gy)), #000 0%, rgba(0, 0, 0, .85) 28%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) calc(100% - var(--gy)), #000 0%, rgba(0, 0, 0, .85) 28%, rgba(0, 0, 0, 0) 72%); }
.v-gl-aurora .glow, .v-gl-stain .glow, .v-gl-curtain .glow { display: block; }
/* how strong: two sliders in the options panel (no song / a song playing); a little stronger on the photo of the start page */
.is-music .glow { opacity: var(--glow-play, .55); }
.is-home .glow { opacity: min(1, calc(var(--glow-still, .3) * 1.3)); }
.is-music .is-home .glow { opacity: min(1, calc(var(--glow-play, .55) * 1.3)); }
.v-gw-music .glow { opacity: 0; }
.v-gw-music.is-music .glow { opacity: var(--glow-play, .55); }
.v-gb-light .glow { mix-blend-mode: screen; }
.v-gb-ink .glow { mix-blend-mode: multiply; }
.glow-in { position: absolute; left: var(--gx); bottom: var(--gy); width: var(--gw); height: var(--gh); animation: gl-hue 97s ease-in-out infinite alternate; }
/* while a song plays, the whole colour also swells and shifts a little more — slowly, never on the beat;
   it pauses where it is when the song stops (no jump) and goes on from there with the next song */
.glow { transform-origin: 0 100%; animation: gl-swell 17s ease-in-out infinite alternate; animation-play-state: paused; }
.is-music .glow { animation-play-state: running; }
@keyframes gl-swell {
  0% { transform: translate(0, 0) scale(1); filter: hue-rotate(0deg) saturate(1); }
  50% { transform: translate(3%, -4%) scale(1.08); filter: hue-rotate(16deg) saturate(1.12); }
  100% { transform: translate(-2%, -7%) scale(1.04); filter: hue-rotate(-12deg) saturate(1.06); }
}
@keyframes gl-hue { from { filter: hue-rotate(-16deg); } to { filter: hue-rotate(16deg); } }
.glow i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* aurora: three soft lights (purple, orange, pink) drifting slowly */
.v-gl-aurora .g1 { width: 72%; height: 84%; left: -22%; bottom: -34%; background: radial-gradient(closest-side, rgba(102, 0, 255, .9), rgba(102, 0, 255, 0)); animation: gl-a 67s ease-in-out infinite alternate; }
.v-gl-aurora .g2 { width: 62%; height: 72%; left: 8%; bottom: -26%; background: radial-gradient(closest-side, rgba(236, 82, 11, .85), rgba(236, 82, 11, 0)); animation: gl-b 83s ease-in-out infinite alternate; }
.v-gl-aurora .g3 { width: 56%; height: 62%; left: -8%; bottom: 2%; background: radial-gradient(closest-side, rgba(255, 61, 154, .72), rgba(255, 61, 154, 0)); animation: gl-c 101s ease-in-out infinite alternate; }
@keyframes gl-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9%, -5%) scale(1.06); } 100% { transform: translate(-3%, -11%) scale(.98); } }
@keyframes gl-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-7%, -9%) scale(1.08); } 100% { transform: translate(11%, -3%) scale(.96); } }
@keyframes gl-c { 0% { transform: translate(0, 0) scale(1.04); } 50% { transform: translate(12%, 4%) scale(.97); } 100% { transform: translate(2%, -9%) scale(1.06); } }
/* a stain that breathes: orange at its heart, pink, then purple at the edge */
.v-gl-stain .g1 { width: 96%; height: 108%; left: -32%; bottom: -42%;
  background: radial-gradient(closest-side, rgba(236, 82, 11, .95), rgba(255, 61, 154, .6) 42%, rgba(102, 0, 255, .38) 68%, rgba(102, 0, 255, 0)); animation: gl-breath 31s ease-in-out infinite; }
.v-gl-stain .g2, .v-gl-stain .g3, .v-gl-curtain .g2, .v-gl-curtain .g3 { display: none; }
@keyframes gl-breath { 0%, 100% { transform: scale(.96) rotate(0deg); } 50% { transform: scale(1.04) rotate(6deg); } }
/* curtains of light: soft vertical bands that drift and sway, like a northern light */
.v-gl-curtain .g1 { border-radius: 0; left: 0; bottom: -4%; width: 300%; height: 96%;
  background: repeating-linear-gradient(97deg, rgba(102, 0, 255, 0) 0%, rgba(102, 0, 255, .6) 4%, rgba(236, 82, 11, 0) 8.5%, rgba(236, 82, 11, .55) 12%, rgba(255, 61, 154, 0) 16%, rgba(255, 61, 154, .5) 19.5%, rgba(102, 0, 255, 0) 24%);
  -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, .55) 55%, transparent 96%); mask-image: linear-gradient(to top, #000 8%, rgba(0, 0, 0, .55) 55%, transparent 96%);
  transform-origin: 0 100%; animation: gl-drift 140s linear infinite, gl-sway 29s ease-in-out infinite alternate; }
@keyframes gl-drift { from { translate: 0 0; } to { translate: -48% 0; } }
@keyframes gl-sway { from { transform: skewX(-5deg) scaleY(.96); } to { transform: skewX(4deg) scaleY(1.03); } }
@media (max-width: 899px) { .glow { --gw: 100vw; --gh: 48vh; } }

/* ---------- the options panel ---------- */
.vx-tab { position: fixed; z-index: 200; right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; padding: 12px 6px; background: #fff; color: #000;
  border: 1px solid #e6e3ec; border-right: 0; border-radius: 10px 0 0 10px; box-shadow: 0 4px 16px rgba(40, 20, 80, .08); font: 500 11px/1 Inter, -apple-system, sans-serif; letter-spacing: .05em; }
.vx-tab:hover, .vx-tab[aria-expanded="true"] { color: #6600ff; }
.vx-panel { position: fixed; z-index: 201; top: 0; right: 0; bottom: 0; width: min(360px, calc(100vw - 36px)); overflow: auto; overscroll-behavior: contain; padding: 18px 18px 30px;
  background: #fff; color: #000; border-left: 1px solid #e6e3ec; box-shadow: -10px 0 40px rgba(40, 20, 80, .1); font: 400 13px/1.45 Inter, -apple-system, sans-serif;
  transform: translateX(100%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s; }
.vx-panel.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.vx-head { display: flex; justify-content: space-between; align-items: center; }
.vx-h { margin: 0; font: 400 24px/1 'Roboto Mono', monospace; letter-spacing: -1.6px; }
.vx-x { width: 36px; height: 36px; border-radius: 50%; font: 300 24px/1 Inter, sans-serif; }
.vx-x:hover { background: #f6f5f8; }
.vx-intro { margin: 8px 0 0; color: #77717f; font-size: 12.5px; }
.vx-g { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e6e3ec; }
.vx-g h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 400 16px/1 'Roboto Mono', monospace; letter-spacing: -1px; }
.vx-go { font: 400 12px/1 Inter, sans-serif; letter-spacing: 0; color: #6600ff; }
.vx-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.vx-opt + .vx-opt { margin-top: 12px; }
.vx-l { margin: 0 0 6px; }
.vx-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.vx-seg button { padding: 6px 11px; border: 1px solid #e6e3ec; border-radius: 40px; background: #fff; color: #000; font: 400 12.5px/1.25 Inter, sans-serif; text-align: left; transition: border-color .15s ease, color .15s ease; }
.vx-seg button:first-child::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: #ec520b; vertical-align: 2px; }
.vx-seg button:hover { border-color: #6600ff; color: #6600ff; }
.vx-seg button[aria-pressed="true"] { background: #000; border-color: #000; color: #fff; }
.vx-foot { margin-top: 22px; }
.vx-reset { color: #6600ff; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
@media print { .vx-tab, .vx-panel { display: none !important; } }

/* ---------- the whole site: new looks ----------
   black box: the theatre with the lights down (black page, white type, a lighter purple so it reads on black)
   purple: the page in your purple, like a poster (white type; a lighter orange so it shows on purple) */
html.v-look-dark { color-scheme: dark; --bg: #000; --ink: #fff; --purple: #a27dff; --grey: #9b96a5; --ghost: #8f8a99; --ghost-desk: #6f6a79; --line: #2b2833; --grey-strong: #b4afbd; }
html.v-look-purple { color-scheme: dark; --bg: #6600ff; --ink: #fff; --purple: #e4d8ff; --orange: #ffa25e; --grey: #dcd0ff; --ghost: #c7b5ff; --ghost-desk: #b29bff; --line: rgba(255, 255, 255, .28); --grey-strong: #e8dfff; }
.v-look-dark .skip, .v-look-purple .skip { color: #000; }
.v-look-dark ::selection { background: #6600ff; color: #fff; }
.v-look-purple ::selection { background: #fff; color: #6600ff; }
.v-look-purple :focus-visible { outline-color: #fff; }
.v-look-dark .nl-pop { background: #141317; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.v-look-purple .nl-pop { background: #5a00e0; box-shadow: 0 10px 40px rgba(30, 0, 80, .35); }
.v-look-dark .pl-queue::before { background: rgba(0, 0, 0, .72); }
.v-look-purple .pl-queue::before { background: rgba(102, 0, 255, .78); }
.v-look-purple .pill { background: #fff; color: #6600ff; }
.v-look-purple .pill:hover { background: #ffa25e; color: #fff; }
.v-look-purple .watch-play svg { background: #fff; fill: #6600ff; }
.v-look-purple .lead, .v-look-purple .text .lead { color: #fff; }
.v-look-dark .walk path, .v-look-purple .walk path { stroke: var(--purple); }
.v-look-purple .walk path { stroke: #fff; } .v-look-purple .walk circle { fill: #ffa25e; }
@media (max-width: 899px) {
  .v-look-dark .site:not(.is-home) .minibar { background: linear-gradient(to bottom, #000 66%, rgba(0, 0, 0, 0)); }
  .v-look-dark .site:not(.is-home)::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 18px); }
  .v-look-dark .pl-queue::before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 46px); }
  .v-look-purple .site:not(.is-home) .minibar { background: linear-gradient(to bottom, #6600ff 66%, rgba(102, 0, 255, 0)); }
  .v-look-purple .site:not(.is-home)::after { background: linear-gradient(to bottom, rgba(102, 0, 255, 0), #6600ff 18px); }
  .v-look-purple .pl-queue::before { background: linear-gradient(to bottom, rgba(102, 0, 255, 0), #6600ff 46px); }
}

/* ---------- more options (31 Oct, night) ---------- */
/* page changes: a soft fade */
.v-pt-fade main { transition: opacity .19s ease; }
.v-pt-fade main.pt-out { opacity: 0; }
/* phones: the bottom bar steps aside while you scroll down */
@media (max-width: 899px) {
  .v-bb-hide .player, .v-bb-hide .corner { transition: transform .35s ease, opacity .35s ease; }
  .v-bb-hide .site.scroll-down .player, .v-bb-hide .site.scroll-down .corner { transform: translateY(160%); opacity: 0; }
  .v-bb-hide .site:not(.is-home)::after { transition: opacity .35s ease; }
  .v-bb-hide .site.scroll-down:not(.is-home)::after { opacity: 0; }
}
/* "songs i love" a little bigger (your note, Nov 2024) */
.v-pl-big .player .pl-text { font-size: calc(21 * var(--u)); letter-spacing: calc(-2.5 * var(--u)); }
@media (max-width: 899px) { .v-pl-big .player .pl-text { font-size: 21px; letter-spacing: -2.2px; } }
/* about: the portrait on the side, under your name (like the next dates on the work pages) */
@media (min-width: 1100px) {
  .v-ab-side .about-col { position: relative; }
  .v-ab-side .about-col > .about-portrait { position: absolute; top: calc(176 * var(--u)); left: calc(100% + 34 * var(--u)); width: calc(196 * var(--u)); margin: 0; }
  .v-ab-side .about-col > .about-portrait + * { margin-top: 0; }
}
/* work pages: how many times the work was performed, in the credits */
.v-wh .credits .cr-where { display: block; }
/* MOTEUR: the interview with more room (a big picture, like the trailer) */
.v-iv-big .watch-main { display: block; width: auto; }
.v-iv-big .watch-main .watch-img { display: block; position: relative; width: 100%; }
.v-iv-big .watch-main .watch-img img { width: 100%; height: auto; }
.v-iv-big .watch-main .watch-play { padding: calc(16 * var(--u)) calc(18 * var(--u)); background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) max(120px, calc(150 * var(--u)))); }
.v-iv-big .watch-main .watch-play .wp-l { font-size: max(12px, calc(14 * var(--u))); }
.v-iv-big .watch-main .watch-txt { display: block; margin-top: calc(9 * var(--u)); }
.v-iv-big .watch-main .watch-txt > * { display: inline; }
.v-iv-big .watch-main .watch-txt > * + *::before { content: " · "; }
/* reach out: your portfolio to download */
.v-pf .center .pf { display: block; }
/* easier reading: also the work's title at the size of the menu, and no word left alone on the last line */
.v-read .page-title { font-size: calc(35 * var(--u)); line-height: calc(35 * var(--u)); letter-spacing: calc(-2.5 * var(--u)); }
.v-read .text p, .v-read .press blockquote p { text-wrap: pretty; }


/* captions with the work's title, as before */
.v-cap-t .work figcaption .cap-t { display: inline; }
/* a short quote under the title */
.v-tq .top-quote { display: block; order: 0; }
/* "new dates by email" under the next dates */
.v-nlh .nl-hint { display: block; margin-top: calc(4 * var(--u)); }
/* accent colours: a deeper purple (your note, Nov 2024) / only black and white (your note, 2022) */
html.v-col-deep { --purple: #4300d6; }
html.v-look-dark.v-col-deep { --purple: #8c66ff; }
html.v-look-purple.v-col-deep { --purple: #e4d8ff; }
html.v-col-bw { --purple: #000; --orange: #000; }
.v-col-bw .works-list a:hover .wt, .v-col-bw .menu a:hover, .v-col-bw .dates a.wn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.v-col-bw.v-look-dark, .v-col-bw.v-look-purple { --purple: #fff; --orange: #fff; }

/* type: a finer mono for the menu, titles and small lines (Fragment Mono, free font, OFL) */
@font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fragment-mono-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fragment Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/fragment-mono-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
html.v-type-frag { --mono: 'Fragment Mono', 'Roboto Mono', ui-monospace, monospace; }
.v-type-frag .menu li, .v-type-frag .minibar li, .v-type-frag .works-list li, .v-type-frag .section-title, .v-type-frag .next-work, .v-type-frag .page-title, .v-type-frag .player .pl-text { letter-spacing: -0.1em; }

/* your name sways when you point at it (the letters lean left, then right, one after the other) */
.logo.sway i { display: inline-block; font-style: normal; transform-origin: 50% 90%; animation: cg-sway .95s cubic-bezier(.3, .6, .3, 1) both; animation-delay: calc(var(--k) * 42ms); }
.logo i { font-style: normal; }
@keyframes cg-sway { 0% { rotate: 0deg; } 30% { rotate: -8deg; } 62% { rotate: 6deg; } 100% { rotate: 0deg; } }
/* spike tape: small orange crosses in the four corners, like the marks on a stage floor */
.tape i { position: fixed; z-index: 27; width: 13px; height: 13px; pointer-events: none; display: none; }
.v-tape .tape i { display: block; }
.tape i::before, .tape i::after { content: ""; position: absolute; background: var(--orange); border-radius: 1px; opacity: .92; }
.tape i::before { left: 0; top: 5px; width: 13px; height: 3px; }
.tape i::after { left: 5px; top: 0; width: 3px; height: 13px; }
.tape i:nth-child(1) { top: 7px; left: 7px; rotate: -4deg; }
.tape i:nth-child(2) { top: 7px; right: 7px; rotate: 3deg; }
.tape i:nth-child(3) { bottom: 7px; left: 7px; rotate: 2deg; }
.tape i:nth-child(4) { bottom: 7px; right: 7px; rotate: -3deg; }
@media (max-width: 899px) { .tape i { width: 10px; height: 10px; } .tape i::before { width: 10px; top: 4px; height: 2px; } .tape i::after { left: 4px; height: 10px; width: 2px; }
  .tape i:nth-child(1) { top: 3px; left: 3px; } .tape i:nth-child(2) { top: 3px; right: 3px; } .tape i:nth-child(3) { bottom: 3px; left: 3px; } .tape i:nth-child(4) { bottom: 3px; right: 3px; } }
/* works: the photo appears in your purple, then turns to its own colours */
.v-peek-duo .works-list .peek { filter: grayscale(1) sepia(1) hue-rotate(218deg) saturate(3.2) brightness(.92) contrast(1.05); }
.v-peek-duo .works-list a:hover + .peek, .v-peek-duo .works-list a:focus-visible + .peek { filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1) contrast(1); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1), filter .9s ease .45s; }
/* dates: the coming dates big, like a tour poster */
.v-dates-big .dates-col tbody.upcoming tr:not(.yr) { grid-template-columns: calc(196 * var(--u)) auto minmax(0, 1fr); align-items: baseline; padding: calc(9 * var(--u)) 0; }
.v-dates-big .dates-col tbody.upcoming .d { font: 700 calc(28 * var(--u))/1 var(--brand); letter-spacing: calc(-1.2 * var(--u)); grid-row: 1 / span 2; align-self: start; }
.v-dates-big .dates-col tbody.upcoming tr.last-up { padding-bottom: calc(40 * var(--u)); }
.v-dates-big .dates-col tr.first-up .d::before { width: 12px; height: 12px; margin-left: -20px; margin-right: 8px; vertical-align: .12em; }
@media (max-width: 899px) {
  .v-dates-big .dates-col tbody.upcoming tr:not(.yr) { grid-template-columns: 1fr; grid-template-areas: "d" "w" "c" "v"; }
  .v-dates-big .dates-col tbody.upcoming .d { font-size: 30px; letter-spacing: -1.2px; grid-row: auto; margin-bottom: 4px; }
  .v-dates-big .dates-col tr.first-up .d::before { margin-left: 0; }
}

/* reduced motion: the options that move with the beat stay still */
@media (prefers-reduced-motion: reduce) {
  .v-pl-beat .player.is-playing .pl-letters i { translate: none !important; }
  .glow i, .glow-in, .glow { scale: 1 !important; animation: none !important; }
}

/* ---------- round 3 (1 Nov, night) ---------- */
/* dates: the year, big, in the margin under the menu; it stays in view while its dates go by, then the next year takes its place */
@media (min-width: 900px) {
  .v-dates-years .dates tr.yr { position: sticky; top: calc(198 * var(--u)); z-index: 1; height: calc(52 * var(--u)); padding: 0; pointer-events: none; }
  .v-dates-years .dates tr.yr th { position: absolute; top: 0; left: calc(-188 * var(--u)); padding: 0 !important;
    font: 700 calc(62 * var(--u))/calc(48 * var(--u)) var(--brand); letter-spacing: calc(-3.2 * var(--u)); color: var(--yr, #dcd7e6); }
  .v-dates-years .dates tbody.upcoming tr.last-up { padding-bottom: calc(14 * var(--u)); }
}
@media (max-width: 899px) {
  .v-dates-years .dates tr.yr { position: sticky; top: calc(54px + env(safe-area-inset-top, 0px)); z-index: 2; padding: 14px 0 4px !important; background: var(--bg); }
  .v-dates-years .dates tr.yr th { font: 700 36px/1 var(--brand) !important; letter-spacing: -1.6px !important; color: var(--yr, #dcd7e6); }
}
.v-look-dark.v-dates-years { --yr: #2c2833; }
.v-look-purple.v-dates-years { --yr: #8a4dff; }

/* work pages: the photos in a rhythm — the first one full, then smaller on the right, larger on the left, and so on (computer) */
@media (min-width: 900px) {
  .v-rhythm article.work > figure.ph:nth-child(even of figure.ph) { width: 68%; margin-left: auto; }
  .v-rhythm article.work > figure.ph:nth-child(odd of figure.ph):not(:nth-child(1 of figure.ph)) { width: 86%; }
}

/* about: the cities where the works were performed, one after the other, in the two colours */
.v-cities .cities-sec { display: block; }

/* "next →" at the end of a work page: without the photo (as before) */
.v-next-off .next-work .peek { display: none !important; }

/* ftwrk page: faint squared paper, like the notebook where the steps are written as numbers */
html.v-paper body:has(.site[data-page="ftwrk"]) {
  background-color: var(--bg);
  background-image: linear-gradient(var(--paper, #ece9f4) 1px, transparent 1px), linear-gradient(90deg, var(--paper, #ece9f4) 1px, transparent 1px);
  background-size: calc(18 * var(--u)) calc(18 * var(--u)); background-position: -1px -1px;
}
@media (max-width: 899px) { html.v-paper body:has(.site[data-page="ftwrk"]) { background-size: 16px 16px; } }
html.v-look-dark.v-paper { --paper: #1c1a22; }
html.v-look-purple.v-paper { --paper: #7a2bff; }

/* back to the top: the arrow stays in the corner, above the icons, once you have scrolled down (an option) */
.tt-fix { display: none; }
.v-top-float .tt-fix { display: block; position: fixed; z-index: 30; right: calc(18 * var(--u)); bottom: calc(14 * var(--u) + 38 * var(--u)); padding: calc(4 * var(--u)) calc(4 * var(--u));
  margin-right: env(safe-area-inset-right, 0px); margin-bottom: env(safe-area-inset-bottom, 0px);
  font: 400 calc(19 * var(--u))/1 var(--mono); color: var(--grey); text-shadow: 0 0 8px var(--bg), 0 0 3px var(--bg); opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1), color .15s ease; }
.v-top-float .tt-fix.on { opacity: 1; transform: none; pointer-events: auto; }
.v-top-float .tt-fix:hover, .v-top-float .tt-fix:focus-visible { color: var(--purple); }
.v-top-float .site:has(.player.q-open) .tt-fix, .v-top-float.lb-on .tt-fix { opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .v-top-float .tt-fix { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(52px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 8px 10px; font-size: 20px; }
  .v-top-float .player .pl-title { max-width: calc(100vw - 84px); }   /* the song title never runs under the arrow */
}

/* options panel: sliders (the strength of the colour in the corner) */
.vx-range { display: flex; align-items: center; gap: 10px; }
.vx-range input { flex: 1; accent-color: #6600ff; }
.vx-range output { min-width: 3.2em; text-align: right; font: 400 12px/1 Inter, sans-serif; color: #6c6675; }

/* start page: the list of songs — straight on the photo in orange (default), in white, or on a deep purple band (white titles) */
@media (max-width: 899px) {
  .v-hql-band .is-home .pl-queue::before { display: block; bottom: calc(-90px - env(safe-area-inset-bottom, 0px)); background: rgba(44, 28, 104, .86);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70px); mask-image: linear-gradient(to bottom, transparent, #000 70px); }
  .v-hql-band .is-home .player.q-open { filter: none; }
}
@media (min-width: 900px) {
  .v-hql-band .is-home .pl-queue::before { display: block; background: rgba(44, 28, 104, .84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .v-hql-band .is-home .pl-queue .s { opacity: .7; }
}
.v-hql-band .is-home .pl-queue button, .v-hql-white .is-home .pl-queue button { color: #fff; }
.v-hql-deep .is-home .pl-queue button { color: #2b1670; }
.v-hql-ink .is-home .pl-queue button { color: #000; }

/* ---------- the play sign on videos (option vp). Default (site.css): "● play" on the image, bottom left — his pick (1 Nov);
   it only shows when the trailer can't start by itself. The other choices reset that default first. ---------- */
.v-vp-disc .video .play, .v-vp-ring .video .play, .v-vp-white .video .play, .v-vp-cap .video .play { place-items: center; padding: 0; background: none; }
.v-vp-disc .video .play span, .v-vp-ring .video .play span, .v-vp-white .video .play span { display: grid; place-items: center; gap: 0; border-radius: 50%; text-shadow: none; transition: transform .2s ease, background-color .2s ease; }
.v-vp-disc .video .play span::before, .v-vp-ring .video .play span::before, .v-vp-white .video .play span::before,
.v-vp-disc .video .play span::after, .v-vp-ring .video .play span::after, .v-vp-white .video .play span::after { content: none; }
.v-vp-disc .video .play svg, .v-vp-ring .video .play svg, .v-vp-white .video .play svg { display: block; fill: #fff; margin-left: 6%; }
.v-vp-disc .video .play:hover span, .v-vp-ring .video .play:hover span, .v-vp-white .video .play:hover span { transform: scale(1.08); }
.v-vp-disc .watch-play, .v-vp-ring .watch-play, .v-vp-white .watch-play { place-items: center; padding: 0; background: none; }
.v-vp-disc .watch-play .wp-l, .v-vp-ring .watch-play .wp-l, .v-vp-white .watch-play .wp-l { display: none; }
.v-vp-disc .watch-play svg, .v-vp-ring .watch-play svg, .v-vp-white .watch-play svg { display: block; border-radius: 50%; width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 26px; min-height: 26px; padding: calc(8 * var(--u)); box-shadow: none; fill: #fff; }
.v-vp-disc .watch:hover .watch-play svg, .v-vp-ring .watch:hover .watch-play svg, .v-vp-white .watch:hover .watch-play svg { transform: scale(1.08); }
/* the orange disc in the middle (before) */
.v-vp-disc .video .play span { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 48px; min-height: 48px; background: var(--orange); }
.v-vp-disc .video .play svg { width: 34%; height: 34%; }
.v-vp-disc .watch-play svg { background: var(--orange); }
/* a thin white circle in the middle, not filled: the dancer shows through */
.v-vp-ring .video .play span { width: calc(56 * var(--u)); height: calc(56 * var(--u)); min-width: 42px; min-height: 42px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), 0 0 14px rgba(0, 0, 0, .15); }
.v-vp-ring .video .play svg { width: 30%; height: 30%; }
.v-vp-ring .video .play:hover span, .v-vp-ring .video .play:focus-visible span { background: rgba(255, 255, 255, .14); }
.v-vp-ring .watch-play svg { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95); }
/* a smaller white disc with an orange triangle */
.v-vp-white .video .play span { width: calc(46 * var(--u)); height: calc(46 * var(--u)); min-width: 38px; min-height: 38px; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .16); }
.v-vp-white .video .play svg { fill: var(--orange); width: 32%; height: 32%; }
.v-vp-white .watch-play svg { background: #fff; fill: var(--orange); }
/* "● play" under the image, on the caption line (the caption stays right); the small cards need no sign */
.v-vp-cap .video { overflow: visible; }
.v-vp-cap .video .play span { position: absolute; left: 0; top: calc(100% + 7 * var(--u)); font: 400 max(10px, calc(9.5 * var(--u)))/1.3 var(--mono); letter-spacing: -0.02em; color: var(--ink); text-shadow: none; transition: color .15s ease; }
.v-vp-cap .video .play span::before { width: .72em; height: .72em; box-shadow: none; }
.v-vp-cap .video img { transition: filter .3s ease; }
.v-vp-cap .video:hover img { filter: brightness(.93); }
.v-vp-cap .video .play:hover span, .v-vp-cap .video .play:focus-visible span { color: var(--purple); }
.v-vp-cap .video + figcaption { min-height: 1.3em; }
.v-vp-cap figure:has(> .video:last-child) { padding-bottom: calc(20 * var(--u)); }
.v-vp-cap .watch-play { display: none; }

/* ---------- MOTEUR: the interview video card (option iv). Default (site.css): small, beside its title, under the trailer ---------- */
/* computers: half the width of the column, its words beside it, then more air before the photos (phones keep the small card) */
@media (min-width: 900px) {
  .v-iv-half .col > * + .watch-main { margin-top: calc(22 * var(--u)); }
  .v-iv-half .watch-main, .v-iv-end .watch-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(28 * var(--u)); align-items: center; width: 100%; }
  .v-iv-half .watch-main .watch-img, .v-iv-end .watch-end .watch-img { width: 100%; }
  .v-iv-half .watch-main .watch-play, .v-iv-end .watch-end .watch-play { padding: calc(14 * var(--u)) calc(16 * var(--u)); background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) max(110px, calc(130 * var(--u)))); }
  .v-iv-half .watch-main .watch-play .wp-l, .v-iv-end .watch-end .watch-play .wp-l { font-size: max(12px, calc(13 * var(--u))); }
  .v-iv-half .col > .watch-main + * { margin-top: calc(84 * var(--u)); }
}
@media (max-width: 899px) { .v-iv-half .col > .watch-main + * { margin-top: 44px; } }
/* after the photos, just before the press (same half-width row on computers) */
.v-iv-end .watch-main { display: none; }
.v-iv-end .watch-end { display: flex; }
.v-iv-end .col > * + .watch-end { margin-top: calc(64 * var(--u)); }
.v-iv-end .col > .watch-end + * { margin-top: calc(48 * var(--u)); }
/* on the side, under the next dates (computers); on phones it comes back into the column with the dates */
.v-iv-side .watch-main { display: none; }
.v-iv-side .watch-side { display: block; width: 100%; max-width: 100%; margin-top: calc(34 * var(--u)); }
.v-iv-side .watch-side .watch-img { width: 100%; }
.v-iv-side .watch-side .watch-txt { margin-top: calc(9 * var(--u)); }
.v-iv-side .watch-side .watch-t { font-size: max(13px, calc(13 * var(--u))); }
@media (max-width: 899px) {
  .v-iv-side .watch-side { display: flex; margin-top: 28px; }
  .v-iv-side .watch-side .watch-img { width: 132px; }
  .v-iv-side .watch-side .watch-txt { margin-top: 0; }
}