/* cassielgaube.xyz — clean rebuild of the ReadyMag design (Oct 2026).
   Desktop: the 1024px ReadyMag layout, scaled with the window like the original "scalable" viewer
   (1 design px = --u). Phone: one column, same type and colours. */

@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/roboto-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: 'Roboto Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/roboto-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; }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/roboto-latin-700-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: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/roboto-latin-ext-700-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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-ext-500-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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-ext-700-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; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-italic.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: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-ext-400-italic.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; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-italic.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: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-ext-500-italic.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; }

/* The site has one look on purpose (white page, black type, purple, orange-red). */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #000000;
  --purple: #6600ff;      /* intro paragraphs, hovers (ReadyMag link style) */
  --orange: #ec520b;      /* "songs i love" while playing, reach out button, instagram, dot */
  --grey: #77717f;        /* captions, attributions (violet grey, readable: 4.7:1 on white) */
  --ghost: #77717f;       /* menu items on phones, not current page */
  --ghost-desk: #918c9b;  /* menu items on computer, not current page: grey until hovered (his note, Nov 2024) */
  --line: #e6e3ec;
  --grey-strong: #55505e; /* past dates on phones (a bit darker than the grey) */
  --mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --brand: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  /* 1 ReadyMag design px. The original layout is 1024px wide and scales with the window up to 2000px. */
  --u: calc(min(100vw, 2000px) / 1024);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em, i { font-style: italic; }
strong, b { font-weight: 700; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; font: 400 14px/1 var(--mono); }
.skip:focus { top: 8px; }

/* ---------- header: menu (top left) and name (top right) ---------- */
.menu { position: fixed; z-index: 20; left: calc(20 * var(--u)); top: calc(11 * var(--u)); padding-left: env(safe-area-inset-left, 0px); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { font: 400 calc(35 * var(--u))/calc(35 * var(--u)) var(--mono); letter-spacing: calc(-2.5 * var(--u)); white-space: nowrap; }
.menu a, .menu span { display: inline-block; color: var(--ink); transition: color .15s ease; }
.menu a:hover, .menu a:focus-visible { color: var(--purple); }
/* inner pages: the other menu items are grey until you hover them, then purple */
.menu .ghost { color: var(--ghost-desk); }
.menu .ghost:hover, .menu .ghost:focus-visible { color: var(--purple); }

.logo { position: fixed; z-index: 20; top: calc(8.7 * var(--u)); right: calc(16 * var(--u)); padding-right: env(safe-area-inset-right, 0px);
  font: 700 calc(48 * var(--u))/calc(43 * var(--u)) var(--brand); letter-spacing: calc(-2.5 * var(--u)); text-align: right; color: var(--ink); }
.logo span { display: block; padding-bottom: calc(1 * var(--u)); }   /* room for the "g" of gaube: nothing is cropped */
/* the name leads to the start page: purple on hover, except on the start page itself */
.logo { transition: color .15s ease; }
.site:not(.is-home) .logo:hover, .site:not(.is-home) .logo:focus-visible { color: var(--purple); }
.is-home .logo { pointer-events: none; }
.minibar { display: none; }

/* home: everything white over the photo */
.is-home .menu a, .is-home .menu span, .is-home .logo { color: #fff; }
.is-home .menu a:hover, .is-home .menu a:focus-visible { color: var(--purple); }

/* ---------- player (bottom left) and instagram (bottom right) ---------- */
.player { position: fixed; z-index: 30; left: calc(16 * var(--u)); bottom: calc(15 * var(--u)); display: flex; align-items: flex-end; gap: calc(2 * var(--u));
  margin-left: env(safe-area-inset-left, 0px); margin-bottom: env(safe-area-inset-bottom, 0px); color: var(--ink); font-family: var(--mono); }
.player .pl-text { position: relative; display: inline-flex; align-items: flex-end; font: 400 calc(17.5 * var(--u))/1 var(--mono); letter-spacing: calc(-2.2 * var(--u)); margin-right: calc(2 * var(--u)); transition: color .3s ease; white-space: nowrap; }
/* while a song plays, nothing moves: the title of the song above the bar and the pause sign say it
   (the dancing letters became an option in the preview) */
.pl-letters i { display: inline-block; font-style: normal; }
/* options (preview): three bars, or a line that runs with the song */
.pl-eq { display: none; gap: calc(1.6 * var(--u)); align-items: flex-end; height: calc(11 * var(--u)); margin-left: calc(6 * var(--u)); }
.pl-eq i { display: block; width: calc(2.4 * var(--u)); min-width: 2px; height: 30%; background: currentColor; }
.player.is-playing .pl-eq i { animation: cg-eq .9s ease-in-out infinite alternate; }
.player.is-playing .pl-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.player.is-playing .pl-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes cg-eq { from { height: 25%; } to { height: 100%; } }
.pl-prog { display: none; position: absolute; left: 0; bottom: calc(-5 * var(--u)); height: 1.5px; width: calc(var(--p, 0) * 100%); background: currentColor; }
.player > button { position: relative; z-index: 1; }
.player .pl-btn { width: calc(17 * var(--u)); height: calc(19.5 * var(--u)); display: flex; align-items: flex-end; justify-content: center; transition: transform .2s ease, color .3s ease; }
.player .pl-btn svg { width: calc(14.5 * var(--u)); height: calc(14.5 * var(--u)); fill: currentColor; }
.player .pl-btn:hover { transform: scale(1.1); }
.player:hover, .player.is-playing { color: var(--orange); }
.is-home .player:not(.is-playing):not(:hover) { color: #fff; }
.player .pl-title { position: absolute; left: 0; bottom: calc(100% + var(--plb, 5px)); font: 400 max(12px, calc(12.5 * var(--u)))/1.35 var(--mono); letter-spacing: -0.03em; color: var(--orange); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* the song playing is marked by a small orange dot, closed or in the open list (same place, same size) */
.player .pl-title::before, .pl-queue .is-now button::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: var(--orange); vertical-align: .05em; }
/* a long title scrolls slowly in the reading direction while the song plays, like on a music player, and comes round
   again (a copy follows after a gap), resting at the start each time; short titles never move. At rest the start of the
   title is fully visible: the soft left edge is the empty space between the dot and the title */
.player .pl-title { display: flex; align-items: baseline; }
.player .pl-title::before { flex: none; margin-bottom: .05em; }
.player .pl-title .plt-clip { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-left: -.5em; padding-left: .5em; }
.player .pl-title .plt-gap, .player .pl-title .plt-b { display: none; }
.player.is-playing .pl-title.is-long .plt-gap, .player.is-playing .pl-title.is-long .plt-b { display: inline; }
.player.is-playing .pl-title.is-long .plt-clip { text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, transparent 3px, #000 .5em, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, transparent 3px, #000 .5em, #000 calc(100% - 18px), transparent); }
.player.is-playing .pl-title.is-long .plt-in { display: inline-block; animation: plt-loop var(--plt-dur, 10s) linear infinite; }
@keyframes plt-loop { 0%, 25% { transform: translateX(0); animation-timing-function: ease-in-out; } 100% { transform: translateX(var(--plt-shift, 0)); } }
@media (prefers-reduced-motion: reduce) {
  .player.is-playing .pl-title.is-long .plt-in { animation: none; display: inline; }
  .player.is-playing .pl-title.is-long .plt-gap, .player.is-playing .pl-title.is-long .plt-b { display: none; }
  .player.is-playing .pl-title.is-long .plt-clip { text-overflow: ellipsis; -webkit-mask-image: none; mask-image: none; }
}
.player .pl-title:empty { display: none; }
.player .pl-note { position: absolute; left: 0; bottom: calc(100% + 22px); font: 400 11px/1.3 var(--mono); color: var(--grey); white-space: nowrap; }
/* computers: the song title stays in the left margin (it wraps instead of running over the page) */
@media (min-width: 900px) {
  .player { --plb: calc(8 * var(--u)); }
  .player .pl-title { max-width: calc(180 * var(--u)); }   /* stays in the left margin, clear of the page text (long titles end in …; the open list shows them whole) */
  .player .pl-note { max-width: calc(184 * var(--u)); white-space: normal; text-overflow: clip; bottom: calc(100% + 44 * var(--u)); }
}
/* the list of songs (point at the list sign): above "songs i love", it grows upward from the song playing,
   which stays exactly where its title was; the songs that come after it unfold above it, one after the other
   (and around again to the first ones). All the same size. (Option in the preview: to the right of the sign.) */
.pl-side { position: static; align-self: flex-end; width: 0; height: calc(17.5 * var(--u)); }
.pl-now { display: none; position: absolute; left: calc(10 * var(--u)); bottom: 0; cursor: pointer; font: 400 calc(17.5 * var(--u))/1 var(--mono); letter-spacing: calc(-1.6 * var(--u)); color: var(--orange);
  white-space: nowrap; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; text-align: left;
  opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s, color .15s ease; }
.pl-queue { position: absolute; z-index: 0; left: 0; bottom: calc(100% + var(--plb, 5px)); margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: calc(2 * var(--u)); visibility: hidden;
  --qclose: calc((var(--qn, 10) - 1) * 22ms + .22s);   /* how long the songs take to fall back */
  transition: visibility 0s linear calc(var(--qclose) + .08s); }
/* closing: the songs fall back down one after the other, the top one first (opening: they unfold from the bottom up) */
.pl-queue li { opacity: 0; transform: translateY(7px); transition: opacity .2s ease, transform .3s cubic-bezier(.4, 0, 1, 1); transition-delay: calc((var(--qn, 10) - 1 - var(--j, 0)) * 22ms); }
/* the song playing stays until the others have gone, then hands over to its title at the very same place */
.pl-queue .is-now { transition: opacity 0s linear var(--qclose), transform 0s linear var(--qclose); }
.pl-queue button { font: 400 max(12px, calc(12.5 * var(--u)))/1.35 var(--mono); letter-spacing: -0.03em; color: var(--orange); white-space: nowrap; text-align: left; transition: color .15s ease; }
.pl-queue .s { opacity: .6; }
.pl-queue .soon button { opacity: .55; cursor: default; }
.pl-queue button:focus-visible, .pl-now:focus-visible { color: var(--purple); }
@media (hover: hover) and (pointer: fine) { .pl-queue button:hover:not(:disabled), .pl-now:hover { color: var(--purple); } }
/* a soft white mist behind the list, so it reads over the page (no box) */
.pl-queue::before { content: ""; position: absolute; z-index: -1; inset: -44px -120px -28px -60px; background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent); mask-image: radial-gradient(closest-side, #000 75%, transparent);
  opacity: 0; pointer-events: none;
  /* it rises from the bottom edge of the screen, at the pace of the songs unfolding (and sinks back when the list closes) */
  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); }
.is-home .pl-queue::before { background: rgba(250, 247, 255, .62); }
/* computers: no oval mist any more — a soft band rises from the bottom of the screen behind the list, like on phones:
   white on the white pages, the photo's own deep purple (blurred) on the start page, with the titles in white */
@media (min-width: 900px) {
  .pl-queue::before { position: fixed; inset: auto 0 0 0; height: calc(var(--qh, 240px) + 190px); background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 120px), transparent); }
  .is-home .pl-queue::before { display: none; }
}
.player.q-open .pl-now { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), color .15s ease; }
.player.q-open .pl-queue { visibility: visible; transition: none; }
.player.q-open .pl-queue::before { opacity: 1; transform: none; transition: opacity .15s ease, transform calc(.25s + var(--qn, 10) * 45ms) cubic-bezier(.25, .6, .3, 1); }
.player.q-open .pl-queue li { opacity: 1; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--j) * 42ms); }
.player.q-open .pl-title { opacity: 0; transition: none; }
.player.q-open .pl-queue .is-now { transform: none; transition: none; }
.player .pl-title { transition: opacity 0s linear calc((var(--qn, 10) - 1) * 22ms + .22s); }
/* a little dot that hops from letter to letter (an option) */
.pl-ball { display: none; position: absolute; left: 0; top: calc(-6 * var(--u)); width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); min-width: 3px; min-height: 3px; border-radius: 50%; background: currentColor; }
.player .pl-list svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* bottom right: envelope (newsletter) + Instagram. Instagram stays the one in orange; the envelope is black like "songs i love" */
.corner { position: fixed; z-index: 30; right: calc(16 * var(--u)); bottom: calc(14 * var(--u)); margin-right: env(safe-area-inset-right, 0px); margin-bottom: env(safe-area-inset-bottom, 0px);
  display: flex; align-items: center; gap: calc(13 * var(--u)); }
.ig { position: relative; display: flex; align-items: center; color: var(--orange); font: 400 calc(14 * var(--u))/1 var(--mono); letter-spacing: calc(-1 * var(--u)); }
.ig svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); display: block; transition: transform .2s ease; }
.ig:hover svg { transform: scale(1.06); }
.ig .ig-handle { position: absolute; right: calc(100% + 7 * var(--u)); top: 50%; white-space: nowrap; opacity: 0; transform: translate(4px, -50%); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.ig:hover .ig-handle, .ig:focus-visible .ig-handle { opacity: 1; transform: translate(0, -50%); }
/* while the handle shows, the envelope steps aside */
.nl-btn { display: flex; color: var(--ink); transition: color .2s ease, opacity .2s ease; }
.nl-btn svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }
.nl-btn:hover, .nl-btn:focus-visible, .nl-btn[aria-expanded="true"] { color: var(--orange); }
.corner:has(.ig:hover) .nl-btn, .corner:has(.ig:focus-visible) .nl-btn { opacity: 0; }
.is-home .nl-btn:not(:hover):not([aria-expanded="true"]) { color: #fff; }
/* the small sign-up that opens above the corner */
.nl-pop { position: absolute; right: 0; bottom: calc(100% + 14 * var(--u)); width: calc(330 * var(--u)); min-width: 290px; padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  background: #fff; border: 1px solid var(--line); border-radius: calc(16 * var(--u)); box-shadow: 0 8px 28px rgba(40, 20, 80, .08);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.nl-pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.nl-pop .nl { width: 100%; min-width: 0; }
.nl p { text-wrap: pretty; }   /* no word alone on the last line ("…quelques fois par / an.") */

/* page content fades in on load and on each page change */
@keyframes cg-fade { from { opacity: 0; } to { opacity: 1; } }
main > * { animation: cg-fade .8s ease both; }

/* ---------- home ---------- */
/* the next dates, under the menu: date and work, the city below; the next one with the orange dot */
.home-next { position: fixed; z-index: 21; left: calc(20 * var(--u)); top: calc(184 * var(--u)); margin-left: env(safe-area-inset-left, 0px); }
.home-next ul { list-style: none; margin: 0; padding: 0; }
/* when the list of songs opens and would run into them, the dates fold up out of the way, the bottom one first,
   in the rhythm of the songs rising; when the list closes, they fold back down, the top one first, as the songs fall
   (the menu, on a very short screen, simply fades) */
.home-next li { transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.home-next li:nth-child(1) { transition-delay: .24s; }
.home-next li:nth-child(2) { transition-delay: .29s; }
.home-next li:nth-child(3) { transition-delay: .34s; }
.home-next li:nth-child(4) { transition-delay: .39s; }
.home-next li:nth-child(n+5) { transition-delay: .44s; }
.home-next.q-away li { opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.home-next.q-away li:nth-last-child(1) { transition-delay: .09s; }
.home-next.q-away li:nth-last-child(2) { transition-delay: .14s; }
.home-next.q-away li:nth-last-child(3) { transition-delay: .19s; }
.home-next.q-away li:nth-last-child(4) { transition-delay: .24s; }
.home-next.q-away li:nth-last-child(n+5) { transition-delay: .29s; }
.is-home .menu ul { transition: opacity .3s ease; }
.is-home .menu.q-away ul { opacity: 0; pointer-events: none; }
.home-next li { position: relative; padding-left: 1.15em; font: 400 max(11.5px, calc(11.5 * var(--u)))/1.42 var(--mono); letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 14px rgba(40, 20, 80, .28); }
.home-next li + li { margin-top: calc(9 * var(--u)); }
.home-next li:first-child::before { content: ""; position: absolute; left: 0; top: .42em; width: .62em; height: .62em; border-radius: 50%; background: var(--orange); }
html:not(.v-dot-still) .home-next li:first-child::before, html:not(.v-dot-still) .dates tr.first-up .d::before, html:not(.v-dot-still) .wnx::before { transform: scale(calc(1 + var(--beat, 0) * .42)); }
@media (prefers-reduced-motion: reduce) { html .home-next li:first-child::before, html .dates tr.first-up .d::before, html .wnx::before { transform: none !important; } }
.home-next a { display: block; transition: color .15s ease; }
.home-next a:hover, .home-next a:focus-visible { color: var(--purple); }
.home-next .hn-w { margin-left: .45em; }
.home-next .hn-c { display: block; }
.home-next .hn-d { font-variant-numeric: tabular-nums; }
.home-photo { position: fixed; inset: 0; z-index: 0; margin: 0; }
.home-photo img, .home-photo picture { width: 100%; height: 100%; }
.home-photo img { object-fit: cover; object-position: 50% 50%; }
.is-home main { min-height: 100vh; }

/* ---------- content column (inner pages) ---------- */
main { display: block; }
main:focus { outline: none; }
.col { margin-left: calc(208 * var(--u)); width: calc(560 * var(--u)); padding-top: calc(16 * var(--u)); padding-bottom: calc(140 * var(--u)); }
.col > * + * { margin-top: calc(32 * var(--u)); }
.col > .sr + * { margin-top: 0; }   /* the hidden page title takes no room */
.page-title { margin: 0; font: 400 calc(23 * var(--u))/calc(27 * var(--u)) var(--mono); letter-spacing: calc(-2.5 * var(--u)); }
/* small line after a title: the year (grey), then "with …" / "for …" */
.page-title small, .works-list small { font-size: calc(9.5 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); margin-left: calc(7 * var(--u)); vertical-align: calc(2 * var(--u)); }
.page-title .wy, .works-list .wy { color: var(--grey); }
.page-title .wy + .ws, .works-list .wy + .ws { margin-left: calc(7 * var(--u)); }
.page-title + figure { margin-top: calc(28 * var(--u)); }

figure { margin: 0; }
.text p, .press blockquote p, .about-col .text p, .credits dd { text-wrap: pretty; }
figure picture, figure img { width: 100%; }
figcaption { margin-top: calc(7 * var(--u)); font: 400 max(9.5px, calc(8.5 * var(--u)))/1.3 var(--mono); letter-spacing: -0.02em; color: var(--grey); text-align: right; }
figcaption .cr { white-space: nowrap; }
figcaption .cr::before { content: ' · '; }

/* a series of photos with one caption (Musée de l'Orangerie): first alone, then pairs of the same height */
.series-row { display: flex; gap: calc(12 * var(--u)); }
.series-row + .series-row { margin-top: calc(12 * var(--u)); }
.series .si { display: block; flex: var(--r) 1 0; min-width: 0; }
.series .si img, .series .si picture { width: 100%; height: auto; display: block; }

/* a film elsewhere (the interview on YouTube): small card under the trailer */
.col > * + .watch { margin-top: calc(14 * var(--u)); }
.watch.watch-side, .watch.watch-end { display: none; }   /* copies of the video card for other places (options) */
.watch { display: flex; align-items: center; gap: calc(16 * var(--u)); width: fit-content; max-width: 100%; }
.watch-img { position: relative; flex: none; width: calc(150 * var(--u)); aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.watch-img img, .watch-img picture { width: 100%; height: 100%; display: block; }
.watch-img img { object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
/* the small video cards: the same "● play" as the trailers, in the bottom-left corner (French "lire") */
.watch-play { position: absolute; inset: 0; display: grid; place-items: end start; padding: max(7px, calc(9 * var(--u))) max(8px, calc(11 * var(--u))); background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) max(80px, calc(100 * var(--u)))); }
.watch-play svg { display: none; }
.watch-play .wp-l { display: inline-flex; align-items: center; gap: .5em; font: 400 max(11px, calc(11.5 * var(--u)))/1 var(--mono); letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.watch-play .wp-l::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(0, 0, 0, .25); transition: transform .25s ease; }
.watch-play .wp-l::after { content: "play"; }
.watch-play:lang(fr) .wp-l::after { content: "lire"; }
.watch-txt { display: grid; gap: calc(3 * var(--u)); font: 400 max(11px, calc(10.5 * var(--u)))/1.35 var(--mono); letter-spacing: -0.03em; color: var(--grey); }
.watch-t { font-size: max(14px, calc(15 * var(--u))); letter-spacing: calc(-1.1 * var(--u)); color: var(--ink); transition: color .15s ease; }
.watch-s { transition: color .15s ease; }
.watch:hover .watch-t, .watch:hover .watch-s, .watch:focus-visible .watch-t { color: var(--purple); }
.watch:hover .watch-img img { transform: scale(1.04); }
.watch:hover .watch-play .wp-l::before, .watch:focus-visible .watch-play .wp-l::before { transform: scale(1.4); }

/* end of a work page: on to the next work */
.col > .next-work { margin-top: calc(72 * var(--u)); }
.next-work { margin: 0; font: 400 calc(23 * var(--u))/calc(27 * var(--u)) var(--mono); letter-spacing: calc(-2.5 * var(--u)); }
.next-work small { display: block; margin-bottom: calc(5 * var(--u)); font-size: calc(9.5 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); line-height: 1; color: var(--grey); }
.next-work a { display: inline-block; transition: color .15s ease; }
.next-work a:hover, .next-work a:focus-visible { color: var(--purple); }
.next-work a:hover small { color: inherit; }
.next-work .arr { display: inline-block; transition: transform .2s ease; }
.next-work a:hover .arr { transform: translateX(4px); }

.text p { margin: 0; font: 400 max(13px, calc(12 * var(--u)))/1.5 var(--sans); }
.text p + p { margin-top: 1.5em; }
.text .lead { color: var(--purple); font-weight: 500; }
.text .lead + p:not(.lead) { margin-top: 1.5em; }
.text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.text a:hover { color: var(--purple); }

.credits { margin: 0; font: 400 max(12px, calc(11 * var(--u)))/1.62 var(--sans); }
.col > * + .credits, .col > * + .dates, .sub > * + .credits { margin-top: calc(32 * var(--u)); }
.col > * + .links { margin-top: calc(14 * var(--u)); }   /* the link belongs to the video above it */
.credits div { margin: 0; }
/* work pages: the end of the page in this order: next dates, press (and the Orangerie photos), credits, next work.
   Next dates and credits live in one <aside> (a side column on computers, see below); here it melts into the column. */
.work { display: flex; flex-direction: column; }
.work > .work-side, .work-side > .side-in { display: contents; }
.work .blk-dates { order: 1; margin-top: calc(32 * var(--u)); }
.work > .press, .work > .series { order: 2; }
.work .blk-credits { order: 3; margin-top: calc(48 * var(--u)); }   /* the credits close the page, after the press */
.work > .next-work { order: 4; }
.credits dt { display: inline; font-weight: 700; }
.credits dt::after { content: ': '; }
html[lang="fr"] .credits dt::after { content: "\00a0: "; }
.credits dd { display: inline; margin: 0; }

.links { list-style: none; margin: 0; padding: 0; font: 400 max(12px, calc(11 * var(--u)))/1.6 var(--sans); }
.links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.links a:hover { color: var(--purple); }
.links a::after { content: '\00a0↗'; text-decoration: none; display: inline-block; }

/* video: the photo first. On the real site the trailer starts by itself once it is on screen, without sound and in
   a loop, like on the old site (site.js); Vimeo's own buttons give the sound. When it can't start by itself, the photo
   stays with "● play" in the bottom-left corner (French "lire"): a click plays it with sound. */
.video { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.video img, .video picture { width: 100%; height: 100%; }
.video img { object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play { position: absolute; inset: 0; display: grid; place-items: end start; padding: calc(16 * var(--u)) calc(18 * var(--u)); color: #fff; background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) max(120px, calc(150 * var(--u)))); transition: opacity .4s ease; }
.video .play span { display: inline-flex; align-items: center; gap: .55em; font: 400 max(12px, calc(14 * var(--u)))/1 var(--mono); letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, .5); }
.video .play span::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(0, 0, 0, .25); transition: transform .25s ease; }
.video .play span::after { content: "play"; }
.video .play:lang(fr) span::after { content: "lire"; }
.video .play svg { display: none; }
.video .play:hover span::before, .video .play:focus-visible span::before { transform: scale(1.4); }
/* while the trailer tries to start by itself: the photo alone (the sign comes back if it doesn't start) */
.video.is-trying .play, .video.is-auto .play { opacity: 0; }
.video iframe.vm-auto { opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.video.is-auto iframe.vm-auto { opacity: 1; pointer-events: auto; }

/* a chapter inside a work page (the Musée de l'Orangerie on Soirée d'études) */
.col > .sub { margin-top: calc(56 * var(--u)); }
.sub { padding-top: calc(28 * var(--u)); border-top: 1px solid var(--line); }
.sub > * + * { margin-top: calc(24 * var(--u)); }
.sub > h2 + * { margin-top: calc(18 * var(--u)); }
.sub h2 { margin: 0; font: 400 calc(23 * var(--u))/calc(27 * var(--u)) var(--mono); letter-spacing: calc(-2.5 * var(--u)); }
.sub h2 small { font-size: calc(9.5 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); margin-left: calc(7 * var(--u)); vertical-align: calc(2 * var(--u)); color: var(--grey); }

/* section titles inside a page (next dates, press) */
.section-title { margin: 0 0 calc(14 * var(--u)); font: 400 calc(23 * var(--u))/1 var(--mono); letter-spacing: calc(-2.5 * var(--u)); }

/* press quotes */
.press { padding-top: calc(16 * var(--u)); }
.press blockquote { margin: 0; }
.press blockquote + blockquote { margin-top: calc(28 * var(--u)); }
.press blockquote p { margin: 0; font: 400 max(14px, calc(14.5 * var(--u)))/1.42 var(--sans); text-indent: -0.42em; }
.press blockquote .lead-in { text-indent: 0; margin-bottom: calc(10 * var(--u)); }
.press .stars { color: var(--orange); letter-spacing: 0.08em; text-indent: 0; display: inline-block; margin-right: .25em; }
.press footer { margin-top: calc(8 * var(--u)); font: 400 max(9.5px, calc(8.5 * var(--u)))/1.4 var(--mono); letter-spacing: -0.02em; color: var(--grey); }
.press footer a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: rgba(119, 113, 127, .45); }
.press footer a:hover { color: var(--purple); text-decoration-color: currentColor; }

/* ---------- works list ---------- */
.works-list { list-style: none; margin: 0; padding: calc(27 * var(--u)) 0 0; }
.works-list li { font: 400 calc(23 * var(--u))/calc(35 * var(--u)) var(--mono); letter-spacing: calc(-2.5 * var(--u)); }
.works-list a { transition: color .15s ease; }
.works-list a:hover, .works-list a:focus-visible { color: var(--purple); }
/* a work on tour: its next date, with the orange dot ("now", as on the start page) */
.wnx { color: var(--grey); white-space: nowrap; }
small > * + .wnx { margin-left: calc(7 * var(--u)); }
.wnx::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .4em; border-radius: 50%; background: var(--orange); vertical-align: -.02em; }
/* computer: the photo of the work appears bottom right while you point at its title */
.works-list .peek, .next-work .peek { position: fixed; z-index: 5; right: calc(16 * var(--u)); bottom: calc(64 * var(--u)); width: calc(300 * var(--u)); margin: 0; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.works-list .peek img, .works-list picture.peek img, .next-work .peek img, .next-work picture.peek img { width: 100%; height: auto; }
@media (hover: hover) {
  .works-list a:hover + .peek, .next-work a:hover + .peek { opacity: 1; transform: none; }
}
.works-list a:focus-visible + .peek, .next-work a:focus-visible + .peek { opacity: 1; transform: none; }
/* computers: the next dates in a quiet column on the right, under the name, like the margin of a programme;
   they stay in view while you scroll through the photos and the text (credits stay at the end of the page) */
@media (min-width: 1100px) {
  .work { position: relative; }
  .work > .work-side { display: block; position: absolute; top: 0; bottom: 0; left: calc(100% + 34 * var(--u)); width: calc(196 * var(--u)); padding-top: calc(176 * var(--u)); }
  .work-side > .side-in { display: block; position: sticky; top: calc(208 * var(--u)); }   /* = where it starts, so it never moves when you scroll */
  .work-side .blk-dates { margin-top: 0; }
  .work-side .section-title { font-size: calc(17.5 * var(--u)); letter-spacing: calc(-1.6 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .work-side .dates.next tr:not(.yr) { grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr); grid-template-areas: "d c" "d v"; padding: calc(4 * var(--u)) 0 calc(5 * var(--u)); }
  .work-side .dates.next .v::before { content: none; }
  .work-side .dates { font-size: max(11px, calc(10 * var(--u))); }
  .work-side .dates-note { margin-top: calc(6 * var(--u)); }
}
/* the two languages under the name, "en fr": the one you are reading in black, the other one grey (a link),
   like the menu shows the current page */
.langs { position: fixed; z-index: 20; top: calc(108 * var(--u)); right: calc(16 * var(--u)); font: 400 max(11px, calc(11.5 * var(--u)))/1 var(--mono); letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
.langs .lang { color: var(--ghost-desk); transition: color .15s ease; }
.langs .lang:hover, .langs .lang:focus-visible { color: var(--purple); }
.is-home .langs { color: #fff; }
.is-home .langs .lang { color: rgba(255, 255, 255, .62); }
.is-home .langs .lang:hover, .is-home .langs .lang:focus-visible { color: var(--purple); }
@media (max-width: 899px) {
  .langs { position: absolute; z-index: 17; top: calc(84px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); font-size: 13px; opacity: calc(1 - var(--hp, 0) * 2.5); }
  .langs .lang { display: inline-block; padding: 6px 4px; margin: -6px -4px; color: var(--ghost); }   /* a bigger place to tap */
  .is-home .langs { position: fixed; }
  .is-home .langs .lang { color: rgba(255, 255, 255, .62); }
}
.v-lang-one .lang-now { display: none; }   /* as before (an option): only the other language */
/* going from page to page: the pages melt into each other; from the works list, the small photo flies into its place
   (browsers that can't do this just change the page) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(work-photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); z-index: 50; }
::view-transition-group(work-title) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); z-index: 51; }
::view-transition-old(work-title), ::view-transition-new(work-title) { height: 100%; width: auto; }
/* the photo viewer: a photo of a work opens big, on the page's colour; the caption under it, mono, small */
article.work figure img, .about-col .about-portrait img { cursor: zoom-in; }
.video img, .watch img { cursor: pointer; }
.lb { position: fixed; inset: 0; z-index: 300; display: none; background: var(--bg); }
.lb.open { display: block; animation: lb-in .22s ease both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb figure { position: absolute; inset: calc(40 * var(--u)) calc(70 * var(--u)) calc(30 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; pointer-events: none; }
.lb img { max-width: 100%; max-height: calc(100% - 28px); width: auto; height: auto; object-fit: contain; pointer-events: auto; cursor: e-resize; }
.lb.to-l img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M25 18H11m6-6-6 6 6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 18 18, w-resize; }
.lb.to-r img { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='15' fill='%23fff' fill-opacity='.92'/%3E%3Cpath d='M11 18h14m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 18 18, e-resize; }
.lb.one img { cursor: zoom-out; }
.lb figcaption { align-self: stretch; text-align: center; margin-top: 10px; }
.lb-n { position: absolute; left: calc(16 * var(--u)); top: calc(14 * var(--u)); font: 400 max(11px, calc(11 * var(--u)))/1 var(--mono); color: var(--grey); letter-spacing: -0.02em; }
.lb.one .lb-n, .lb.one .lb-prev, .lb.one .lb-next { display: none; }
.lb button { position: absolute; z-index: 2; color: var(--ink); font: 400 calc(26 * var(--u))/1 var(--mono); padding: calc(10 * var(--u)); transition: color .15s ease; }
.lb button:hover, .lb button:focus-visible { color: var(--purple); }
.lb-x { right: calc(10 * var(--u)); top: calc(4 * var(--u)); font-size: calc(34 * var(--u)) !important; }
.lb-prev { left: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); }
.lb-next { right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); }
html.lb-on, html.lb-on body { overflow: hidden; }
/* "all": every photo of the page, small, on one screen (a contact sheet) */
.lb .lb-all { left: calc(16 * var(--u) + 5.4em); top: calc(14 * var(--u) - 6px); padding: 6px 8px; font-size: max(11px, calc(11 * var(--u))); color: var(--grey); letter-spacing: -0.02em; }
.lb .lb-all[aria-pressed="true"] { color: var(--ink); }
.lb.one .lb-all { display: none; }
.lb.grid figure, .lb.grid .lb-prev, .lb.grid .lb-next { display: none; }
.lb-grid { position: absolute; inset: calc(46 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr)); gap: calc(14 * var(--u)); align-content: start; }
.lb-grid[hidden] { display: none; }
.lb .lb-th { position: static; padding: 0; font-size: inherit; cursor: zoom-in; }
.lb-th img { display: block; width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; cursor: zoom-in; transition: opacity .15s ease; }
.lb-th:hover img, .lb-th:focus-visible img { opacity: .82; }
.lb-th.now img { outline: 2px solid var(--purple); outline-offset: 3px; }
@media (max-width: 899px) {
  .lb figure { inset: 56px 8px 48px; }
  .lb button { font-size: 24px; padding: 12px; }
  .lb-x { font-size: 32px !important; }
  .lb-prev, .lb-next { top: auto; bottom: 4px; transform: none; }
  .lb-n { left: 16px; top: 22px; font-size: 12px; }
  .lb .lb-all { left: calc(16px + 5em); top: 12px; font-size: 13px; padding: 10px; }
  .lb-grid { inset: 60px 12px 24px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .lb.open { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pl-queue::before, .qveil, .home-next li { transform: none !important; } }   /* the veil behind the list just fades */
@media print { .lb { display: none !important; } }
/* works list (computer): the path from title to title (site.js draws it, then it fades) */
.walk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.walk path { fill: none; stroke: var(--purple); stroke-width: 1.3; stroke-linecap: round; opacity: .9; }
.walk path.go { transition: stroke-dashoffset .75s cubic-bezier(.3, .7, .2, 1), opacity 1.9s ease; }
.walk circle { fill: var(--purple); opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease .6s, transform .4s ease .6s; }
.walk circle.go { opacity: .95; transform: none; }
.walk .out { opacity: 0 !important; transition: opacity 1.9s ease !important; }
/* MOTEUR: a short silent film laid over the photo; it starts on the photo itself, so the photo just comes alive */
@media (min-width: 900px) { .works-list .peek.has-film { display: block; } }
.fig-media { position: relative; }
.peek-film, .hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.peek.has-film.is-playing .peek-film, .has-film.is-playing .hero-film { opacity: 1; }
.hero-film { display: none; } /* the moving first photo on the work page is an option */
@media (prefers-reduced-motion: reduce) { .peek-film, .hero-film { display: none; } }
/* the last line: three little dots (new things on the way) that move when you point at them */
.x-dots { display: inline-flex; align-items: flex-end; gap: .2em; height: .7em; margin: 0; vertical-align: baseline; }
.x-dots i { display: block; width: .16em; height: .16em; border-radius: 50%; background: currentColor; }
.works-list .li-x a:hover .x-dots i, .works-list .li-x a:focus-visible .x-dots i, .x-dots.big i { animation: cg-dots 1.15s ease-in-out infinite; }
.x-dots i:nth-child(2) { animation-delay: .16s !important; }
.x-dots i:nth-child(3) { animation-delay: .32s !important; }
@keyframes cg-dots { 0%, 55%, 100% { transform: translateY(0); opacity: .5; } 25% { transform: translateY(-.28em); opacity: 1; } }
.works-list .li-x a { display: inline-block; min-width: 1.4em; }   /* the dots are not text: give the link a full box to point at */
.xl .x-x, .xl .x-cur { display: none; }
.x-cur { width: .5em; height: .9em; background: currentColor; vertical-align: -.12em; animation: cg-blink 1.05s steps(1) infinite; }
@keyframes cg-blink { 50% { opacity: .12; } }
.x-line .xl { margin-right: .5em; }
.x-line .x-dots i { animation: cg-dots 1.15s ease-in-out infinite; }
.x-line .x-dots { height: .62em; }

/* ---------- dates ---------- */
.dates-col { width: calc(640 * var(--u)); }  /* stops before the name (top right) */
.filters { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(16 * var(--u)); margin: 0; padding: 0; list-style: none; font: 400 max(11px, calc(11 * var(--u)))/1.4 var(--mono); letter-spacing: -0.03em; }
.filters button { color: var(--grey); transition: color .15s ease; padding: 2px 0; }
.filters button:hover { color: var(--purple); }
.filters button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* each date on two lines, always the same height (his note: rows of different heights look like gaps):
   line 1 date + work (+ tag), line 2 city · venue. Upcoming dates in bold, past ones with a grey second line. */
.dates { display: block; width: 100%; margin: 0; font: 400 max(12px, calc(11.5 * var(--u)))/1.4 var(--sans); }
.dates tbody { display: block; }
.dates tr:not(.yr) { display: grid; grid-template-columns: calc(88 * var(--u)) auto minmax(0, 1fr); grid-template-areas: "d w w" ". c v"; padding: calc(6 * var(--u)) 0 calc(7 * var(--u)); }
.dates td { display: block; padding: 0; }
.dates .d { grid-area: d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dates .w { grid-area: w; }
.dates .c { grid-area: c; white-space: nowrap; }
.dates .v { grid-area: v; }
.dates .v::before { content: "·"; content: "·" / ""; margin: 0 .5em; }
.dates tr:not(.up) .c, .dates tr:not(.up) .v { color: var(--grey); }
.dates tr.up .d, .dates tr.up .w { font-weight: 700; }
.dates tbody.upcoming tr.last-up { padding-bottom: calc(30 * var(--u)); }
/* next dates on a work page: no work name, so one line */
.dates.next .w { display: none; }
.dates.next tr:not(.yr) { grid-template-areas: "d c v"; }
.dates .tag { font: 500 max(8px, calc(7.5 * var(--u)))/1 var(--sans); text-transform: uppercase; letter-spacing: 0.04em; margin-left: calc(1 * var(--u)); color: var(--grey); white-space: nowrap; vertical-align: calc(1 * var(--u)); }
.dates .tag.cancelled { color: var(--grey); }
/* the next date: the orange dot ("now", as on the start page); on a show day: "tonight" */
.dates tr.first-up .d::before { content: ""; display: inline-block; width: .55em; height: .55em; margin: 0 .45em 0 -1em; border-radius: 50%; background: var(--orange); vertical-align: .05em; }
.dates .tag.tonight { color: var(--orange); }
.home-next li.is-tonight .hn-d { font-weight: 700; }
.dates .tag.tonight { margin-left: .2em; }
.dates tr.is-cancelled td { color: var(--grey); }
/* the work name leads to the work's page; an upcoming venue with a page (to book) has a small arrow */
.dates a { transition: color .15s ease; }
.dates a.wn:hover, .dates a.wn:focus-visible, .dates .v a:hover, .dates .v a:focus-visible { color: var(--purple); }
.dates .ext { display: inline-block; margin-left: .3em; font-weight: 400; transition: transform .2s ease; }
.dates .v a:hover .ext { transform: translate(2px, -2px); }
/* on load each date fades in, one line after the other, top to bottom (site.js adds .unroll) */
.dates.unroll tr:not(.in) { opacity: 0; }
.dates.unroll tr.in { animation: cg-line .9s ease both; animation-delay: calc(var(--k, 0) * 75ms); }
@keyframes cg-line { from { opacity: 0; } to { opacity: 1; } }
/* the line of the portfolio (an option in the preview) */
.totals { display: none; margin: 0; font: 400 max(10.5px, calc(10.5 * var(--u)))/1.4 var(--mono); letter-spacing: -0.02em; color: var(--grey); }
.dates-col > .totals + .filters { margin-top: 0; }
.dates tr[hidden] { display: none !important; }
.dates tr.yr, .dates tr.yr th { display: block; }
.dates tr.yr th { text-align: left; padding: calc(24 * var(--u)) 0 calc(6 * var(--u)); font: 400 max(14px, calc(17.5 * var(--u)))/1 var(--mono); letter-spacing: calc(-1.6 * var(--u)); }
.dates tbody.upcoming + tbody.past tr.yr th { padding-top: 0; }
.dates-note.all { margin-top: 10px; }
/* photos fade in softly from the white page as they arrive (site.js); "as before" is an option */
.fade-img { transition: opacity .7s cubic-bezier(.25, .6, .3, 1); }
.fade-img.wait { opacity: 0; }
.v-fade-off .fade-img { transition: none; }
.v-fade-off .fade-img.wait { opacity: 1; }
.em-at::after { content: "@"; }
/* the day of the week before the coming dates (an option) */
.wd { display: none; }
.v-wday .dates tr.up .wd, .v-wday .home-next .wd { display: inline; font-weight: 400; color: var(--grey); }
.v-wday .is-home .home-next .wd { color: inherit; opacity: .75; }
@media (min-width: 900px) { .v-wday .dates-col .dates tr:not(.yr) { grid-template-columns: calc(122 * var(--u)) auto minmax(0, 1fr); } }
@media (max-width: 899px) { .v-wday .dates tr.up .wd { display: block; } }
.v-wday .work-side .dates tr.up .wd { display: block; }
/* end of long pages: back to the top, "↑ top" (French "↑ début") */
.to-top { margin: calc(56 * var(--u)) 0 0; text-align: right; font: 400 max(11px, calc(11 * var(--u)))/1 var(--mono); letter-spacing: -0.02em; }
.to-top a { color: var(--grey); transition: color .15s ease; }
.to-top a:hover, .to-top a:focus-visible { color: var(--purple); }
.work > .to-top { order: 5; }
.v-top-off .to-top { display: none; }
.v-top-arrow .to-top .tt-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the arrow alone (the word stays for screen readers) */   /* the @ of the email address (not written in the page) */
.cities-sec { display: none; }
.cities { margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); font: 400 max(14px, calc(15 * var(--u)))/1.5 var(--sans); }
.cities > span:not(.sr) { white-space: nowrap; }
.cities .ct0 { color: var(--purple); } .cities .ct1 { color: var(--orange); }
.dates-note { font: 400 max(10px, calc(9.5 * var(--u)))/1.5 var(--mono); color: var(--grey); letter-spacing: -0.02em; margin: 0; }

/* ---------- about ---------- */
.about-col { width: calc(496 * var(--u)); }
.about-portrait { width: calc(368 * var(--u)); }
.about-col .about-portrait + .text { margin-top: calc(40 * var(--u)); }
.about-col .text p { line-height: 1.58; }

/* ---------- reach out / x : centred ---------- */
.center { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(120 * var(--u)) calc(20 * var(--u)); }
.center-inner { display: grid; justify-items: center; gap: calc(22 * var(--u)); text-align: center; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: calc(48 * var(--u)); min-height: 42px; padding: 0 calc(26 * var(--u)); border-radius: 80px; background: var(--orange); color: #fff;
  font: 500 max(15px, calc(18 * var(--u)))/1 var(--sans); white-space: nowrap; transition: background-color .2s ease, transform .2s ease; }
.pill:hover, .pill:focus-visible { background: var(--purple); }
.mail { margin: 0; font: 400 max(12px, calc(12 * var(--u)))/1.4 var(--mono); letter-spacing: -0.03em; color: var(--grey); user-select: all; }
.mail .ig-text { user-select: auto; color: var(--orange); }
.mail { position: relative; }
.mail .copy { font: inherit; letter-spacing: inherit; color: inherit; cursor: copy; user-select: all; transition: color .15s ease; }
.mail .copy:hover, .mail .copy:focus-visible { color: var(--purple); }
.mail .copied { position: absolute; left: 100%; top: 0; margin-left: .9em; white-space: nowrap; color: var(--purple); user-select: none; }
.mail .ig-text:hover { color: var(--purple); }
.center-inner .mail + .mail { margin-top: calc(-14 * var(--u)); }
.x-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(14 * var(--u)); font: 400 max(15px, calc(18 * var(--u)))/1.3 var(--sans); }

/* ---------- newsletter sign-up ---------- */
.nl { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(8 * var(--u)); width: min(100%, calc(360 * var(--u))); min-width: min(100%, 300px); text-align: left; }
.nl-title { margin: 0; font: 400 calc(23 * var(--u))/1 var(--mono); letter-spacing: calc(-2.5 * var(--u)); }
.nl-text { margin: 0; font: 400 max(12px, calc(12 * var(--u)))/1.5 var(--sans); }
.nl-row { display: flex; align-items: stretch; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.nl input[type="email"] { flex: 1; width: 0; min-width: 0; height: calc(40 * var(--u)); min-height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent;
  font: 400 max(14px, calc(14 * var(--u)))/1 var(--sans); color: var(--ink); }
.nl input[type="email"]::placeholder { color: var(--grey); }
.nl input[type="email"]:focus { outline: none; border-bottom-color: var(--purple); }
.nl .pill { height: calc(40 * var(--u)); min-height: 40px; padding: 0 calc(18 * var(--u)); font-size: max(14px, calc(14 * var(--u))); }
.nl .hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { margin: 0; min-height: 1.4em; font: 400 max(11px, calc(11 * var(--u)))/1.4 var(--mono); letter-spacing: -0.02em; color: var(--grey); }
.nl-msg.ok { color: var(--purple); }
.nl-msg.err { color: var(--orange); }
.nl-small { margin: 0; font: 400 max(10px, calc(9.5 * var(--u)))/1.4 var(--mono); color: var(--grey); letter-spacing: -0.02em; }
.dates-col .nl { margin-top: calc(56 * var(--u)); }

/* ---------- 404 ---------- */
.notfound p { font: 400 max(15px, calc(18 * var(--u)))/1.4 var(--sans); margin: 0; }
/* page not found: the letters of the name fall (site.js) */
.fall { position: fixed; inset: 0; z-index: 21; pointer-events: none; overflow: hidden; }
.fall i { position: absolute; font-style: normal; line-height: 1; white-space: pre; transform-origin: 50% 60%; will-change: transform; }
.logo.fallen span { visibility: hidden; }
@media print { .fall { display: none; } .logo.fallen span { visibility: visible; } }
.notfound .nf-big { font: 400 calc(35 * var(--u))/1.1 var(--mono); letter-spacing: calc(-2.5 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.reach .pf, .center .pf { display: none; }
.credits .cr-where { display: none; }
/* on a work's own page its captions don't repeat its title; a short quote and "new dates by email" are options */
.work figcaption .cap-t, .top-quote, .nl-hint { display: none; }
.top-quote { margin: 0; font: 400 max(13px, calc(13 * var(--u)))/1.4 var(--mono); letter-spacing: -0.03em; }
.top-quote .tq-by { display: block; margin-top: calc(4 * var(--u)); font-size: max(10px, calc(9 * var(--u))); color: var(--grey); }
.nl-hint button { color: var(--grey); transition: color .15s ease; }
.nl-hint button:hover, .nl-hint button:focus-visible { color: var(--purple); }
/* start page: keyboard focus shows in white over the photo */
.is-home .menu a:focus-visible, .is-home .logo:focus-visible, .is-home .home-next a:focus-visible, .is-home .lang:focus-visible { outline-color: #fff; }
/* small phones: three next dates on the start page (the fourth would sit on the dancers); white things at the bottom get a soft shadow */
@media (max-width: 899px) and (max-height: 700px) { .home-next li:nth-child(n+4) { display: none; } }
/* phones, start page: a soft shadow under the white bar and icons (on the icons themselves, not on their box:
   a shadow on the box would trap the sign-up card, which is placed on the whole screen, inside the small box of the icons) */
@media (max-width: 899px) { .is-home .player, .is-home .corner .nl-btn, .is-home .corner .ig { filter: drop-shadow(0 0 7px rgba(40, 20, 80, .45)); } }

/* ---------- small screens (phones, small tablets) ---------- */
@media (max-width: 899px) {
  :root { --u: 1px; }
  .menu { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: calc(14px + env(safe-area-inset-top, 0px)); padding-left: 0; }
  .menu li { font-size: 26px; line-height: 27px; letter-spacing: -1.9px; }
  .menu .ghost { color: var(--ghost); }
  .is-home .menu .ghost { color: #fff; }
  .logo { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); padding-right: 0; font-size: 36px; line-height: 32px; letter-spacing: -1.9px; }
  .is-home .menu, .is-home .logo { position: fixed; }

  /* scrolling down: the name stays and shrinks to half its size, the menu comes back in one line in a slim
     white bar at the top (the mirror of the bottom bar). --hp and --bar go from 0 to 1 with the scroll (site.js). */
  .site:not(.is-home) .menu { z-index: 18; }
  .site:not(.is-home) .logo { position: fixed; transform-origin: 100% 0; transform: scale(calc(1 - .5 * var(--hp, 0))); }
  .site:not(.is-home) .minibar { display: block; position: fixed; z-index: 19; left: 0; right: 0; top: 0; height: calc(66px + env(safe-area-inset-top, 0px));
    padding: calc(17px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    background: linear-gradient(to bottom, #fff 66%, rgba(255,255,255,0)); opacity: var(--bar, 0); pointer-events: none; }
  .site.bar-on:not(.is-home) .minibar { pointer-events: auto; }
  .minibar ul { display: flex; gap: 13px; list-style: none; margin: 0; padding: 0; }
  .minibar li { font: 400 17px/1 var(--mono); letter-spacing: -1.9px; white-space: nowrap; }
  .minibar a, .minibar span { color: var(--ink); }
  .minibar .ghost { color: var(--ghost); }
  .minibar a { position: relative; }
  .minibar a::after { content: ""; position: absolute; inset: -12px -6px; }

  .col, .dates-col, .about-col { margin-left: 0; width: auto; padding: 150px max(16px, env(safe-area-inset-right, 0px)) 110px max(16px, env(safe-area-inset-left, 0px)); }
  .col > * + * { margin-top: 30px; }
  .col > .sr + * { margin-top: 0; }
  .col > * + .credits, .col > * + .dates { margin-top: 30px; }
  .col > * + .links { margin-top: 12px; }
  figcaption .cr { display: block; }
  figcaption .cr::before { content: none; }
  .page-title { font-size: 22px; line-height: 26px; letter-spacing: -1.6px; }
  .page-title small, .works-list small { display: block; margin: 3px 0 0; font-size: 11px; line-height: 1.25; letter-spacing: -0.4px; vertical-align: 0; }
  .page-title + figure { margin-top: 18px; }
  .text p { font-size: 15.5px; line-height: 1.55; }
  .credits, .links { font-size: 13px; }
  figcaption { font-size: 10px; margin-top: 6px; }
  .press blockquote p { font-size: 16px; }
  .press footer { font-size: 10px; }
  .section-title { font-size: 22px; letter-spacing: -1.6px; margin-bottom: 12px; }
  .col > .sub { margin-top: 44px; }
  .sub { padding-top: 22px; }
  .sub h2 { font-size: 22px; line-height: 26px; letter-spacing: -1.6px; }
  .sub h2 small { display: block; margin: 4px 0 0; font-size: 11px; letter-spacing: -0.4px; vertical-align: 0; }
  .col > .next-work { margin-top: 56px; }
  .next-work { font-size: 22px; line-height: 26px; letter-spacing: -1.6px; }
  .next-work small { font-size: 11px; letter-spacing: -0.4px; margin-bottom: 6px; }

  .works-list { padding-top: 0; }
  .works-list li { font-size: 24px; line-height: 27px; letter-spacing: -1.7px; }
  .works-list li + li { margin-top: 16px; }
  .works-list .peek, .next-work .peek { display: none; }
  small > * + .wnx { margin-left: 0; }
  .works-list small .wnx, .works-list small .ws { display: block; margin: 2px 0 0; }
  .works-list .wy + .ws { margin-left: 0; }
  .series-row { flex-direction: column; gap: 10px; }
  .series-row + .series-row { margin-top: 10px; }
  .series .si.crop img { aspect-ratio: 1.6; object-fit: cover; object-position: var(--pp, 50% 50%); }
  .watch { gap: 14px; }
  .watch-img { width: 132px; }
  .watch-t { font-size: 15px; letter-spacing: -0.9px; }
  .watch-txt { font-size: 11px; }
  .home-next { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(146px + env(safe-area-inset-top, 0px)); margin-left: 0; }
  .home-next li { font-size: 12.5px; line-height: 1.38; }
  .home-next li + li { margin-top: 8px; }
  .mail .copied { position: static; display: block; margin: 4px 0 0; }

  .about-portrait { width: 78%; max-width: 360px; }

  .dates, .dates tbody, .dates tr, .dates td { display: block; width: auto !important; }
  .dates tr.yr { display: block; border-top: 0; padding: 22px 0 6px; }
  .dates tr.yr th { display: block; padding: 0; font-size: 19px; letter-spacing: -1.3px; }
  .dates tbody.upcoming + tbody.past tr.yr { padding-top: 0; }
  .dates tr:not(.yr) { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "d w" "d c" "d v"; column-gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
  .dates.next tr:not(.yr) { grid-template-areas: "d c" "d v"; }
  .dates td { padding: 0; }
  .dates .c { white-space: normal; }
  .dates .v::before { content: none; }
  .dates tr:not(.up) .c, .dates tr:not(.up) .v { color: var(--grey-strong); }
  .dates tr.up .c, .dates tr.up .v { font-weight: 400; color: var(--ink); }
  .dates tbody.upcoming tr.last-up { margin-bottom: 26px; padding-bottom: 9px; border-bottom: 1px solid var(--ink); }
  .dates .tag { font-size: 9px; display: inline-block; }
  .dates .wn { white-space: normal; }
  .filters { font-size: 12px; gap: 6px 16px; margin-bottom: 14px !important; }

  .center { padding: 150px 16px 120px; align-items: center; }
  .center-inner { gap: 20px; }
  .pill { font-size: 16px; }
  .nl-title { font-size: 24px; letter-spacing: -1.7px; }
  /* x: the sentence centred on three lines */
  .x-line { flex-direction: column; gap: 16px; font-size: 18px; }

  /* bottom bar: player left, instagram right; white strip so text never runs under it */
  .player { left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); margin: 0; gap: 2px; }
  .player .pl-text { font-size: 17px; letter-spacing: -1.9px; }
  .player .pl-btn { width: 28px; height: 26px; }
  .player .pl-btn svg { width: 15px; height: 15px; }
  .corner { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; gap: 16px; }
  .ig svg { width: 26px; height: 26px; }
  .nl-btn svg { width: 25px; height: 25px; }
  .ig .ig-handle { display: none; }
  .corner:has(.ig:hover) .nl-btn { opacity: 1; }
  /* phones: the sign-up opens as a card above the bottom bar (and above the keyboard: --kb, site.js) */
  .nl-pop { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(58px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
    width: auto; min-width: 0; max-width: 420px; margin-left: auto; padding: 18px 18px 14px; border-radius: 16px; }
  .menu a, .player button, .filters button, .dates-note a, .works-list a, .next-work a, .nl-btn { position: relative; }
  .menu a::after, .player button::after, .filters button::after, .dates-note a::after, .works-list a::after, .next-work a::after, .ig::after, .nl-btn::after { content: ""; position: absolute; inset: -9px -8px; }
  .menu a::after { inset: -5px -8px; }
  .works-list a::after { inset: -8px -14px; }
  .site:not(.is-home)::after { content: ""; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: calc(54px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 18px); pointer-events: none; transition: height .35s cubic-bezier(.2, .7, .2, 1); }
  /* while a song plays, its title sits just above the bar: the white floor rises to hold it (the page text fades out before it) */
  html.is-music .site:not(.is-home)::after { height: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* phones: the tall version of the photo (the wall and the floor continue), filling the screen */
  .home-photo { background: #5d4a9a; }
  .home-photo img { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; object-fit: cover; object-position: 50% 62%; -webkit-mask-image: none; mask-image: none; }
  .home-photo picture { display: contents; }
  .player .pl-list svg { width: 15px; height: 15px; }
  .player .pl-title { font-size: 14px; line-height: 1.5; }
  .player .pl-note { bottom: calc(100% + 32px); }
  .player { --plb: 3px; }
  .pl-queue { bottom: calc(100% + var(--plb) - 7px); gap: 0; }   /* the 7px padding of each song: its text sits where the title was */
  .pl-queue li { width: calc(100vw - 32px); }
  .pl-queue button { display: block; width: 100%; padding: 7px 0; font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-tap-highlight-color: transparent; }
  .player.q-open .pl-note { opacity: 0; }
  /* phones: the list sits on a white veil that rises from the bottom bar (the page text stays out of the way) */
  .pl-queue::before { inset: -66px auto -12px -16px; width: 100vw; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 46px); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
  .is-home .pl-queue::before { display: none; }   /* start page: the songs straight on the photo, in orange (options: white, or on a purple band) */
}

@media (min-width: 600px) and (max-width: 899px) {
  .col, .about-col { max-width: 640px; }
  .dates-col { max-width: 720px; }
  .menu li { font-size: 30px; line-height: 31px; letter-spacing: -2.1px; }
  .logo { font-size: 42px; line-height: 38px; letter-spacing: -2.2px; }
  .langs { top: calc(98px + env(safe-area-inset-top, 0px)); }   /* "en fr" sits under the bigger name, never on it */
  .col, .dates-col, .about-col { padding-top: 170px; }
}
@media (max-width: 340px) {
  .player .pl-btn { width: 25px; }
  .player .pl-text { font-size: 16px; }
  .minibar ul { gap: 10px; }
  .minibar li { font-size: 15px; letter-spacing: -1.6px; }
}
@media (max-width: 380px) {
  .logo { font-size: 32px; line-height: 29px; }
  .langs { top: calc(77px + env(safe-area-inset-top, 0px)); }
  .menu li { font-size: 24px; line-height: 25px; }
  .dates tr:not(.yr) { grid-template-columns: 92px minmax(0, 1fr); column-gap: 8px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .dates.unroll tr:not(.in) { opacity: 1; }
}
/* printing a page gives a clean sheet, like a programme: the name, the work, its text, credits and dates */
@media print {
  @page { margin: 16mm 14mm; }
  .player, .corner, .menu, .minibar, .skip, .glow, .walk, .vx-tab, .vx-panel, .video, .watch, .next-work, .peek, .hero-film, .peek-film, .filters, .dates-note, .home-next { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .site { padding: 0 !important; }
  .logo { position: static !important; transform: none !important; display: block; margin: 0 0 8mm; font-size: 26pt !important; line-height: .95 !important; color: #000 !important; }
  .col, .work { margin: 0 !important; width: auto !important; padding: 0 !important; }
  .work > .work-side, .work-side > .side-in { display: block !important; position: static !important; padding: 0 !important; width: auto !important; }
  .work { display: block !important; }
  .work > * + *, .work-side .blk-dates { margin-top: 6mm !important; }
  figure img { max-height: 95mm; width: auto; }
  .text p, .lead { color: #000 !important; font-size: 10.5pt !important; line-height: 1.45 !important; }
  .press blockquote p { font-size: 10pt !important; }
  .credits, .dates { font-size: 9pt !important; }
  .page-title { font-size: 20pt !important; }
  a { color: inherit !important; }
  .series, .sub { break-inside: avoid; }
  .blk-credits, .blk-dates, .press blockquote { break-inside: avoid; }
  .dates.unroll tr, .dates tr { opacity: 1 !important; animation: none !important; }
  .lang, .langs, .tape, .to-top { display: none !important; }
  .section-title, .sub h2, .page-title { break-after: avoid; }
  figure:has(.video) { display: none !important; }
}