@font-face { font-family: "Telegraphem"; src: url("../fonts/telegraphem.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
/* Alexis Delong — portfolio
   Base visuelle : lisakorkunova.com. Page claire et presque vide, une seule rangée
   de colonnes en mono capitales (nom / description / liste numérotée), aperçu au
   survol en bas de page. Au-dessus : un bandeau pleine largeur. */

:root {
  --bg: #f5f5f5;
  --ink: #1a1a1a;
  --muted: #6e6e6e;
  --hover: rgba(26, 26, 26, 0.4);
  --slot: #ebebeb;
  --line: #c9c9c9;
  --font: "Telegraphem", "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs: clamp(11px, 0.45vw + 6.5px, 14px);
  --gut: clamp(10px, 1vw, 16px);
  --cols: 22fr 36fr 42fr;
  --c1: 0.22; /* part de la 1re colonne (pour centrer la mosaïque sur la page) */
  --banner-h: clamp(180px, 25vw, 560px); /* suit la largeur de la fenêtre (et non sa hauteur) : la photo ne rétrécit pas dans une fenêtre basse */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font: 400 var(--fs)/1.5 var(--font);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.has-player { padding-bottom: 4.2em; }
body.has-player .links { bottom: 4.2em; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }

button { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.skip { position: absolute; left: var(--gut); top: -3em; z-index: 50; background: var(--bg); padding: 0.4em 0.6em; }
.skip:focus { top: var(--gut); }

.page { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 5em; } /* place pour les contacts fixes */

/* ---------- Bandeau pleine largeur ---------- */
.banner {
  position: relative; width: 100%;
  height: var(--banner-h);
  background: var(--slot);
  overflow: hidden;
}
.banner img, .banner video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Photos : le portrait entier dans la colonne 1 (au-dessus du nom), puis les autres photos
   collées les unes aux autres, rognées pour remplir le reste de la largeur. Même grille que la rangée du dessous. */
.banner--photos { background: transparent; }
.banner__row {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: var(--cols); grid-template-rows: minmax(0, 1fr);
  column-gap: var(--gut);
  padding: var(--gut) var(--gut) 0;
}
.banner__row .banner__portrait {
  position: static; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 80%; /* remplit toute la colonne : le vide à droite égale la marge de gauche */
}
.banner__strip { grid-column: 2 / -1; display: flex; min-width: 0; min-height: 0; }
.banner__row .banner__strip.is-full { grid-column: 1 / -1; }
.banner__row .banner__strip img { position: static; flex: 1 1 0; width: auto; min-width: 0; height: 100%; }
.banner__label { position: absolute; left: var(--gut); bottom: var(--gut); color: var(--muted); }

/* ---------- Rangée : nom / (présentation + grille) / infos ---------- */
.intro {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gut);
  align-items: start;
  padding: 1.6em var(--gut) 0;
}
.id { grid-area: 1 / 1; }
.mid { grid-area: 1 / 2 / 2 / -1; min-width: 0; } /* présentation + grille : de la colonne 2 jusqu'au bord droit, comme les deux photos du bandeau */
.name, .roles, .about, .works__label, .aboutdd__label { font: inherit; letter-spacing: inherit; }
.name { overflow-x: clip; } /* le nom seul, en Telegraphem */
.roles { margin-top: 1.5em; }
.mid { position: relative; }
.sitenav { position: absolute; top: 0; right: 0; }
.aboutdd, .end--m, .works__teaser, .works__back, .works__open { display: none; }   /* « about_ » déroulant et « _ » final : téléphone seulement */
.about { max-width: 34ch; margin-left: 50%; }   /* ordinateur : sous le début de la troisième photo (milieu de la bande de droite) */

.works { margin-top: 3em; }
.works__label { width: 62.5%; text-align: center; margin-left: calc(50vw - 2 * var(--gut) - (100vw - 4 * var(--gut)) * var(--c1) - 31.25%); } /* « Selected works: » centré au-dessus de la mosaïque */

/* Grille d'images carrées en noir et blanc : elles passent en couleur au survol */
.grid {
  list-style: none; padding: 0; margin-top: 1.5em;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; /* vignettes collées */
  width: 62.5%; /* ordinateur : mosaïque (agrandie de 25 % par rapport à la demi-largeur), centrée sur la page */
  margin-left: calc(50vw - 2 * var(--gut) - (100vw - 4 * var(--gut)) * var(--c1) - 31.25%);
}
.item { position: relative; min-width: 0; }
.tile {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; text-align: left;
  position: relative; background: var(--slot); overflow: hidden; color: var(--ink);
}
/* Emplacement encore vide : simple cadre fin, pour ne pas former un bloc gris */
.tile:not(:has(img)) { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.tile:hover { text-decoration: none; }
.tile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter 0.25s ease;
}
.item:hover .tile img, .tile:focus-visible img, .item.is-playing .tile img { filter: none; }
/* Image de repos fournie : posée sur la couleur, elle s'efface au survol */
.tile.has-bw img { filter: none; }
.tile img.bw { position: absolute; inset: 0; transition: opacity 0.25s ease; }
.item:hover .tile img.bw, .tile:focus-visible img.bw, .item.is-playing .tile img.bw { opacity: 0; }
.item.is-playing .tile { outline: 2px solid var(--bg); outline-offset: -2px; }

/* Légende : lue par les lecteurs d'écran, visible seulement sans survol possible */
.cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Infos du travail survolé : colonne de gauche, alignées sur « producer, composer, sound artist »
   et au niveau de la vignette survolée (le décalage vertical est posé par main.js) */
.info { grid-area: 1 / 1; align-self: start; min-width: 0; min-height: 4.5em; }
.info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .m { color: var(--muted); }
.info .role, .listen__meta.listen__role { color: inherit; font-weight: 600; } /* ta fonction en gras */

/* ---------- Liens du bas ---------- */
/* Contacts : fixés en bas de la fenêtre, à gauche (dans l'alignement du nom), visibles même avant d'atteindre le bas de la page */
.links {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 0.8em var(--gut) 0.9em;
  background: var(--bg);
  display: flex; justify-content: flex-start;
}
.links__in { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; } /* Instagram au-dessus du mail */

/* ---------- Lecteur audio ---------- */
.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gut); align-items: center;
  padding: 0.9em var(--gut);
  background: var(--bg); border-top: 1px solid var(--ink);
}
.player[hidden] { display: none; }
.player__title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__seek { display: flex; align-items: center; gap: 1em; min-width: 0; }
.player__time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.player__ctrl { display: flex; gap: 2em; }
.player__ctrl button:hover { text-decoration: underline; text-underline-offset: 0.25em; }

#seek {
  -webkit-appearance: none; appearance: none;
  flex: 1; min-width: 0; height: 18px; background: transparent; cursor: pointer;
  --p: 0%;
}
#seek::-webkit-slider-runnable-track {
  height: 1px; background: linear-gradient(to right, var(--ink) var(--p), var(--line) var(--p));
}
#seek::-moz-range-track { height: 1px; background: var(--line); }
#seek::-moz-range-progress { height: 1px; background: var(--ink); }
#seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px;
  border-radius: 50%; background: var(--ink); border: 0;
}
#seek::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 0; }

/* ---------- Pages d'écoute (listen/*.html) ---------- */
.listen {
  position: relative; flex: 1;
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gut); align-items: start;
  padding: 1.6em var(--gut) 0;
}
/* La vidéo / pochette et les liens : centrés dans la page. Le reste (nom, contacts) ne bouge pas. */
.listen__center {
  position: absolute; left: 50%; top: 50svh; transform: translate(-50%, -50%);
  display: flex; align-items: flex-start; gap: calc(var(--gut) * 2);
}
.listen__id { grid-column: 1; }
.listen__title, .listen__label { font: inherit; letter-spacing: inherit; }
.listen__title { margin-top: 3em; }
.listen__meta { color: var(--muted); }
.listen__cover { display: block; width: clamp(260px, 34vw, 560px); max-width: 640px; height: auto; aspect-ratio: 1; object-fit: cover; }
.listen__cover--video { aspect-ratio: auto; }
.listen__cover--video { background: #000; }
.listen__cover--video { align-self: stretch; position: relative; } /* la vidéo prend exactement la hauteur de la liste de liens */
.listen__cover--video video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.listen__cover--video:hover { text-decoration: none; }
/* un seul lien (film) : la vidéo garde son propre rapport, centrée sur le lien */
.listen__cover--film { align-self: center; aspect-ratio: 1800 / 640; }
.listen__cover--top { align-self: center; aspect-ratio: 1800 / 640; }
.listen__links { flex: none; }
/* page de performance : texte, dates à venir et passées */
.listen__links--show { width: clamp(240px, 24vw, 380px); }
.listen__links--show .listen__label { margin-top: 2em; }
.listen__links--show .listen__label:first-child { margin-top: 0; }
.listen__text { margin-top: 1.5em; text-transform: none; text-wrap: pretty; }
.listen__links--show li { margin-bottom: .5em; }
.listen__past { color: var(--muted); }
.listen__more { margin-top: 2em; }
.listen__links ul { list-style: none; padding: 0; margin-top: 1.5em; }
.listen__links li a { display: inline-block; }
.listen__links ul:hover a { color: var(--hover); }
.listen__links ul a:hover { color: var(--ink); text-decoration: none; }

/* ---------- Tablette ---------- */
@media (max-width: 1000px) {
  :root { --cols: 24fr 28fr 48fr; --c1: 0.24; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Mobile (téléphone en portrait, ou en paysage) ---------- */
/* ---------- Accueil : même design sur téléphone et ordinateur ---------- */
  /* Accueil : deux colonnes. À gauche, une colonne d'infos (texte tout à l'horizontale, collée en haut pendant le défilement) ;
     à droite, la photo principale puis les projets de la grille, pleine hauteur et collés les uns aux autres.
     « about_ » et « Selected works_ » sont deux menus déroulants (underscore clignotant). */
  :root { --lw: 44%; }
  body:not(.listen-page) .page { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch; padding-bottom: 0; }
  .intro, .mid, .works { display: contents; }
  .banner--photos { grid-column: 2; grid-row: 1; }
  .works__panel { grid-column: 2; grid-row: 2; display: none; }
  .works.is-open .works__panel { display: block; animation: wfade 0.6s ease both; }
  .works.is-closing .works__panel { animation: wfadeout 0.45s ease both; }
  .works.is-open.is-closing .works__teaser { display: block; animation: wfade 0.6s ease both; }
  @keyframes wfadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes wfade { from { opacity: 0; } to { opacity: 1; } }
  /* tant que « Selected works_ » n'est pas ouvert : une image à la place de la grille ; « back_ » revient à cet état */
  .works__teaser { display: block; grid-column: 2; grid-row: 2; align-self: stretch; min-height: 0; }   /* juste sous la première photo, jusqu'en bas de page */
  .works__teaser img { display: block; width: 100%; height: 100%; min-height: 60vw; object-fit: cover; }
  .works__ctrl { display: none; }
  .works__open { display: block; }
  .works__ctrl-old { grid-column: 1; grid-row: 2; align-self: start; padding: 0 var(--gut) 0 calc(var(--gut) + env(safe-area-inset-left)); }
  .works__back, .works__open { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; margin-top: 0.2em; padding: 0.2em 0; }
  .works.is-open .works__ctrl { display: none; }   /* « back_ » remplace « Selected works_ » (et suit le défilement, dans la colonne collée) */
  /* ouvert : le texte disparaît ; « back_ » (au-dessus) et « Selected works » restent fixes, visibles */
  body.works-open .aboutdd { visibility: hidden; }   /* le texte disparaît mais garde sa place : « Selected works » ne bouge pas */
  .works__open:hover, .works__back:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
  .logo__a { display: block; color: inherit; }
  .logo__a:hover { color: #347393; text-decoration: none; }   /* bleu de la deuxième photo : le logo recharge l'accueil */
  .logo__l { transition: color 0.2s ease; }
  .id { grid-column: 1; grid-row: 1 / span 3; align-self: start; min-width: 0;   /* le haut de la page défile et s'éloigne : seul « back_ » reste fixe */
        padding: calc(1.2em + env(safe-area-inset-top)) var(--gut) 1.5em calc(var(--gut) + env(safe-area-inset-left)); }
  .name { white-space: nowrap; margin-bottom: 1.6em; }
  .name { container-type: inline-size; max-width: 240px; }
  .logo { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); aspect-ratio: 1; width: 100%; }   /* le nom en petit logo carré */
  .logo__l { display: flex; align-items: center; justify-content: center; font-size: 17cqw; line-height: 1; }
  .roles { margin-top: max(0px, calc(50svh - 290px)); }   /* le texte (hors logo) descend vers le milieu de l'écran */
  .sitenav, .about { display: none; }
  .cursor { animation: caret 1.1s steps(1, end) infinite; }   /* underscore qui clignote, comme le curseur d'un traitement de texte */
  @keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
  .aboutdd { display: block; margin-top: 3.7em; }   /* « about_ » et « Selected works_ » se suivent, sans écart */
  .aboutdd__panel, .aboutdd__in { display: block; }   /* les infos sont toujours visibles */
  .aboutdd { font-family: "Telegraphem", "IBM Plex Mono", ui-monospace, monospace; }   /* infos dans la police du logo */
  .aboutdd__text { padding-top: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .aboutdd__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2em; padding: 1.5em 0 1.5em; }
  /* « Selected works_ » : dans la colonne de gauche, à hauteur de la première image de la grille (qui suit directement la photo) */
  .works__label { width: auto; margin: 0; text-align: left; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .works.is-open .works__label { cursor: default; }
  .end--d { display: none; }
  .end--m { display: inline; }
  .works__in { min-width: 0; }
  .grid { grid-template-columns: 1fr; width: auto; margin: 0; }
  .info { display: none; }
  /* Header : la photo principale, dans la colonne de droite */
  .banner--photos { height: auto; }
  .banner--photos .banner__row { position: relative; inset: auto; padding: 0; column-gap: 0; grid-template-columns: 1fr; grid-template-rows: auto; }
  .banner--photos .banner__row .banner__portrait { height: auto; aspect-ratio: 3 / 4; max-height: 100svh; object-fit: cover; object-position: 50% 55%; }
  .banner--photos .banner__row .banner__strip { display: none; }

/* Ordinateur : texte à gauche, images sur tout le reste de la largeur (mêmes marges des deux côtés) ; grille 3 × 3, infos à gauche au survol */
@media (min-width: 701px) {
  :root { --lw: clamp(300px, 28vw, 420px); }
  body:not(.listen-page) .page { grid-template-columns: var(--lw) minmax(0, 1fr); padding-right: var(--gut); }
  .name { max-width: 300px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .info { display: block; position: fixed; z-index: 3; left: calc(var(--gut) + env(safe-area-inset-left)); top: 0; width: calc(var(--lw) - 2 * var(--gut)); min-height: 0; margin: 0; }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
  :root { --cols: 1fr; }
  .listen-page:not(.about-page) .links { display: none; }   /* pages projet : pas de liens Instagram / mail sur mobile */
  .listen-page:not(.about-page) .page { padding-bottom: 2em; }
  /* Contacts : fixés en bas, en blanc (inversé sur fond clair) */
  .links {
    position: fixed; background: transparent; color: #fff; mix-blend-mode: difference;
    padding: 0 var(--gut) calc(0.9em + env(safe-area-inset-bottom));
  }
  .links a { color: #fff; }
  .links { justify-content: flex-end; }
  .links__in { align-items: flex-end; }   /* Instagram et mail alignés à droite, en bas */
  .listen__id { grid-column: 1; }
  .listen { row-gap: 1.5em; }
  .listen__center { position: static; transform: none; flex-direction: column; gap: 1.5em; grid-column: 1; }
  .listen__cover { width: 100%; }
  .listen__cover--video { aspect-ratio: 1280 / 492; }
  .listen__cover--film, .listen__cover--top { aspect-ratio: 1800 / 640; }
  .listen__links--show { width: 100%; }
  .listen__title { margin-top: 1.5em; }
  .player { grid-template-columns: 1fr auto; row-gap: 0.4em; }
  .player__seek { grid-column: 1 / -1; grid-row: 2; }
  body.has-player { padding-bottom: 6.5em; }
  .page { padding-bottom: 6em; }
}

@media (hover: none) {
  .tile img { filter: none; }
  .tile img.bw { opacity: 0; }
  .info { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile img, .tile img.bw, .aboutdd__panel, .aboutdd__in { transition: none !important; }
  .cursor, .works__panel, .works__teaser { animation: none !important; }
}

/* ---------- Page About ---------- */
/* photo : même largeur et même hauteur que le texte (comme la vidéo des pages d'écoute avec la liste) */
.about-page__photo { background: transparent; width: clamp(260px, 34vw, 520px); }
.about-page__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.about-page__text { width: clamp(260px, 34vw, 520px); text-transform: none; text-wrap: pretty; }
.about-page__text p + p { margin-top: 1.5em; }
.about-page__text { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
  .listen__cover.about-page__photo { width: 100%; aspect-ratio: 1924 / 1154; }
  .about-page__text { width: 100%; }
}

/* Mobile : uniquement les images floues (au repos), jamais la couleur ; grille continue, sans légende */
@media (max-width: 700px), (hover: none) and (pointer: coarse) and (max-height: 520px) {
  .tile img.bw,
  .item:hover .tile img.bw, .tile:focus-visible img.bw, .item.is-playing .tile img.bw { opacity: 1; }
}


/* page contact */
.contact { display: flex; flex-direction: column; gap: 1.6em; width: clamp(260px, 34vw, 520px); text-transform: none; }
.contact__f { display: flex; flex-direction: column; gap: 0.3em; }
.contact__f span { text-transform: uppercase; }
.contact input, .contact textarea { font: inherit; letter-spacing: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0.3em 0; width: 100%; outline: none; resize: vertical; }
.contact input:focus, .contact textarea:focus { border-bottom-width: 2px; }
.contact__send { align-self: flex-start; font: inherit; text-transform: uppercase; color: inherit; background: none; border: 0; padding: 0.2em 0; cursor: pointer; }
.contact__note { text-transform: none; }
@media (max-width: 700px) { .contact { width: 100%; } }

/* Accueil : Contact et Instagram toujours visibles, en bas à gauche */
body:not(.listen-page) .links--home { display: flex; position: fixed; left: 0; right: auto; bottom: 0; z-index: 7; background: var(--bg); width: var(--lw); padding-top: 0.8em; color: var(--ink); mix-blend-mode: normal; justify-content: flex-start;
  padding: 0.8em var(--gut) calc(0.9em + env(safe-area-inset-bottom)) calc(var(--gut) + env(safe-area-inset-left)); }
body:not(.listen-page) .links--home a { color: var(--ink); }
body:not(.listen-page) .links--home .links__in { align-items: flex-start; }

/* About : même page, autre état. Il ne reste que le logo et « back_ » à gauche ; la photo du haut devient celle d'About, le texte remplace la seconde photo / la grille */
.aboutview__photo[hidden], .aboutview[hidden] { display: none; }
body.about-open .roles, body.about-open .aboutdd, body.about-open .works__open, body.about-open .works__teaser, body.about-open .banner--photos { display: none; }
body.about-open .aboutview__photo { display: block; grid-column: 2; grid-row: 1; animation: wfade 0.6s ease both; }
body.about-open .aboutview__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; max-height: 100svh; object-fit: cover; object-position: 72% 50%; filter: grayscale(1); }
body.about-open .aboutview { display: block; grid-column: 2; grid-row: 2; align-self: start; padding: 1.5em var(--gut) 5em 1.2em; text-transform: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; animation: wfade 0.6s ease both; }
body.about-open .aboutview p + p { margin-top: 1.5em; }
@media (min-width: 701px) { body.about-open .aboutview { padding-right: 0; max-width: 60ch; } body.about-open .aboutview__photo img { aspect-ratio: 1400 / 840; object-position: 50% 50%; } }
@media (prefers-reduced-motion: reduce) { body.about-open .aboutview, body.about-open .aboutview__photo { animation: none !important; } }

/* Pile « back_ / Selected works / description / vidéo » : sous le logo, collée en haut pendant le défilement quand la grille (ou About) est ouverte */
body.works-open .id, body.about-open .id { align-self: stretch; }
body.about-open .stack { position: sticky; top: 3.4em; z-index: 5; }
body.works-open .stack { position: sticky; top: 1.2em; z-index: 5; margin-top: -2.2em; padding-top: 2.2em; padding-bottom: 0.5em; background: var(--bg); }
body.works-open .id { position: relative; }
body.works-open .works__open, body.works-open .works__back, body.about-open .works__back { display: block; margin: 0; }
body.works-open .works__back { position: absolute; left: 0; top: 0; }   /* « back_ » au-dessus, sans pousser « Selected works » */
.workview__info[hidden] { display: none; }
body.work-open .info { display: none; }
.workview__info { margin-top: 7.5em; animation: wfade 0.6s ease both; }
.wi__title { margin-bottom: 0.2em; }
.wi__m { color: var(--muted); }
.wi__role { color: inherit; font-weight: 600; }
.workview__info .listen__links ul { margin-top: 1em; }
.workview__info .listen__label { margin-top: 1.5em; }
.workview__info .listen__text { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.wi__more { margin-top: 1.5em; }
.wi__more a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
/* grille ouverte : la seconde photo disparaît, la grille prend sa place ; la grille commence au niveau de la première ligne de la description (5 lignes sous « Selected works ») */
body.works-open .works__teaser img { min-height: 0; }
body .item.is-current .tile img { filter: none; }
body .item.is-current .tile img.bw { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .workview__info { animation: none !important; } }

/* la description est posée par main.js juste au-dessus de la vidéo */
body.works-open .workview__info { position: absolute; left: 0; right: 0; margin-top: 0; padding: 0 var(--gut) 0 calc(var(--gut) + env(safe-area-inset-left)); z-index: 2; }

.works.is-open .works__teaser { display: none; }
.works.is-open.is-closing .works__teaser { display: block; animation: wfade 0.6s ease both; }


/* Accueil : « producer… » pile entre le logo et « About » ; « About » et « Selected works » se suivent, sans marge, à hauteur du haut de la seconde photo */
body:not(.listen-page) .name { margin-bottom: 0; }
body:not(.listen-page) .roles { margin-top: var(--roles-mt, 1.5em); }
body:not(.listen-page) .aboutdd { margin-top: var(--about-mt, 1.5em); display: block; }
body:not(.listen-page) .aboutdd__text, body:not(.listen-page) .about { display: none; }
body:not(.listen-page) .aboutdd__links { padding: 0; }

/* « back_ » prend exactement la place d'« About » ; « Selected works » ne bouge pas */
body.works-open .stack { padding-top: 2.4em; }
body.works-open .stack .works__back { top: calc(2.2em - 1lh - 0.2em); margin-top: 0; }

/* Ordinateur : une seule photo sur l'accueil, plus petite, posée au milieu de la page ; elle laisse sa place à la grille quand « Selected works » s'ouvre */
@media (min-width: 701px) {
  .works__teaser, .works.is-open.is-closing .works__teaser { display: none !important; }
  body:not(.listen-page) .banner--photos { height: 100svh; overflow: visible; display: flex; align-items: center; justify-content: center; }
  body:not(.listen-page) .banner--photos .banner__row { position: static; inset: auto; display: block; padding: 0; width: auto; height: auto; }
  body:not(.listen-page) .banner--photos .banner__row .banner__portrait { display: block; width: auto; height: auto; max-width: 100%; max-height: 62svh; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 55%; }
  body.about-open .banner--photos, body.listen-open .banner--photos { display: none; }
  body.works-open:not(.listen-open) .banner--photos { opacity: 0.35; pointer-events: none; transition: opacity 0.5s ease; }   /* la photo reste en arrière-plan, atténuée, derrière la grille */
}
@media (min-width: 701px) {
  body.links-under:not(.listen-page) .links--home { left: auto; right: var(--lk-right); top: var(--lk-top); bottom: auto; width: auto; background: transparent; padding: 0; text-align: right; }
  body.links-under:not(.listen-page) .links--home .links__in { align-items: flex-end; }
}

/* Ordinateur, About : le logo reste ; la photo d'About + le texte occupent exactement le cadre de la photo de l'accueil ; « back_ » prend exactement la place d'« About » ; Contact / Instagram ne bougent pas */
.aboutbox { display: contents; }
@media (min-width: 701px) {
  body.about-open .roles, body.about-open .aboutdd { display: block; visibility: hidden; }
  body.about-open .id { position: relative; }
  body.about-open .stack { position: sticky; top: 1.2em; z-index: 5; margin-top: -2.2em; padding-top: 2.4em; padding-bottom: 0.5em; background: var(--bg); }
  body.about-open .stack .works__back { position: absolute; left: 0; top: calc(2.2em - 1lh - 0.2em); margin: 0; }
  body.about-open .aboutbox { display: flex; flex-direction: column; gap: 1.4em; position: fixed; z-index: 1; left: var(--ph-l); top: var(--ph-t); width: var(--ph-w); height: var(--ph-h); }
  body.about-open .aboutview__photo { flex: 1 1 0; min-height: 0; padding: 0; animation: wfade 0.6s ease both; }
  body.about-open .aboutview__photo img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; object-position: 72% 50%; }
  body.about-open .aboutview { flex: none; width: auto; max-width: none; padding: 0; margin: 0; align-self: auto; }
  body.about-open .aboutview p + p { margin-top: 1em; }
}

/* Ordinateur, Selected works : des vignettes carrées remplissent exactement le cadre de la photo de l'accueil (3 × 4) ; la rangée du bas reste blanche et accueille les infos au survol. Un clic ouvre la page d'écoute : mini vidéo et liens à la place de la photo, titre à gauche */
@media (min-width: 701px) {
  /* taille et position de la grille : centrée dans la page, mais jamais sur la colonne de gauche (fenêtres étroites ou hautes) */
  body.works-open { --gw: min(var(--ph-w), calc(100vw - var(--lw) - 4 * var(--gut))); --gl: max(calc(50vw - var(--gw) / 2), calc(var(--lw) + 2 * var(--gut))); }
  body.works-open .works__panel { position: fixed; left: var(--gl); top: calc(50vh - var(--gw) / 2); width: var(--gw); height: var(--gw); margin: 0; padding: 0; z-index: 1; }   /* grille 3 × 3 pile au milieu de la page */
  body.works-open .works__in { height: 100%; }
  body.works-open .grid { width: 100%; height: 100%; margin: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
  body.works-open .item { min-height: 0; }
  body.works-open .tile { height: 100%; aspect-ratio: 1; }
  body.works-open .info { display: block; z-index: 2; }   /* infos au survol : colonne de gauche, entre « sound artist » et « back_ » (position calculée en JS) */
  body.work-open .roles { visibility: hidden; }
  body.listen-open .works.is-open .works__panel, body.listen-open .works.is-open.is-closing .works__panel { display: none; }
  body.listen-open .info { display: none; }
  .listenview { display: none; }
  body.listen-open .listenview { display: flex; flex-direction: column; justify-content: center; gap: 1.6em; position: fixed; z-index: 1; left: var(--ph-l); top: var(--ph-t); width: var(--ph-w); height: var(--ph-h); animation: wfade 0.6s ease both; }
  .lv__video { background: #000; }
  .lv__video video { display: block; width: 100%; height: auto; }
  .listenview ul { list-style: none; padding: 0; margin: 0; }
  .listenview li { margin-bottom: 0.25em; }
  .listenview li a { display: inline-block; }
  .listenview ul:hover a { color: var(--hover); }
  .listenview ul a:hover { color: var(--ink); text-decoration: none; }
}

/* Mobile : une seule photo sur l'accueil, plus petite, à droite et au centre de la page (comme sur ordinateur) ; la grille prend sa place à l'ouverture */
@media (max-width: 700px) {
  body:not(.listen-page) .works__teaser, body:not(.listen-page) .works.is-open.is-closing .works__teaser { display: none !important; }
  body:not(.listen-page) .banner--photos { height: 100svh; overflow: visible; display: flex; align-items: center; justify-content: center; }
  body:not(.listen-page) .banner--photos .banner__row { position: static; inset: auto; display: block; padding: 0; width: 100%; height: auto; }
  body:not(.listen-page) .banner--photos .banner__row .banner__portrait { display: block; width: 100%; height: auto; max-width: none; max-height: 62svh; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 55%; }
  body.works-open .banner--photos { height: auto; align-items: flex-start; padding-top: var(--ph-t, 0px); }   /* la photo reste en place ; la première vignette apparaît juste dessous */
}

/* Mobile, About : ma photo remplace la photo de l'accueil (même cadre), la description vient dessous ; « back_ » prend la place d'« About » */
@media (max-width: 700px) {
  body.about-open:not(.listen-page) .roles, body.about-open:not(.listen-page) .aboutdd { display: block; visibility: hidden; }
  body.about-open:not(.listen-page) .id { position: relative; }
  body.about-open:not(.listen-page) .banner--photos { display: none; }
  body.about-open:not(.listen-page) .page { align-content: start; }   /* la description suit directement la photo */
  body.about-open:not(.listen-page) .stack { position: sticky; top: 1.2em; z-index: 5; margin-top: -2.2em; padding-top: 2.4em; padding-bottom: 0.5em; background: var(--bg); }
  body.about-open:not(.listen-page) .stack .works__back { position: absolute; left: 0; top: calc(2.2em - 1lh - 0.2em); margin: 0; }
  body.about-open:not(.listen-page) .aboutview__photo { grid-column: 2; grid-row: 1; padding: var(--ph-t, 0px) 0 0 0; }
  body.about-open:not(.listen-page) .aboutview__photo img { width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; object-position: 72% 50%; }
  body.about-open:not(.listen-page) .aboutview { padding: 1.4em var(--gut) 5em 0; }
}

/* Mobile : le texte de présentation est plus petit, centré verticalement sur sa vignette */
@media (max-width: 700px) {
  body.works-open .workview__info { font-size: 0.78em; line-height: 1.35; }
  body.works-open .workview__info .listen__links ul { margin-top: 0.7em; }
  body.works-open .workview__info .listen__label { margin-top: 1em; }
}

/* Mobile : netteté et description suivent le défilement (pilotées en JS) */
@media (max-width: 700px) {
  body.works-open .workview__info { animation: none; }
  body.works-open .tile img.bw { transition: none; }
  body.works-open:not(.about-open):not(.listen-page) .page { padding-bottom: 50svh; }
}